/* =========================================================================
   SGPOSECA - estilos propios
   ========================================================================= */

:root {
    --una-azul:    #003366;
    --una-azul-2:  #1e4d8b;
    --una-oro:     #c9a227;
    --una-gris:    #f4f4f4;
    --una-borde:   #d0d0d0;
}

body {
    background: var(--una-gris);
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 0.95rem;
    color: #222;
}

/* ---------- Encabezado institucional ---------- */
#encabezado {
    background: linear-gradient(90deg, var(--una-azul) 0%, var(--una-azul-2) 100%);
    color: #fff;
    padding: 14px 20px;
    border-bottom: 4px solid var(--una-oro);
}
#encabezado h1 {
    font-size: 1.35rem;
    margin: 0;
    letter-spacing: 0.3px;
}
#encabezado .subt { font-size: 0.85rem; opacity: 0.9; }

#encabezado .user-box {
    font-size: 0.85rem;
    text-align: right;
}
#encabezado .user-box a {
    color: var(--una-oro);
    text-decoration: none;
    margin-left: 10px;
}
#encabezado .user-box a:hover { text-decoration: underline; }

/* ---------- Barras de menú ---------- */
#menu1, #menu2 {
    background: #fff;
    border-bottom: 1px solid var(--una-borde);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
#menu1 {
    /* Barra superior 50% más alta que menu2 para dar espacio a la foto
       miniatura y a la info del estudiante. */
    padding: 10px 20px;
    min-height: 58px;
}
#menu2 {
    background: #eaf0f8;
    border-top: 1px solid var(--una-borde);
    padding: 6px 20px;
}
#menu1 button, #menu2 button {
    background: transparent;
    border: 1px solid transparent;
    color: var(--una-azul);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
}
#menu1 button:hover, #menu2 button:hover {
    background: var(--una-azul);
    color: #fff;
}
#menu2 button.active {
    background: var(--una-azul);
    color: #fff;
    font-weight: 600;
}

/* ---------- Área de título ---------- */
#titulo {
    padding: 10px 20px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--una-azul);
    border-bottom: 1px solid var(--una-borde);
    background: #fff;
}

/* ---------- Contenedor principal ---------- */
#trabajo {
    padding: 18px 20px;
    min-height: 400px;
}
#lista_estu, #lista_estu2 { padding: 0 20px; }

/* ---------- Mensajes ---------- */
#mensaje {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    min-width: 280px;
    max-width: 420px;
}
.msg { margin-bottom: 8px; }

/* ---------- Formularios ---------- */
.form-card {
    background: #fff;
    border: 1px solid var(--una-borde);
    border-radius: 8px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin-bottom: 16px;
}
.form-card h3 {
    font-size: 1.05rem;
    color: var(--una-azul);
    border-bottom: 2px solid var(--una-oro);
    padding-bottom: 6px;
    margin-bottom: 14px;
}
.form-card h4 {
    font-size: 0.95rem;
    color: var(--una-azul-2);
    margin-top: 14px;
    margin-bottom: 8px;
}

label { font-weight: 500; font-size: 0.88rem; }

.form-control, .form-select, textarea.form-control {
    font-size: 0.9rem;
}

/* ---------- Botones ---------- */
.botones {
    background: var(--una-azul);
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    margin-right: 6px;
}
.botones:hover  { background: var(--una-azul-2); }
.botones.sec    { background: #6c757d; }
.botones.sec:hover { background: #5a6268; }
.botones.danger { background: #b02a37; }
.botones.danger:hover { background: #8b2028; }
.botones.oro    { background: var(--una-oro); color: #222; }
.botones.oro:hover { background: #b0891a; }

/* ---------- Login ---------- */
.login-wrap {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-box {
    background: #fff;
    border: 1px solid var(--una-borde);
    border-radius: 10px;
    padding: 30px 34px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
}
.login-box h2 {
    color: var(--una-azul);
    font-size: 1.3rem;
    margin-bottom: 18px;
    text-align: center;
    border-bottom: 2px solid var(--una-oro);
    padding-bottom: 10px;
}

/* ---------- Tabla de estudiantes ---------- */
.tabla-estu {
    background: #fff;
    width: 100%;
    border: 1px solid var(--una-borde);
    border-radius: 6px;
    overflow: hidden;
}
.tabla-estu thead {
    background: var(--una-azul);
    color: #fff;
}
.tabla-estu th, .tabla-estu td {
    padding: 8px 10px;
    font-size: 0.88rem;
    border-bottom: 1px solid #eee;
}
.tabla-estu tbody tr:hover { background: #f5f8fc; cursor: pointer; }

/* ---------- Info mini del estudiante (dentro del menú del expediente) ---------- */
.estu-mini-foto {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--una-oro);
    margin-right: 6px;
    flex: 0 0 auto;
}
.estu-mini-info {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.15;
    margin-left: 4px;
    padding-left: 12px;
    border-left: 1px solid var(--una-borde);
    font-size: 0.85rem;
}
.estu-mini-info strong {
    color: var(--una-azul);
    font-size: 0.9rem;
    white-space: nowrap;
}
.estu-mini-info .estu-mini-sub {
    color: #666;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* ---------- Checkbox-grid de salud ---------- */
.salud-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 6px;
}
.salud-grid label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ---------- Tabla interna pagos/notas/acuerdos ---------- */
.tabla-interna {
    width: 100%;
    font-size: 0.85rem;
    border-collapse: collapse;
    margin-top: 10px;
}
.tabla-interna th {
    background: #eaf0f8;
    color: var(--una-azul);
    padding: 6px 8px;
    border-bottom: 1px solid var(--una-borde);
}
.tabla-interna td {
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
}

/* ---------- Utilidades ---------- */
.required::after { content: " *"; color: #b02a37; }
.small-help { font-size: 0.78rem; color: #666; }
.hidden { display: none !important; }

/* ---------- Indicador de autoguardado ---------- */
/*
 * El badge de estado mantiene siempre la misma altura (incluso cuando
 * está vacío) para que el formulario no salte verticalmente al pasar
 * de "Cambios sin guardar" a "Guardado" o al desaparecer el mensaje.
 * El truco: reservamos padding + min-height + borde transparente
 * siempre, y solo cambiamos colores según el estado.
 */
.save-status {
    display: inline-block;
    min-height: 24px;
    padding: 4px 14px;
    border: 1px solid transparent;
    border-radius: 16px;
    font-size: 0.82rem;
    line-height: 1.3;
    background: transparent;
    color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease,
                border-color 0.15s ease;
}
/* No colapsamos el div cuando está vacío: conserva el mismo alto. */
.save-status:empty::before {
    content: '\00a0';  /* NBSP para mantener line-height */
}
.save-status.pending {
    background: #fff7e6;
    color: #8a6d00;
    border-color: #ffe0a3;
}
.save-status.saving {
    background: #e6f0fb;
    color: #1e4d8b;
    border-color: #bcd4ed;
}
.save-status.saved {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #b6dab9;
}
.save-status.error {
    background: #fdecea;
    color: #b02a37;
    border-color: #f5b5bb;
}
.save-status .spinner-border,
.save-status .spinner-grow {
    width: 0.85rem;
    height: 0.85rem;
    vertical-align: -2px;
    margin-right: 4px;
}

/* ---------- Indicador de autoguardado ---------- */
.autosave-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: -4px -4px 14px -4px;
    background: #f8f9fa;
    border-left: 3px solid var(--una-borde);
    border-radius: 4px;
    font-size: 0.82rem;
    color: #555;
    transition: background 0.2s, border-color 0.2s;
}
.autosave-status .dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #adb5bd;
    flex-shrink: 0;
}

.autosave-status[data-estado="idle"]   { border-left-color: #adb5bd; }
.autosave-status[data-estado="idle"] .dot { background: #adb5bd; }

.autosave-status[data-estado="dirty"]  {
    background: #fff9e6;
    border-left-color: var(--una-oro);
    color: #8a6d00;
}
.autosave-status[data-estado="dirty"] .dot {
    background: var(--una-oro);
    animation: pulse 1s ease-in-out infinite;
}

.autosave-status[data-estado="saving"] {
    background: #e7f1ff;
    border-left-color: #0d6efd;
    color: #0a58ca;
}
.autosave-status[data-estado="saving"] .dot {
    background: #0d6efd;
    animation: pulse 0.6s ease-in-out infinite;
}

.autosave-status[data-estado="saved"]  {
    background: #e8f5e9;
    border-left-color: #198754;
    color: #145c32;
}
.autosave-status[data-estado="saved"] .dot { background: #198754; }

.autosave-status[data-estado="error"]  {
    background: #fdecea;
    border-left-color: #b02a37;
    color: #842029;
}
.autosave-status[data-estado="error"] .dot { background: #b02a37; }

@keyframes pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.85); }
}

/* ---------- Indicador de guardado automático ---------- */
.save-status {
    display: inline-block;
    min-height: 24px;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.82rem;
    font-weight: 500;
    margin-left: auto;
    transition: opacity 0.2s ease;
}
.save-status:empty { display: none; }
.save-status.pending {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}
.save-status.saving {
    background: #e7f1ff;
    color: #084298;
    border: 1px solid #cfe2ff;
}
.save-status.saved {
    background: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
}
.save-status.error {
    background: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
}
.form-card h3 + .save-status,
.form-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
/* Layout: título + indicador en misma fila.
   min-height garantiza que la cabecera siempre ocupe el mismo alto,
   aunque el badge .save-status esté vacío o contraído; así el form
   no salta cuando el texto del badge cambia. */
.form-card-header {
    border-bottom: 2px solid var(--una-oro);
    padding-bottom: 6px;
    margin-bottom: 14px;
    min-height: 42px;
}
.form-card-header h3 {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}