/* =========================================================
   LA LIBRETA DE CECI · tokens de José (C3, copiados tal cual)
   ========================================================= */
@font-face { font-family: "DM Sans"; src: url("fonts/dmsans-var.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
:root{
  --crema:#E7DFD3; --mascarpone:#F8ECC8; --caramelo:#CF8760; /* caramelo: SOLO relleno, nunca texto */
  --negro-faja:#48413F; --tinta:#292421; --cacao:#755144;
  --papel:#F7F3EC; --linea:#CFC3B2; --caramelo-osc:#8F4F2C; --apagado:#A89A88;
  --salvia:#3F5F3A; --salvia-t:#E2E8D5; --miel:#7A4E12; --miel-t:#F5E3BC; --tomate:#9A3422; --tomate-t:#F5DAD0;
  --serif:"Cormorant Garamond", Georgia, serif; --sans:"DM Sans", system-ui, sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --radio:14px; --radio-chico:10px; --toque:48px; --tabbar:72px;
  /* Ron: borde de campos editables. José usa --linea (1,57:1); se sube a --cacao para cumplir WCAG 1.4.11 (≥ 3:1). */
  --borde-campo: var(--cacao);
  --armado-t:#F3DCC8;
  /* José v2 "más alegre, más fácil" (aditivos; los de v1 siguen) */
  --fondo:#F3E9D8;      /* fondo de la app */
  --tarjeta:#FFFBF5;    /* superficie de tarjetas y secciones */
  --dulce:#D08A3E;      /* SOLO relleno/decoración: 2,76:1 sobre tarjeta, no sirve para texto */
  --dulce-t:#F6E2C4;    /* tinte: discos de íconos, capas del pote */
  --dulce-osc:#8A5316;  /* dulce apto para texto e íconos */
  --radio-v2:22px;  /* José §8b: tinte caramelo del marcador de armado */
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--crema)}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.45;color:var(--tinta);-webkit-font-smoothing:antialiased;font-optical-sizing:auto;-webkit-text-size-adjust:100%}
.num{font-family:var(--sans);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-0.01em}
button,input,select{font:inherit;color:inherit}
html,body,button,input,select,a,label,summary{touch-action:manipulation}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--negro-faja);color:var(--papel);padding:12px;z-index:10}
.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.screen{max-width:480px;margin:0 auto;padding:var(--s4) var(--s4) calc(var(--tabbar) + var(--s6) + env(safe-area-inset-bottom))}
main:focus{outline:none}

/* barra superior */
.appbar{display:flex;align-items:center;gap:var(--s3);padding:calc(var(--s2) + env(safe-area-inset-top)) 0 var(--s3)}
.sello{width:44px;height:44px;border-radius:50%;flex:none;display:block}
.appbar h1{font-family:var(--serif);font-weight:600;font-size:34px;line-height:1;margin:0}
.appbar .sub{font-size:14px;color:var(--cacao);margin-top:2px}

/* avisos */
.aviso{display:flex;gap:var(--s3);align-items:flex-start;background:var(--mascarpone);border:1.5px dashed var(--cacao);border-radius:var(--radio-chico);padding:10px var(--s3);margin:0 0 var(--s4)}
.aviso svg{flex:none;margin-top:1px;color:var(--cacao)}
.aviso b{font-size:15px}
.aviso .txt{font-size:14px;color:var(--cacao);display:block;line-height:1.35}
.aviso.info{background:var(--papel);border-style:solid;border-color:var(--linea)}
.aviso .acciones{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cacao);background:var(--mascarpone);border:1px solid var(--linea);border-radius:999px;padding:2px 8px;line-height:1.4;white-space:nowrap}

/* tarjeta de resultado */
.card{position:relative;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:var(--s4);box-shadow:0 3px 0 var(--linea);margin-bottom:var(--s3)}
.card .head{display:flex;align-items:center;gap:var(--s3);min-height:44px}
.card .ico{width:44px;height:44px;border-radius:50%;background:var(--mascarpone);display:grid;place-items:center;flex:none;color:var(--cacao)}
.card h2{font-family:var(--serif);font-weight:600;font-size:23px;line-height:1.12;margin:0}
.card > .tag{margin-bottom:var(--s2)}
.big{font-size:42px;font-weight:650;line-height:1;margin:var(--s3) 0 var(--s2)}
.card p{margin:0;font-size:16px;color:var(--cacao)}
.card p strong,.hint strong{color:var(--tinta);font-weight:600}
.extra{margin-top:var(--s3);padding-top:var(--s3);border-top:1px dashed var(--linea);font-size:15px;color:var(--cacao);display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.extra .num{color:var(--tinta);font-weight:650}
.redondeo{font-size:13px;color:var(--cacao);margin-top:var(--s1)}
.card.pasa{border-color:var(--tomate);box-shadow:0 3px 0 var(--tomate)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.dos .card{margin:0}
.dos .card .head{flex-direction:column;align-items:flex-start;gap:var(--s2)}
.dos .card h2{font-size:21px;min-height:2.24em}
.dos .big{font-size:32px}
@media (max-width:359px){.dos{grid-template-columns:1fr}}

.estado{display:inline-flex;align-items:center;gap:var(--s2);border-radius:999px;padding:6px 16px 6px 10px;font-weight:700;font-size:28px;line-height:1.1;margin:var(--s3) 0 var(--s2)}
.estado.ok,.chip.ok{background:var(--salvia-t);color:var(--salvia)}
.estado.justo,.chip.justo{background:var(--miel-t);color:var(--miel)}
.estado.pasa,.chip.pasa{background:var(--tomate-t);color:var(--tomate)}
.chip{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px;border-radius:999px;padding:4px 12px 4px 8px;white-space:nowrap}
.chip svg{flex:none}

/* sección */
.sec{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:var(--s5) var(--s4);margin-top:var(--s4);box-shadow:0 3px 0 var(--linea)}
.sec-head{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:var(--s2)}
.sec h3,.sec .h3{font-family:var(--serif);font-weight:600;font-size:27px;line-height:1.1;margin:0}
.hint{margin:var(--s1) 0 var(--s3);color:var(--cacao);font-size:15px}

/* stepper */
.fila{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--linea)}
.fila .nombre{flex:1;min-width:0}
.fila .nombre b{display:block;font-size:18px;font-weight:600;line-height:1.2}
.fila .nombre span{font-size:14px;color:var(--cacao)}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:var(--toque);height:var(--toque);border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.stepper .menos{background:var(--papel);border:2px solid var(--negro-faja);color:var(--negro-faja)}
.stepper .mas{background:var(--negro-faja);border:2px solid var(--negro-faja);color:var(--papel)}
.stepper button:disabled{border-color:var(--linea);color:var(--apagado);background:var(--papel);cursor:not-allowed}
.stepper .val{width:58px;height:var(--toque);text-align:center;font-size:24px;font-weight:650;border:1.5px solid var(--borde-campo);border-radius:var(--radio-chico);background:#fff;color:var(--tinta);padding:0}
.total{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-top:var(--s3);padding:var(--s3) var(--s3) var(--s3) var(--s4);border-radius:var(--radio-chico);background:var(--crema);font-size:16px;flex-wrap:wrap}
.total .num{font-size:22px;font-weight:700}

/* capacidad */
.cap{display:flex;gap:var(--s4);align-items:center;margin-top:var(--s2)}
.cap svg.pote{flex:none;width:132px;height:auto;overflow:visible}
.cap .big{font-size:40px;margin:0}
.cap .de{font-size:16px;color:var(--cacao)}
.cap p{margin:var(--s2) 0 0;color:var(--cacao);font-size:15px}
.limites{margin-top:var(--s4)}
.lim{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-top:1px solid var(--linea);flex-wrap:wrap}
.lim .ico{width:40px;height:40px;border-radius:50%;background:var(--crema);display:grid;place-items:center;flex:none;color:var(--cacao)}
.lim .t{flex:1;min-width:140px}
.lim .t b{display:block;font-size:16px}
.lim .t > span{display:block;font-size:14px;color:var(--cacao);line-height:1.3}
.mini{height:10px;border-radius:5px;background:var(--crema);border:1.5px solid var(--negro-faja);overflow:hidden;margin-top:6px}
.mini i{display:block;height:100%;background:var(--caramelo)}
.mini.pasa i{background:var(--tomate)}
.alerta{display:flex;gap:var(--s3);align-items:flex-start;background:var(--tomate-t);border:1.5px solid var(--tomate);border-radius:var(--radio-chico);padding:var(--s3) var(--s4);margin-top:var(--s4)}
.alerta svg{flex:none;color:var(--tomate)}
.alerta b{color:var(--tomate);font-size:16px}
.alerta p{margin:4px 0 0;font-size:15px;color:var(--tinta)}
.nota{display:flex;gap:var(--s2);align-items:center;font-size:14px;color:var(--cacao);margin-top:var(--s3)}
.nota svg{flex:none}
.pregunta{background:var(--mascarpone);border:1.5px solid var(--cacao);border-radius:var(--radio-chico);padding:var(--s3) var(--s4);margin-top:var(--s3)}
.pregunta b{font-size:16px}
.pregunta p{margin:4px 0 var(--s2);font-size:15px;color:var(--tinta)}
.pregunta .acciones{display:flex;flex-direction:column;gap:var(--s2)}

/* compras */
.grupo h4{display:flex;align-items:center;gap:var(--s2);margin:var(--s4) 0 var(--s1);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--cacao)}
.sec .grupo h3.grupo-t{display:flex;align-items:center;gap:var(--s2);margin:var(--s4) 0 var(--s1);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--cacao);font-family:var(--sans);font-weight:700;line-height:1.3}
.item{display:flex;align-items:center;gap:var(--s3);min-height:60px;padding:6px 0;cursor:pointer}
.item input[type=checkbox]{appearance:none;-webkit-appearance:none;width:28px;height:28px;margin:0;border:2px solid var(--negro-faja);border-radius:8px;background:#fff;flex:none;display:grid;place-items:center;cursor:pointer}
.item input[type=checkbox]:checked{background:var(--negro-faja)}
.item input[type=checkbox]:checked::after{content:"";width:12px;height:7px;border-left:3px solid var(--papel);border-bottom:3px solid var(--papel);transform:translateY(-2px) rotate(-45deg)}
.item .n{flex:1;min-width:0}
.item .n b{display:block;font-weight:600;font-size:16px;line-height:1.25}
.item .n > span{display:block;font-size:14px;color:var(--cacao);line-height:1.3}
.item .q{font-weight:650;white-space:nowrap;text-align:right}
.item.hecho .n b{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--cacao)}
.item.hecho .q{color:var(--cacao);font-weight:500}
.item.nada .q{color:var(--salvia);font-weight:700;font-size:14px;display:flex;align-items:center;gap:4px}
.item-wrap{border-bottom:1px solid var(--linea);padding-bottom:var(--s1)}
.stock-btn{background:none;border:0;color:var(--caramelo-osc);text-decoration:underline;font-size:15px;font-weight:600;min-height:var(--toque);padding:0 0 0 40px;cursor:pointer;text-align:left}
.edit{display:flex;align-items:center;gap:var(--s2);background:var(--crema);border-radius:var(--radio-chico);padding:var(--s3);margin:2px 0 var(--s2)}
.edit label{font-size:15px;font-weight:600;flex:1}
.field{width:96px;height:var(--toque);font-size:20px;font-weight:650;text-align:right;padding:0 var(--s3);border:1.5px solid var(--borde-campo);border-radius:var(--radio-chico);background:#fff;color:var(--tinta)}
.field:focus-visible{outline:3px solid var(--tinta);outline-offset:2px;border-color:var(--tinta)}
.field[aria-invalid=true],.campo input[aria-invalid=true],.stepper .val[aria-invalid=true]{border:2px solid var(--tomate);background:var(--tomate-t)}
.unidad{font-size:15px;color:var(--cacao);min-width:22px}
.msg-err{display:flex;gap:6px;align-items:center;color:var(--tomate);font-size:14px;font-weight:600;margin:2px 0 var(--s2)}
.msg-err:empty{display:none}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:56px;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);margin:var(--s3) 0 var(--s4);cursor:pointer}
.toggle b{font-size:16px;display:block} .toggle span{font-size:14px;color:var(--cacao)}
.sw{appearance:none;-webkit-appearance:none;width:56px;height:32px;border-radius:999px;background:var(--papel);position:relative;flex:none;border:2px solid var(--negro-faja);margin:0;cursor:pointer}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--negro-faja)}
.sw:checked{background:var(--negro-faja)} .sw:checked::after{left:auto;right:2px;background:var(--papel)}
.pie-lista{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-top:var(--s4);padding:var(--s3) var(--s4);background:var(--crema);border-radius:var(--radio-chico)}
.pie-lista .num{font-size:22px;font-weight:700}
.vacio{font-size:15px;color:var(--cacao);padding:var(--s3) 0}

/* precios */
.mrow{padding:var(--s3) 0;border-bottom:1px solid var(--linea)}
.mrow:last-child{border-bottom:0}
.mrow .l1{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap}
.mrow .l1 b{font-size:18px}
.mrow .l1 label{font-size:15px;color:var(--cacao);display:flex;align-items:center;gap:var(--s2)}
.mrow .l1 .field{width:116px}
.barra{display:flex;height:28px;border-radius:8px;overflow:hidden;margin:var(--s2) 0 6px;border:1.5px solid var(--negro-faja)}
.barra .costo{background:repeating-linear-gradient(135deg,var(--crema) 0 6px,var(--papel) 6px 12px);border-right:1.5px solid var(--negro-faja)}
.barra .gana{background:var(--caramelo)}
.mrow .l2{display:flex;justify-content:space-between;gap:var(--s3);font-size:15px;color:var(--cacao);flex-wrap:wrap}
.mrow .l2 strong{color:var(--tinta);font-size:17px}
.pierde{color:var(--tomate);font-weight:600;font-size:15px;display:flex;gap:6px;align-items:center;margin-top:4px}
.sug{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-top:var(--s2);padding:var(--s2) var(--s3);background:var(--mascarpone);border-radius:var(--radio-chico);font-size:15px;flex-wrap:wrap}
.sug strong{font-size:17px}
.sug .btn{min-height:var(--toque);padding:0 var(--s4);font-size:15px}
.leyenda{display:flex;gap:var(--s4);font-size:14px;color:var(--cacao);margin:var(--s3) 0 var(--s1);flex-wrap:wrap}
.leyenda i{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:6px;border:1.5px solid var(--negro-faja)}
.leyenda .c{background:repeating-linear-gradient(135deg,var(--crema) 0 3px,var(--papel) 3px 6px)} .leyenda .g{background:var(--caramelo)}
.ajuste{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:60px;border-bottom:1px solid var(--linea);padding:6px 0}
.ajuste label b{font-size:16px;display:block} .ajuste label span{font-size:14px;color:var(--cacao)}
.ajuste .fwrap{display:flex;align-items:center;gap:6px;flex:none}

/* fila desplegable */
details.mas-info{border-top:1px solid var(--linea);margin-top:var(--s3)}
details.mas-info > summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;font-weight:600;color:var(--tinta);cursor:pointer;list-style:none;text-decoration:underline;text-underline-offset:3px}
details.mas-info > summary::-webkit-details-marker{display:none}
details.mas-info > summary svg{transition:transform .2s}
details[open].mas-info > summary svg{transform:rotate(90deg)}
.editor{border:1px solid var(--linea);border-radius:var(--radio-chico);margin:var(--s2) 0;background:#fff}
.editor > summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);min-height:56px;padding:var(--s2) var(--s3);cursor:pointer;list-style:none}
.editor > summary::-webkit-details-marker{display:none}
.editor > summary b{display:block;font-size:16px}
.editor > summary span span{display:block;font-size:14px;color:var(--cacao)}
.editor .cuerpo{padding:0 var(--s3) var(--s3)}
.campo{margin:var(--s2) 0}
.campo label,.campo .lbl{display:block;font-size:15px;font-weight:600;margin-bottom:4px}
.campo .fwrap{display:flex;align-items:center;gap:6px}
.campo input,.campo select{width:100%;height:var(--toque);font-size:18px;padding:0 var(--s3);border:1.5px solid var(--borde-campo);border-radius:var(--radio-chico);background:#fff;color:var(--tinta)}
.campo .ayuda{font-size:14px;color:var(--cacao);margin-top:2px}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--s2)}
.tres .campo label{font-size:13px;font-weight:600;min-height:2.6em}
.par{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s2)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:right;padding:6px 4px;border-bottom:1px solid var(--linea)}
th:first-child,td:first-child{text-align:left}
.tabla{overflow-x:auto}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);border-radius:999px;font-weight:600;font-size:16px;cursor:pointer;border:2px solid var(--negro-faja);text-decoration:none}
.btn.pri{background:var(--negro-faja);color:var(--papel)}
.btn.sec2{background:var(--papel);color:var(--negro-faja)}
.btn.peligro{background:var(--papel);color:var(--tomate);border-color:var(--tomate)}
.btn.full{width:100%;margin-top:var(--s4)}
.botones{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.botones > .btn{flex:1 1 140px}

/* barra de pestañas */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--papel);border-top:1px solid var(--linea);
  padding:6px var(--s3) calc(6px + env(safe-area-inset-bottom));display:flex;justify-content:space-around;box-shadow:0 -2px 0 rgba(72,65,63,.06)}
.tab{flex:1;max-width:140px;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:60px;justify-content:center;text-decoration:none;color:var(--cacao);font-size:13px;font-weight:600;border-radius:14px}
.tab .pill{width:64px;height:32px;border-radius:999px;display:grid;place-items:center}
.tab[aria-current="page"]{color:var(--tinta);font-weight:700}
.tab[aria-current="page"] .pill{background:var(--negro-faja);color:var(--papel)}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabbar) + 12px + env(safe-area-inset-bottom));background:var(--tinta);color:var(--papel);padding:10px 16px;border-radius:12px;font-weight:600;max-width:90vw;opacity:0;pointer-events:none;transition:opacity .2s;z-index:6}
.toast.show{opacity:1}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* =========================================================
   MI SEMANA (cierre · armado · entrega)
   ========================================================= */
 /* tinte caramelo para el marcador de armado */
.tab .pill{width:56px}
.mk{display:inline-grid;place-items:center;border-radius:999px;flex:none}
.mk.cierre{background:var(--negro-faja);color:var(--papel)}
.mk.armado{background:var(--armado-t);color:var(--caramelo-osc);box-shadow:inset 0 0 0 1.5px var(--caramelo-osc)}
.mk.entrega{background:var(--salvia-t);color:var(--salvia);box-shadow:inset 0 0 0 1.5px var(--salvia)}
.leyenda-s{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin:0 0 var(--s3)}
.leyenda-s span{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
.leyenda-s .mk{width:30px;height:22px}
.frase{font-size:18px;line-height:1.45;margin:var(--s2) 0 0}
.frase b{font-weight:700}
.cal-btn{margin-top:var(--s4)}
.cal-explica{display:flex;gap:var(--s2);align-items:flex-start;font-size:14px;color:var(--cacao);margin-top:var(--s2)}
.cal-explica svg{flex:none;margin-top:1px}
.listo{display:flex;gap:var(--s3);align-items:flex-start;background:var(--salvia-t);border:1.5px solid var(--salvia);border-radius:var(--radio-chico);padding:var(--s3) var(--s4);margin-top:var(--s4)}
.listo svg{flex:none;color:var(--salvia)}
.listo b{display:block;color:var(--salvia);font-size:18px}
.listo p{margin:2px 0 0;font-size:14px;color:var(--tinta)}
.listo a{color:var(--caramelo-osc);font-weight:600}
.cambiar{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--caramelo-osc);font-weight:600;text-decoration:underline;text-underline-offset:3px;font-size:15px}
/* grilla */
.cal{margin:0 calc(var(--s4) * -1 + 6px)}
.cal .dias,.cal .semana-f{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal .dias span{text-align:center;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--cacao);padding-bottom:4px}
.cal .mes{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cacao);margin:var(--s3) 0 var(--s1) 4px}
.dia{min-height:74px;border-radius:10px;background:#fff;border:1px solid var(--linea);display:flex;flex-direction:column;align-items:center;padding:4px 0 5px;gap:3px;position:relative;cursor:pointer;margin-bottom:2px}
.dia .n{font-size:16px;font-weight:650;line-height:1.2}
.dia .mk{width:30px;height:22px}
.dia .l{font-size:11px;font-weight:600;line-height:1;color:var(--tinta);letter-spacing:-.01em}
.dia.pasado{background:transparent;border-color:transparent}
.dia.pasado .n{color:var(--cacao);font-weight:500}
.dia.pasado .mk{opacity:.55} .dia.pasado .l{color:var(--cacao)}
.dia.hoy{border:2.5px solid var(--tinta)}
.dia.hoy .n::before{content:"hoy";display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--tinta);color:var(--papel);border-radius:6px;padding:0 5px;margin:-1px 0 2px;line-height:1.5}
.dia .n.mes1::before{content:attr(data-mes);display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--cacao);line-height:1.3}
.dia.sel{background:var(--mascarpone);border:2.5px solid var(--cacao)}
.dia.hoy.sel{border-color:var(--tinta)}
/* detalle del día */
.det h4{font-family:var(--serif);font-weight:600;font-size:24px;margin:0;line-height:1.15}
.det .que{display:flex;align-items:center;gap:var(--s2);margin:var(--s2) 0 var(--s2);font-weight:600}
.det .que .mk{width:34px;height:26px}
.tarea{display:flex;gap:var(--s3);align-items:center;min-height:56px;border-top:1px solid var(--linea);padding:6px 0}
.tarea .ico{width:40px;height:40px;border-radius:50%;background:var(--crema);display:grid;place-items:center;flex:none;color:var(--cacao)}
.tarea b{display:block;font-size:16px;line-height:1.25} .tarea span{font-size:14px;color:var(--cacao)}
/* configurar */
.volver{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-weight:600;color:var(--tinta);text-decoration:none;margin:-4px 0 0 -6px}
.volver svg{transform:rotate(180deg)}
.paso{margin-top:var(--s4)}
.paso .h3{display:flex;align-items:center;gap:var(--s2)}
.paso .h3 .mk{width:36px;height:28px}
.chips{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:var(--s3) 0 var(--s2)}
.chipdia{height:48px;border-radius:12px;border:2px solid var(--negro-faja);background:#fff;color:var(--negro-faja);font-weight:700;font-size:18px;display:grid;place-items:center;cursor:pointer;padding:0}
.chipdia[aria-pressed="true"]{background:var(--negro-faja);color:var(--papel);position:relative}
.chipdia[aria-pressed="true"]::after{content:"";position:absolute;top:4px;right:5px;width:7px;height:4px;border-left:2px solid var(--papel);border-bottom:2px solid var(--papel);transform:rotate(-45deg)}
.chipdia.err[aria-pressed="true"]{background:var(--tomate);border-color:var(--tomate)}
.elegido{font-size:15px;color:var(--cacao)} .elegido b{color:var(--tinta)}
.hora{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s3);padding:var(--s3);background:var(--crema);border-radius:var(--radio)}
.hora .val{font-size:44px;font-weight:650;line-height:1;text-align:center;flex:1}
.hora .val small{display:block;font-size:14px;font-weight:500;color:var(--cacao);margin-top:4px}
.hora button{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex:none;cursor:pointer}
.preview{background:var(--mascarpone);border:1.5px dashed var(--cacao);border-radius:var(--radio);padding:var(--s4);margin-top:var(--s4)}
.preview .k{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cacao)}
.preview .frase{font-family:var(--serif);font-size:23px;font-weight:600;line-height:1.25;margin-top:6px}
.tira{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:var(--s3)}
.tira div{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--cacao)}
.tira .mk{width:30px;height:22px} .tira .vacio-mk{width:30px;height:22px;border-radius:999px;border:1.5px dashed var(--linea)}
.regla{display:flex;gap:var(--s2);align-items:flex-start;font-size:14px;color:var(--cacao);margin-top:var(--s3)}
.regla svg{flex:none;margin-top:1px}
.errores{display:flex;gap:var(--s3);align-items:flex-start;background:var(--tomate-t);border:1.5px solid var(--tomate);border-radius:var(--radio-chico);padding:var(--s3) var(--s4);margin-bottom:var(--s3)}
.errores svg{flex:none;color:var(--tomate)} .errores b{color:var(--tomate)} .errores p{margin:2px 0 0;font-size:15px}
.paso .msg-err{margin:2px 0 0;align-items:flex-start} .paso .msg-err svg{flex:none;margin-top:1px}
.cfg-acciones{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s5)}
.btn.texto{border-color:transparent;background:transparent;color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
/* cuenta regresiva */
.cuenta{display:flex;gap:var(--s3);align-items:center;border-radius:var(--radio);padding:var(--s3);margin-bottom:var(--s3);border:1.5px solid var(--linea);background:var(--papel);box-shadow:0 3px 0 var(--linea);text-decoration:none;color:var(--tinta)}
.cuenta .hoja{width:68px;min-height:68px;border-radius:12px;background:#fff;border:2px solid var(--negro-faja);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;position:relative;overflow:hidden;padding-top:8px}
.cuenta .hoja::before{content:"";position:absolute;top:0;left:0;right:0;height:10px;background:var(--negro-faja)}
.cuenta .hoja b{font-size:30px;line-height:1;font-weight:700}
.cuenta.hoy .hoja b{font-size:22px}
.cuenta .hoja span{font-size:12px;font-weight:700;color:var(--cacao);margin-top:2px}
.cuenta .t{flex:1;min-width:0}
.cuenta .t > b{display:block;font-size:18px;line-height:1.25}
.cuenta .t span b{color:var(--tinta)}
.cuenta .t span{font-size:14px;color:var(--cacao);display:block;margin-top:2px}
.cuenta > svg{flex:none;color:var(--cacao)}
.cuenta.hoy{background:var(--miel-t);border-color:var(--miel);box-shadow:0 3px 0 var(--miel)}
.cuenta.hoy .t > b{color:var(--miel)}
.cuenta.ultimas{background:var(--tomate-t);border-color:var(--tomate);box-shadow:0 3px 0 var(--tomate)}
.cuenta.ultimas .t > b{color:var(--tomate)} .cuenta.ultimas .hoja{border-color:var(--tomate)} .cuenta.ultimas .hoja::before{background:var(--tomate)}
.cuenta.cerrado{background:var(--salvia-t);border-color:var(--salvia);box-shadow:0 3px 0 var(--salvia)}
.cuenta.cerrado .t > b{color:var(--salvia)} .cuenta.cerrado .hoja{border-color:var(--salvia);color:var(--salvia)} .cuenta.cerrado .hoja::before{background:var(--salvia)}
.variantes h5{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cacao);margin:var(--s4) 0 var(--s2)}
/* primera vez */
.bienvenida{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1.1;margin:var(--s2) 0 var(--s1)}
/* =========================================================
   v2 de José (las reglas; los tokens están arriba, en el único :root)
   ========================================================= */
html,body{background:var(--fondo)}
.sec-head:empty{display:none}
.card{background:var(--tarjeta);border-radius:var(--radio-v2);padding:20px}
.sec{background:var(--tarjeta);border-radius:var(--radio-v2);padding:24px 20px}
.card .ico{background:var(--dulce-t);color:var(--dulce-osc)}
.barra .gana,.leyenda .g,.mini i{background:var(--dulce)}
.appbar .illo{margin-left:auto;flex:none;width:78px;height:64px;color:var(--cacao)}
.saludo{font-size:15px;font-weight:600;color:var(--dulce-osc);margin-bottom:2px}
.resumen{font-size:19px;line-height:1.4;font-weight:500;margin:0 0 var(--s4);color:var(--tinta)}
.resumen b{font-weight:700}
.ej-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px 0 8px;border-radius:999px;background:var(--mascarpone);border:1.5px dashed var(--cacao);font:inherit;font-size:14px;font-weight:600;color:var(--tinta);text-decoration:none;margin:0 0 var(--s4);cursor:pointer}
.ej-chip svg{flex:none;color:var(--cacao)}
.ver{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:inherit;font-weight:600;color:var(--caramelo-osc);text-decoration:underline;text-underline-offset:3px;font-size:15px;background:none;border:0;padding:0;cursor:pointer}
.ver svg{transform:rotate(90deg);transition:transform .2s}
.ver[aria-expanded="true"] svg{transform:rotate(-90deg)}
.confeti{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.confeti i{position:absolute;border-radius:50%;display:block;animation:caer 1.1s cubic-bezier(.2,.7,.3,1) both}
.confeti.quieto i{animation:none}
@keyframes caer{from{transform:translateY(-18px) scale(.6);opacity:0} 30%{opacity:1} to{transform:translateY(0) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.confeti i{animation:none}}
.festejo{position:relative}
.vacio-v2{text-align:center;padding:var(--s3) var(--s2) var(--s2)}
.vacio-v2 svg{width:150px;height:125px;color:var(--cacao)}
.vacio-v2 b,.vacio-v2 h2{display:block;font-family:var(--serif);font-size:26px;font-weight:600;margin:var(--s2) 0 var(--s1)}
.vacio-v2 p{margin:0 auto;max-width:280px;color:var(--cacao);font-size:16px}
.btn.wa{background:var(--negro-faja);color:var(--papel)}
.btn-fila{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4)}
.todo-listo{display:flex;gap:var(--s3);align-items:center}
.todo-listo svg.illo{width:96px;height:80px;flex:none;color:var(--cacao)}
.todo-listo b{display:block;font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.1}
.todo-listo p{margin:4px 0 0}
/* splash (José v2), como capa que se va sola */
.splash{position:fixed;inset:0;z-index:100;background:var(--negro-faja);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--mascarpone);pointer-events:none;transition:opacity .3s}
.splash.fuera{opacity:0}
.splash img{width:168px;height:168px;border-radius:50%}
.splash h2{font-family:var(--serif);font-weight:600;font-style:italic;font-size:34px;margin:var(--s5) 0 0;color:var(--mascarpone)}
.splash .k{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--crema);margin-top:var(--s2)}
.splash .tres{position:absolute;bottom:56px;display:flex;gap:8px}
.splash .tres i{width:10px;height:10px;border-radius:50%;display:block}
.splash .illo{width:120px;height:100px;color:#F8ECC8;margin-top:var(--s3);--mascarpone:transparent;--dulce-t:transparent}
.splash .saludo{color:var(--crema);font-size:16px;margin-top:var(--s4)}
@media (prefers-reduced-motion:reduce){.splash{transition:none}}
.ver-panel{margin-top:var(--s2)}
.ej-lista ul{margin:0 0 var(--s3);padding-left:1.2em}

/* Ron: piezas funcionales que el mockup no dibuja */
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--caramelo-osc);font-weight:600;text-decoration:underline;cursor:pointer;min-height:24px}
.hoy-mk{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--tinta);color:var(--papel);border-radius:6px;padding:0 5px;line-height:1.5}
.kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cacao)}
.hora .val{min-width:0}
.hora .val input{font:inherit;font-size:40px;font-weight:650;text-align:center;width:100%;min-width:0;border:0;background:transparent;color:var(--tinta);padding:0}
.hora .val input::-webkit-calendar-picker-indicator{display:none}
.hora-btn.menos{background:var(--papel);border:2px solid var(--negro-faja);color:var(--negro-faja)}
.hora-btn.mas{background:var(--negro-faja);border:2px solid var(--negro-faja);color:var(--papel)}
body.sin-tabs .tabbar{display:none}
body.sin-tabs .screen{padding-bottom:var(--s6)}
.cuenta:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}