/* ------------------------------------------------------------------
   IAA - tema del panel

   Portado del shell de la rama version3, que lleva este bloque en linea
   dentro de header.tpl. Aca va en una hoja aparte para que el navegador
   la pueda cachear y para no repetirlo en cada respuesta.

   Los dos colores de abajo son TODO lo que hay que tocar para cambiar la
   identidad: el resto del archivo los usa por variable. version3 los
   recibia de config.ini; dejarlo asi en IAA pide una linea en HtmlView,
   que es vendor/lib y quedo fuera de alcance en esta tanda.
   ------------------------------------------------------------------ */
/* Colores dinamicos desde configuracion */
:root {
    --color-primario: #12558f;   /* azul IAA: navbar, titulos y acentos fuertes */
    --color-secundario: #43AAEA; /* celeste IAA: hovers y cabezales de tabla */
}

/* Menu superior / Navbar */
.menu_superior {
    background-color: var(--color-primario) !important;
    border: none;
}
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-brand {
    color: #FFFFFF;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    background-color: var(--color-secundario);
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    background-color: var(--color-secundario);
}

/* Cabezales de tablas */
.cabezal_tabla {
    background: var(--color-secundario) !important;
    color: #FFFFFF;
}

/* Titulos de secciones */
.titulo_tabla,
.titulo_sec_web,
.info_dashboard,
.titulo_dashboard {
    color: var(--color-primario) !important;
}
.titulo_dashboard {
    border-bottom-color: var(--color-primario) !important;
}

/* Botones primarios */
.btn-primary {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--color-secundario);
    border-color: var(--color-secundario);
}

/* Boton de login */
button.btn_login {
    background-color: var(--color-primario);
}
button.btn_login:hover {
    background-color: var(--color-secundario);
}

/* Links y acentos */
a {
    color: var(--color-primario);
}
a:hover {
    color: var(--color-secundario);
}

/* Iconos de acciones en tablas */
.iconojava {
    color: var(--color-primario);
}

/* ========================================
   Sobreescritura de modules-style.css
   ======================================== */

/* Page headers */
.page-header-custom {
    background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-secundario) 100%) !important;
}

/* Card headers border */
.card-header-custom,
.boletin-header {
    border-bottom-color: var(--color-primario) !important;
}

/* Glyphicons en headers */
.card-header-custom h4 .glyphicon,
.boletin-header h4 .glyphicon,
.boletin-header .glyphicon {
    color: var(--color-primario) !important;
}

/* Info values destacados */
.info-value strong {
    color: var(--color-primario) !important;
}

/* Materia rows */
.materia-row {
    border-left-color: var(--color-primario) !important;
}

/* Calificacion badge */
.calificacion-badge {
    background: var(--color-primario) !important;
}

/* Upload area */
.upload-area:hover {
    border-color: var(--color-primario) !important;
}
.upload-icon {
    color: var(--color-primario) !important;
}

/* File items */
.file-item {
    border-left-color: var(--color-primario) !important;
}
.file-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}
.file-name .glyphicon {
    color: var(--color-primario) !important;
}

/* Botones custom */
.btn-custom-primary {
    background: var(--color-primario) !important;
}
.btn-custom-primary:hover {
    background: var(--color-secundario) !important;
}

/* Alert files */
.alert-files {
    border-left-color: var(--color-primario) !important;
}

/* ========================================
   Estilos de Login
   ======================================== */

.login-wrapper {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    margin: -20px;
    padding: 40px 20px 20px 20px;
}

.login-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

body:has(.login-wrapper) footer { margin-top: 0; }
body:has(.login-wrapper) hr { display: none; }

.login-footer {
    padding: 15px;
    text-align: center;
}

.login-footer img {
    opacity: 0.9;
    transition: opacity 0.3s;
}

.login-footer img:hover {
    opacity: 1;
}

.login-wrapper {
    min-height: calc(100vh - 120px);
    justify-content: center;
}

/* style.css todavia trae el maquetado viejo de la tarjeta (min-width 600px,
   fondo celeste y un margin-top negativo que se comia el logo contra el borde
   de arriba). Se anula aca, que es la hoja que carga despues. */
.cont_frm_login {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 35px 40px;
    min-width: 0;
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.cont_frm_login .img_menu_logo {
    width: 150px;
    max-width: 60%;
    height: auto;
    margin: 0 auto 14px auto;
    display: block;
}

.cont_frm_login .img_menu_atoms {
    width: 220px;
    max-width: 85%;
    height: auto;
    margin: 0 auto 25px auto;
    display: block;
}

.cont_frm_login .form-control {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 15px;
    transition: border-color 0.3s, box-shadow 0.3s;
    margin-bottom: 12px;
}

.cont_frm_login .form-control:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
    outline: none;
}

.cont_frm_login .btn_login {
    background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-secundario) 100%);
    color: white !important;
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 5px;
}

.cont_frm_login .btn_login:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.cont_frm_login a {
    color: var(--color-primario);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.cont_frm_login a:hover {
    color: var(--color-secundario);
    text-decoration: underline;
}

.login-divider {
    border-top: 1px solid #e0e0e0;
    margin: 20px 0;
}

.login-subtitle {
    color: var(--color-primario);
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 10px;
}

.login-hint {
    color: #666;
    font-size: 13px;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.4;
}

/* ========================================
   Estilos de Registro
   ======================================== */

.cont_frm_registro {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    padding: 40px 44px;
    max-width: 850px;
    width: 100%;
}

.cont_frm_registro .registro-header {
    text-align: center;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f0f0f0;
}

.cont_frm_registro .img_menu_logo {
    width: 72px;
    margin-bottom: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.cont_frm_registro .img_menu_atoms {
    width: 140px;
    margin-bottom: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.cont_frm_registro .login-subtitle {
    margin-top: 16px;
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
}

.registro-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primario);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    margin-top: 24px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--color-primario);
    display: inline-block;
}

.registro-section-title:first-child {
    margin-top: 0;
}

.registro-form-grid {
    margin-top: 0;
}

.registro-form-grid .form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.registro-form-grid .form-col {
    flex: 1;
}

.registro-form-grid .form-col-full {
    width: 100%;
}

.registro-form-grid label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 5px;
}

.registro-form-grid .form-control {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    background: #f9fafb;
}

.registro-form-grid .form-control:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(33, 128, 203, 0.1);
    background: #fff;
    outline: none;
}

.registro-form-grid .input-group {
    display: flex;
}

.registro-form-grid .input-group .form-control {
    border-radius: 8px 0 0 8px;
}

.registro-form-grid .input-group-addon {
    background: var(--color-primario);
    color: white;
    border: none;
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    display: flex;
    align-items: center;
}

.password-hint {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
    margin-top: 2px;
    background: #f9fafb;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid var(--color-primario);
}

.password-hint i {
    color: var(--color-primario);
    margin-right: 4px;
}

.registro-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid #f0f0f0;
}

.registro-buttons .btn-cancel {
    background: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.registro-buttons .btn-cancel:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    text-decoration: none;
}

.registro-buttons .btn_login {
    padding: 12px 28px;
    font-size: 14px;
}

/* Tablet */
@media (max-width: 768px) {
    .cont_frm_registro {
        padding: 30px 28px;
        max-width: 100%;
        margin: 15px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .registro-form-grid .form-row {
        flex-direction: column;
        gap: 0;
    }

    .cont_frm_registro {
        padding: 24px 16px;
        margin: 10px;
        border-radius: 12px;
    }

    .registro-header {
        margin-bottom: 20px;
        padding-bottom: 16px;
    }

    .cont_frm_registro .img_menu_logo {
        width: 60px;
    }

    .cont_frm_registro .img_menu_atoms {
        width: 120px;
    }

    .cont_frm_registro .login-subtitle {
        font-size: 18px;
    }

    .registro-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .registro-buttons .btn-cancel,
    .registro-buttons .btn_login {
        width: 100%;
        text-align: center;
    }
}

/* version3 traia aca un {IF $rol_principal=="VIS"} de Smarty que escondia
   .btn-primary, .eliminar y .visitante para el rol observador. En una hoja
   estatica el {IF} no se evalua y la regla se aplicaba a TODOS: por eso
   desaparecia el boton "Agregar Elemento". Se saco.

   En IAA no hace falta: master bloquea al rol VIS en LibModel::save() y
   delete(), que es el control de verdad. Esconder el boton por CSS es
   cosmetico, y fue justamente el cambio con el que version3 reemplazo ese
   bloqueo (la regresion conocida de esa rama). Si algun dia se quiere
   ademas ocultarlos, va en la plantilla con un {IF} real, no aca. */



/* ------------------------------------------------------------------
   Logos: donde va cada uno
   - barra del panel  -> logotipo ATOMS en blanco (horizontal, se lee)
   - franja de bienvenida -> escudo del IAA, a la derecha
   - pie -> logotipo ATOMS, chico y centrado
   El escudo es PNG con fondo transparente; sobre el azul de la franja no
   puede quedar el cuadrado blanco del JPEG original.
   ------------------------------------------------------------------ */
.escudo-bienvenida {
    width: 76px;
    height: 76px;
    flex: 0 0 auto;
    margin-left: 15px;
    object-fit: contain;
    background: transparent;
}

@media (max-width: 767px) {
    .escudo-bienvenida { width: 56px; height: 56px; }
}

footer .pie-logo {
    text-align: center;
    padding: 0 15px;
}

/* El calendario de programacion abria su propio .container dentro del que ya
   trae el layout. Ahora es un div comun y necesita el mismo respiro lateral. */
.calendario-wrap {
    padding-left: 15px;
    padding-right: 15px;
}

footer .pie-logo img {
    max-width: 120px;
    height: auto;
    opacity: 0.85;
    transition: opacity 0.3s;
}

footer .pie-logo img:hover {
    opacity: 1;
}

/* La barra: el logotipo tiene que entrar en los 50px del navbar */
.navbar-brand .img_menu {
    max-height: 34px;
    width: auto;
    margin-top: 0;
}
.navbar-inverse .navbar-brand {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* ------------------------------------------------------------------
   Barra de herramientas de las tablas (DataTables)
   Los botones de exportar salian como texto suelto: la hoja que pedia
   header.tpl (buttons.dataTables.min.css) no existe en el proyecto; la
   que si esta es buttons.bootstrap.min.css. Con la hoja correcta ya son
   botones, y aca se los deja del mismo tamano y color que el resto de
   las acciones secundarias del panel.
   ------------------------------------------------------------------ */
.dt-buttons {
    float: left;
    margin-bottom: 10px;
}

.dt-buttons .btn,
.dt-buttons .dt-button {
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    margin-right: 6px;
    box-shadow: none;
}

.dt-buttons .btn:hover,
.dt-buttons .dt-button:hover {
    background: #e9ecef;
    border-color: #aaa;
    color: #333;
}

.dataTables_wrapper .dataTables_filter {
    float: right;
    margin-bottom: 10px;
}

/* Los dos botones de la barra tienen que medir lo mismo */
.header-actions .btn,
.header-actions .btn-sm,
.dt-buttons .dt-button {
    line-height: 1.5;
}

/* ------------------------------------------------------------------
   Fila de acciones de los formularios
   Guardar usa .btn-custom-primary (12px/30px de padding, 16px de letra) y
   Cancelar/Volver el btn-warning de bootstrap (6px/12px, 14px): quedaban de
   distinta altura, uno al lado del otro, en las 56 pantallas con formulario.
   Aca se igualan todos los botones de la fila.
   ------------------------------------------------------------------ */
.btn-form,
div:has(> .btn-custom-primary) {
    display: flex;
    align-items: stretch;   /* que todos midan lo mismo, sea <a> o <button> */
    gap: 10px;
    flex-wrap: wrap;
}

/* No todas las pantallas marcan la fila con .btn-form: en varias es un .row
   suelto. Se toma cualquier contenedor que tenga adentro el boton de guardar
   y se igualan todos los botones que viven ahi. */
.btn-form > .btn,
.btn-form > button.btn,
.btn-form > a.btn,
div:has(> .btn-custom-primary) > .btn,
div:has(> .btn-custom-primary) > button.btn,
div:has(> .btn-custom-primary) > a.btn {
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    line-height: 1.4;
    margin: 0;
}

.btn-form > .btn,
div:has(> .btn-custom-primary) > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-form > .btn .glyphicon,
.btn-form > .btn .fas,
div:has(> .btn-custom-primary) > .btn .glyphicon,
div:has(> .btn-custom-primary) > .btn .fas,
.header-actions .btn .glyphicon,
.dt-buttons .btn .glyphicon {
    margin-right: 6px;
}

/* ------------------------------------------------------------------
   Ficha del usuario: es la pantalla de entrada de alumnos, pilotos,
   mecanicos y docentes, y sus secciones eran <h4> sueltos sobre el fondo
   blanco mientras el resto del panel ya usa la cabecera de tarjeta.
   ------------------------------------------------------------------ */
.ficha-seccion {
    margin-top: 22px;
    margin-bottom: 10px;
}

.ficha-seccion + .row {
    margin-left: 0;
    margin-right: 0;
}

/* ------------------------------------------------------------------
   Ficha del usuario: es la pantalla de entrada de alumnos, pilotos,
   mecanicos y docentes. Sus secciones eran <h4> sueltos sobre el fondo
   blanco, mientras el resto del panel ya usa la cabecera de tarjeta.
   ------------------------------------------------------------------ */
h4.ficha-seccion {
    background: linear-gradient(to right, #f8f9fa, #e9ecef);
    border-bottom: 2px solid var(--color-primario);
    border-radius: 4px 4px 0 0;
    padding: 8px 12px;
    margin: 22px 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

h4.ficha-seccion .glyphicon {
    color: var(--color-primario);
    font-size: 13px;
}

/* El encabezado vive dentro de un .col-lg-10 y quedaba mas corto que la tabla
   que encabeza, que va a lo ancho. */
.col-lg-10:has(> h4.ficha-seccion) {
    width: 100%;
}

/* ------------------------------------------------------------------
   Listados en pantalla chica
   Las tablas tienen entre 4 y 10 columnas y no entran en un telefono. Al
   no haber contenedor con desplazamiento propio, la que scrolleaba era la
   PAGINA entera: para llegar a la columna Acciones habia que arrastrar
   tambien la barra y el encabezado. 21 de las 46 pantallas del panel
   estaban asi.

   Se usa el mismo criterio que .table-responsive de bootstrap, pero sobre
   el cuerpo de la tarjeta, que es el contenedor que ya existe en todas.
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
    .card-body-custom {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .card-body-custom > .dataTables_wrapper,
    .card-body-custom > table.table {
        min-width: 100%;
    }

    /* el buscador y el selector de cantidad no tienen por que irse con la
       tabla: quedan arriba, en el ancho de la pantalla */
    .card-body-custom .dataTables_filter,
    .card-body-custom .dataTables_length {
        float: none;
        text-align: left;
        margin-bottom: 8px;
    }

    .card-body-custom .dataTables_filter input {
        width: 100%;
        max-width: 240px;
    }
}