/* Street Burguer · Imagen de la marca (se carga de último y manda sobre lo demás)
   Colores del logo: negro #141414, amarillo #F2C83C y blanco. Títulos en letra gruesa y condensada
   como el «STREET» del logo (Anton); el resto en Archivo.
   El fondo lleva salpicaduras de pintura amarillas y negras, como las del logo, y cada título de página
   lleva una mancha amarilla detrás (pedido de Pablo, 22 de octubre de 2026). */

:root {
  --negro: #141414;
  --amarillo: #F2C83C;
  --amarillo-txt: #7A5D00;   /* amarillo oscuro para leerse como enlace sobre blanco */
  --azul: #141414;           /* nombres heredados de Latina que otras hojas usan: azul → negro, rojo → amarillo */
  --rojo: #F2C83C;
  --gris-logo: #BDBCBC;
  --flour: #F6F5F0;
  --paper: #FFFFFF;
  --line: #DDDBD2;
  --line-2: #EBE9E1;
  --ink: #141414;
  --ink-2: #4A4942;
  --ink-3: #74726A;
  --basil: #141414;          /* acciones: negro del logo */
  --basil-2: #333333;
  --basil-weak: #FFF3C4;     /* amarillo pálido para lo elegido */
  --basil-txt: #7A5D00;
  --tomato: #C4161F;         /* faltantes y errores siguen en rojo */
  --tomato-weak: #FCE4E5;
  --ok: #1E7A4C;
  --ok-weak: #E1F2E8;
  --ok-txt: #17663F;
  --bar: #141414;
  --bar-hi: #F2C83C;
  --bar-lo: #D6D4CC;
  --barra: #141414;
  --barra-txt: #FFFFFF;
  --titulo: #141414;
  --sel: #141414;
  --serif: 'Anton', 'Archivo', Impact, 'Arial Narrow Bold', sans-serif;
  --sombra: 0 1px 2px rgba(20, 20, 20, 0.06), 0 6px 20px rgba(20, 20, 20, 0.07);
  --sombra-cinta: 0 -8px 24px rgba(20, 20, 20, 0.12);
  --fondo-opacidad: 0.16;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --flour: #121212; --paper: #1C1C1B; --line: #35342F; --line-2: #2A2926;
    --ink: #F2F1EC; --ink-2: #C5C3BA; --ink-3: #93918A;
    --basil: #F2C83C; --basil-2: #FFD95A; --basil-weak: #3A3112; --basil-txt: #F2C83C;
    --amarillo-txt: #F2C83C;
    --tomato: #FF6B6E; --tomato-weak: #3D161B;
    --ok: #4CC38A; --ok-weak: #12301F; --ok-txt: #74D9A6;
    --bar: #F2C83C; --bar-hi: #FFFFFF; --bar-lo: #4A4840;
    --barra: #0A0A0A; --barra-txt: #FFFFFF;
    --titulo: #F2F1EC; --sel: #F2C83C;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25);
    --sombra-cinta: 0 -8px 24px rgba(0, 0, 0, 0.45);
    --fondo-opacidad: 0.1;
  }
}
:root[data-theme="dark"] {
  --flour: #121212; --paper: #1C1C1B; --line: #35342F; --line-2: #2A2926;
  --ink: #F2F1EC; --ink-2: #C5C3BA; --ink-3: #93918A;
  --basil: #F2C83C; --basil-2: #FFD95A; --basil-weak: #3A3112; --basil-txt: #F2C83C;
  --amarillo-txt: #F2C83C;
  --tomato: #FF6B6E; --tomato-weak: #3D161B;
  --ok: #4CC38A; --ok-weak: #12301F; --ok-txt: #74D9A6;
  --bar: #F2C83C; --bar-hi: #FFFFFF; --bar-lo: #4A4840;
  --barra: #0A0A0A; --barra-txt: #FFFFFF;
  --titulo: #F2F1EC; --sel: #F2C83C;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25);
  --sombra-cinta: 0 -8px 24px rgba(0, 0, 0, 0.45);
  --fondo-opacidad: 0.1;
}
/* En oscuro los botones son amarillos: letras negras */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primario,
  :root:not([data-theme="light"]) .chip[aria-checked="true"], :root:not([data-theme="light"]) .chip[aria-pressed="true"],
  :root:not([data-theme="light"]) .opcion input:checked + span { color: #141414; }
}
:root[data-theme="dark"] .btn-primario, :root[data-theme="dark"] .chip[aria-checked="true"], :root[data-theme="dark"] .chip[aria-pressed="true"],
:root[data-theme="dark"] .opcion input:checked + span { color: #141414; }

/* ---------- Fondo con salpicaduras de pintura ---------- */
body { background: var(--flour); }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url(../img/fondo.svg) 0 0 / 520px 520px repeat;
  opacity: var(--fondo-opacidad);
}

/* ---------- Títulos como el «STREET» del logo ---------- */
h1, .titulo-pagina { font-family: var(--serif); font-weight: 400; font-stretch: 100%; letter-spacing: 0.03em; text-transform: uppercase; color: var(--titulo); }
h1 { font-size: 1.75rem; line-height: 1.15; }
/* la mancha amarilla detrás del título de cada página */
.titulo-pagina, .ini-saludo h1, .fac-cab h1 { position: relative; isolation: isolate; }
.titulo-pagina::before, .ini-saludo h1::before, .fac-cab h1::before {
  content: ''; position: absolute; z-index: -1; left: -22px; top: -16px; width: 120px; height: 60px; pointer-events: none;
  background: url(../img/mancha.svg) 0 0 / 120px 60px no-repeat; opacity: 0.85;
}
.hero-frase { font-family: var(--ff); font-weight: 700; letter-spacing: -0.01em; line-height: 1.38; }
.hero-frase .cifra { font-family: var(--ff); }
.panel-cab h2, .dialogo h2, .cam-estado h2, .inv-detalle-cab h2, .fac-cab h1 { font-family: var(--serif); font-weight: 400; font-stretch: 100%; letter-spacing: 0.03em; text-transform: uppercase; }
/* subtítulos de los bloques: rayita amarilla arriba, como la franja del logo */
.bloque > h2:first-child, .menu-cat-cab h2, .bloque > .titulo-fila:first-child h2 { position: relative; padding-top: 10px; }
.bloque > h2:first-child::before, .menu-cat-cab h2::before, .bloque > .titulo-fila:first-child h2::before {
  content: ''; position: absolute; left: 0; top: 0; width: 44px; height: 4px; border-radius: 2px; background: var(--amarillo);
}

/* ---------- Barra de arriba: negra con la insignia y el nombre ---------- */
.barra { background: var(--barra); border-bottom: 0; color: var(--barra-txt); padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 8px; box-shadow: 0 3px 0 var(--amarillo); }
.marca { gap: 10px; text-decoration: none; flex: none; border-radius: 999px; display: flex; align-items: center; }
.marca-logo { display: block; height: 42px; width: 42px; border-radius: 50%; }
.marca-nombre { font-family: var(--serif); font-size: 1.25rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; line-height: 1; white-space: nowrap; }
.marca-nombre b { color: var(--amarillo); font-weight: 400; }
.cuenta-nombre { color: rgba(255, 255, 255, 0.82); text-decoration-color: rgba(255, 255, 255, 0.35); }
.barra .btn-texto { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }
.barra :focus-visible { outline-color: var(--amarillo); }
@media (min-width: 761px) {
  .nav-item { color: rgba(255, 255, 255, 0.78); }
  .nav-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
  .nav-item[aria-current="page"] { background: rgba(255, 255, 255, 0.1); color: var(--amarillo); box-shadow: inset 0 -3px 0 var(--amarillo); }
  .nav-solo-movil { display: none; }
  .barra-compacta .marca-nombre { display: none; }
}
@media (max-width: 760px) {
  .marca-logo { height: 34px; width: 34px; }
  .marca-nombre { font-size: 1.05rem; }
  .barra { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
  .nav { background: var(--paper); box-shadow: 0 -6px 18px rgba(20, 20, 20, 0.08); }
  .nav-item { color: var(--ink-2); position: relative; }
  .nav-item[aria-current="page"] { background: var(--basil-weak); color: var(--ink); }
  .nav-item[aria-current="page"]::before { content: ''; position: absolute; top: -6px; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--amarillo); }
}
.hoja-lista .nav-item { color: var(--ink-2); }
.hoja-lista .nav-item[aria-current="page"] { background: var(--basil-weak); color: var(--ink); box-shadow: none; }
.hoja-lista .nav-item::before { display: none; }
.hoja-lista .nav-solo-movil { display: flex; }

/* ---------- Superficies ---------- */
.bloque, fieldset, .meta, .saldo, .panel, .pagina > .tabla-scroll, .cam-lista, .inv-lista { box-shadow: var(--sombra); }
.bloque, fieldset, .meta, .saldo { border-color: var(--line-2); }
.btn-primario { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12); }
.chip[aria-checked="true"], .chip[aria-pressed="true"], .opcion input:checked + span { background: var(--sel); border-color: var(--sel); color: #fff; }
.pestana[aria-current="page"] { border-bottom-color: var(--amarillo); }
@media (max-width: 760px) { .pestana[aria-current="page"] { border-color: var(--amarillo); } }

/* ---------- Lo que está bien se ve en verde ---------- */
.registro-ok { background: var(--ok-weak); color: var(--ok-txt); }
.cuadre.cuadra .cuadre-msg, .cuadre.cuadra .cuadre-dif { color: var(--ok-txt); }
.cifra-bien { color: var(--ok-txt); }
.etiqueta-revisado { background: var(--ok-weak); color: var(--ok-txt); }
.mov-entrada .mov-monto { color: var(--ok-txt); }
.fac-entra { color: var(--ok-txt); }
.inv-fila.inv-ok { background: color-mix(in srgb, var(--ok-weak) 60%, var(--paper)); }
.inv-total, .inv-listo { color: var(--ok-txt); }
.inv-cinta.cuadra .medidor > span { background: var(--ok); }
.inv-c-ok button { background: var(--ok-weak); color: var(--ok-txt); }
.rt-parada.rt-hecha { border-left-color: var(--ok); }
.rt-hecha .rt-parada-num { background: var(--ok); }
.rt-ok { background: color-mix(in srgb, var(--ok-weak) 75%, transparent); }
.rt-ok .rt-check { background: var(--ok); border-color: var(--ok); }

/* ---------- Entrada: negro con salpicaduras y la insignia ---------- */
.login { position: relative; isolation: isolate; background: var(--negro); }
.login::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.35;
  background: url(../img/fondo.svg) 0 0 / 520px 520px repeat;
}
.login::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--amarillo); }
.login-caja { background: var(--paper); border-radius: 20px; padding: 28px 24px 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); gap: 22px; }
.login-marca { justify-items: center; text-align: center; gap: 12px; }
.login-logo { width: min(60%, 180px); height: auto; display: block; border-radius: 50%; }
.login-marca p { color: var(--ink-2); max-width: 30ch; }
.login-form .btn-primario { min-height: 50px; font-size: 1.0625rem; margin-top: 4px; }

/* ---------- Tarjeta de la sucursal sin foto: la insignia de Street Burguer en vez del óvalo de Latina ---------- */
.suc-media::before { background: url(../img/fondo.svg) 0 0 / 260px 260px repeat; opacity: 0.35; -webkit-mask: none; mask: none; }
.suc-ovalo { width: 42%; aspect-ratio: 1; border-radius: 50%; background: url(../img/logo.webp) center / cover no-repeat; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.suc-ovalo span { display: none; }
.suc-ovalo-apertura .suc-ovalo { outline: 1.4cqi dashed var(--amarillo); outline-offset: 2cqi; }
.suc-camara { color: var(--negro); }