/* componentes.css — botones, cartas, chips, luna, medallas, listas */

/* ---------- botones ---------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:56px;
  border-radius:var(--radio); border:0; cursor:pointer;
  font-size:var(--t-boton); font-weight:800; letter-spacing:.02em;
  transition:transform var(--transicion), filter var(--transicion);
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(.985); }
.btn svg{ width:20px; height:20px; flex:0 0 auto; }
.btn-primario{ background:var(--primaria); color:var(--primaria-txt); box-shadow:0 6px 20px rgba(242,184,96,.22); }
.btn-secundario{ background:var(--carta-alta); color:var(--texto); border:1px solid var(--linea); }
.btn-fantasma{ background:none; color:var(--secundaria); font-weight:700; min-height:var(--toque); }
.btn-gigante{ min-height:84px; font-size:calc(20px * var(--escala)); border-radius:22px; flex-direction:column; gap:4px; }
.btn-gigante small{ font-size:var(--t-chico); font-weight:600; opacity:.75; }
.btn[disabled]{ opacity:.45; cursor:default; }
.fila-botones{ display:flex; gap:12px; }
.fila-botones .btn{ flex:1 1 0; }

/* ---------- cartas ---------- */
.carta{
  background:var(--carta); border-radius:var(--radio);
  padding:18px 20px; border:1px solid var(--linea);
  margin:14px 0;
}
.carta-alta{ background:var(--carta-alta); }
.carta-ambar{
  background:linear-gradient(135deg, color-mix(in oklab, var(--primaria) 16%, var(--carta)), var(--carta));
  border:1px solid color-mix(in oklab, var(--primaria) 35%, transparent);
}
.carta-toque{ cursor:pointer; transition:border-color var(--transicion), transform var(--transicion); }
.carta-toque:active{ transform:scale(.99); }
.etiqueta{
  display:inline-flex; align-items:center; gap:6px;
  font-size:calc(12px * var(--escala)); font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--secundaria);
}
.etiqueta.ambar{ color:var(--primaria); }
.etiqueta.rosa{ color:var(--rosa); }
.etiqueta.alerta{ color:var(--alerta); }

/* ---------- chips (quiz, resoluciones) ---------- */
.chips{ display:flex; flex-direction:column; gap:10px; }
.chips.horizontal{ flex-direction:row; flex-wrap:wrap; }
.chip{
  min-height:var(--toque); padding:12px 18px;
  border-radius:14px; border:1.5px solid var(--linea);
  background:var(--carta); color:var(--texto);
  font-size:var(--t-cuerpo); font-weight:600; text-align:left;
  cursor:pointer; transition:border-color var(--transicion), background var(--transicion);
  display:flex; align-items:center; gap:10px;
}
.chip.elegido{ border-color:var(--primaria); background:color-mix(in oklab, var(--primaria) 14%, var(--carta)); }

/* ---------- inputs ---------- */
.campo{ margin:16px 0; }
.campo label{ display:block; font-weight:700; margin-bottom:8px; }
.campo .ayuda{ font-size:var(--t-chico); color:var(--texto-2); margin-top:6px; }
.campo input[type=text], .campo input[type=date], .campo input[type=time], .campo textarea, .campo select{
  width:100%; min-height:var(--toque);
  background:var(--carta); border:1.5px solid var(--linea); border-radius:14px;
  padding:12px 16px; color:var(--texto);
}
.campo input:focus, .campo textarea:focus{ border-color:var(--secundaria); outline:none; }

/* ---------- luna ---------- */
.luna-svg .halo{ opacity:0; }
.luna-svg.llena .halo{ opacity:1; animation:halo 3.6s ease-in-out infinite alternate; }
@keyframes halo{ from{ opacity:.35 } to{ opacity:.8 } }
.luna-hero{ display:flex; flex-direction:column; align-items:center; margin:8px 0 4px; }
.luna-hero .luna-svg{ filter:drop-shadow(0 0 24px rgba(242,184,96,.25)); }

/* trilha: mini lunas */
.luna-mini{ width:34px; height:34px; flex:0 0 auto; }

/* progreso de lectura en lunas minúsculas */
.progreso-lunas{ display:flex; gap:6px; align-items:center; }
.progreso-lunas .p-luna{ width:10px; height:10px; border-radius:50%; background:var(--luna-oscura); transition:background var(--transicion); }
.progreso-lunas .p-luna.hecha{ background:var(--primaria); }
.progreso-lunas .p-luna.actual{ background:var(--primaria); box-shadow:0 0 8px rgba(242,184,96,.7); }

/* ---------- estrellas que ascienden (momento de marcar noche) ---------- */
.brote-estrellas{ position:relative; overflow:visible; }
.estrella-sube{
  position:absolute; bottom:0; width:7px; height:7px; border-radius:50%;
  background:var(--primaria); pointer-events:none;
  animation:subir 1.2s cubic-bezier(.2,.7,.4,1) both;
}
@keyframes subir{
  0%{ opacity:0; transform:translateY(0) scale(.6); }
  15%{ opacity:1; }
  100%{ opacity:0; transform:translateY(-120px) scale(1.1); }
}
@media (prefers-reduced-motion: reduce){ .estrella-sube{ display:none; } }

/* ---------- medallas ---------- */
.vitrina{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.medalla{ display:flex; flex-direction:column; align-items:center; gap:6px; background:none; border:0; cursor:pointer; padding:4px; border-radius:var(--radio-chico); }
.medalla .aro{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--carta-alta); border:1.5px solid var(--linea);
  transition:all var(--transicion);
}
.medalla .aro svg{ width:30px; height:30px; color:var(--texto-2); opacity:.35; }
.medalla.ganada .aro{ background:color-mix(in oklab, var(--primaria) 18%, var(--carta)); border-color:var(--primaria); box-shadow:0 0 14px rgba(242,184,96,.28); }
.medalla.ganada .aro svg{ color:var(--primaria); opacity:1; }
.medalla span{ font-size:calc(10.5px * var(--escala)); color:var(--texto-2); text-align:center; line-height:1.25; }
.medalla.ganada span{ color:var(--texto); font-weight:700; }

/* ---------- secciones del lector ---------- */
.seccion{ margin:18px 0; }
.seccion .cuerpo :first-child{ margin-top:0; } .seccion .cuerpo :last-child{ margin-bottom:0; }
.sec-porque{
  background:linear-gradient(135deg, color-mix(in oklab, var(--primaria) 15%, var(--carta)), var(--carta));
  border:1px solid color-mix(in oklab, var(--primaria) 32%, transparent);
  border-radius:var(--radio); padding:16px 18px;
}
.sec-pasos ol{ margin:10px 0 0; padding:0; list-style:none; counter-reset:paso; }
.sec-pasos ol li{
  counter-increment:paso; position:relative;
  padding:12px 0 12px 52px; border-bottom:1px solid var(--linea);
}
.sec-pasos ol li:last-child{ border-bottom:0; }
.sec-pasos ol li::before{
  content:counter(paso);
  position:absolute; left:0; top:10px;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--carta-alta); border:1.5px solid var(--primaria);
  color:var(--primaria); font-family:var(--f-titulo); font-size:calc(19px * var(--escala)); font-weight:600;
}
.sec-neutra{ background:var(--carta); border-radius:var(--radio); padding:16px 18px; border:1px solid var(--linea); }
.colapsable{ border-radius:var(--radio); overflow:hidden; }
.colapsable summary{
  list-style:none; cursor:pointer; min-height:var(--toque);
  display:flex; align-items:center; gap:10px; padding:14px 18px;
  font-weight:800;
}
.colapsable summary::-webkit-details-marker{ display:none; }
.colapsable summary svg{ width:20px; height:20px; flex:0 0 auto; }
.colapsable summary .flecha{ margin-left:auto; transition:transform var(--transicion); flex:0 0 auto; }
.colapsable[open] summary .flecha{ transform:rotate(180deg); }
.colapsable .cuerpo{ padding:0 18px 16px; }
.sec-salemal{ background:var(--carta); border:1.5px solid color-mix(in oklab, var(--rosa) 55%, transparent); }
.sec-salemal summary{ color:var(--rosa); }
.sec-lactancia{ background:var(--carta); border:1px solid var(--linea); }
.sec-lactancia summary{ color:var(--secundaria); }
.sec-mama{
  background:var(--lava-oscuro); border-radius:var(--radio);
  padding:20px 22px 18px; position:relative; margin-top:26px;
}
.sec-mama::before{
  content:'“'; position:absolute; top:-18px; left:14px;
  font-family:var(--f-titulo); font-size:64px; color:var(--rosa); line-height:1;
}
.sec-mama .cuerpo{ font-style:italic; }
.sec-mama .firma{ font-size:var(--t-chico); color:var(--texto-2); font-style:normal; margin-top:8px; }
.sec-marcar{ text-align:center; }

/* ---------- trilha del plan ---------- */
.trilha{ position:relative; padding-left:6px; }
.tramo{ margin-bottom:26px; }
.tramo > h2{ display:block; }
.tramo .sub{ display:block; font-size:var(--t-chico); color:var(--texto-2); font-family:var(--f-cuerpo); font-weight:600; }
.fila-tela{
  display:flex; align-items:center; gap:14px;
  min-height:60px; padding:10px 12px; margin:2px 0;
  border-radius:14px; border:0; width:100%; text-align:left;
  background:none; cursor:pointer; color:var(--texto);
  transition:background var(--transicion);
}
.fila-tela:active{ background:var(--carta); }
.fila-tela > svg{ width:22px; height:22px; flex:0 0 auto; color:var(--texto-2); }
.fila-tela .icono-estado svg{ width:24px; height:24px; }
.fila-tela .textos .t, .fila-tela .textos .m{ display:block; }
.fila-tela .icono-estado{ flex:0 0 auto; width:34px; height:34px; display:flex; align-items:center; justify-content:center; }
.fila-tela .textos{ flex:1 1 auto; min-width:0; }
.fila-tela .textos .t{ font-weight:700; line-height:1.3; }
.fila-tela .textos .m{ font-size:var(--t-chico); color:var(--texto-2); }
.fila-tela.leida .textos .t{ color:var(--texto-2); font-weight:600; }
.fila-tela.bloqueada{ opacity:.55; }
.punto-leido{ width:9px; height:9px; border-radius:50%; background:var(--exito); flex:0 0 auto; }
.punto-noleido{ width:9px; height:9px; border-radius:50%; border:1.5px solid var(--texto-2); flex:0 0 auto; opacity:.6; }

/* ---------- timeline de ventanas ---------- */
.linea-dia{ position:relative; height:74px; margin:14px 0 4px; }
.linea-dia .eje{ position:absolute; left:0; right:0; top:36px; height:3px; border-radius:2px; background:var(--linea); }
.linea-dia .bloque{
  position:absolute; top:26px; height:23px; border-radius:8px;
  background:color-mix(in oklab, var(--primaria) 38%, var(--carta));
  border:1px solid var(--primaria);
}
.linea-dia .bloque.siesta-real{ background:color-mix(in oklab, var(--exito) 38%, var(--carta)); border-color:var(--exito); }
.linea-dia .bloque.noche{ background:color-mix(in oklab, var(--secundaria) 32%, var(--carta)); border-color:var(--secundaria); }
.linea-dia .marca-hora{ position:absolute; top:56px; font-size:calc(11px * var(--escala)); color:var(--texto-2); transform:translateX(-50%); }
.linea-dia .ahora{ position:absolute; top:18px; width:2px; height:40px; background:var(--rosa); border-radius:1px; }
.linea-dia .ahora::after{ content:''; position:absolute; top:-6px; left:-3px; width:8px; height:8px; border-radius:50%; background:var(--rosa); }

/* ---------- badges de nivel (checklist) ---------- */
.nivel-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:999px;
  font-size:calc(12.5px * var(--escala)); font-weight:800; letter-spacing:.03em;
}
.nivel-normal{ background:color-mix(in oklab, var(--exito) 22%, var(--carta)); color:var(--exito); }
.nivel-observa{ background:color-mix(in oklab, var(--primaria) 22%, var(--carta)); color:var(--primaria); }
.nivel-consulta{ background:color-mix(in oklab, #E2955F 24%, var(--carta)); color:#E2955F; }
.nivel-atencion-hoy{ background:color-mix(in oklab, var(--alerta) 26%, var(--carta)); color:var(--alerta); }

/* ---------- candado / bloqueado ---------- */
.candado-linea{ display:flex; align-items:center; gap:10px; color:var(--texto-2); font-size:var(--t-chico); }
.candado-linea svg{ width:16px; height:16px; flex:0 0 auto; }

/* ---------- separador con estrella ---------- */
.sep-estrella{ display:flex; align-items:center; gap:14px; margin:26px 0; color:var(--texto-2); }
.sep-estrella::before,.sep-estrella::after{ content:''; flex:1; height:1px; background:var(--linea); }