/* ============================================================
   ESTILOS GLOBALES DEL PANEL DE ADMINISTRACIÓN

   Aquí van tres cosas y solo tres:

     1. LA PALETA, en variables CSS. Antes cada color estaba escrito
        a mano en los siete .razor.css, y cambiar un acento obligaba
        a tocar los siete ficheros y a acordarse de todos. Ahora se
        cambia en un sitio.

     2. LOS TRES TEMAS (oscuro, claro y alto contraste). Solo se
        redefinen las variables: ninguna pantalla sabe qué tema está
        puesto, y por eso una pantalla nueva funciona en los tres sin
        escribir una línea de más.

     3. Lo poco que es común a todas las pantallas: tipografía, fondo
        y el aviso de reconexión de Blazor.

   Todo lo demás vive en el .razor.css de cada componente, igual que
   en la PWA: así los estilos de una pantalla no pueden filtrarse a
   otra sin querer.
   ============================================================ */


/* ============================================================
   TEMA OSCURO · el de por defecto

   Los fondos son un punto más CÁLIDOS que los de antes (#10151c,
   #18202b) a propósito: con tanto turquesa en pantalla, un gris frío
   hacía que todo el panel pareciera azulado.
   ============================================================ */

:root {

    /* Le dice al navegador que el panel es oscuro. Sin esto, lo que pinta
       el propio navegador —la lista que se abre en un desplegable, las
       barras de scroll— salía con sus colores claros de sistema: una lista
       blanca encima del panel oscuro. El tema de contraste también es
       oscuro y lo hereda de aquí. */
    color-scheme: dark;

    /* --- Acentos --- */

    /* El turquesa manda: sustituye a los azules #4da3ff y #2b6cb0 en
       TODO el panel. Ya se usaba para identificar la modalidad
       surface, así que el panel y la tablet hablan el mismo idioma. */
    --acento:        #17BEBB;
    --acento-fuerte: #3ED6D3;
    /* En los componentes se usa rgba(var(--acento-rgb), .12) para los
       rellenos suaves. Va aparte porque rgba() no sabe descomponer un
       color guardado en otra variable, y así cada tema cambia el tinte
       sin repetir el número mágico en cada pantalla. */
    --acento-rgb:    23, 190, 187;
    --sobre-acento:  #06181A;   /* texto encima de un relleno turquesa */

    /* Secundario. Identifica la modalidad squirt, igual que el
       turquesa identifica surface. */
    --squirt:        #5B9BD5;
    --squirt-rgb:    91, 155, 213;

    /* Atención: lo que está a medio montar y hay que resolver antes de
       empezar — un puesto sin asignar, un dato que no ha llegado. No es
       un error, y por eso no es rojo. */
    --atencion:      #D9748C;
    --atencion-rgb:  217, 116, 140;

    /* Dorsal y puntos. El ámbar es siempre RELLENO con texto oscuro
       encima; para texto suelto está --ambar-texto, que en el tema
       claro tiene que oscurecerse o no se lee. */
    --ambar:         #FFD94A;
    --ambar-rgb:     255, 217, 74;
    --ambar-texto:   #FFD94A;
    --sobre-ambar:   #14181D;

    /* --- Estados --- */

    --verde:         #4ADE80;   /* conectado, validado */
    --verde-rgb:     74, 222, 128;
    --naranja:       #E08B3A;   /* multiplicador */
    --naranja-rgb:   224, 139, 58;

    /* Aguamarina: un verde azulado que se distingue del turquesa del acento sin
       pelearse con él. Se añadió para tener un cuarto tono de cabecera. */
    --aqua:          #58D6C0;
    --aqua-rgb:      88, 214, 192;
    --espera:        #D9A441;   /* esperando datos */
    --inactivo:      #3D4A59;   /* puesto libre, sin conectar */

    /* Acciones que quitan o cortan: dar de baja, liberar, finalizar.
       Rojo apagado a propósito: son reversibles, no catástrofes. */
    --peligro:        #B4544F;
    --peligro-fuerte: #C96662;
    --exito:          #2F9E5C;  /* dar de alta, iniciar competición */
    --exito-fuerte:   #38B96C;
    --sobre-accion:   #FFFFFF;

    /* --- La cinta superior ---

       Es una banda OSCURA en los tres temas, igual que la barra de la tablet
       del juez. No es capricho: el logotipo de Conersys tiene el texto en
       blanco y es el único que usamos, así que si la cinta se aclarara con el
       tema claro el nombre desaparecería.

       Consecuencia: los colores de texto de la cinta tampoco pueden salir de
       --texto ni de --apagado, que sí cambian. Van en su propio juego. */
    --barra:         #1A1F26;
    --barra-borde:   #2D3742;
    --barra-texto:   #E8EEF5;
    --barra-apagado: #8A9AAB;

    /* --- Fondos, de más oscuro a más claro --- */

    /* El lienzo. Bastante más oscuro que la tarjeta a propósito: con ocho
       puntos de diferencia las tarjetas se perdían en el fondo y la pantalla
       se leía como una sola caja enorme. */
    --bg:            #0F1319;   /* el lienzo */
    --lateral:       #1A1F26;   /* cabecera y barras */
    --card:          #1C2128;   /* tarjeta */

    /* La fila tiene que verse CLARAMENTE dentro de la tarjeta: es lo que
       separa una persona de la siguiente en las tablas. Con un tono casi igual
       al de la tarjeta no separaba nada. */
    --fila:          #29323D;   /* fila dentro de una tarjeta */
    --borde:         #2D3742;

    /* --- Texto, de más a menos presente --- */

    --texto:         #E8EEF5;
    --claro:         #B9C6D4;
    --apagado:       #8A9AAB;
    --tenue:         #64748B;   /* rótulos en versalita */
    --gris:          #4A5867;   /* guiones y valores vacíos */

    /* --- Tipografía ---

       Barlow Condensed para cifras y titulares: es estrecha, así que
       un dorsal o una puntuación de tres cifras cabe grande sin
       empujar al resto. Barlow para el texto corrido.

       La pila de reserva NO es adorno: el servidor de IIS puede no
       tener salida a internet, y entonces Google Fonts no carga. Con
       Arial Narrow detrás los titulares siguen siendo estrechos, en
       vez de descolocar la maqueta. */
    --display:       "Barlow Condensed", "Arial Narrow", "Segoe UI Condensed", system-ui, sans-serif;
    --cuerpo:        Barlow, "Segoe UI", system-ui, -apple-system, sans-serif;

    /* --- Formas --- */

    --radio:         14px;
    --radio-chico:   8px;
    --radio-mini:    6px;
}


/* ============================================================
   TEMA CLARO

   No es el oscuro con los grises dados la vuelta: el turquesa y el
   ámbar de texto se OSCURECEN, porque los tonos que brillan sobre
   #14181D desaparecen sobre blanco. Los rellenos (el dorsal, los
   botones) mantienen su color, que ahí sí funciona.
   ============================================================ */

:root[data-theme="light"] {
    color-scheme: light;

    --acento:        #0E8F8D;
    --acento-fuerte: #0B7573;
    --acento-rgb:    14, 143, 141;
    --sobre-acento:  #FFFFFF;

    --squirt:        #2F6FA8;
    --squirt-rgb:    47, 111, 168;

    --atencion:      #B34A67;
    --atencion-rgb:  179, 74, 103;

    /* El relleno del dorsal sigue siendo el amarillo vivo; lo que
       cambia es el tinte suave y el ámbar de texto. */
    --ambar:         #FFD94A;
    --ambar-rgb:     201, 145, 5;
    --ambar-texto:   #8A6A00;
    --sobre-ambar:   #14181D;

    --verde:         #15803D;
    --verde-rgb:     21, 128, 61;
    --naranja:       #B45F12;
    --naranja-rgb:   180, 95, 18;
    --aqua:          #12897A;
    --aqua-rgb:      18, 137, 122;
    --espera:        #9A6E00;
    --inactivo:      #B6C1CD;

    --peligro:        #A33A36;
    --peligro-fuerte: #8C2F2C;
    --exito:          #15803D;
    --exito-fuerte:   #116932;

    /* La cinta superior NO se redefine aquí a propósito: hereda los valores
       oscuros de :root. Es lo que hace que el logotipo de texto blanco siga
       leyéndose con el tema claro puesto. */

    /* En claro el lienzo se aleja del blanco de la tarjeta lo suficiente para
       que se note el borde de cada una sin necesidad de sombras fuertes. */
    --bg:            #E4EAF1;
    --lateral:       #FFFFFF;
    --card:          #FFFFFF;
    --fila:          #EDF2F8;
    --borde:         #C9D5E2;

    --texto:         #101820;
    --claro:         #35434F;
    --apagado:       #5B6B7A;
    --tenue:         #6E7D8C;
    --gris:          #97A4B1;
}


/* ============================================================
   ALTO CONTRASTE

   Para la carpa a pleno sol y para quien no distingue bien los
   grises: negro puro, texto blanco y BORDES BLANCOS. El borde blanco
   es lo que de verdad separa las cajas cuando la pantalla está lavada
   por el sol, porque ahí los fondos apenas se distinguen entre sí.
   ============================================================ */

:root[data-theme="contrast"] {

    /* Los MISMOS tonos de la paleta, subidos de intensidad hasta el punto en
       que aguantan el reflejo del sol. No son colores nuevos: el turquesa
       sigue siendo turquesa y el rosa sigue siendo rosa, solo que a pleno
       brillo. Un color apagado aquí no se distingue del gris. */
    --acento:        #45FFFB;
    --acento-fuerte: #A8FFFD;
    --acento-rgb:    69, 255, 251;
    --sobre-acento:  #000000;

    --squirt:        #9FD2FF;
    --squirt-rgb:    159, 210, 255;

    --atencion:      #FFA8BE;
    --atencion-rgb:  255, 168, 190;

    --ambar:         #FFE600;
    --ambar-rgb:     255, 230, 0;
    --ambar-texto:   #FFE600;
    --sobre-ambar:   #000000;

    --verde:         #00FF66;
    --verde-rgb:     0, 255, 102;
    --naranja:       #FFB55C;
    --naranja-rgb:   255, 181, 92;
    --aqua:          #6BFFE6;
    --aqua-rgb:      107, 255, 230;
    --espera:        #FFD84D;
    --inactivo:      #7C8B9B;

    --peligro:        #FF6B6B;
    --peligro-fuerte: #FF9494;
    --exito:          #00A84B;
    --exito-fuerte:   #00C75A;
    --sobre-accion:   #000000;

    /* La cinta sí baja a negro aquí, con borde blanco: en alto contraste lo
       que separa las zonas es el borde, no el fondo. */
    --barra:         #000000;
    --barra-borde:   #FFFFFF;
    --barra-texto:   #FFFFFF;
    --barra-apagado: #E4EEF7;

    /* SEPARACIÓN REAL ENTRE TARJETA Y FONDO

       El fondo del panel era #000 y el de la tarjeta #0A0F14: sobre el papel
       son distintos, pero a pleno sol y en un móvil son el mismo negro, y toda
       la pantalla se leía como una sola tarjeta gigante.

       Ahora hay tres escalones bien separados —negro, gris muy oscuro, gris
       oscuro— y además la tarjeta lleva borde blanco. En alto contraste el
       borde es quien de verdad dibuja los bordes de las cosas; el fondo solo
       ayuda. */
    --bg:            #000000;
    --lateral:       #0B1219;
    --card:          #16202A;
    --fila:          #24313E;
    --borde:         #FFFFFF;

    --texto:         #FFFFFF;
    --claro:         #FFFFFF;
    --apagado:       #E4EEF7;
    --tenue:         #C9D6E3;
    --gris:          #C9D6E3;
}


/* ============================================================
   BASE
   ============================================================ */

* { box-sizing: border-box; }

html,
body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--texto);
    font-family: var(--cuerpo);
    -webkit-font-smoothing: antialiased;
}

/* El cambio de tema se nota sin dar un salto seco. Solo el color:
   animar más provoca tirones al repintar listas largas. */
body {
    transition: background-color .15s linear, color .15s linear;
}

/* Las opciones de los desplegables, con el fondo y el texto de las
   tarjetas. color-scheme ya oscurece la lista, pero con el gris del
   sistema; así sale del mismo tono que el panel en los tres temas. */
option {
    background: var(--card);
    color: var(--texto);
}

a {
    color: var(--acento);
}

a:hover {
    color: var(--acento-fuerte);
}

/* Estado "esperando datos". Se usa en varias pantallas, por eso es
   global y no de ninguna en concreto. */
.espera {
    color: var(--espera);
    font-style: italic;
}

/* El foco SIEMPRE visible y en turquesa. Los navegadores lo pintan
   con un azul propio que ahora desentonaría, y quitarlo sin más
   dejaría el panel inservible con el teclado. */
:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}


/* ============================================================
   AVISO DE RECONEXIÓN DE BLAZOR

   Por defecto sale un recuadro blanco enorme que desentona con todo;
   esto lo deja discreto y abajo del todo. El rojo va escrito a mano y
   no en una variable: es un aviso del navegador, no del panel, y tiene
   que verse igual en los tres temas.
   ============================================================ */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #7f1d1d;
    color: #fff;
    padding: .75rem 1.5rem;
    font-size: .9rem;
    z-index: 1000;
}

#blazor-error-ui a {
    color: #fff;
    text-decoration: underline;
    margin-left: .5rem;
}

/* ==========================================
   LAS BARRAS DE DESPLAZAMIENTO

   Por defecto las pinta el sistema operativo, que no sabe nada de nuestra
   paleta: en el tema oscuro salían blancas y se veían más que el contenido que
   estaban desplazando.

   Se declaran las DOS formas porque ningún navegador entiende las dos:
   scrollbar-color es el estándar (Firefox y Chrome moderno) y ::-webkit- lo
   entienden Safari y los Chrome antiguos. La que no se entienda se ignora sin
   romper nada.
   ========================================== */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--borde) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--borde);
    border-radius: 999px;

    /* El borde transparente deja aire alrededor del pulgar sin necesidad de
       márgenes: se ve más fino de lo que ocupa, que es lo que se quiere. */
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--apagado);
    background-clip: content-box;
}