/* =====================================================================
   OddsCRM · sistema de diseño "soft UI"
   Superficies de grafito con relieve suave (sombra clara arriba a la
   izquierda, oscura abajo a la derecha), casillas hundidas, y color sólo en
   lo que importa: degradado azul → magenta para lo activo, cian para lo que
   suma o confirma, fuego (rojo → naranja) para lo que resta o alerta.
   Tres kits de color, cada uno con tonalidad oscura y blanca (ver abajo).
   ===================================================================== */

/* Cada módulo trae sus piezas propias en su archivo; lo común vive aquí abajo. */
@import url("modulos/sala.css");
@import url("modulos/ingresos.css");
@import url("modulos/clientes.css");
@import url("modulos/score.css");
@import url("modulos/control.css");
@import url("modulos/sistema.css");
@import url("modulos/maquinas.css");
@import url("modulos/estadistica.css");
@import url("modulos/administracion.css");
@import url("modulos/comunicacion.css");
@import url("modulos/cecom.css");
@import url("modulos/seguridad.css");
@import url("modulos/sportbook.css");

@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-display: swap; src: url("../fonts/montserrat-latin-800-normal.woff2") format("woff2"); }

/* ---------------------------------------------------------------------
   Los tres juegos de color («kits») salen de los vectores de la carpeta
   TEMAS PARA EL PROGRAMA: los colores son los del archivo, no aproximados.

     grafito : gris grafito  #292C31 · azul #005BFF → violeta → magenta #DF5BF3
     fuego   : blanco cálido #EFEDED · rojo #F72A2A → naranja #FE9F3D
     noche   : azul noche    #192033 · rojo #F72A2A → naranja #FE9F3D

   Cada kit tiene su tonalidad oscura y su tonalidad blanca. Se eligen con
   html[data-kit] y html[data-tono], y se recuerdan en cada PC.
   --------------------------------------------------------------------- */
:root {
    /* --- Acentos del kit grafito (por defecto) --- */
    --grad-1: #005BFF;
    --grad-2: #DF5BF3;
    --violeta: #9E5BF7;
    --degradado: linear-gradient(90deg, #005BFF 0%, #9E5BF7 55%, #DF5BF3 100%);
    --degradado-diag: linear-gradient(135deg, #005BFF 0%, #9E5BF7 55%, #DF5BF3 100%);
    --cian: #21B5F0;
    --c1: #48E2F6; --c2: #1478EE;
    --a1: #005BFF; --a2: #9E5BF7; --a3: #DF5BF3;
    --f1: #FE9F3D; --f2: #F72A2A;
    --g-cian: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
    --rosa: #F0457A;
    --g-fuego: linear-gradient(135deg, var(--f1) 0%, var(--f2) 100%);
    --brillo-azul: 0 10px 24px rgba(120, 90, 247, var(--brillo));
    --brillo-cian: 0 8px 20px rgba(20, 120, 238, var(--brillo));
    --brillo-fuego: 0 8px 20px rgba(247, 42, 42, var(--brillo));

    /* --- Superficies: grafito oscuro --- */
    --fondo: #292C31;
    --sup: #2B2E34;
    --tarjeta-arriba: var(--sup);
    --tarjeta-abajo: var(--sup);
    --elevado: #31353C;
    --elevado-2: #383C44;
    --hundido: #24272C;
    --linea: #393D45;
    --linea-fuerte: #474C56;
    --pista: #202328;
    --sombra-o: #1B1D21;
    --sombra-c: #373B42;
    --brillo: 0.55;
    --texto: #FFFFFF;
    --texto-2: #B7BCC7;
    --texto-3: #7C8898;

    /* Relieve */
    --alzado: 9px 9px 18px var(--sombra-o), -9px -9px 18px var(--sombra-c);
    --alzado-s: 5px 5px 10px var(--sombra-o), -5px -5px 10px var(--sombra-c);
    --en-hueco: inset 4px 4px 9px var(--sombra-o), inset -4px -4px 9px var(--sombra-c);

    /* Semánticos (iguales en los tres kits) */
    --verde: #1FC08A;
    --verde-texto: #3FDCA0;
    --verde-suave: rgba(31, 192, 138, 0.14);
    --azul-texto: #58C4F6;
    --azul-punto: #21B5F0;
    --azul-suave: rgba(33, 181, 240, 0.14);
    --naranja: #FE9F3D;
    --naranja-suave: rgba(254, 159, 61, 0.14);
    --rojo: #F0457A;
    --rojo-suave: rgba(240, 69, 122, 0.14);

    --r-tarjeta: 30px;
    --r-fila: 18px;
    --r-cuadro: 14px;
    --r-pastilla: 999px;
    --sombra: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* --- Kit fuego: acentos rojo → naranja, superficies oscuras --- */
:root[data-kit="fuego"] {
    --c1: #FE9F3D; --c2: #FF6B45;
    --a1: #F72A2A; --a2: #FF7146; --a3: #FE9F3D;
    --f1: #FF7146; --f2: #F72A2A;
    --grad-1: #F72A2A;
    --grad-2: #FE9F3D;
    --violeta: #FF7146;
    --degradado: linear-gradient(90deg, #F72A2A 0%, #FF7146 55%, #FE9F3D 100%);
    --degradado-diag: linear-gradient(135deg, #F72A2A 0%, #FF7146 55%, #FE9F3D 100%);
    --cian: #FF8542;
    --g-cian: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
    --rosa: #F72A2A;
    --g-fuego: linear-gradient(135deg, var(--f1) 0%, var(--f2) 100%);
    --brillo-azul: 0 10px 24px rgba(247, 70, 42, var(--brillo));
    --brillo-cian: 0 8px 20px rgba(255, 133, 66, var(--brillo));
    --brillo-fuego: 0 8px 20px rgba(247, 42, 42, var(--brillo));
    --azul-texto: #FF9141;
    --azul-punto: #FF8542;
    --azul-suave: rgba(255, 133, 66, 0.14);
    --rojo: #F72A2A;
    --rojo-suave: rgba(247, 42, 42, 0.14);

    --fondo: #22252C;
    --sup: #24272E;
    --elevado: #2B2F36;
    --elevado-2: #32363F;
    --hundido: #1E2128;
    --linea: #33373F;
    --linea-fuerte: #434751;
    --pista: #1B1E24;
    --sombra-o: #15171C;
    --sombra-c: #30343C;
    --texto-3: #8A8F99;
}

/* --- Kit noche: azul noche con rojo y naranja --- */
:root[data-kit="noche"] {
    --c1: #FE9F3D; --c2: #FF6B45;
    --a1: #F72A2A; --a2: #FF7146; --a3: #FE9F3D;
    --f1: #FF7146; --f2: #F72A2A;
    --grad-1: #F72A2A;
    --grad-2: #FE9F3D;
    --violeta: #FF7146;
    --degradado: linear-gradient(90deg, #F72A2A 0%, #FF7146 55%, #FE9F3D 100%);
    --degradado-diag: linear-gradient(135deg, #F72A2A 0%, #FF7146 55%, #FE9F3D 100%);
    --cian: #FF8542;
    --g-cian: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
    --rosa: #F72A2A;
    --g-fuego: linear-gradient(135deg, var(--f1) 0%, var(--f2) 100%);
    --brillo-azul: 0 10px 24px rgba(247, 70, 42, var(--brillo));
    --brillo-cian: 0 8px 20px rgba(255, 133, 66, var(--brillo));
    --brillo-fuego: 0 8px 20px rgba(247, 42, 42, var(--brillo));
    --azul-texto: #FF9141;
    --azul-punto: #FF8542;
    --azul-suave: rgba(255, 133, 66, 0.14);
    --rojo: #F72A2A;
    --rojo-suave: rgba(247, 42, 42, 0.14);

    --fondo: #192033;
    --sup: #1B2236;
    --elevado: #222A42;
    --elevado-2: #2A3350;
    --hundido: #151B2B;
    --linea: #2A3248;
    --linea-fuerte: #3A4462;
    --pista: #131828;
    --sombra-o: #0F1422;
    --sombra-c: #242D46;
    --texto-2: #AEB7CC;
    --texto-3: #7C8899;
}

/* --- Tonalidad blanca de cada kit --- */
:root[data-tono="claro"] {
    --fondo: #E6E8EE;
    --sup: #E6E8EE;
    --elevado: #EDEFF3;
    --elevado-2: #F4F5F8;
    --hundido: #DCDFE6;
    --linea: #CDD1DA;
    --linea-fuerte: #B9BECA;
    --pista: #D3D7DF;
    --sombra-o: #BEC3CE;
    --sombra-c: #FFFFFF;
    --brillo: 0.32;
    --texto: #23262D;
    --texto-2: #535967;
    --texto-3: #7C8898;
    --verde-texto: #0E9F6E;
    --azul-texto: #0C7FBE;
    --sombra: 0 24px 60px rgba(80, 90, 110, 0.28);
}
:root[data-kit="fuego"][data-tono="claro"] {
    --fondo: #EFEDED;
    --sup: #EFEDED;
    --elevado: #F4F2F2;
    --elevado-2: #FAF8F8;
    --hundido: #E5DCDC;
    --linea: #DCD5D5;
    --linea-fuerte: #C4BCBC;
    --pista: #E2DADA;
    --sombra-o: #A9A7A7;
    --sombra-c: #FFFFFF;
    --brillo: 0.3;
    --texto: #22252C;
    --texto-2: #5A5757;
    --texto-3: #8A8686;
    --azul-texto: #D2551F;
    --verde-texto: #0E9F6E;
    --sombra: 0 24px 60px rgba(120, 100, 100, 0.26);
}
:root[data-kit="noche"][data-tono="claro"] {
    --fondo: #EDF0F7;
    --sup: #EDF0F7;
    --elevado: #F3F5FA;
    --elevado-2: #F9FAFD;
    --hundido: #E1E6F1;
    --linea: #D2D8E6;
    --linea-fuerte: #B9C1D4;
    --pista: #D8DEEC;
    --sombra-o: #BFC6D6;
    --sombra-c: #FFFFFF;
    --brillo: 0.3;
    --texto: #192033;
    --texto-2: #4E5871;
    --texto-3: #7C8899;
    --azul-texto: #D2551F;
    --verde-texto: #0E9F6E;
    --sombra: 0 24px 60px rgba(60, 75, 110, 0.26);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    transition: background .25s, color .25s;
    height: 100%;
    background: var(--fondo);
    color: var(--texto);
    font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--azul-texto); text-decoration: none; }
a:hover { color: var(--grad-2); }
:focus-visible { outline: 2px solid var(--grad-1); outline-offset: 2px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--elevado-2); border-radius: 10px; border: 2px solid var(--fondo); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------------
   Marco de la aplicación
   --------------------------------------------------------------------- */
.app { display: flex; gap: 22px; height: 100vh; padding: 10px 20px 20px; }
.contenido { flex: 1; min-width: 0; overflow-y: auto; padding: 4px 6px 24px 2px; display: flex; flex-direction: column; gap: 22px; }

.rail {
    width: 262px; flex-shrink: 0; border-radius: var(--r-tarjeta); padding: 14px 16px 16px;
    background: var(--sup); box-shadow: var(--alzado);
    display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
}

.rail-item {
    display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: var(--r-fila);
    color: var(--texto-2); font-size: 14px; border: none; background: none; width: 100%; text-align: left;
}
.rail-item:hover { color: var(--texto); }
.rail-item:hover .ico { box-shadow: var(--alzado-s); color: var(--texto); }
.rail-item .ico {
    width: 38px; height: 38px; border-radius: 50%; background: var(--sup);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--texto-3); transition: box-shadow .2s, color .2s;
}
.rail-item.activo { background: var(--degradado); color: #fff; font-weight: 600; box-shadow: var(--brillo-azul); }
.rail-item.activo .ico { background: rgba(255,255,255,.18); color: #fff; box-shadow: none; }
.rail-item.activo .flecha { color: rgba(255,255,255,.8); }
.rail-item .flecha { margin-left: auto; color: var(--texto-3); transition: transform .2s; }
.rail-item.abierto .flecha { transform: rotate(90deg); }
.rail-sub { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 8px 50px; }
.rail-sub a { padding: 8px 14px; border-radius: 14px; color: var(--texto-3); font-size: 14px; white-space: nowrap; }
.rail-sub a:hover { color: var(--texto); }
.rail-sub a.activo { color: var(--texto); font-weight: 600; box-shadow: var(--en-hueco); }

.rail-usuario {
    margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px;
    background: var(--sup); box-shadow: var(--alzado-s); border: none; width: 100%; text-align: left; position: relative;
}
.avatar {
    position: relative; width: 42px; height: 42px; border-radius: 50%; background: var(--degradado-diag);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.avatar::after {
    content: ""; position: absolute; right: -1px; top: -1px; width: 11px; height: 11px; border-radius: 50%;
    background: var(--verde); border: 2px solid var(--sup);
}
.menu-usuario {
    position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; padding: 8px; border-radius: 18px;
    background: var(--sup); box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 2px; z-index: 20;
}
.menu-usuario button, .menu-usuario .fila-escala {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: none;
    background: none; text-align: left; font-size: 14px; color: var(--texto-2);
}
.menu-usuario button:hover { box-shadow: var(--en-hueco); color: var(--texto); }

/* ---------------------------------------------------------------------
   Cabecera de pantalla
   --------------------------------------------------------------------- */
.cabecera { display: flex; align-items: center; gap: 14px; padding: 4px 4px 0; flex-wrap: wrap; }
.cabecera .titulos { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 220px; }
.cabecera .migas { font-size: 14px; color: var(--texto-3); }
.cabecera h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.01em; }

.selector-fecha { position: relative; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: var(--r-pastilla); background: var(--hundido); border: 1px solid var(--linea); }
.selector-fecha .sf-paso { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--elevado); display: grid; place-items: center; }
.selector-fecha .sf-paso:hover:not(:disabled) { background: var(--elevado-2); }
.selector-fecha .sf-paso:disabled { opacity: .35; }
.fecha-elegida { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px; border: none; border-radius: var(--r-pastilla);
    background: transparent; font-size: 15px; font-weight: 500; }
.fecha-elegida svg { color: var(--azul-texto); }
.fecha-elegida:hover, .fecha-elegida.abierto { background: var(--elevado); }

/* En un formulario: sólo la pastilla, a la altura de las demás casillas. */
.selector-fecha.compacto { padding: 0; border: 1.5px solid transparent; background: var(--hundido); }
.selector-fecha.compacto .fecha-elegida { height: 44px; padding: 0 14px; border-radius: var(--r-cuadro); font-size: 15px; }
.selector-fecha.compacto .fecha-elegida span { font-variant-numeric: tabular-nums; }
.selector-fecha.compacto:focus-within { border-color: var(--cian); }
/* Pegado al borde izquierdo de su columna, no centrado bajo el botón. */
.selector-fecha.compacto .calendario { left: 0; transform: none; }

.calendario-fondo { position: fixed; inset: 0; z-index: 40; }
.calendario { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 41; width: 330px;
    padding: 16px; border-radius: 22px; background: linear-gradient(180deg, var(--tarjeta-arriba), var(--tarjeta-abajo));
    border: 1px solid var(--linea-fuerte); box-shadow: var(--sombra); animation: aparece .14s ease-out; }
@keyframes aparece { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.calendario-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.calendario-cab b { font-size: 16px; font-weight: 600; }
.calendario-cab button { width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--elevado); display: grid; place-items: center; }
.calendario-cab button:hover { background: var(--elevado-2); }
.calendario-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendario-dias .sem { text-align: center; font-size: 12px; font-weight: 600; color: var(--texto-3); padding: 4px 0 6px; }
.calendario-dias button { height: 38px; border: none; border-radius: 12px; background: transparent; font-size: 14px; font-weight: 500; }
.calendario-dias button:hover:not(:disabled) { background: var(--elevado-2); }
.calendario-dias button.fuera { color: var(--texto-3); opacity: .55; }
.calendario-dias button.hoy { box-shadow: inset 0 0 0 1.5px var(--grad-1); }
.calendario-dias button.elegido { background: var(--degradado-diag); color: #fff; box-shadow: none; opacity: 1; }
.calendario-dias button:disabled { opacity: .2; }
.calendario-pie { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea); }
.calendario-pie .btn { padding: 8px 14px; font-size: 14px; }

/* ---------------------------------------------------------------------
   Tarjetas
   --------------------------------------------------------------------- */
.tarjeta {
    border-radius: var(--r-tarjeta); padding: 24px 26px;
    background: linear-gradient(160deg, var(--tarjeta-arriba) 0%, var(--tarjeta-abajo) 100%);
    display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.tarjeta-cab { display: flex; align-items: center; gap: 12px; }
.tarjeta-cab h2 { margin: 0; flex: 1; font-size: 20px; font-weight: 600; }
.tarjeta-cab .total { font-size: 20px; font-weight: 700; white-space: nowrap; }
.tarjeta-cab .pastilla { flex-shrink: 0; }
.tarjeta-cab .etiqueta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etiqueta { font-size: 15px; color: var(--texto-2); }
.nota { font-size: 13px; color: var(--texto-3); }
.grupo { font-size: 13px; color: var(--texto-3); padding-top: 4px; }

.rejilla-3 { display: grid; grid-template-columns: 1.25fr 1.25fr 1.5fr; gap: 22px; }
.rejilla-fila2 { display: grid; grid-template-columns: 1.55fr 1fr 1fr; gap: 22px; align-items: start; }
.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

@media (max-width: 1300px) {
    .rejilla-3, .rejilla-fila2 { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------
   Cifras
   --------------------------------------------------------------------- */
.cifra-xl { display: flex; align-items: flex-start; gap: 4px; line-height: 1; }
.cifra-xl .moneda { font-size: 22px; font-weight: 600; padding-top: 8px; }
.cifra-xl .valor { font-size: clamp(34px, 3.3vw, 56px); font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
/*
   Cifras largas. Un número de seis dígitos con decimales y signo ocupa el
   doble que uno de tres, y a tamaño fijo se sale de la tarjeta. Cada tramo
   baja el tamaño lo justo para que siga entrando sin perder presencia. La
   clase la pone F.Tam() contando los caracteres del número ya formateado.
*/
.cifra-xl .valor.larga { font-size: clamp(28px, 2.7vw, 44px); }
.cifra-xl .valor.mas-larga { font-size: clamp(24px, 2.3vw, 36px); }
.cifra-xl .valor.muy-larga { font-size: clamp(18px, 1.7vw, 26px); }
.cifra-xl .valor.enorme { font-size: clamp(15px, 1.4vw, 21px); }
/*
   A propósito no se recorta nunca con puntos suspensivos: una cifra de
   dinero a medias se lee mal y se cree bien. Antes que cortarla, se achica.
*/
.cifra-xl { min-width: 0; }
.cifra { display: flex; flex-direction: column; }
.cifra .valor { font-size: 24px; font-weight: 700; white-space: nowrap; }
.cifra .valor.l { font-size: 30px; }
.cifra .rotulo { font-size: 13px; color: var(--texto-3); }
.pos { color: var(--verde-texto); }
.neg { color: var(--rojo); }

/* ---------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px;
    border-radius: var(--r-pastilla); border: none; font-size: 14px; font-weight: 600; white-space: nowrap;
    transition: filter .15s, transform .1s, background .15s;
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; }
.btn-grad { background: var(--degradado); color: #fff; }
.btn-grad:hover:not(:disabled) { filter: brightness(1.12); }
.btn-suave { background: var(--elevado); color: var(--texto); font-weight: 500; }
.btn-suave:hover:not(:disabled) { background: var(--elevado-2); }
.btn-verde { background: var(--verde); color: #fff; }
.btn-verde:hover:not(:disabled) { filter: brightness(1.1); }
.btn-rojo { background: var(--rojo-suave); color: var(--rojo); }
.btn-rojo:hover:not(:disabled) { filter: brightness(1.1); }
.btn-chico { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-ancho { width: 100%; height: 48px; font-size: 15px; }
.btn-redondo {
    width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--degradado-diag); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.btn-redondo:hover { filter: brightness(1.12); }
.btn-icono {
    width: 32px; height: 32px; border-radius: 10px; border: none; background: transparent; color: var(--texto-3);
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.btn-icono:hover { background: var(--elevado-2); color: var(--texto); }
.btn-icono.peligro:hover { background: var(--rojo-suave); color: var(--rojo); }
.btn-enlace { border: none; background: none; color: var(--azul-texto); font-size: 14px; padding: 4px; }
.btn-enlace:hover { color: var(--grad-2); }

/* ---------------------------------------------------------------------
   Pastillas de estado
   --------------------------------------------------------------------- */
.pastilla {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pastilla);
    font-size: 13px; font-weight: 600; white-space: nowrap;
}
.pastilla .punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pastilla.ok { background: var(--verde-suave); color: var(--verde-texto); }
.pastilla.info { background: var(--azul-suave); color: var(--azul-texto); }
.pastilla.info .punto { background: var(--azul-punto); }
.pastilla.aviso { background: var(--naranja-suave); color: var(--naranja); }
.pastilla.error { background: var(--rojo-suave); color: var(--rojo); }
.pastilla.neutra { background: var(--elevado); color: var(--texto-2); }
.pastilla.grande { padding: 10px 16px; font-size: 14px; }

/* ---------------------------------------------------------------------
   Filas en pastilla (listas)
   --------------------------------------------------------------------- */
.lista { display: flex; flex-direction: column; gap: 8px; }
.fila {
    display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 8px 6px 16px;
    border-radius: var(--r-fila); background: var(--elevado); transition: background .15s;
}
.fila:hover { background: var(--elevado-2); }
.fila .nombre { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .nombre.dos-lineas { display: flex; flex-direction: column; white-space: normal; line-height: 1.3; padding: 4px 0; }
.fila .nombre.dos-lineas .nota { font-size: 12px; }
.fila .detalle { font-size: 13px; color: var(--texto-3); white-space: nowrap; }
.fila .monto { min-width: 90px; text-align: right; font-weight: 600; padding-right: 8px; }
.fila.activa { background: var(--degradado); }
.fila.activa .nombre { font-weight: 600; }
.fila.activa { color: #fff; box-shadow: var(--brillo-azul); }
.fila.activa .detalle { color: rgba(255, 255, 255, 0.8); }
.fila .acciones { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.fila:hover .acciones, .fila:focus-within .acciones { opacity: 1; }

/* ---------------------------------------------------------------------
   Casillas
   --------------------------------------------------------------------- */
.campo {
    width: 100%; height: 44px; padding: 0 14px; border-radius: var(--r-cuadro);
    border: 1.5px solid transparent; background: var(--hundido); color: var(--texto); font-size: 15px;
}
.campo:focus { outline: none; border-color: var(--cian); }
.campo::placeholder { color: var(--texto-3); }
.campo.numero { text-align: right; font-variant-numeric: tabular-nums; }
.campo.enfila { width: 150px; height: 36px; }
.fila.activa .campo.enfila { background: rgba(255, 255, 255, .92); color: #23262D; box-shadow: none; }
.campo:disabled { opacity: 0.6; }
.campo-etiqueta { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--texto-2); }
select.campo { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto-3) 50%), linear-gradient(135deg, var(--texto-3) 50%, transparent 50%); background-position: calc(100% - 20px) 19px, calc(100% - 15px) 19px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
textarea.campo { height: auto; min-height: 90px; padding: 12px 14px; resize: vertical; }

/* ---------------------------------------------------------------------
   Casillas de verificación

   La casilla del sistema la dibuja el navegador, no el programa: sale con el
   azul de Windows y las esquinas de Windows, en medio de una pantalla que no
   es ninguna de las dos cosas. Y cambia de aspecto según el equipo, así que ni
   siquiera se ve igual en dos PC de la misma sala.

   Se apaga con `appearance: none` y se dibuja aquí: el mismo hundido que las
   demás casillas, el mismo radio, y al marcarla el degradado de la casa con el
   visto en blanco encima. El visto es un pseudo-elemento rotado —dos lados de
   un rectángulo— y no un carácter, porque un carácter depende de la tipografía
   instalada y una ✓ que no esté deja la casilla en blanco.
   --------------------------------------------------------------------- */
input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px; flex: 0 0 auto; margin: 0;
    border-radius: 6px; border: 1.5px solid var(--linea); background: var(--hundido);
    display: inline-grid; place-content: center; cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
input[type="checkbox"]:hover:not(:disabled) { border-color: var(--texto-3); }
input[type="checkbox"]:focus-visible { outline: none; border-color: var(--cian); }

input[type="checkbox"]::before {
    content: ""; width: 10px; height: 6px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff;
    border-radius: 1px; transform: rotate(-45deg) translate(1px, -1px) scale(.6);
    opacity: 0; transition: opacity .12s ease, transform .12s ease;
}
input[type="checkbox"]:checked {
    background: var(--degradado); border-color: transparent;
}
input[type="checkbox"]:checked::before { opacity: 1; transform: rotate(-45deg) translate(1px, -1px) scale(1); }
input[type="checkbox"]:disabled { opacity: .45; cursor: default; }

/* Dentro de una fila de texto se alinea con la línea base de la frase, no con
   su caja: puesta al tope queda flotando por encima de las palabras. */
.fila-flex > input[type="checkbox"] { align-self: center; }

/* ---------------------------------------------------------------------
   Avance
   --------------------------------------------------------------------- */
.barra { height: 10px; border-radius: 6px; background: var(--linea); overflow: hidden; }
.barra > div { height: 100%; border-radius: 6px; background: var(--degradado); transition: width .5s ease; }
.barra.fina { height: 8px; }

.pasos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.paso {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px 10px;
    border-radius: var(--r-fila); background: var(--elevado); border: none; color: var(--texto-2); font-size: 13px;
}
.paso:hover { color: var(--texto); box-shadow: var(--alzado-s); }
.paso .ico { width: 36px; height: 36px; border-radius: 12px; background: var(--degradado-diag); display: flex; align-items: center; justify-content: center; color: #fff; }
.paso.pendiente { background: var(--sup); box-shadow: var(--en-hueco); color: var(--texto-3); }
.paso.pendiente .ico { background: var(--sup); box-shadow: var(--alzado-s); color: var(--texto-3); }
.paso .check { width: 20px; height: 20px; border-radius: 50%; background: var(--verde); display: flex; align-items: center; justify-content: center; color: #fff; }
.paso .vacio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--linea-fuerte); }
.paso .cuenta { font-weight: 600; color: var(--texto); height: 20px; }

.anillo { position: relative; }
.anillo .centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.anillo .centro .grande { font-size: 40px; font-weight: 700; line-height: 1; }

.barras { display: grid; grid-template-columns: 120px minmax(0, 1fr) 90px; align-items: center; gap: 12px 14px; font-size: 14px; }
.barras .monto { text-align: right; font-weight: 600; }

/* Cuadros de conteo (arqueos) */
.cuadro-conteo {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border-radius: 18px;
    border: 1.5px solid transparent; background: var(--elevado); text-align: left; min-height: 104px;
}
.cuadro-conteo:hover:not(:disabled) { background: var(--elevado-2); }
.cuadro-conteo .que { font-size: 13px; color: var(--texto-3); }
.cuadro-conteo .cuanto { font-size: 18px; font-weight: 700; }
.cuadro-conteo.pendiente { background: transparent; border: 1.5px dashed var(--linea-fuerte); }
.cuadro-conteo.pendiente:hover:not(:disabled) { border-color: var(--cian); }
.cuadro-conteo .accion { white-space: nowrap; padding: 7px 14px; border-radius: var(--r-pastilla); background: var(--degradado); font-size: 13px; font-weight: 600; color: #fff; }

/* ---------------------------------------------------------------------
   Modales
   --------------------------------------------------------------------- */
.modal-fondo {
    position: fixed; inset: 0; background: rgba(10, 12, 16, 0.55); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; z-index: 100; padding: 24px;
    animation: aparecer .15s ease;
}
.modal {
    width: min(560px, 100%); max-height: calc(100vh - 48px); overflow: hidden; border-radius: var(--r-tarjeta);
    background: var(--sup); box-shadow: var(--sombra);
    display: flex; flex-direction: column; animation: subir .2s ease;
}
.modal.ancho { width: min(1200px, 100%); }
.modal.desborda, .modal.desborda .modal-cuerpo { overflow: visible; }
.modal.medio { width: min(720px, 100%); }
.modal-cab { display: flex; align-items: flex-start; gap: 12px; padding: 24px 26px 8px; }
.modal-cab h2 { margin: 0; flex: 1; font-size: 20px; font-weight: 600; }
.modal-cab .sub { font-size: 14px; color: var(--texto-3); margin-top: 4px; }
.modal-cuerpo { padding: 12px 26px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.modal-pie { display: flex; align-items: center; gap: 10px; padding: 16px 26px 24px; }
.modal-pie .espacio { flex: 1; font-size: 13px; color: var(--texto-3); }
.cerrar-x { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--elevado); color: var(--texto-2); display: flex; align-items: center; justify-content: center; }
.cerrar-x:hover { background: var(--elevado-2); color: var(--texto); }

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Tabla de conteo por denominación */
.conteo { display: grid; gap: 6px 8px; align-items: center; }
.conteo .cab { font-size: 12px; color: var(--texto-3); text-align: center; }
.conteo .cab.izq { text-align: left; }
.conteo .den { font-weight: 600; font-size: 15px; }
.conteo input { height: 38px; text-align: center; padding: 0 6px; }
.conteo .imp { font-size: 13px; color: var(--texto-3); text-align: right; }
.conteo .sub { font-weight: 700; text-align: right; padding-top: 6px; }

/* ---------------------------------------------------------------------
   Operaciones de mesas
   --------------------------------------------------------------------- */
.tabla-mesas { display: flex; flex-direction: column; gap: 6px; }
.tm-fila { display: grid; grid-template-columns: minmax(150px, 1.3fr) repeat(7, minmax(92px, 1fr)) 44px; align-items: center;
    gap: 8px; min-height: 48px; padding: 4px 8px 4px 16px; border-radius: var(--r-fila); background: var(--elevado); font-size: 14px; }
.tm-fila > span { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-fila > span.izq { text-align: left; }
.tm-fila .nombre { font-weight: 600; }
.tm-fila .fuerte { font-weight: 700; }
.tm-fila .tenue, .tenue { color: var(--texto-3); }
.tm-fila .aviso, .aviso-texto { color: var(--naranja); }
.tm-fila .accion { display: flex; justify-content: center; }
.tm-fila.vacia { background: transparent; border: 1.5px dashed var(--linea); }
.tm-fila.vacia .nombre { color: var(--texto-2); font-weight: 500; }
.tm-fila.tocable { cursor: pointer; transition: background .15s, border-color .15s; }
.tm-fila.tocable:hover { background: var(--elevado-2); border-color: transparent; }
.tm-cab { background: none; min-height: 28px; font-size: 13px; color: var(--texto-3); font-weight: 500; }
.tm-total { background: var(--hundido); font-weight: 700; margin-top: 6px; }
.tabla-mesas .grupo { padding: 10px 0 2px 4px; }

.rejilla-mesas-cuadre { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; align-items: start; }
.cuadros-6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cuenta-cuadre { display: flex; flex-direction: column; gap: 2px; }
.cuenta-cuadre > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 4px; font-size: 14px; color: var(--texto-2); }
.cuenta-cuadre > div b { color: var(--texto); font-weight: 600; white-space: nowrap; }
.cuenta-cuadre i { font-style: normal; color: var(--texto-3); font-size: 13px; }
.cuenta-cuadre .suma { color: var(--texto); font-weight: 600; border-top: 1px solid var(--linea); margin-bottom: 8px; }
.cuenta-cuadre .suma b { font-weight: 700; }
.cuenta-cuadre .final { margin-top: 6px; padding: 14px 16px; border-radius: var(--r-fila); background: var(--hundido); color: var(--texto); font-weight: 600; font-size: 15px; }
.cuenta-cuadre .final b { font-size: 18px; font-weight: 700; }
.cuenta-cuadre .final b.tenue { font-size: 14px; font-weight: 500; }

@media (max-width: 1300px) {
    .rejilla-mesas-cuadre { grid-template-columns: 1fr; }
}

/* Diálogo de una mesa */
.resumen-mesa { display: flex; align-items: flex-end; gap: 18px; padding: 16px 20px; border-radius: 22px; background: var(--hundido); flex-wrap: wrap; }
.resumen-mesa .op { font-size: 22px; color: var(--texto-3); padding-bottom: 2px; }
.resumen-mesa .cifra .valor { font-size: 22px; }
.resumen-mesa .resultado { margin-left: auto; text-align: right; }
.bloque-mesa { border-radius: 22px; background: var(--sup); box-shadow: var(--en-hueco); border: 0; padding: 14px 16px 12px; min-width: 0; }
.bloque-cab { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; font-size: 15px; }
.bloque-cab .nota { font-size: 13px; }
.rejilla-bloques { display: grid; grid-template-columns: 1.75fr 1fr; gap: 14px; }
.rejilla-mesa { display: grid; gap: 5px 6px; align-items: center; }
.rejilla-mesa .cab { font-size: 12px; font-weight: 600; color: var(--texto-3); text-align: center; letter-spacing: .3px; }
.rejilla-mesa .cab.izq { text-align: left; }
.rejilla-mesa .cab.der { text-align: right; }
.rejilla-mesa .cab.banca { color: var(--azul-texto); }
.rejilla-mesa .cab.pie { padding-top: 4px; }
.rejilla-mesa .den { font-weight: 600; font-size: 14px; }
.rejilla-mesa input { height: 36px; padding: 0 8px; text-align: center; font-size: 14px; }
.rejilla-mesa input.banca { background: var(--azul-suave); }
.rejilla-mesa .imp { font-size: 13px; color: var(--texto-2); text-align: right; white-space: nowrap; }
.rejilla-mesa .sub { font-size: 13px; color: var(--texto-3); text-align: center; padding-top: 4px; white-space: nowrap; }
.rejilla-mesa .sub.fuerte { color: var(--texto); font-weight: 700; font-size: 14px; text-align: right; }

/* Conteo de una columna */
.piezas { display: grid; grid-template-columns: 1fr 160px 150px; gap: 8px 14px; align-items: center; }
.piezas .cab { font-size: 12px; color: var(--texto-3); text-align: center; }
.piezas .cab.izq { text-align: left; }
.piezas .cab.der { text-align: right; }
.piezas .den { font-weight: 600; font-size: 16px; }
.piezas input { height: 40px; text-align: center; }
.piezas .imp { text-align: right; color: var(--texto-2); font-size: 14px; }

/* ---------------------------------------------------------------------
   Lista desplegable y botones de segmento
   --------------------------------------------------------------------- */
.desplegable { position: relative; min-width: 200px; }
.desplegable-boton { width: 100%; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px;
    border-radius: var(--r-cuadro); border: 1.5px solid transparent; background: var(--hundido); text-align: left; font-size: 14px; }
.desplegable-boton:hover:not(:disabled) { border-color: var(--linea-fuerte); }
.desplegable.abierto .desplegable-boton { border-color: var(--grad-1); }
.desplegable-boton > svg:first-child { color: var(--texto-3); }
.desplegable-boton .vacio { color: var(--texto-3); }
.desplegable-boton .crece { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desplegable .giro { color: var(--texto-3); transform: rotate(90deg); transition: transform .2s; }
.desplegable.abierto .giro { transform: rotate(-90deg); }
.desplegable-lista { position: absolute; left: 0; min-width: 100%; top: calc(100% + 6px); z-index: 41; max-height: 320px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: var(--r-fila);
    background: var(--elevado); border: 1px solid var(--linea-fuerte); box-shadow: var(--sombra); }
.desplegable-lista .campo { height: 38px; margin-bottom: 4px; }
.desplegable-lista button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: none; border-radius: 10px;
    background: transparent; text-align: left; font-size: 14px; white-space: nowrap; }
.desplegable-lista button:hover { background: var(--elevado-2); }
.desplegable-lista button.activo { background: var(--azul-suave); }
.desplegable-lista button.activo svg { color: var(--azul-texto); }
.desplegable-lista button svg.desplegable-hecho { color: var(--verde-texto); }

.segmentos { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 18px; background: var(--hundido); }
.segmentos button { flex: 1; min-width: 96px; height: 38px; padding: 0 14px; border: none; border-radius: 12px; background: transparent;
    color: var(--texto-2); font-size: 14px; font-weight: 500; white-space: nowrap; }
.segmentos button:hover { background: var(--elevado); color: var(--texto); }
.segmentos button.activo { background: var(--degradado); color: #fff; font-weight: 600; }
.segmentos button.activo.peligro { background: var(--rojo-suave); color: var(--rojo); }
.rotulo-fila { height: 20px; }
.rotulo-fila .btn-enlace { padding: 0; }
.campo.grande { height: 56px; font-size: 24px; font-weight: 600; }

/* ---------------------------------------------------------------------
   Ventanilla de máquinas
   --------------------------------------------------------------------- */
.rejilla-vent { display: grid; grid-template-columns: 1.9fr 1fr; gap: 22px; align-items: start; }
.vacio-tarjeta { padding: 26px; border-radius: var(--r-fila); border: 1.5px dashed var(--linea); text-align: center; color: var(--texto-3); font-size: 14px; }
.punto-estado { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--naranja); }
.punto-estado.rojo { background: var(--rojo); }

.tabla-movs { display: flex; flex-direction: column; gap: 4px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.mv-fila { display: grid; grid-template-columns: 44px 58px minmax(0, 1.3fr) minmax(0, 1fr) 150px 120px 40px; align-items: center; gap: 10px;
    min-height: 46px; padding: 3px 6px 3px 14px; border-radius: 14px; background: var(--elevado); font-size: 14px; }
.mv-fila > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-fila .der { text-align: right; }
.mv-fila .fuerte { font-weight: 600; }
.mv-fila .monto { font-weight: 700; }
.mv-fila .accion { display: flex; justify-content: center; opacity: 0; transition: opacity .15s; }
.mv-fila:hover .accion { opacity: 1; }
.mv-fila .pastilla { padding: 4px 10px; font-size: 12px; }
.mv-fila.anulado { opacity: .45; }
.mv-fila.anulado .monto { text-decoration: line-through; }
.mv-cab { background: none; min-height: 26px; font-size: 13px; color: var(--texto-3); position: sticky; top: 0; z-index: 1; background: var(--tarjeta-arriba); }

.tabla-carpetas { display: flex; flex-direction: column; gap: 4px; }
.cp-fila { display: grid; grid-template-columns: minmax(0, 1fr) 84px 76px 88px; align-items: center; gap: 8px; min-height: 44px;
    padding: 4px 14px; border-radius: 14px; background: var(--elevado); border: none; font-size: 14px; text-align: right; }
.cp-fila .nombre { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-fila .fuerte { font-weight: 700; }
button.cp-fila:hover { background: var(--elevado-2); }
.cp-fila.activa { background: var(--degradado); }
.cp-cab { background: none; min-height: 26px; font-size: 13px; color: var(--texto-3); }
.cp-cab span:first-child { text-align: left; }

.tabla-zonas { display: flex; flex-direction: column; gap: 6px; }
.zn-fila { display: grid; grid-template-columns: minmax(140px, 1.3fr) repeat(4, minmax(72px, 1fr)) 132px minmax(96px, 1fr) minmax(80px, 1fr) minmax(96px, 1fr); align-items: center; gap: 10px;
    min-height: 50px; padding: 4px 16px; border-radius: var(--r-fila); background: var(--elevado); font-size: 14px; text-align: right; }
.zn-fila .nombre, .zn-fila > span:first-child { text-align: left; font-weight: 600; }
.zn-fila .fuerte { font-weight: 700; }
.zn-fila .campo.enfila { width: 100%; }
/* El rótulo chico bajo la cabecera: dice de dónde sale cada cifra, que es lo
   que decide cuál manda cuando las dos no coinciden. */
.zn-fila .sub-rotulo { display: block; font-style: normal; font-size: 11px; font-weight: 500;
                       color: var(--texto-3); margin-top: 1px; }
.zn-fila.vacia { background: transparent; border: 1.5px dashed var(--linea); }
.zn-fila.vacia .nombre { color: var(--texto-2); font-weight: 500; }
.zn-cab { background: none; min-height: 26px; font-size: 13px; color: var(--texto-3); }
.zn-cab > span:first-child { font-weight: 500; }
.zn-total { background: var(--hundido); font-weight: 700; margin-top: 4px; }

.rejilla-ajustes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bloque-ajuste { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 22px; background: var(--elevado); min-height: 150px; }
.bloque-ajuste .bloque-cab { margin: 0 0 4px; font-size: 14px; }
.linea-ajuste { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texto-2); min-height: 32px; }
.linea-ajuste b { color: var(--texto); white-space: nowrap; }
.linea-ajuste .crece { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1300px) {
    .rejilla-vent { grid-template-columns: 1fr; }
    .rejilla-ajustes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   Avisos flotantes
   --------------------------------------------------------------------- */
.avisos { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.flotante {
    display: flex; align-items: flex-start; gap: 12px; min-width: 300px; max-width: 440px; padding: 14px 16px;
    border-radius: 18px; background: var(--elevado-2); box-shadow: var(--sombra); animation: subir .2s ease;
}
.flotante .marca { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.flotante.exito .marca { background: var(--verde); }
.flotante.error .marca { background: var(--rojo); }
.flotante.info .marca { background: var(--azul-punto); }
.flotante .texto { flex: 1; font-size: 14px; }
.flotante .texto b { display: block; margin-bottom: 2px; }

/* ---------------------------------------------------------------------
   Acceso
   --------------------------------------------------------------------- */
.acceso { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px; outline: none; overflow: hidden;
    background: var(--fondo); }
.acceso-ambiente { position: absolute; inset: 0; pointer-events: none; }
.acceso-ambiente i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.acceso-ambiente i:nth-child(1) { width: 620px; height: 620px; left: -160px; top: -200px; background: rgba(42,182,244,.16); animation: deriva-a 26s ease-in-out infinite alternate; }
.acceso-ambiente i:nth-child(2) { width: 560px; height: 560px; right: -140px; bottom: -220px; background: rgba(214,92,245,.14); animation: deriva-b 22s ease-in-out infinite alternate; }
.acceso-ambiente i:nth-child(3) { width: 380px; height: 380px; right: 22%; top: -180px; background: rgba(240,69,122,.08); animation: deriva-a 30s ease-in-out infinite alternate-reverse; }
.acceso-caja { position: relative; z-index: 1; width: min(1180px, 100%); height: min(760px, calc(100vh - 56px)); display: grid; grid-template-columns: 1fr 1fr;
    border-radius: 38px; overflow: hidden; background: var(--sup); padding: 14px; gap: 14px;
    box-shadow: 14px 14px 30px var(--sombra-o), -14px -14px 30px var(--sombra-c); }

/* Panel de marca */
.acceso-marca { position: relative; overflow: hidden; border-radius: 0;
    background: var(--sup); box-shadow: var(--en-hueco); border-radius: 30px;
    display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 44px 40px 36px; isolation: isolate; }
.acceso-marca::before { content: ""; position: absolute; inset: 0; background: var(--degradado-diag); opacity: .10; z-index: -1; }
.acceso-luz { position: absolute; border-radius: 50%; z-index: -2; filter: blur(10px); }
.acceso-luz.a { width: 520px; height: 520px; left: -170px; top: -170px;
    background: radial-gradient(circle, rgba(47,155,255,.42) 0%, rgba(47,155,255,0) 68%); animation: deriva-a 22s ease-in-out infinite alternate; }
.acceso-luz.b { width: 480px; height: 480px; right: -150px; bottom: -150px;
    background: radial-gradient(circle, rgba(166,77,255,.40) 0%, rgba(166,77,255,0) 68%); animation: deriva-b 19s ease-in-out infinite alternate; }
@keyframes deriva-a { from { transform: translate(-20px, 0); } to { transform: translate(60px, 70px); } }
@keyframes deriva-b { from { transform: translate(30px, 30px); } to { transform: translate(-50px, -40px); } }
.acceso-aros { position: absolute; inset: 0; z-index: -2; animation: giro 160s linear infinite; }
.acceso-aros i { position: absolute; border-radius: 50%; border: 1px solid; }
.acceso-aros i:nth-child(1) { width: 460px; height: 460px; left: -170px; top: -150px; border-color: rgba(47,155,255,.22); }
.acceso-aros i:nth-child(2) { width: 340px; height: 340px; left: -110px; top: -90px; border-color: rgba(47,155,255,.14); }
.acceso-aros i:nth-child(3) { width: 420px; height: 420px; right: -150px; bottom: -140px; border-color: rgba(166,77,255,.22); }
.acceso-aros i:nth-child(4) { width: 300px; height: 300px; right: -90px; bottom: -80px; border-color: rgba(166,77,255,.14); }
@keyframes giro { to { transform: rotate(360deg); } }

.acceso-reloj { text-align: center; }
.acceso-reloj .hora { font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -1px; }
.acceso-reloj .fecha { margin-top: 6px; color: var(--texto-2); font-size: 14px; }

/* El logo del acceso.
   Entrada (una vez por visita, es el momento de la marca): el logo crece
   desde el 90 % con una curva fuerte de salida, una onda de luz se abre detrás
   y el nombre llega escalonado. En reposo, un brillo cruza el logo cada siete
   segundos recortado a su silueta, y el resplandor respira. Sólo transform y
   opacity: nada se vuelve a pintar en cada cuadro. El panel del PIN funciona
   desde el primer instante: la entrada no lo espera. */
.acceso-logo { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.acceso-logo .resplandor { position: absolute; top: -40px; width: 300px; height: 300px; border-radius: 50%; z-index: -1;
    background: radial-gradient(circle, rgba(120,110,255,.34) 0%, rgba(120,110,255,0) 65%);
    opacity: 0; animation: logo-aparece 900ms var(--ease-out) 120ms forwards, latido 3.8s ease-in-out 1s infinite; }
.acceso-logo .onda { position: absolute; top: 10px; width: 200px; height: 200px; border-radius: 50%; z-index: -1; pointer-events: none;
    border: 2px solid rgba(245,197,66,.55); box-shadow: 0 0 40px rgba(245,197,66,.35), inset 0 0 30px rgba(245,197,66,.25);
    opacity: 0; transform: scale(.6); animation: onda 1100ms var(--ease-out) 250ms forwards; }
.logo-marco { position: relative; width: 220px; height: 220px; opacity: 0; transform: translateY(10px) scale(.9);
    animation: logo-entra 900ms var(--ease-out) forwards; }
.logo-marco img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 22px rgba(245,197,66,.55)); }
/* El brillo: una franja de luz recortada por la silueta del logo (la máscara
   es el propio logo), que la cruza en 1,2 s y descansa el resto. */
.logo-marco .brillo { position: absolute; inset: 0; pointer-events: none; overflow: hidden;
    -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.brillo::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%;
    background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 80%, transparent 100%);
    transform: translateX(-120%); animation: brillo 7s var(--ease-in-out) 1.1s infinite; }
.acceso-logo .ficha { position: relative; overflow: hidden; width: 150px; height: 150px; border-radius: 40px; background: var(--degradado-diag);
    display: grid; place-items: center; box-shadow: 0 20px 50px rgba(90, 100, 255, .35);
    opacity: 0; transform: translateY(10px) scale(.9); animation: logo-entra 900ms var(--ease-out) forwards; }
.acceso-logo .ficha .brillo { position: absolute; inset: 0; }
.acceso-logo .ficha span { width: 54px; height: 54px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.acceso-logo h1 { margin: 26px 0 0; font-size: 30px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
.acceso-logo p { margin: 8px 0 0; color: var(--texto-2); font-size: 14px; }
.acceso-logo .raya { width: 56px; height: 3px; border-radius: 3px; background: var(--degradado); margin-top: 20px; }
.acceso-logo h1, .acceso-logo p, .acceso-logo .raya { opacity: 0; animation: subir 500ms var(--ease-out) forwards; }
.acceso-logo h1 { animation-delay: 320ms; }
.acceso-logo p { animation-delay: 380ms; }
.acceso-logo .raya { animation-delay: 440ms; }
@keyframes logo-entra { to { opacity: 1; transform: none; } }
@keyframes logo-aparece { to { opacity: .65; } }
@keyframes onda { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes brillo { 0% { transform: translateX(-120%); } 17%, 100% { transform: translateX(260%); } }
@keyframes latido { 0%, 100% { opacity: .65; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }

/* El logo del teléfono, encima del PIN: sólo cuando el panel de la marca no cabe. */
.acceso-logo-movil { display: none; margin-bottom: 18px; }
.acceso-logo-movil .logo-marco { width: 96px; height: 96px; }
.acceso-logo-movil .ficha { width: 76px; height: 76px; border-radius: 22px; }
.acceso-logo-movil .ficha span { width: 28px; height: 28px; }

.acceso-servidor { width: 100%; max-width: 420px; padding: 14px 18px; border-radius: var(--r-fila);
    background: var(--sup); box-shadow: var(--alzado-s); border: 0; }
.acceso-servidor .estado { display: flex; align-items: center; gap: 10px; color: var(--verde-texto); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.acceso-servidor .url { margin-top: 7px; font-size: 15px; font-weight: 500; }
.acceso-servidor .nota { margin-top: 3px; font-size: 12px; }
.acceso-imoon { text-align: center; }
.acceso-imoon .marca { font-size: 15px; font-weight: 700; letter-spacing: .4px; }
.pulso { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--verde-texto); flex: none; }
.pulso::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--verde-texto); animation: pulso 1.8s ease-out infinite; }
@keyframes pulso { from { transform: scale(1); opacity: .6; } to { transform: scale(3); opacity: 0; } }

/* Panel del PIN */
.acceso-panel { display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 36px 48px; }
.acceso-form { width: min(420px, 100%); display: flex; flex-direction: column; }
.acceso-pie { margin: 16px 0 0; text-align: center; font-size: 13px; color: var(--texto-3); }
.acceso-olvidar { display: block; margin: 10px auto 0; padding: 6px 10px; background: none; border: 0; font: inherit; font-size: 12px; color: var(--texto-3); text-decoration: underline; cursor: pointer; }
.acceso-olvidar:hover { color: var(--texto-2); }
.acceso-form h2 { margin: 0; font-size: 34px; font-weight: 700; }
.acceso-form > .nota { margin: 6px 0 26px; font-size: 14px; }
.rotulo-campo { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--texto-3); margin-bottom: 8px; }
.fila-rotulo { display: flex; justify-content: space-between; margin-top: 22px; }
.fila-rotulo .nota { text-transform: none; letter-spacing: 0; font-weight: 400; }

.selector-cuenta { position: relative; }
.cuenta-elegida, .cuentas button { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; border: 1px solid var(--linea);
    background: var(--hundido); border-radius: var(--r-fila); padding: 11px 16px 11px 11px; transition: border-color .15s, background .15s; }
.cuenta-elegida:hover { border-color: var(--linea-fuerte); }
.selector-cuenta.abierto .cuenta-elegida { border-color: var(--grad-1); }
.cuenta-elegida b, .cuentas b { display: block; font-size: 16px; font-weight: 600; }
.cuenta-elegida small, .cuentas small { display: block; color: var(--texto-3); font-size: 13px; margin-top: 1px; }
.cuenta-elegida .giro { color: var(--texto-3); transform: rotate(90deg); transition: transform .2s; }
.selector-cuenta.abierto .giro { transform: rotate(-90deg); }
.cuenta-avatar { width: 42px; height: 42px; border-radius: 14px; flex: none; display: grid; place-items: center;
    background: var(--degradado-diag); font-weight: 700; font-size: 15px; }
.cuentas { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; max-height: 320px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: var(--r-fila);
    background: var(--elevado); border: 1px solid var(--linea-fuerte); box-shadow: var(--sombra); }
.cuentas button { border-color: transparent; background: transparent; }
.cuentas button:hover { background: var(--elevado-2); }
.cuentas button.activo { background: var(--azul-suave); color: var(--texto); }
.cuentas button.activo svg { color: var(--azul-texto); }

.pin-caja { height: 60px; border-radius: var(--r-fila); background: var(--hundido); border: 1px solid var(--linea);
    display: flex; align-items: center; justify-content: center; gap: 14px; transition: border-color .15s; }
.pin-caja.con-error { border-color: rgba(240,100,100,.6); }
.pin-caja span { width: 14px; height: 14px; border-radius: 50%; background: var(--linea-fuerte); transition: background .15s, transform .15s; }
.pin-caja span.lleno { background: var(--degradado-diag); transform: scale(1.12); }

.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.teclado button { height: 62px; border-radius: 18px; border: 1px solid var(--linea); background: linear-gradient(180deg, var(--tarjeta-arriba), var(--tarjeta-abajo));
    font-size: 24px; font-weight: 600; transition: background .12s, transform .08s, border-color .12s; }
.teclado button:hover { border-color: var(--linea-fuerte); background: var(--elevado-2); }
.teclado button:active { transform: scale(.96); }
.teclado button.tenue { color: var(--texto-3); font-size: 18px; display: grid; place-items: center; }

.acceso-error { margin-top: 14px; text-align: center; color: var(--rojo); font-size: 14px; }
/* Aparato nuevo: los dos caminos, el código grande y legible, y el aviso de sesión cerrada desde fuera. */
.acceso-modos { margin: 18px 0 6px; }
.acceso-modos button { flex: 1; }
.acceso-form .campo-etiqueta { margin-top: 12px; }
.acceso-codigo { font-size: 20px; letter-spacing: .12em; text-align: center; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.acceso-aviso { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 12px 14px; border-radius: 14px;
    background: var(--naranja-suave); color: var(--texto); font-size: 14px; }
.acceso-aviso svg { color: var(--naranja); flex-shrink: 0; margin-top: 1px; }
.btn-entrar { margin-top: 18px; height: 60px; border: none; border-radius: 30px; background: var(--g-cian); color: #fff;
    font-size: 16px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    display: flex; align-items: center; justify-content: center; gap: 12px; transition: filter .15s, opacity .15s; box-shadow: var(--brillo-cian); }
.btn-entrar:hover:not(:disabled) { filter: brightness(1.08); }
.btn-entrar:disabled { opacity: .45; box-shadow: none; }

@media (max-width: 980px) {
    .acceso-caja { grid-template-columns: 1fr; width: min(520px, 100%); }
    .acceso-marca { display: none; }
    .acceso-logo-movil { display: flex; }
}
@media (max-height: 800px) {
    .acceso-reloj .hora { font-size: 44px; }
    .acceso-marca .logo-marco { width: 170px; height: 170px; }
    .acceso-marca .ficha { width: 120px; height: 120px; border-radius: 30px; }
    .teclado button { height: 52px; }
    .btn-entrar { height: 54px; }
    .acceso-form > .nota { margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .acceso-luz, .acceso-aros, .acceso-ambiente i, .pulso::after, .brillo::before, .acceso-logo .onda { animation: none; }
    .brillo::before, .acceso-logo .onda { display: none; }
    /* Sin movimiento: el logo y el nombre sólo aparecen, sin crecer ni subir. */
    .logo-marco, .acceso-logo .ficha, .acceso-logo h1, .acceso-logo p, .acceso-logo .raya, .acceso-logo .resplandor
        { transform: none; animation: aparecer 200ms ease forwards; }
}
.sacudir { animation: sacudir .35s; }
@keyframes sacudir { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* Utilidades */
.fila-flex { display: flex; align-items: center; gap: 10px; }
.crece { flex: 1; min-width: 0; }
.derecha { text-align: right; }
.oculto { display: none !important; }
.vacio-texto { padding: 18px; text-align: center; color: var(--texto-3); font-size: 14px; border-radius: var(--r-fila); border: 1.5px dashed var(--linea); }
.cargando { opacity: .6; pointer-events: none; }

/* Chip de tasa: nombre a la izquierda, cifra a la derecha */
.chip-tasa { flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; border: none;
    background: var(--elevado); color: var(--texto); font-size: 14px; }
.chip-tasa:hover:not(:disabled) { background: var(--elevado-2); }
.chip-tasa .cual { color: var(--texto-3); font-size: 13px; }
.chip-tasa b { margin-left: auto; font-weight: 600; }
.chip-tasa:disabled { cursor: default; }


/* =====================================================================
   Capa soft UI: relieve, casillas hundidas, brillo de color.
   Va al final para mandar sobre las reglas de arriba y de los módulos.
   ===================================================================== */
.tarjeta { background: var(--sup); box-shadow: var(--alzado); }
.modal .tarjeta, .tarjeta .tarjeta { box-shadow: var(--alzado-s); }

.btn-grad { background: var(--degradado); box-shadow: var(--brillo-azul); }
.btn-verde { background: var(--g-cian); color: #fff; box-shadow: var(--brillo-cian); }
.btn-rojo { background: var(--g-fuego); color: #fff; box-shadow: var(--brillo-fuego); }
.btn-suave { background: var(--sup); box-shadow: var(--alzado-s); }
.btn-suave:hover:not(:disabled) { background: var(--sup); color: var(--texto); filter: brightness(1.06); }
.btn-suave:active:not(:disabled) { box-shadow: var(--en-hueco); transform: none; }
.btn-redondo { background: var(--g-cian); box-shadow: var(--brillo-cian); }
.btn-icono { border-radius: 50%; }
.btn-icono:hover { background: var(--sup); box-shadow: var(--alzado-s); color: var(--texto); }
.btn-icono.peligro:hover { background: var(--sup); color: var(--rojo); }

.campo { background: var(--sup); box-shadow: var(--en-hueco); border-color: transparent; }
.campo:disabled { box-shadow: none; background: var(--hundido); }
.pin-caja, .desplegable-boton, .buscador, .selector-fecha { background: var(--sup); box-shadow: var(--en-hueco); border-color: transparent; }
.selector-fecha .sf-paso, .calendario-cab button { background: var(--sup); box-shadow: var(--alzado-s); }
.fecha-elegida:hover, .fecha-elegida.abierto { background: transparent; color: var(--cian); }
.calendario, .desplegable-lista, .cuentas { background: var(--sup); border-color: var(--linea); box-shadow: var(--sombra); }
.calendario-dias button.elegido { background: var(--g-cian); box-shadow: var(--brillo-cian); }
.calendario-dias button.hoy { box-shadow: inset 0 0 0 2px var(--cian); }
.desplegable-lista button.activo, .cuentas button.activo { background: transparent; box-shadow: var(--en-hueco); }
.desplegable-lista button:hover, .cuentas button:hover { background: var(--elevado-2); }

/* Segmentos: pista hundida, opción elegida en cian con brillo, como en el kit */
.segmentos { background: var(--sup); box-shadow: var(--en-hueco); }
.segmentos button.activo { background: var(--g-cian); box-shadow: var(--brillo-cian); }
.segmentos button.activo.peligro { background: var(--g-fuego); color: #fff; box-shadow: var(--brillo-fuego); }
.segmentos button:hover:not(.activo) { background: transparent; color: var(--texto); }

/* Barras de avance: cápsula hundida y relleno con degradado */
.barra { height: 14px; border-radius: 8px; background: var(--sup); box-shadow: var(--en-hueco); padding: 3px; }
.barra > div { border-radius: 6px; background: var(--g-cian); box-shadow: 0 0 10px color-mix(in srgb, var(--cian) 55%, transparent); }
.barra.fina { height: 12px; }

/* Pasos y cuadros */
.paso { background: var(--sup); box-shadow: var(--alzado-s); }
.paso .ico { background: var(--degradado-diag); box-shadow: var(--brillo-azul); }
.paso .check { background: var(--g-cian); box-shadow: var(--brillo-cian); }
.cuadro-conteo { background: var(--sup); box-shadow: var(--alzado-s); }
.cuadro-conteo.pendiente { background: transparent; box-shadow: var(--en-hueco); border: 1.5px dashed var(--linea-fuerte); }
.cuadro-conteo .accion { background: var(--g-cian); box-shadow: var(--brillo-cian); }

/* Filas en pastilla: superficie un tono arriba, sin sombra (son muchas) */
.fila, .tm-fila, .mv-fila, .cp-fila, .zn-fila { background: var(--elevado); }
.tm-cab, .mv-cab, .cp-cab, .zn-cab { background: none; }
.tm-total, .zn-total { background: var(--sup); box-shadow: var(--en-hueco); }
.mv-cab { background: var(--sup); }
.tm-fila.vacia, .zn-fila.vacia { background: transparent; }

/* Pastillas de estado: con un punto que brilla */
.pastilla .punto { box-shadow: 0 0 8px currentColor; }
.pastilla.info .punto { box-shadow: 0 0 8px var(--azul-punto); }

/* Avisos flotantes */
.flotante { background: var(--sup); box-shadow: var(--sombra); }

/* Cifras grandes: un pelo más de peso, como el kit */
.cifra-xl .valor, .cifra .valor { font-weight: 700; letter-spacing: -0.02em; }

/* Tasa: chips hundidos */
.chip-tasa { background: var(--sup) !important; box-shadow: var(--en-hueco); border: 0 !important; }

/* Barra de desplazamiento */
::-webkit-scrollbar-thumb { background: var(--linea-fuerte); border-color: var(--fondo); }

/* Interruptor de tema (menú de la cuenta y acceso) */
/*
   El interruptor de tonalidad. Llevaba el borde que el navegador le pone a
   todo botón: se veía un aro duro alrededor de la pastilla (en claro, gris
   oscuro; en oscuro, gris claro) que no pega con el relieve del resto, y
   además le robaba dos píxeles al recorrido, de modo que la bola se salía
   por la derecha. Sin borde y con las cuentas exactas: pista 56, bola 22,
   3 de margen a cada lado, recorrido 56 - 22 - 3 - 3 = 28.
*/
.interruptor-tema {
    width: 56px; height: 28px; border-radius: 14px; border: 0; padding: 0; box-sizing: border-box;
    background: var(--hundido); box-shadow: var(--en-hueco); position: relative; flex-shrink: 0;
}
/*
   Dentro del menú de la cuenta el carril es estrecho: el rótulo va en su
   propia línea y debajo los tres kits con el interruptor. Además hay que
   quitarles el relleno que el menú les pone a todos sus botones, que era lo
   que empujaba las pastillas por encima de la palabra «Apariencia».
*/
.menu-usuario .tema-fila { flex-wrap: wrap; row-gap: 10px; padding: 10px 12px 12px; }
.menu-usuario .temas { width: 100%; justify-content: space-between; gap: 8px; flex-wrap: nowrap; }
.menu-usuario .tema-kit, .menu-usuario .interruptor-tema { padding: 0; }
.menu-usuario .tema-kit { width: 34px; height: 34px; border-radius: 50%; box-shadow: var(--alzado-s); }
.menu-usuario .tema-kit:hover { box-shadow: var(--alzado-s); }
.menu-usuario .tema-kit.elegido, .menu-usuario .tema-kit.elegido:hover { box-shadow: var(--en-hueco); }
.menu-usuario .tema-kit i { inset: 5px; }
.menu-usuario .interruptor-tema, .menu-usuario .interruptor-tema:hover { border-radius: 14px; box-shadow: var(--en-hueco); }
.interruptor-tema i {
    position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--degradado-diag); box-shadow: var(--brillo-azul); transition: transform .25s ease;
}
:root:not([data-tono="claro"]) .interruptor-tema i { transform: translateX(28px); }

/* Acceso en soft UI */
.acceso-luz.a { background: radial-gradient(circle, rgba(42,182,244,.30) 0%, rgba(42,182,244,0) 68%); }
.acceso-luz.b { background: radial-gradient(circle, rgba(214,92,245,.28) 0%, rgba(214,92,245,0) 68%); }
.acceso-marca::before { opacity: .06; }
.acceso-aros i { border-color: var(--linea) !important; }
.acceso-panel { padding: 26px 40px; }
.cuenta-elegida { background: var(--sup); box-shadow: var(--en-hueco); border-color: transparent; }
.selector-cuenta.abierto .cuenta-elegida { border-color: var(--cian); }
.pin-caja { border-color: transparent; }
.pin-caja span { background: var(--sup); box-shadow: var(--en-hueco); }
.pin-caja span.lleno { background: var(--g-cian); box-shadow: var(--brillo-cian); }
.teclado button { background: var(--sup); border: 0; box-shadow: var(--alzado-s); }
.teclado button:hover { background: var(--sup); color: var(--cian); border: 0; }
.teclado button:active { box-shadow: var(--en-hueco); transform: none; }
.cuenta-avatar { box-shadow: var(--brillo-azul); }
.acceso-tema { position: absolute; top: 18px; right: 22px; z-index: 2; border-radius: var(--r-pastilla); background: var(--sup); box-shadow: var(--alzado-s); }
.acceso-tema .tema-fila { padding: 6px 12px; }
.acceso-tema .tema-fila .crece { display: none; }

/* Anillos */
.anillo-arco { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--cian) 65%, transparent)); }
.anillo-arco.fuego { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--rosa) 65%, transparent)); }
.anillo-arco.azul { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--violeta) 65%, transparent)); }
.anillo-disco { position: absolute; border-radius: 50%; background: var(--sup); box-shadow: var(--alzado-s); }
.anillo .centro { z-index: 1; }

/* Barras horizontales (Resultado del día, reportes, fichas): cápsula con brillo */
.barras .barra { height: 16px; }
.barra > span { display: block; height: 100%; border-radius: 6px; background: var(--g-cian); box-shadow: 0 0 10px color-mix(in srgb, var(--cian) 55%, transparent); transition: width .5s ease; }
.barra { display: block; }

/* Elegir el kit y la tonalidad */
.temas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tema-kit { width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; position: relative; box-shadow: var(--alzado-s); background: var(--sup); }
.tema-kit i { position: absolute; inset: 7px; border-radius: 50%; }
.tema-kit.grafito i { background: linear-gradient(135deg, #005BFF 0%, #9E5BF7 55%, #DF5BF3 100%); }
.tema-kit.fuego i { background: linear-gradient(135deg, #F72A2A 0%, #FE9F3D 100%); }
.tema-kit.noche i { background: linear-gradient(135deg, #192033 0%, #F72A2A 60%, #FE9F3D 100%); }
.tema-kit.elegido { box-shadow: var(--en-hueco); }
.tema-kit.elegido::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--cian); }
.tema-fila { display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-size: 14px; color: var(--texto-2); }
.temas-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.tema-tarjeta { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 22px; background: var(--sup); box-shadow: var(--alzado-s); border: 0; text-align: left; }
.tema-tarjeta.elegido { box-shadow: var(--en-hueco); }
.tema-muestra { height: 74px; border-radius: 18px; display: flex; align-items: flex-end; gap: 8px; padding: 12px; }
.tema-muestra i { display: block; width: 26px; border-radius: 6px; }
.tema-tarjeta b { font-size: 14px; }
.tema-tarjeta .nota { font-size: 12px; }


/* =====================================================================
   Fundaciones (fase 1 del repaso visual)

   Una sola forma de decir cada cosa en las treinta pantallas:
     · elegir entre opciones  → relleno cian
     · un renglón elegido     → borde cian y fondo suave, el texto no cambia
     · navegación (el carril) → degradado del kit
     · botón que aún no toca  → se lee entero, sólo pierde el color
   y la tonalidad oscura con el contraste que le faltaba.
   Va al final para mandar sobre las reglas de arriba y de los módulos.
   ===================================================================== */
:root {
    /* Los módulos usaban --acento sin que nadie lo definiera: el borde caía
       al color del texto, y por eso lo «elegido» salía con un aro blanco. */
    --acento: var(--cian);
    --acento-suave: var(--azul-suave);
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------- Contraste del texto secundario, en las dos tonalidades ---------- */
:root:not([data-tono="claro"]) { --texto-2: #C7CCD6; --texto-3: #99A3B2; }
:root:not([data-tono="claro"]):not([data-kit]) { --linea: #444954; --linea-fuerte: #5B616D; }
:root[data-kit="fuego"]:not([data-tono="claro"]) { --texto-3: #A2A7B0; --linea: #3E434C; --linea-fuerte: #565B66; }
:root[data-kit="noche"]:not([data-tono="claro"]) { --texto-2: #C2CADC; --texto-3: #97A3B8; --linea: #344059; --linea-fuerte: #4A5677; }
:root[data-tono="claro"] { --texto-3: #626D7D; }
:root[data-kit="fuego"][data-tono="claro"] { --texto-3: #6E6969; }
:root[data-kit="noche"][data-tono="claro"] { --texto-3: #5F6B80; }

/* ---------- Oscuro: superficies y casillas que se distinguen ---------- */
/* Sobre grafito el relieve solo no alcanza: la sombra clara casi no se ve y
   las tarjetas se funden con el fondo. Un filo de un píxel las recorta. */
:root:not([data-tono="claro"]) .tarjeta,
:root:not([data-tono="claro"]) .rail { box-shadow: var(--alzado), inset 0 0 0 1px rgba(255, 255, 255, .05); }
:root:not([data-tono="claro"]) .modal .tarjeta,
:root:not([data-tono="claro"]) .tarjeta .tarjeta { box-shadow: var(--alzado-s), inset 0 0 0 1px rgba(255, 255, 255, .05); }
:root:not([data-tono="claro"]) .modal { box-shadow: var(--sombra), inset 0 0 0 1px rgba(255, 255, 255, .07); }
/* Una casilla vacía era un hueco del mismo gris que la tarjeta. */
:root:not([data-tono="claro"]) :is(.campo:not(:disabled), .desplegable-boton, .buscador, .selector-fecha, .pin-caja, .cuenta-elegida, .segmentos, .chip-tasa) {
    background-color: var(--hundido); box-shadow: var(--en-hueco), inset 0 0 0 1px var(--linea);
}
:root:not([data-tono="claro"]) .chip-tasa { background: var(--hundido) !important; }
:root:not([data-tono="claro"]) :is(.vacio-tarjeta, .vacio-texto) { border-color: var(--linea-fuerte); }

/* Lo apagado sigue apagado, pero se lee (lo anulado no se toca: ése va tachado). */
.est-mfila.apagada, .est-afila.apagada, .adm-qfila.vacia, .adm-pfila.apagada, .adm-tfila.futura, .adm-afila.apagada,
.adm-sfila.apagada, .adm-efila.ajeno, .adm-cfila.vacia, .rg-fila.apagada, .mq-fila.retirada { opacity: .78; }

/* ---------- Botones ---------- */
/* Un botón que todavía no se puede pulsar se desteñía entero y su rótulo
   —«Cerrar el día · faltan 2»— era justo lo que había que leer. */
.btn:disabled, .btn-entrar:disabled {
    opacity: 1; filter: none; background: var(--sup); color: var(--texto-2);
    box-shadow: inset 0 0 0 1.5px var(--linea-fuerte);
}
.btn { transition: filter .15s ease, transform .12s var(--ease-out), background-color .15s ease, box-shadow .15s ease; }
.btn:active:not(:disabled) { transform: scale(0.97); }

/* ---------- Elegir entre opciones: siempre relleno cian ---------- */
.chip.activo, .com-canal.activo, .com-pestanas button.activa {
    background: var(--g-cian); border-color: transparent; color: #fff; font-weight: 600; box-shadow: var(--brillo-cian);
}
.chip:hover:not(.activo) { border-color: var(--cian); }

/* ---------- Un renglón elegido: borde cian, fondo suave ---------- */
.fila.activa, .cl-item.activo, .rg-fila.activa, .rep-tipo.activo, .sala-busca-item.activo, .ing-buscador-op.activo {
    background: var(--azul-suave); color: var(--texto); border-color: transparent;
    box-shadow: inset 0 0 0 1.5px var(--cian);
}
.fila.activa .detalle, .cl-item.activo small { color: var(--texto-2); }
.cl-item.activo .cl-avatar { background: var(--g-cian); color: #fff; }
.cl-item.baja.activo .cl-item-texto b { color: var(--texto); }
.cl-item.activo .pastilla.error { background: var(--rojo-suave); }
.fila.activa .campo.enfila { background: var(--sup); color: var(--texto); box-shadow: var(--en-hueco); }
.tabla-mes tbody tr.activa td { border-color: var(--cian); background: var(--azul-suave); }
.sis-paleta button.elegido { border-color: var(--texto); box-shadow: 0 0 0 3px var(--azul-suave); }

/* ---------- Tablas: un solo encabezado ---------- */
.adm-cab, .aud-cab, .bit-cab, .cl-cab, .cp-cab, .ing-cab, .mq-cab, .mv-cab, .pr-cab, .sala-mv-cab, .sc-mf-cab,
.sis-c-cab, .sis-u-cab, .tm-cab, .tu-tf-cab, .zn-cab, .tabla-mes thead th, .tabla-contadores thead th {
    font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--texto-3);
}

@media (prefers-reduced-motion: reduce) {
    .btn { transition: filter .15s ease, background-color .15s ease; }
    .btn:active:not(:disabled) { transform: none; }
}


/* =====================================================================
   Fase 2 · los fallos visuales concretos
   ===================================================================== */

/* Títulos de tarjeta cortados («Diferencia del pues…»): el rótulo se lee
   entero y, si no cabe junto a su pastilla, la pastilla baja. */
.tarjeta-cab { flex-wrap: wrap; row-gap: 6px; }
.tarjeta-cab .etiqueta { white-space: normal; overflow: visible; text-overflow: clip; }
/* Un título con una nota larga al lado: la nota va debajo, no lo estruja. */
.tarjeta-cab.apilada { flex-direction: column; align-items: flex-start; gap: 6px; }
.tarjeta-cab.apilada h2 { flex: none; }

/* El título de la pantalla no se parte en dos renglones: lo que baja es lo
   que tiene al lado (la cabecera ya envuelve). */
.cabecera h1 { white-space: nowrap; }
.cabecera .titulos { min-width: min-content; }

/* El carril en pantallas bajas: con un submenú abierto se cortaban las
   últimas opciones y la cuenta quedaba fuera. La cuenta se queda siempre a
   la vista y las opciones se aprietan un poco. */
.rail-pie { position: sticky; bottom: 0; z-index: 2; flex-shrink: 0; padding-top: 8px; background: linear-gradient(to bottom, transparent, var(--sup) 8px); }
@media (max-height: 940px) {
    .rail { gap: 2px; padding-top: 10px; }
    .rail-item { padding: 4px 10px; }
    .rail-item .ico { width: 34px; height: 34px; }
    .rail-sub { padding-bottom: 4px; }
    .rail-sub a { padding: 6px 14px; }
}

/* Comunicación es un panel, no una pantalla: su botón no se pinta como «aquí
   estoy», que eso ya lo dice la opción del módulo. */
.rail-item.panel-abierto { color: var(--texto); font-weight: 600; box-shadow: var(--en-hueco); }
.rail-item.panel-abierto .ico { color: var(--cian); box-shadow: var(--alzado-s); }
/* Con sitio de sobra, el panel se pone al lado en vez de encima. */
@media (min-width: 1700px) {
    body:has(.com-panel) .contenido { padding-right: 426px; }
}

/* =====================================================================
   Fase 3 · impacto
   ===================================================================== */

/* ---------- pantallas vacías: que se vea que no falta nada, que no hay ---------- */
.vacio-tarjeta { padding: 30px 26px; color: var(--texto-2); line-height: 1.5; text-wrap: balance; }
.vacio-tarjeta::before {
    content: ""; display: block; width: 34px; height: 34px; margin: 0 auto 12px; background: var(--texto-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l3-8h12l3 8v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3Cpath d='M3 13h5l1 2h6l1-2h5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l3-8h12l3 8v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3Cpath d='M3 13h5l1 2h6l1-2h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.vacio-texto { text-wrap: balance; }

/* ---------- entrar a una pantalla: un fundido que apenas se nota ---------- */
.contenido > * { transition: opacity .14s ease; }
@starting-style { .contenido > * { opacity: 0; } }

/* ---------- el avance del día: cada pendiente lleva a su sitio ---------- */
.pendiente-ir {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: none; border-radius: 10px;
    background: transparent; text-align: left; transition: background-color .15s ease, color .15s ease;
}
.pendiente-ir .punto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pendiente-ir svg { opacity: 0; transition: opacity .15s ease, transform .15s var(--ease-out); flex-shrink: 0; }
.pendiente-ir:focus-visible svg { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
    .pendiente-ir:hover { background: var(--elevado); color: var(--texto); }
    .pendiente-ir:hover svg { opacity: 1; transform: translateX(2px); }
}

/* ---------- las dos últimas semanas ---------- */
.tendencia { gap: 10px; }
.tendencia-leyenda { display: flex; gap: 14px; font-size: 12px; color: var(--texto-3); }
.tendencia-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.tendencia-leyenda i { width: 9px; height: 9px; border-radius: 3px; }
.tendencia-leyenda .cuadrado, .tendencia-dia.cuadrado .barra-dia i { background: var(--g-cian); }
.tendencia-leyenda .diferencia, .tendencia-dia.diferencia .barra-dia i { background: var(--naranja); }
.tendencia-leyenda .abierto, .tendencia-dia.abierto .barra-dia i { background: var(--linea-fuerte); }
.tendencia-barras { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; align-items: end; }
.tendencia-dia {
    display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 4px 4px; border: none; border-radius: 12px;
    background: transparent; color: var(--texto-3); font-size: 12px; transition: background-color .15s ease, color .15s ease;
}
.tendencia-dia .barra-dia { height: 64px; display: flex; align-items: flex-end; justify-content: center; }
.tendencia-dia .barra-dia i {
    width: 100%; max-width: 34px; min-height: 0; border-radius: 6px 6px 3px 3px; transform-origin: bottom;
    transition: transform .32s var(--ease-out) calc(var(--i) * 18ms), opacity .2s ease calc(var(--i) * 18ms);
}
@starting-style { .tendencia-dia .barra-dia i { transform: scaleY(.35); opacity: 0; } }
.tendencia-dia.hoy { color: var(--texto); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--cian); background: var(--azul-suave); }
@media (hover: hover) and (pointer: fine) {
    .tendencia-dia:hover { background: var(--elevado); color: var(--texto); }
}

/* ---------- modo sala: el dashboard en el monitor del pit ---------- */
/* Sólo vale mientras se está en el dashboard: al salir de él, vuelve el menú. */
html.modo-sala:has(.sala-cab) .rail { display: none; }
html.modo-sala:has(.sala-cab) .app { padding: 18px 26px 22px; }
html.modo-sala:has(.sala-cab) .contenido { zoom: 1.28; }
html.modo-sala:has(.sala-cab) .sala-modo { color: var(--cian); border-color: var(--cian); }
html.modo-sala:has(.sala-cab) .com-panel { display: none; }

@media (prefers-reduced-motion: reduce) {
    .tendencia-dia .barra-dia i { transition: opacity .2s ease; }
    .pendiente-ir:hover svg { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    @starting-style { .tendencia-dia .barra-dia i { transform: none; } }
}

/* ---------- Resultado del día: producción por área ----------
   Mesas y máquinas enseñan su referencia en gris («Pit: 2.300,00»). Sin la
   cifra de caja el área está vacía: dice «falta» y ofrece «Usar esta cifra». */
.area-fila { gap: 12px; }
.area-nombre { flex: 0 1 250px; min-width: 150px; display: flex; flex-direction: column; }
.area-ref { font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.area-parcial { font-size: 12px; color: var(--naranja); white-space: normal; }
.area-fila .monto.falta { color: var(--naranja); font-weight: 600; }
.area-fila .usar-cifra { height: 30px; padding: 0 12px; flex: none; }

/* =====================================================================
   TELÉFONO
   =====================================================================
   Va al final del archivo para mandar sobre todo lo anterior, y sólo actúa
   en pantallas angostas: en la PC nada de esto existe.

   · El menú de la izquierda se esconde y lo abre «Menú» de la barra de
     abajo, como un cajón que entra desde el borde (curva de cajón, 280 ms).
   · La barra de abajo: inicio, dos módulos, chat y menú, por encima de la
     zona del gesto de inicio del teléfono (safe-area).
   · Lo que estaba de lado a lado se apila; las tablas anchas se desplazan
     de lado dentro de su tarjeta en vez de romper la pantalla.
   · Diálogos y chat ocupan la pantalla: en un teléfono no hay «encima de».
   ===================================================================== */
.barra-movil, .velo-menu { display: none; }

@media (max-width: 760px) {
    /* ---------- el marco ---------- */
    .app { display: block; height: 100dvh; padding: 0; }
    .contenido { height: 100dvh; padding: 12px 14px calc(84px + env(safe-area-inset-bottom)); gap: 14px;
        padding-top: calc(12px + env(safe-area-inset-top)); }

    .rail { position: fixed; z-index: 120; top: 0; bottom: 0; left: 0; width: min(86vw, 320px);
        border-radius: 0 26px 26px 0; padding-top: calc(14px + env(safe-area-inset-top));
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        transform: translateX(-105%); transition: transform 280ms var(--ease-drawer); }
    .menu-movil-abierto .rail { transform: none; }
    .velo-menu { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(10, 12, 16, .45);
        opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease-out); }
    .menu-movil-abierto .velo-menu { opacity: 1; pointer-events: auto; }
    /* Dentro del cajón, los grupos ya no necesitan pasar el ratón: todo grande para el dedo. */
    .rail-item { padding: 9px 10px; font-size: 15px; }
    .rail-sub a { padding: 11px 14px; font-size: 15px; }

    /* ---------- la barra de abajo ---------- */
    .barra-movil { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; z-index: 100;
        left: 0; right: 0; bottom: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        background: var(--sup); box-shadow: 0 -8px 24px rgba(0, 0, 0, .10); border-radius: 22px 22px 0 0; }
    .bm-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        min-height: 54px; border: 0; background: none; border-radius: 16px; color: var(--texto-3);
        font-size: 11px; font-weight: 600; letter-spacing: .01em; text-decoration: none; -webkit-tap-highlight-color: transparent;
        transition: color 150ms ease, background-color 150ms ease; }
    .bm-item:active { background: var(--hundido); }
    .bm-item.activo { color: var(--cian, var(--texto)); }
    .bm-item.activo svg { transform: translateY(-1px); }
    .bm-ico { position: relative; display: grid; place-items: center; }
    .bm-ico .com-badge { position: absolute; top: -6px; right: -12px; }

    /* ---------- cabeceras y tarjetas ---------- */
    .cabecera { gap: 10px; padding: 0; }
    .cabecera h1 { font-size: 24px; white-space: normal; }
    .cabecera .crece { display: none; }
    .cabecera > .btn, .cabecera > button { min-height: 40px; }
    .tarjeta { padding: 18px 16px; border-radius: 22px; gap: 12px; }
    .tarjeta-cab { flex-wrap: wrap; }
    .tarjeta-cab h2 { font-size: 18px; }
    .rejilla-2 { grid-template-columns: 1fr; }

    /* Lo que estaba de lado a lado, apilado. */
    .sala-arriba, .sb-arriba, .sb-abajo, .cec-dos, .sala-ficha-detalle { grid-template-columns: 1fr; }
    /* Sportbook: las cuatro cifras del día de dos en dos, el resultado arriba y entero. */
    .sb-res-dia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .sb-res-cifra { padding: 14px; }
    .sb-res-cifra > b { font-size: 20px; }
    .sb-res-heroe > b { font-size: 32px; }
    .sb-res-mes .tarjeta-cab { align-items: flex-start; }
    .sb-res-mes-total { align-items: flex-start; }
    .sb-gr-eje, .sb-gr-dia, .sb-gr-valor { font-size: 26px; }
    .sb-boveda-nuevo { grid-template-columns: 1fr 1fr; }
    .sb-apertura { flex-wrap: wrap; }
    .sala-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .sc-kpis .principal { grid-column: 1 / -1; }
    .sala-mesas { grid-template-columns: 1fr; }
    .rejilla-3, .rejilla-4, .rejilla-fila2, .rejilla-bloques, .rejilla-vent, .rejilla-ajustes, .rejilla-mesas-cuadre,
    .rejilla-catalogo, .cl-rejilla, .cl-hist-rejilla, .tab-rejilla, .rep-rejilla, .tu-arriba, .sis-rejilla, .sis-marcas,
    .sis-reportes, .sis-usuarios, .sis-mant, .sis-ficha, .hl-rejilla, .seg-guardia, .cec-evidencia-campos, .sc-gr
        { grid-template-columns: minmax(0, 1fr); }
    /* Score · cada mesa: una ficha por mesa. Arriba la mesa y su win; en medio
       fondo, movimiento, entró y hold con su rótulo; abajo, a todo lo ancho, la
       tendencia (también es el botón que abre la gráfica). */
    .sc-planilla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .sc-mf-cab { display: none; }
    .sc-mf { grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .9fr) auto;
        grid-template-areas: "nombre nombre win win acc" "fondo mov entro hold hold" "tend tend tend tend tend";
        column-gap: 8px; row-gap: 6px; padding: 10px 12px; font-size: 14px; align-items: start; }
    .sc-mf > span:nth-child(1) { grid-area: nombre; align-self: center; }
    .sc-mf > span:nth-child(2) { grid-area: fondo; }
    .sc-mf > span:nth-child(3) { grid-area: mov; }
    .sc-mf > span:nth-child(4) { grid-area: entro; }
    .sc-mf > span:nth-child(5) { grid-area: win; align-self: center; font-size: 15px; }
    .sc-mf > span:nth-child(6) { grid-area: tend; }
    .sc-mf > span:nth-child(7) { grid-area: hold; }
    .sc-mf > span:nth-child(8) { grid-area: acc; align-self: center; }
    .sc-mf > span:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(7)) { text-align: left; align-items: flex-start; font-size: 13px; }
    .sc-mf > span[data-l]:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(7))::before { content: attr(data-l); display: block; font-size: 10.5px; font-weight: 500;
        letter-spacing: .02em; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; }
    .sc-mf .acciones { opacity: 1; }
    .sc-mf .acciones .btn-icono { width: 28px; height: 28px; }
    .sc-mf > span.sc-mf-tend { display: block; padding-top: 2px; }
    .sc-tend { width: 100%; height: 28px; }
    .sc-hold-barra { width: 100%; max-width: 56px; }

    /* Ingresos: cada fila es una ficha — cliente y monto arriba, cuándo y estado
       en medio, mesa y folio abajo con sus botones, siempre a la vista. */
    .ing-fila.ing-cab { display: none; }
    .ing-fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cliente monto" "registro estado" "mesa acciones" "folio acciones";
        gap: 4px 12px; padding: 12px 14px; min-height: 0; }
    .ing-fila > span:nth-child(1) { grid-area: folio; font-size: 12px; }
    .ing-fila > span:nth-child(2) { grid-area: registro; }
    .ing-fila > span:nth-child(3) { grid-area: mesa; }
    .ing-fila > span:nth-child(4) { grid-area: cliente; }
    .ing-fila > span:nth-child(5) { display: none; }
    .ing-fila > span:nth-child(6) { grid-area: monto; }
    .ing-fila > span:nth-child(7) { grid-area: estado; padding-left: 0; justify-self: end; }
    .ing-fila > span:nth-child(8) { grid-area: acciones; align-self: center; }
    .ing-fila .acciones { opacity: 1; }
    .ing-fila .dos { line-height: 1.35; }
    .ing-barras { grid-template-columns: minmax(0, 96px) minmax(0, 1fr) auto; gap: 10px; }
    .ing-barras .nombre { max-width: 96px; }

    /* Tablas de filas (zonas, máquinas, tablets, mesas, bitácora): la tabla se
       desliza de lado dentro de su tarjeta; cada fila tiene un mínimo cómodo de leer. */
    :is(div, section):has(> .zn-fila, > .mq-fila, > .tab-fila, > .cf-fila, > .bit-fila, > .mv-fila, > .cp-fila, > .rg-fila, > .tm-fila)
        { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .zn-fila, .mq-fila, .tab-fila, .cf-fila, .bit-fila, .mv-fila, .cp-fila, .rg-fila, .tm-fila { min-width: 760px; }
    /* Lo que va en fila y no cabe, a la línea siguiente. */
    .bit-filtros { grid-template-columns: minmax(0, 1fr); }
    .bit-filtros > * { min-width: 0; }
    .cabecera .fila-flex, .fila.cec-evento, .cec-punto-fila { flex-wrap: wrap; }
    .fila.cec-evento .acciones, .cec-punto-acciones { margin-left: auto; }
    .cec-punto-fila .nombre { flex: 1 1 100%; }
    .cec-punto-acciones { flex: 1 1 100%; flex-wrap: wrap; }
    .cec-punto-acciones .btn { flex: 1 1 auto; min-height: 40px; }

    /* ---------- diálogos: hoja que sube desde abajo ---------- */
    /* Encima del menú (120) y del chat (130): un diálogo siempre es lo de arriba. */
    .modal-fondo { align-items: flex-end; padding: 0; z-index: 140; }
    .modal, .modal.medio, .modal.ancho { width: 100%; max-height: 92dvh; border-radius: 26px 26px 0 0;
        padding-bottom: env(safe-area-inset-bottom); }
    .modal-cab { padding: 20px 18px 6px; }
    .modal-cuerpo { padding: 10px 18px 6px; }
    .modal-pie { padding: 12px 18px 18px; flex-wrap: wrap; }
    .modal-pie .btn { flex: 1; min-height: 46px; }

    /* ---------- chat y llamadas: toda la pantalla ---------- */
    .com-panel { inset: 0; width: auto; border-radius: 0; z-index: 130;
        padding: calc(14px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom)); }
    .com-canales { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px 4px; }
    .com-canales::-webkit-scrollbar { display: none; }
    .com-canal { flex-shrink: 0; }

    /* ---------- avisos: encima de la barra ---------- */
    .avisos { left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); }
    .flotante { min-width: 0; max-width: none; }

    /* ---------- el acceso ---------- */
    .acceso { padding: 0; height: 100dvh; align-items: stretch; }
    .acceso-caja { width: 100%; height: 100dvh; border-radius: 0; box-shadow: none; grid-template-columns: 1fr; padding: 0; }
    .acceso-panel { align-items: flex-start; padding: calc(64px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom)); }
    .acceso-tema { top: calc(12px + env(safe-area-inset-top)); right: 12px; transform: scale(.82); transform-origin: top right; }
    .acceso-logo-movil { display: flex; margin: 0 0 10px; }
    .acceso-form h2 { font-size: 28px; text-align: center; }
    .acceso-form > .nota { text-align: center; }
    .teclado button { height: 56px; }
    .btn-entrar { height: 56px; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
    .rail, .velo-menu { transition: opacity 150ms ease; }
    .rail { opacity: 0; transform: none; pointer-events: none; }
    .menu-movil-abierto .rail { opacity: 1; pointer-events: auto; }
}

/* Aviso de reconexión de OddsCRM web (en la ventana de Windows no existe). */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: grid; place-items: center; position: fixed; inset: 0; z-index: 300; padding: 24px;
    background: rgba(10, 12, 16, .45); animation: aparecer 200ms ease; }
.reconexion-caja { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 260px; max-width: 340px; padding: 24px;
    border-radius: 22px; background: var(--sup); box-shadow: var(--sombra); text-align: center; }
.reconexion-caja p { margin: 0; font-weight: 600; }
.reconexion-caja button { height: 44px; padding: 0 22px; border: 0; border-radius: 22px; background: var(--degradado); color: #fff; font-weight: 600; }
.reconexion-giro { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--linea); border-top-color: var(--cian, #2563FF);
    animation: girar 900ms linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.reconexion .r-intento, .reconexion .r-fallo, .reconexion .r-rechazo { display: none; }
.components-reconnect-show .r-intento, .components-reconnect-failed .r-fallo, .components-reconnect-rejected .r-rechazo { display: block; }
.components-reconnect-failed .reconexion-giro { display: none; }
@media (prefers-reduced-motion: reduce) { .reconexion-giro { animation-duration: 2.4s; } }

/* Un ícono dado vuelta (la flecha de «subir» usada como «descargar»). */
.girado { transform: rotate(180deg); }

/* Resultado del día: en el teléfono la referencia y su diferencia bajan de línea en vez de cortarse.
   Un área sin la cifra de caja no cabe en una línea (nombre, referencia, «Usar esta cifra» y
   «falta»): el nombre y su referencia van arriba a todo lo ancho, y el botón y «falta» debajo. */
@media (max-width: 760px) {
    .area-ref { white-space: normal; }
    .area-fila.area-falta { flex-wrap: wrap; row-gap: 8px; }
    .area-fila.area-falta .area-nombre { flex: 1 1 100%; min-width: 0; }
    .area-fila.area-falta > .crece { display: none; }
    .area-fila.area-falta .usar-cifra { height: 40px; padding: 0 16px; touch-action: manipulation; }
    .area-fila.area-falta .monto.falta { min-width: 0; margin-left: auto; }
}