/*
 * La cuenta del comensal (cuenta.js). Archivo aparte para no engordar los
 * 390 KB de index.html; usa SUS variables (--tinta, --brasa-deep, …), así que
 * repinta con `marca.colores` igual que el resto.
 *
 * Plan 62 F0 (tema oscuro): la letra y los bordes van en --tinta, no en
 * --noche. En claro son el MISMO #14100e (Candela no cambia un píxel); en
 * oscuro --noche es el negro del nav y --tinta el crema del texto — con
 * --noche, el consentimiento del checkout salía negro sobre carbón. Lo que
 * acá era un claro FIJO (#fff, el verde del aviso, el rojo de peligro) tiene
 * su versión oscura al final del archivo. Pares medidos (WCAG, oscuro):
 * #ff8a70 sobre --superficie #1a1411 = 7.9:1; #14100e sobre #ff8a70 = 8.2:1;
 * #c8f0d6 sobre #10281a = 12.6:1; --linea-ui #8a7564 sobre --noche = 4.7:1.
 *
 * Contraste medido con aritmética WCAG (no a ojo), sobre los defaults:
 *  - botón: --sobre-brasa-deep sobre --brasa-deep. La tinta la calcula la marca
 *    (plan 62 F0, misma regla que contraste.ts del backend): en Candela es
 *    blanco sobre #c92e16 = 5.40:1; en una marca de primario claro (Ara:
 *    --brasa-deep #f9852b) es #14100e. Antes era `#fff` fijo: sobre el naranja
 *    de Ara daba ~2.4:1.
 *  - texto chico: --humo-texto #6b5a4f sobre --superficie = 6.46:1 (el --humo
 *    de `.campo label` mide 3.92:1: tampoco se copia).
 *  - error de campo: --brasa-deep sobre --superficie = 5.32:1, con «!» delante.
 *  - aviso de error: --aviso-texto sobre --aviso-fondo = 10.23:1.
 *  - aviso ok: #1d4d33 sobre #e6f2ea = 8.44:1.
 *  - botón del nav: --crema sobre --noche = 17.31:1.
 *  - borde de input y del botón secundario: --humo sobre blanco ≈ 3.9:1 (≥ 3:1
 *    que pide WCAG 1.4.11 para el contorno de un control).
 * Ningún estado vive sólo en el color: el aviso lleva «!»/«✓» + «No se pudo:»
 * / «Listo:», la dirección por defecto dice «Por defecto», el botón de borrar
 * dice qué borra.
 */
.cuenta-nav-btn{
  border:1.5px solid rgba(251,244,233,.55); background:transparent; color:var(--crema);
  border-radius:999px; padding:9px 15px; font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  line-height:1.2; white-space:nowrap;
}
.cuenta-nav-btn:hover{border-color:var(--crema); color:#fff}
.cuenta-nav-btn:focus-visible{outline:2px solid var(--oro-hi); outline-offset:2px}
@media(max-width:420px){ .cuenta-nav-btn{padding:8px 11px; font-size:13.5px} }

.cuenta-velo{
  display:none; position:fixed; inset:0; background:rgba(20,16,14,.55); z-index:112;
  align-items:flex-end; justify-content:center;
}
.cuenta-velo.abierto{display:flex}
@media(min-width:641px){ .cuenta-velo{align-items:center; padding:24px} }
.cuenta-caja{
  background:var(--superficie); color:var(--tinta); width:100%; max-width:460px; overflow-y:auto;
  max-height:88vh; max-height:min(88dvh, calc(var(--vv-alto, 100dvh) - 12px));
  border-radius:22px 22px 0 0; padding:20px 22px calc(22px + env(safe-area-inset-bottom,0px));
  overscroll-behavior:contain;
}
/* Hoja de abajo en teléfono: el último botón sube por encima del FAB de LIA
   (misma regla que `.ventana-caja`). */
@media(max-width:640px){ .cuenta-caja{padding-bottom:calc(var(--fab-zona, 74px) + 12px + env(safe-area-inset-bottom,0px))} }
@media(min-width:641px){ .cuenta-caja{border-radius:22px} }
.cuenta-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px}
.cuenta-head h3{font-family:var(--f-titulo); font-weight:900; font-size:22px; line-height:1.15; margin:0}
.cuenta-cerrar{border:0; background:var(--crema); color:var(--tinta); width:34px; height:34px; border-radius:50%; font-size:15px; cursor:pointer; flex:0 0 auto}

.cuenta-aviso{display:flex; gap:9px; align-items:flex-start; border-radius:10px; padding:10px 12px; font-size:13.5px; line-height:1.45; margin-bottom:12px; border:1px solid}
.cuenta-aviso[hidden]{display:none}
.cuenta-aviso--error{background:var(--aviso-fondo); border-color:var(--aviso-borde); color:var(--aviso-texto)}
.cuenta-aviso--ok{background:#e6f2ea; border-color:#9cc9ad; color:#1d4d33}
.cuenta-aviso-marca{flex:0 0 auto; width:20px; height:20px; border-radius:50%; border:1.5px solid currentColor; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px}

.cuenta-texto{font-size:14px; line-height:1.5; margin:0 0 12px; color:var(--tinta)}
.cuenta-texto--suave{color:var(--humo-texto); font-size:13px}
.cuenta-hola{font-size:17px; margin:0 0 2px}
.cuenta-campo{margin-bottom:12px}
.cuenta-campo label{display:block; font-size:13px; font-weight:700; color:var(--humo-texto); margin-bottom:5px}
.cuenta-campo input{
  width:100%; box-sizing:border-box; border:1px solid var(--humo); border-radius:9px; padding:10px 11px;
  font:inherit; font-size:16px; background:#fff; color:var(--tinta);
}
.cuenta-campo input[readonly]{background:var(--crema); color:var(--humo-texto)}
.cuenta-campo input:focus-visible{outline:2px solid var(--oro-hi); outline-offset:1px}
.cuenta-campo input[aria-invalid="true"]{border-color:var(--brasa-deep)}
.cuenta-ayuda{font-size:12.5px; color:var(--humo-texto); margin:4px 0 0; line-height:1.4}
.cuenta-opcional{font-weight:500; color:var(--humo-texto)}
.cuenta-error-campo{color:var(--brasa-deep); font-size:12.5px; font-weight:700; margin:4px 0 0; line-height:1.4}
.cuenta-error-campo::before{content:"! "}
.cuenta-error-campo[hidden]{display:none}
.cuenta-casilla{display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.45; margin:4px 0 10px; color:var(--tinta); cursor:pointer}
.cuenta-casilla input{flex:0 0 auto; width:18px; height:18px; margin:1px 0 0; accent-color:var(--brasa-deep)}
.cuenta-casilla a{color:var(--brasa-deep); font-weight:700}
.cuenta-version{color:var(--humo-texto); font-size:12px}

.cuenta-btn{
  display:block; width:100%; border:0; border-radius:999px; padding:13px 18px; margin:8px 0 4px;
  font:inherit; font-size:15px; font-weight:700; cursor:pointer; background:var(--brasa-deep); color:var(--sobre-brasa-deep);
}
.cuenta-btn:hover{filter:brightness(.94)}
.cuenta-btn:disabled{opacity:.7; cursor:progress}
.cuenta-btn:focus-visible{outline:2px solid var(--oro-hi); outline-offset:2px}
.cuenta-btn--secundario{background:transparent; color:var(--tinta); border:1.5px solid var(--humo)}
.cuenta-btn--peligro{background:#9e2412; color:#fff}
.cuenta-enlaces{display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin:8px 0 4px}
.cuenta-enlaces--fin{margin-top:14px}
.cuenta-enlace{border:0; background:none; padding:6px 0; font:inherit; font-size:13.5px; color:var(--brasa-deep); font-weight:700; text-decoration:underline; cursor:pointer; text-align:left}
.cuenta-enlace--peligro{color:#9e2412}
.cuenta-volver{border:0; background:none; color:var(--humo-texto); font:inherit; font-size:13.5px; cursor:pointer; padding:2px 0 10px; text-decoration:underline}
.cuenta-separador{display:flex; align-items:center; gap:10px; color:var(--humo-texto); font-size:12.5px; margin:14px 0 6px}
.cuenta-separador::before, .cuenta-separador::after{content:""; flex:1; height:1px; background:var(--linea)}

.cuenta-menu{display:flex; flex-direction:column; gap:8px; margin:14px 0 6px}
.cuenta-menu-item{
  display:block; width:100%; text-align:left; border:1.5px solid var(--linea); background:var(--superficie); color:var(--tinta);
  border-radius:12px; padding:12px 14px; font:inherit; cursor:pointer;
}
.cuenta-menu-item:hover{border-color:#cdbba5}
.cuenta-menu-item b{display:block; font-size:15px}
.cuenta-menu-item span{display:block; font-size:12.5px; color:var(--humo-texto); margin-top:2px}

.cuenta-lista{list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:8px}
.cuenta-dir, .cuenta-pedido{border:1.5px solid var(--linea); border-radius:12px; padding:11px 13px; background:var(--superficie)}
.cuenta-dir-top{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; justify-content:space-between}
.cuenta-dir-linea{font-size:13.5px; margin-top:3px; overflow-wrap:anywhere}
.cuenta-dir-notas{font-size:12.5px; color:var(--humo-texto); margin-top:3px; overflow-wrap:anywhere}
.cuenta-dir-acciones{display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:4px}
.cuenta-insignia{font-size:11.5px; font-weight:700; border:1px solid var(--tinta); color:var(--tinta); border-radius:999px; padding:2px 8px}
.cuenta-pedido-total{font-weight:800}
.cuenta-pedido-lineas{margin:6px 0 0; padding-left:18px; font-size:13px}
.cuenta-peligro{border:1.5px solid #9e2412; border-radius:12px; padding:10px 13px; margin-bottom:12px; font-size:13.5px; line-height:1.5}
.cuenta-peligro p{margin:0 0 6px}
.cuenta-peligro p:last-child{margin:0}

/* Lo que vive en el checkout (pintado por index.html con datos de cuenta.js). */
.checkout-cuenta{font-size:13px; color:var(--humo-texto); margin:0 0 10px; line-height:1.45}
.checkout-cuenta button{border:0; background:none; padding:0; font:inherit; color:var(--brasa-deep); font-weight:700; text-decoration:underline; cursor:pointer}
.checkout-dirs{border:0; margin:0 0 12px; padding:0}
.checkout-dirs legend{font-size:13px; font-weight:700; color:var(--humo-texto); margin-bottom:6px; padding:0}
.checkout-dir{display:flex; gap:9px; align-items:flex-start; border:1.5px solid var(--linea); border-radius:10px; padding:9px 11px; margin-bottom:6px; cursor:pointer; font-size:13.5px; line-height:1.4}
.checkout-dir input{flex:0 0 auto; margin:2px 0 0; accent-color:var(--brasa-deep)}
.checkout-dir:has(input:checked){border-color:var(--tinta)}
.checkout-dir small{display:block; color:var(--humo-texto); font-size:12.5px; overflow-wrap:anywhere}
.checkout-casilla{display:flex; gap:9px; align-items:flex-start; font-size:12.5px; line-height:1.45; margin:6px 0 10px; color:var(--tinta); cursor:pointer}
.checkout-casilla input{flex:0 0 auto; width:17px; height:17px; margin:1px 0 0; accent-color:var(--brasa-deep)}
.checkout-casilla .cuenta-version{font-size:11.5px}
.checkout-olvidar{border:0; background:none; padding:2px 0; font:inherit; font-size:12.5px; color:var(--brasa-deep); font-weight:700; text-decoration:underline; cursor:pointer; margin:0 0 10px}

/* ── Mis puntos y «Repetir» (cuenta.js) ──────────────────────────────────
 * Contraste (WCAG, sobre los defaults):
 *  - cifra del saldo: --noche sobre --crema ≈ 17:1.
 *  - puntos a favor: #1d4d33 sobre --superficie ≈ 9.5:1; en contra: --noche.
 *    El signo (+/−) va escrito: no vive sólo en el color.
 *  - motivo de «no entra»: --brasa-deep sobre --superficie = 5.32:1.
 *  - nota: --noche sobre --crema.                                          */
.cuenta-puntos-saldo{display:flex; align-items:baseline; gap:8px; background:var(--crema); border:1.5px solid var(--linea); border-radius:12px; padding:12px 14px; margin:0 0 12px; color:var(--tinta)}
.cuenta-puntos-num{font-family:var(--f-titulo); font-weight:900; font-size:30px; line-height:1}
.cuenta-puntos-canje{border-top:1px solid var(--linea); padding-top:10px; margin-top:4px}
.cuenta-nota{font-size:13px; line-height:1.5; margin:0 0 12px; padding:9px 12px; border-radius:10px; background:var(--crema); border:1px solid var(--linea); color:var(--tinta)}
.cuenta-nota--error{background:var(--aviso-fondo); border-color:var(--aviso-borde); color:var(--aviso-texto)}
.cuenta-subtitulo{font-size:14px; font-weight:800; margin:14px 0 8px; color:var(--tinta)}
.cuenta-mov, .cuenta-rep-linea{border:1.5px solid var(--linea); border-radius:12px; padding:10px 13px; background:var(--superficie)}
.cuenta-mov-pts{font-weight:800; white-space:nowrap}
.cuenta-mov-pts--mas{color:#1d4d33}
.cuenta-mov-pts--menos{color:var(--tinta)}
.cuenta-pedido--foco{border-color:var(--tinta); box-shadow:0 0 0 2px var(--oro-hi)}
.cuenta-btn--chico{width:auto; padding:8px 14px; font-size:13.5px; margin-top:10px}
.cuenta-rep-linea--no{background:var(--crema)}
.cuenta-rep-estado{font-size:12px; font-weight:700; border:1px solid var(--tinta); color:var(--tinta); border-radius:999px; padding:2px 8px; white-space:nowrap}
.cuenta-rep-motivo{font-size:12.5px; color:var(--brasa-deep); font-weight:700; margin-top:4px; line-height:1.4; overflow-wrap:anywhere}
.cuenta-rep-ya-no{color:var(--brasa-deep); font-weight:700}
.cuenta-rep-precio{font-size:12.5px; margin-top:4px; color:var(--tinta); line-height:1.4}
.cuenta-rep-total{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 10px; font-size:14px; margin:4px 0 2px; color:var(--tinta)}

/* ── «Usar mis puntos» en el checkout (index.html) ──────────────────────
 *  - botón «Usar el máximo»: --noche sobre blanco, borde --humo ≥ 3:1.
 *  - «No usamos tus puntos»: --aviso-texto sobre --aviso-fondo = 10.23:1, y
 *    su botón invertido (--aviso-fondo sobre --aviso-texto, mismo 10.23:1;
 *    el `.btn` de la página mide 3.97:1 y acá NO se usa su color).        */
.checkout-puntos{border:1.5px solid var(--linea); border-radius:12px; margin:4px 0 12px; padding:10px 12px 4px; background:var(--superficie)}
.checkout-puntos legend{font-size:13px; font-weight:800; color:var(--tinta); padding:0 4px}
.checkout-puntos .checkout-cuenta{color:var(--tinta)}
.checkout-puntos-fila{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 8px}
.checkout-puntos-fila input{flex:1 1 110px; min-width:0; max-width:180px; border:1px solid var(--humo); border-radius:9px; padding:9px 11px; font:inherit; font-size:14px}
.checkout-puntos-fila input:focus-visible{outline:2px solid var(--oro-hi)}
.checkout-puntos-max{border:1.5px solid var(--humo); background:#fff; color:var(--tinta); border-radius:9px; padding:8px 12px; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer}
.checkout-puntos-max:focus-visible{outline:2px solid var(--oro-hi); outline-offset:2px}
.carrito-canje{background:var(--aviso-fondo); border:1px solid var(--aviso-borde); color:var(--aviso-texto); border-radius:12px; padding:12px 14px; margin:0 0 12px; font-size:13.5px; line-height:1.5}
.carrito-canje b{display:block; font-size:14.5px; margin-bottom:4px}
.carrito-canje p{margin:0 0 8px}
.carrito-canje .btn{background:var(--aviso-texto); color:var(--aviso-fondo); width:100%}

/* ── Tema OSCURO (`data-tema="oscuro"`, plan 62 F0) ── lo que en claro era un
   color FIJO pensado para fondo claro. Sin el atributo (Candela) no aplica. */
:root[data-tema="oscuro"] .cuenta-nav-btn{border-color:var(--linea-ui); color:var(--tinta)}
:root[data-tema="oscuro"] .cuenta-nav-btn:hover{border-color:var(--tinta); color:#fff}
:root[data-tema="oscuro"] .cuenta-campo input,
:root[data-tema="oscuro"] .checkout-puntos-max{background:var(--crema); border-color:var(--linea-ui)}
:root[data-tema="oscuro"] .cuenta-aviso--ok{background:#10281a; border-color:#3f8a5c; color:#c8f0d6}
:root[data-tema="oscuro"] .cuenta-btn--peligro{background:#ff8a70; color:#14100e}
:root[data-tema="oscuro"] .cuenta-enlace--peligro{color:#ff8a70}
:root[data-tema="oscuro"] .cuenta-peligro{border-color:#ff8a70}
:root[data-tema="oscuro"] .cuenta-menu-item:hover{border-color:var(--linea-ui)}