/* ═══════════════════════════════════════════════════════════════════════
 * TRIGGUI KIDS OVERLAY v7.0.0 — HÍBRIDO NIVEL DIOS
 * ───────────────────────────────────────────────────────────────────────
 * Paleta VARIADA hardcoded + future-proof con var(--triggui-accent).
 *
 * FORMAS COLORING BOOK MIXTAS (8 total):
 *
 * 4 OUTLINE NEGRAS (vacías para colorear):
 *   • Sol top-left
 *   • Diamante bottom-right  
 *   • Estrella mid-right top
 *   • Squiggle mid-left bottom
 *
 * 4 FILLED CON COLORES DISTINTOS VARIADOS:
 *   • Triángulo top-right:   CYAN    (#14C7DA)
 *   • Semicírculo bot-left:  CORAL   (#FF6B9D)
 *   • Dot mid-left top:      YELLOW  (#FFD60A)
 *   • Dot mid-right bot:     PURPLE  (#9B6BFF)
 *
 * ELEMENTOS HÍBRIDOS (var --triggui-accent con fallback):
 *   • Botón submit:    accent → fallback CORAL
 *   • Indicator toggle: accent → fallback YELLOW
 *   • Texto Kids activo: contrast → fallback NEGRO
 *
 * FUTURE-PROOF: si --triggui-accent algún día se propaga al :root,
 * automáticamente los elementos híbridos lo respetan.
 *
 * VERSIÓN: 7.0.0   FECHA: 2026-05-17
 * ═══════════════════════════════════════════════════════════════════════ */


/* ═══ TOKENS ═══ */
html[data-mode="kids"] #barraMagicaOverlay {
  --kids-canvas:    #FFFFFF;
  --kids-ink:       #000000;
  --kids-stroke:    2.5px;
  --kids-yellow:    #FFD60A;
  --kids-cyan:      #14C7DA;
  --kids-coral:     #FF6B9D;
  --kids-purple:    #9B6BFF;
  --kids-transit:   350ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ═══ 1. BACKGROUND BLANCO ═══ */
html[data-mode="kids"] #barraMagicaOverlay {
  background: var(--kids-canvas) !important;
  transition: background-color var(--kids-transit),
              opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}


/* ═══ 2. APAGAR EFECTOS ADULTOS ═══ */
html[data-mode="kids"] #barraAurora,
html[data-mode="kids"] #barraDust,
html[data-mode="kids"] #barraSparkIndicator {
  display: none !important;
}


/* ═══ 3. TEXTO NEGRO COMPLETO (preserva accent dinámico) ═══ */
html[data-mode="kids"] #barraMagicaOverlay .barra-magica-inner,
html[data-mode="kids"] #barraMagicaOverlay .barra-magica-inner *:not(.bm-w3):not(.bm-bocado-anchor):not(.bm-eco-anchor),
html[data-mode="kids"] #barraMagicaOverlay .bm-bocado-w,
html[data-mode="kids"] #barraMagicaOverlay .bm-eco-phrase {
  color: var(--kids-ink) !important;
}


/* ═══ 4. STREAK PILL ═══ */
html[data-mode="kids"] #barraStreak {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--kids-ink) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

html[data-mode="kids"] #barraStreak * {
  color: var(--kids-ink) !important;
}


/* ═══ 5. SKIP TOGGLE — indicator HÍBRIDO ═══ */
html[data-mode="kids"] #barraSkip .bm-skip-inner {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

html[data-mode="kids"] #barraSkip .bm-skip-seg,
html[data-mode="kids"] #barraSkip .bm-skip-seg-all {
  color: var(--kids-ink) !important;
}

/* Active "Kids" — contrast auto si accent llega, negro fallback */
html[data-mode="kids"] #barraSkip .bm-skip-seg-kids {
  color: var(--bm-accent-contrast, var(--kids-ink)) !important;
}

/* Indicator — accent del libro si llega, YELLOW fallback */
html[data-mode="kids"] #barraSkip .bm-skip-indicator {
  background: var(--bm-accent, var(--kids-yellow)) !important;
}


/* ═══ 5b. LANG TOGGLE — sticker claro (espejo del adulto, legible sobre blanco) ═══ */
html[data-mode="kids"] #barraLangToggle {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-mode="kids"] #barraLangToggle span {
  color: rgba(0, 0, 0, 0.5) !important;
}
html[data-mode="kids"] #barraLangToggle span.lang-active {
  color: #fff !important;
  background: #000 !important;
  box-shadow: none !important;
}


/* ═══ 6. INPUT WRAPPER STICKER ═══ */
html[data-mode="kids"] #barraInputWrap {
  background: var(--kids-canvas) !important;
  border: var(--kids-stroke) solid var(--kids-ink) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-mode="kids"] #barraInput {
  background: transparent !important;
  color: var(--kids-ink) !important;
  caret-color: var(--kids-ink);
  border: none !important;
  box-shadow: none !important;
}

html[data-mode="kids"] #barraInput::placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
}


/* ═══ 7. BOTÓN SUBMIT — HÍBRIDO (accent → CORAL fallback) ═══ */
html[data-mode="kids"] #barraSubmit {
  background: var(--bm-accent, var(--kids-coral)) !important;
  background-image: none !important;
  border: var(--kids-stroke) solid var(--kids-ink) !important;
  box-shadow: none !important;
}

html[data-mode="kids"] #barraSubmit svg,
html[data-mode="kids"] #barraSubmit svg * {
  stroke: var(--bm-accent-contrast, var(--kids-ink)) !important;
  fill: none !important;
}


/* ═══ 8a. ::before — 4 OUTLINE NEGRAS (vacías para colorear) ═══ */
html[data-mode="kids"] #barraMagicaOverlay::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'><circle cx='30' cy='30' r='14'/><line x1='30' y1='3' x2='30' y2='8'/><line x1='30' y1='52' x2='30' y2='57'/><line x1='3' y1='30' x2='8' y2='30'/><line x1='52' y1='30' x2='57' y2='30'/><line x1='10' y1='10' x2='14' y2='14'/><line x1='46' y1='46' x2='50' y2='50'/><line x1='10' y1='50' x2='14' y2='46'/><line x1='46' y1='14' x2='50' y2='10'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' fill='none' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'><polygon points='25,5 45,25 25,45 5,25'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'><polygon points='20,4 24,15 36,15 26,22 30,34 20,27 10,34 14,22 4,15 16,15'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'><path d='M2 7 q5 -7 10 0 q5 7 10 0 q5 -7 8 0'/></svg>") !important;
  background-position:
    44px 140px,                              /* Sol top-left */
    calc(100% - 40px) calc(100% - 110px),    /* Diamante bottom-right */
    calc(100% - 44px) calc(50% - 170px),     /* Estrella mid-right TOP */
    40px calc(50% + 170px) !important;       /* Squiggle mid-left BOTTOM */
  background-size:
    60px 60px,
    50px 50px,
    40px 40px,
    30px 14px !important;
  opacity: 1 !important;
  animation: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
}


/* ═══ 8b. ::after — 4 FILLED CON COLORES DISTINTOS ═══════════════════════
 * Cada forma con SU PROPIO color hardcoded variado.
 * Resultado: paleta nivel coloring book auténtico.
 * ═══════════════════════════════════════════════════════════════════════ */
html[data-mode="kids"] #barraMagicaOverlay::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-image:
    /* Triángulo CYAN */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 45'><polygon points='25,5 45,42 5,42' fill='%2314C7DA' stroke='%23000' stroke-width='2' stroke-linejoin='round'/></svg>"),
    /* Semicírculo CORAL */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 40'><path d='M5 38 A 30 30 0 0 1 65 38 Z' fill='%23FF6B9D' stroke='%23000' stroke-width='2' stroke-linejoin='round'/></svg>"),
    /* Dot YELLOW */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='7' cy='7' r='5' fill='%23FFD60A' stroke='%23000' stroke-width='1.5'/></svg>"),
    /* Dot PURPLE */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='7' cy='7' r='5' fill='%239B6BFF' stroke='%23000' stroke-width='1.5'/></svg>") !important;
  background-position:
    calc(100% - 44px) 140px,                 /* Triángulo top-right */
    40px calc(100% - 110px),                 /* Semicírculo bottom-left */
    44px calc(50% - 150px),                  /* Dot YELLOW mid-left TOP */
    calc(100% - 32px) calc(50% + 150px) !important;  /* Dot PURPLE mid-right BOTTOM */
  background-size:
    50px 45px,
    70px 40px,
    14px 14px,
    14px 14px !important;
  /* Apagar mask de v6 si quedó algo */
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}


/* ═══ 9. POSICIONES MOBILE ═══ */
@media (max-width: 768px) {
  html[data-mode="kids"] #barraMagicaOverlay::before {
    background-position:
      22px 120px,
      calc(100% - 22px) calc(100% - 100px),
      calc(100% - 22px) calc(50% - 140px),
      22px calc(50% + 140px) !important;
    background-size:
      48px 48px,
      40px 40px,
      32px 32px,
      26px 12px !important;
  }
  
  html[data-mode="kids"] #barraMagicaOverlay::after {
    background-position:
      calc(100% - 22px) 120px,
      22px calc(100% - 100px),
      22px calc(50% - 130px),
      calc(100% - 18px) calc(50% + 130px) !important;
    background-size:
      40px 36px,
      56px 32px,
      12px 12px,
      12px 12px !important;
  }
}


/* ═══ 10. LOGO COLOR ═══ */
html[data-mode="kids"] #barraFooterLogo .bm-logo-stage {
  position: relative;
}
html[data-mode="kids"] #barraFooterLogo .bm-logo-blanco {
  opacity: 0 !important;
}
html[data-mode="kids"] #barraFooterLogo .bm-logo-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://raw.githubusercontent.com/badirnakid/triggui-app/main/public/trigguiletras2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}


/* END OF v7.0.0 — Híbrido nivel dios todopoderoso */