/* ============================================================
   CUH · Tema del sistema — fuente única de colores
   ------------------------------------------------------------
   Los colores salen del topbar y del navbar, que son la
   identidad de la aplicación. Cualquier pantalla nueva debe
   usar estas variables en vez de escribir códigos de color.

   Uso:
     <link href="css/cuh-tema.css" rel="stylesheet">
     (cargarlo ANTES de las hojas propias de cada pantalla)

   Luego, en el CSS de la pantalla:
     background: var(--cuh-grad-barra);
     color: var(--cuh-primario);
     border-radius: var(--cuh-r);

   Si algún día cambia el color institucional, se cambia aquí
   y se actualiza toda la aplicación.
   ============================================================ */

:root {

    /* ---------- Marca: valores exactos del topbar y el navbar ---------- */
    --cuh-topbar-1: #075e68;   /* inicio del degradado superior */
    --cuh-topbar-2: #076f7b;   /* medio */
    --cuh-topbar-3: #087f8c;   /* final */
    --cuh-nav-1:    #0b303b;   /* inicio del menú lateral */
    --cuh-nav-2:    #082731;   /* final del menú lateral */
    --cuh-acento:   #13a7b7;   /* acento del sistema (enlace activo del menú) */

    /* ---------- Degradados listos para usar ---------- */
    --cuh-grad-barra:  linear-gradient(110deg, #075e68 0%, #076f7b 62%, #087f8c 100%);
    --cuh-grad-nav:    linear-gradient(180deg, #0b303b 0%, #082731 100%);
    --cuh-grad-acento: linear-gradient(135deg, #13a7b7 0%, #087f8c 100%);
    --cuh-grad-ok:     linear-gradient(135deg, #2ec4a8 0%, #0d8b7b 100%);
    --cuh-grad-aviso:  linear-gradient(135deg, #f7bb45 0%, #dd8b09 100%);
    --cuh-grad-riesgo: linear-gradient(135deg, #e07a72 0%, #c0453f 100%);

    /* ---------- Escala del color primario ---------- */
    --cuh-primario:         #087f8c;
    --cuh-primario-oscuro:  #075e68;
    --cuh-primario-claro:   #13a7b7;
    --cuh-primario-suave:   #e9f6f8;   /* fondos y estados hover */
    --cuh-primario-borde:   #cfe7ea;

    /* ---------- Neutros ---------- */
    --cuh-tinta:      #101f31;   /* texto principal */
    --cuh-tinta-2:    #35506b;   /* texto secundario */
    --cuh-apagado:    #7b8fa5;   /* etiquetas y textos de apoyo */
    --cuh-linea:      #e7eef5;   /* bordes */
    --cuh-linea-2:    #f1f6fa;   /* separadores internos */
    --cuh-superficie: #ffffff;   /* tarjetas */
    --cuh-fondo:      #eaf0f6;   /* fondo de pantalla */

    /* ---------- Colores con significado ---------- */
    --cuh-ok:            #10a08e;
    --cuh-ok-suave:      #e8f9f1;
    --cuh-ok-texto:      #0f7a4f;

    --cuh-aviso:         #e59313;
    --cuh-aviso-suave:   #fef5e4;
    --cuh-aviso-texto:   #a86a04;

    --cuh-peligro:       #d1544e;
    --cuh-peligro-suave: #fdeef1;
    --cuh-peligro-texto: #a32236;

    --cuh-info:          #13a7b7;
    --cuh-info-suave:    #e4f5f7;
    --cuh-info-texto:    #076f7b;

    --cuh-neutro:        #9db8bf;   /* series secundarias en gráficas */
    --cuh-neutro-suave:  #cbe3e7;

    /* ---------- Forma ---------- */
    --cuh-r-sm:   10px;
    --cuh-r:      14px;
    --cuh-r-lg:   20px;
    --cuh-r-full: 999px;

    /* ---------- Profundidad ---------- */
    --cuh-sombra-1: 0 1px 2px rgba(16,31,49,.05);
    --cuh-sombra-2: 0 1px 2px rgba(16,31,49,.05), 0 10px 26px -14px rgba(16,31,49,.24);
    --cuh-sombra-3: 0 2px 6px rgba(16,31,49,.06), 0 24px 48px -22px rgba(16,31,49,.34);
    --cuh-sombra-marca: 0 18px 44px -22px rgba(8,39,49,.8);

    /* ---------- Tipografía ---------- */
    --cuh-fuente: "Segoe UI Variable Display", "Segoe UI", Inter, -apple-system,
                  BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;

    /* ---------- Medidas del armazón ---------- */
    --cuh-alto-topbar: 64px;   /* util para elementos fijos o sticky */
}

/* ============================================================
   Utilidades opcionales
   No cambian nada por sí solas: hay que aplicarlas a mano.
   Sirven para no reescribir los mismos estilos en cada pantalla.
   ============================================================ */

/* Barra o cabecera con la identidad del sistema */
.cuh-barra {
    background: var(--cuh-grad-barra);
    color: #fff;
}

/* Tarjeta estándar */
.cuh-tarjeta {
    background: var(--cuh-superficie);
    border: 1px solid var(--cuh-linea);
    border-radius: var(--cuh-r-lg);
    box-shadow: var(--cuh-sombra-2);
    overflow: hidden;
}

/* Botón principal */
.cuh-boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cuh-grad-acento);
    color: #fff;
    border: 0;
    border-radius: var(--cuh-r-sm);
    padding: 10px 22px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.cuh-boton:hover {
    color: #fff;
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 10px 22px -12px rgba(8,127,140,1);
}

/* Etiqueta redonda de estado */
.cuh-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--cuh-r-full);
    padding: 5px 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
}
.cuh-etiqueta-ok      { background: var(--cuh-ok-suave);      color: var(--cuh-ok-texto); }
.cuh-etiqueta-aviso   { background: var(--cuh-aviso-suave);   color: var(--cuh-aviso-texto); }
.cuh-etiqueta-peligro { background: var(--cuh-peligro-suave); color: var(--cuh-peligro-texto); }
.cuh-etiqueta-info    { background: var(--cuh-info-suave);    color: var(--cuh-info-texto); }

/* Campo de formulario */
.cuh-campo {
    border: 1.5px solid var(--cuh-linea);
    border-radius: var(--cuh-r-sm);
    background: #fbfdfe;
    color: var(--cuh-tinta);
    font-size: 14px;
    padding: 11px 14px;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.cuh-campo:focus {
    border-color: var(--cuh-primario);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(8,127,140,.12);
}

/* ============================================================
   Contenedor con un menú desplegable abierto
   ------------------------------------------------------------
   Lo aplica js/menus-tabla.js. Se hace con una CLASE y no
   escribiendo en el atributo style, porque al modificar ese
   atributo el navegador lo reescribe entero y normaliza los
   colores (#0376a9 pasa a rgb(3,118,169)). Eso rompia las
   reglas que seleccionan por [style*="0376a9"] y el encabezado
   perdia su degradado.
   ============================================================ */
.cuh-menu-abierto {
    overflow: visible !important;
    z-index: 50 !important;
}

/* ============================================================
   Azul heredado
   ------------------------------------------------------------
   El sistema viejo pintaba las cabeceras con el azul #0376a9
   escrito a mano en el atributo style (queda en 131 etiquetas
   repartidas por toda la aplicacion). Mientras se van pasando a
   clases, esta regla las lleva al degradado institucional para
   que no queden dos azules distintos conviviendo.

   Solo actua en las pantallas que cargan este tema.
   ============================================================ */
[style*="0376a9"] {
    background: var(--cuh-grad-barra) !important;
    border: 0;
    color: #fff;
}