/* estilos.css · web del proveedor (panel) · E-2026-1097 · F4 · MODO PRUEBA
   Tokens y piezas = lámina T4 aprobada por Alan (24-oct), copiados de app-ayv/www/css/tokens.css (medido 23-oct). Vino = la acción; verde = asegurado;
   ámbar = en juego; rojo = pide acción; oro = nivel. Ningún tono nuevo. */
:root{
 --vino:#7a1830;--vino-hondo:#450d1a;--vino-noche:#2a0f16;--vino-velo:rgba(122,24,48,.08);--vino-velo2:rgba(122,24,48,.14);
 --oro:#ad7f3e;--oro-claro:#d2ac6c;--oro-velo:rgba(173,127,62,.16);--oro-letra:#876331;--rubor:#e7b8be;--marfil:#f2ece7;
 --crema:#faf7f4;--crema2:#f3efeb;--sup:#fff;--sup-alta:#faf8f6;--linea:#e9e2dc;--linea-f:#d9cfc6;
 --tinta:#211316;--suave:#5e4a48;--tenue:#756361;--sobre-vino:#faf5ef;
 --cta:linear-gradient(140deg,#7a1830 0%,#450d1a 100%);
 --exito:#4b6335;--exito-velo:rgba(85,112,60,.14);--aviso:#7d5211;--aviso-velo:rgba(143,94,20,.16);
 --peligro:#a3243b;--peligro-velo:rgba(163,36,59,.12);--info:#6e567f;--info-velo:rgba(138,111,158,.14);
 --linea-proveedor:#5b3a7a;
 --t:"Cormorant Garamond",Georgia,serif;--x:"Jost",system-ui,sans-serif;
 --r-xs:6px;--r-sm:10px;--r-md:16px;--r-lg:22px;--r-xl:28px;--r-pildora:999px;
 /* ESCALA v5 (E-2026-1123, Alan 27-oct: «claras las jerarquías de títulos, subtítulos, textos e información»). SEIS tamaños y ni uno más;
    todo el panel los usa (ningún font-size en px fuera de aquí). Lo mide infra/_tools/jerarquia_pantalla.mjs --escala '12,14,16,20,28,36'.
    página 36 > sección 28 > tarjeta 20 (su fecha/hora y su monto) > dato 16 (qué es) > texto 14 > nota 12 (versalitas, pastillas, IVA) */
 --f-pagina:36px;--f-seccion:28px;--f-tarjeta:20px;--f-dato:16px;--f-texto:14px;--f-nota:12px;
 /* espacio: una sola regla de 4 */
 --e-1:4px;--e-2:8px;--e-3:12px;--e-4:16px;--e-5:24px;--e-6:32px;
 --s-sm:0 2px 6px rgba(69,13,26,.08);--s-md:0 8px 16px rgba(69,13,26,.12);--s-lg:0 16px 32px rgba(69,13,26,.18);--s-cta:0 10px 22px rgba(122,24,48,.26);
 --caricia:120ms;--respiro:240ms;--revelado:420ms;--ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:#f4ece2;color:var(--tinta);font-family:var(--x);font-size:var(--f-texto);line-height:1.4;-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
.num{font-variant-numeric:lining-nums tabular-nums}
button{font-family:inherit;color:inherit}
/* ── La lámina (el marco, no la pantalla) ── */
/* ── Marco de laptop / navegador ── */
/* ── Marco de teléfono ── */
/* ── Sistema ── */
.cinta{display:flex;align-items:center;justify-content:center;gap:7px;padding:5px 12px;border-radius:var(--r-pildora);border:1px dashed var(--oro);
 background:color-mix(in oklab,#fff 92%,var(--oro));color:var(--suave);font-size:var(--f-nota);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.versal{font-size:var(--f-nota);letter-spacing:.2em;text-transform:uppercase;color:var(--oro-letra);font-weight:500}
.titulo{font-family:var(--t);font-weight:600;color:var(--vino-noche);line-height:1.08}
.tarjeta{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-lg);box-shadow:var(--s-sm)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--r-pildora);border:1px solid transparent;
 font-family:var(--x);font-weight:500;font-size:var(--f-texto);letter-spacing:.04em;cursor:pointer;white-space:nowrap}
.btn-p{background:var(--cta);color:var(--sobre-vino);box-shadow:var(--s-cta)}
.btn-c{background:transparent;color:var(--vino);border-color:var(--vino)}
.btn-t{background:var(--vino-velo);color:var(--vino);border-color:var(--vino-velo2)}
.btn-b{width:100%}
.btn[disabled]{opacity:.42;box-shadow:none}
.pas{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:2px 10px;border-radius:var(--r-pildora);font-size:var(--f-nota);font-weight:500;letter-spacing:.04em;white-space:nowrap}
.p-exito{background:var(--exito-velo);color:var(--exito)}
.p-aviso{background:var(--aviso-velo);color:var(--aviso)}
.p-peligro{background:var(--peligro-velo);color:var(--peligro)}
.p-vino{background:var(--vino-velo);color:var(--vino)}
.p-info{background:var(--info-velo);color:var(--info)}
.p-tenue{border:1px dashed var(--linea-f);color:var(--suave)}
.p-oro{background:var(--oro-velo);color:var(--oro-letra)}
.anillo{flex:none;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--oro);color:var(--vino);background:var(--sup);box-shadow:0 0 0 3px var(--oro-velo)}
.e-exito{color:var(--exito)}
.e-aviso{color:var(--aviso)}
.e-peligro{color:var(--peligro)}
.e-vino{color:var(--vino)}
.e-tenue{color:var(--tenue)}
.e-suave{color:var(--suave)}
.raya{color:var(--tenue)}
.punto-linea{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--linea-proveedor);flex:none}
.foto{display:block;object-fit:cover;background:var(--crema2)}

.cinta-f{display:inline-flex;align-self:center;padding:3px 12px;font-size:var(--f-nota);letter-spacing:.16em}
.marca{display:flex;align-items:center;gap:10px}
.marca-av{width:38px;height:38px;border-radius:50%;background:var(--cta);color:var(--sobre-vino);display:grid;place-items:center;font-family:var(--t);font-weight:600;font-size:var(--f-dato)}
.marca-tx b{display:block;font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino-noche);line-height:1}
.marca-tx small{display:block;font-size:var(--f-nota);letter-spacing:.2em;text-transform:uppercase;color:var(--oro-letra);margin-top:3px}
.mont{font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.a-lado{width:224px;flex:none;background:var(--crema2);border-right:1px solid var(--linea);padding:22px 14px 18px;display:flex;flex-direction:column;gap:20px}
.a-menu{display:flex;flex-direction:column;gap:2px}
.a-menu a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 14px;border-radius:var(--r-pildora);color:var(--suave);font-size:var(--f-texto)}
.a-menu a.si{background:var(--sup);color:var(--vino);font-weight:500;box-shadow:var(--s-sm)}
.a-menu a .cuenta{margin-left:auto;font-size:var(--f-nota);background:var(--peligro);color:#fff;border-radius:var(--r-pildora);min-width:20px;height:20px;display:grid;place-items:center;padding:0 6px}
.a-pts{margin-top:auto;background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-md);padding:14px 14px 13px}
.pts-n{font-family:var(--t);font-size:var(--f-pagina);font-weight:600;color:var(--vino);line-height:1}
.barra{height:8px;border-radius:var(--r-pildora);background:var(--crema2);overflow:hidden;margin-top:10px}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--oro-claro),var(--oro))}
.a-pts .falta{display:flex;justify-content:space-between;font-size:var(--f-nota);color:var(--suave);margin-top:6px}
.quien{display:flex;align-items:center;gap:10px;padding:12px 6px 0;border-top:1px solid var(--linea);font-size:var(--f-texto);color:var(--tinta);font-weight:500}
.quien .ini{width:34px;height:34px;border-radius:50%;background:var(--marfil);color:var(--vino);display:grid;place-items:center;font-weight:600;font-size:var(--f-texto)}
.a-main{flex:1;min-width:0;padding:22px 26px;display:flex;flex-direction:column;gap:18px}
.a-cab{display:flex;align-items:center;gap:14px}
.a-cab h2{margin:0;font-size:var(--f-pagina)}
.a-cab .der{margin-left:auto;display:flex;gap:12px;align-items:center}
.semana{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.dia{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-md);padding:10px 9px;min-height:214px;display:flex;flex-direction:column;gap:7px}
.dia.hoy{border-color:var(--vino);box-shadow:0 0 0 3px var(--vino-velo)}
.dia.bloq{background:repeating-linear-gradient(135deg,var(--crema2) 0 8px,var(--crema) 8px 16px)}
.dia-cab{display:flex;align-items:baseline;justify-content:space-between}
.dia-cab b{font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;line-height:1;color:var(--vino-noche)}
.dia-cab span{font-size:var(--f-nota);letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.dia.hoy .dia-cab span{color:var(--vino);font-weight:600}
.enc{border-radius:var(--r-sm);background:var(--crema);padding:7px 8px;display:flex;flex-direction:column;gap:3px}
.enc .h{font-size:var(--f-nota);color:var(--suave);font-weight:500}
.enc .n{font-size:var(--f-texto);font-weight:500;line-height:1.25}
.enc .pas{align-self:flex-start;font-size:var(--f-nota);padding:1px 8px;min-height:22px}
.libre{margin:auto 0;text-align:center;font-size:var(--f-texto);color:var(--tenue);display:flex;flex-direction:column;align-items:center;gap:6px}
.a-bajo{display:grid;grid-template-columns:1fr 392px;gap:18px;flex:1;min-height:0}
.caja{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-lg);padding:16px 20px;box-shadow:var(--s-sm)}
.caja-cab{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.caja-cab h3{margin:0;font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino-noche)}
.caja-cab .total{margin-left:auto;text-align:right;line-height:1}
.caja-cab .total b{display:block;font-family:var(--t);font-size:var(--f-seccion);font-weight:600;color:var(--vino)}
.caja-cab .total small{font-size:var(--f-nota);color:var(--suave)}
.tabla{width:100%;border-collapse:collapse;font-size:var(--f-texto);table-layout:fixed}
.tabla td{padding:5px 6px;border-top:1px solid var(--linea);vertical-align:middle;height:44px}
.tabla td.p{width:150px}
.tabla td.m{text-align:right;font-weight:500;width:110px}
.mini-btn{min-height:32px;padding:0 12px;font-size:var(--f-nota)}
.sofia-q{padding:10px 0;border-top:1px solid var(--linea)}
.sofia-q:first-of-type{border-top:0;padding-top:0}
.sofia-q .top{display:flex;align-items:flex-start;gap:10px}
.sofia-q b{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:500;font-size:var(--f-texto);line-height:1.3}
.sofia-q small{display:block;color:var(--suave);font-size:var(--f-nota);margin-top:3px}
.sofia-q .tres{display:flex;gap:6px;margin-top:10px}
.sofia-q .tres .btn{min-height:36px;padding:0 14px;font-size:var(--f-texto)}

.cinta-f{display:inline-flex;align-self:center;padding:3px 12px;font-size:var(--f-nota);letter-spacing:.16em}
.marca{display:flex;align-items:center;gap:10px}
.marca-av{width:38px;height:38px;border-radius:50%;background:var(--cta);color:var(--sobre-vino);display:grid;place-items:center;font-family:var(--t);font-weight:600;font-size:var(--f-dato)}
.marca-tx b{display:block;font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino-noche);line-height:1}
.marca-tx small{display:block;font-size:var(--f-nota);letter-spacing:.2em;text-transform:uppercase;color:var(--oro-letra);margin-top:3px}
.mont{font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.a-lado{width:224px;flex:none;background:var(--crema2);border-right:1px solid var(--linea);padding:22px 14px 18px;display:flex;flex-direction:column;gap:20px}
.a-menu{display:flex;flex-direction:column;gap:2px}
.a-menu a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 14px;border-radius:var(--r-pildora);color:var(--suave);font-size:var(--f-texto)}
.a-menu a.si{background:var(--sup);color:var(--vino);font-weight:500;box-shadow:var(--s-sm)}
.a-menu a .cuenta{margin-left:auto;font-size:var(--f-nota);background:var(--peligro);color:#fff;border-radius:var(--r-pildora);min-width:20px;height:20px;display:grid;place-items:center;padding:0 6px}
.a-pts{margin-top:auto;background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-md);padding:14px 14px 13px}
.pts-n{font-family:var(--t);font-size:var(--f-pagina);font-weight:600;color:var(--vino);line-height:1}
.barra{height:8px;border-radius:var(--r-pildora);background:var(--crema2);overflow:hidden;margin-top:10px}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--oro-claro),var(--oro))}
.a-pts .falta{display:flex;justify-content:space-between;font-size:var(--f-nota);color:var(--suave);margin-top:6px}
.quien{display:flex;align-items:center;gap:10px;padding:12px 6px 0;border-top:1px solid var(--linea);font-size:var(--f-texto);color:var(--tinta);font-weight:500}
.quien .ini{width:34px;height:34px;border-radius:50%;background:var(--marfil);color:var(--vino);display:grid;place-items:center;font-weight:600;font-size:var(--f-texto)}
.a-main{flex:1;min-width:0;padding:22px 26px;display:flex;flex-direction:column;gap:18px}
.a-cab{display:flex;align-items:center;gap:14px}
.a-cab h2{margin:0;font-size:var(--f-pagina)}
.a-cab .der{margin-left:auto;display:flex;gap:12px;align-items:center}
.semana{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.dia{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-md);padding:10px 9px;min-height:214px;display:flex;flex-direction:column;gap:7px}
.dia.hoy{border-color:var(--vino);box-shadow:0 0 0 3px var(--vino-velo)}
.dia.bloq{background:repeating-linear-gradient(135deg,var(--crema2) 0 8px,var(--crema) 8px 16px)}
.dia-cab{display:flex;align-items:baseline;justify-content:space-between}
.dia-cab b{font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;line-height:1;color:var(--vino-noche)}
.dia-cab span{font-size:var(--f-nota);letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.dia.hoy .dia-cab span{color:var(--vino);font-weight:600}
.enc{border-radius:var(--r-sm);background:var(--crema);padding:7px 8px;display:flex;flex-direction:column;gap:3px}
.enc .h{font-size:var(--f-nota);color:var(--suave);font-weight:500}
.enc .n{font-size:var(--f-texto);font-weight:500;line-height:1.25}
.enc .pas{align-self:flex-start;font-size:var(--f-nota);padding:1px 8px;min-height:22px}
.libre{margin:auto 0;text-align:center;font-size:var(--f-texto);color:var(--tenue);display:flex;flex-direction:column;align-items:center;gap:6px}
.a-bajo{display:grid;grid-template-columns:1fr 392px;gap:18px;flex:1;min-height:0}
.caja{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-lg);padding:16px 20px;box-shadow:var(--s-sm)}
.caja-cab{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.caja-cab h3{margin:0;font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino-noche)}
.caja-cab .total{margin-left:auto;text-align:right;line-height:1}
.caja-cab .total b{display:block;font-family:var(--t);font-size:var(--f-seccion);font-weight:600;color:var(--vino)}
.caja-cab .total small{font-size:var(--f-nota);color:var(--suave)}
.tabla{width:100%;border-collapse:collapse;font-size:var(--f-texto);table-layout:fixed}
.tabla td{padding:5px 6px;border-top:1px solid var(--linea);vertical-align:middle;height:44px}
.tabla td.p{width:150px}
.tabla td.m{text-align:right;font-weight:500;width:110px}
.mini-btn{min-height:32px;padding:0 12px;font-size:var(--f-nota)}
.sofia-q{padding:10px 0;border-top:1px solid var(--linea)}
.sofia-q:first-of-type{border-top:0;padding-top:0}
.sofia-q .top{display:flex;align-items:flex-start;gap:10px}
.sofia-q b{flex:1;font-weight:500;font-size:var(--f-texto);line-height:1.3}
.sofia-q small{display:block;color:var(--suave);font-size:var(--f-nota);margin-top:3px}
.sofia-q .tres{display:flex;gap:6px;margin-top:10px}
.sofia-q .tres .btn{min-height:36px;padding:0 14px;font-size:var(--f-texto)}
.a{height:100%}
.a-main{overflow:auto;scrollbar-width:none}
.a-main::-webkit-scrollbar{display:none}
.a-menu a{cursor:pointer;text-decoration:none;transition:background var(--caricia) var(--ease),color var(--caricia) var(--ease)}
.a-menu a:hover:not(.si){background:rgba(255,255,255,.55);color:var(--tinta)}
.btn{transition:transform var(--caricia) var(--ease),background var(--caricia) var(--ease)}
.btn:active{transform:scale(.97)}
.vista{display:flex;flex-direction:column;gap:18px;animation:entra var(--respiro) var(--ease) both}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vista{animation:none}*{transition:none!important}}
.cab-s{display:flex;align-items:flex-end;gap:14px;min-height:62px}
.cab-s h2{margin:0;font-size:var(--f-pagina)}
.cab-s .der{margin-left:auto;display:flex;gap:10px;align-items:center}
.seg{display:inline-flex;gap:4px;background:var(--crema2);border:1px solid var(--linea);border-radius:var(--r-pildora);padding:4px}
.seg button{border:0;background:transparent;min-height:36px;padding:0 16px;border-radius:var(--r-pildora);font-size:var(--f-texto);color:var(--suave);cursor:pointer;display:inline-flex;gap:7px;align-items:center}
.seg button.si{background:var(--sup);color:var(--vino);font-weight:500;box-shadow:var(--s-sm)}
.seg button .c{font-size:var(--f-nota);color:var(--suave)}
.seg button.si .c{color:var(--vino)}
.lista{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-lg);box-shadow:var(--s-sm);overflow:hidden}
.tb{width:100%;border-collapse:collapse;font-size:var(--f-texto)}
.tb th{text-align:left;font-weight:500;font-size:var(--f-nota);letter-spacing:.14em;text-transform:uppercase;color:var(--suave);padding:12px 14px 8px;background:var(--sup)}
.tb td{padding:10px 14px;border-top:1px solid var(--linea);vertical-align:middle;overflow-wrap:anywhere}
.tb tr.fila{cursor:pointer;transition:background var(--caricia) var(--ease)}
.tb tr.fila:hover{background:var(--sup-alta)}
.tb td.r,.tb th.r{text-align:right}
.tb .cuando b{display:block;font-weight:500;white-space:nowrap}
.tb .cuando{width:110px}
.tb .cuando small{color:var(--suave);font-size:var(--f-nota)}
.tb .ev{display:flex;align-items:center;gap:12px}
.tb .ev b{display:block;font-weight:500;line-height:1.25;overflow-wrap:anywhere}
.tb .ev>div{min-width:0}   /* QA 24-oct: una pieza de 69 letras sin espacios ensanchaba la tabla y la columna de la derecha quedaba cortada */
.tb .ev small{display:block;color:var(--suave);font-size:var(--f-nota);line-height:1.3;margin-top:2px;overflow-wrap:anywhere}
.miniatura{width:44px;height:44px;border-radius:var(--r-sm);flex:none;object-fit:cover;background:var(--crema2)}
.sinfoto{width:44px;height:44px;border-radius:var(--r-sm);flex:none;background:var(--crema2);color:var(--oro);display:grid;place-items:center}
.dos{display:flex;gap:6px}
.dos .btn{min-height:36px;padding:0 14px;font-size:var(--f-texto)}
.det-fila td{background:var(--sup-alta);padding:14px 18px}
.det-g{display:flex;gap:28px;align-items:center}
.det-g .dato small{display:block;font-size:var(--f-nota);letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.det-g .dato b{display:block;font-weight:500;margin-top:2px}
.det-g .btn{margin-left:auto}
/* Encargo + su detalle = UNA tarjeta: mismo fondo, un solo borde que envuelve a los dos, sin línea entre ellos; la flechita gira al abrir */
.enc-tb{padding:0 8px 8px}
.enc-tb .tb th,.enc-tb .tb td{padding-left:10px;padding-right:10px}
.enc-tb .tb .cuando{width:96px}
.enc-tb .tb td:nth-child(2){min-width:300px}
.enc-tb .tb{border-collapse:separate;border-spacing:0}
.enc-tb .tb th{background:transparent}
.fl-c{width:36px;padding-left:0!important;padding-right:8px!important;text-align:center}
.flecha{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;color:var(--suave);transform:rotate(90deg);transition:transform var(--respiro) var(--ease),color var(--respiro) var(--ease),background var(--caricia) var(--ease)}
.flecha.ab{transform:rotate(-90deg);color:var(--vino)}
.tb tr.fila:hover .flecha{background:var(--vino-velo)}
.tb tr.fila:hover .flecha{color:var(--vino)}
.enc-tb tr.abierta>td{background:var(--sup-alta);border-top-width:0;box-shadow:inset 0 1.5px 0 var(--vino-velo2)}
.enc-tb tr.abierta>td:first-child{box-shadow:inset 0 1.5px 0 var(--vino-velo2),inset 1.5px 0 0 var(--vino-velo2);border-top-left-radius:16px}
.enc-tb tr.abierta>td:last-child{box-shadow:inset 0 1.5px 0 var(--vino-velo2),inset -1.5px 0 0 var(--vino-velo2);border-top-right-radius:16px}
.enc-tb tr.det-fila>td{background:var(--sup-alta);border-top-width:0;padding:4px 18px 18px;border-radius:0 0 var(--r-md) var(--r-md);box-shadow:inset 1.5px 0 0 var(--vino-velo2),inset -1.5px 0 0 var(--vino-velo2),inset 0 -1.5px 0 var(--vino-velo2)}
.enc-tb tr.abierta+tr.det-fila+tr>td{border-top-width:0}
.sel{appearance:none;-webkit-appearance:none;min-height:36px;border-radius:var(--r-pildora);border:1px solid var(--linea-f);background:var(--sup) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a1830' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;padding:0 32px 0 14px;font:inherit;font-size:var(--f-texto);color:var(--tinta);cursor:pointer}
.vacio{padding:56px 20px;text-align:center;color:var(--suave);display:flex;flex-direction:column;align-items:center;gap:10px}
.vacio .circ{width:56px;height:56px;border-radius:50%;background:var(--exito-velo);color:var(--exito);display:grid;place-items:center}
.vacio b{font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino-noche)}
/* calendario */
.mes{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.mes .dsem{font-size:var(--f-nota);letter-spacing:.14em;text-transform:uppercase;color:var(--suave);padding:0 8px 2px}
.cel{position:relative;min-height:98px;background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-md);padding:8px 9px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:border-color var(--caricia) var(--ease),box-shadow var(--caricia) var(--ease)}
.cel:hover{border-color:var(--vino);box-shadow:0 0 0 3px var(--vino-velo)}
.cel.fuera{background:transparent;border-style:dashed;cursor:default;opacity:.5}
.cel.fuera:hover{border-color:var(--linea);box-shadow:none}
.cel.pasada{background:var(--crema);cursor:default}
.cel.pasada:hover{border-color:var(--linea);box-shadow:none}
.cel.hoy{border-color:var(--vino);box-shadow:0 0 0 3px var(--vino-velo)}
.cel.bloq{background:repeating-linear-gradient(135deg,var(--crema2) 0 8px,var(--crema) 8px 16px)}
.cel .n{display:flex;justify-content:space-between;align-items:center}
.cel .n b{font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;line-height:1;color:var(--vino-noche)}
.cel.pasada .n b{color:var(--tenue)}
.cel.hoy .n b{color:var(--vino)}
.cupo{display:flex;gap:3px}
.cupo i{width:7px;height:7px;border-radius:50%;background:var(--linea-f);display:block}
.cupo i.u{background:var(--vino)}
.cel .e{font-size:var(--f-nota);line-height:1.25;padding:3px 6px;border-radius:var(--r-sm);background:var(--vino-velo);color:var(--vino)}
.cel .e.pc{background:var(--peligro-velo);color:var(--peligro)}
.cel .e.ok{background:var(--exito-velo);color:var(--exito)}
.cel .lock{margin-top:auto;display:flex;align-items:center;gap:5px;font-size:var(--f-nota);color:var(--suave)}
.cel .bl{position:absolute;right:8px;bottom:8px;opacity:0;font-size:var(--f-nota);color:var(--vino);display:flex;align-items:center;gap:4px;transition:opacity var(--caricia) var(--ease)}
.cel:not(.paso):not(.fuera):not(.bloq):hover .bl{opacity:1}
.leyenda{display:flex;gap:16px;font-size:var(--f-nota);color:var(--suave);align-items:center}
.leyenda span{display:inline-flex;gap:6px;align-items:center}
.leyenda i{width:12px;height:12px;border-radius:var(--r-xs);display:block}
.flechas{display:flex;gap:6px}
.redondo{width:40px;height:40px;border-radius:50%;border:1px solid var(--linea-f);background:var(--sup);display:grid;place-items:center;color:var(--vino);cursor:pointer}
/* cifras */
.cifras{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px}
.cifra{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-lg);padding:14px 18px;box-shadow:var(--s-sm)}
.cifra small{display:block;font-size:var(--f-nota);letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.cifra b{display:block;font-family:var(--t);font-weight:600;font-size:var(--f-seccion);line-height:1.1;margin-top:4px;color:var(--vino-noche)}
.cifra.grande b{font-size:var(--f-pagina);color:var(--vino)}
.cifra span{font-size:var(--f-texto);color:var(--suave)}
.subir{display:flex;align-items:center;gap:16px;border:1.5px dashed var(--vino-velo2);border-radius:var(--r-md);padding:14px 18px;background:var(--sup)}
.subir .ico{width:44px;height:44px;border-radius:50%;background:var(--vino-velo);color:var(--vino);display:grid;place-items:center}
.subir b{font-weight:500}
.subir .btn{margin-left:auto}
/* precios */
.celda-p{display:inline-flex;flex-direction:column;align-items:flex-end;gap:3px;padding:6px 10px;margin:-6px -10px;border-radius:var(--r-sm);cursor:pointer;min-width:120px;transition:background var(--caricia) var(--ease)}
.celda-p:hover{background:var(--vino-velo)}
.celda-p:hover .lapiz{opacity:1}
.celda-p .v{display:inline-flex;gap:6px;align-items:center;font-weight:500}
.lapiz{opacity:0;color:var(--vino);transition:opacity var(--caricia) var(--ease)}
.celda-p input{width:110px;min-height:36px;border:1.5px solid var(--vino);border-radius:var(--r-sm);padding:0 10px;font:inherit;font-size:var(--f-texto);text-align:right;outline:none;box-shadow:0 0 0 3px var(--vino-velo)}
/* equipo */
.eq{display:grid;grid-template-columns:1fr 380px;gap:18px;align-items:start}
.per{display:flex;align-items:center;gap:14px;padding:14px 16px;border-top:1px solid var(--linea)}
.per:first-child{border-top:0}
.per .ini{width:42px;height:42px;border-radius:50%;background:var(--marfil);color:var(--vino);display:grid;place-items:center;font-weight:600;font-size:var(--f-texto);flex:none}
.per .tx{flex:1;min-width:0}
.per .tx b{display:block;font-weight:500}
.per .tx small{display:block;font-size:var(--f-nota);color:var(--suave);margin-top:2px}
.per .hoyp{font-size:var(--f-texto);color:var(--suave);text-align:right;min-width:150px}
.per .hoyp b{display:block;color:var(--tinta);font-weight:500}
.asig{padding:14px 16px;border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:10px}
.asig:first-of-type{border-top:0}
.asig .top b{display:block;font-weight:500}
.asig .top small{color:var(--suave);font-size:var(--f-nota)}
.asig .acc{display:flex;gap:8px;align-items:center}
.asig .acc .sel{flex:1}
.caja-t{padding:14px 16px 6px;display:flex;align-items:center;gap:10px}
.caja-t h3{margin:0;font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino-noche)}
/* contrato */
.marco{display:flex;align-items:center;gap:20px;padding:20px 22px}
.marco .sello{width:64px;height:64px;border-radius:50%;background:var(--cta);color:var(--sobre-vino);display:grid;place-items:center;font-family:var(--t);font-weight:600;font-size:var(--f-tarjeta);box-shadow:0 0 0 4px var(--sup),0 0 0 5px var(--oro);flex:none}
.marco .tx b{display:block;font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino-noche);line-height:1.1}
.marco .datos-m{display:flex;gap:26px;margin-top:8px}
.marco .datos-m small{display:block;font-size:var(--f-nota);letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.marco .datos-m span{font-weight:500}
.marco .der{margin-left:auto;display:flex;gap:8px}
/* puntos */
.pts{display:grid;grid-template-columns:1fr 330px;gap:18px;align-items:start}
.heroe-p{padding:22px 26px}
.heroe-p .fila{display:flex;align-items:baseline;gap:12px}
.heroe-p .grande{font-family:var(--t);font-size:var(--f-pagina);font-weight:600;line-height:.95;color:var(--vino)}
.pista{position:relative;height:10px;border-radius:var(--r-pildora);background:var(--crema2);margin:28px 36px 34px}
.pista .ll{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-pildora);background:linear-gradient(90deg,var(--oro-claro),var(--oro))}
.pista .marca-n{position:absolute;top:-6px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
.pista .marca-n i{width:22px;height:22px;border-radius:50%;background:var(--sup);border:2px solid var(--oro);display:block}
.pista .marca-n.si i{background:var(--oro)}
.pista .marca-n span{font-size:var(--f-nota);color:var(--suave);white-space:nowrap}
.pista .marca-n span b{color:var(--tinta);font-weight:500}
.mov{display:flex;align-items:center;gap:14px;padding:11px 16px;border-top:1px solid var(--linea)}
.mov .v{font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;min-width:64px}
.mov .tx{flex:1}
.mov .tx b{display:block;font-weight:500}
.mov .tx small{color:var(--suave);font-size:var(--f-nota)}
.mov .f{font-size:var(--f-nota);color:var(--suave)}
.benef{display:flex;flex-direction:column;gap:8px;padding:6px 16px 16px}
.benef span{display:flex;gap:10px;align-items:center;font-size:var(--f-texto)}
.benef span i{width:32px;height:32px;border-radius:50%;background:var(--oro-velo);color:var(--oro-letra);display:grid;place-items:center;flex:none}
/* aviso con deshacer */
.aviso{position:absolute;left:50%;bottom:22px;transform:translate(-50%,16px);opacity:0;background:var(--vino-noche);color:var(--sobre-vino);border-radius:var(--r-pildora);padding:10px 12px 10px 20px;display:flex;align-items:center;gap:14px;font-size:var(--f-texto);box-shadow:var(--s-lg);transition:transform var(--respiro) var(--ease),opacity var(--respiro) var(--ease);z-index:50;pointer-events:none}
.aviso.ver{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.aviso button{border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:var(--r-pildora);min-height:34px;padding:0 14px;font:inherit;font-size:var(--f-texto);cursor:pointer}
/* solicitudes */
.sols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sol{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-lg);box-shadow:var(--s-sm);display:flex;overflow:hidden;min-height:176px}
.sol.ancha{grid-column:span 2}
.sol .ftw{width:150px;flex:none;position:relative;background:var(--crema2)}
.sol.ancha .ftw{width:190px}
.sol .ftw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sol .sinft{width:150px;flex:none;background:var(--crema2);color:var(--oro);display:grid;place-items:center}
.sol .cu{flex:1;padding:14px 18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.sol .top{display:flex;gap:8px;align-items:center}
.sol .top .vence{margin-left:auto}
.sol h4{margin:0;font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino-noche);line-height:1.1}
.sol .w{font-size:var(--f-texto);color:var(--suave)}
.sol .pp{display:flex;align-items:baseline;gap:10px}
.sol .pp b{font-family:var(--t);font-size:var(--f-seccion);font-weight:600;color:var(--vino);line-height:1}
.sol .acc{display:flex;gap:10px;margin-top:auto;align-items:center}
.sol .acc .btn{min-height:40px}
.sol.hecha{opacity:.55}
.monto{display:flex;align-items:center;gap:6px;border:1.5px solid var(--linea-f);border-radius:var(--r-sm);padding:0 12px;min-height:44px;background:var(--sup);width:190px}
.monto span{color:var(--suave);font-size:var(--f-tarjeta)}
.monto input{border:0;outline:0;font:inherit;font-size:var(--f-tarjeta);width:100%;background:transparent;font-variant-numeric:lining-nums tabular-nums}
.monto:focus-within{border-color:var(--vino);box-shadow:0 0 0 3px var(--vino-velo)}
.seg.ch button{min-height:34px;padding:0 13px;font-size:var(--f-texto)}
.marca-c{display:inline-flex;align-items:center;gap:8px;font-size:var(--f-texto);cursor:pointer;color:var(--tinta);user-select:none}
.marca-c i{width:22px;height:22px;border-radius:var(--r-xs);border:1.5px solid var(--linea-f);display:grid;place-items:center;color:#fff;background:var(--sup)}
.marca-c.si i{background:var(--vino);border-color:var(--vino)}
.sol .acc .der{margin-left:auto;display:flex;gap:14px;align-items:center}
/* calendario: lista abajo */
.cel{min-height:86px}
.sub-cab{display:flex;align-items:center;gap:16px;padding:14px 16px 10px}
.sub-cab h3{margin:0;font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino-noche)}
.firma{display:inline-flex;align-items:center;gap:6px}
/* precios */
.orig{display:inline-flex;align-items:center;gap:5px}
.orig small{display:block;font-size:var(--f-nota);color:var(--suave);margin-top:3px}
.celda-p.fijo{cursor:default;color:var(--suave)}
.celda-p.fijo:hover{background:transparent}
.celda-p .v .cand{color:var(--tenue)}
.nueva{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--sup-alta);border-bottom:1px solid var(--linea)}
.nueva .campo{display:flex;align-items:center;border:1.5px solid var(--linea-f);border-radius:var(--r-sm);min-height:44px;padding:0 12px;background:var(--sup);gap:6px}
.nueva .campo input{border:0;outline:0;font:inherit;font-size:var(--f-texto);background:transparent}
.nueva .campo:focus-within{border-color:var(--vino);box-shadow:0 0 0 3px var(--vino-velo)}
.nueva .der{margin-left:auto;display:flex;gap:8px}
/* contrato */
.ctr{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}
.hoja{background:#fff;border:1px solid var(--linea);border-radius:var(--r-sm);box-shadow:var(--s-md);padding:26px 24px;height:380px;display:flex;flex-direction:column;gap:9px;position:relative}
.hoja .sello{width:48px;height:48px;border-radius:50%;background:var(--cta);color:var(--sobre-vino);display:grid;place-items:center;font-family:var(--t);font-weight:600;font-size:var(--f-dato);margin:0 auto 6px;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--oro)}
.hoja i{display:block;height:7px;border-radius:var(--r-xs);background:var(--crema2)}
.hoja i.t{height:10px;width:60%;margin:0 auto 8px;background:var(--linea)}
.hoja .fir{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end}
.hoja .fir span{font-family:var(--t);font-style:italic;font-size:var(--f-tarjeta);color:var(--vino);border-bottom:1px solid var(--linea-f);padding:0 8px 2px}
.vers{display:flex;align-items:center;gap:14px;padding:14px 16px;border-top:1px solid var(--linea)}
.vers b{font-weight:500}
.vers .der{margin-left:auto;display:flex;gap:8px;align-items:center}
/* puntos: recompensas */
.pts{grid-template-columns:minmax(0,1fr) 310px}
.nivs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.niv{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-lg);padding:16px 16px 14px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--s-sm);position:relative}
.niv.tu{border-color:var(--oro);box-shadow:0 0 0 3px var(--oro-velo),var(--s-sm)}
.niv.no{background:var(--crema)}
.niv .cab-n{display:flex;align-items:center;gap:12px}
.med{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none}
.med.aliado{background:var(--vino-velo);color:var(--vino);box-shadow:0 0 0 2px var(--vino-velo2)}
.med.plata{background:linear-gradient(140deg,#f3eee8,#cfc4b8);color:#5e4a48;box-shadow:0 0 0 2px #e4dbd0}
.med.oro{background:linear-gradient(140deg,var(--oro-claro),var(--oro));color:#fff;box-shadow:0 0 0 2px var(--oro-velo)}
.niv .cab-n b{display:block;font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino-noche);line-height:1}
.niv .cab-n small{font-size:var(--f-nota);color:var(--suave)}
.niv .cab-n .pas{margin-left:auto;align-self:flex-start}
.rec{display:flex;flex-direction:column;gap:8px}
.rec span{display:flex;gap:10px;align-items:center;font-size:var(--f-texto)}
.rec span i{width:32px;height:32px;border-radius:50%;background:var(--oro-velo);color:var(--oro-letra);display:grid;place-items:center;flex:none}
.niv.no .rec span{color:var(--suave)}
.ok-ani{animation:okani var(--respiro) var(--ease)}
@keyframes okani{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
/* ═══ T4 ═══ */
/* fecha y hora: lo primero que se lee en cada tarjeta */
.enc .h{font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino);line-height:1;letter-spacing:0}
.enc .n{font-size:var(--f-texto);margin-top:2px}
.cuando-g{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;line-height:1}
.cuando-g .f{font-family:var(--t);font-size:var(--f-seccion);font-weight:600;color:var(--vino-noche)}
.cuando-g .hr{font-family:var(--t);font-size:var(--f-seccion);font-weight:600;color:var(--vino)}
.sofia-q{padding:9px 0}
.sofia-q .cuando-g{margin-bottom:6px}
.sofia-q .cuando-g .f,.sofia-q .cuando-g .hr{font-size:var(--f-tarjeta)}
.sofia-q .tres{margin-top:8px}
.dia{min-height:0!important;padding:9px 8px}
.a-bajo .caja{padding:12px 20px 10px}
.a-bajo .caja-cab{margin-bottom:6px}
.a-bajo{margin-bottom:8px}
.enc .h{font-size:var(--f-tarjeta)}
.sol h4{font-size:var(--f-tarjeta)}
/* IVA debajo del precio */
.tb.pt td{vertical-align:top;padding-top:12px;padding-bottom:12px}
.tb.pt td.pr{padding-top:24px}
.tb.pt td.og{padding-top:21px}
.iva{display:block;font-size:var(--f-nota);line-height:1.2;color:var(--suave);font-weight:400;font-family:var(--x);margin-top:2px}
.celda-p .iva{text-align:right}
/* precios T4b: total grande + subtotal y IVA chiquitos; buscador */
.tb.pt td.pr{padding-top:16px}
.tb.pt td.og{padding-top:21px}
.celda-p{min-width:150px}
.celda-p .tot{font-family:var(--t);font-weight:600;font-size:var(--f-tarjeta);line-height:1.1;color:var(--vino-noche);font-variant-numeric:lining-nums}
.celda-p.fijo .tot{color:var(--suave)}
.celda-p .des{display:block;font-size:var(--f-nota);line-height:1.2;color:var(--suave);font-weight:400;font-family:var(--x);text-align:right}
.celda-p .v{position:relative}
.celda-p .lapiz,.celda-p .cand{position:absolute;right:100%;top:50%;transform:translateY(-50%);margin-right:6px;display:inline-flex}
.busca{padding:14px 16px;border-bottom:1px solid var(--linea)}
.busca .campo{display:flex;align-items:center;gap:10px;border:1.5px solid var(--linea-f);border-radius:var(--r-pildora);min-height:44px;padding:0 16px;background:var(--sup);color:var(--suave);max-width:420px}
.busca .campo input{border:0;outline:0;font:inherit;font-size:var(--f-texto);background:transparent;flex:1;color:var(--tinta)}
.busca .campo:focus-within{border-color:var(--vino);box-shadow:0 0 0 3px var(--vino-velo);color:var(--vino)}
.tb .vacio-b{text-align:center;color:var(--suave);padding:36px 14px}
.sol .pp{align-items:flex-start}
.sol .pp .pv{display:flex;flex-direction:column}
.sol .pp .iva{margin-top:3px}
.det-g .dato .iva{margin-top:1px}
/* enlace del repartidor */
.rep-c{display:flex;gap:8px;align-items:center}
.rep-c .btn{min-height:36px;padding:0 14px;font-size:var(--f-texto);white-space:nowrap}
.per .hoyp{min-width:190px}
/* primer ingreso: contrato marco + Firmar */
.a.sin-lado .a-lado{display:none}
.a.sin-lado .a-main{padding:0;overflow:hidden}
.firmar{height:100%;display:flex;flex-direction:column;align-items:center;position:relative;background:linear-gradient(180deg,var(--crema) 0%,var(--crema2) 100%)}
.firmar .marca{position:absolute;left:30px;top:22px}
.firmar .cinta{position:absolute;right:30px;top:26px}
.firmar .ti{text-align:center;padding-top:26px}
.firmar .ti h2{margin:4px 0 0;font-size:var(--f-pagina)}
.visor{width:660px;flex:1;min-height:0;margin-top:18px;overflow-y:auto;scrollbar-width:none;border-radius:var(--r-md) var(--r-md) 0 0}
.visor::-webkit-scrollbar{display:none}
.pagina-c{background:#fff;border:1px solid var(--linea);box-shadow:var(--s-md);padding:44px 52px 120px;display:flex;flex-direction:column;gap:11px;min-height:980px}
.pagina-c .sello{width:56px;height:56px;border-radius:50%;background:var(--cta);color:var(--sobre-vino);display:grid;place-items:center;font-family:var(--t);font-weight:600;font-size:var(--f-dato);margin:0 auto 4px;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--oro)}
.pagina-c h3{margin:6px 0 0;text-align:center;font-family:var(--t);font-size:var(--f-seccion);font-weight:600;color:var(--vino-noche);line-height:1.1}
.pagina-c h5{margin:16px 0 0;font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino-noche)}
.pagina-c i{display:block;height:7px;border-radius:var(--r-xs);background:var(--crema2)}
.pagina-c .firmas{margin-top:auto;display:flex;justify-content:space-between;gap:40px;padding-top:50px}
.pagina-c .firmas div{flex:1;text-align:center;font-size:var(--f-nota);color:var(--suave);border-top:1px solid var(--linea-f);padding-top:6px;position:relative}
.pagina-c .firmas b{display:block;font-weight:500;color:var(--tinta);font-size:var(--f-texto)}
.pagina-c .garabato{position:absolute;left:0;right:0;bottom:44px;font-family:var(--t);font-style:italic;font-size:var(--f-seccion);color:var(--vino);opacity:0;transform:translateY(6px);transition:opacity var(--revelado) var(--ease),transform var(--revelado) var(--ease)}
.firmado .garabato{opacity:1;transform:none}
.barra-f{position:absolute;left:0;right:0;bottom:0;padding:70px 0 24px;display:flex;justify-content:center;background:linear-gradient(180deg,rgba(243,232,221,0),var(--crema2) 62%);pointer-events:none}
.barra-f .btn{pointer-events:auto}
.btn-firma{min-width:300px;min-height:56px;font-size:var(--f-dato)}
.firmado .btn-firma{background:var(--exito);box-shadow:none}
/* captura de la vista real */

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   WEB REAL (F4) · lo de arriba es la lámina T4 aprobada (tokens y piezas); lo de abajo lo vuelve página:
   altura libre, menú fijo, los 9 estados, y el celular (390 px). Mismos tokens; ningún color nuevo.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{background:var(--crema);min-height:100vh;overflow-wrap:break-word}
#app{min-height:100vh}
a{color:inherit}
:focus-visible{outline:3px solid var(--vino);outline-offset:2px;border-radius:var(--r-xs)}
.a{display:flex;height:auto;min-height:100vh;align-items:stretch}
.a-lado{position:sticky;top:0;height:100vh;align-self:flex-start;overflow-y:auto;flex:none}
.a-main{overflow:visible;flex:1;min-width:0;max-width:1320px;width:100%;margin:0 auto;padding:22px 28px 96px}
.a-menu a{text-decoration:none}
.a-pts{text-decoration:none;color:inherit;display:block}
.a-pts:empty{display:none}
.marca{text-decoration:none}
.quien small{font-weight:400;color:var(--suave);font-size:var(--f-nota);line-height:1.3;display:block}
.vista{animation:none;display:flex;flex-direction:column;gap:18px}
.vista.entra{animation:entra var(--respiro) var(--ease) both}
.aviso{position:fixed;left:50%;bottom:22px;max-width:calc(100vw - 24px)}
.aviso.mal{background:var(--peligro)}
.aviso span{overflow-wrap:anywhere}
.btn{min-height:44px}
.btn.ocupado{opacity:.6;pointer-events:none}
.btn[data-act],.celda-p[data-act],.cel[data-act],.fila[data-act]{touch-action:manipulation}
.mini-btn{min-height:36px}
.mini-btn.peligro,.btn.peligro{color:var(--peligro);border-color:var(--peligro)}
.cab-pc{margin-top:22px}
.seg-lado{margin-left:20px}
.ley-lado{margin-left:20px;margin-bottom:8px}
.seg button{min-height:40px}
.oculto-f{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
label.btn{cursor:pointer}
/* 9 estados */
.esq{border-radius:var(--r-md);background:linear-gradient(90deg,var(--crema2) 0%,var(--sup-alta) 50%,var(--crema2) 100%);background-size:220% 100%;animation:brilla 1.4s linear infinite}
@keyframes brilla{from{background-position:120% 0}to{background-position:-120% 0}}
.esqueleto{display:flex;flex-direction:column;gap:12px;padding:6px 0}
.lento{text-align:center;color:var(--suave);margin:0}
.banda-sin{display:flex;align-items:center;gap:10px;background:var(--aviso-velo);color:var(--aviso);border-radius:var(--r-md);padding:10px 14px;font-size:var(--f-texto);margin-bottom:12px}
.banda-sin .btn{margin-left:auto}
.estado-e .circ{background:var(--vino-velo);color:var(--vino)}
.estado-e.sin_senal .circ{background:var(--aviso-velo);color:var(--aviso)}
.vacio span{max-width:36ch}
.campo-mal{display:block;color:var(--peligro);font-size:var(--f-texto);margin-top:6px}
.malo,.campo.malo,.monto.malo{border-color:var(--peligro)!important;box-shadow:0 0 0 3px var(--peligro-velo)!important}
.nueva{flex-wrap:wrap}
.nueva .campo-mal{flex-basis:100%;margin:0}
/* inicio */
.a-cab{flex-wrap:wrap}
.a-bajo{align-items:start}
.semana .dia{cursor:pointer}
.enc .h{font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino);line-height:1}
.enc .n{overflow-wrap:anywhere}
/* solicitudes */
.sol .w{overflow-wrap:anywhere}
.sol h4{overflow-wrap:anywhere}
.sol .acc{flex-wrap:wrap}
.sol .cu{position:relative}
.sol .cu>.campo-mal{margin:0}
.cuando-g .hr{white-space:nowrap}
/* calendario */
.cel{min-width:0}
.cel .e{overflow-wrap:anywhere}
.cel .e.ambar{background:var(--aviso-velo);color:var(--aviso)}
.cel[data-act]:focus-visible{outline-offset:-2px}
.franjas{display:flex;gap:3px;align-items:center}
.franjas i{display:block;width:10px;height:5px;border-radius:var(--r-xs);background:var(--linea-f)}
.franjas i.u{background:var(--vino)}
.franjas i.b{background:repeating-linear-gradient(135deg,var(--tenue) 0 2px,var(--crema) 2px 4px)}
.hora-g{font-family:var(--t);font-size:var(--f-tarjeta)!important;font-weight:600;color:var(--vino)!important;line-height:1.05}
.tb .cuando b{font-size:var(--f-texto)}
.enc-tb .tb .cuando{width:104px}
.tb tr.fila:focus-visible{outline-offset:-2px}
.sub-o{display:block;font-size:var(--f-nota);color:var(--suave);margin-top:3px}
.rep-c .sel{min-width:130px}
.sel{min-height:40px}
/* cobros */
.tb td .btn{white-space:nowrap}
/* contrato */
.hoja-t{height:auto;max-height:520px;overflow-y:auto;gap:6px;font-size:var(--f-texto);padding:24px}
.hoja-t h3{margin:4px 0 6px;font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino-noche);text-align:center;line-height:1.1}
.hoja-t h5{margin:12px 0 0;font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino-noche)}
.hoja-t p,.pagina-c p{margin:0;color:var(--suave);line-height:1.5}
.nota-c{font-size:var(--f-nota);color:var(--aviso)!important;text-align:center}
.marco{flex-wrap:wrap}
.marco .der{flex-wrap:wrap}
/* puntos */
.a-sig{margin-left:auto;text-align:right}
.a-sig b{font-family:var(--t);font-size:var(--f-seccion);font-weight:600;color:var(--vino-noche)}
.pas-n{margin-left:auto;align-self:flex-start}
/* primer ingreso */
.a.sin-lado{display:block}
.a.sin-lado .a-main{padding:0;max-width:none}
.firmar{height:100vh;min-height:560px}
.pagina-c{min-height:0;padding-bottom:140px}
.pagina-c .firmas{padding-top:36px}
.firmar .ti{padding:0 16px;padding-top:26px}
.firmar .visor{max-width:calc(100% - 24px)}
.firmar .visor .pagina-c h5{margin-top:14px}
.firmado .btn-firma{background:var(--exito);box-shadow:none}
@media (prefers-reduced-motion:reduce){.vista.entra{animation:none}*{transition:none!important;animation:none!important}.esq{animation:none}}

/* ═════════════ CELULAR (390 px) y pantallas angostas ═════════════ */
@media (max-width:900px){
  .a{flex-direction:column}
  .a-lado{position:sticky;top:0;z-index:30;height:auto;width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 12px 6px;border-right:0;border-bottom:1px solid var(--linea);overflow:visible}
  .a-lado .marca-tx{display:none}
  .a-lado .quien{order:2;border:0;padding:0;font-size:var(--f-texto);line-height:1.2;flex:1;min-width:0}
  .a-lado .quien .ini{width:30px;height:30px;font-size:var(--f-nota)}
  .a-lado .quien small{display:none}
  .a-lado .marca{order:1}
  .a-lado .a-menu{order:3;flex-direction:row;width:100%;overflow-x:auto;gap:4px;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .a-lado .a-menu::-webkit-scrollbar{display:none}
  .a-lado .a-menu a{flex:none;min-height:44px;padding:0 14px;gap:8px;white-space:nowrap}
  .a-lado .a-pts{display:none}
  .a-main{padding:16px 14px 96px}
  .cab-s,.a-cab{flex-wrap:wrap;gap:10px;min-height:0;align-items:flex-start}
  .cab-s h2,.a-cab h2{font-size:var(--f-seccion)}
  .cab-s .der,.a-cab .der{margin-left:0;width:100%;flex-wrap:wrap}
  .seg-lado,.ley-lado{margin-left:0;width:100%}
  .seg{max-width:100%;overflow-x:auto}
  .cab-pc{margin-top:0}
  .semana{grid-template-columns:1fr}
  .dia{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px}
  .dia-cab{flex-direction:column;align-items:center;min-width:44px}
  .dia .enc,.dia .libre{flex:1;min-width:150px;margin:0;text-align:left;align-items:flex-start}
  .a-bajo{grid-template-columns:1fr}
  .cifras{grid-template-columns:1fr}
  .cifra.grande b{font-size:var(--f-pagina)}
  .sols{grid-template-columns:1fr}
  .sol.ancha{grid-column:auto}
  .sol,.sol.ancha{flex-direction:column}
  .sol .ftw,.sol.ancha .ftw,.sol .sinft{width:100%;height:150px;flex:none}
  .sol .acc .der{margin-left:0;width:100%;flex-wrap:wrap}
  .monto{width:100%}
  .eq,.ctr,.pts{grid-template-columns:1fr}
  .nivs{grid-template-columns:1fr}
  .heroe-p .grande{font-size:var(--f-pagina)}
  .heroe-p .fila{flex-wrap:wrap}
  .pista{margin:28px 28px 40px}
  .marco .der{margin-left:0;width:100%}
  .marco .datos-m{flex-wrap:wrap;gap:10px 22px}
  .det-g{flex-wrap:wrap;gap:14px 26px}
  .det-g .btn{margin-left:0}
  .sub-cab{flex-wrap:wrap}
  .nueva{align-items:stretch}
  .nueva .der{margin-left:0;width:100%;justify-content:flex-end}
  .nueva .campo{flex:1;min-width:150px}
  .nueva .campo input{width:100%!important;min-width:0}
  .per{flex-wrap:wrap}
  .per .hoyp{text-align:left;min-width:0;width:100%}
  /* tablas → tarjetas, con su etiqueta */
  .tb thead{display:none}
  .tb,.tb tbody,.tb tr,.tb td{display:block;width:100%}
  .tb tr{padding:12px 14px;border-top:1px solid var(--linea);position:relative}
  .tb td{border:0;padding:4px 0;min-width:0!important}
  .tb td[data-l]::before{content:attr(data-l);display:block;font-size:var(--f-nota);letter-spacing:.14em;text-transform:uppercase;color:var(--suave);margin-bottom:2px}
  .tb td.r,.tb th.r{text-align:left}
  .tb td.cuando{width:auto}
  .tb td.fl-c{position:absolute;right:6px;top:8px;width:auto;padding:0!important}
  .enc-tb{padding:0}
  .enc-tb .tb tr.abierta>td,.enc-tb .tb tr.det-fila>td{box-shadow:none;border-radius:0;background:transparent}
  .enc-tb .tb tr.abierta{background:var(--sup-alta)}
  .tb tr.det-fila{background:var(--sup-alta);padding:6px 14px 14px;border-top:0}
  .tb.pt td.pr{padding-top:6px}
  .celda-p{align-items:flex-start;margin:0;padding:6px 8px;min-width:0}
  .celda-p .des{text-align:left}
  .celda-p .lapiz,.celda-p .cand{position:static;transform:none;margin:0 0 0 6px}
  .tb .dos{justify-content:flex-start!important}
  /* calendario compacto: el título del encargo pasa a un punto y la lista de abajo lo dice */
  .mes{gap:3px}
  .mes .dsem{padding:0 2px;font-size:var(--f-nota);letter-spacing:.06em}
  .cel{min-height:62px;padding:5px;border-radius:var(--r-sm);gap:3px}
  .cel .n b{font-size:var(--f-tarjeta)}
  .cel .n{flex-direction:column;align-items:flex-start;gap:3px}
  .cupo{gap:2px;flex-wrap:wrap}
  .cupo i{width:5px;height:5px}
  .cel .e{font-size:0;line-height:0;padding:0;width:8px;height:8px;border-radius:50%;background:var(--vino);display:block;min-height:0}
  .cel .e.pc{background:var(--peligro)}
  .cel .e.ambar{background:var(--aviso)}
  .cel .lock .tx{display:none}
  .cel .bl{display:none}
  .firmar .marca{left:14px;top:14px}
  .firmar .cinta{position:static;margin-top:12px;align-self:center}
  .firmar .ti h2{font-size:var(--f-seccion)}
  .firmar .ti{padding-top:12px}
  .pagina-c{padding:28px 22px 130px}
  .btn-firma{min-width:0;width:calc(100% - 32px)}
  .aviso{bottom:14px}
}
.cel.pasada{min-height:50px;padding:6px 9px}
.cel.pasada .n b{font-size:var(--f-tarjeta)}
button.flecha{border:0;background:transparent;padding:0;cursor:pointer;width:44px;height:44px}
.fl-c{width:48px}
.rep-c{flex-wrap:wrap;max-width:230px}
.tb td:nth-child(3){min-width:150px}
.mes{grid-template-columns:repeat(7,minmax(0,1fr))}
@media (max-width:900px){
  .seg{flex-wrap:wrap;overflow:visible;border-radius:var(--r-lg);width:100%;justify-content:flex-start}
  .seg button{flex:1 1 auto;justify-content:center;white-space:nowrap}
  .cab-s .der .cinta{order:2}
}
.hora-g,.tb .cuando small,.tb .cuando b{white-space:nowrap}
@media (max-width:900px){.sol .sinft{height:64px!important}}
@media (max-width:900px){.tb.pt td:first-child::before{display:none}}
@media (max-width:900px){
  .firmar .marca{position:static;align-self:flex-start;margin:14px 0 0 14px}
  .firmar .cinta{position:static;margin:8px 0 0;align-self:center}
  .firmar .ti{padding-top:6px}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   CORRECCIÓN TRAS QA (E-2026-1097, 24-oct) · entrar por invitación · campanita · niveles · toques de 44 · errores en su campo
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
.campo-mal[hidden]{display:none}
/* entrar: invitación y «Entra otra vez» */
.ing{min-height:100vh;display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,var(--crema) 0%,var(--crema2) 100%);padding:20px 16px 48px}
.ing-cab{width:100%;max-width:1100px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.ing-caja{margin-top:9vh;width:100%;max-width:420px;background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-xl);box-shadow:var(--s-md);padding:34px 30px 30px;display:flex;flex-direction:column;gap:8px}
.ing-ti{text-align:center;margin-bottom:6px}
.ing-ti h2{margin:6px 0 0;font-size:var(--f-pagina);overflow-wrap:anywhere}
.ing form{display:flex;flex-direction:column}
.fld{display:flex;flex-direction:column;gap:5px;margin-top:12px}
.fld span{font-size:var(--f-nota);letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.fld input{min-height:48px;border:1.5px solid var(--linea-f);border-radius:var(--r-sm);padding:0 14px;font:inherit;font-size:var(--f-dato);background:var(--sup);color:var(--tinta);width:100%}
.fld input:focus{outline:0;border-color:var(--vino);box-shadow:0 0 0 3px var(--vino-velo)}
.fld.malo input{border-color:var(--peligro)}
.ing .campo-mal{margin-top:6px}
.ing .btn-b{margin-top:18px;min-height:52px}
.ing .btn.ocupado{opacity:.6}
.ing .vacio{padding:18px 0 6px}
/* «Probar» (24-oct, mig 427): la lista de proveedores de prueba */
.ing .ing-probar{margin-top:10px}
.prob-lista{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.prob-fila{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:58px;width:100%;padding:10px 16px;border:1.5px solid var(--linea-f);border-radius:var(--r-md);background:var(--sup);color:var(--tinta);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;transition:border-color var(--caricia) var(--ease),background var(--caricia) var(--ease)}
.prob-fila b{font-size:var(--f-dato);font-weight:600;overflow-wrap:anywhere}
.prob-fila small{font-size:var(--f-texto);color:var(--suave)}
.prob-fila:hover,.prob-fila:focus-visible{border-color:var(--vino);background:var(--vino-velo);outline:0}
.prob-fila[disabled]{opacity:.55;cursor:default}
.prob-fila.ocupado{opacity:1;border-color:var(--vino)}
/* la campanita: arriba a la derecha en todo el panel */
.campana{position:fixed;top:16px;right:22px;z-index:45}
.campana-b{position:relative;width:44px;height:44px;border-radius:50%;border:1px solid var(--linea-f);background:var(--sup);color:var(--vino);display:grid;place-items:center;cursor:pointer;box-shadow:var(--s-sm);padding:0}
.campana-b[aria-expanded="true"]{background:var(--vino-velo);border-color:var(--vino)}
.campana-b .n{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;border-radius:var(--r-pildora);background:var(--peligro);color:#fff;font-size:var(--f-nota);font-weight:500;display:grid;place-items:center;padding:0 5px;font-variant-numeric:lining-nums tabular-nums}
.campana-b .n[hidden]{display:none}
.camp-hoja{position:fixed;top:68px;right:22px;width:min(390px,calc(100vw - 24px));background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-lg);box-shadow:var(--s-lg);z-index:46;padding:4px 0 6px;overflow:hidden}
.camp-hoja[hidden]{display:none}
.camp-hoja.ver{animation:entra var(--respiro) var(--ease) both}
.camp-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 8px 18px}
.camp-cab h3{margin:0;font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino-noche)}
.av{display:flex;gap:12px;align-items:flex-start;width:100%;min-height:60px;padding:12px 18px;border:0;border-top:1px solid var(--linea);background:transparent;text-align:left;cursor:pointer;font:inherit;color:inherit}
.av.nuevo{background:var(--sup-alta)}
.av .ic{width:36px;height:36px;border-radius:50%;background:var(--oro-velo);color:var(--oro-letra);display:grid;place-items:center;flex:none}
.av.nuevo .ic{background:var(--vino-velo);color:var(--vino)}
.av .tx{flex:1;min-width:0}
.av .tx b{display:block;font-weight:500;font-size:var(--f-texto);line-height:1.25}
.av .tx small{display:block;color:var(--suave);font-size:var(--f-texto);margin-top:2px;overflow-wrap:anywhere}
.av .hace{font-size:var(--f-nota);color:var(--tenue);white-space:nowrap;margin-top:2px}
.av .pt{width:9px;height:9px;border-radius:50%;background:var(--vino);flex:none;margin-top:8px}
.camp-vacio{padding:22px 18px 18px;text-align:center;color:var(--suave)}
.camp-cab .btn{min-height:44px;padding:0 14px;font-size:var(--f-texto)}
@media (min-width:901px){.cab-s .der,.a-cab .der{margin-right:54px}}
@media (max-width:900px){
  .campana{top:6px;right:12px}
  .camp-hoja{top:58px;right:12px}
  .a-lado .quien{margin-right:50px}
}
/* salir */
.quien .salir{margin:-6px -8px -6px auto;width:44px;height:44px;border:0;background:transparent;color:var(--suave);border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:none}
.quien .salir:hover{background:var(--vino-velo);color:var(--vino)}
@media (max-width:900px){.a-lado .quien{min-width:0}.a-lado .quien .salir{margin:-8px 0 -8px auto}}
/* niveles de puntos: Plata · Oro · Platino · Diamante */
.nivs{grid-template-columns:repeat(2,minmax(0,1fr))}
.med.platino{background:linear-gradient(140deg,#e9eef0,#a9b9be);color:#3c4f56;box-shadow:0 0 0 2px #d4dde0}
.med.diamante{background:linear-gradient(140deg,#e6e0f2,#9c86c4);color:#fff;box-shadow:0 0 0 2px rgba(138,111,158,.28)}
.pista .marca-n:nth-of-type(even){flex-direction:column-reverse;top:-30px}
.pista .marca-n:nth-of-type(even) i{margin-bottom:0}
.pista .marca-n:nth-of-type(even){gap:4px}
.pista .marca-n span{font-size:var(--f-nota)}
@media (max-width:900px){.nivs{grid-template-columns:1fr}.pista .marca-n span .num{display:none}}
/* toques de 44 px (QA L2) y letra de 12 px (QA L1) */
.mini-btn,.sofia-q .tres .btn,.rep-c .btn{min-height:44px}
.mes .dsem{font-size:var(--f-nota)}
@media (max-width:900px){.mes .dsem{font-size:var(--f-nota);letter-spacing:.02em}}
.fld.malo{border:0!important;box-shadow:none!important}
/* toque mínimo de 44 px en todo lo que se pulsa (QA L2) */
.seg button,.seg.ch button,.sel,.dos .btn,.sol .acc .btn,.aviso button{min-height:44px}
.redondo{width:44px;height:44px}
.celda-p[data-act="editar-nuevo"]{min-height:44px;justify-content:center}
.marca-c{min-height:44px;display:inline-flex;align-items:center}
.monto{min-height:44px}.monto input{align-self:stretch;min-height:44px}
.celda-p input{min-height:44px}
.a-lado .marca{min-height:44px}
.a-lado .marca{min-width:44px;justify-content:center}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   V2 · E-2026-1123 (27-oct) · lista aprobada por Alan («Va la lista, construye»)
   1 más vino: la barra (y el cajón del teléfono) en vino noche con letra crema; vino en el día elegido, el botón principal y los montos.
     El crema queda de FONDO del contenido. · 2 teléfono: barra de arriba con tres rayas → cajón vino. · 3 computadora: riel de íconos.
   4 sin brincos: ninguna animación de entrada al cambiar de sección ni al picar. · 5 calendario: picar abre el día. · 6 Inicio: tira de días.
   Mismos tokens; ningún color nuevo (sólo transparencias de la crema sobre el vino).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
.vista,.vista.entra{animation:none!important}
:root{--sobre-vino-2:rgba(250,245,239,.74);--sobre-vino-3:rgba(250,245,239,.14);--sobre-vino-4:rgba(250,245,239,.07);--lado:240px;--riel:76px}
html.fijo{overflow:hidden}

/* ── 1 · la barra en vino ── */
.a-lado{background:linear-gradient(180deg,var(--vino-noche) 0%,var(--vino-hondo) 100%);border-right:0;color:var(--sobre-vino);width:var(--lado);
 transition:width var(--respiro) var(--ease);overflow-x:hidden;padding:16px 12px 16px}
.lado-cab{display:flex;align-items:center;gap:6px;min-height:44px}
.lado-cab .marca{flex:1;min-width:0}
.a-lado .marca-av{background:var(--crema);color:var(--vino);box-shadow:0 0 0 1px var(--oro-claro)}
.a-lado .marca-tx b{color:var(--sobre-vino);white-space:nowrap}
.a-lado .marca-tx small{color:var(--oro-claro)}
.riel-b,.cierra-b{flex:none;width:44px;height:44px;border-radius:var(--r-sm);border:0;background:transparent;color:var(--sobre-vino-2);display:grid;place-items:center;cursor:pointer;transition:background var(--caricia) var(--ease),color var(--caricia) var(--ease)}
.riel-b:hover,.cierra-b:hover{background:var(--sobre-vino-4);color:var(--sobre-vino)}
.cierra-b{display:none}
.a-menu{gap:3px}
.a-menu a{position:relative;color:var(--sobre-vino-2);font-size:var(--f-texto);gap:12px;padding:0 12px;white-space:nowrap}
.a-menu a .ic{flex:none;width:20px;display:grid;place-items:center}
.a-menu a .tx{overflow:hidden;text-overflow:clip}
.a-menu a:hover:not(.si){background:var(--sobre-vino-4);color:var(--sobre-vino)}
.a-menu a.si{background:var(--crema);color:var(--vino);font-weight:600;box-shadow:0 6px 16px rgba(0,0,0,.22)}
.a-menu a .cuenta{background:var(--crema);color:var(--vino-noche);font-weight:600}
.a-menu a.si .cuenta{background:var(--vino);color:var(--sobre-vino)}
.a-lado :focus-visible{outline-color:var(--oro-claro)}
.a-pts{background:var(--sobre-vino-4);border:1px solid var(--sobre-vino-3);color:var(--sobre-vino)}
.a-pts .versal{color:var(--oro-claro)}
.a-pts .pts-n{color:var(--sobre-vino)}
.a-pts .p-oro{background:rgba(210,172,108,.18);color:var(--oro-claro)}
.a-pts .barra{background:var(--sobre-vino-3)}
.a-pts .falta{color:var(--sobre-vino-2)}
.a-pts:hover{background:var(--sobre-vino-3)}
.quien{border-top-color:var(--sobre-vino-3);color:var(--sobre-vino);padding:12px 2px 0}
.quien .q-nom{flex:1;min-width:0;overflow-wrap:anywhere}
.quien small{color:var(--sobre-vino-2)!important}
.quien .ini{background:var(--marfil);color:var(--vino);flex:none}
.quien .salir{color:var(--sobre-vino-2)}
.quien .salir:hover{background:var(--sobre-vino-4);color:var(--sobre-vino)}
/* vino también en el contenido: la pestaña elegida y los montos que mandan */
.seg button.si{background:var(--vino-noche);color:var(--sobre-vino);box-shadow:none}
.seg button.si .c{color:var(--sobre-vino-2)}
.caja-cab .total b,.cifra b{color:var(--vino)}
.celda-p .tot{color:var(--vino)}

/* ── 3 · computadora: el riel (sólo íconos; el nombre en globo; los contadores como punto) ── */
@media (min-width:901px){
  .a.riel{--lado:var(--riel)}
  .a.riel .a-lado{overflow:visible;padding-left:10px;padding-right:10px}
  .a.riel .lado-cab{flex-direction:column;gap:10px}
  .a.riel .lado-cab .marca{flex:none}
  .a.riel .marca-tx,.a.riel .a-menu a .tx,.a.riel .a-pts,.a.riel .q-nom{display:none}
  .a.riel .a-menu a{justify-content:center;padding:0;width:56px;height:48px}
  .a.riel .a-menu a .cuenta{position:absolute;top:9px;right:10px;min-width:0;width:9px;height:9px;padding:0;font-size:0;background:var(--oro-claro);box-shadow:0 0 0 2px var(--vino-noche)}
  .a.riel .a-menu a.si .cuenta{background:var(--vino);box-shadow:0 0 0 2px var(--crema)}
  .a.riel .a-menu a::after{content:attr(data-nombre);position:absolute;left:calc(100% + 12px);top:50%;transform:translate(-4px,-50%);opacity:0;pointer-events:none;
    background:var(--vino-noche);color:var(--sobre-vino);font-size:var(--f-texto);font-weight:500;padding:7px 12px;border-radius:var(--r-sm);white-space:nowrap;box-shadow:var(--s-md);
    transition:opacity var(--caricia) var(--ease),transform var(--caricia) var(--ease);z-index:60}
  .a.riel .a-menu a:hover::after,.a.riel .a-menu a:focus-visible::after{opacity:1;transform:translate(0,-50%)}
  .a.riel .quien{flex-direction:column;gap:6px;padding-top:12px}
  .a.riel .quien .salir{margin:0}
  .a-barra,.velo-menu{display:none}
}

/* ── 2 · teléfono: barra de arriba con tres rayas y el cajón vino ── */
@media (max-width:900px){
  .a-barra{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:6px;height:56px;padding:0 64px 0 6px;background:var(--vino-noche);color:var(--sobre-vino)}
  .a-barra .marca-av{width:34px;height:34px;font-size:var(--f-texto);background:var(--crema);color:var(--vino);box-shadow:0 0 0 1px var(--oro-claro)}
  .a-barra .marca-tx b{color:var(--sobre-vino);font-size:var(--f-dato)}
  .a-barra .marca-tx small{color:var(--oro-claro)}
  .tres-rayas{position:relative;width:44px;height:44px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--sobre-vino);display:grid;place-items:center;cursor:pointer;flex:none}
  .tres-rayas:active{background:var(--sobre-vino-4)}
  .tres-rayas .pt{position:absolute;top:9px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--oro-claro);box-shadow:0 0 0 2px var(--vino-noche)}
  .tres-rayas .pt[hidden]{display:none}
  .a-barra :focus-visible{outline-color:var(--oro-claro)}
  /* el cajón: el mismo menú de la computadora, completo, con sus contadores */
  .a-lado{position:fixed!important;top:0;left:0;bottom:0;z-index:70;width:min(320px,86vw)!important;height:100%!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;
    gap:18px!important;padding:12px 14px calc(18px + env(safe-area-inset-bottom))!important;border:0!important;overflow-y:auto!important;overscroll-behavior:contain;
    transform:translateX(-104%);visibility:hidden;transition:transform var(--respiro) var(--ease),visibility 0s linear var(--respiro);box-shadow:var(--s-lg)}
  .a.menu-ab .a-lado{transform:none;visibility:visible;transition:transform var(--respiro) var(--ease),visibility 0s}
  .a.al-golpe .a-lado,.a.al-golpe .velo-menu{transition:none!important}
  .a-lado .marca-tx{display:block!important}
  .a-lado .marca{order:0!important}
  .a-lado .riel-b{display:none}
  .a-lado .cierra-b{display:grid}
  .a-lado .a-menu{order:0!important;flex-direction:column!important;width:auto!important;overflow:visible!important;padding:0!important;gap:3px!important}
  .a-lado .a-menu a{min-height:48px!important;padding:0 14px!important;font-size:var(--f-dato)}
  .a-lado .a-pts{display:block!important;order:0!important}
  .a-lado .quien{order:0!important;margin:auto 0 0!important;padding:12px 2px 0!important;border-top:1px solid var(--sobre-vino-3)!important;font-size:var(--f-texto)!important;flex:none!important}
  .a-lado .quien small{display:block!important}
  .a-lado .quien .ini{width:36px!important;height:36px!important}
  .velo-menu{position:fixed;inset:0;z-index:65;background:rgba(42,15,22,.42);opacity:0;visibility:hidden;transition:opacity var(--respiro) var(--ease),visibility 0s linear var(--respiro)}
  .a.menu-ab .velo-menu{opacity:1;visibility:visible;transition:opacity var(--respiro) var(--ease),visibility 0s}
  .a.sin-lado .a-barra{display:none}
  .campana{top:6px;right:10px}
  .campana-b{border-color:var(--sobre-vino-3)}
  .a-lado .quien{margin-right:0!important}
}

/* ── 6 · Inicio: la tira de días ── */
.tira-c{display:flex;align-items:center;gap:8px;min-width:0}
.tira{position:relative;flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:4px 2px 6px}
.tira::-webkit-scrollbar{display:none}
.tira-f{flex:none}
.dch{flex:none;scroll-snap-align:start;width:62px;height:96px;border-radius:var(--r-md);border:1px solid var(--linea);background:var(--sup);color:var(--tinta);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;padding:8px 0 0;cursor:pointer;font:inherit;touch-action:manipulation;
  transition:background var(--caricia) var(--ease),border-color var(--caricia) var(--ease),color var(--caricia) var(--ease)}
.dch .ms{height:14px;font-size:var(--f-nota);letter-spacing:.12em;text-transform:uppercase;color:var(--oro-letra);font-weight:600;line-height:14px}
.dch .ds{font-size:var(--f-nota);letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.dch b{font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;line-height:1;color:var(--vino-noche)}
.dch .mk{display:flex;gap:3px;height:12px;align-items:center;color:var(--suave);margin-top:3px}
.dch .mk i{width:6px;height:6px;border-radius:50%;background:var(--vino);display:block}
.dch .mk i.pc{background:var(--peligro)}
.dch .mk i.am{background:var(--aviso)}
.dch:hover:not(.sel){border-color:var(--vino)}
.dch.pas{background:var(--crema)}
.dch.pas b{color:var(--tenue)}
.dch.bloq{background:repeating-linear-gradient(135deg,var(--crema2) 0 6px,var(--crema) 6px 12px)}
.dch.hoy{border-color:var(--vino);box-shadow:inset 0 0 0 1px var(--vino)}
.dch.hoy .ds{color:var(--vino);font-weight:600}
.dch.sel{background:var(--cta);border-color:var(--vino-hondo);box-shadow:var(--s-cta)}
.dch.sel .ds,.dch.sel .ms{color:var(--sobre-vino-2)}
.dch.sel b{color:var(--sobre-vino)}
.dch.sel .mk{color:var(--sobre-vino-2)}
.dch.sel .mk i{background:var(--sobre-vino)}
.dch.sel .mk i.pc{background:var(--rubor)}
.dch.sel .mk i.am{background:var(--oro-claro)}
.caja-dia{min-height:300px;padding:6px 8px}
.caja-dia .vacio{padding:70px 20px}
.col-d{display:flex;flex-direction:column;gap:18px;min-width:0}
.nada{margin:4px 0 8px;color:var(--suave);font-size:var(--f-texto)}
.col-d .btn-b{margin-top:6px}
.tabla tr.del-dia td{background:var(--vino-velo)}
/* un encargo del día (Inicio y el día abierto del Calendario: la misma pieza) */
.encs-d{display:flex;flex-direction:column}
.enc-d{display:flex;align-items:center;gap:16px;padding:14px 12px;border-top:1px solid var(--linea);border-radius:var(--r-md)}
.enc-d:first-child{border-top:0}
.enc-d[data-act]{cursor:pointer;transition:background var(--caricia) var(--ease)}
.enc-d[data-act]:hover{background:var(--sup-alta)}
.enc-d .h{flex:none;width:112px;font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino);line-height:1;white-space:nowrap}
.enc-d .cu{flex:1;min-width:0}
.enc-d .cu b{display:block;font-weight:500;font-size:var(--f-dato);line-height:1.25;overflow-wrap:anywhere}
.enc-d .cu small{display:block;color:var(--suave);font-size:var(--f-texto);line-height:1.3;margin-top:2px;overflow-wrap:anywhere}
.enc-d .cu small.ll{color:var(--tinta)}
.enc-d .pas{flex:none}
.dp-cu .enc-d .pas{margin-left:auto}
.enc-d .dos{flex:none}
.enc-d .dos .btn{min-height:44px}

/* ── 5 · Calendario: el día abierto ── */
.cel{transition:border-color var(--caricia) var(--ease),box-shadow var(--caricia) var(--ease),background var(--caricia) var(--ease)}
.cel.pasada{cursor:pointer}
.cel.sel{background:var(--cta)!important;border-color:var(--vino-hondo)!important;box-shadow:var(--s-cta)!important}
.cel.sel .n b{color:var(--sobre-vino)!important}
.cel.sel .e{background:var(--sobre-vino-3);color:var(--sobre-vino)}
.cel.sel .e.pc{background:rgba(231,184,190,.24);color:var(--sobre-vino)}
.cel.sel .e.ambar{background:rgba(210,172,108,.24);color:var(--sobre-vino)}
.cel.sel .cupo i{background:var(--sobre-vino-3)}
.cel.sel .cupo i.u{background:var(--sobre-vino)}
.cel.sel .lock{color:var(--sobre-vino-2)}
.cel.hoy:not(.sel){box-shadow:inset 0 0 0 1px var(--vino)}
.cal-g{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
.dia-p{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-lg);box-shadow:var(--s-sm);display:flex;flex-direction:column}
.dp-cab{display:flex;align-items:flex-start;gap:10px;padding:16px 18px 6px}
.dp-cab>div{flex:1;min-width:0}
.dp-cab h3{margin:2px 0 0;font-size:var(--f-seccion)}
.dp-cu{padding:0 8px 6px}
.dp-cu .nada{padding:6px 10px 10px}
.dp-cu .enc-d{flex-wrap:wrap;gap:6px 14px}
.dp-cu .enc-d .h{width:auto;font-size:var(--f-tarjeta)}
.dp-cu .enc-d .cu{flex-basis:100%;order:3}
.dp-sol{padding:10px 10px 6px;border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:8px}
.dp-s{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.dp-s b{flex:1 1 160px;font-weight:500;overflow-wrap:anywhere}
.dp-pie{padding:10px 18px 18px;border-top:1px solid var(--linea)}
.dp-x{display:none}
.velo-dia{display:none}
@media (min-width:1100px){
  .cal-g{grid-template-columns:minmax(0,1fr) 330px}
  .dia-p{position:sticky;top:22px}
}
@media (max-width:1099px){
  .dia-p{position:fixed;left:0;right:0;bottom:0;z-index:72;max-height:min(78vh,640px);border-radius:var(--r-xl) var(--r-xl) 0 0;border-bottom:0;box-shadow:var(--s-lg);
    padding-bottom:env(safe-area-inset-bottom);transform:translateY(104%);visibility:hidden;transition:transform var(--respiro) var(--ease),visibility 0s linear var(--respiro)}
  .dia-p.ver{transform:none;visibility:visible;transition:transform var(--respiro) var(--ease),visibility 0s}
  .dia-p::before{content:"";display:block;width:40px;height:5px;border-radius:var(--r-xs);background:var(--linea-f);margin:10px auto 0;flex:none}
  .dp-cu{overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0}   /* la hoja es lo único que desliza mientras está abierta: la página de atrás queda fija */
  .dp-x{display:grid}
  .velo-dia{display:block;position:fixed;inset:0;z-index:71;background:rgba(42,15,22,.36);opacity:0;visibility:hidden;transition:opacity var(--respiro) var(--ease),visibility 0s linear var(--respiro)}
  .velo-dia.ver{opacity:1;visibility:visible;transition:opacity var(--respiro) var(--ease),visibility 0s}
}

/* ── teléfono: Inicio y día ── */
@media (max-width:900px){
  .tira-f{display:none}
  .tira{margin:0 -14px;padding:4px 14px 6px;scroll-padding:0 14px}
  .dch{width:58px;height:92px}
  .a-cab .der{order:3}
  .caja-dia{min-height:220px;padding:4px 4px}
  .enc-d{flex-wrap:wrap;gap:6px 12px;padding:14px 10px}
  .enc-d .h{width:auto;font-size:var(--f-tarjeta)}
  .enc-d .pas{margin-left:auto}
  .enc-d .cu{flex-basis:100%;order:3}
  .enc-d .dos{order:4;width:100%}
  .enc-d .dos .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){.a-lado,.velo-menu,.dia-p,.velo-dia{transition:none!important}}
.lado-cab .marca{justify-content:flex-start;min-width:0}
.a-lado .marca-tx b{font-size:var(--f-dato);white-space:normal;line-height:1.05}
.col-d .tabla td.p{width:104px}
.col-d .tabla td.m{width:104px}
.col-d .caja-cab .total b{font-size:var(--f-seccion)}
.cel .e{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
@media (min-width:1100px){.cal-g{grid-template-columns:minmax(0,1fr) 310px}}
.a-menu a{transition:none}
.a-menu a:hover:not(.si){transition:background var(--caricia) var(--ease),color var(--caricia) var(--ease)}
.dp-cu .enc-d .dos{order:4;width:100%}.dp-cu .enc-d .dos .btn{flex:1}
.enc-d{border-radius:0}
@media (max-width:900px){.cel.sel .e,.cel.sel .e.pc,.cel.sel .e.ambar{background:var(--sobre-vino)}}
/* «Hoy» siempre ocupa su lugar (escondido cuando ya es hoy): elegir otro día no mueve los botones ni el alto de la página */
.a-hoy[hidden]{display:inline-flex;visibility:hidden}
@media (max-width:900px){.caja-dia{min-height:160px}}
/* QA F1 (27-oct): el aviso (y su «Deshacer») va ENCIMA de la hoja del día y del cajón; un día con encargo dice por qué no se bloquea */
.aviso{z-index:90}
.sin-bloq{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:var(--f-texto);color:var(--suave)}
.sin-bloq.ancho{width:100%;justify-content:center}
/* QA B1 (27-oct): la marca (también enlace a Inicio) toca con 44 px en la barra del teléfono y en el cajón */
.marca{min-height:44px}
/* QA B3: los dos colores que en el teléfono sólo son punto (por confirmar · solicitud) entran a la leyenda; en la computadora el chip ya lleva su nombre */
.leyenda .ley-tel{display:none}
@media (max-width:900px){.leyenda{flex-wrap:wrap;gap:6px 14px}.leyenda .ley-tel{display:inline-flex}}

/* 27-oct-2026 · E-2026-1123 · el logo real de Romantic (corazón dorado) en vez del sello «A&V» que parecía foto (Alan) */
.marca-av.logo,.a-lado .marca-av.logo,.a-barra .marca-av.logo{background:transparent;box-shadow:none;border-radius:0}
.marca-av.logo img{width:100%;height:100%;object-fit:contain;display:block}
.ver-mas{display:flex;margin:6px auto 4px}
.enc-d .h{width:auto;min-width:112px}

/* ═══ SOLICITUDES v3 · E-2026-1123 (revisión de Alan 27-oct) · pensada a 390, extendida a 1280 ═══
   Una tarjeta: ícono del tipo (o la foto real) · fecha y hora del evento grandes · qué · lugar; lo que se decide abajo (390) o a la derecha (≥900). */
.sols3{display:flex;flex-direction:column}
.sol-ple{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--revelado) var(--ease)}
.sol-ple.fuera{grid-template-rows:0fr}
.sol-in{min-height:0;overflow:hidden}
.sol-in::after{content:"";display:block;height:12px}   /* el aire entre tarjetas es contenido: se pliega con la tarjeta, sin animar padding */
.sol3{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-lg);box-shadow:var(--s-sm);display:flex;flex-direction:column}
.sol-izq{padding:14px 16px 12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.sol-top{display:flex;align-items:center;gap:8px}
.sol-top .vence{margin-left:auto}
.sol-cab{display:flex;align-items:flex-start;gap:12px;min-width:0}
.sol-ico{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--vino-velo);color:var(--vino);box-shadow:0 0 0 3px var(--sup),0 0 0 4px var(--oro-velo)}
.sol-ico.cot{background:var(--info-velo);color:var(--info)}
.sol-ft{flex:none;width:56px;height:56px;border-radius:var(--r-md);object-fit:cover;background:var(--crema2)}
.sol-tx{flex:1;min-width:0}
.sol-cuando{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;line-height:1.05}
.sol-cuando .f{font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino-noche)}
.sol-cuando .hr{font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino);white-space:nowrap}
.sol-tx h4{margin:4px 0 0;font-size:var(--f-dato);font-weight:600;line-height:1.25;color:var(--tinta);overflow-wrap:anywhere}
.sol-donde{display:flex;align-items:flex-start;gap:5px;margin-top:3px;font-size:var(--f-texto);color:var(--suave);overflow-wrap:anywhere}
.sol-donde svg{flex:none;margin-top:2px;color:var(--oro-letra)}
.sol-acc{border-top:1px solid var(--linea);padding:12px 16px 14px;display:flex;flex-direction:column;gap:10px;background:var(--sup-alta);border-radius:0 0 var(--r-lg) var(--r-lg)}
.sol-pp{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sol-pp b{font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino);line-height:1}
.sol-dos{display:flex;gap:10px}
.sol-dos .btn{flex:1;min-height:48px}
.cot-fila{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cot-fila .monto{flex:1 1 150px;width:auto;min-height:48px;border-radius:var(--r-md)}
.cot-fila .monto input{font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino)}
.cot-des{margin-top:-4px;font-size:var(--f-texto);color:var(--suave)}
.cot-nom{display:flex;align-items:center;gap:8px;border:1.5px solid var(--linea-f);border-radius:var(--r-sm);min-height:44px;padding:0 12px;background:var(--sup)}
.cot-nom span{font-size:var(--f-nota);letter-spacing:.14em;text-transform:uppercase;color:var(--suave);flex:none}
.cot-nom input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:var(--f-dato);background:transparent;color:var(--tinta)}
.cot-nom:focus-within{border-color:var(--vino);box-shadow:0 0 0 3px var(--vino-velo)}
.sol3 .campo-mal{margin:-4px 0 0}
/* la palomita en la tarjeta (se dibuja cuando el servidor ya confirmó) */
.sol-ok{display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;color:var(--exito)}
.sol-ok b{font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600}
.ok-c circle{fill:var(--exito-velo);stroke:var(--exito);stroke-width:2}
.ok-c path{fill:none;stroke:var(--exito);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:0;animation:dibuja var(--respiro) var(--ease) var(--caricia) both}
.ok-c{animation:asoma var(--respiro) var(--ease) both}
@keyframes dibuja{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
@keyframes asoma{from{transform:scale(.7)}to{transform:none}}
/* Inicio: la misma pieza, compacta */
.sofia-q{padding:12px 0 0;border-top:1px solid var(--linea)}
.sol-ple:first-child .sofia-q{border-top:0;padding-top:0}
.sofia-q .sol-dos{margin-top:10px}
.sofia-q .sol-ok{margin-top:10px;justify-content:flex-start}
.sofia-q .sol-cuando .f,.sofia-q .sol-cuando .hr{font-size:var(--f-tarjeta)}
.sofia-q .sol-ico{width:40px;height:40px}
/* Respondidas: por día del evento, tocar abre el detalle ahí mismo */
.sol-g{margin-bottom:6px}
.sol-dia{display:flex;align-items:baseline;gap:10px;margin:8px 4px 10px;font-weight:400}
.sol-dia b{font-family:var(--t);font-size:var(--f-seccion);font-weight:600;color:var(--vino);line-height:1}
.sol-dia span{font-size:var(--f-nota);letter-spacing:.16em;text-transform:uppercase;color:var(--oro-letra);font-weight:600}
.sol-lista{display:flex;flex-direction:column;gap:10px}
.sol-r3{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-lg);box-shadow:var(--s-sm);overflow:hidden}
.sol-r3.ab{border-color:var(--vino-velo2)}
.sol-r3.pasada .sol-ico{opacity:.7}
.sol-r-b{display:flex;align-items:center;gap:10px;width:100%;padding:14px 12px 14px 16px;border:0;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;touch-action:manipulation;min-height:72px}
.sol-r-b:hover{background:var(--sup-alta)}
.sol-r-b .sol-cab{flex:1}
.sol-r-der{display:flex;align-items:center;gap:4px;flex:none;margin-left:auto}
.sol-r.cifra-r{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.sol-r.cifra-r b{font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino)}
.sol-r.cifra-r .iva{margin-top:3px}
.sol-r3 .flecha{width:32px;height:32px}
.sol-det{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;padding:12px 16px 16px;border-top:1px solid var(--linea);background:var(--sup-alta)}
.sol-det .dato small{display:block;font-size:var(--f-nota);letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.sol-det .dato b{display:block;font-weight:500;margin-top:2px}
.sol-det .dato.ancho{flex-basis:100%}
.sol-det .btn{margin-left:auto}
.sol-pasadas{margin-top:10px}
@media (max-width:899px){            /* teléfono: la respuesta va DEBAJO, alineada al texto; la flechita arriba a la derecha */
  .sol-r-b{flex-wrap:wrap;position:relative;padding-right:44px}
  .sol-r-b .sol-cab{flex:1 1 100%}
  .sol-r-der{margin-left:60px;margin-top:2px}
  .sol-r.cifra-r{align-items:flex-start}
  .sol-r-b>.flecha{position:absolute;right:8px;top:12px}
  .sol-det .btn{margin-left:0;width:100%}
}
/* computadora: la tarjeta en horizontal (qué a la izquierda, la decisión a la derecha); respondidas en dos columnas */
@media (min-width:900px){
  .sol3{flex-direction:row;align-items:stretch}
  .sol-izq{flex:1;padding:18px 22px;justify-content:center}
  .sol-acc{flex:none;width:340px;border-top:0;border-left:1px solid var(--linea);border-radius:0 var(--r-lg) var(--r-lg) 0;padding:18px 20px;justify-content:center}
  .sol3.cot .sol-acc{width:380px}
  .sol-cuando .f,.sol-cuando .hr{font-size:var(--f-seccion)}
  .sol-tx h4{font-size:var(--f-dato)}
  .sol-ico{width:52px;height:52px}
  .sol-ft{width:64px;height:64px}
  .sol-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
}
@media (prefers-reduced-motion:reduce){.sol-ple{transition:none}.ok-c,.ok-c path{animation:none}}
.cot-des:empty,.cot-des{min-height:16px}
.sol-acc{justify-content:center}

/* ═══ v4 · E-2026-1123 (revisión de Alan 27-oct ~22:45) · principio 28: vista rápida primero, ampliar para el detalle ═══
   COLOR: «no me gusta el crema-amarillo»: el fondo pasa a casi blanco con un tinte muy leve según la familia del proveedor (PROPUESTA
   dentro de estilo-romantic: floral = rubor · lugar = oro · persona = lila); las tarjetas en blanco y lo ampliado con el mismo tinte. */
.a{--tinte:var(--rubor);--fondo:color-mix(in oklab,#fff 95%,var(--tinte));--sup-t:color-mix(in oklab,#fff 97%,var(--tinte));background:var(--fondo)}
.a[data-fam="lugar"]{--tinte:var(--oro)}
.a[data-fam="persona"]{--tinte:var(--info)}
body{background:#fdfbfa}
.a .sol-acc,.a .sol-det,.a .enc-det,.a .dp-pie{background:var(--sup-t)}
.a .dch.pas,.a .cel.pasada{background:var(--fondo)}
/* la foto que se abre · el ícono cuando no hay foto (o no cargó) */
.ft-b{flex:none;padding:0;border:0;border-radius:var(--r-md);overflow:hidden;background:var(--crema2);cursor:zoom-in;touch-action:manipulation}
.ft-b img{display:block;width:100%;height:100%;object-fit:cover}
.ft-ico{flex:none;display:grid;place-items:center;border-radius:50%;background:var(--vino-velo);color:var(--vino);box-shadow:0 0 0 3px var(--sup),0 0 0 4px var(--oro-velo)}
.visor{position:fixed;inset:0;z-index:95;background:rgba(42,15,22,.86);display:grid;place-items:center;padding:24px;cursor:zoom-out;animation:velo-in var(--respiro) var(--ease)}
.visor img{max-width:100%;max-height:100%;border-radius:var(--r-md);box-shadow:var(--s-lg);object-fit:contain}
.visor-x{position:absolute;top:14px;right:14px}
@keyframes velo-in{from{opacity:0}to{opacity:1}}
/* el lugar abre el mapa; se ve la zona */
.lugar-l{display:inline-flex;align-items:flex-start;gap:5px;margin-top:3px;max-width:100%;padding:3px 0;border:0;background:none;font:inherit;font-size:var(--f-texto);color:var(--suave);text-decoration:none;text-align:left;cursor:pointer;min-height:28px}
.lugar-l svg{flex:none;margin-top:2px;color:var(--oro-letra)}
.lugar-l span{overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:var(--linea-f);text-underline-offset:3px}
.lugar-l .zona{text-decoration:none;color:var(--tinta);font-weight:500}
.lugar-l:hover span{color:var(--vino);text-decoration-color:var(--vino)}
.lugar-l.sin span{text-decoration:none}
/* la flecha GRANDE que amplía */
.amp{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--linea);background:var(--sup);color:var(--vino);display:grid;place-items:center;cursor:pointer;padding:0;touch-action:manipulation}
.amp svg{transform:rotate(90deg);transition:transform var(--respiro) var(--ease)}
.amp.ab{background:var(--vino);border-color:var(--vino);color:var(--sobre-vino)}
.amp.ab svg{transform:rotate(-90deg)}
/* tarjeta de encargo: vista rápida */
.encs-d{gap:10px;padding:0}
.enc-t{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-lg);overflow:hidden}
.enc-t.ab{border-color:var(--vino-velo2);box-shadow:var(--s-sm)}
.enc-t.pc{border-color:var(--peligro-velo)}
.enc-q{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ft cu amp" "ft der amp";align-items:center;gap:4px 12px;padding:12px;cursor:pointer}
.enc-q>.ft-b,.enc-q>.ft-ico{grid-area:ft;align-self:start}
.enc-q .cu{grid-area:cu;min-width:0}
.enc-q .der{grid-area:der;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.enc-q .amp{grid-area:amp}
.enc-q .h{display:block;font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino);line-height:1}
.enc-q .ti{display:block;font-size:var(--f-dato);font-weight:600;line-height:1.25;margin-top:3px;overflow-wrap:anywhere}
.enc-q .mt{font-family:var(--t);font-size:var(--f-tarjeta);font-weight:600;color:var(--vino-noche);line-height:1}
.enc-acc{padding:0 12px 12px}
.enc-det{display:flex;flex-direction:column;gap:2px;padding:6px 14px 14px;border-top:1px solid var(--linea)}
.fila-i{display:flex;align-items:center;gap:12px;min-height:44px;font-size:var(--f-texto)}
.fila-i>svg{flex:none;color:var(--oro-letra)}
.fila-i.ok>svg,.fila-i.ok{color:var(--exito)}
.fila-i .iva{display:inline;margin-left:6px}
.fila-i .rep-c{flex:1;max-width:none}
.fila-i .btn{margin-left:auto}
.det-acc{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.det-acc:empty{display:none}
@media (min-width:900px){
  .enc-q{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"ft cu der amp"}
  .enc-q .der{flex-direction:column;align-items:flex-end;gap:6px}
  .enc-q .h{font-size:var(--f-tarjeta)}
  .enc-acc{padding-left:80px}
}
.caja-dia{padding:12px}
.caja-dia .encs-d,.dp-cu .encs-d{display:flex;flex-direction:column}
/* calendario: sin lista abajo; el día que tocas, en su lugar (abajo en el teléfono, a la derecha en compu) */
.dia-p{position:static!important;transform:none!important;visibility:visible!important;max-height:none!important;border-radius:var(--r-lg)!important;border-bottom:1px solid var(--linea)!important;box-shadow:var(--s-sm)!important}
.dia-p::before{display:none!important}
.dp-cu{overflow:visible!important;padding:0 10px 10px}
.dp-cu .enc-q .h{font-size:var(--f-tarjeta)}
.velo-dia,.dp-x{display:none!important}
@media (min-width:1100px){.dia-p{position:sticky!important;top:22px}}
.cel .chips{display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.cel .chips::-webkit-scrollbar{display:none}
.cel .chips .e{flex:0 0 100%;scroll-snap-align:start}
@media (max-width:899px){
  /* teléfono: UNA señal — un punto por encargo (máx. 4), rojo si falta confirmar; sin los puntitos de cupo */
  .cel .cupo{display:none}
  .cel .chips{overflow:visible;gap:3px;flex-wrap:wrap;margin-top:2px}
  .cel .chips .e{flex:none;width:8px;height:8px;font-size:0;padding:0;border-radius:50%;background:var(--vino)}
  .cel .chips .e.pc{background:var(--peligro)}
  .cel .chips .e:nth-child(n+5){display:none}
  .cel.sel .chips .e{background:var(--sobre-vino)}
  .cel.sel .chips .e.pc{background:var(--rubor)}
}
/* solicitudes: misma flecha y foto */
.sol-top .amp{margin-left:4px}
.sol-top .vence{margin-left:auto}
.sol-r-b{cursor:pointer}
.sol-r-b .amp{margin-left:6px}
.sol-izq .enc-det{border-top:1px solid var(--linea);margin:2px -16px -12px;padding:6px 16px 10px;background:var(--sup-t)}
.sol-cant{display:block;font-size:var(--f-texto);color:var(--tinta);margin-top:2px}
/* palomita: compacta y centrada en su lugar */
.sol-ok{align-self:center;display:inline-flex;align-items:center;gap:10px;min-height:0;padding:8px 18px 8px 8px;border-radius:var(--r-pildora);background:var(--exito-velo)}
.sol-ok .ok-c{width:32px;height:32px}
.sol-ok b{font-size:var(--f-tarjeta)}
.sol-acc{align-items:stretch}
.sol-acc:has(.sol-ok){align-items:center;justify-content:center}
a.btn{text-decoration:none}
/* nunca tarjeta dentro de tarjeta (estilo-romantic §6): en el Inicio las tarjetas de encargo van sueltas; en el día del calendario, con línea */
.caja-dia{background:none;border:0;box-shadow:none;padding:0;min-height:0}
.caja-dia>.vacio{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-lg);box-shadow:var(--s-sm)}
.dia-p .enc-t{border:0;border-radius:0;border-top:1px solid var(--linea);box-shadow:none}
.dp-cu{padding:0}
.dia-p .enc-q,.dia-p .enc-det{padding-left:16px;padding-right:12px}
@media (min-width:900px){.cel .chips{flex-wrap:nowrap}}
/* en el panel del día (angosto) la tarjeta va siempre en su forma de teléfono */
.dia-p .enc-q{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ft cu amp" "ft der amp"}
.dia-p .enc-q .der{flex-direction:row;align-items:center}
.dia-p .enc-acc{padding-left:16px}
/* «por confirmar» se distingue por FORMA (aro) además de color: el vino y el rojo juntos casi no se separan en un punto de 8 px */
.leyenda i.ley-pc{background:transparent;box-shadow:inset 0 0 0 2px var(--peligro);border-radius:50%}
@media (max-width:899px){.cel .chips .e.pc{background:transparent;box-shadow:inset 0 0 0 2px var(--peligro)}.cel.sel .chips .e.pc{background:transparent;box-shadow:inset 0 0 0 2px var(--rubor)}}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   ESCALA v5 · E-2026-1123 (revisión de Alan 27-oct, noche) · infra/proyectos/proveedores-aliados/DISENO.md «Escala v5»
   «Mis ojos ven todo desproporcional: cómo se ve más grande una tarjeta que el título de solicitudes». Regla: el título de la página
   es SIEMPRE lo más grande; nada dentro de una tarjeta supera a su sección; el calendario y las tarjetas guardan proporción.
   Este bloque asigna el PAPEL de cada texto (va al final: manda sobre lo de arriba). Medidor: jerarquia_pantalla.mjs.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
/* 1 · página (36) — uno por pantalla, en el teléfono y en la computadora */
h1.titulo,.cab-s h1,.a-cab h1,.firmar .ti h1{margin:0;font-family:var(--t);font-weight:600;font-size:var(--f-pagina);line-height:1.05;color:var(--vino-noche);overflow-wrap:anywhere}
@media (max-width:900px){.cab-s h1,.a-cab h1,.firmar .ti h1{font-size:var(--f-pagina)}}
/* 2 · sección (28) — el día abierto, los grupos por día, la ficha, la cifra que manda en Cobros y en Puntos */
.dp-cab h3,.sol-dia b,.fx-ti,.cifra.grande b,.heroe-p .grande,.pagina-c h3,.hoja-t h3,.caja-t h3,.sub-cab h3,.camp-cab h3{font-size:var(--f-seccion)}
@media (max-width:900px){.cifra.grande b,.heroe-p .grande{font-size:var(--f-seccion)}}
/* 3 · tarjeta (20) — fecha y hora de la tarjeta, su monto, el título de una caja */
.sol-cuando .f,.sol-cuando .hr,.sofia-q .sol-cuando .f,.sofia-q .sol-cuando .hr,.enc-q .h,.dp-cu .enc-q .h,.enc-q .mt,.enc-d .h,.dp-cu .enc-d .h,
.cuando-g .f,.cuando-g .hr,.sol-pp b,.sol-r.cifra-r b,.cot-fila .monto input,.sol-ok b,.caja-cab h3,.caja-cab .total b,.col-d .caja-cab .total b,
.cifra b,.vacio b,.niv .cab-n b,.marco .tx b,.mov .v,.pts-n,.a-sig b,.dch b,.dia-cab b,.enc .h{font-size:var(--f-tarjeta)}
@media (min-width:900px){.sol-cuando .f,.sol-cuando .hr,.enc-q .h{font-size:var(--f-tarjeta)}}
/* 4 · dato (16) — QUÉ es: el nombre de la pieza o del evento; el botón que decide */
.enc-q .ti,.sol-tx h4,.sol-dos .btn,.fx-pie .btn,.marca-tx b,.a-barra .marca-tx b,.a-lado .marca-tx b{font-size:var(--f-dato)}
/* el calendario guarda proporción con las tarjetas: el número del día es dato (16) en el teléfono y tarjeta (20) en la computadora */
.cel .n b,.cel.pasada .n b{font-size:var(--f-dato)}
@media (min-width:901px){.cel .n b,.cel.pasada .n b{font-size:var(--f-tarjeta)}}
/* 5 · texto (14) y 6 · nota (12) ya salen del mapeo de arriba (todo font-size apunta a un token) */

/* ritmo: el mismo aire entre piezas en todo el panel */
.vista{gap:var(--e-5)}
@media (max-width:900px){.vista{gap:var(--e-4)}}
.encs-d,.sol-lista{gap:var(--e-3)}

/* COLOR v5 · Alan 27-oct: «ese amarillo lo dejaste en lo de "Por responder" y "Respondidas" … cambiarlo a un crema … para que no quede ese
   amarillo feo en los botones de "Cobros", "Pagar", "Por pagar", "Facturas" y "Pagos"». Las pestañas segmentadas y las fichas de apoyo van en
   CREMA NEUTRO (casi sin croma: #f3efeb, antes #f4ece2 que tiraba a amarillo). La cinta «Modo prueba» deja el relleno dorado. */
.seg{background:var(--crema2);border-color:var(--linea)}
.seg button{color:var(--suave)}
.seg button .c{color:var(--tenue)}
.cinta{background:var(--sup);border-color:var(--linea-f);color:var(--suave)}

/* AMPLIAR · el botón de dos flechas de «Diseña la experiencia» (.kc__ex de compartido/experiencia): círculo oscuro, flechas crema.
   36 px a la vista y 44 de toque. Tocarlo (o la tarjeta) abre la ficha; en la ficha el mismo círculo es la equis. */
.exp{flex:none;position:relative;width:36px;height:36px;padding:0;border-radius:50%;display:grid;place-items:center;color:var(--sobre-vino);
 background:rgba(42,15,22,.74);border:1px solid rgba(250,245,239,.3);cursor:pointer;touch-action:manipulation;
 transition:transform var(--caricia) var(--ease),background var(--caricia) var(--ease)}
.exp::after{content:"";position:absolute;inset:-4px}
.exp:hover{background:var(--vino)}
.exp:active{transform:scale(.9)}
.exp:focus-visible{outline:2px solid var(--oro-claro);outline-offset:2px}
.enc-q .exp{grid-area:amp;align-self:start}
.sol-top .exp{margin-left:var(--e-1)}
.sol-r-b .exp{margin-left:var(--e-2)}
.sol-izq[data-act]{cursor:pointer}
@media (max-width:899px){.sol-r-b>.exp{position:absolute;right:12px;top:12px}}

/* LA FICHA · la tarjeta en grande: hoja a pantalla completa en el teléfono, panel al centro en la computadora */
.ficha{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center}
.fx-velo{position:absolute;inset:0;background:rgba(42,15,22,.46)}
.fx-caja{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:var(--sup);overflow:hidden;transform-origin:0 0;box-shadow:var(--s-lg)}
@media (min-width:900px){.fx-caja{width:min(620px,92vw);height:auto;max-height:88vh;border-radius:var(--r-xl)}}
.fx-x{position:absolute;top:var(--e-3);right:var(--e-3);z-index:2}
.fx-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.fx-foto{display:block;width:100%;aspect-ratio:4/3;max-height:48vh;padding:0;border:0;background:var(--crema2);cursor:zoom-in}
.fx-foto img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:900px){.fx-foto{aspect-ratio:16/9}}
.fx-cu{display:flex;flex-direction:column;gap:var(--e-2);padding:var(--e-5) var(--e-5) var(--e-4)}
.fx-scroll>.fx-cu:first-child{padding-top:64px}
.fx-top{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap}
.fx-top .fx-resp{margin-left:auto}
.fx-cuando{display:flex;align-items:baseline;gap:var(--e-2);flex-wrap:wrap;line-height:1.1}
.fx-cuando .f,.fx-cuando .hr{font-family:var(--t);font-weight:600;font-size:var(--f-tarjeta);color:var(--vino-noche)}
.fx-cuando .hr{color:var(--vino)}
.fx-ti{margin:0;font-family:var(--t);font-weight:600;line-height:1.1;color:var(--vino-noche);overflow-wrap:anywhere}
.fx-monto{display:flex;align-items:baseline;gap:var(--e-2);flex-wrap:wrap;margin-top:var(--e-1)}
.fx-monto b{font-family:var(--t);font-weight:600;font-size:var(--f-tarjeta);color:var(--vino)}
.fx-filas{display:flex;flex-direction:column;margin-top:var(--e-2);border-top:1px solid var(--linea)}
.fx-filas .fila-i{border-bottom:1px solid var(--linea)}
.fx-filas .esq{margin-top:var(--e-2)}
.fx-pie{flex:none;display:flex;gap:var(--e-3);padding:var(--e-3) var(--e-5) calc(var(--e-3) + env(safe-area-inset-bottom));border-top:1px solid var(--linea);background:var(--sup-t,var(--sup))}
.fx-pie>.btn{flex:1;min-height:48px}
.fx-acc{flex:1;display:flex;flex-direction:column;gap:var(--e-3)}
.fx-acc .sol-dos .btn{min-height:48px}

/* CALENDARIO · se desliza de lado para cambiar de mes; «Hoy» junto a las flechas */
.mes{touch-action:pan-y}
.flechas{align-items:center;gap:var(--e-2)}
.hoy-b{min-height:44px;padding:0 var(--e-4)}
.hoy-b.es-hoy{background:transparent;color:var(--suave);border-color:var(--linea)}
@media (prefers-reduced-motion:reduce){.exp{transition:none}}

/* una rejilla y un margen (principio 2): las tarjetas del día en el Inicio van al mismo margen que el resto (antes, 20 px adentro) */
.a-bajo .caja-dia{padding:0}
/* el ámbar («en juego») se queda en la LETRA y su ícono; el fondo de la pastilla pasa a crema neutro: sin manchas amarillas */
:root{--aviso-velo:#f3efeb}
.p-aviso{box-shadow:inset 0 0 0 1px var(--linea)}