/* =====================================================================
   Mi Plan Gaby · estilos v2 (Gaby, 24 oct 2026)
   Mismo lenguaje que la landing AFTER Píldora (nutrigabyferr.com/after-pildora):
   bordes de tinta, sombras sólidas desplazadas, stickers girados, estrellitas ✦
   sin franja (Gaby, 24 oct 2026). Fondos claros; un solo bloque oscuro (el saludo).
   Todos los pares texto/fondo cumplen WCAG AA (ver docs/DISENO.md).
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Playfair+Display:ital,wght@0,600;0,700;0,900;1,600&display=swap');

:root {
  /* Marca AFTER Píldora */
  --vino: #4A1428;
  --vino-2: #5E1E36;
  --ciruela: #6B2D4A;
  --rosa: #FF9EC4;          /* acento: fondos, bordes, estrellitas. Nunca letra sobre claro */
  --rosa-2: #FFD3E5;
  --rosa-claro: #FBE6EE;
  --arena: #F7EEDD;
  --crema: #FFF8EC;
  --mantequilla: #FFF09A;   /* stickers y subrayados, siempre con letra oscura */
  --tinta: #2B0A16;
  --texto-2: #5A4650;

  /* Semáforo suave (texto oscuro sobre pastel: contraste >= 7:1) */
  --verde-fondo: #E3F1E6;   --verde-texto: #1F5A32;
  --amarillo-fondo: #FFF4CC; --amarillo-texto: #6B4E00;
  --rojo-fondo: #FBE3E1;    --rojo-texto: #8A1F1A;

  --borde: 2.5px solid var(--tinta);
  --radio: 22px;
  --sombra: 5px 5px 0 var(--tinta);
  --sombra-rosa: 5px 5px 0 var(--rosa);
  --fuente-titulos: 'Playfair Display', Georgia, serif;
  --fuente-texto: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0; background: var(--arena); color: var(--tinta);
  font-family: var(--fuente-texto); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0 0 8px; line-height: 1.1; }
h2 { font-family: var(--fuente-titulos); font-weight: 900; font-size: clamp(30px, 8vw, 40px); color: var(--vino); }
h2 em { color: var(--ciruela); }
h3 { font-weight: 900; font-size: 1.05rem; }
p { margin: 0 0 10px; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; }

.contenedor { max-width: 600px; margin: 0 auto; padding: 0 16px; }
.secundario { color: var(--texto-2); font-size: .92rem; }
.eyebrow { font-weight: 900; letter-spacing: 3px; font-size: 12px; text-transform: uppercase; color: var(--ciruela); }
.hl { background: linear-gradient(transparent 55%, var(--mantequilla) 55%); font-weight: 800; }
.serif { font-family: var(--fuente-titulos); }

/* ---------- barra superior, saludo ---------- */
.topbar { background: var(--vino); color: var(--crema); text-align: center; font-weight: 800; font-size: 11px; letter-spacing: 2.5px; padding: 9px 12px; }
.aviso-demo { background: var(--mantequilla); border-bottom: var(--borde); text-align: center; font-size: 13px; font-weight: 800; padding: 7px 12px; }

.hero { padding-top: 18px; padding-bottom: 8px; }
.hero-card {
  position: relative; overflow: hidden; background: var(--vino); color: var(--crema);
  border: 3px solid var(--tinta); border-radius: 30px; padding: 30px 22px 24px;
}
.hero-card::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: var(--ciruela); right: -120px; top: -140px; opacity: .8; }
.hero-card::after { content: ""; position: absolute; width: 190px; height: 190px; border-radius: 50%; background: #5c2238; left: -80px; bottom: -100px; opacity: .9; }
.hero-card > * { position: relative; z-index: 2; }
.hero .eyebrow { color: var(--rosa-2); }
.hero h1 { font-family: var(--fuente-titulos); font-weight: 900; font-size: clamp(44px, 13vw, 64px); line-height: .92; margin: 10px 0 4px; letter-spacing: -.5px; }
.hero h1 span { display: block; color: var(--rosa); }
.hero .tagline { font-family: var(--fuente-titulos); font-style: italic; font-weight: 600; font-size: 19px; margin: 6px 0 16px; color: #f3dfe6; }
.barra-rosa { width: 70px; height: 5px; border-radius: 9px; background: var(--rosa); margin: 12px 0; }

.sticker {
  display: inline-flex; align-items: center; gap: 6px; background: var(--mantequilla); color: var(--tinta);
  border: var(--borde); border-radius: 999px; padding: 7px 14px; font-weight: 900; font-size: 13px;
  letter-spacing: .5px; transform: rotate(-3deg); box-shadow: 3px 3px 0 var(--tinta);
}
.hero .sticker { margin-bottom: 14px; transform: rotate(-3deg); }

.progreso { margin: 8px 0 14px; }
.progreso .fila { display: flex; justify-content: space-between; font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.progreso .pista { height: 14px; border-radius: 999px; background: rgba(255, 158, 196, .18); border: 2px solid var(--rosa); overflow: hidden; }
.progreso .lleno { height: 100%; background: var(--rosa); border-radius: 999px; min-width: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { background: rgba(255, 158, 196, .18); border: 1.5px solid var(--rosa); color: var(--crema); font-weight: 800; font-size: 13px; padding: 6px 12px; border-radius: 999px; }

.chispa { position: absolute; color: var(--mantequilla); font-size: 22px; line-height: 1; animation: titilar 2.4s ease-in-out infinite; pointer-events: none; }
.chispa.rosa { color: var(--rosa); }
@keyframes titilar { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }


/* ---------- pestañas ---------- */
.pestanas {
  position: sticky; top: 0; z-index: 20; background: var(--arena); border-bottom: var(--borde);
  padding: 12px 0 12px;
}
.pestanas .rail { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 16px 6px; max-width: 600px; margin: 0 auto; scroll-snap-type: x proximity; }
.pestanas .rail::-webkit-scrollbar { display: none; }
.tab {
  flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  background: var(--crema); border: var(--borde); border-radius: 999px; padding: 8px 15px; font-weight: 800; font-size: 14px;
  box-shadow: 3px 3px 0 var(--tinta); cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s;
}
.tab .n { font-family: var(--fuente-titulos); font-weight: 900; color: var(--ciruela); }
.tab:hover { transform: translateY(-1px); }
.tab[aria-selected="true"] { background: var(--vino); color: var(--crema); box-shadow: 3px 3px 0 var(--rosa); }
.tab[aria-selected="true"] .n { color: var(--rosa); }

.panel { padding-top: 26px; padding-bottom: 30px; }
.panel[hidden] { display: none; }
.panel-cab { position: relative; margin-bottom: 18px; }
.panel-cab .chispa { right: 6px; top: 0; font-size: 26px; color: var(--rosa); -webkit-text-stroke: 1px var(--vino); }
.panel-cab p { font-size: 17px; }

/* ---------- tarjetas ---------- */
.tarjeta { background: var(--crema); border: var(--borde); border-radius: var(--radio); padding: 20px; margin: 0 0 18px; box-shadow: var(--sombra); }
.tarjeta.vino { background: var(--vino); color: var(--crema); box-shadow: var(--sombra-rosa); }
.tarjeta.vino h3 { color: var(--rosa); }
.tarjeta.rosa { background: var(--rosa-2); }
.tarjeta.gira-i { transform: rotate(-1deg); }
.tarjeta.gira-d { transform: rotate(1deg); }
.tarjeta h3 { color: var(--vino); }

.lista { list-style: none; padding: 0; margin: 0; }
.lista li { position: relative; padding: 8px 0 8px 30px; font-weight: 700; border-bottom: 1.5px dashed #e8cfd8; }
.lista li:last-child { border-bottom: 0; }
.lista li::before { content: "✦"; position: absolute; left: 2px; top: 5px; color: var(--rosa); -webkit-text-stroke: 1px var(--vino); font-size: 19px; }
.tarjeta.vino .lista li { border-color: #7b3552; }
.tarjeta.vino .lista li::before { color: var(--mantequilla); -webkit-text-stroke: 0; }

.numero { font-family: var(--fuente-titulos); font-weight: 900; font-size: 54px; line-height: .9; color: var(--rosa); -webkit-text-stroke: 1.5px var(--vino); }
.objetivo { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.objetivo h3 { font-family: var(--fuente-titulos); font-size: 23px; margin-top: 4px; }
.medimos { margin-top: 10px; padding-top: 10px; border-top: 2px dashed var(--rosa); font-size: 14px; font-weight: 700; }
.medimos b { color: var(--ciruela); letter-spacing: 1.5px; font-size: 11px; display: block; text-transform: uppercase; }

/* fases */
.fase { position: relative; }
.fase .ph { font-weight: 900; font-size: 12px; letter-spacing: 2px; color: var(--ciruela); text-transform: uppercase; }
.fase h3 { font-family: var(--fuente-titulos); font-size: 26px; margin: 4px 0 8px; }
.fase .meta { font-weight: 800; color: var(--vino); border-top: 2px dashed var(--rosa); padding-top: 10px; margin-top: 10px; font-size: 15px; }
.fase .sticker { position: absolute; top: -14px; right: 12px; transform: rotate(5deg); }
.fase.actual { background: var(--rosa-2); box-shadow: 7px 7px 0 var(--vino); }
.fase.hecha { opacity: .75; }
.conector { text-align: center; font-size: 24px; color: var(--vino); margin: -8px 0 8px; font-weight: 900; }

/* exámenes */
.botones { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.boton {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; background: var(--vino); color: var(--crema);
  border: 0; border-radius: 999px; padding: 12px 20px; font-weight: 900; font-size: 15px; text-decoration: none;
  box-shadow: 0 5px 0 var(--tinta); cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.boton:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--tinta); }
.boton.rosa { background: var(--rosa); color: var(--vino); }
.boton.chico { min-height: 40px; padding: 8px 16px; font-size: 14px; box-shadow: 0 4px 0 var(--tinta); }
.cita { background: var(--crema); border: var(--borde); border-radius: 20px; padding: 16px 18px; font-family: var(--fuente-titulos); font-style: italic; font-size: 18px; color: var(--vino); transform: rotate(-1deg); box-shadow: 5px 5px 0 var(--rosa); margin: 0 0 22px; }
.marcador .cab { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.marcador .valor { font-family: var(--fuente-titulos); font-weight: 900; font-size: 38px; color: var(--vino); line-height: 1; margin: 6px 0; }
.marcador .valor small { font-family: var(--fuente-texto); font-size: 14px; font-weight: 800; color: var(--texto-2); }
.rangos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; font-size: 13px; }
.rangos div { background: var(--arena); border-radius: 12px; padding: 8px 10px; }
.rangos b { display: block; font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ciruela); }
.estado { flex: none; font-weight: 900; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; border: 2px solid currentColor; }
.estado.bien { background: var(--verde-fondo); color: var(--verde-texto); }
.estado.mejorar { background: var(--amarillo-fondo); color: var(--amarillo-texto); }
.estado.vigilar { background: var(--rosa-2); color: var(--vino); }
.estado.derivar { background: var(--rojo-fondo); color: var(--rojo-texto); }
.haremos { margin-top: 8px; font-weight: 700; }
.haremos::before { content: "→ "; color: var(--ciruela); font-weight: 900; }

/* cómo funciona */
.paso { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1.5px dashed #e8cfd8; }
.paso:last-child { border: 0; }
.paso .circ { width: 44px; height: 44px; border-radius: 50%; background: var(--vino); color: var(--rosa); border: var(--borde); display: grid; place-items: center; font-family: var(--fuente-titulos); font-weight: 900; font-size: 20px; }
.paso h3 { margin-bottom: 2px; }
.ir { background: none; border: 0; padding: 4px 0; font-weight: 900; color: var(--vino); border-bottom: 2px solid var(--rosa); cursor: pointer; font-size: 14px; }
.ideas { display: grid; gap: 14px; }
details { background: var(--crema); border: var(--borde); border-radius: 18px; padding: 14px 18px; margin: 10px 0; }
summary { cursor: pointer; font-weight: 900; color: var(--vino); list-style: none; display: flex; justify-content: space-between; gap: 12px; min-height: 28px; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 24px; line-height: 1; transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 10px 0 0; }

/* porciones */
.comida-p { display: flex; flex-direction: column; gap: 10px; }
.comida-p .nombre { font-family: var(--fuente-titulos); font-weight: 900; font-size: 22px; color: var(--vino); }
.grupos { display: flex; flex-wrap: wrap; gap: 6px; }
.g { display: inline-flex; align-items: baseline; gap: 5px; border: 2px solid var(--tinta); border-radius: 12px; padding: 5px 10px; font-weight: 800; font-size: 14px; background: var(--crema); }
.g b { font-family: var(--fuente-titulos); font-size: 19px; color: var(--vino); }
.g.prot { background: var(--rosa-2); } .g.carb { background: var(--mantequilla); } .g.gras { background: #F5E1C8; }
.g.fruta { background: var(--rosa-claro); } .g.veg { background: var(--verde-fondo); color: var(--verde-texto); border-color: var(--verde-texto); }
.g.cero { opacity: .45; }
.selector { display: flex; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }
.chip-btn { min-height: 40px; border: var(--borde); border-radius: 999px; background: var(--crema); padding: 6px 14px; font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: 2px 2px 0 var(--tinta); }
.chip-btn[aria-pressed="true"] { background: var(--vino); color: var(--crema); box-shadow: 2px 2px 0 var(--rosa); }

/* intercambios y semáforo */
.alimento { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1.5px dashed #e8cfd8; }
.alimento:last-child { border: 0; }
.alimento .q { font-weight: 800; }
.alimento.fuera { opacity: .6; }
.alimento.fuera .q { text-decoration: line-through; }
.alt { color: var(--texto-2); font-size: .88rem; }
.nivel { font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--ciruela); }
.sem { flex: none; align-self: start; display: inline-block; font-size: 12px; font-weight: 900; padding: 3px 10px; border-radius: 999px; margin-left: 4px; }
.sem.v { background: var(--verde-fondo); color: var(--verde-texto); }
.sem.a { background: var(--amarillo-fondo); color: var(--amarillo-texto); }
.sem.r, .sem.x { background: var(--rojo-fondo); color: var(--rojo-texto); }
.sem.libre { background: var(--verde-fondo); color: var(--verde-texto); border: 1.5px dashed var(--verde-texto); }
.color { border-radius: var(--radio); border: var(--borde); padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--sombra); }
.color.v { background: var(--verde-fondo); } .color.a { background: var(--amarillo-fondo); } .color.r { background: var(--rojo-fondo); }
.color h3 { font-family: var(--fuente-titulos); font-size: 24px; }
.color.v h3 { color: var(--verde-texto); } .color.a h3 { color: var(--amarillo-texto); } .color.r h3 { color: var(--rojo-texto); }
.nube { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nube span { background: rgba(255, 255, 255, .7); border: 1.5px solid currentColor; border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 700; }

/* suplementos y hábitos */
.supl .dato { display: grid; grid-template-columns: 92px 1fr; gap: 6px; font-size: 15px; padding: 4px 0; }
.supl .dato b { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ciruela); padding-top: 3px; }
.codigo { display: inline-block; font-family: ui-monospace, monospace; font-weight: 900; background: var(--mantequilla); border: 2px dashed var(--tinta); border-radius: 10px; padding: 3px 10px; transform: rotate(-2deg); }
.check { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1.5px dashed #e8cfd8; font-weight: 700; cursor: pointer; min-height: 44px; }
.check:last-child { border: 0; }
.check input { appearance: none; -webkit-appearance: none; flex: none; width: 26px; height: 26px; border: var(--borde); border-radius: 8px; background: var(--crema); display: grid; place-items: center; cursor: pointer; margin: 0; }
.check input:checked { background: var(--rosa); }
.check input:checked::after { content: "✓"; font-weight: 900; color: var(--vino); }
.check .area { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ciruela); display: block; font-weight: 900; }

/* menú */
.dias { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 8px; margin-bottom: 8px; }
.dias::-webkit-scrollbar { display: none; }
.dias .chip-btn { flex: none; min-width: 52px; }
.dia-menu[hidden] { display: none; }
.comida { padding: 18px; }
.comida .tipo { font-weight: 900; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ciruela); }
.comida .plato { font-family: var(--fuente-titulos); font-weight: 900; font-size: 22px; color: var(--vino); margin: 2px 0 10px; line-height: 1.15; }
.items { list-style: none; padding: 0; margin: 0; }
.items li { padding: 9px 0; border-bottom: 1.5px dashed #e8cfd8; font-weight: 700; }
.items li:last-child { border-bottom: 0; }
.badge { display: inline-block; background: var(--mantequilla); border: 2px solid var(--tinta); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 900; }

.siguiente { display: flex; justify-content: flex-end; margin-top: 8px; }
.pie { text-align: center; padding: 26px 16px 40px; font-size: 14px; color: var(--texto-2); }
.pie b { font-family: var(--fuente-titulos); color: var(--vino); font-size: 18px; }

@media (min-width: 640px) {
  .hero-card { padding: 40px 36px 30px; }
  .ideas { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

[hidden] { display: none !important; }

/* ---------- v2.1 (Gaby, 24 oct 2026): consulta, objetivos por tipo, fases, mover porciones, tracker ---------- */
.consulta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; background: rgba(255, 158, 196, .14); border: 1.5px solid var(--rosa); border-radius: 18px; padding: 12px 14px; }
.consulta span { font-size: 12px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--rosa-2); width: 100%; }
.consulta b { font-family: var(--fuente-titulos); font-size: 22px; }
.consulta.pendiente b { color: var(--mantequilla); }
.subtitulo { margin: 22px 0 14px; }
.subtitulo h3 { font-family: var(--fuente-titulos); font-size: 26px; color: var(--vino); margin: 0; }
.area { display: inline-block; font-size: 11px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ciruela); }
.fase .meta { font-weight: 700; color: var(--texto-2); border: 0; padding: 0; margin: 0 0 10px; }
.fase-obj { margin-top: 10px; padding-top: 10px; border-top: 2px dashed var(--rosa); }
.fase-obj > b { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ciruela); }
.sem-grupo { margin-top: 12px; }
.sem-grupo > b { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.mover-form { display: grid; gap: 10px; margin: 12px 0 4px; }
.mover-form label { display: grid; gap: 4px; font-weight: 800; font-size: 14px; }
.mover-form select { min-height: 44px; border: var(--borde); border-radius: 12px; background: var(--crema); padding: 6px 10px; font: inherit; font-weight: 700; color: var(--tinta); }
.g.movida { outline: 3px solid var(--vino); outline-offset: 1px; }
.tracker-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.tracker-cab .sticker { transform: rotate(3deg); }
.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 8px; }
.dia-tk { display: grid; justify-items: center; gap: 2px; padding: 6px 0; border: 2px solid var(--tinta); border-radius: 12px; cursor: pointer; font-weight: 800;
  background: linear-gradient(to top, var(--rosa) var(--p, 0%), var(--crema) var(--p, 0%)); min-height: 52px; }
.dia-tk span { font-size: 11px; color: var(--ciruela); }
.dia-tk b { font-family: var(--fuente-titulos); font-size: 17px; }
.dia-tk[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--vino); }
.dia-tk:disabled { opacity: .4; cursor: default; }
.check .quitar { margin-left: auto; background: none; border: 0; font-size: 22px; color: var(--ciruela); cursor: pointer; min-width: 44px; min-height: 44px; }
.nuevo-habito { display: flex; gap: 8px; margin: 14px 0 8px; }
.nuevo-habito input { flex: 1; min-width: 0; min-height: 44px; border: var(--borde); border-radius: 999px; padding: 8px 14px; font: inherit; background: var(--crema); }

/* ---------- menú por porciones + alternativas + receta (Gaby, 24 oct 2026) ---------- */
.fila-p { display: grid; grid-template-columns: 108px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1.5px dashed #e8cfd8; }
.fila-p:last-of-type { border-bottom: 0; }
.grupo-p { border: 2px solid var(--tinta); border-radius: 12px; padding: 6px 8px; align-self: start; display: grid; gap: 1px; }
.grupo-p b { font-size: 12.5px; font-weight: 900; overflow-wrap: anywhere; }
.grupo-p span { font-size: 12px; font-weight: 800; color: var(--texto-2); }
.grupo-p.prot { background: var(--rosa-2); } .grupo-p.carb { background: var(--mantequilla); } .grupo-p.gras { background: #F5E1C8; }
.grupo-p.fruta { background: var(--rosa-claro); } .grupo-p.veg { background: var(--verde-fondo); border-color: var(--verde-texto); color: var(--verde-texto); }
.lineas { display: grid; gap: 6px; }
.linea { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 2px 0; font: inherit; }
.linea .q { font-weight: 800; }
.linea .alt { display: block; }
.cambiable { cursor: pointer; border-radius: 12px; padding: 6px 8px; margin: -4px -8px; width: calc(100% + 16px); }
.cambiable:hover, .cambiable:focus-visible { background: var(--rosa-claro); }
.cambiar { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 900; color: var(--vino); border-bottom: 2px solid var(--rosa); }
.receta { margin: 14px 0 0; background: var(--arena); border-width: 2px; }
.receta summary { justify-content: space-between; }
.receta ol { margin: 10px 0 0; padding-left: 20px; }
.receta li { padding: 4px 0; font-weight: 600; }
.hoja { border: var(--borde); border-radius: 24px 24px 0 0; padding: 0; width: 100%; max-width: 600px; max-height: 85vh; margin: auto auto 0;
  background: var(--crema); color: var(--tinta); box-shadow: 0 -6px 0 var(--rosa); }
.hoja::backdrop { background: rgba(43, 10, 22, .55); }
.hoja-cab { position: sticky; top: 0; background: var(--crema); display: flex; justify-content: space-between; gap: 10px; padding: 18px 18px 10px; border-bottom: 2px dashed var(--rosa); z-index: 2; }
.hoja-cab h3 { font-size: 22px; color: var(--vino); margin: 4px 0; }
.hoja .cerrar { flex: none; width: 44px; height: 44px; border-radius: 50%; border: var(--borde); background: var(--rosa); font-size: 24px; font-weight: 900; cursor: pointer; }
#hoja-cuerpo { padding: 6px 18px 24px; }
.cat { margin: 10px 0; padding: 10px 14px; border-width: 2px; }
.cat summary small { margin-left: auto; margin-right: 8px; font-size: 12px; background: var(--rosa-2); border-radius: 999px; padding: 2px 8px; color: var(--vino); }

/* ---------- meal prep y compras (Gaby, 24 oct 2026) ---------- */
.mp-zona { margin-top: 14px; padding-top: 12px; border-top: 2px dashed var(--rosa); }
.mp-sello { display: inline-block; background: var(--mantequilla); border: 2px solid var(--tinta); border-radius: 14px; padding: 6px 12px; font-weight: 800; font-size: 14px; margin-bottom: 8px; }
.comida.es-mp { box-shadow: 5px 5px 0 var(--mantequilla), 5px 5px 0 2.5px var(--tinta); }
.mp-pregunta { font-size: 15px; margin-bottom: 8px; }
.tanda { background: var(--crema); border: 2px solid var(--tinta); border-radius: 16px; padding: 12px 14px; margin: 4px 0 12px; }
.tanda h4 { font-family: var(--fuente-titulos); font-size: 19px; color: var(--vino); margin: 0 0 6px; }
.tanda ul { margin: 0 0 8px; padding-left: 18px; }
.tanda li { padding: 3px 0; }

/* ---------- evolución: entregas y adaptaciones (Gaby, 24 oct 2026) ---------- */
.entrega-chip { display: block; width: 100%; text-align: left; margin: 0 0 12px; background: var(--mantequilla); color: var(--tinta); border: 2px solid var(--tinta); border-radius: 14px; padding: 9px 12px; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.contador .puntos { display: flex; gap: 8px; margin: 8px 0 12px; }
.contador .punto { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--rosa); }
.contador .punto.hecho { background: var(--rosa); }
.contador p { margin: 0; }
.entrega { position: relative; }
.entrega .ph { font-weight: 900; font-size: 12px; letter-spacing: 2px; color: var(--ciruela); text-transform: uppercase; }
.entrega .sticker { position: absolute; top: -14px; right: 12px; transform: rotate(4deg); }
.entrega.actual { background: var(--rosa-2); box-shadow: 7px 7px 0 var(--vino); }
.entrega.futura { opacity: .7; border-style: dashed; box-shadow: none; }
.mini-t { font-size: 11px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ciruela); margin: 12px 0 6px; }
.cambios { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.cambios li { display: grid; grid-template-columns: 26px 1fr; gap: 6px; font-weight: 700; background: rgba(255, 255, 255, .6); border-radius: 12px; padding: 7px 10px; }
.nuevo { display: inline-block; font-size: 11px; font-weight: 900; background: var(--mantequilla); color: var(--tinta); border: 1.5px solid var(--tinta); border-radius: 999px; padding: 1px 8px; margin-left: 4px; vertical-align: middle; }
.dias-ej { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 8px; }
.dias-ej span { text-align: center; border: 2px solid var(--tinta); border-radius: 10px; padding: 5px 0; font-size: 12px; font-weight: 900; opacity: .45; }
.dias-ej span.on { background: var(--rosa); opacity: 1; }
.lema { margin-top: 12px; background: var(--mantequilla); border: 2px solid var(--tinta); border-radius: 14px; padding: 10px 12px; font-weight: 800; font-size: 15px; }
.fase.ruta { border-style: dashed; box-shadow: none; background: var(--crema); }
.candado { margin-top: 12px; font-weight: 700; font-size: 14px; color: var(--texto-2); }
.sec-inf { font-size: 24px !important; display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; }
.sec-inf span { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--vino); color: var(--rosa); display: grid; place-items: center; font-size: 18px; border: var(--borde); }
.bien-lista { font-size: 14px; line-height: 1.8; }

/* ---------- app instalable y acompañamiento (Gaby, 25 oct 2026) ---------- */
.aviso-instalar { display: block; width: 100%; margin: 8px 0 4px; background: var(--mantequilla); border: 2px solid var(--tinta); border-radius: 14px; padding: 10px 12px; font: inherit; font-weight: 800; font-size: 14px; text-align: left; cursor: pointer; }
.pasos-inst { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 8px; }
.pasos-inst > div { background: var(--arena); border-radius: 14px; padding: 12px 14px; }
.pasos-inst ol { margin: 6px 0 8px; padding-left: 20px; }
.pasos-inst li { padding: 2px 0; }
/* Botón fijo de acompañamiento (Gaby, 25 oct 2026): siempre visible en todas las pestañas */
.fab-equipo { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30; display: inline-flex; align-items: center; gap: 6px;
  background: var(--vino); color: var(--crema); border: 2.5px solid var(--tinta); border-radius: 999px; padding: 12px 18px; font-weight: 900; font-size: 15px;
  text-decoration: none; box-shadow: 3px 3px 0 var(--rosa); min-height: 48px; }
.fab-equipo:active { transform: translateY(2px); box-shadow: 1px 1px 0 var(--rosa); }
body { padding-bottom: 84px; }
.consultas ul { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.cons { display: grid; grid-template-columns: 96px 1fr; gap: 2px 10px; border: 2px solid var(--tinta); border-radius: 14px; padding: 10px 12px; background: var(--crema); }
.cons b { grid-row: span 2; font-family: var(--fuente-titulos); color: var(--vino); }
.cons small { color: var(--texto-2); font-size: 13px; }
.cons.hecha { opacity: .65; } .cons.toca { background: var(--mantequilla); } .cons.agendada { background: var(--rosa-2); } .cons.luego { border-style: dashed; }
.renovar .opciones { display: grid; gap: 10px; margin-top: 10px; }
.renovar .opciones > div { background: rgba(255, 158, 196, .14); border: 1.5px solid var(--rosa); border-radius: 14px; padding: 12px; display: grid; gap: 6px; color: var(--crema); }
.renovar .opciones span { font-size: 14px; color: #f3dfe6; }