/* =============================================================================
   TEMA VISUAL — Pollo a Casa
   -----------------------------------------------------------------------------
   Identidad BLANCA Y ROJA, autorizada en el Bloque 11. Reemplaza a la paleta
   provisoria del Bloque 10 (crema y naranja).

     Rojo principal  #D71920      Blanco      #FFFFFF
     Gris claro      #F3F4F6      Carbón      #22252B

   CRITERIO DE USO, que es lo que evita que una paleta de dos colores se vuelva
   ilegible:

     - El ROJO es de ACCIÓN: botones, pestaña activa, acentos. Nunca un fondo
       extenso — una pantalla roja entera cansa y pierde contraste.
     - El BLANCO y el GRIS CLARO son superficie: fondos, tarjetas, áreas de
       trabajo. Es donde vive el contenido.
     - El CARBÓN es tinta y cabecera. Da el contraste que el rojo no puede dar.

   Sobre el rojo va blanco (#D71920 contra #FFFFFF da 4,8:1, legible). Sobre el
   carbón va blanco. El rojo NUNCA va sobre el gris claro como texto: 4,2:1 no
   alcanza para texto chico.

   EN TEMA OSCURO el rol "primary" lo toma un rojo más claro, igual de medido: el
   #D71920 sobre un fondo oscuro cae por debajo de lo legible, que es el mismo
   motivo por el que el primer cliente usa ahí su variante clara.

   NO HAY ESCUDOS NI RECURSOS DE NINGÚN CLUB: la inspiración cromática es eso,
   inspiración. Acá hay colores y nada más.
   ========================================================================== */

/* ---- Panel: identidad --------------------------------------------------- */
:root {
    --panel-profundo: #22252B;   /* cabecera y tinta sobre el acento */
    --panel-oscuro: #A5131A;     /* rojo oscurecido, para estados presionados */
    --panel-principal: #D71920;  /* el rojo de la marca: acciones */
    --panel-claro: #F2666B;      /* variante clara, para fondo oscuro */
    --panel-acento: #D71920;
    --panel-acento-nav: #FFFFFF; /* texto de navegación sobre la cabecera carbón */
    --panel-suave: #F3F4F6;
    --panel-texto: #22252B;
    --panel-texto-suave: #5C6068;

    /* Los tres cuadrados de icono del inicio. En una paleta de dos colores no
       pueden ser tres colores distintos sin inventar marca: son el rojo y dos
       grados de carbón, que es lo que la identidad tiene. */
    --panel-tile-1: #D71920;
    --panel-tile-2: #22252B;
    --panel-tile-3: #5C6068;

    /* Roles con tinte de marca. El fondo es el gris claro de la paleta, no un
       rosado: un fondo teñido de rojo es exactamente lo que hay que evitar. */
    --color-bg: #F3F4F6;
    --color-border: #E3E5E9;
    --color-border-strong: #CBCED4;
    --color-primary-soft: rgba(215, 25, 32, 0.08);
    --color-accent-strong: #A5131A;
    --color-row-alt: rgba(34, 37, 43, 0.025);
    --color-muted-bg: #EDEEF1;
    --color-info-border: #D8DBE1;
    --color-info-text: #3F434B;

    --shadow-sm: 0 1px 2px rgba(34, 37, 43, 0.05);
    --shadow-md: 0 4px 14px rgba(34, 37, 43, 0.07);
    --shadow-lg: 0 16px 40px rgba(34, 37, 43, 0.16);
    --shadow-card: 0 10px 30px rgba(34, 37, 43, 0.08);
    --focus-ring: 0 0 0 3px rgba(215, 25, 32, 0.3);
}

/* ---- Panel: tema oscuro -------------------------------------------------- */
:root[data-theme="dark"] {
    --color-bg: #15171B;
    --color-surface: #1D2025;
    --color-surface-alt: #24272D;
    --color-border: #31343B;
    --color-border-strong: #44484F;

    /* El rojo de la marca no tiene contraste suficiente sobre fondo oscuro: en
       tema oscuro el rol "primary" lo toma su variante clara. */
    --color-primary: var(--panel-claro);
    --color-primary-dark: #F28E91;
    --color-primary-soft: rgba(242, 102, 107, 0.16);
    --color-on-primary: #1A0607;

    --color-header-bg: #15171B;

    --color-muted-bg: #272A31;
    --color-info-bg: #22252B;
    --color-info-border: #3A3E46;
    --color-info-text: #D3D6DC;

    --focus-ring: 0 0 0 3px rgba(242, 102, 107, 0.45);
}

/* ---- Acceso: los 28 tokens de la pantalla pública ------------------------ */
.login-page {
    --brand-deep: #22252B;
    --brand-primary: #A5131A;
    /* CARBÓN, no rojo, y es una decisión medida. --brand-strong hace dos trabajos en esta
       pantalla: es el fondo de los cuadrados de icono Y el color del glifo que va encima sale de
       --brand-accent. Con los dos en rojo, el icono desaparecía sobre su propio cuadrado: se vio
       en la previsualización. Con el cuadrado en carbón, el glifo rojo se lee, y el rojo queda
       reservado para lo que es acción. El primer cliente resuelve lo mismo con azul y amarillo. */
    --brand-strong: #2E323A;
    --brand-strong-high: #3C414B;
    --brand-light: #F2666B;
    --brand-accent: #D71920;
    --brand-accent-title: #F2666B;
    --brand-wash: #F3F4F6;
    --brand-wash-soft: #FFFFFF;
    --brand-ink: #22252B;
    --brand-ink-soft: #5C6068;

    --brand-primary-none: rgba(165, 19, 26, 0);
    --brand-mid: #2A2D34;
    --brand-edge: #33373F;
    --brand-accent-high: #E8323A;
    --brand-accent-shadow: rgba(215, 25, 32, 0.32);
    --brand-accent-shadow-high: rgba(215, 25, 32, 0.42);
    --brand-veil: rgba(34, 37, 43, 0.9);
    --brand-veil-mid: rgba(34, 37, 43, 0.45);
    --brand-veil-none: rgba(34, 37, 43, 0);
    --brand-seam: rgba(255, 255, 255, 0.72);
    --brand-seam-none: rgba(255, 255, 255, 0);
    /* Sobre el rojo va blanco: la tinta carbón encima del rojo no llega a 3:1. */
    --brand-accent-ink: #FFFFFF;
    --brand-halo: rgba(215, 25, 32, 0.26);
    --brand-halo-none: rgba(215, 25, 32, 0);
    --brand-card-shadow: rgba(34, 37, 43, 0.16);
    --brand-card-shadow-soft: rgba(34, 37, 43, 0.07);
    --brand-google-shadow: rgba(34, 37, 43, 0.1);
}