/* =========================================================================
   estilos_responsive.css
   Hoja de estilos general del sistema educarportal.edu.co (multi-colegio)
   Mobile-first · Variables CSS para theming por colegio · Componentes base
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Comfortaa:wght@600;700&display=swap');

/* ---------------------------------------------------------------------
   1. VARIABLES / THEMING
   Cada colegio puede sobreescribir estas variables definiendo un
   <style>:root{ --color-primary:...; }</style> en su propio index.php
   ANTES de este archivo, o creando un css/tema-[colegio].css aparte.
   Valores por defecto = paleta "La Ronda".
--------------------------------------------------------------------- */
:root {
    --color-primary:       #e2231a;
    --color-primary-dark:  #a8140d;
    --color-primary-light: #ff5c52;
    --color-accent:        #040461;

    --color-bg:            #f4f5f7;
    --color-surface:       #ffffff;
    --color-text:          #2b2b2f;
    --color-text-muted:    #767680;
    --color-border:        #e4e4e9;

    --color-danger:        #c4151c;
    --color-danger-bg:     #fdeaea;
    --color-danger-border: #f3b6b6;
    --color-warn:          #b3790a;
    --color-warn-bg:       #fff4e0;
    --color-warn-border:   #f0cf8e;
    --color-success:       #1a8f5c;
    --color-success-bg:    #e7f8f0;
    --color-success-border:#a9e3c8;

    --font-heading: 'Comfortaa', 'Poppins', sans-serif;
    --font-body:    'Poppins', 'Segoe UI', Arial, sans-serif;

    --radius-sm:  8px;
    --radius-md:  14px;
    --radius-lg:  20px;

    --shadow-sm: 0 2px 8px rgba(20, 20, 30, 0.06);
    --shadow-md: 0 10px 30px rgba(20, 20, 30, 0.12);
    --shadow-lg: 0 20px 45px rgba(20, 20, 30, 0.28);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    --container-max: 1140px;
    --transition-fast: 0.18s ease;
    --transition-mid:  0.35s ease;
}

/* ---------------------------------------------------------------------
   2. RESET / BASE
--------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    margin: 0 0 var(--space-3);
    color: var(--color-text);
}

p { margin: 0 0 var(--space-3); }

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

img { max-width: 100%; display: block; }

::selection { background: var(--color-primary-light); color: #fff; }

/* Foco accesible visible siempre en teclado */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   3. LAYOUT / CONTAINER
--------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-5);
}

.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

.grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
    .grid-2 { grid-template-columns: 1fr; }
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
    .grid-3 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   4. NAVBAR GENERAL (para páginas internas, no solo login)
--------------------------------------------------------------------- */
.navbar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 50;
}
.navbar__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--space-3) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navbar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
    font-size: 16px;
}
.navbar__brand img { height: 34px; }
.navbar__links { display: flex; gap: var(--space-5); }
.navbar__links a { color: var(--color-text); font-weight: 500; font-size: 13.5px; }
.navbar__links a:hover { color: var(--color-primary); text-decoration: none; }

.navbar__toggle { display: none; background: none; border: none; cursor: pointer; }

@media (max-width: 768px) {
    .navbar__links {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--color-surface);
        flex-direction: column;
        padding: var(--space-4) var(--space-5);
        box-shadow: var(--shadow-md);
        gap: var(--space-4);
    }
    .navbar__links.is-open { display: flex; }
    .navbar__toggle { display: block; }
}

/* ---------------------------------------------------------------------
   5. BOTONES
--------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 11px 22px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background var(--transition-fast), transform 0.1s ease, box-shadow var(--transition-fast);
}
.btn:active { transform: scale(0.97); }

.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); }

.btn--outline {
    background: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
}
.btn--outline:hover { background: var(--color-primary); color: #fff; }

.btn--block { width: 100%; }

/* ---------------------------------------------------------------------
   6. CARDS
--------------------------------------------------------------------- */
.card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}
.card--elevated { box-shadow: var(--shadow-md); }

/* ---------------------------------------------------------------------
   7. ALERTAS
--------------------------------------------------------------------- */
.alert {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    animation: rowFadeLeft var(--transition-mid) both;
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; }

.alert--error   { background: var(--color-danger-bg);  border: 1px solid var(--color-danger-border);  color: var(--color-danger); }
.alert--warn    { background: var(--color-warn-bg);     border: 1px solid var(--color-warn-border);     color: var(--color-warn); }
.alert--success { background: var(--color-success-bg);  border: 1px solid var(--color-success-border);  color: var(--color-success); }

/* ---------------------------------------------------------------------
   8. FORMULARIOS
--------------------------------------------------------------------- */
.field-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 11px 15px;
    margin-bottom: var(--space-3);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field-row:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(226, 35, 26, 0.12);
}
.field-row svg { width: 18px; height: 18px; flex-shrink: 0; fill: var(--color-primary); }
.field-row input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text);
}
.field-row input::placeholder { color: var(--color-text-muted); }

/* ---------------------------------------------------------------------
   9. PÁGINA DE LOGIN
--------------------------------------------------------------------- */
.login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-5);
    position: relative;
    overflow: hidden;
}

.login-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 65%, #6b0e10 100%);
}

.login-bg__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: loginBgCarousel 28s infinite;
}
.login-bg__slide:nth-child(1) { background-image: url('../../img/foto3.jpg'); animation-delay: 0s;  }
.login-bg__slide:nth-child(2) { background-image: url('../../img/foto2.jpg'); animation-delay: 7s;  }
.login-bg__slide:nth-child(3) { background-image: url('../../img/foto1.jpg'); animation-delay: 14s; }
.login-bg__slide:nth-child(4) { background-image: url('../../img/foto4.jpg'); animation-delay: 21s; }

.login-bg__overlay {
    position: absolute;
    inset: 0;
    /* Viñeta en vez de tinte parejo: oscurece arriba/abajo (donde va el
       texto) y deja el centro de la foto casi limpio, con el rojo de marca
       como acento sutil en las esquinas en vez de cubrir toda la imagen.
       Opacidad bajada más (~ a la mitad de la última versión) a pedido. */
    background:
        radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.16) 100%),
        linear-gradient(to bottom, rgba(20,4,4,0.16) 0%, transparent 22%, transparent 78%, rgba(20,4,4,0.18) 100%),
        linear-gradient(160deg, rgba(226, 35, 26, 0.05) 0%, transparent 50%, rgba(60, 10, 10, 0.06) 100%);
}

@keyframes loginBgCarousel {
    0%   { opacity: 0; }
    4%   { opacity: 1; }
    25%  { opacity: 1; }
    29%  { opacity: 0; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .login-bg__slide { animation: none; opacity: 0; }
    .login-bg__slide:nth-child(1) { opacity: 1; }
}

.login-page__topnav {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    z-index: 1;
}
.login-page__topnav a {
    color: rgba(255,255,255,0.92);
    font-size: 12.5px;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.login-page__topnav a:hover { color: #fff; }

#login {
    width: 100%;
    max-width: 400px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: loginSlideUp 0.6s ease both;
    position: relative;
    z-index: 1;
}

.login-icon-field {
    text-align: center;
    padding: var(--space-6) var(--space-5) var(--space-3);
}
.login-icon-field img { height: 92px; margin: 0 auto var(--space-2); }

.login-logo {
    height: 116px;
    width: auto;
    margin: 0 auto var(--space-1);
    display: block;
}
.login-logo__underline {
    display: block;
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-accent);
    margin: 10px auto 0;
}

.login-titulo {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0;
}

.login-tagline {
    font-size: 11.5px;
    color: var(--color-text-muted);
    margin: 4px 0 0;
    font-style: italic;
}

.login-form { padding: var(--space-5) var(--space-6) var(--space-6); }
.login-form .field-row:nth-child(1) { animation: rowFadeLeft 0.4s ease 0.22s both; }
.login-form .field-row:nth-child(2) { animation: rowFadeLeft 0.4s ease 0.38s both; }

.login-page .footer {
    margin-top: var(--space-6);
    color: rgba(255,255,255,0.85);
    font-size: 11.5px;
    text-align: center;
    max-width: 400px;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ---------------------------------------------------------------------
   10. UTILIDADES / ANIMACIONES
--------------------------------------------------------------------- */
@keyframes loginSlideUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0);    }
}
@keyframes rowFadeLeft {
    from { opacity: 0; transform: translateX(-18px); }
    to   { opacity: 1; transform: translateX(0);     }
}
@keyframes shakeError {
    0%, 100% { transform: translateX(0);    }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px);  }
}
.shake-error { animation: shakeError 0.45s ease; }

.text-center { text-align: center; }
.text-muted  { color: var(--color-text-muted); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mb-0 { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   11. TABLAS (para notas / informes / admisiones)
--------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
table.data-table { width: 100%; border-collapse: collapse; background: var(--color-surface); font-size: 13.5px; }
.data-table th, .data-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--color-border); }

/* En móvil, en vez de forzar scroll horizontal en tablas anchas, cada fila
   se convierte en una tarjeta apilada -- más fácil de usar con el dedo que
   deslizar una tabla. Requiere data-label="..." en cada <td>. */
@media (max-width: 900px) {
    .data-table thead { display: none; }
    .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
    .data-table tr {
        margin-bottom: var(--space-3);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        overflow: hidden;
    }
    .data-table td {
        border-bottom: 1px solid var(--color-border);
        padding: 8px 14px;
    }
    .data-table td:last-child { border-bottom: none; }
    .data-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--color-text-muted);
        margin-bottom: 2px;
    }
    /* Diferenciar una tarjeta de familiar de la siguiente: franja de color
       arriba, alternando entre las dos tonalidades de marca. */
    .data-table tr { border-top: 4px solid var(--color-primary); }
    .data-table tr:nth-child(even) { border-top-color: var(--color-accent); }
    /* Columnas que se ocultan en la vista compacta de celular (siguen
       disponibles al entrar a "Editar" el familiar). */
    .mobile-hide { display: none; }
}
.data-table thead th {
    background: var(--color-bg);
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}
.data-table tbody tr:hover { background: rgba(226, 35, 26, 0.04); }

/* ---------------------------------------------------------------------
   12. BREAKPOINTS GENERALES (mobile-first ya cubierto arriba)
--------------------------------------------------------------------- */
@media (max-width: 576px) {
    .container { padding-inline: var(--space-4); }
    #login { max-width: 100%; border-radius: var(--radius-md); }
    .login-icon-field { padding: var(--space-5) var(--space-4) var(--space-2); }
    .login-form { padding: var(--space-4) var(--space-4) var(--space-5); }
    .login-page__topnav { top: var(--space-3); right: var(--space-3); }
}

@media (min-width: 992px) {
    .container { padding-inline: var(--space-6); }
}

/* ---------------------------------------------------------------------
   13. MÓDULOS INTERNOS (post-login)
   Componentes usados dentro de #contenido en principal.php: cabeceras
   de módulo, formularios con etiqueta visible (a diferencia de
   .field-row de login, que es icono + input sin label), pestañas, y
   los estados de carga/error que usa dashboard.js.
--------------------------------------------------------------------- */

/* Alerta neutra/informativa — el set original solo tenía error/warn/success */
.alert--info {
    background: rgba(4, 4, 97, 0.06);
    border: 1px solid rgba(4, 4, 97, 0.18);
    color: var(--color-accent);
}

/* Estados de carga/error de los fragmentos AJAX (dashboard.js) */
.content-loading,
.content-error {
    padding: var(--space-5);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13.5px;
}
.content-error { color: var(--color-danger); }

/* Cabecera de un módulo (título + acciones) */
.module-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.module-header__title { margin: 0; font-size: 20px; }
.module-header__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Campo con etiqueta visible (formularios internos: buscadores, fichas).
   Distinto de .field-row (icono + input, sin label) que usa el login. */
.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}
.form-field__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.form-field__required { color: var(--color-danger); font-weight: 700; }
.form-field__input {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-field__input:focus-visible,
.form-field__input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(226, 35, 26, 0.12);
    outline: none;
}
.form-field__input[readonly],
.form-field__input:disabled {
    background: var(--color-border);
    color: var(--color-text-muted);
}

/* Fila de campos lado a lado — colapsa según el ancho disponible.
   minmax más angosto que el resto del sitio (160px vs 180px) porque
   estos formularios tienen muchos campos cortos (selects, fechas) que
   se ven bien más apretados; en pantallas anchas caben más por fila. */
.form-field-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3) var(--space-4);
    align-items: end;
}
@media (max-width: 576px) {
    .form-field-group { grid-template-columns: 1fr; }
}

/* Buscador inline (documento + botón en la misma línea, desktop) */
.form-field--inline {
    flex-direction: row;
    align-items: end;
    gap: var(--space-3);
    margin-bottom: 0;
}
.form-field--inline .form-field__label { flex-basis: 100%; }
.form-field--inline .form-field__input { flex: 1; }
@media (max-width: 576px) {
    .form-field--inline { flex-direction: column; align-items: stretch; }
}

.matricula-buscador { margin-bottom: var(--space-4); }
.matricula-ficha__empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-6) var(--space-4);
}

/* Ficha del estudiante: foto + campos principales */
.ficha-estudiante__header {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    margin-bottom: var(--space-4);
}
.ficha-estudiante__header .form-field-group { flex: 1; }
.ficha-estudiante__foto {
    width: 92px;
    height: 99px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ficha-estudiante__foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha-estudiante__foto-placeholder {
    font-size: 10.5px;
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-2);
}
@media (max-width: 576px) {
    .ficha-estudiante__header { flex-direction: column; align-items: center; text-align: center; }
}

/* Pestañas dentro de la ficha */
.tabs {
    display: flex;
    gap: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    margin: var(--space-4) 0;
    overflow-x: auto;
}
.tabs__item {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tabs__item:hover { color: var(--color-primary); }
.tabs__item.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.matricula-tab-content { padding-top: var(--space-2); }

/* Lista de resultados cuando la búsqueda por nombre coincide con más
   de un estudiante -- cada fila es un botón clicable, no una tabla,
   porque solo lleva nombre + documento (no hace falta más estructura). */
.resultado-busqueda-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}
.resultado-busqueda-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-2);
    font: inherit;
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.resultado-busqueda-item:hover { background: var(--color-bg); }
.resultado-busqueda-lista li:last-child .resultado-busqueda-item { border-bottom: none; }