/*
 * Liceo Benalcazar - colores institucionales (portal.liceobenalcazar.edu.co).
 * Se carga solo cuando INSTITUCION == "benalcazar" (ver gui/gui_inicio.php), despues de estilos.css.
 * IMPORTANTE: no renombrar a estilos_benalcazar.css; el kernel usaria ese archivo EN LUGAR de estilos.css.
 * mod #79317
 *
 * Paleta:
 *   Azul        #1E73BE  primario (botones, enlaces, foco)
 *   Azul marino #26547C  oscuro (encabezados de tabla, titulos)
 *   Magenta     #D91B80  acento (etiquetas, menu activo)
 *   Dorado      #E0B800  solo decorativo (no usar como color de texto)
 */

/* Variables usadas por calificaciones/fm_integracion_siga5_estilos.php.
   html:root tiene mas especificidad que :root, asi gana sobre los valores por defecto. */
html:root {
    --s5-primario: #1E73BE;
    --s5-primario-hover: #185F9E;
    --s5-primario-texto: #1A5E9A;
    --s5-primario-suave: #E8F1FA;
    --s5-primario-suave-hover: #D6E7F6;
    --s5-primario-borde: #B9D3EC;
    --s5-oscuro: #26547C;
    --s5-oscuro-borde: #3D6A93;
    --s5-acento: #D91B80;
    --s5-acento-suave: #FCE7F3;
    --s5-acento-texto: #B0156A;
    --s5-def-fondo: #EAF3FB;
    --s5-def-casilla: #D8E8F6;
    --s5-def-borde: #A9C9E6;
    --s5-def-texto: #1A4A73;
    --s5-foco: rgba(30, 115, 190, .2);
}

/* Titulos de formularios legacy (antes #5E74C2) */
.TablasTituloFormas {
    background-color: #26547C;
}

/* Menu superior: indicador magenta en la opcion activa (solo pantallas con aspecto SIGA 5) */
body:has(.siga5-integracion) #menu_id td.TemaMainItemHover,
body:has(.siga5-integracion) #menu_id td.TemaMainItemActive {
    box-shadow: inset 0 -2px 0 #D91B80;
}

/* mod #79317: usar el ancho de la pantalla. Ancho fluido hasta 1920px, centrado, con fondo gris a los
   lados; menu lateral fijo y area de trabajo flexible; banner y pie sin deformarse. Solo pantalla. */
html:root { --bz-ancho-max: 1920px; }
@media screen {
    body { background: #eef2f6 !important; }
    #tableFramework { width: 100% !important; max-width: var(--bz-ancho-max) !important;
                      float: none !important; margin: 0 auto !important; background: #ffffff; }
    #tableFramework table[width='765'], #tableFramework table[width='1200'] { width: 100% !important; }
    /* Encabezado: logo relativo a su celda; banner sin deformar, alineado a la derecha */
    #tableFramework table[width='1200'] > tbody > tr > td[colspan='2'] { position: relative; }
    #tableFramework img[src*='encabezado_aplicacion2'] { width: auto !important; max-width: 100%; height: 110px;
        object-fit: cover; object-position: right center; display: block; margin-left: auto; }
    #tableFramework img.sobre { top: 35px; left: 90px; }
    /* Pie: imagen centrada sin repetirse */
    #tableFramework table[background*='piepagina_datasae360'] { background-repeat: no-repeat;
        background-position: center; background-color: #ffffff; }
    /* Menu lateral de ancho fijo, area de trabajo flexible */
    table[name='TablaCuerpo'] > tbody > tr > td[width='20%'] { width: 260px !important; }
    /* Tiles del portal en cuadricula que aprovecha el ancho */
    #cpanel.cp-wrap { max-width: none !important; margin: 0 !important; }
    #cpanel .cp-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
        gap: 14px !important; justify-content: start !important; margin: 0 !important; }
    #cpanel .cp-col { max-width: none !important; width: auto !important; flex: none !important; padding: 0 !important; }
    #cpanel .cp-card { width: auto !important; }
}