/* ===== KIVA v4.3 — Portada con carrusel; dial sin sombra; muro fluido; responsive sólido ===== */
:root{
  --lilac:#E5D6FF; --blue:#CFEAFF; --pink:#FFD6E7; --yellow:#FFF4B8; --peach:#FFD9C8;
  --paper:#FFFFFF; --card:#FFFFFF; --ink:#101522; --ink-2:#2A3550; --line:rgba(0,0,0,.14);
  --muted:#6A7484; --ring:#7C4DFF;
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow-md:0 8px 18px rgba(0,0,0,.10);
  --shadow-lg:0 14px 40px rgba(0,0,0,.16);
}

/* ===== Paleta modo oscuro (usa las mismas variables) ===== */
body[data-theme="dark"]{
  --paper:#020617;
  --card:#020617;
  --ink:#e5e7eb;
  --ink-2:#c7d2fe;
  --muted:#9ca3af;
  --line:rgba(148,163,184,.55);
  --ring:#a5b4fc;

  --lilac:#4c3a76;
  --blue:#1d4ed8;
  --pink:#db2777;
  --yellow:#eab308;
  --peach:#f97316;
}
/* Help cards en modo oscuro — degradado bonito */
body[data-theme="dark"] .help .help-card{
  background:linear-gradient(
    180deg,
    color-mix(in oklab, var(--card) 95%, #4c1d95 20%) 0%,
    color-mix(in oklab, var(--card) 85%, #1d4ed8 15%) 50%,
    color-mix(in oklab, var(--card) 80%, #0ea5e9 10%) 100%
  );
  border:1px solid var(--line);
}


*{box-sizing:border-box}
html,body{height:100%} html{overflow-x:hidden}
body{margin:0; overflow-x:hidden; font-family:"Nunito",system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--ink); background:var(--paper)}
h1,h2,h3{font-family:"Fredoka", system-ui; margin:0 0 12px; line-height:1.15}
p{margin:0 0 12px} small{color:var(--muted)}

/* Transiciones suaves entre claro/oscuro */
html,
body,
body::before{
  transition:
    background-color .35s ease,
    color .35s ease,
    background .45s ease;
}

.section,
.game-block,
.learn-card,
.sidenav,
.site-header,
.site-footer,
.post,
.about-card,
.blog-card,
.help .help-card,
.memory-grid .cardm,
.traffic-zone,
.forum textarea,
.forum .alias,
.btn,
.chip,
.traffic-card{
  transition:
    background-color .35s ease,
    color .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

/* ===== Fondos por sección (modo claro) ===== */
body[data-bg="inicio"]::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(28rem 22rem at -6% -8%, #ffd6e7 0 60%, transparent 61%),
    radial-gradient(26rem 22rem at 106% 0%, #cfeaff 0 60%, transparent 61%),
    radial-gradient(26rem 22rem at 100% 110%, #fff4b8 0 60%, transparent 61%),
    radial-gradient(28rem 22rem at 0% 110%, #ffd9c8 0 60%, transparent 61%),
    radial-gradient(circle at 20% 20%, rgba(0,0,0,.04) 3px, transparent 4px) 0 0/26px 26px,
    radial-gradient(circle at 80% 70%, rgba(0,0,0,.04) 3px, transparent 4px) 0 0/30px 30px,
    #fff;
}
body[data-bg="aprende"]::before{content:""; position:fixed; inset:0; z-index:-1; background:
  radial-gradient(16rem 12rem at 8% 10%, #ffd6e7 0 70%, transparent 71%),
  radial-gradient(18rem 14rem at 94% 12%, #cfeaff 0 70%, transparent 71%),
  radial-gradient(22rem 16rem at 10% 92%, #fff4b8 0 70%, transparent 71%),
  radial-gradient(20rem 14rem at 92% 92%, #ffd9c8 0 70%, transparent 71%), #fff;
}
body[data-bg="explora"]::before{content:""; position:fixed; inset:0; z-index:-1; background:
  radial-gradient(40vmax 30vmax at 15% 15%, #ffe6f2 0 40%, transparent 41%),
  radial-gradient(35vmax 28vmax at 85% 20%, #eef5ff 0 40%, transparent 41%),
  radial-gradient(38vmax 30vmax at 50% 95%, #fff4b8 0 35%, transparent 36%), #fff;
}
body[data-bg="foro"]::before,
body[data-bg="ayuda"]::before,
body[data-bg="reflexiones"]::before,
body[data-bg="sobre"]::before{
  content:""; position:fixed; inset:0; z-index:-1; background:
  radial-gradient(60vmax 40vmax at 0% 0%, #f4e6ff 0 40%, transparent 41%),
  radial-gradient(60vmax 40vmax at 100% 100%, #ffeaf3 0 40%, transparent 41%),
  #fff;
}

/* ===== Fondos por sección (modo oscuro) ===== */
body[data-theme="dark"][data-bg="inicio"]::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(28rem 22rem at -6% -8%, #4c1d95 0 60%, transparent 61%),
    radial-gradient(26rem 22rem at 106% 0%, #1d4ed8 0 60%, transparent 61%),
    radial-gradient(26rem 22rem at 100% 110%, #eab308 0 60%, transparent 61%),
    radial-gradient(28rem 22rem at 0% 110%, #f97316 0 60%, transparent 61%),
    radial-gradient(circle at 20% 20%, rgba(15,23,42,.6) 3px, transparent 4px) 0 0/26px 26px,
    radial-gradient(circle at 80% 70%, rgba(15,23,42,.6) 3px, transparent 4px) 0 0/30px 30px,
    #020617;
}
body[data-theme="dark"][data-bg="aprende"]::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(16rem 12rem at 8% 10%, #4c1d95 0 70%, transparent 71%),
    radial-gradient(18rem 14rem at 94% 12%, #1d4ed8 0 70%, transparent 71%),
    radial-gradient(22rem 16rem at 10% 92%, #eab308 0 70%, transparent 71%),
    radial-gradient(20rem 14rem at 92% 92%, #f97316 0 70%, transparent 71%),
    #020617;
}
body[data-theme="dark"][data-bg="explora"]::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(40vmax 30vmax at 15% 15%, #4c1d95 0 40%, transparent 41%),
    radial-gradient(35vmax 28vmax at 85% 20%, #1d4ed8 0 40%, transparent 41%),
    radial-gradient(38vmax 30vmax at 50% 95%, #eab308 0 35%, transparent 36%),
    #020617;
}
body[data-theme="dark"][data-bg="foro"]::before,
body[data-theme="dark"][data-bg="ayuda"]::before,
body[data-theme="dark"][data-bg="reflexiones"]::before,
body[data-theme="dark"][data-bg="sobre"]::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(60vmax 40vmax at 0% 0%, #4c1d95 0 40%, transparent 41%),
    radial-gradient(60vmax 40vmax at 100% 100%, #db2777 0 40%, transparent 41%),
    #020617;
}

/* Header + título */
.site-header{position:sticky; top:0; z-index:8; padding:14px 20px 10px; border-bottom:1px solid var(--line); background:color-mix(in oklab, var(--paper) 90%, transparent 10%); backdrop-filter:blur(10px)}
.brand{text-decoration:none; color:inherit; display:block}
.title-multi b{font-weight:700; font-size:clamp(30px,6vw,60px); line-height:1; display:inline-block}
.title-multi .kiva{background:linear-gradient(90deg,#F06543 0%, #FF7AA8 38%, #F2B300 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.title-multi .voz{color:#3E97FF} .title-multi .y{color:#7C4DFF} .title-multi .apoyo{color:#F2B300}
.hamburger{position:absolute; right:16px; top:14px; width:46px; height:46px; border:1px solid var(--line); background:var(--card); border-radius:14px; display:grid; place-items:center; cursor:pointer}
.hamburger span{display:block; width:24px; height:2px; background:var(--ink); margin:3px 0; border-radius:2px}

/* Botón flotante modo claro/oscuro (abajo a la derecha) */
.mode-toggle{
  position:fixed;
  bottom:18px;       /* 👈 ahora abajo */
  right:18px;
  z-index:20;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid var(--line);
  background:color-mix(in oklab, var(--card) 70%, #0f172a 30%);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:var(--shadow-md);
}

body[data-theme="dark"] .mode-toggle{
  background:color-mix(in oklab, #020617 80%, var(--card) 20%);
}

.mode-toggle__icon{
  font-size:20px;
}

/* Menú lateral */
.nav-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:10}
.nav-backdrop[hidden]{display:none}
.sidenav{position:fixed; top:0; right:0; z-index:11; width:min(420px, 92vw); height:100vh; overflow:auto; transform:translateX(100%); transition:transform .28s ease-out; background:var(--card); border-left:1px solid var(--line); padding:16px; box-shadow:-20px 0 40px rgba(0,0,0,.2)}
.sidenav.open{transform:none}
.sidenav-close{background:transparent; border:none; font-size:28px; color:var(--ink); cursor:pointer; margin-bottom:10px}
.snav-link{display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; color:inherit; text-decoration:none; margin:10px 0; background:var(--card); font-weight:800}
.snav-link svg{width:18px; height:18px; stroke-width:2}
.snav-link:hover{outline:2px solid var(--ring)}

/* Secciones */
.section{padding:56px 20px; max-width:1200px; margin:0 auto}
.hidden{display:none}

/* Hero inicio */
.hero.two-col{display:grid; grid-template-columns:1.15fr 1fr; gap:28px; align-items:center}
@media (max-width: 880px){
  .hero.two-col{grid-template-columns:1fr; gap:16px}
  .hero-media{order:-1}
}
.hero.clean .hero-left{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:24px 18px 22px; box-shadow:var(--shadow-lg)}
.hero .title{margin-bottom:10px}
.hero .sub{display:block; font-weight:800; font-size:clamp(16px,2.4vw,22px); color:#1a2230}
.cta-row{display:flex; gap:10px; flex-wrap:wrap}

/* Carrusel portada */
.home-carousel{position:relative; border-radius:18px; border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow-md); overflow:hidden}
.hc-track{display:flex; scroll-snap-type:x mandatory; overflow:hidden; touch-action:pan-y; will-change:transform}
.home-carousel img{width:100%; height:280px; object-fit:cover; flex:0 0 100%; scroll-snap-align:center}
.hc-btn{position:absolute; top:50%; transform:translateY(-50%); background:var(--card); border:1px solid var(--line); color:var(--ink); width:40px; height:40px; border-radius:50%; cursor:pointer}
.hc-btn.prev{left:10px} .hc-btn.next{right:10px}

/* Botones */
.btn{font-family:"Fredoka", system-ui; font-weight:700; padding:10px 16px; border-radius:14px; border:1px solid var(--line); background:#FFD9C8; color:#101; cursor:pointer; transition:transform .1s}
.btn:hover{transform:translateY(-1px)} .btn.alt{background:#FFD6E7}

/* Utilidades / grids */
.grid{display:grid; gap:18px}
.grid.three{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
.grid.four{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}
.mt{margin-top:18px}
.h-doodles{font-weight:800}

/* Aprende */
.learn-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.learn-card{border-radius:18px; overflow:hidden; border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow-md)}
.learn-top{height:8px}
.learn-card.lilac .learn-top{background:var(--lilac)}
.learn-card.blue .learn-top{background:var(--blue)}
.learn-card.pink .learn-top{background:var(--pink)}
.learn-card.peach .learn-top{background:var(--peach)}
.learn-body{display:flex; gap:14px; padding:18px; align-items:flex-start}
.learn-ico{flex:0 0 60px; height:60px; border-radius:14px; border:1px solid var(--line); background:var(--blue); display:grid; place-items:center}
.learn-ico svg{width:28px; height:28px; color:#111}
.learn-text h3{margin:2px 0 8px} .learn-text p{margin:0}

/* Flip cards */
.flip{perspective:1000px}
.flip__inner{position:relative; width:100%; min-height:130px; transform-style:preserve-3d; transition:transform .6s; cursor:pointer}
.flip__front,.flip__back{
  position:absolute; inset:0; display:grid; place-items:center; padding:18px;
  border-radius:16px; background:#CFEAFF; border:1px dashed var(--line);
  backface-visibility:hidden; color:#111; font-weight:800;
}
.flip__back{transform:rotateY(180deg); background:#FFF4B8}
.flip:hover .flip__inner,.flip__inner:focus{transform:rotateY(180deg)}

/* Carrusel (Aprende) */
.carousel{position:relative; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--card); box-shadow:var(--shadow-md)}
.car-track{display:flex; transition:transform .4s ease; will-change:transform}
.slide{width:100%; flex:0 0 100%; position:relative; background:var(--card)}
.slide img{width:100%; height:auto; max-height:70vh; object-fit:contain; display:block}
.slide iframe{width:100%; height:60vh; max-height:70vh; display:block}
.cap{position:absolute; left:0; right:0; bottom:0; padding:8px 10px; background:rgba(0,0,0,.35); color:#fff; font-weight:800}
.car-btn{position:absolute; top:50%; transform:translateY(-50%); background:var(--card); border:1px solid var(--line); color:var(--ink); width:40px; height:40px; border-radius:50%; cursor:pointer}
.car-btn.prev{left:10px} .car-btn.next{right:10px}

/* ===== Tarjetas de juegos: recorte de desbordes ===== */
.game-block{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  box-shadow:var(--shadow-md);
  margin-bottom:18px;
  position:relative;
  overflow:hidden;
}

/* ===== Dial Emocionómetro (encaja y sin sombra) ===== */
.dial{position:relative; width:min(360px, 100%); margin-inline:auto}
.dial-svg{width:100%; height:auto; display:block}
.dial-bg{fill:#fff; stroke:var(--line); stroke-width:2}
.dial-arc{fill:none; stroke:url(#gMood); stroke-width:14; stroke-linecap:round}
.dial-knob{fill:#fff; stroke:#222; stroke-width:3; filter:none}
.dial-emoji{position:absolute; left:50%; top:54%; transform:translate(-50%,-50%); font-size:42px}
.dial input[type="range"]{width:100%; margin-top:10px; box-sizing:border-box}
.dial-emojis{display:flex; gap:10px; justify-content:center; margin-top:8px}
.dial-emojis button{font-size:26px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:6px 10px; cursor:pointer}
.emo-label{font-weight:800; color:var(--ink-2); text-align:center; margin-top:6px}

/* ===== Rompe el muro ===== */
#muros .wall{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); /* más ancho para que quepan las palabras */
  width:100%;
}
.brick{
  display:grid; place-items:center; text-align:center;
  min-height:56px; padding:10px 12px; border-radius:14px; border:1px solid var(--line);
  color:#111; font-weight:800; font-size:.95rem;
  transition:transform .12s, opacity .2s;
  cursor:pointer; position:relative; box-shadow:var(--shadow-sm);
  white-space:nowrap;          /* NO partir palabras */
}
.brick.hit::after{content:""; position:absolute; inset:-4px; border-radius:16px; border:2px solid var(--blue); opacity:0; animation:hit .45s ease}
@keyframes hit{0%{opacity:.8; transform:scale(1)} 100%{opacity:0; transform:scale(1.1)}}
.brick.broken-anim{transform-origin:bottom center; transform:scale(.9) rotate(3deg) translateY(10px); opacity:0; transition:transform .3s ease-out, opacity .3s ease-out}
#muros .why{margin-top:10px; font-weight:800; color:var(--ink)}

/* Memorama */
.memory-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr))}
.cardm{height:150px; border:1px solid var(--line); border-radius:14px; background:var(--card); position:relative; cursor:pointer; perspective:800px; box-shadow:var(--shadow-sm)}
.cardm-inner{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transition:transform .38s ease;
  /* empieza mostrando el reverso */
  transform:rotateY(180deg);
}

.cardm.revealed .cardm-inner{
  /* al voltear, se ve el frente (imagen + palabra) */
  transform:rotateY(0deg);
}

.cardm-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* Frente: imagen + texto */
.cardm-front{
  border:1px dashed var(--line);
  font-weight:900;
  letter-spacing:.4px;
  text-align:center;
  gap:6px;
}

.cardm-img{
  max-width:60%;
  max-height:60%;
  object-fit:contain;
}

.cardm-label{
  font-size:.9rem;
}

/* Reverso: todas iguales */
.cardm-back{
  transform:rotateY(180deg);
  border:1px solid var(--line);
  background:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
}

.cardm-back span{
  pointer-events:none;
}

/* Arma el mensaje */
.chips{display:flex; gap:10px; flex-wrap:wrap; background:var(--blue); border:1px dashed var(--line); border-radius:14px; padding:10px}
.chip{padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:#FFD6E7; color:#111; cursor:grab; font-weight:800; touch-action:none; box-shadow:var(--shadow-sm)}
.chip.dragging{opacity:.5; transform:scale(.95); background:#FFF4B8}
.msg-out{margin-top:10px; font-weight:800}

/* Semáforo de las sensaciones */
.traffic-game{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:8px;
}
.traffic-cards{
  flex:1 1 200px;
  display:grid;
  gap:10px;
}
.traffic-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow-sm);
  cursor:grab;
}
.traffic-card .emoji{
  font-size:1.6rem;
}
.traffic-card .text{
  font-size:.9rem;
  text-align:left;
}
.traffic-zones{
  flex:1 1 220px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.traffic-zone{
  min-height:110px;
  border-radius:14px;
  border:1px dashed var(--line);
  padding:10px;
  background:#fdfdfd;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.traffic-zone h4{
  margin:0;
}
.traffic-zone .small{
  margin:0;
}
.traffic-zone.green{
  background:linear-gradient(180deg,#e4ffe9,#ffffff);
}
.traffic-zone.yellow{
  background:linear-gradient(180deg,#fff9e0,#ffffff);
}
.traffic-zone.red{
  background:linear-gradient(180deg,#ffe5e5,#ffffff);
}
.traffic-msg{
  margin-top:8px;
  font-weight:800;
}

/* Ajustes para semáforo en modo oscuro (fondos menos brillantes) */
body[data-theme="dark"] .traffic-card{
  background:var(--card);
}
body[data-theme="dark"] .traffic-zone{
  background:color-mix(in oklab, var(--card) 80%, #020617 20%);
}
body[data-theme="dark"] .traffic-zone.green{
  background:linear-gradient(180deg, rgba(34,197,94,.16), #020617);
}
body[data-theme="dark"] .traffic-zone.yellow{
  background:linear-gradient(180deg, rgba(234,179,8,.18), #020617);
}
body[data-theme="dark"] .traffic-zone.red{
  background:linear-gradient(180deg, rgba(248,113,113,.2), #020617);
}

/* Foro */
.forum .alias{border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:var(--card); color:var(--ink)}
.forum textarea{width:100%; border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--ink); padding:12px; min-height:120px}
.forum-controls{display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-bottom:10px}
.forum-actions{margin:10px 0} .forum-list{display:grid; gap:14px}
.post{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; position:relative; overflow:hidden; box-shadow:var(--shadow-sm)}
.post::before{content:""; position:absolute; left:-18px; top:-18px; width:100px; height:100px; border:1px dashed var(--line); transform:rotate(12deg); opacity:.08}
.post .meta{font-size:.85rem; color:var(--muted); margin-bottom:6px}
.post .actions{display:flex; gap:8px; margin-top:6px}
.post button{font-size:.85rem; padding:6px 8px; border-radius:8px; border:1px solid var(--line); background:var(--blue); cursor:pointer}
.post .badge{position:absolute; right:8px; top:8px; font-size:.75rem; padding:4px 8px; border-radius:999px; border:1px solid var(--line); background:var(--pink); color:#111}

/* Ayuda */
.help .help-card{background:linear-gradient(180deg, var(--card) 70%, #fff7fb 100%); border:1px solid var(--line); border-radius:16px; padding:16px; min-height:148px; display:flex; flex-direction:column; gap:8px}
.help .help-card h4{margin:0} .help .help-card p{margin:0; color:var(--muted)}
.help .call{display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding:8px 10px; border-radius:10px; background:var(--card); border:1px solid var(--line); text-decoration:none; color:var(--ink); max-width:100%; overflow-wrap:anywhere}
.help-whats-wrap{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.whats-btn{display:inline-block; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:#FFD6E7; color:#111; text-decoration:none; font-weight:800}

.help-contacts{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px dashed var(--line);
  background:rgba(255,255,255,.9);
}
.help-contacts h4{margin:0 0 6px;}
.help-contacts p{margin:0 0 6px; font-size:.9rem;}
.help-contacts a{color:var(--ink-2);}

/* En oscuro que no sea tan blanco brillante */
body[data-theme="dark"] .help-contacts{
  background:rgba(15,23,42,.9);
}

/* Reflexiones */
.blog-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.blog-grid.colorful .blog-card{background:linear-gradient(180deg, #ffffff, #fff0f6); border:1px solid var(--line); border-radius:16px; padding:14px; position:relative; overflow:hidden; box-shadow:var(--shadow-md)}
.blog-card .tag{display:inline-block; padding:4px 10px; border-radius:999px; font-size:.8rem; margin-bottom:8px; border:1px solid var(--line); background:#ffe8f1}
.blog-card h4{margin:0 0 6px}
.blog-card::after{content:""; position:absolute; right:-18px; bottom:-18px; width:120px; height:120px; border:1px dashed var(--line); transform:rotate(15deg); opacity:.08}
.blog-grid.colorful .blog-card:nth-child(4n+2){background:linear-gradient(180deg,#fff,#eef6ff)}
.blog-grid.colorful .blog-card:nth-child(4n+3){background:linear-gradient(180deg,#fff,#fff7de)}
.blog-grid.colorful .blog-card:nth-child(4n+4){background:linear-gradient(180deg,#fff,#ffefe8)}

/* Blog en modo oscuro: cartas más oscuras pero con toque pastel */
body[data-theme="dark"] .blog-grid.colorful .blog-card{
  background:linear-gradient(180deg, rgba(15,23,42,.95), rgba(15,23,42,.8));
}
body[data-theme="dark"] .blog-card .tag{
  background:rgba(148,163,184,.16);
}

/* Sobre */
.about-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.about-card{border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow-md); background:var(--card)}
.tone-lilac{background:linear-gradient(180deg,#ffffff,#f5edff)}
.tone-pink{background:linear-gradient(180deg,#ffffff,#ffeaf3)}
.tone-blue{background:linear-gradient(180deg,#ffffff,#eef6ff)}
.tone-peach{background:linear-gradient(180deg,#ffffff,#ffefe8)}
.tone-yellow{background:linear-gradient(180deg,#ffffff,#fff7de)}

/* Tonos en modo oscuro: más sutiles */
body[data-theme="dark"] .tone-lilac{
  background:linear-gradient(180deg,#020617,#111827);
}
body[data-theme="dark"] .tone-pink{
  background:linear-gradient(180deg,#020617,#111827);
}
body[data-theme="dark"] .tone-blue{
  background:linear-gradient(180deg,#020617,#111827);
}
body[data-theme="dark"] .tone-peach{
  background:linear-gradient(180deg,#020617,#111827);
}
body[data-theme="dark"] .tone-yellow{
  background:linear-gradient(180deg,#020617,#111827);
}

/* Footer centrado */
.site-footer{margin-top:28px; padding:24px 20px; background:color-mix(in oklab, var(--ink-2) 6%, var(--paper) 94%); border-top:1px solid var(--line)}
.footer-inner{max-width:1200px; margin:0 auto; display:grid; gap:10px; align-items:center; justify-items:center; text-align:center}
.f-brand{font-weight:800}
.f-links{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.f-links a{color:var(--ink-2); text-decoration:none; font-weight:800; border:1px solid var(--line); background:var(--card); padding:6px 10px; border-radius:10px}

/* Accesibilidad */
:focus-visible{outline:2px solid var(--ring); outline-offset:2px}



/* ===== Sección Cómo denunciar ===== */
.denuncia-section{
  max-width:1100px;
  margin:0 auto;
}

#denuncia{
  position:relative; /* para el confeti */
}

/* Menú de pasos */
.denuncia-steps-nav{
  margin:18px 0 24px;
  padding:14px 14px 18px;
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--card);
  box-shadow:var(--shadow-sm);
}

.denuncia-steps-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}

.denuncia-step-chip{
  font-family:"Fredoka", system-ui;
  font-size:.9rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--paper);
  padding:6px 10px;
  cursor:pointer;
  white-space:nowrap;
}

.denuncia-step-chip.is-active{
  background:#FFD6E7;
  border-color:var(--ring);
}

/* Progreso */
.denuncia-progress{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.denuncia-progress-label{
  font-size:.85rem;
  color:var(--muted);
}

.denuncia-progress-bar{
  width:100%;
  height:6px;
  border-radius:999px;
  background:rgba(0,0,0,.05);
  overflow:hidden;
}

.denuncia-progress-fill{
  height:100%;
  width:12.5%;
  border-radius:999px;
  background:linear-gradient(90deg,#F06543,#FF7AA8,#F2B300);
  transition:width .25s ease-out;
}

/* Bloques de paso */
.denuncia-step{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px 16px 18px;
  margin-bottom:18px;
  box-shadow:var(--shadow-md);
}

/* Grid de confianza */
.trust-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
  margin-top:10px;
}

.trust-card{
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--paper);
  padding:10px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    opacity .18s ease;
}

.trust-card:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}

.trust-emoji{
  font-size:1.6rem;
}

.trust-label{
  font-size:.85rem;
  text-align:center;
}

/* Estados al hacer clic */
.trust-card.selected.ok{
  border-color:#16a34a;
  background:linear-gradient(180deg,#dcfce7,var(--paper));
}

.trust-card.selected.warn{
  border-color:#ef4444;
  background:linear-gradient(180deg,#fee2e2,var(--paper));
}

/* Animación de desaparecer tarjeta buena */
.trust-card.gone{
  animation:trust-pop-out .35s ease forwards;
}

@keyframes trust-pop-out{
  to{
    transform:translateY(-8px) scale(.7) rotate(-3deg);
    opacity:0;
  }
}

/* Shake suave al fallar */
.trust-card.shake{
  animation:trust-shake .25s ease;
}

@keyframes trust-shake{
  0%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  50%{transform:translateX(4px)}
  75%{transform:translateX(-4px)}
  100%{transform:translateX(0)}
}

/* Botón repetir pequeñito */
.trust-reset{
  margin-top:10px;
  padding:6px 12px;
  font-size:.85rem;
}

/* 🎉 Confeti */
.confetti-layer{
  pointer-events:none;
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:5;
}

.confetti-piece{
  position:absolute;
  top:-12px;
  width:6px;
  height:12px;
  border-radius:2px;
  opacity:0;
  animation:confetti-fall 1.3s ease-out forwards;
}

@keyframes confetti-fall{
  0%{
    transform:translate3d(0,0,0) rotateZ(0deg);
    opacity:1;
  }
  100%{
    transform:translate3d(0,240px,0) rotateZ(260deg);
    opacity:0;
  }
}

/* Modo oscuro ajustes suaves */
body[data-theme="dark"] .denuncia-steps-nav{
  background:color-mix(in oklab,var(--card) 90%,#020617 10%);
}

body[data-theme="dark"] .denuncia-step{
  background:color-mix(in oklab,var(--card) 95%,#020617 5%);
}

body[data-theme="dark"] .denuncia-progress-bar{
  background:rgba(148,163,184,.26);
}

body[data-theme="dark"] .trust-card{
  background:color-mix(in oklab,var(--card) 90%,#020617 10%);
}


/* Roles en Paso 2 */
.denuncia-roles{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.denuncia-roles-toggles{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.role-toggle{
  font-family:"Fredoka", system-ui;
  font-size:.85rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--paper);
  padding:6px 10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:4px;
}

.role-toggle.is-active{
  background:#CFEAFF;
  border-color:var(--ring);
}

.denuncia-roles-panel{
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed var(--line);
  background:color-mix(in oklab,var(--card) 96%,#ffffff 4%);
}

/* Ajuste modo oscuro */
body[data-theme="dark"] .denuncia-roles-panel{
  background:color-mix(in oklab,var(--card) 92%,#020617 8%);
}


/* Paso 3: checklist interactiva */
.denuncia-checklist{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.denuncia-checklist-status{
  padding:8px 10px;
  border-radius:12px;
  border:1px dashed var(--line);
  background:color-mix(in oklab,var(--card) 96%,#ffffff 4%);
}

.denuncia-checklist-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:8px;
}

.check-pill{
  width:100%;
  text-align:left;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--paper);
  padding:6px 10px;
  display:flex;
  align-items:flex-start;
  gap:6px;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  font-size:.9rem;
  transition:
    background-color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .12s ease;
}

.check-pill:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}

.check-mark{
  font-size:1.1rem;
  line-height:1;
  margin-top:1px;
}

.check-text{
  flex:1;
}

.check-pill.is-checked{
  border-color:#16a34a;
  background:linear-gradient(180deg,#dcfce7,var(--paper));
}

.check-pill.is-checked .check-mark{
  content:"☑";
}

/* Modo oscuro ajuste */
body[data-theme="dark"] .denuncia-checklist-status{
  background:color-mix(in oklab,var(--card) 92%,#020617 8%);
}

body[data-theme="dark"] .check-pill{
  background:color-mix(in oklab,var(--card) 90%,#020617 10%);
}

/* Paso 4: stepper de proceso */
.denuncia-flow{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.denuncia-flow-steps{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:space-between;
  position:relative;
}

/* Línea de fondo opcional (solo cuando hay espacio horizontal) */
@media (min-width: 640px){
  .denuncia-flow-steps::before{
    content:"";
    position:absolute;
    left:10%;
    right:10%;
    top:22px;
    height:2px;
    background:rgba(0,0,0,.08);
    z-index:0;
  }
}

.flow-node{
  position:relative;
  z-index:1;
  flex:1 1 120px;
  min-width:120px;
  max-width:160px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  background:transparent;
  border:none;
  cursor:pointer;
}

.flow-number{
  width:32px;
  height:32px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:800;
  border:2px solid var(--line);
  background:var(--paper);
  box-shadow:var(--shadow-sm);
  font-size:.9rem;
}

.flow-label{
  font-size:.75rem;
  text-align:center;
  color:var(--muted);
}

/* Activo */
.flow-node.is-active .flow-number{
  border-color:var(--ring);
  background:linear-gradient(180deg,#FFD6E7,#FFF4B8);
}

.flow-node.is-active .flow-label{
  color:var(--ink-2);
}

/* Paneles */
.denuncia-flow-panels{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--card);
  box-shadow:var(--shadow-sm);
}

.flow-panel h4{
  margin-top:0;
}

/* Modo oscuro */
body[data-theme="dark"] .denuncia-flow-steps::before{
  background:rgba(148,163,184,.3);
}

body[data-theme="dark"] .denuncia-flow-panels{
  background:color-mix(in oklab,var(--card) 94%,#020617 6%);
}

/* Paso 5: elementos de prueba interactivos */
.evidence-wrap{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.evidence-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.evidence-chip{
  font-family:"Fredoka", system-ui;
  font-size:.85rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--paper);
  padding:6px 10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:4px;
  box-shadow:var(--shadow-sm);
  transition:
    background-color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .12s ease;
}

.evidence-chip:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}

.evidence-chip.is-active{
  background:#FFEAF3;
  border-color:var(--ring);
}

.evidence-panel{
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed var(--line);
  background:color-mix(in oklab,var(--card) 96%,#ffffff 4%);
  box-shadow:var(--shadow-sm);
}

.evidence-detail h4{
  margin-top:0;
}

/* Modo oscuro */
body[data-theme="dark"] .evidence-panel{
  background:color-mix(in oklab,var(--card) 92%,#020617 8%);
}

/* Paso 6: línea de tiempo animada */
.denuncia-timeline{
  margin-top:10px;
  display:grid;
  gap:12px;
}

.timeline-stages{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Línea vertical de fondo */
.timeline-stages::before{
  content:"";
  position:absolute;
  left:16px;
  top:8px;
  bottom:8px;
  width:2px;
  background:rgba(0,0,0,.08);
}

/* En pantallas anchas, horizontal */
@media (min-width: 720px){
  .denuncia-timeline{
    grid-template-columns:minmax(220px, 280px) 1fr;
    align-items:flex-start;
  }
  .timeline-stages{
    flex-direction:column;
  }
  .timeline-stages::before{
    left:18px;
    right:auto;
  }
}

.timeline-node{
  position:relative;
  z-index:1;
  padding-left:36px;
  padding-right:8px;
  padding-top:4px;
  padding-bottom:4px;
  border-radius:12px;
  border:none;
  background:transparent;
  text-align:left;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
}

.timeline-dot{
  position:absolute;
  left:10px;
  width:12px;
  height:12px;
  border-radius:999px;
  border:2px solid var(--line);
  background:var(--paper);
  box-shadow:var(--shadow-sm);
}

.timeline-label{
  font-size:.85rem;
  color:var(--muted);
}

/* Nodo activo */
.timeline-node.is-active{
  background:color-mix(in oklab,var(--card) 96%,#fff0f6 4%);
}

.timeline-node.is-active .timeline-dot{
  border-color:var(--ring);
  background:linear-gradient(180deg,#FFD6E7,#FFF4B8);
  animation:timeline-pulse 1.2s ease-out infinite;
}

.timeline-node.is-active .timeline-label{
  color:var(--ink-2);
  font-weight:700;
}

@keyframes timeline-pulse{
  0%{box-shadow:0 0 0 0 rgba(124,77,255,.28);}
  100%{box-shadow:0 0 0 10px rgba(124,77,255,0);}
}

/* Paneles */
.timeline-panels{
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--card);
  box-shadow:var(--shadow-sm);
}

.timeline-panel{
  animation:panel-slide-in .25s ease-out;
}

.timeline-panel[hidden]{
  display:none;
}

.timeline-panel.is-active{
  animation:panel-slide-in .25s ease-out;
}

@keyframes panel-slide-in{
  0%{
    opacity:0;
    transform:translateY(6px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

/* Emociones */
.timeline-emotions{
  margin-top:14px;
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed var(--line);
  background:color-mix(in oklab,var(--card) 96%,#eef6ff 4%);
}

.emotion-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
  margin-bottom:4px;
}

.emotion-btn{
  font-family:"Fredoka", system-ui;
  font-size:.85rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--paper);
  padding:6px 10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:4px;
  box-shadow:var(--shadow-sm);
  transition:
    background-color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .12s ease;
}

.emotion-btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}

.emotion-btn.is-active{
  background:#CFEAFF;
  border-color:var(--ring);
}

.emotion-message{
  min-height:1.3em;
}

/* Modo oscuro */
body[data-theme="dark"] .timeline-stages::before{
  background:rgba(148,163,184,.4);
}

body[data-theme="dark"] .timeline-panels{
  background:color-mix(in oklab,var(--card) 94%,#020617 6%);
}

body[data-theme="dark"] .timeline-emotions{
  background:color-mix(in oklab,var(--card) 92%,#020617 8%);
}

/* ===========================================
   PASO 7 — CARRUSEL DE MÉTODOS DE DENUNCIA
   (VERSIÓN ESTABLE)
=========================================== */

.method-carousel{
  margin-top:12px;
  position:relative;
}

/* Ventana del carrusel */
.method-track-wrap{
  margin-top:8px;
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--card);
  overflow:hidden;              /* mantiene el slide dentro del cuadro */
  box-shadow:var(--shadow-md);
}

/* Pista deslizante */
.method-track{
  display:flex;
  transition:transform .35s ease-out;
  will-change:transform;
}

/* Cada slide ocupa todo el ancho */
.method-slide{
  flex:0 0 100%;
  width:100%;
}

/* Contenido interno de cada slide */
.method-slide-inner{
  padding:16px 18px 16px;
  min-height:220px;             /* altura mínima para que no se vea franja */
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

/* Fondos por tipo */
.method-slide-inner.presencial{
  background:linear-gradient(180deg,#ffffff,#fff4e5);
}

.method-slide-inner.telefono{
  background:linear-gradient(180deg,#ffffff,#e7f3ff);
}

.method-slide-inner.online{
  background:linear-gradient(180deg,#ffffff,#ffeaf7);
}

/* Cabecera */
.method-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}

.method-header h4{
  margin:0;
}

.method-emoji{
  font-size:2rem;
}

/* Etiqueta superior */
.method-tag{
  display:inline-block;
  font-size:.75rem;
  border-radius:999px;
  border:1px solid var(--line);
  padding:3px 8px;
  margin-bottom:6px;
  background:rgba(255,255,255,.85);
}

/* Flechas de navegación */
.method-nav{
  position:absolute;
  top:calc(50% + 4px);
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--card);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  font-size:1.4rem;
  line-height:1;
  padding:0;
  z-index:3;                    /* por encima del cuadro */
}

.method-nav.prev{ left:12px; }
.method-nav.next{ right:12px; }

@media (max-width: 720px){
  .method-nav.prev{ left:8px; }
  .method-nav.next{ right:8px; }
}

/* Puntos del carrusel */
.method-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:10px;
  margin-bottom:4px;
}

.method-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:none;
  padding:0;
  background:rgba(148,163,184,.5);
  cursor:pointer;
  transition:
    transform .16s ease,
    background-color .16s ease,
    width .16s ease;
}

.method-dot.is-active{
  width:18px;
  background:#7C4DFF;
  transform:translateY(-1px);
}

/* Contador bajo los puntos */
.method-counter{
  text-align:center;
  color:var(--muted);
}

/* ===== Modo oscuro ===== */
body[data-theme="dark"] .method-track-wrap{
  background:color-mix(in oklab,var(--card) 92%,#020617 8%);
}

body[data-theme="dark"] .method-slide-inner.presencial,
body[data-theme="dark"] .method-slide-inner.telefono,
body[data-theme="dark"] .method-slide-inner.online{
  background:color-mix(in oklab,var(--card) 94%,#020617 6%);
}

/* ===============================
   Paso 8 — FAQ + Apoyo emocional
================================ */

.faq-list{
  display:grid;
  gap:10px;
  margin-top:10px;
}

.faq-item{
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.faq-question{
  width:100%;
  text-align:left;
  background:var(--paper);
  border:none;
  padding:12px 14px;
  font-family:"Fredoka";
  cursor:pointer;
  font-size:1rem;
  border-bottom:1px solid var(--line);
}

.faq-question:hover{
  background:color-mix(in oklab, var(--paper) 90%, #FFD6E7 10%);
}

.faq-answer{
  padding:10px 14px;
  animation:faqSlide .25s ease-out;
}

@keyframes faqSlide{
  0%{ opacity:0; transform:translateY(-4px); }
  100%{ opacity:1; transform:translateY(0); }
}

/* Consejos */
.wait-advice{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0;
}

.advice-chip{
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--paper);
  padding:6px 12px;
  cursor:pointer;
  font-family:"Fredoka";
  font-size:.9rem;
  transition:
    background-color .15s ease,
    transform .12s ease;
}

.advice-chip:hover{
  transform:translateY(-2px);
  background:#FFEAF3;
}

.advice-chip.is-active{
  background:#FFD6E7;
  border-color:var(--ring);
}

.advice-panel{
  min-height:1.2em;
  padding:6px 2px;
}

/* Tarjetas de apoyo */
.support-grid{
  margin-top:12px;
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
}

.support-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  text-decoration:none;
  background:var(--card);
  box-shadow:var(--shadow-sm);
  color:inherit;
  display:flex;
  flex-direction:column;
  gap:6px;
  transition:transform .12s ease, box-shadow .15s ease;
}

.support-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

.support-emoji{
  font-size:1.7rem;
}

.support-title{
  font-weight:800;
}

/* =====================================
   Foro nuevo: tarjetas + hilo modal
===================================== */

.support-forum{
  border-radius:20px;
  border:1px solid var(--line);
  background:var(--card);
  box-shadow:var(--shadow-md);
  padding:14px 16px 12px;
  max-width:900px;
  margin-inline:auto;
}

/* Barra superior: anónimo / cuenta */
.sf-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.sf-anon-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.9rem;
}

.sf-anon-toggle input{
  width:16px;
  height:16px;
}

/* pastilla "crear cuenta" (solo visual por ahora) */
.sf-account-pill{
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--paper);
  padding:4px 10px 4px 12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.85rem;
  cursor:pointer;
}

.sf-account-dot{
  width:16px;
  height:16px;
  border-radius:999px;
  border:1px solid var(--ring);
}

/* Tablero principal */
.sf-board{
  border-radius:16px;
  border:1px solid var(--line);
  background:color-mix(in oklab,var(--card) 96%,#ffffff 4%);
  padding:10px 10px 12px;
  box-shadow:var(--shadow-sm);
}

/* Tira superior de tarjetas pequeñas */
.sf-thread-strip{
  display:flex;
  gap:8px;
  margin-bottom:10px;
  overflow-x:auto;
  padding-bottom:4px;
}

.sf-strip-card{
  min-width:80px;
  max-width:120px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--paper);
  padding:8px 6px;
  font-size:.75rem;
  position:relative;
  cursor:pointer;
  flex-shrink:0;
}

.sf-strip-heart{
  position:absolute;
  right:6px;
  bottom:4px;
  font-size:.9rem;
}

/* Área grande de comentarios */
.sf-board-inner{
  border-radius:14px;
  border:1px dashed var(--line);
  background:rgba(255,255,255,.7);
  padding:8px;
  min-height:120px;
}

.sf-empty{
  font-size:.85rem;
  color:var(--muted);
}

.sf-thread-list{
  display:grid;
  gap:8px;
  margin-top:4px;
}

.sf-thread-card{
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--paper);
  padding:8px 10px;
  position:relative;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.sf-thread-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.8rem;
  color:var(--muted);
}

.sf-thread-actions{
  display:flex;
  gap:10px;
  font-size:.8rem;
}

.sf-like-btn,
.sf-reply-count{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.sf-like-btn button{
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:.9rem;
}

/* Formulario inferior */
.sf-form{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.sf-alias{
  width:100%;
  border-radius:999px;
  border:1px solid var(--line);
  padding:6px 10px;
  font-size:.85rem;
}

.sf-input-row{
  display:flex;
  gap:8px;
  margin-top:2px;
}

.sf-input{
  flex:1;
  border-radius:999px;
  border:1px solid var(--line);
  padding:8px 12px;
  font-size:.9rem;
}

.sf-send-btn{
  border-radius:999px;
  border:1px solid var(--line);
  padding:8px 14px;
  background:#FFD6E7;
  font-family:"Fredoka";
  font-size:.9rem;
  cursor:pointer;
}

.sf-footer-row{
  min-height:1.1em;
}

.sf-cooldown{
  font-size:.8rem;
  color:var(--muted);
}
/* ===== Foro: avatar + cabecera bonita ===== */

.sf-thread-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 14px 10px;
  box-shadow:var(--shadow-sm);
  position:relative;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}

.sf-thread-card:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
  border-color:color-mix(in oklab, var(--ring) 40%, var(--line) 60%);
}

/* cabecera: avatar + alias + tiempo */
.sf-thread-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:6px;
}

.sf-thread-avatar{
  width:36px;
  height:36px;
  border-radius:999px;
  overflow:hidden;
  background:linear-gradient(135deg, var(--blue), var(--lilac));
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 0 0 2px rgba(255,255,255,.6);
}

.sf-thread-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.sf-avatar-placeholder{
  font-size:18px;
}

/* alias + tiempo */
.sf-thread-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.sf-thread-alias{
  font-weight:800;
  font-size:.95rem;
  color:var(--ink-2);
}

.sf-thread-time{
  font-size:.8rem;
  color:var(--muted);
}

/* texto del hilo */
.sf-thread-text{
  margin-bottom:8px;
  line-height:1.4;
}

/* acciones (like + respuestas) ya las tienes, pero reforzamos un poco el layout */
.sf-thread-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* ===== Modal de hilo: avatar también ===== */

.thread-msg{
  background:var(--card);
  border-radius:14px;
  border:1px solid var(--line);
  padding:10px 12px;
  margin-bottom:8px;
}

.thread-msg-head{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:4px;
}

.thread-msg-avatar{
  width:32px;
  height:32px;
  border-radius:999px;
  overflow:hidden;
  background:linear-gradient(135deg, var(--pink), var(--peach));
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.thread-msg-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.thread-avatar-placeholder{
  font-size:16px;
}

.thread-msg-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.thread-msg-alias{
  font-weight:800;
  font-size:.9rem;
  color:var(--ink-2);
}

.thread-msg-time{
  font-size:.8rem;
  color:var(--muted);
}

.thread-msg-text{
  line-height:1.45;
}


/* ===== Modal de hilo ===== */

.thread-modal{
  position:fixed;
  inset:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* 🔧 IMPORTANTE: si tiene hidden, no se ve */
.thread-modal[hidden]{
  display:none !important;
}


.thread-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.48);
  backdrop-filter:blur(4px);
}

.thread-window{
  position:relative;
  z-index:1;
  width:min(520px, 92vw);
  max-height:80vh;
  border-radius:20px;
  border:1px solid var(--line);
  background:var(--card);
  box-shadow:var(--shadow-lg);
  padding:14px 16px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.thread-title{
  margin:0 0 4px;
}

.thread-close{
  position:absolute;
  top:6px;
  right:8px;
  border:none;
  background:transparent;
  font-size:20px;
  cursor:pointer;
}

.thread-scroll{
  flex:1;
  overflow:auto;
  padding-right:6px;
  margin-top:4px;
  display:grid;
  gap:8px;
}

/* Mensajes dentro del hilo (tipo timeline) */
.thread-msg{
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--paper);
  padding:6px 8px;
  font-size:.9rem;
  position:relative;
}

.thread-msg-meta{
  font-size:.75rem;
  color:var(--muted);
  margin-bottom:2px;
}

.thread-msg::before{
  content:"";
  position:absolute;
  left:-6px;
  top:10px;
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--ring);
}

.thread-reply-form{
  margin-top:6px;
  display:flex;
  gap:6px;
}

.thread-reply-input{
  flex:1;
  border-radius:999px;
  border:1px solid var(--line);
  padding:6px 10px;
  font-size:.85rem;
}

.thread-reply-btn{
  border-radius:999px;
  border:1px solid var(--line);
  padding:6px 12px;
  background:#CFEAFF;
  font-family:"Fredoka";
  font-size:.85rem;
  cursor:pointer;
}

/* Modo oscuro ajustes */
body[data-theme="dark"] .support-forum{
  background:color-mix(in oklab,var(--card) 94%,#020617 6%);
}

body[data-theme="dark"] .sf-board{
  background:color-mix(in oklab,var(--card) 92%,#020617 8%);
}

body[data-theme="dark"] .sf-board-inner{
  background:color-mix(in oklab,var(--card) 94%,#020617 6%);
}

body[data-theme="dark"] .thread-backdrop{
  background:rgba(15,23,42,.7);
}

/* ===== Mejoras visuales foro: color + corazón ===== */

/* Fondo del contenedor principal del foro */
.support-forum{
  background:linear-gradient(
    180deg,
    color-mix(in oklab,var(--card) 90%, var(--lilac) 10%),
    color-mix(in oklab,var(--card) 94%, var(--blue) 6%)
  );
  border-color:color-mix(in oklab,var(--line) 60%, var(--lilac) 40%);
}

/* Marco donde están los comentarios */
.sf-board{
  background:linear-gradient(
    180deg,
    color-mix(in oklab,var(--card) 94%, var(--blue) 6%),
    color-mix(in oklab,var(--card) 96%, var(--pink) 4%)
  );
}

/* Interior del tablero con un toque suave */
.sf-board-inner{
  background:linear-gradient(
    180deg,
    color-mix(in oklab,#ffffff 90%, var(--blue) 10%),
    #ffffff
  );
}

/* Tarjetitas de la tira superior */
.sf-strip-card{
  background:linear-gradient(
    180deg,
    color-mix(in oklab,#ffffff 92%, var(--peach) 8%),
    #ffffff
  );
}

/* Tarjetas grandes de comentarios */
.sf-thread-card{
  background:linear-gradient(
    180deg,
    #ffffff,
    color-mix(in oklab,#ffffff 90%, var(--pink) 10%)
  );
}

/* Botón "crear cuenta" un poco más vistoso */
.sf-account-pill{
  background:linear-gradient(
    90deg,
    color-mix(in oklab,#ffffff 88%, var(--pink) 12%),
    color-mix(in oklab,#ffffff 88%, var(--lilac) 12%)
  );
}

/* Corazones rojos */
.sf-like-btn button,
.sf-strip-heart{
  color:#e11d48; /* rojo frambuesa */
}

/* Botón de like más cómodo de tocar */
.sf-like-btn button{
  font-size:1rem;
  line-height:1;
}

/* Animación de latido */
@keyframes heartBeat{
  0%{ transform:scale(1); }
  30%{ transform:scale(1.3); }
  60%{ transform:scale(0.95); }
  100%{ transform:scale(1); }
}

/* Clase que dispara la animación */
.sf-heart-btn.is-pulsing{
  animation:heartBeat 0.45s ease-out;
  transform-origin:center;
}

/* Modal un poco más dulce */
.thread-window{
  background:linear-gradient(
    180deg,
    color-mix(in oklab,var(--card) 94%, var(--blue) 6%),
    color-mix(in oklab,var(--card) 94%, var(--pink) 6%)
  );
}

.sf-account-pill.is-logged{
  border-color:var(--ring);
  background:linear-gradient(90deg,#FFD6E7,#CFEAFF);
}

/* =====================================
   FORO · diseño colorido y suave
===================================== */

/* Fondo general de la sección foro */
.section.forum{
  position:relative;
}

.section.forum::before{
  content:"";
  position:absolute;
  inset:-40px 0 auto;
  height:160px;
  background:
    radial-gradient(18rem 12rem at 0% 0%, rgba(255,214,231,.55) 0 70%, transparent 71%),
    radial-gradient(18rem 12rem at 100% 0%, rgba(207,234,255,.55) 0 70%, transparent 71%);
  opacity:.8;
  pointer-events:none;
  z-index:-1;
}

/* CONTENEDOR PRINCIPAL */
.support-forum{
  position:relative;
  border-radius:24px;
  border:1px solid color-mix(in oklab,var(--line) 60%, var(--lilac) 40%);
  padding:16px 18px 14px;
  max-width:960px;
  margin-inline:auto;
  background:
    linear-gradient(180deg,
      color-mix(in oklab,var(--card) 88%, var(--lilac) 12%),
      color-mix(in oklab,var(--card) 92%, var(--blue) 8%));
  box-shadow:var(--shadow-lg);
}

/* Tira decorativa arriba */
.support-forum::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:10px;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,#FFD6E7,#E5D6FF,#CFEAFF,#FFF4B8);
  opacity:.8;
}

/* Barra superior: anónimo / cuenta */
.sf-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
  margin-bottom:12px;
}

.sf-anon-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.9rem;
}

.sf-anon-toggle input{
  width:16px;
  height:16px;
}

/* pastilla "crear cuenta" */
.sf-account-pill{
  border-radius:999px;
  border:1px solid var(--line);
  padding:4px 12px 4px 14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.85rem;
  cursor:pointer;
  background:linear-gradient(
    90deg,
    color-mix(in oklab,#ffffff 85%, var(--pink) 15%),
    color-mix(in oklab,#ffffff 85%, var(--lilac) 15%)
  );
  box-shadow:var(--shadow-sm);
}

.sf-account-pill.is-logged{
  border-color:var(--ring);
  box-shadow:0 0 0 2px color-mix(in oklab,var(--ring) 40%, transparent 60%);
}

.sf-account-dot{
  width:14px;
  height:14px;
  border-radius:999px;
  border:1px solid var(--ring);
  background:#fff;
}

/* TABLERO PRINCIPAL */
.sf-board{
  border-radius:18px;
  border:1px solid color-mix(in oklab,var(--line) 70%, var(--blue) 30%);
  padding:10px 10px 12px;
  background:
    radial-gradient(circle at 0 0, rgba(255,214,231,.5) 0 40%, transparent 41%),
    radial-gradient(circle at 100% 0, rgba(207,234,255,.45) 0 40%, transparent 41%),
    linear-gradient(180deg,
      color-mix(in oklab,var(--card) 96%, var(--blue) 4%),
      color-mix(in oklab,var(--card) 96%, var(--pink) 4%));
  box-shadow:var(--shadow-md);
}

/* Tira superior de mini tarjetas */
.sf-thread-strip{
  display:flex;
  gap:8px;
  margin-bottom:10px;
  overflow-x:auto;
  padding:4px 2px 6px;
}

.sf-thread-strip::-webkit-scrollbar{
  height:4px;
}
.sf-thread-strip::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(148,163,184,.6);
}

.sf-strip-card{
  min-width:90px;
  max-width:130px;
  border-radius:14px;
  border:1px solid var(--line);
  padding:8px 8px 10px;
  font-size:.75rem;
  position:relative;
  cursor:pointer;
  flex-shrink:0;
  background:linear-gradient(
    180deg,
    #ffffff,
    color-mix(in oklab,#ffffff 80%, var(--peach) 20%)
  );
  box-shadow:var(--shadow-sm);
}

.sf-strip-text{
  max-height:3.1em;
  overflow:hidden;
}

/* corazón */
.sf-strip-heart{
  position:absolute;
  right:8px;
  bottom:6px;
  font-size:.85rem;
  color:#e11d48;
}

/* CUADRO GRANDE DE MENSAJES */
.sf-board-inner{
  border-radius:16px;
  border:1px dashed var(--line);
  padding:10px 8px;
  min-height:130px;
  background:linear-gradient(
    180deg,
    color-mix(in oklab,#ffffff 90%, var(--blue) 10%),
    #ffffff
  );
}

.sf-empty{
  font-size:.9rem;
  color:var(--muted);
}

/* LISTA DE HILOS */
.sf-thread-list{
  display:grid;
  gap:10px;
  margin-top:6px;
}

.sf-thread-card{
  position:relative;
  border-radius:14px;
  border:1px solid var(--line);
  padding:9px 10px 8px 12px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:4px;
  background:linear-gradient(
    180deg,
    #ffffff,
    color-mix(in oklab,#ffffff 85%, var(--pink) 15%)
  );
  box-shadow:var(--shadow-sm);
}

/* barrita de color a la izquierda */
.sf-thread-card::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg,#FF7AA8,#7C4DFF);
}

.sf-thread-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.8rem;
  color:var(--muted);
}

.sf-thread-text{
  font-size:.9rem;
}

/* acciones */
.sf-thread-actions{
  display:flex;
  gap:12px;
  font-size:.8rem;
  align-items:center;
  margin-top:2px;
}

.sf-like-btn,
.sf-reply-count{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.sf-like-btn button{
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:1rem;
  line-height:1;
  color:#e11d48;
}

/* corazon latiendo */
@keyframes heartBeat{
  0%{ transform:scale(1); }
  30%{ transform:scale(1.25); }
  60%{ transform:scale(.95); }
  100%{ transform:scale(1); }
}

.sf-heart-btn.is-pulsing{
  animation:heartBeat .45s ease-out;
  transform-origin:center;
}

/* FORMULARIO INFERIOR */
.sf-form{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.sf-alias{
  width:100%;
  border-radius:999px;
  border:1px solid var(--line);
  padding:6px 10px;
  font-size:.85rem;
  background:rgba(255,255,255,.9);
}

.sf-input-row{
  display:flex;
  gap:8px;
  margin-top:2px;
}

.sf-input{
  flex:1;
  border-radius:999px;
  border:1px solid var(--line);
  padding:8px 12px;
  font-size:.9rem;
  background:#ffffff;
}

.sf-send-btn{
  border-radius:999px;
  border:1px solid var(--line);
  padding:8px 14px;
  background:#FFD6E7;
  font-family:"Fredoka";
  font-size:.9rem;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
}

.sf-send-btn:hover{
  transform:translateY(-1px);
}

/* mensaje de cooldown / avisos */
.sf-footer-row{
  min-height:1.1em;
}

.sf-cooldown{
  font-size:.8rem;
  color:var(--ink-2);
}

/* ===== MODAL DE HILO ===== */

.thread-modal{
  position:fixed;
  inset:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:center;
}

.thread-modal[hidden]{
  display:none !important;
}

.thread-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(5px);
}

.thread-window{
  position:relative;
  z-index:1;
  width:min(520px, 92vw);
  max-height:80vh;
  border-radius:22px;
  border:1px solid var(--line);
  padding:16px 18px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:linear-gradient(
    180deg,
    color-mix(in oklab,var(--card) 94%, var(--blue) 6%),
    color-mix(in oklab,var(--card) 94%, var(--pink) 6%)
  );
  box-shadow:var(--shadow-lg);
}

.thread-title{
  margin:0 0 4px;
}

.thread-close{
  position:absolute;
  top:8px;
  right:10px;
  border:none;
  background:transparent;
  font-size:20px;
  cursor:pointer;
}

/* scroll de mensajes del hilo */
.thread-scroll{
  flex:1;
  overflow:auto;
  padding-right:6px;
  margin-top:6px;
  display:grid;
  gap:8px;
}

/* Mensaje dentro del hilo */
.thread-msg{
  border-radius:12px;
  border:1px solid var(--line);
  padding:6px 8px;
  font-size:.9rem;
  background:#ffffff;
  position:relative;
}

.thread-msg-meta{
  font-size:.75rem;
  color:var(--muted);
  margin-bottom:2px;
}

.thread-msg::before{
  content:"";
  position:absolute;
  left:-6px;
  top:10px;
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--ring);
}

/* formulario de respuesta */
.thread-reply-form{
  margin-top:6px;
  display:flex;
  gap:6px;
}

.thread-reply-input{
  flex:1;
  border-radius:999px;
  border:1px solid var(--line);
  padding:6px 10px;
  font-size:.85rem;
  background:#ffffff;
}

.thread-reply-btn{
  border-radius:999px;
  border:1px solid var(--line);
  padding:6px 12px;
  background:#CFEAFF;
  font-family:"Fredoka";
  font-size:.85rem;
  cursor:pointer;
}

/* MODO OSCURO */
body[data-theme="dark"] .support-forum{
  background:color-mix(in oklab,var(--ink-2) 35%, var(--card) 65%);
}

body[data-theme="dark"] .sf-board{
  background:linear-gradient(
    180deg,
    color-mix(in oklab,var(--ink-2) 20%, var(--card) 80%),
    color-mix(in oklab,var(--ink-2) 15%, var(--card) 85%)
  );
}

body[data-theme="dark"] .sf-board-inner{
  background:color-mix(in oklab,var(--card) 90%, #020617 10%);
}

body[data-theme="dark"] .sf-thread-card{
  background:linear-gradient(
    180deg,
    color-mix(in oklab,var(--card) 92%, #020617 8%),
    color-mix(in oklab,var(--card) 90%, #020617 10%)
  );
}

body[data-theme="dark"] .thread-window{
  background:linear-gradient(
    180deg,
    color-mix(in oklab,var(--card) 92%, #020617 8%),
    color-mix(in oklab,var(--card) 90%, #020617 10%)
  );
}

/* ===== Ajuste: altura fija del foro y scroll interno ===== */

.support-forum{
  max-height: 580px;        /* altura fija del bloque del foro */
  overflow: hidden;         /* evita que crezca hacia afuera */
  display: flex;
  flex-direction: column;
}

/* El tablero debe ocupar el espacio disponible y scroll interno */
.sf-board{
  flex: 1;                   /* usa el espacio vertical sobrante */
  overflow: hidden;          /* no crecer fuera */
  display: flex;
  flex-direction: column;
}

.sf-board-inner{
  flex: 1;
  overflow-y: auto;          /* ahora el scroll es interno */
  min-height: 0;             /* IMPORTANTÍSIMO para que funcione el flex + scroll */
}

/* Para que la tira superior no desaparezca */
.sf-thread-strip{
  flex-shrink: 0;
}

/* Scroll bonito */
.sf-board-inner::-webkit-scrollbar{
  width: 8px;
}
.sf-board-inner::-webkit-scrollbar-thumb{
  background: rgba(120,120,120,.25);
  border-radius: 999px;
}

/* =====================================
   MODAL DE AUTENTICACIÓN (cuentas)
===================================== */

.auth-modal{
  position:fixed;
  inset:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Nunito", system-ui;
}

.auth-modal[hidden]{
  display:none !important;
}

.auth-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(6px);
}

/* Ventana */

.auth-window{
  position:relative;
  z-index:1;
  width:min(460px, 94vw);
  max-height:82vh;
  border-radius:22px;
  border:1px solid var(--line);
  background:linear-gradient(
    180deg,
    color-mix(in oklab,var(--card) 90%, var(--blue) 10%),
    color-mix(in oklab,var(--card) 90%, var(--pink) 10%)
  );
  box-shadow:var(--shadow-lg);
  padding:16px 18px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* ==========================
   Notificación flotante (toast)
========================== */

.kiva-toast{
  position:fixed;
  top:12px;
  left:50%;
  transform:translate(-50%, -20px);
  padding:8px 16px;
  border-radius:999px;
  font-size:.85rem;
  font-family:"Nunito", system-ui;
  background:#22c55e;        /* verde suave */
  color:#052e16;
  box-shadow:var(--shadow-md);
  opacity:0;
  pointer-events:none;
  z-index:50;
  transition:
    opacity .22s ease-out,
    transform .22s ease-out;
}

.kiva-toast.is-visible{
  opacity:1;
  transform:translate(-50%, 0);
}

body[data-theme="dark"] .kiva-toast{
  background:#16a34a;
  color:#ecfdf5;
}


.auth-close{
  position:absolute;
  top:8px;
  right:10px;
  border:none;
  background:transparent;
  font-size:20px;
  cursor:pointer;
}

/* Tabs */

.auth-tabs{
  display:inline-flex;
  border-radius:999px;
  padding:2px;
  background:color-mix(in oklab,#ffffff 70%, var(--lilac) 30%);
  margin-bottom:8px;
}

.auth-tab{
  border:none;
  background:transparent;
  padding:6px 14px;
  border-radius:999px;
  font-family:"Fredoka";
  font-size:.9rem;
  cursor:pointer;
  color:var(--ink-2);
}

.auth-tab.is-active{
  background:#fff;
  box-shadow:var(--shadow-sm);
}

/* Formularios */

.auth-form{
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:auto;
  padding-right:4px;
}

.auth-form.is-hidden{
  display:none;
}

.auth-title{
  margin:0 0 4px;
}

.auth-field{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:.85rem;
}

.auth-field span{
  font-weight:700;
}

.auth-field input{
  border-radius:999px;
  border:1px solid var(--line);
  padding:7px 11px;
  font-size:.9rem;
  background:#fff;
}

.auth-main-btn{
  margin-top:6px;
  border-radius:999px;
  border:1px solid var(--line);
  padding:8px 14px;
  background:linear-gradient(90deg,#FFD6E7,#CFEAFF);
  font-family:"Fredoka";
  font-size:.95rem;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
}

.auth-main-btn:hover{
  transform:translateY(-1px);
}

/* Grid nombres */

.auth-grid-two{
  display:grid;
  gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}

/* Mensajes */

.auth-error{
  min-height:1.2em;
  color:#b91c1c;
}

.auth-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:4px;
}

.auth-logout-btn{
  border-radius:999px;
  border:1px solid var(--line);
  padding:4px 10px;
  background:#fff;
  cursor:pointer;
  font-size:.8rem;
}

/* Modo oscuro */

body[data-theme="dark"] .auth-window{
  background:linear-gradient(
    180deg,
    color-mix(in oklab,var(--card) 90%, #020617 10%),
    color-mix(in oklab,var(--card) 85%, #020617 15%)
  );
}

.auth-pass-wrap{
  display:flex;
  align-items:center;
  gap:6px;
}

.auth-pass-wrap input{
  flex:1;
}

.auth-toggle-pass{
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:1rem;
  padding:4px;
  line-height:1;
}

.auth-toggle-pass:hover{
  transform:scale(1.05);
}

.auth-pass-wrap{
  display:flex;
  align-items:center;
  gap:6px;
}

.auth-pass-wrap input{
  flex:1;
}

.auth-toggle-pass{
  cursor:pointer;
  font-size:1rem;
  padding:4px;
  line-height:1;
  user-select:none;
}

.auth-toggle-pass:hover{
  transform:scale(1.05);
}

.auth-verify-block{
  margin-top:12px;
  padding-top:10px;
  border-top:1px dashed var(--line);
}

.auth-verify-row{
  display:flex;
  gap:8px;
  margin-top:6px;
}

.auth-verify-row input{
  flex:1;
}

.auth-main-btn--secondary{
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--ring);
}

/* ===== Ajustes de legibilidad SOLO en modo oscuro ===== */

/* 1. Portada: subtítulo "Cuidarte es importante..." */
body[data-theme="dark"] .hero .sub{
  color:#e5e7eb; /* gris clarito, se ve bien sobre el fondo oscuro */
}

/* 2. Semáforo: tarjetas del lado izquierdo ("Abrazo cariñoso", etc.) */
body[data-theme="dark"] .traffic-card .text{
  color:#e5e7eb;
}

/* 3. Sección "Cómo denunciar un delito": todo el texto más claro */
body[data-theme="dark"] #denuncia{
  color:#e5e7eb;
}

/* Textos secundarios dentro de "Cómo denunciar" (párrafos más suaves) */
body[data-theme="dark"] #denuncia .small,
body[data-theme="dark"] #denuncia .muted{
  color:#cbd5f5; /* un gris azulado más clarito */
}

/* ===== Botones de la sección "Cómo denunciar" — legibles en modo oscuro ===== */

body[data-theme="dark"] #denuncia button,
body[data-theme="dark"] #denuncia .step-btn,
body[data-theme="dark"] #denuncia .person-btn,
body[data-theme="dark"] #denuncia .item-btn,
body[data-theme="dark"] #denuncia .emotion-btn {
  color: #e7e9f0 !important; /* texto clarito */
}

/* Para botones con fondo muy claro, asegurar que sigan legibles */
body[data-theme="dark"] #denuncia button span,
body[data-theme="dark"] #denuncia .step-btn span,
body[data-theme="dark"] #denuncia .person-btn span,
body[data-theme="dark"] #denuncia .item-btn span,
body[data-theme="dark"] #denuncia .emotion-btn span {
  color: #e7e9f0 !important;
}

/* Los bullet-points (⚫) que también son botones */
body[data-theme="dark"] #denuncia .bullet,
body[data-theme="dark"] #denuncia .bullet span {
  color: #e7e9f0 !important;
}

/* ===== Botón activo (seleccionado) en modo oscuro ===== */

body[data-theme="dark"] #denuncia .active,
body[data-theme="dark"] #denuncia button.active,
body[data-theme="dark"] #denuncia .step-btn.active,
body[data-theme="dark"] #denuncia .person-btn.active,
body[data-theme="dark"] #denuncia .item-btn.active,
body[data-theme="dark"] #denuncia .emotion-btn.active {
  background-color: #334155 !important; /* gris azuladito elegante */
  color: #f1f5f9 !important;            /* texto clarito */
  border-color: #475569 !important;     /* borde suave oscuro */
}

/* Si dentro hay spans, que también se vean claritos */
body[data-theme="dark"] #denuncia .active span,
body[data-theme="dark"] #denuncia button.active span {
  color: #f1f5f9 !important;
}

/* ===== MODO OSCURO: botones activos en sección "Cómo denunciar" ===== */

/* Tabs de pasos (Paso 1, Paso 2, etc.) */
body[data-theme="dark"] #denuncia .denuncia-step-chip.is-active{
  background:#1f2937 !important;   /* gris azulado oscuro */
  border-color:#4b5563 !important;
  color:#f9fafb !important;        /* texto clarito */
}

/* Botones de roles (Soy niña/niño, Soy persona adulta, etc.) */
body[data-theme="dark"] #denuncia .role-toggle.is-active{
  background:#1f2937 !important;
  border-color:#4b5563 !important;
  color:#f9fafb !important;
}

/* Checklist de qué llevar (los ⚫ que se vuelven verdes) */
body[data-theme="dark"] #denuncia .check-pill.is-checked{
  background:#111827 !important;
  border-color:#22c55e !important;
  color:#e5e7eb !important;
}
body[data-theme="dark"] #denuncia .check-pill.is-checked .check-mark{
  color:#bbf7d0 !important;
}

/* Chips de pruebas (Declaraciones, Pruebas digitales, etc.) */
body[data-theme="dark"] #denuncia .evidence-chip.is-active{
  background:#1f2937 !important;
  border-color:#4b5563 !important;
  color:#f9fafb !important;
}

/* Botones de emociones (Tengo miedo, Estoy enojada/o, etc.) */
body[data-theme="dark"] #denuncia .emotion-btn.is-active{
  background:#1f2937 !important;
  border-color:#4b5563 !important;
  color:#f9fafb !important;
}