/* ==========================================================================
   TEMA — LA PALETA DE TODO EL SISTEMA

   Este es el archivo que se toca para aplicar los colores corporativos de un
   cliente. Son CINCO colores. Nada mas abajo en esta hoja hace falta editarlo:
   todo lo demas se deriva.

   POR QUE EXISTE
   Los colores estaban en tres lugares a la vez: las clases de Bootstrap
   escritas en cada vista (1039 usos de bg-*, text-*, badge bg-*), los valores
   fijos de las trece hojas propias, y la paleta del menu en site.css. Cambiar
   "el azul" obligaba a perseguirlo por todos lados, y siempre quedaba alguno.

   COMO FUNCIONA
   Bootstrap 5.3 arma cada componente a partir de variables --bs-*. En lugar de
   reescribir sus reglas, esta hoja las REDEFINE apuntandolas a la paleta de
   abajo. Por eso no hace falta tocar ninguna vista ni usar un solo !important.

   Las utilidades .text-* y .bg-* leen --bs-<color>-rgb, asi que con redefinir
   esa variable se repintan los 1039 usos de una sola vez. Los botones solidos
   son la excepcion: Bootstrap les compila el color literal, y hay que
   puentearlos clase por clase (mas abajo).

   ORDEN DE CARGA (importante)
   bootstrap.min.css  ->  tema.css  ->  site.css  ->  hoja de la pantalla
   Si tema.css se carga ANTES que Bootstrap, Bootstrap lo pisa y no pasa nada.

   HISTORIA DE UN VALOR
   Convivian dos azules: el de Bootstrap (#0d6efd) en botones y enlaces, y el
   propio (#3b82f6) en el menu y los acentos. Se unificaron en el propio, que
   es la identidad de la aplicacion; el de Bootstrap ya no existe en el
   sistema. Los cuatro semanticos siguen el mismo criterio: los del tema, no
   los de la libreria.
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       LOS CINCO COLORES. Esto es lo unico que se cambia por cliente.

       Cada uno va DOS veces: el hex y su version en componentes RGB sueltos.
       El duplicado es inevitable -- las utilidades de Bootstrap construyen
       rgba(R,G,B,opacidad) para poder atenuar, y CSS no sabe partir un hex en
       sus componentes. Si se cambia uno hay que cambiar el otro, o los badges
       y los textos de color quedan con el tono viejo.
       ---------------------------------------------------------------------- */
    --sga-marca: #3b82f6;
    --sga-marca-rgb: 59, 130, 246;

    --sga-exito: #10b981;
    --sga-exito-rgb: 16, 185, 129;

    --sga-advertencia: #f59e0b;
    --sga-advertencia-rgb: 245, 158, 11;

    --sga-peligro: #ef4444;
    --sga-peligro-rgb: 239, 68, 68;

    --sga-info: #06b6d4;
    --sga-info-rgb: 6, 182, 212;

    /* El neutro no es un color de marca: es el gris de las acciones
       secundarias. Se deja aparte a proposito para que cambiar la marca no se
       lo lleve puesto. */
    --sga-neutro: #6b7280;
    --sga-neutro-rgb: 107, 114, 128;

    /* ----------------------------------------------------------------------
       DERIVADOS. No se editan: salen de los cinco de arriba con color-mix.

       Cuatro variantes por color, que son las que Bootstrap necesita:
         -oscuro   el hover y el estado activo de un boton
         -fuerte   texto sobre fondo claro (el titulo de una alerta)
         -suave    fondo de una alerta o de una fila resaltada
         -borde    el borde de esa alerta

       Se calculan en vez de escribirse para que cambiar un color de arriba
       arrastre sus cuatro variantes. Escritos a mano, la primera marca
       corporativa que entre va a dejar hovers del color anterior.
       ---------------------------------------------------------------------- */
    --sga-marca-oscuro: color-mix(in srgb, var(--sga-marca) 82%, #000);
    --sga-marca-fuerte: color-mix(in srgb, var(--sga-marca) 72%, #000);
    --sga-marca-suave: color-mix(in srgb, var(--sga-marca) 12%, #fff);
    --sga-marca-borde: color-mix(in srgb, var(--sga-marca) 32%, #fff);

    --sga-exito-oscuro: color-mix(in srgb, var(--sga-exito) 82%, #000);
    --sga-exito-fuerte: color-mix(in srgb, var(--sga-exito) 72%, #000);
    --sga-exito-suave: color-mix(in srgb, var(--sga-exito) 12%, #fff);
    --sga-exito-borde: color-mix(in srgb, var(--sga-exito) 32%, #fff);

    --sga-advertencia-oscuro: color-mix(in srgb, var(--sga-advertencia) 82%, #000);
    --sga-advertencia-fuerte: color-mix(in srgb, var(--sga-advertencia) 72%, #000);
    --sga-advertencia-suave: color-mix(in srgb, var(--sga-advertencia) 14%, #fff);
    --sga-advertencia-borde: color-mix(in srgb, var(--sga-advertencia) 34%, #fff);

    --sga-peligro-oscuro: color-mix(in srgb, var(--sga-peligro) 82%, #000);
    --sga-peligro-fuerte: color-mix(in srgb, var(--sga-peligro) 72%, #000);
    --sga-peligro-suave: color-mix(in srgb, var(--sga-peligro) 12%, #fff);
    --sga-peligro-borde: color-mix(in srgb, var(--sga-peligro) 32%, #fff);

    --sga-info-oscuro: color-mix(in srgb, var(--sga-info) 82%, #000);
    --sga-info-fuerte: color-mix(in srgb, var(--sga-info) 72%, #000);
    --sga-info-suave: color-mix(in srgb, var(--sga-info) 12%, #fff);
    --sga-info-borde: color-mix(in srgb, var(--sga-info) 32%, #fff);

    --sga-neutro-oscuro: color-mix(in srgb, var(--sga-neutro) 82%, #000);
    --sga-neutro-fuerte: color-mix(in srgb, var(--sga-neutro) 72%, #000);
    --sga-neutro-suave: color-mix(in srgb, var(--sga-neutro) 12%, #fff);
    --sga-neutro-borde: color-mix(in srgb, var(--sga-neutro) 32%, #fff);

    /* ----------------------------------------------------------------------
       TEXTO SOBRE EL COLOR. Que se lee cuando el color pasa a ser el fondo
       (un boton relleno, un badge). Amarillo e info piden texto negro; el
       resto, blanco. Si se cambia un color por uno mucho mas claro u oscuro,
       ESTO es lo que hay que revisar: es donde se pierde el contraste.
       ---------------------------------------------------------------------- */
    --sga-sobre-marca: #fff;
    --sga-sobre-exito: #fff;
    --sga-sobre-advertencia: #000;
    --sga-sobre-peligro: #fff;
    --sga-sobre-info: #000;
    --sga-sobre-neutro: #fff;
}

/* ==========================================================================
   PUENTE A BOOTSTRAP

   Redefinir estas variables alcanza para las utilidades (.text-*, .bg-*,
   .border-*), los badges, las alertas, los enlaces y las tablas de color.
   ========================================================================== */

:root {
    --bs-primary: var(--sga-marca);
    --bs-primary-rgb: var(--sga-marca-rgb);
    --bs-primary-text-emphasis: var(--sga-marca-fuerte);
    --bs-primary-bg-subtle: var(--sga-marca-suave);
    --bs-primary-border-subtle: var(--sga-marca-borde);

    --bs-success: var(--sga-exito);
    --bs-success-rgb: var(--sga-exito-rgb);
    --bs-success-text-emphasis: var(--sga-exito-fuerte);
    --bs-success-bg-subtle: var(--sga-exito-suave);
    --bs-success-border-subtle: var(--sga-exito-borde);

    --bs-warning: var(--sga-advertencia);
    --bs-warning-rgb: var(--sga-advertencia-rgb);
    --bs-warning-text-emphasis: var(--sga-advertencia-fuerte);
    --bs-warning-bg-subtle: var(--sga-advertencia-suave);
    --bs-warning-border-subtle: var(--sga-advertencia-borde);

    --bs-danger: var(--sga-peligro);
    --bs-danger-rgb: var(--sga-peligro-rgb);
    --bs-danger-text-emphasis: var(--sga-peligro-fuerte);
    --bs-danger-bg-subtle: var(--sga-peligro-suave);
    --bs-danger-border-subtle: var(--sga-peligro-borde);

    --bs-info: var(--sga-info);
    --bs-info-rgb: var(--sga-info-rgb);
    --bs-info-text-emphasis: var(--sga-info-fuerte);
    --bs-info-bg-subtle: var(--sga-info-suave);
    --bs-info-border-subtle: var(--sga-info-borde);

    --bs-secondary: var(--sga-neutro);
    --bs-secondary-rgb: var(--sga-neutro-rgb);
    --bs-secondary-text-emphasis: var(--sga-neutro-fuerte);
    --bs-secondary-bg-subtle: var(--sga-neutro-suave);
    --bs-secondary-border-subtle: var(--sga-neutro-borde);

    /* Enlaces y foco: sin esto el sistema queda con dos azules otra vez, uno
       en los botones y otro en cualquier <a>. */
    --bs-link-color: var(--sga-marca);
    --bs-link-color-rgb: var(--sga-marca-rgb);
    --bs-link-hover-color: var(--sga-marca-oscuro);
    --bs-focus-ring-color: rgba(var(--sga-marca-rgb), .25);
}

/* ==========================================================================
   BOTONES

   La excepcion: Bootstrap le compila a cada .btn-<variante> su color literal,
   asi que aqui no alcanza con la paleta global. Se puentea variante por
   variante. Es mecanico y aburrido, pero es la unica parte que lo necesita.
   ========================================================================== */

.btn-primary {
    --bs-btn-color: var(--sga-sobre-marca);
    --bs-btn-bg: var(--sga-marca);
    --bs-btn-border-color: var(--sga-marca);
    --bs-btn-hover-color: var(--sga-sobre-marca);
    --bs-btn-hover-bg: var(--sga-marca-oscuro);
    --bs-btn-hover-border-color: var(--sga-marca-oscuro);
    --bs-btn-active-color: var(--sga-sobre-marca);
    --bs-btn-active-bg: var(--sga-marca-oscuro);
    --bs-btn-active-border-color: var(--sga-marca-oscuro);
    --bs-btn-disabled-color: var(--sga-sobre-marca);
    --bs-btn-disabled-bg: var(--sga-marca);
    --bs-btn-disabled-border-color: var(--sga-marca);
}

.btn-outline-primary {
    --bs-btn-color: var(--sga-marca);
    --bs-btn-border-color: var(--sga-marca);
    --bs-btn-hover-color: var(--sga-sobre-marca);
    --bs-btn-hover-bg: var(--sga-marca);
    --bs-btn-hover-border-color: var(--sga-marca);
    --bs-btn-active-color: var(--sga-sobre-marca);
    --bs-btn-active-bg: var(--sga-marca);
    --bs-btn-active-border-color: var(--sga-marca);
    --bs-btn-disabled-color: var(--sga-marca);
    --bs-btn-disabled-border-color: var(--sga-marca);
}

.btn-success {
    --bs-btn-color: var(--sga-sobre-exito);
    --bs-btn-bg: var(--sga-exito);
    --bs-btn-border-color: var(--sga-exito);
    --bs-btn-hover-color: var(--sga-sobre-exito);
    --bs-btn-hover-bg: var(--sga-exito-oscuro);
    --bs-btn-hover-border-color: var(--sga-exito-oscuro);
    --bs-btn-active-color: var(--sga-sobre-exito);
    --bs-btn-active-bg: var(--sga-exito-oscuro);
    --bs-btn-active-border-color: var(--sga-exito-oscuro);
    --bs-btn-disabled-color: var(--sga-sobre-exito);
    --bs-btn-disabled-bg: var(--sga-exito);
    --bs-btn-disabled-border-color: var(--sga-exito);
}

.btn-outline-success {
    --bs-btn-color: var(--sga-exito);
    --bs-btn-border-color: var(--sga-exito);
    --bs-btn-hover-color: var(--sga-sobre-exito);
    --bs-btn-hover-bg: var(--sga-exito);
    --bs-btn-hover-border-color: var(--sga-exito);
    --bs-btn-active-color: var(--sga-sobre-exito);
    --bs-btn-active-bg: var(--sga-exito);
    --bs-btn-active-border-color: var(--sga-exito);
    --bs-btn-disabled-color: var(--sga-exito);
    --bs-btn-disabled-border-color: var(--sga-exito);
}

.btn-warning {
    --bs-btn-color: var(--sga-sobre-advertencia);
    --bs-btn-bg: var(--sga-advertencia);
    --bs-btn-border-color: var(--sga-advertencia);
    --bs-btn-hover-color: var(--sga-sobre-advertencia);
    --bs-btn-hover-bg: var(--sga-advertencia-oscuro);
    --bs-btn-hover-border-color: var(--sga-advertencia-oscuro);
    --bs-btn-active-color: var(--sga-sobre-advertencia);
    --bs-btn-active-bg: var(--sga-advertencia-oscuro);
    --bs-btn-active-border-color: var(--sga-advertencia-oscuro);
    --bs-btn-disabled-color: var(--sga-sobre-advertencia);
    --bs-btn-disabled-bg: var(--sga-advertencia);
    --bs-btn-disabled-border-color: var(--sga-advertencia);
}

.btn-outline-warning {
    --bs-btn-color: var(--sga-advertencia);
    --bs-btn-border-color: var(--sga-advertencia);
    --bs-btn-hover-color: var(--sga-sobre-advertencia);
    --bs-btn-hover-bg: var(--sga-advertencia);
    --bs-btn-hover-border-color: var(--sga-advertencia);
    --bs-btn-active-color: var(--sga-sobre-advertencia);
    --bs-btn-active-bg: var(--sga-advertencia);
    --bs-btn-active-border-color: var(--sga-advertencia);
    --bs-btn-disabled-color: var(--sga-advertencia);
    --bs-btn-disabled-border-color: var(--sga-advertencia);
}

.btn-danger {
    --bs-btn-color: var(--sga-sobre-peligro);
    --bs-btn-bg: var(--sga-peligro);
    --bs-btn-border-color: var(--sga-peligro);
    --bs-btn-hover-color: var(--sga-sobre-peligro);
    --bs-btn-hover-bg: var(--sga-peligro-oscuro);
    --bs-btn-hover-border-color: var(--sga-peligro-oscuro);
    --bs-btn-active-color: var(--sga-sobre-peligro);
    --bs-btn-active-bg: var(--sga-peligro-oscuro);
    --bs-btn-active-border-color: var(--sga-peligro-oscuro);
    --bs-btn-disabled-color: var(--sga-sobre-peligro);
    --bs-btn-disabled-bg: var(--sga-peligro);
    --bs-btn-disabled-border-color: var(--sga-peligro);
}

.btn-outline-danger {
    --bs-btn-color: var(--sga-peligro);
    --bs-btn-border-color: var(--sga-peligro);
    --bs-btn-hover-color: var(--sga-sobre-peligro);
    --bs-btn-hover-bg: var(--sga-peligro);
    --bs-btn-hover-border-color: var(--sga-peligro);
    --bs-btn-active-color: var(--sga-sobre-peligro);
    --bs-btn-active-bg: var(--sga-peligro);
    --bs-btn-active-border-color: var(--sga-peligro);
    --bs-btn-disabled-color: var(--sga-peligro);
    --bs-btn-disabled-border-color: var(--sga-peligro);
}

.btn-info {
    --bs-btn-color: var(--sga-sobre-info);
    --bs-btn-bg: var(--sga-info);
    --bs-btn-border-color: var(--sga-info);
    --bs-btn-hover-color: var(--sga-sobre-info);
    --bs-btn-hover-bg: var(--sga-info-oscuro);
    --bs-btn-hover-border-color: var(--sga-info-oscuro);
    --bs-btn-active-color: var(--sga-sobre-info);
    --bs-btn-active-bg: var(--sga-info-oscuro);
    --bs-btn-active-border-color: var(--sga-info-oscuro);
    --bs-btn-disabled-color: var(--sga-sobre-info);
    --bs-btn-disabled-bg: var(--sga-info);
    --bs-btn-disabled-border-color: var(--sga-info);
}

.btn-outline-info {
    --bs-btn-color: var(--sga-info);
    --bs-btn-border-color: var(--sga-info);
    --bs-btn-hover-color: var(--sga-sobre-info);
    --bs-btn-hover-bg: var(--sga-info);
    --bs-btn-hover-border-color: var(--sga-info);
    --bs-btn-active-color: var(--sga-sobre-info);
    --bs-btn-active-bg: var(--sga-info);
    --bs-btn-active-border-color: var(--sga-info);
    --bs-btn-disabled-color: var(--sga-info);
    --bs-btn-disabled-border-color: var(--sga-info);
}

.btn-secondary {
    --bs-btn-color: var(--sga-sobre-neutro);
    --bs-btn-bg: var(--sga-neutro);
    --bs-btn-border-color: var(--sga-neutro);
    --bs-btn-hover-color: var(--sga-sobre-neutro);
    --bs-btn-hover-bg: var(--sga-neutro-oscuro);
    --bs-btn-hover-border-color: var(--sga-neutro-oscuro);
    --bs-btn-active-color: var(--sga-sobre-neutro);
    --bs-btn-active-bg: var(--sga-neutro-oscuro);
    --bs-btn-active-border-color: var(--sga-neutro-oscuro);
    --bs-btn-disabled-color: var(--sga-sobre-neutro);
    --bs-btn-disabled-bg: var(--sga-neutro);
    --bs-btn-disabled-border-color: var(--sga-neutro);
}

.btn-outline-secondary {
    --bs-btn-color: var(--sga-neutro);
    --bs-btn-border-color: var(--sga-neutro);
    --bs-btn-hover-color: var(--sga-sobre-neutro);
    --bs-btn-hover-bg: var(--sga-neutro);
    --bs-btn-hover-border-color: var(--sga-neutro);
    --bs-btn-active-color: var(--sga-sobre-neutro);
    --bs-btn-active-bg: var(--sga-neutro);
    --bs-btn-active-border-color: var(--sga-neutro);
    --bs-btn-disabled-color: var(--sga-neutro);
    --bs-btn-disabled-border-color: var(--sga-neutro);
}

.btn-link {
    --bs-btn-color: var(--sga-marca);
    --bs-btn-hover-color: var(--sga-marca-oscuro);
    --bs-btn-active-color: var(--sga-marca-oscuro);
}

/* ==========================================================================
   COMPONENTES QUE TAMBIEN TRAEN COLOR PROPIO
   ========================================================================== */

/* La barra de progreso y los spinners toman el color de la marca. */
.progress-bar { background-color: var(--sga-marca); }
.spinner-border, .spinner-grow { color: var(--sga-marca); }

/* Los controles de formulario enfocados: el borde y el halo eran el azul de
   Bootstrap y quedaban fuera del tema. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--sga-marca-borde);
    box-shadow: 0 0 0 .25rem rgba(var(--sga-marca-rgb), .25);
}

.form-check-input:checked {
    background-color: var(--sga-marca);
    border-color: var(--sga-marca);
}

/* Pestañas y paginacion, que en varias pantallas eran el otro azul. */
.nav-tabs { --bs-nav-tabs-link-active-color: var(--sga-marca); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--sga-marca); }
.page-link {
    --bs-pagination-color: var(--sga-marca);
    --bs-pagination-hover-color: var(--sga-marca-oscuro);
    --bs-pagination-focus-color: var(--sga-marca-oscuro);
    --bs-pagination-active-bg: var(--sga-marca);
    --bs-pagination-active-border-color: var(--sga-marca);
}

/* Filas de tabla resaltadas por estado (table-success, table-danger...). */
.table-primary { --bs-table-bg: var(--sga-marca-suave); }
.table-success { --bs-table-bg: var(--sga-exito-suave); }
.table-warning { --bs-table-bg: var(--sga-advertencia-suave); }
.table-danger { --bs-table-bg: var(--sga-peligro-suave); }
.table-info { --bs-table-bg: var(--sga-info-suave); }