/* MINUMA - Estilos personalizados */
/* Shell v3 (rediseño): topbar full-width + sidebar + section-header */
/* Paleta del mockup: sidebar/logo #23282F · amarillo #F5C518 · fondo #F4F5F7 */

:root {
    --sge-primary: #F5C518;
    --sge-primary-dark: #DFB014;
    --sge-primary-light: #fdd54a;
    --sge-primary-subtle: #FEF9E7;
    --sge-primary-text: #D4A000;  /* primario legible como TEXTO sobre fondo claro */
    --sge-on-primary: #1a1a1a; /* texto/iconos sobre amarillo */
    --sge-gray-900: #23282F;   /* sidebar / logo */
    --sge-gray-800: #374151;
    --sge-gray-700: #4A4A4A;
    --sge-gray-600: #6B7280;
    --sge-gray-500: #9CA3AF;
    --sge-gray-400: #9E9E9E;
    --sge-gray-300: #D1D5DB;
    --sge-gray-200: #E5E7EB;
    --sge-gray-100: #F0F0F0;
    --sge-gray-50: #F9FAFB;
    --sge-success: #16A34A;
    --sge-warning: #d69e2e;
    --sge-danger: #EF4444;
    --sge-info: #2563EB;
    --sge-bg: #F4F5F7;
    --sge-sidebar-bg: #23282F;
    --sge-sidebar-width: 210px;
    --sge-topbar-height: 64px;
    /* alias para compatibilidad con CSS de módulos existentes */
    --sge-header-height: 64px;
    /* Puente para assets/css/expediente.css, que es compartido con el
       Portal Escuela y no conoce el prefijo de este portal. */
    --exp-primary: var(--sge-primary);
    --exp-primary-dark: var(--sge-primary-dark);
    --exp-primary-subtle: var(--sge-primary-subtle);
    --exp-sidebar-bg: var(--sge-sidebar-bg);
    --exp-gray-100: var(--sge-gray-100);
    --exp-gray-200: var(--sge-gray-200);
    --exp-gray-300: var(--sge-gray-300);
    --exp-gray-400: var(--sge-gray-400);
    --exp-gray-500: var(--sge-gray-500);
    --exp-gray-600: var(--sge-gray-600);
    --exp-gray-700: var(--sge-gray-700);
}

/* === APP-SHELL (viewport fijo, scroll interno) === */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--sge-bg);
    font-size: 14px;
    color: var(--sge-gray-800);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
}

*, *::before, *::after { box-sizing: border-box; }

/* === TOPBAR (ancho completo) === */
.sge-topbar {
    background: #fff;
    height: var(--sge-topbar-height);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    z-index: 1050;
    border-bottom: 1px solid var(--sge-gray-200);
}

.sge-topbar-logo {
    width: var(--sge-sidebar-width);
    min-width: var(--sge-sidebar-width);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    background: var(--sge-sidebar-bg);
    height: 100%;
}

.sge-logo-shield {
    width: 38px;
    height: 38px;
    background: var(--sge-primary);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #1a1a1a;
}

.sge-logo-shield svg { width: 22px; height: 22px; stroke-width: 2.5; }

.sge-logo-text {
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1.5px;
}

.sge-topbar-toggle {
    background: transparent;
    border: none;
    color: #fff;
    padding: 4px 8px;
    margin-left: -6px;
}

.sge-topbar-center {
    flex: 1;
    padding: 0 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.sge-topbar-greeting {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}

.sge-topbar-subrole {
    font-size: 12px;
    color: var(--sge-gray-600);
    margin-top: 1px;
}

.sge-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 18px;
}

.sge-dt-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--sge-gray-50);
    border: 1px solid var(--sge-gray-200);
    border-radius: 7px;
    padding: 6px 12px;
}

.sge-dt-pill svg { color: var(--sge-gray-600); flex-shrink: 0; width: 14px; height: 14px; }
.sge-dt-pill .dt-label { font-size: 10px; color: var(--sge-gray-500); line-height: 1; }
.sge-dt-pill .dt-value { font-size: 12px; font-weight: 600; color: #111827; line-height: 1.3; }

.sge-notif-btn {
    position: relative;
    background: var(--sge-gray-50);
    border: 1px solid var(--sge-gray-200);
    border-radius: 7px;
    cursor: pointer;
    padding: 8px 10px;
    color: var(--sge-gray-700);
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: background 0.15s;
}

.sge-notif-btn:hover { background: var(--sge-gray-100); color: var(--sge-gray-900); }
.sge-notif-btn svg { width: 19px; height: 19px; }

.sge-notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--sge-danger);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    min-width: 17px;
    height: 17px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    padding: 0 3px;
}

.sge-user-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--sge-gray-50);
    border: 1px solid var(--sge-gray-200);
    border-radius: 7px;
    padding: 6px 12px;
}

.sge-user-avatar-icon {
    width: 28px;
    height: 28px;
    background: var(--sge-sidebar-bg);
    color: var(--sge-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
}

.sge-user-avatar-icon svg { width: 15px; height: 15px; }
.sge-user-pill .u-name { font-size: 12px; font-weight: 600; color: #111827; line-height: 1.2; white-space: nowrap; }
.sge-user-pill .u-role { font-size: 10px; color: var(--sge-gray-600); line-height: 1.2; }

.sge-btn-logout {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--sge-primary);
    color: #1a1a1a;
    border: none;
    padding: 9px 16px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    white-space: nowrap;
}

.sge-btn-logout:hover { background: var(--sge-primary-dark); color: #1a1a1a; }
.sge-btn-logout svg { width: 14px; height: 14px; stroke-width: 2.5; }

/* === LAYOUT (sidebar + panel) === */
.sge-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* === SIDEBAR === */
.sge-sidebar {
    width: var(--sge-sidebar-width);
    min-width: var(--sge-sidebar-width);
    background: var(--sge-sidebar-bg);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid rgba(255,255,255,0.05);
}

.sge-sidebar::-webkit-scrollbar { width: 4px; }
.sge-sidebar::-webkit-scrollbar-track { background: transparent; }
.sge-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.sge-nav-section { padding: 10px 0; flex: 1; }

.sge-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 16px;
    cursor: pointer;
    color: var(--sge-gray-500);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
    text-decoration: none;
    user-select: none;
    position: relative;
}

.sge-nav-item:hover { background: rgba(255,255,255,0.05); color: #E5E7EB; }
.sge-nav-item.active { background: rgba(255,255,255,0.08); color: #fff; }
.sge-nav-item svg { flex-shrink: 0; width: 18px; height: 18px; }
.sge-nav-item .sge-nav-label { flex: 1; }

/* Badge numérico en nav */
.sge-nav-badge {
    background: var(--sge-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    min-width: 22px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    flex-shrink: 0;
}

.sge-nav-badge.yellow { background: var(--sge-primary); color: #1a1a1a; }

.sge-nav-chevron { width: 14px !important; height: 14px !important; color: var(--sge-gray-600); flex-shrink: 0; }

/* Sub-items del menú */
.sge-nav-sub { background: rgba(0,0,0,0.15); }

.sge-nav-sub .sge-nav-item {
    padding: 9px 16px 9px 42px;
    font-size: 12.5px;
    color: var(--sge-gray-600);
}

.sge-nav-sub .sge-nav-item:hover { color: #D1D5DB; background: rgba(255,255,255,0.04); }
.sge-nav-sub .sge-nav-item.active { color: var(--sge-primary); background: rgba(245,197,24,0.08); }

.sge-nav-sub .sge-nav-item.active::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sge-primary);
    position: absolute;
    left: 27px;
}

.sge-nav-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 0; }

.sge-sidebar-section {
    padding: 12px 16px 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--sge-gray-500);
}

.sge-sidebar-footer {
    margin-top: auto;
    padding-bottom: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* === PANEL DERECHO === */
.sge-panel-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--sge-bg);
    min-width: 0;
}

.sge-section-header {
    background: #fff;
    padding: 16px 24px;
    border-bottom: 1px solid var(--sge-gray-200);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.sge-section-header-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--sge-primary-subtle);
    color: #D4A000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sge-section-header-icon svg { width: 22px; height: 22px; stroke-width: 2; }
.sge-section-title { font-size: 17px; font-weight: 700; color: #111827; }
.sge-section-subtitle { font-size: 12px; color: var(--sge-gray-600); margin-top: 2px; }

/* Cuerpo scrollable (sustituye al antiguo .sge-content) */
.sge-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.sge-panel-body::-webkit-scrollbar { width: 6px; }
.sge-panel-body::-webkit-scrollbar-track { background: transparent; }
.sge-panel-body::-webkit-scrollbar-thumb { background: var(--sge-gray-300); border-radius: 3px; }

/* === TARJETAS === */
.sge-card {
    background: #fff;
    border: 1px solid var(--sge-gray-200);
    border-radius: 8px;
    margin-bottom: 20px;
}

.sge-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--sge-gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sge-card-header h6 {
    margin: 0;
    font-weight: 600;
    color: var(--sge-gray-800);
}

.sge-card-header h6 i {
    color: var(--sge-primary);
}

.sge-card-body {
    padding: 20px;
}

/* === TABLAS === */
.sge-table {
    font-size: 13px;
}

.sge-table thead th {
    background: var(--sge-gray-50);
    border-bottom: 2px solid var(--sge-gray-200);
    font-weight: 600;
    color: var(--sge-gray-600);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px;
    white-space: nowrap;
}

.sge-table tbody td {
    padding: 10px 12px;
    vertical-align: middle;
    border-bottom-color: var(--sge-gray-100);
}

.sge-table tbody tr:hover {
    background-color: var(--sge-primary-subtle);
}

/* === FORMULARIOS === */
.sge-form .form-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--sge-gray-700);
    margin-bottom: 4px;
}

.sge-form .form-control,
.sge-form .form-select {
    font-size: 13px;
    border-color: var(--sge-gray-300);
    padding: 8px 12px;
}

.sge-form .form-control:focus,
.sge-form .form-select:focus {
    border-color: var(--sge-primary);
    box-shadow: 0 0 0 3px rgba(253,198,22,0.25);
}

/* === BOTONES === */
.btn-sge-primary {
    background: var(--sge-primary);
    border-color: var(--sge-primary);
    color: var(--sge-on-primary);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
}

.btn-sge-primary:hover {
    background: var(--sge-primary-dark);
    border-color: var(--sge-primary-dark);
    color: var(--sge-on-primary);
}

.btn-sge-primary:active,
.btn-sge-primary:focus {
    background: var(--sge-primary-dark);
    border-color: var(--sge-primary-dark);
    color: var(--sge-on-primary);
    box-shadow: 0 0 0 3px rgba(253,198,22,0.4);
}

.btn-sge-outline {
    background: transparent;
    border-color: var(--sge-gray-300);
    color: var(--sge-gray-700);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
}

.btn-sge-outline:hover {
    background: var(--sge-primary);
    border-color: var(--sge-primary);
    color: var(--sge-on-primary);
}

/* === ETIQUETA DE CAMPO ===
   Lo que queda de las antiguas tarjetas .sge-stat, retiradas el 12 ago 2026 a
   favor de .mn-ind. Esta clase sobrevive porque el buscador la usa por su
   cuenta, como rótulo de un dato suelto (Institución, Ubicación, Contacto…),
   sin tarjeta ni número alrededor. */
.sge-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sge-gray-500);
    margin-bottom: 4px;
}

/* === INDICADOR ESTÁNDAR DE DASHBOARD (.mn-ind) ============================
   Componente ÚNICO de indicadores de toda la plataforma (decisión del 12 ago
   2026). Nace del mockup 03 de Inscripciones y Reinscripciones, que es la
   forma que el proyecto adoptó como estándar: número grande centrado arriba
   y etiqueta pequeña debajo. El color va SIEMPRE en el número, según el
   contexto de la métrica; nunca en un borde lateral ni superior, porque el
   borde de color se lee como categoría y no como alerta.

   Sustituye a .sge-stat, .sge-stat-item, .sge-gc-stat, .sge-ip-card y
   .sge-ind-card (MINUMA), y a .m-stat, .insc-ind, .t-stat, .resumen-item y
   .exp-solicitud en los demás portales.

   Vive en DOS hojas con reglas equivalentes: esta la carga MINUMA;
   escuela/assets/css/escuela.css la cargan Escuela, Maestros y Tutores. Las
   dos copias difieren solo en el prefijo de las variables (--sge-* vs --m-*),
   que apuntan a los mismos colores. Si cambias una, cambia la otra. */
.mn-ind {
    background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 6px;
    padding: 8px 10px; text-align: center; height: 100%;
}
/* Línea opcional ENCIMA del número: solo para códigos (A, FT, RJ…) o para el
   nombre del periodo. No es un subtítulo; el subtítulo va debajo. */
.mn-ind .cod { font-size: 13px; font-weight: 800; line-height: 1.2; color: var(--sge-gray-600); }
.mn-ind .num { font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--sge-gray-900); }
/* Colores del número. Dos formas equivalentes y las dos válidas: estas clases
   con nombre, para las pantallas que ya traían el color como palabra; o un
   style="color:var(--sge-…)" en línea, para las que lo calculan en PHP. Lo que
   NO cambia es que el color va en el número. */
.mn-ind .num.amarillo { color: var(--sge-primary-text); }
.mn-ind .num.rojo     { color: var(--sge-danger); }
.mn-ind .num.verde    { color: var(--sge-success); }
.mn-ind .num.naranja  { color: var(--sge-warning); }
.mn-ind .num.azul     { color: var(--sge-info); }
.mn-ind .num.gris     { color: var(--sge-gray-500); }
.mn-ind .etiqueta { font-size: 10px; color: var(--sge-gray-600); font-weight: 500; }
/* Tercera línea opcional, para el matiz que no cabe en la etiqueta. */
.mn-ind .detalle { font-size: 10px; color: var(--sge-gray-500); margin-top: 2px; }
/* Indicadores que filtran una tabla al pulsarlos: cambian el cursor y se
   encienden en amarillo, como el resto de los estados activos del proyecto. */
.mn-ind.clicable { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.mn-ind.clicable:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.mn-ind.active { border-color: var(--sge-primary); background: var(--sge-primary-subtle); }
/* Rejilla para las pantallas que no arman la fila con las columnas de
   Bootstrap. Las que sí, siguen usando .row > .col-6 .col-md-4 .col-xl. */
.mn-ind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }

/* === ESTADO VACÍO === */
.sge-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--sge-gray-400);
}

.sge-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
    color: var(--sge-gray-300);
}

/* === MODAL PIN === */
.sge-pin-input {
    text-align: center;
    font-size: 24px;
    letter-spacing: 8px;
    font-weight: 700;
    max-width: 200px;
    margin: 0 auto;
}

/* === LOGIN === */
.sge-login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sge-gray-900);
    background-image:
        radial-gradient(ellipse at 30% 50%, rgba(253,198,22,0.10) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(253,198,22,0.06) 0%, transparent 50%);
}

.sge-login-card {
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.sge-login-card h4 {
    color: var(--sge-gray-900);
    font-weight: 700;
    margin-bottom: 4px;
}

.sge-login-card .login-icon {
    color: var(--sge-primary);
}

/* === BREADCRUMB === */
.breadcrumb a {
    color: var(--sge-gray-800);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--sge-gray-900);
    text-decoration: underline;
}

/* === BADGES ESTADO === */
.badge.bg-primary {
    background-color: var(--sge-primary) !important;
    color: var(--sge-on-primary) !important;
}

/* === PAGINACIÓN === */
.pagination .page-link {
    color: var(--sge-gray-700);
}

.pagination .page-item.active .page-link {
    background-color: var(--sge-primary);
    border-color: var(--sge-primary);
    color: var(--sge-on-primary);
    font-weight: 600;
}

.pagination .page-link:focus {
    box-shadow: 0 0 0 3px rgba(253,198,22,0.25);
}

/* === LINKS === */
a.text-decoration-none {
    color: var(--sge-gray-800);
}

a.text-decoration-none:hover {
    color: var(--sge-gray-900);
}

/* === RESPONSIVE === */
@media (max-width: 992px) {
    .sge-dt-pill { display: none; }
}

@media (max-width: 768px) {
    .sge-topbar-logo { width: auto; min-width: 0; gap: 8px; }
    .sge-sidebar {
        position: fixed;
        top: var(--sge-topbar-height);
        left: 0;
        bottom: 0;
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    .sge-sidebar.show { transform: translateX(0); }
    .sge-user-pill .u-name,
    .sge-user-pill .u-role { display: none; }
    .sge-panel-body { padding: 16px; }
    .sge-section-header { padding: 14px 16px; }
}

/* ============================================================
   COMPONENTES DE CONTENIDO (Fase 2 — extraídos de los mockups)
   ============================================================ */

/* --- Barra de filtros rápidos --- */
.sge-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.sge-filter-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600;
    cursor: pointer; border: 1.5px solid var(--sge-gray-200); background: #fff;
    color: var(--sge-gray-700); transition: all 0.15s;
}
.sge-filter-btn:hover { border-color: var(--sge-primary); background: #FEF9E7; color: #111827; }
.sge-filter-btn.active { background: var(--sge-primary); border-color: var(--sge-primary); color: #23282F; }
.sge-filter-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.sge-dot-red { background: #DC2626; }
.sge-dot-orange { background: #EA580C; }
.sge-dot-blue { background: #2563EB; }
/* Contador tipo pill dentro del botón de filtro (mockup F1-01) */
.sge-filter-badge {
    font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 12px;
    min-width: 20px; text-align: center; background: #E5E7EB; color: #374151;
}
.sge-filter-btn.active .sge-filter-badge { background: rgba(35,40,47,0.15); color: #23282F; }
.sge-filter-badge.critica { background: #FEE2E2; color: #991B1B; }
.sge-filter-badge.alta    { background: #FEF3C7; color: #92400E; }
.sge-filter-badge.media   { background: #DBEAFE; color: #1E40AF; }
.sge-filter-count { margin-left: auto; font-size: 13px; color: var(--sge-gray-500); white-space: nowrap; }
.sge-filter-count strong { color: #111827; font-weight: 700; }

/* --- Separador de grupo --- */
.sge-group-divider {
    display: flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--sge-gray-500); margin: 6px 0 2px;
}
.sge-group-divider::after { content: ''; flex: 1; height: 1px; background: var(--sge-gray-200); }
.sge-group-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* --- Tarjeta de alerta (mockup F1-01: header · body etiquetado · footer) --- */
.sge-alert-card {
    background: #fff; border-radius: 8px; border: 1px solid var(--sge-gray-200);
    border-left: 5px solid #D1D5DB; padding: 16px 20px;
    transition: box-shadow 0.15s; margin-bottom: 12px;
}
.sge-alert-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.sge-alert-card.critica { border-left-color: #EF4444; }
.sge-alert-card.alta    { border-left-color: #F59E0B; }
.sge-alert-card.media   { border-left-color: #3B82F6; }

/* Encabezado: ícono + tipo a la izquierda, badges a la derecha */
.sge-alert-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px; }
.sge-alert-tipo-wrap { display: flex; align-items: center; gap: 10px; }
.sge-alert-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sge-alert-icon svg, .sge-alert-icon i { width: 20px; height: 20px; font-size: 20px; }
.sge-alert-icon.critica { color: #DC2626; }
.sge-alert-icon.alta    { color: #EA580C; }
.sge-alert-icon.media   { color: #2563EB; }
.sge-alert-tipo { font-size: 15px; font-weight: 700; color: #111827; }
.sge-alert-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.sge-prioridad-tag {
    font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 9999px;
    text-transform: uppercase; letter-spacing: 0.3px; flex-shrink: 0;
}
.sge-prioridad-tag.critica { background: #FEE2E2; color: #991B1B; }
.sge-prioridad-tag.alta    { background: #FEF3C7; color: #92400E; }
.sge-prioridad-tag.media   { background: #DBEAFE; color: #1E40AF; }

/* Cuerpo: campos etiquetados (Detalle / Ubicación / Fecha y hora) */
.sge-alert-body { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 12px 24px; }
.sge-alert-field { display: flex; flex-direction: column; min-width: 0; }
.sge-alert-field-label { font-size: 11px; font-weight: 600; color: #6B7280; text-transform: uppercase; letter-spacing: 0.3px; }
.sge-alert-field-value { font-size: 14px; color: #111827; }

/* Insignia de estado (verde "Activa") — compartida con Pendientes */
.sge-estado-tag {
    display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
    padding: 4px 12px; border-radius: 9999px; background: #D1FAE5; color: #065F46;
}

/* Pie: tiempo relativo a la izquierda, botón "Ver Detalle" a la derecha */
.sge-alert-footer {
    margin-top: 12px; padding-top: 12px; border-top: 1px solid #F3F4F6;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
}
.sge-alert-time { font-size: 12px; color: #6B7280; white-space: nowrap; }
.sge-btn-detalle {
    background: var(--sge-primary); color: #23282F; border: none; padding: 6px 18px;
    border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer;
    transition: background 0.15s; white-space: nowrap; text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
}
.sge-btn-detalle:hover { background: var(--sge-primary-dark); color: #23282F; }

/* Responsive: el pie apila y el botón ocupa todo el ancho */
@media (max-width: 640px) {
    .sge-alert-footer { flex-direction: column; align-items: stretch; }
    .sge-btn-detalle { justify-content: center; width: 100%; }
}

/* --- Pestañas (tabs de formularios tipo Gestión de Colegios) --- */
.sge-pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--sge-gray-200); flex-wrap: wrap; }
.sge-pestana {
    padding: 10px 18px; font-size: 13px; font-weight: 600; color: var(--sge-gray-600);
    cursor: pointer; border: none; background: transparent; border-bottom: 2px solid transparent;
    margin-bottom: -1px; transition: all 0.15s; text-decoration: none;
}
.sge-pestana:hover { color: #111827; }
.sge-pestana.active { color: var(--sge-primary-dark); border-bottom-color: var(--sge-primary); }

/* --- Barra de filtros con chips (F1-02) --- */
.sge-filtros-bar {
    background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 8px;
    padding: 14px 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sge-filtros-bar label { font-size: 12px; font-weight: 600; color: var(--sge-gray-700); white-space: nowrap; margin: 0; }
.sge-filtros-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sge-chip {
    padding: 5px 13px; border-radius: 6px; font-size: 12px; font-weight: 600;
    cursor: pointer; border: 1.5px solid var(--sge-gray-200); background: #fff; color: var(--sge-gray-700);
    transition: all 0.15s; white-space: nowrap; text-decoration: none; display: inline-block;
}
.sge-chip:hover { border-color: var(--sge-primary); color: #111827; }
.sge-chip.active { background: var(--sge-primary); border-color: var(--sge-primary); color: #1a1a1a; }
.sge-filtros-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sge-input-fecha {
    border: 1.5px solid var(--sge-gray-200); border-radius: 6px; padding: 6px 10px;
    font-size: 12px; color: var(--sge-gray-700); background: #F9FAFB; outline: none;
}
.sge-input-fecha:focus { border-color: var(--sge-primary); }

/* --- Tabla de actividad (F1-02) --- */
.sge-tabla-wrap { background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 8px; overflow: hidden; }
.sge-tabla { width: 100%; border-collapse: collapse; margin: 0; }
.sge-tabla thead tr { background: #F9FAFB; border-bottom: 2px solid var(--sge-gray-200); }
.sge-tabla th {
    padding: 11px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--sge-gray-600); text-align: left; white-space: nowrap;
}
.sge-tabla tbody tr { border-bottom: 1px solid #F3F4F6; transition: background 0.12s; }
.sge-tabla tbody tr:last-child { border-bottom: none; }
.sge-tabla tbody tr.clickable { cursor: pointer; }
.sge-tabla tbody tr.clickable:hover { background: #FFFBEB; }
.sge-tabla td { padding: 14px 16px; font-size: 13px; color: var(--sge-gray-700); vertical-align: middle; }
.sge-td-fecha { white-space: nowrap; }
.sge-fecha-dia { font-weight: 600; color: #111827; }
.sge-fecha-hora { font-size: 11px; color: var(--sge-gray-400); margin-top: 2px; }

/* Etiquetas de categoría del movimiento */
.sge-desc-tag {
    display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 4px; margin-right: 6px; white-space: nowrap; vertical-align: middle;
}
.sge-tag-new     { background: #DCFCE7; color: #15803D; }
.sge-tag-update  { background: #DBEAFE; color: #1D4ED8; }
.sge-tag-suspend { background: #FFEDD5; color: #C2410C; }
.sge-tag-legal   { background: #FEE2E2; color: #DC2626; }
.sge-tag-config  { background: #F3E8FF; color: #7C3AED; }

/* Colegio referenciado */
.sge-colegio-nombre { font-size: 12px; color: var(--sge-gray-700); font-weight: 500; }
.sge-colegio-tipo {
    display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px;
    border-radius: 3px; margin-top: 2px; background: #F3F4F6; color: var(--sge-gray-600);
}

/* Usuario responsable. El círculo de iniciales de color se retiró el
   12 ago 2026 junto con el resto de los avatares del sistema. */
.sge-usuario-wrap { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.sge-usuario-nombre { font-weight: 600; color: #111827; font-size: 13px; }
.sge-usuario-rol { font-size: 11px; color: var(--sge-gray-400); margin-top: 1px; }

/* Botón "Ver registro" */
.sge-btn-ir {
    display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
    color: #D4A000; background: none; border: none; cursor: pointer; padding: 4px 0;
    transition: color 0.15s; text-decoration: none; white-space: nowrap;
}
.sge-btn-ir:hover { color: var(--sge-primary); }
.sge-btn-ir svg { width: 13px; height: 13px; }

/* Cabecera de la tabla: total de movimientos + orden (mockup F1-02) */
.sge-tabla-header {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 12px 20px; border-bottom: 1px solid var(--sge-gray-200); background: #F9FAFB;
}
.sge-total-mov { font-size: 13px; color: var(--sge-gray-500); }
.sge-total-mov strong { color: #111827; font-weight: 700; }
.sge-orden-info { font-size: 12px; color: var(--sge-gray-500); }

/* Botón "Aplicar" del rango de fechas (amarillo, mockup F1-02) */
.sge-chip-aplicar { background: var(--sge-primary); border-color: var(--sge-primary); color: #23282F; }
.sge-chip-aplicar:hover { background: var(--sge-primary-dark); border-color: var(--sge-primary-dark); color: #23282F; }

/* Botón "Ver registro" (pill gris, mockup F1-02) */
.sge-btn-registro {
    display: inline-block; background: #F3F4F6; border: 1px solid var(--sge-gray-200);
    padding: 4px 14px; border-radius: 6px; font-size: 12px; font-weight: 600;
    color: var(--sge-gray-700); cursor: pointer; transition: all 0.15s;
    white-space: nowrap; text-decoration: none;
}
.sge-btn-registro:hover { background: var(--sge-gray-200); color: #111827; }

/* Paginación (F1-02) */
.sge-paginacion {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    padding: 12px 18px; border-top: 1px solid #F3F4F6; background: #FAFAFA;
}
.sge-pag-info { font-size: 12px; color: var(--sge-gray-600); }
.sge-pag-btns { display: flex; gap: 4px; }
.sge-pag-btn {
    min-width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--sge-gray-200);
    background: #fff; color: var(--sge-gray-700); font-size: 12px; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; padding: 0 6px; text-decoration: none;
}
.sge-pag-btn:hover { background: #F9FAFB; color: var(--sge-gray-700); }
.sge-pag-btn.active { background: var(--sge-primary); border-color: var(--sge-primary); color: #1a1a1a; }
.sge-pag-btn.disabled { opacity: 0.4; pointer-events: none; }

/* --- Información Global (F1-03) --- */
.sge-zona-label {
    display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; color: var(--sge-gray-500); margin: 6px 0 2px;
}
.sge-zona-label::after { content: ''; flex: 1; height: 1px; background: var(--sge-gray-200); }

/* Los indicadores de Información Global usan .mn-ind + .mn-ind-grid desde el
   12 ago 2026. Las clases .sge-ind-* que vivían aquí se retiraron; además
   chocaban por nombre con las de Credenciales/Impresión, más abajo en esta
   misma hoja, y era la segunda definición la que ganaba. */

.sge-buscador-card { background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 8px; overflow: hidden; }
.sge-buscador-top {
    padding: 14px 18px; display: flex; gap: 10px; align-items: center;
    border-bottom: 1px solid #F3F4F6; flex-wrap: wrap;
}
.sge-search-wrap {
    flex: 1; min-width: 200px; display: flex; align-items: center; gap: 10px;
    border: 1.5px solid var(--sge-gray-200); border-radius: 7px; padding: 8px 14px; background: #F9FAFB;
}
.sge-search-wrap svg { color: #9CA3AF; flex-shrink: 0; }
.sge-search-wrap input { border: none; background: none; outline: none; font-size: 13px; color: var(--sge-gray-700); width: 100%; }
.sge-filtro-select {
    border: 1.5px solid var(--sge-gray-200); border-radius: 7px; padding: 8px 12px;
    font-size: 12px; color: var(--sge-gray-700); background: #F9FAFB; outline: none; min-width: 140px;
}

.sge-resultado-item {
    display: flex; align-items: center; gap: 14px; padding: 11px 18px;
    cursor: pointer; border-bottom: 1px solid #F9FAFB; transition: background 0.12s;
}
.sge-resultado-item:hover { background: #FAFAFA; }
.sge-resultado-item.selected { background: #FEF9E7; border-left: 3px solid var(--sge-primary); padding-left: 15px; }
.sge-res-icon {
    width: 32px; height: 32px; border-radius: 6px; background: #F3F4F6;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--sge-gray-600);
}
.sge-resultado-item.selected .sge-res-icon { background: #FEF9E7; color: #D4A000; }
.sge-res-nombre { font-size: 13px; font-weight: 600; color: #111827; }
.sge-res-meta { font-size: 11px; color: var(--sge-gray-600); margin-top: 1px; }
.sge-res-tipo { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.sge-res-tipo.madre  { background: #EDE9FE; color: #7C3AED; }
.sge-res-tipo.centro { background: #DBEAFE; color: #1D4ED8; }

.sge-cascada-bloque { border-top: 1px solid #F3F4F6; background: #FAFAFA; padding: 12px 18px; }
.sge-cascada-titulo {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    color: #9CA3AF; margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.sge-cascada-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.sge-nivel-indicadores { border-top: 2px solid var(--sge-primary); padding: 16px 18px; background: #FFFBEB; }
.sge-nivel-ind-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.sge-nivel-ind-titulo { font-size: 13px; font-weight: 700; color: #111827; }
.sge-nivel-ind-sub { font-size: 11px; color: var(--sge-gray-600); }
.sge-nivel-ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 768px) { .sge-nivel-ind-grid { grid-template-columns: repeat(2, 1fr); } }
.sge-nivel-card { background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 7px; padding: 14px 16px; }
.sge-nivel-numero { font-size: 24px; font-weight: 800; color: #111827; }
.sge-nivel-numero.amarillo { color: #D4A000; }
.sge-nivel-nombre { font-size: 11px; color: var(--sge-gray-600); margin-top: 4px; line-height: 1.3; }

.sge-alertas-card { background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 8px; overflow: hidden; }
.sge-alertas-header {
    padding: 12px 18px; background: #F9FAFB; border-bottom: 1px solid var(--sge-gray-200);
    display: flex; align-items: center; justify-content: space-between;
}
.sge-alertas-titulo { font-size: 13px; font-weight: 700; color: #111827; }
.sge-alertas-auto { font-size: 11px; color: #9CA3AF; display: flex; align-items: center; gap: 5px; }
.sge-auto-dot { width: 6px; height: 6px; border-radius: 50%; background: #10B981; animation: sgePulse 2s infinite; }
@keyframes sgePulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.sge-alerta-row {
    display: flex; align-items: center; gap: 14px; padding: 12px 18px;
    border-bottom: 1px solid #F9FAFB; text-decoration: none; transition: background 0.12s;
}
.sge-alerta-row:hover { background: #FAFAFA; }
.sge-alerta-row:last-child { border-bottom: none; }
.sge-alerta-tipo-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 4px; white-space: nowrap; }
.sge-badge-contrato { background: #FFEDD5; color: #C2410C; }
.sge-badge-pago     { background: #FEE2E2; color: #DC2626; }
.sge-alerta-inst { font-size: 13px; font-weight: 600; color: #111827; flex: 1; }
.sge-alerta-fecha { font-size: 11px; color: #9CA3AF; white-space: nowrap; }
.sge-alerta-estado { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: #FEF9E7; color: #D4A000; }

/* --- Gestión de Colegios (F1-04) --- */
.sge-res-right { display: flex; align-items: center; gap: 8px; }
.sge-estatus-tag { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.sge-estatus-activo     { background: #DCFCE7; color: #16A34A; }
.sge-estatus-suspendido { background: #FFEDD5; color: #C2410C; }
.sge-estatus-bloqueado  { background: #FEE2E2; color: #DC2626; }

.sge-ficha-card { background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 8px; overflow: hidden; }
.sge-ficha-header {
    padding: 14px 20px; background: #FAFAFA; border-bottom: 1px solid var(--sge-gray-200);
    display: flex; align-items: center; gap: 12px;
}
.sge-ficha-ico {
    width: 38px; height: 38px; border-radius: 7px; background: #FEF9E7;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #D4A000;
    overflow: hidden;
}
/* Cuando el plantel ya tiene logotipo, ocupa el cuadro completo sin recortarse. */
.sge-ficha-ico img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.sge-ficha-nombre { font-size: 15px; font-weight: 700; color: #111827; }
.sge-ficha-meta { font-size: 12px; color: var(--sge-gray-600); margin-top: 2px; }

.sge-ficha-pestanas { display: flex; border-bottom: 1px solid var(--sge-gray-200); background: #fff; padding: 0 20px; }
.sge-ficha-pestana {
    padding: 12px 18px; font-size: 13px; font-weight: 600; color: var(--sge-gray-600);
    cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap;
    background: none; border-top: none; border-left: none; border-right: none;
}
.sge-ficha-pestana.active { color: #D4A000; border-bottom-color: var(--sge-primary); }

.sge-pestana-contenido { padding: 24px 20px; display: flex; flex-direction: column; gap: 28px; }

.sge-seccion-titulo {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--sge-gray-600); display: flex; align-items: center; gap: 10px;
    padding-bottom: 10px; border-bottom: 2px solid var(--sge-primary); margin-bottom: 16px;
}
.sge-seccion-titulo svg, .sge-seccion-titulo i { color: #D4A000; width: 16px; height: 16px; font-size: 14px; }

.sge-campos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sge-campos-grid.tres { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 992px) { .sge-campos-grid, .sge-campos-grid.tres { grid-template-columns: 1fr; } }
.sge-campo-group { display: flex; flex-direction: column; gap: 5px; }
.sge-campo-group.full { grid-column: 1 / -1; }
.sge-campo-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #9CA3AF; }
.sge-campo-input, .sge-campo-select {
    font-size: 13px; color: #111827; font-weight: 500; background: #fff;
    border: 1.5px solid var(--sge-gray-200); border-radius: 6px; padding: 9px 12px;
    outline: none; font-family: inherit; width: 100%;
}
.sge-campo-input:focus, .sge-campo-select:focus { border-color: var(--sge-primary); }
.sge-campo-input:disabled, .sge-campo-select:disabled { background: #F9FAFB; color: var(--sge-gray-500); }
.sge-estatus-input-activo { font-size: 13px; font-weight: 600; color: #16A34A; background: #DCFCE7; border: 1.5px solid #BBF7D0; border-radius: 6px; padding: 9px 12px; }
.sge-estatus-input-suspendido { font-size: 13px; font-weight: 600; color: #C2410C; background: #FFEDD5; border: 1.5px solid #FDBA74; border-radius: 6px; padding: 9px 12px; }
.sge-estatus-input-bloqueado { font-size: 13px; font-weight: 600; color: #DC2626; background: #FEE2E2; border: 1.5px solid #FCA5A5; border-radius: 6px; padding: 9px 12px; }

/* CEO / personas */
.sge-ceo-card {
    background: #F9FAFB; border: 1px solid var(--sge-gray-200); border-radius: 8px;
    padding: 16px; display: flex; gap: 14px; align-items: flex-start;
}
.sge-ceo-nombre { font-size: 14px; font-weight: 700; color: #111827; }
.sge-ceo-cargo { font-size: 12px; color: var(--sge-gray-600); margin-top: 2px; }
.sge-ceo-contacto { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.sge-ceo-dato { font-size: 12px; color: var(--sge-gray-700); display: flex; align-items: center; gap: 5px; }
.sge-ceo-dato i { font-size: 11px; color: #9CA3AF; }
.sge-tag-activo-ceo { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 4px; background: #DCFCE7; color: #16A34A; }

.sge-historial-ceo { margin-top: 12px; padding: 10px 14px; border: 1px dashed var(--sge-gray-200); border-radius: 6px; }
.sge-historial-titulo { font-size: 11px; font-weight: 700; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.sge-historial-row { font-size: 12px; color: var(--sge-gray-600); padding: 4px 0; border-bottom: 1px solid #F3F4F6; display: flex; gap: 12px; flex-wrap: wrap; }
.sge-historial-row:last-child { border-bottom: none; }
.sge-historial-fecha { color: #9CA3AF; white-space: nowrap; }
.sge-historial-nombre { font-weight: 600; color: var(--sge-gray-700); }

.sge-persona-card {
    background: #F9FAFB; border: 1px solid var(--sge-gray-200); border-radius: 8px;
    padding: 14px 16px; display: flex; gap: 14px; align-items: center; margin-bottom: 10px;
}
.sge-persona-nombre { font-size: 13px; font-weight: 700; color: #111827; }
.sge-persona-cargo { font-size: 12px; color: var(--sge-gray-600); margin-top: 2px; }
.sge-btn-agregar-persona {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 1.5px dashed #D1D5DB; border-radius: 8px; padding: 12px 18px;
    background: #fff; color: var(--sge-gray-600); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.15s; width: 100%;
}
.sge-btn-agregar-persona:hover { border-color: var(--sge-primary); color: #D4A000; background: #FFFBEB; }

/* Servicios incluidos */
.sge-servicios-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 768px) { .sge-servicios-grid { grid-template-columns: 1fr; } }
.sge-servicio-item {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    border: 1px solid var(--sge-gray-200); border-radius: 6px; background: #F9FAFB;
}
.sge-servicio-item i { color: #10B981; flex-shrink: 0; font-size: 13px; }
.sge-servicio-nombre { font-size: 12px; font-weight: 500; color: var(--sge-gray-700); }

/* Tabla de costos */
.sge-costos-tabla { width: 100%; border-collapse: collapse; }
.sge-costos-tabla thead tr { background: #F9FAFB; border-bottom: 1px solid var(--sge-gray-200); }
.sge-costos-tabla th { padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--sge-gray-600); text-align: left; }
.sge-costos-tabla tbody tr { border-bottom: 1px solid #F3F4F6; }
.sge-costos-tabla tbody tr:last-child { border-bottom: none; }
.sge-costos-tabla td { padding: 11px 14px; font-size: 13px; color: var(--sge-gray-700); }
.sge-costos-tabla td.monto { font-weight: 700; color: #111827; }

/* Pie fijo de la ficha */
.sge-ficha-footer {
    padding: 14px 20px; border-top: 1px solid var(--sge-gray-200); background: #F9FAFB;
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    position: sticky; bottom: 0; z-index: 5;
}
.sge-btn-guardar {
    display: inline-flex; align-items: center; gap: 7px; background: var(--sge-primary);
    color: #1a1a1a; border: none; padding: 9px 20px; border-radius: 7px;
    font-size: 13px; font-weight: 700; cursor: pointer;
}
.sge-btn-guardar:hover { background: var(--sge-primary-dark); }
.sge-btn-cancelar {
    padding: 9px 18px; border-radius: 7px; font-size: 13px; font-weight: 600;
    background: #fff; border: 1.5px solid var(--sge-gray-200); color: var(--sge-gray-700);
    cursor: pointer; text-decoration: none; display: inline-block;
}
.sge-btn-suspender { padding: 9px 16px; border-radius: 7px; font-size: 12px; font-weight: 600; background: #F59E0B; border: 1.5px solid #F59E0B; color: #fff; cursor: pointer; }
.sge-btn-suspender:hover { background: #D97706; border-color: #D97706; }
.sge-btn-archivar  { padding: 9px 16px; border-radius: 7px; font-size: 12px; font-weight: 600; background: #6B7280; border: 1.5px solid #6B7280; color: #fff; cursor: pointer; }
.sge-btn-archivar:hover { background: #4B5563; border-color: #4B5563; }
.sge-btn-reactivar { padding: 9px 16px; border-radius: 7px; font-size: 12px; font-weight: 600; background: #fff; border: 1.5px solid #86EFAC; color: #16A34A; cursor: pointer; }

/* Botón "Nuevo Registro" en la cabecera de sección */
.sge-btn-nuevo {
    display: inline-flex; align-items: center; gap: 8px; background: var(--sge-primary);
    color: #1a1a1a; border: none; padding: 10px 18px; border-radius: 7px;
    font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.sge-btn-nuevo:hover { background: var(--sge-primary-dark); color: #1a1a1a; }

/* --- Archivo Legal (F1-05) --- */
.sge-pw-overlay {
    display: flex; align-items: center; justify-content: center; min-height: 60vh;
}
.sge-pw-box {
    background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 10px;
    padding: 32px; width: 100%; max-width: 400px; text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.sge-pw-box .pw-icon { font-size: 34px; display: block; margin-bottom: 10px; }
.sge-pw-box h3 { font-size: 17px; font-weight: 700; color: #111827; margin-bottom: 6px; }
.sge-pw-box p { font-size: 12px; color: var(--sge-gray-600); margin-bottom: 18px; }
.sge-pw-box .campo { text-align: left; margin-bottom: 12px; }
.sge-pw-box .campo label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #9CA3AF; margin-bottom: 5px; }
.sge-pw-error { display: none; margin-top: 12px; font-size: 12px; color: #DC2626; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 6px; padding: 8px 12px; }

.sge-arch-result {
    background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 8px;
    padding: 14px 18px; display: flex; align-items: center; gap: 14px;
    cursor: pointer; transition: all 0.15s; margin-bottom: 10px; text-decoration: none;
}
.sge-arch-result:hover { border-color: var(--sge-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.sge-arch-result .name { font-size: 14px; font-weight: 700; color: #111827; }
.sge-arch-result .detail { font-size: 12px; color: var(--sge-gray-600); margin-top: 2px; }

.sge-motivo-badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 5px; white-space: nowrap; }
.sge-motivo-badge.contrato_finalizado   { background: #DBEAFE; color: #1D4ED8; }
.sge-motivo-badge.cierre_administrativo { background: #FFEDD5; color: #C2410C; }
.sge-motivo-badge.cierre_operaciones    { background: #FEE2E2; color: #DC2626; }
.sge-motivo-badge.envio_manual          { background: #F3E8FF; color: #7C3AED; }

.sge-arch-registro { background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 10px; padding: 22px; }
.sge-arch-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--sge-gray-200); margin-bottom: 20px;
}
.sge-arch-header .nombre { font-size: 19px; font-weight: 800; color: #111827; }
.sge-arch-header .subtitulo { font-size: 12px; color: var(--sge-gray-600); margin-top: 3px; }
.sge-tiempo-archivo {
    display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600;
    color: #92400E; background: #FEF3C7; border: 1px solid #FDE68A; border-radius: 6px; padding: 4px 10px;
}
.sge-badge-archivado { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 5px; background: #F3F4F6; color: #6B7280; }
.sge-btn-reactivar-arch { background: var(--sge-primary); color: #1a1a1a; border: none; padding: 8px 16px; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; }
.sge-btn-imprimir-arch  { background: #fff; color: var(--sge-gray-700); border: 1.5px solid var(--sge-gray-200); padding: 8px 16px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
.sge-btn-depurar-arch   { background: #EF4444; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; }

.sge-arch-seccion { margin-bottom: 24px; }
.sge-arch-seccion h3 {
    font-size: 13px; font-weight: 700; color: #111827; margin-bottom: 12px;
    padding-bottom: 8px; border-bottom: 2px solid var(--sge-primary);
}
.sge-arch-campo .etiqueta { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #9CA3AF; }
.sge-arch-campo .valor { display: block; font-size: 13px; font-weight: 500; color: #111827; margin-top: 3px; }

/* El resumen de datos del archivado usa .mn-ind + .mn-ind-grid desde el
   12 ago 2026; .sge-stats-resumen y .sge-stat-item se retiraron. */

.sge-doc-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    border: 1px solid var(--sge-gray-200); border-radius: 6px; background: #F9FAFB;
    font-size: 13px; color: var(--sge-gray-700); margin-bottom: 6px;
}
.sge-doc-item .meta { margin-left: auto; font-size: 11px; color: #9CA3AF; white-space: nowrap; }

.sge-radio-card { display: block; border: 1.5px solid var(--sge-gray-200); border-radius: 6px; padding: 10px 12px; cursor: pointer; margin-bottom: 8px; transition: border-color 0.15s; }
.sge-radio-card:hover { border-color: var(--sge-primary); }
.sge-radio-card strong { display: block; font-size: 13px; color: #111827; }
.sge-radio-card .opcion-desc { display: block; font-size: 11px; color: var(--sge-gray-600); margin-top: 2px; }
.sge-radio-card .sugerida { font-size: 10px; font-weight: 700; color: #D4A000; }

.sge-warning-box { background: #FEF2F2; border: 1px solid #FECACA; border-radius: 6px; padding: 10px 14px; font-size: 12px; color: #B91C1C; margin-bottom: 14px; }

.sge-btn-volver {
    display: inline-flex; align-items: center; gap: 6px; background: #fff;
    border: 1.5px solid var(--sge-gray-200); border-radius: 6px; padding: 7px 14px;
    font-size: 12px; font-weight: 600; color: var(--sge-gray-700); cursor: pointer;
    text-decoration: none; margin-bottom: 12px;
}
.sge-btn-volver:hover { border-color: var(--sge-primary); color: #111827; }

/* Diff de cambios en el historial de colegios (antes → ahora) */
.sge-cambios { background: #F9FAFB; border: 1px solid var(--sge-gray-200); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.sge-cambios-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--sge-gray-500); margin-bottom: 2px; }
.sge-cambio-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.sge-cambio-campo { font-weight: 600; color: var(--sge-gray-700); }
.sge-cambio-campo::after { content: ':'; }
.sge-cambio-antes { color: #B91C1C; text-decoration: line-through; }
.sge-cambio-flecha { color: var(--sge-gray-400); }
.sge-cambio-ahora { color: #15803D; font-weight: 600; }

/* ============================================================
   Información del Plantel · vista MINUMA (mockup F1-14)
   ============================================================ */
/* Cascada de filtros */
.sge-ip-cascada {
    background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 8px;
    padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: flex-end;
    gap: 12px 18px; margin-bottom: 16px;
}
.sge-ip-campo { flex: 1 0 130px; min-width: 120px; }
.sge-ip-campo label {
    display: block; font-size: 11px; font-weight: 600; color: var(--sge-gray-500);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;
}
.sge-ip-campo select {
    width: 100%; padding: 6px 10px; border: 1px solid var(--sge-gray-200);
    border-radius: 6px; font-size: 14px; background: #fff; color: #111827;
}
.sge-ip-campo select:focus { border-color: var(--sge-primary); outline: none; box-shadow: 0 0 0 3px rgba(245,197,24,0.15); }
.sge-ip-campo select:disabled { background: #F9FAFB; color: var(--sge-gray-400); }
.sge-ip-breadcrumb {
    width: 100%; font-size: 13px; color: var(--sge-gray-500);
    padding-top: 8px; border-top: 1px solid #F3F4F6; margin-top: 4px;
}
.sge-ip-breadcrumb span { color: #111827; font-weight: 600; }

/* Estado vacío */
.sge-ip-placeholder {
    background: #fff; border: 1px dashed var(--sge-gray-200); border-radius: 8px;
    padding: 48px 20px; text-align: center; color: var(--sge-gray-500);
}
.sge-ip-placeholder svg, .sge-ip-placeholder i { width: 40px; height: 40px; font-size: 36px; color: var(--sge-gray-300); margin-bottom: 12px; }
.sge-ip-placeholder p { margin: 0; font-size: 14px; }

/* Portada */
.sge-ip-portada { background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 8px; overflow: hidden; }
.sge-ip-portada-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.sge-ip-header { display: flex; align-items: center; gap: 16px; }
.sge-ip-logo {
    width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--sge-gray-200);
    /* contain: es el logotipo que sube la escuela, recortarlo lo mutila */
    object-fit: contain; background: #fff; flex-shrink: 0; padding: 4px;
}
.sge-ip-logo-fb { display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; color: #23282F; background: var(--sge-primary); }
.sge-ip-datos { flex: 1; min-width: 0; }
.sge-ip-datos .nombre { font-size: 20px; font-weight: 700; color: #111827; }
.sge-ip-datos .ubicacion { font-size: 14px; color: var(--sge-gray-500); margin-top: 2px; }
.sge-ip-datos .lema { font-size: 14px; color: var(--sge-gray-600); font-style: italic; margin-top: 4px; }

.sge-ip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.sge-ip-grid .item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sge-ip-grid .label { font-size: 11px; font-weight: 600; color: var(--sge-gray-500); text-transform: uppercase; letter-spacing: 0.3px; }
.sge-ip-grid .value { font-size: 14px; color: #111827; }
.sge-ip-grid .value i { width: 14px; color: var(--sge-gray-400); margin-right: 4px; }
.sge-ip-redes { display: flex; gap: 12px; font-size: 20px; margin-top: 2px; }
.sge-ip-redes a { color: var(--sge-gray-500); transition: color 0.15s; }
.sge-ip-redes a:hover { color: var(--sge-primary); }
.sge-ip-aviso { background: #FEF9E7; border-left: 4px solid var(--sge-primary); padding: 12px 16px; border-radius: 4px; }
.sge-ip-aviso .titulo { font-weight: 700; color: #111827; }
.sge-ip-aviso .subtitulo { font-size: 14px; color: var(--sge-gray-600); }
.sge-ip-eventos { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sge-ip-evento { display: flex; gap: 12px; flex-wrap: wrap; font-size: 14px; color: #111827; padding: 6px 0; border-bottom: 1px solid #F3F4F6; }
.sge-ip-evento:last-child { border-bottom: none; }
.sge-ip-evento .fecha { font-weight: 600; color: var(--sge-gray-500); min-width: 130px; }
.sge-ip-sin-portada { font-size: 13px; color: var(--sge-gray-500); padding: 8px 0; }

/* Ciclos escolares del plantel (solo consulta: los crea la escuela) */
.sge-ip-ciclo { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; border-bottom: 1px solid #F3F4F6; }
.sge-ip-ciclo:last-child { border-bottom: none; }
.sge-ip-ciclo .nom { font-size: 14px; font-weight: 600; color: #111827; }
.sge-ip-ciclo .nom .tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }
.sge-ip-ciclo .det { font-size: 12px; color: var(--sge-gray-500); }

/* Indicadores del nivel */
.sge-ip-indicadores {
    border-top: 2px solid var(--sge-primary); padding: 16px 18px; background: #FFFBEB;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
/* Las tarjetas de dentro son .mn-ind desde el 12 ago 2026; aquí solo queda la
   banda amarilla que las envuelve. */
.sge-ip-cargando { grid-column: 1 / -1; text-align: center; font-size: 13px; color: var(--sge-gray-500); }

@media (max-width: 768px) {
    .sge-ip-campo { flex: 1 0 100%; }
    .sge-ip-grid { grid-template-columns: 1fr; }
    .sge-ip-indicadores { grid-template-columns: repeat(2, 1fr); }
    .sge-ip-header { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
    .sge-ip-indicadores { grid-template-columns: 1fr; }
}

/* ============================================================
   Inscripciones y Reinscripciones · vista MINUMA (mockup F1-16-3)
   ============================================================ */
/* Filtros con etiqueta */
.sge-ins-filtros { background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 8px; padding: 16px 20px; margin-bottom: 16px; }
.sge-ins-filtros-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.sge-ins-field { flex: 1; min-width: 140px; }
.sge-ins-field label { display: block; font-size: 11px; font-weight: 600; color: var(--sge-gray-500); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.sge-ins-field input, .sge-ins-field select { width: 100%; padding: 8px 12px; border: 1px solid var(--sge-gray-200); border-radius: 6px; font-size: 14px; background: #fff; color: #111827; }
.sge-ins-field input:focus, .sge-ins-field select:focus { outline: none; border-color: var(--sge-primary); box-shadow: 0 0 0 3px rgba(245,197,24,0.15); }

/* Resultados: instituciones (filas planas) */
.sge-ins-resultados { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sge-ins-inst { background: #F9FAFB; border: 1px solid var(--sge-gray-200); border-radius: 6px; padding: 10px 14px; cursor: pointer; transition: all 0.15s; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sge-ins-inst:hover, .sge-ins-inst.sel { border-color: var(--sge-primary); background: #FFFBEB; }
.sge-ins-inst .nombre { font-weight: 600; color: #111827; }
.sge-ins-inst .detalle { font-size: 13px; color: var(--sge-gray-500); }
.sge-ins-badge-pend { background: #FEE2E2; color: #991B1B; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 12px; white-space: nowrap; }

/* Bloques (planteles / solicitudes) */
.sge-ins-bloque { margin-bottom: 16px; }
.sge-ins-bloque-tit { font-size: 14px; font-weight: 700; color: var(--sge-gray-700); margin-bottom: 8px; }
.sge-ins-planteles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.sge-ins-plantel { background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 6px; padding: 12px 14px; cursor: pointer; transition: all 0.15s; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sge-ins-plantel:hover, .sge-ins-plantel.sel { border-color: var(--sge-primary); background: #FFFBEB; }
.sge-ins-plantel .nombre { font-weight: 600; color: #111827; }
.sge-ins-plantel .detalle { font-size: 12px; color: var(--sge-gray-500); }
.sge-ins-badge-sol { background: var(--sge-primary); color: #23282F; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 12px; white-space: nowrap; }

/* Solicitudes */
.sge-ins-solicitud { background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 6px; padding: 12px 16px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.sge-ins-solicitud .info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sge-ins-solicitud .tipo { font-weight: 600; color: #111827; }
.sge-ins-solicitud .alumno { font-size: 13px; color: var(--sge-gray-700); }
.sge-ins-solicitud .fecha { font-size: 12px; color: var(--sge-gray-400); }
.sge-ins-solicitud .acciones { display: flex; gap: 8px; align-items: center; }

/* Insignia de estado de solicitud (pill) */
.sge-estado-badge { padding: 4px 12px; border-radius: 9999px; font-size: 11px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.sge-estado-badge.pendiente { background: #FEF3C7; color: #92400E; }
.sge-estado-badge.aprobada { background: #DCFCE7; color: #15803D; }
.sge-estado-badge.rechazada { background: #FEE2E2; color: #991B1B; }
.sge-estado-badge.expirada { background: #E5E7EB; color: #4B5563; }

/* ============================================================
   Gestión de Colegios · panorama del detalle (mockup F1-04)
   ============================================================ */
/* Acciones en la cabecera de la ficha */
.sge-ficha-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.sge-ficha-acciones .sge-btn-suspender,
.sge-ficha-acciones .sge-btn-reactivar,
.sge-ficha-acciones .sge-btn-archivar { padding: 6px 14px; font-size: 12px; border-radius: 6px; }

/* Fila de estadísticas */
/* Banda de indicadores dentro de la tarjeta del colegio. Las tarjetas de
   dentro son .mn-ind desde el 12 ago 2026; esta clase solo aporta el relleno,
   la línea inferior y la rejilla. */
.sge-gc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--sge-gray-200); }

/* Secciones apiladas del detalle */
.sge-gc-seccion { padding: 16px 20px; border-bottom: 1px solid var(--sge-gray-200); }
.sge-gc-seccion-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.sge-gc-seccion-head h3 { font-size: 14px; font-weight: 700; color: var(--sge-gray-700); margin: 0; }
.sge-gc-seccion-tit { font-size: 14px; font-weight: 700; color: var(--sge-gray-700); padding: 16px 20px 0; }

/* Lista de planteles */
.sge-gc-planteles { display: flex; flex-direction: column; gap: 6px; }
.sge-gc-plantel { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #F9FAFB; border: 1px solid var(--sge-gray-200); border-radius: 6px; padding: 10px 14px; }
.sge-gc-plantel .nombre { font-weight: 600; color: #111827; }
.sge-gc-plantel .detalle { font-size: 12px; color: var(--sge-gray-500); margin-left: 8px; }
.sge-gc-plantel:hover { border-color: var(--sge-primary); box-shadow: 0 2px 6px rgba(0,0,0,.04); }

/* Empleado MINUMA asignado (solo lectura) + chips de disponibilidad (Vista Plantel) */
.sge-empleado-minuma { display: flex; align-items: center; gap: 10px; background: #F3F4F6; border: 1px dashed #D1D5DB; border-radius: 6px; padding: 12px 16px; color: var(--sge-gray-500); font-size: 14px; }
.sge-empleado-minuma i { color: var(--sge-gray-500); }
.sge-empleado-minuma strong { color: #1F2937; }
.sge-chip-disponible { display: inline-flex; align-items: center; gap: 6px; background: #ECFDF5; border: 1px solid #A7F3D0; color: #047857; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; }

/* Modo edición de la ficha de colegio (candado + botón Editar) */
.sge-btn-editar { padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 700; background: var(--sge-primary); border: none; color: #1a1a1a; cursor: pointer; display: inline-flex; align-items: center; }
.sge-btn-editar:hover { background: var(--sge-primary-dark); }
.sge-tag-edicion { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.sge-lock-hint { display: flex; align-items: center; gap: 4px; background: #F9FAFB; border: 1px solid var(--sge-gray-200); border-radius: 8px; padding: 10px 14px; font-size: 12.5px; color: var(--sge-gray-500); margin-bottom: 14px; }
.sge-pestana-contenido:disabled, fieldset.sge-pestana-contenido[disabled] { opacity: 1; }
.sge-campo-input:disabled, .sge-campo-select:disabled, .sge-campo-input[disabled], .sge-campo-select[disabled] { background: #F9FAFB; color: #4B5563; cursor: not-allowed; }

/* Grupos adaptables del modal de alta de usuarios (los muestra el JS según el tipo).
   El JS pone/quita la clase .uc-off; así cada bloque conserva su display natural (row = flex). */
#usuarioModal .uc-off { display: none !important; }

@media (max-width: 768px) {
    .sge-gc-stats { grid-template-columns: repeat(2, 1fr); }
    .sge-ficha-acciones { width: 100%; }
}

/* --- Personal MINUMA (F1-06) --- */
.sge-lista-section { margin-bottom: 22px; }
.sge-header-list { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.sge-header-list h2 { font-size: 15px; font-weight: 700; color: #111827; margin: 0; }

.sge-persona-tarjeta {
    background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 8px;
    padding: 14px 16px; display: flex; align-items: center; gap: 14px;
    cursor: pointer; transition: all 0.15s; margin-bottom: 10px;
}
.sge-persona-tarjeta:hover { border-color: var(--sge-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.sge-persona-tarjeta.abierta { border-color: var(--sge-primary); background: #FFFBEB; }
.sge-persona-tarjeta .info { flex: 1; }
.sge-persona-tarjeta .nombre { font-size: 14px; font-weight: 700; color: #111827; }
.sge-persona-tarjeta .puesto { font-size: 12px; color: var(--sge-gray-600); margin-top: 1px; }
.sge-persona-tarjeta .region { font-size: 12px; color: #9CA3AF; }
.sge-tag-estado { font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 12px; background: #D1FAE5; color: #065F46; white-space: nowrap; }
.sge-tag-estado.suspendido { background: #FEF3C7; color: #92400E; }
.sge-tag-estado.inactivo { background: #FEE2E2; color: #991B1B; }

.sge-despliegue {
    margin: 2px 0 14px; background: #F9FAFB; border-radius: 8px;
    padding: 20px; border: 1px solid var(--sge-gray-200);
}
.sge-despliegue .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
@media (max-width: 992px) { .sge-despliegue .grid-2 { grid-template-columns: 1fr; } }
.sge-despliegue .d-label { font-size: 12px; font-weight: 600; color: var(--sge-gray-600); text-transform: uppercase; letter-spacing: 0.3px; display: block; margin-bottom: 4px; }
.sge-despliegue .d-input {
    font-size: 14px; padding: 5px 8px; border: 1px solid #D1D5DB; border-radius: 4px;
    background: #fff; width: 100%; color: #111827;
}
.sge-despliegue .d-input:disabled { background: #F3F4F6; color: var(--sge-gray-600); border-color: var(--sge-gray-200); }

.sge-lista-mini { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sge-lista-mini .item {
    background: #fff; padding: 4px 12px; border-radius: 16px;
    border: 1px solid var(--sge-gray-200); font-size: 13px;
    display: inline-flex; align-items: center; gap: 6px;
}

.sge-permisos { margin-top: 16px; border-top: 1px solid var(--sge-gray-200); padding-top: 16px; }
.sge-permisos .modulo { margin-bottom: 14px; border-bottom: 1px solid #F3F4F6; padding-bottom: 10px; }
.sge-permisos .modulo-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-weight: 600; color: #111827; font-size: 14px; }
.sge-permisos label { display: inline-flex; align-items: center; gap: 5px; margin: 0; cursor: pointer; }
.sge-permisos input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--sge-primary); }
.sge-permisos input[type="checkbox"]:disabled { opacity: 0.6; }
.sge-permisos .sub-permisos { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; padding-left: 24px; font-size: 13px; color: var(--sge-gray-700); }

.sge-chat-mini { margin-top: 16px; border-top: 1px solid var(--sge-gray-200); padding-top: 16px; }
.sge-chat-mini .mensajes { background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 8px; padding: 12px; max-height: 180px; overflow-y: auto; font-size: 13px; }
.sge-chat-mini .mensaje { padding: 3px 0; }
.sge-chat-mini .emisor { font-weight: 700; color: #111827; }
.sge-chat-mini .hora { color: #9CA3AF; font-size: 11px; margin-left: 6px; }
.sge-chat-mini .chat-input { display: flex; gap: 8px; margin-top: 8px; }
.sge-chat-mini .chat-input input { flex: 1; }

.sge-desp-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sge-desp-actions button, .sge-desp-actions a {
    padding: 6px 16px; border-radius: 6px; border: none; font-weight: 600;
    font-size: 13px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.sge-btn-p-editar    { background: #E5E7EB; color: #111827; }
.sge-btn-p-suspender { background: #FEF3C7; color: #92400E; }
.sge-btn-p-eliminar  { background: #FEE2E2; color: #991B1B; }
.sge-btn-p-asignar   { background: var(--sge-primary); color: #23282F; }
.sge-btn-p-guardar   { background: #10B981; color: #fff; }
.sge-btn-p-cancelar  { background: #9CA3AF; color: #fff; }
.sge-btn-p-reactivar { background: #D1FAE5; color: #065F46; }

.sge-tabla-sel { width: 100%; border-collapse: collapse; font-size: 13px; }
.sge-tabla-sel th { background: #F9FAFB; border-bottom: 1px solid var(--sge-gray-200); padding: 8px 10px; text-align: left; font-size: 11px; text-transform: uppercase; color: var(--sge-gray-600); }
.sge-tabla-sel td { padding: 8px 10px; border-bottom: 1px solid #F3F4F6; }

/* --- Pendientes (F1-07) --- */
.sge-badge-count {
    background: #E5E7EB; color: #374151; font-size: 11px; font-weight: 700;
    min-width: 20px; padding: 1px 7px; border-radius: 10px; display: inline-block; margin-left: 4px;
}
.sge-chip.active .sge-badge-count { background: rgba(0,0,0,0.15); color: #1a1a1a; }

.sge-pend-card {
    background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 8px;
    padding: 14px 16px; cursor: pointer; transition: all 0.15s; margin-bottom: 10px; display: block;
    text-decoration: none;
}
.sge-pend-card:hover { border-color: var(--sge-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.sge-pend-card.abierta { border-color: var(--sge-primary); background: #FFFBEB; }
.sge-pend-card .tipo { font-size: 14px; font-weight: 700; color: #111827; }
.sge-pend-card .detalle { font-size: 13px; color: var(--sge-gray-600); margin-top: 2px; }
.sge-pend-card .meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: #9CA3AF; }

.sge-badge-seg { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px; white-space: nowrap; }
.sge-badge-seg.en-espera   { background: #FFEDD5; color: #C2410C; }
.sge-badge-seg.en-revision { background: #DBEAFE; color: #1D4ED8; }

.sge-seguimiento {
    background: #fff; border: 1px solid var(--sge-gray-200); border-left: 4px solid var(--sge-primary);
    border-radius: 8px; padding: 18px 20px; margin-bottom: 14px;
}
.sge-seguimiento .seg-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sge-seguimiento h3 { font-size: 14px; font-weight: 700; color: #111827; margin: 0; }
.sge-seguimiento .seg-info { display: flex; gap: 24px; flex-wrap: wrap; font-size: 12px; color: var(--sge-gray-600); margin-top: 8px; }
.sge-seguimiento .seg-info .label { font-weight: 700; color: #9CA3AF; text-transform: uppercase; font-size: 11px; }
.sge-obs-lista { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
.sge-obs-item { background: #F9FAFB; border: 1px solid #F3F4F6; border-radius: 6px; padding: 8px 12px; font-size: 13px; color: var(--sge-gray-700); }
.sge-obs-item .usuario { font-weight: 700; color: #111827; }
.sge-obs-item .fecha { color: #9CA3AF; font-size: 11px; margin-left: 6px; }
.sge-obs-item.final { border-left: 3px solid #16A34A; }

.sge-seg-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.sge-btn-obs { background: #E5E7EB; color: #111827; border: none; padding: 7px 15px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
.sge-btn-concluir { background: #10B981; color: #fff; border: none; padding: 7px 15px; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; }
.sge-btn-concluir:disabled { opacity: 0.5; cursor: not-allowed; }

.sge-proceso-rel {
    margin-top: 14px; border-top: 1px dashed var(--sge-gray-200); padding-top: 14px;
}
.sge-proceso-rel .pr-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #9CA3AF; margin-bottom: 8px; }

/* ============================================================
   F1-08 CHATS (rediseño por mockup)
   ============================================================ */
/* Pestañas Interno | Colegios */
.sge-tabs {
    display: flex; background: #fff; border-bottom: 2px solid var(--sge-gray-200);
    border-radius: 8px 8px 0 0; overflow: hidden;
}
.sge-tab-btn {
    padding: 10px 24px; background: #fff; border: none; font-size: 14px; font-weight: 600;
    color: #6B7280; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px;
    transition: background 0.15s, color 0.15s;
}
.sge-tab-btn:hover { background: #F9FAFB; color: #374151; }
.sge-tab-btn.active { color: #D4A000; border-bottom-color: #F5C518; background: #fff; }
.sge-tab-badge {
    background: #EF4444; color: #fff; font-size: 10px; font-weight: 700; border-radius: 10px;
    min-width: 20px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 5px; margin-left: 6px; vertical-align: middle;
}
/* Filtros pegados a las pestañas */
.sge-chat-filtros {
    background: #fff; padding: 14px 18px; border: 1px solid var(--sge-gray-200); border-top: none;
    border-radius: 0 0 8px 8px; display: flex; flex-direction: column; gap: 12px;
}
.sge-chat-filtros .fila-inferior {
    display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
    border-top: 1px solid #F3F4F6; padding-top: 12px;
}
/* Tarjeta de conversación */
.sge-conv-card {
    background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 8px;
    padding: 12px 16px; margin-bottom: 8px; cursor: pointer; text-decoration: none;
    display: flex; align-items: center; gap: 14px; color: inherit;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.sge-conv-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.08); border-color: #F5C518; color: inherit; }
.sge-conv-card.abierta { border-color: #F5C518; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.sge-conv-card .conv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sge-conv-card .conv-info .nombre { font-weight: 700; font-size: 14px; color: #111827; }
.sge-conv-card .conv-info .detalle {
    font-size: 13px; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sge-conv-card .conv-info .meta {
    display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: #9CA3AF; align-items: center;
}
.sge-badge-noleidos {
    background: #EF4444; color: #fff; font-size: 10px; font-weight: 700; border-radius: 10px;
    min-width: 22px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 6px; flex-shrink: 0;
}
.sge-conv-estado { padding: 2px 10px; border-radius: 9999px; font-size: 10px; font-weight: 600; }
.sge-conv-estado.activa { background: #D1FAE5; color: #065F46; }
.sge-conv-estado.en_seguimiento { background: #FEF3C7; color: #92400E; }
.sge-conv-estado.cerrada { background: var(--sge-gray-200); color: #4B5563; }
.sge-conv-tipo { padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; }
.sge-conv-tipo.interno { background: #DBEAFE; color: #1E40AF; }
.sge-conv-tipo.colegio { background: #FEF3C7; color: #92400E; }
/* Panel de chat */
.sge-chat-panel {
    display: flex; flex-direction: column; background: #fff;
    border: 1px solid var(--sge-gray-200); border-radius: 8px; height: 420px; max-height: 62vh;
}
.sge-chat-panel .chat-header {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 12px 16px; border-bottom: 1px solid var(--sge-gray-200); flex-shrink: 0;
}
.sge-chat-panel .chat-header .chat-nombre { font-weight: 700; font-size: 15px; color: #111827; }
.sge-chat-panel .chat-cuerpo {
    flex: 1; overflow-y: auto; padding: 12px 16px; background: #F9FAFB;
    display: flex; flex-direction: column; gap: 8px;
}
.sge-chat-msg {
    max-width: 80%; padding: 8px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.4;
    word-wrap: break-word;
}
.sge-chat-msg.propio {
    align-self: flex-end; background: #F5C518; color: #23282F; border-bottom-right-radius: 4px;
}
.sge-chat-msg.otro {
    align-self: flex-start; background: #fff; color: #111827;
    border: 1px solid var(--sge-gray-200); border-bottom-left-radius: 4px;
}
.sge-chat-msg .autor { font-size: 11px; font-weight: 700; color: #6B7280; margin-bottom: 2px; }
.sge-chat-msg .hora { font-size: 10px; color: #6B7280; margin-top: 4px; text-align: right; }
.sge-chat-msg.propio .hora { color: rgba(0,0,0,0.5); }
.sge-chat-panel .chat-envio {
    display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--sge-gray-200); flex-shrink: 0;
}
.sge-chat-panel .chat-envio input[type="text"] {
    flex: 1; padding: 8px 12px; border: 1px solid var(--sge-gray-200); border-radius: 6px; font-size: 14px;
}
.sge-chat-panel .chat-envio input[type="text"]:focus {
    border-color: #F5C518; outline: none; box-shadow: 0 0 0 3px rgba(245,197,24,0.15);
}
.sge-chat-panel .chat-envio .btn-enviar {
    background: #F5C518; border: none; border-radius: 6px; padding: 0 16px; font-size: 16px;
    color: #23282F; cursor: pointer; transition: background 0.15s;
}
.sge-chat-panel .chat-envio .btn-enviar:hover { background: #DFB014; }

/* ============================================================
   F1-09 MENSAJES PUSH (rediseño por mockup)
   ============================================================ */
.sge-push-card {
    background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 8px;
    padding: 20px 24px; display: flex; flex-direction: column; gap: 16px;
}
.sge-push-card .card-titulo {
    font-size: 15px; font-weight: 700; color: #374151;
    border-bottom: 1px solid #F3F4F6; padding-bottom: 10px;
    display: flex; justify-content: space-between; align-items: center;
}
/* Switch (toggle) */
.sge-switch-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #374151; }
.sge-switch-item input[type="checkbox"] {
    width: 40px; height: 22px; appearance: none; background: #D1D5DB; border-radius: 11px;
    position: relative; cursor: pointer; transition: background 0.15s; flex-shrink: 0; border: none; margin: 0;
}
.sge-switch-item input[type="checkbox"]::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    background: #fff; border-radius: 50%; transition: transform 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.sge-switch-item input[type="checkbox"]:checked { background: #F5C518; }
.sge-switch-item input[type="checkbox"]:checked::after { transform: translateX(18px); }
/* Banner de Alerta de Seguridad */
.sge-push-banner {
    display: none; background: #FEF2F2; border: 1px solid #FEE2E2; border-radius: 6px;
    padding: 10px 14px; color: #991B1B; font-size: 13px; font-weight: 600;
}
.sge-push-banner.mostrar { display: block; }
/* Área de destinatarios */
.sge-dest-area {
    border: 1px solid var(--sge-gray-200); border-radius: 6px; padding: 12px 14px; background: #F9FAFB;
}
.sge-dest-area .fila-cascada {
    display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
}
.sge-dest-area .campo-mini { flex: 1 0 140px; min-width: 120px; }
.sge-dest-area .campo-mini label {
    display: block; font-size: 11px; font-weight: 600; color: #6B7280;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;
}
.sge-dest-area .campo-mini select, .sge-dest-area .campo-mini input {
    width: 100%; padding: 6px 10px; border: 1px solid var(--sge-gray-200);
    border-radius: 6px; font-size: 13px; background: #fff;
}
.sge-dest-usuarios { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #D1D5DB; }
.sge-dest-usuarios.mostrar { display: block; }
.sge-dest-lista {
    max-height: 220px; overflow-y: auto; border: 1px solid var(--sge-gray-200);
    border-radius: 6px; background: #fff; margin-top: 10px;
}
.sge-dest-lista .item-usuario {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    border-bottom: 1px solid #F3F4F6; font-size: 13px;
}
.sge-dest-lista .item-usuario:last-child { border-bottom: none; }
.sge-dest-lista .item-usuario:hover { background: #F9FAFB; }
.sge-dest-lista .item-usuario input[type="checkbox"] { width: 16px; height: 16px; accent-color: #F5C518; flex-shrink: 0; }
.sge-dest-lista .item-usuario .nombre { font-weight: 600; color: #111827; }
.sge-dest-lista .item-usuario .detalle { font-size: 12px; color: #6B7280; }
/* Chips de reglas */
.sge-chips-dest {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #D1D5DB;
}
.sge-chip-dest {
    background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 6px;
    padding: 4px 10px 4px 14px; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; color: #374151;
}
.sge-chip-dest .remove { cursor: pointer; color: #9CA3AF; font-weight: 700; font-size: 16px; line-height: 1; }
.sge-chip-dest .remove:hover { color: #EF4444; }
/* Estados del historial */
.sge-push-estado { padding: 2px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.sge-push-estado.enviado    { background: #D1FAE5; color: #065F46; }
.sge-push-estado.programado { background: #DBEAFE; color: #1E40AF; }
.sge-push-estado.borrador   { background: var(--sge-gray-200); color: #4B5563; }
.sge-push-estado.cancelado  { background: #FEE2E2; color: #991B1B; }
.sge-btn-tabla {
    border: none; background: transparent; color: #6B7280; cursor: pointer;
    padding: 4px 6px; font-size: 14px; border-radius: 4px; transition: background 0.15s;
}
.sge-btn-tabla:hover { background: #F3F4F6; color: #374151; }
.sge-btn-tabla.rojo { color: #EF4444; }
.sge-btn-tabla.verde { color: #10B981; }
.sge-btn-alerta { background: #EF4444 !important; color: #fff !important; }
.sge-btn-alerta:hover { background: #DC2626 !important; }

/* ============================================================
   F1-10 CREDENCIALES · DISEÑO (rediseño por mockup)
   ============================================================ */
/* Tarjeta de diseño en el listado */
.sge-diseno-card {
    background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 8px;
    padding: 14px 18px; margin-bottom: 10px; display: flex; align-items: center; gap: 16px;
    transition: box-shadow 0.15s, border-color 0.15s; flex-wrap: wrap;
}
.sge-diseno-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.08); border-color: #F5C518; }
.sge-diseno-card .info { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 3px; }
.sge-diseno-card .info .nombre { font-weight: 700; font-size: 15px; color: #111827; }
.sge-diseno-card .info .detalle { font-size: 13px; color: #6B7280; }
.sge-diseno-card .info .planteles { font-size: 12px; color: #9CA3AF; }
.sge-diseno-card .vista-previa { flex-shrink: 0; }
.sge-diseno-card .acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.sge-diseno-card .btn-accion {
    border: 1px solid var(--sge-gray-200); background: #fff; color: #374151; border-radius: 6px;
    padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none;
    transition: background 0.15s;
}
.sge-diseno-card .btn-accion:hover { background: #FFFBEB; border-color: #F5C518; color: #374151; }
.sge-diseno-card .btn-accion.eliminar { color: #DC2626; }
.sge-diseno-card .btn-accion.eliminar:hover { background: #FEF2F2; border-color: #FCA5A5; }
/* Indicador de pasos del modal de creación */
.sge-pasos { display: flex; gap: 8px; }
.sge-pasos .paso {
    flex: 1; text-align: center; padding: 6px; font-size: 12px; font-weight: 600;
    background: #F3F4F6; color: #6B7280; border-radius: 6px;
}
.sge-pasos .paso.active { background: #F5C518; color: #23282F; }
/* Árbol de entidades / planteles / niveles */
.sge-arbol {
    border: 1px solid var(--sge-gray-200); border-radius: 6px; background: #F9FAFB;
    padding: 10px 12px; max-height: 300px; overflow-y: auto;
}
.sge-arbol-plantel { margin-bottom: 8px; }
.sge-arbol-plantel .niveles { padding-left: 16px; display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; }
.sge-arbol-nivel { font-size: 12.5px; color: #374151; cursor: pointer; margin: 0; }
.sge-arbol-nivel input { accent-color: #F5C518; margin-right: 3px; }
.sge-entidad-item {
    padding: 8px 10px; border-bottom: 1px solid #F3F4F6; cursor: pointer; font-size: 13px;
    border-radius: 4px;
}
.sge-entidad-item:hover { background: #FFFBEB; }
.sge-entidad-item.sel { background: rgba(245,197,24,0.15); outline: 2px solid #F5C518; }
/* Herramientas del editor */
.sge-btn-herr {
    border: 1px solid var(--sge-gray-200); background: #fff; color: #374151; border-radius: 6px;
    padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.sge-btn-herr:hover { background: #F9FAFB; }
.sge-btn-herr.activo { background: #F5C518; border-color: #F5C518; color: #23282F; }
.sge-btn-elem {
    border: 1px solid var(--sge-gray-200); background: #fff; color: #374151; border-radius: 6px;
    padding: 5px 10px; font-size: 12px; cursor: pointer; transition: all 0.15s;
}
.sge-btn-elem:hover { background: #FFFBEB; border-color: #F5C518; }
/* Lienzos (frente y reverso a la vez) */
.sge-lienzos-area {
    display: flex; gap: 28px; flex-wrap: wrap; justify-content: center;
    background: var(--sge-gray-100); overflow: auto; min-height: 260px; padding: 18px;
}
.lienzo-col { display: flex; flex-direction: column; }
.lienzo-label { font-size: 11px; font-weight: 700; color: #6B7280; margin-bottom: 4px; }
.sge-lienzo {
    position: relative; box-shadow: 0 4px 16px rgba(0,0,0,.15); cursor: pointer;
    border: 2px solid transparent; box-sizing: content-box;
}
.sge-lienzo.activo { border-color: #F5C518; }
.sge-lienzo.con-grid {
    background-image: linear-gradient(to right, rgba(0,0,0,0.07) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(0,0,0,0.07) 1px, transparent 1px) !important;
    background-size: 12px 12px !important;
}
.sge-cred-el { position: absolute; box-sizing: border-box; overflow: hidden; cursor: move; }
.sge-cred-el.sel { outline: 2px solid var(--sge-primary); z-index: 5; }
.sge-cred-el .rsz {
    position: absolute; right: -5px; bottom: -5px; width: 12px; height: 12px;
    background: var(--sge-primary); border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize;
    display: none;
}
.sge-cred-el.sel .rsz { display: block; }
.sge-cred-ph {
    display: flex; align-items: center; justify-content: center;
    background: #e9ecef; color: #adb5bd; font-size: 11px;
}
.sge-guia { position: absolute; background: #F5C518; z-index: 8; }
.sge-guia.v { top: 0; bottom: 0; width: 1px; cursor: ew-resize; }
.sge-guia.h { left: 0; right: 0; height: 1px; cursor: ns-resize; }
.recurso-thumb {
    width: 46px; height: 46px; object-fit: cover; border: 1px solid var(--sge-gray-300);
    border-radius: 6px; cursor: pointer;
}
.recurso-thumb:hover { border-color: var(--sge-primary); }

/* ============================================================
   F1-11 CREDENCIALES · IMPRESIÓN (rediseño por mockup)
   ============================================================ */
/* Los indicadores de producción de credenciales usan .mn-ind.clicable +
   .mn-ind-grid desde el 12 ago 2026, con los mismos colores por nombre
   (azul, naranja, amarillo, verde, gris, rojo) que ahora son modificadores
   del número en el propio componente. */
/* Estados de credencial */
.sge-cred-estado {
    padding: 2px 10px; border-radius: 9999px; font-size: 10.5px; font-weight: 600; white-space: nowrap;
    display: inline-block;
}
.sge-cred-estado.pedida     { background: #DBEAFE; color: #1E40AF; }
.sge-cred-estado.pendiente  { background: #FFEDD5; color: #C2410C; }
.sge-cred-estado.en_proceso { background: #FEF3C7; color: #92400E; }
.sge-cred-estado.impresa    { background: #D1FAE5; color: #065F46; }
.sge-cred-estado.entregada  { background: var(--sge-gray-200); color: #4B5563; }
.sge-cred-estado.incidencia { background: #FEE2E2; color: #991B1B; }
/* Ítems del lote */
.sge-lote-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 12px; border: 1px solid #F3F4F6; border-radius: 6px;
    background: #F9FAFB; margin-bottom: 6px;
}

/* ============================================================
   F1-12 CREDENCIALES · TOMA DE FOTOGRAFÍAS (rediseño por mockup)
   ============================================================ */
.sge-foto-canvas {
    position: relative; height: 430px; overflow: hidden; background: #2b2f36;
    background-image: linear-gradient(45deg, #31363e 25%, transparent 25%, transparent 75%, #31363e 75%),
                      linear-gradient(45deg, #31363e 25%, transparent 25%, transparent 75%, #31363e 75%);
    background-size: 20px 20px; background-position: 0 0, 10px 10px;
    user-select: none;
}
.sge-foto-canvas img#fotoEditor { position: absolute; display: none; cursor: grab; }
.sge-foto-placeholder {
    position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px;
    align-items: center; justify-content: center; color: #9CA3AF; font-size: 13px; text-align: center;
}
.sge-foto-placeholder i { font-size: 40px; color: #4B5563; }
.sge-crop-frame {
    position: absolute; border: 2px solid #F5C518; box-shadow: 0 0 0 9999px rgba(0,0,0,0.45);
    z-index: 5;
}
.sge-crop-frame .nodo {
    position: absolute; width: 10px; height: 10px; background: #F5C518;
    border: 1px solid #23282F; z-index: 6;
}
.sge-crop-frame .nodo.nw { top: -6px; left: -6px; cursor: nwse-resize; }
.sge-crop-frame .nodo.n  { top: -6px; left: calc(50% - 5px); cursor: ns-resize; }
.sge-crop-frame .nodo.ne { top: -6px; right: -6px; cursor: nesw-resize; }
.sge-crop-frame .nodo.w  { top: calc(50% - 5px); left: -6px; cursor: ew-resize; }
.sge-crop-frame .nodo.e  { top: calc(50% - 5px); right: -6px; cursor: ew-resize; }
.sge-crop-frame .nodo.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.sge-crop-frame .nodo.s  { bottom: -6px; left: calc(50% - 5px); cursor: ns-resize; }
.sge-crop-frame .nodo.se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.btn-ia.activo { background: #F5C518; border-color: #F5C518; color: #23282F; }

/* --- Logo como enlace a Inicio --- */
.sge-logo-link { display: flex; align-items: center; gap: 10px; text-decoration: none; }

/* --- Ítems del menú aún no construidos --- */
.sge-nav-soon { opacity: 0.45; cursor: default; }
.sge-nav-soon:hover { background: transparent; }

/* === UTILIDADES === */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cursor-pointer { cursor: pointer; }
.fs-13 { font-size: 13px; }
.fs-12 { font-size: 12px; }
.fs-11 { font-size: 11px; }
.text-orange { color: var(--sge-primary); }
.bg-orange-subtle { background-color: var(--sge-primary-subtle); }

/* ============================================================
   Filtros unificados · componente compartido
   Barra de filtros y búsqueda común a todos los buscadores del panel.
   La lógica vive en includes/filtros_geo.php; aquí solo el aspecto.
   Sustituye a .sge-ins-filtros (Autorizaciones) y .sge-ip-cascada
   (Información del plantel), que se conservan mientras queden
   módulos sin migrar.
   ============================================================ */
.sge-filtros { background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 8px; padding: 16px 20px; margin-bottom: 16px; }
.sge-filtros-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.sge-filtro-campo { flex: 1; min-width: 140px; }
.sge-filtro-campo.ancho { flex: 2; min-width: 200px; }
.sge-filtro-campo label { display: block; font-size: 11px; font-weight: 600; color: var(--sge-gray-500); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.sge-filtro-campo input, .sge-filtro-campo select { width: 100%; padding: 8px 12px; border: 1px solid var(--sge-gray-200); border-radius: 6px; font-size: 14px; background: #fff; color: #111827; }
.sge-filtro-campo input:focus, .sge-filtro-campo select:focus { outline: none; border-color: var(--sge-primary); box-shadow: 0 0 0 3px rgba(245,197,24,0.15); }
.sge-filtro-campo input:disabled, .sge-filtro-campo select:disabled { background: #F9FAFB; color: var(--sge-gray-400); cursor: not-allowed; }
.sge-filtros-pie { width: 100%; font-size: 13px; color: var(--sge-gray-500); padding-top: 10px; border-top: 1px solid #F3F4F6; margin-top: 12px; }
.sge-filtros-pie span { color: #111827; font-weight: 600; }
@media (max-width: 768px) { .sge-filtro-campo, .sge-filtro-campo.ancho { flex: 1 0 100%; } }

/* ============================================================
   Navegador de colegios · componente compartido
   Institución → Plantel → contenido del módulo. Mismo recorrido y
   mismo aspecto en todos los buscadores del panel; lo que cambia es
   lo que cada módulo pinta al final. Ver includes/filtros_geo.php.
   ============================================================ */
.sge-nav-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sge-nav-inst { background: #F9FAFB; border: 1px solid var(--sge-gray-200); border-radius: 6px; padding: 10px 14px; cursor: pointer; transition: all 0.15s; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sge-nav-inst:hover, .sge-nav-inst.sel { border-color: var(--sge-primary); background: #FFFBEB; }
.sge-nav-inst .nombre { font-weight: 600; color: #111827; }
.sge-nav-inst .detalle { font-size: 13px; color: var(--sge-gray-500); }
.sge-nav-bloque { margin-bottom: 16px; }
.sge-nav-bloque-tit { font-size: 14px; font-weight: 700; color: var(--sge-gray-700); margin-bottom: 8px; }
.sge-nav-planteles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.sge-nav-plantel { background: #fff; border: 1px solid var(--sge-gray-200); border-radius: 6px; padding: 12px 14px; cursor: pointer; transition: all 0.15s; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sge-nav-plantel:hover, .sge-nav-plantel.sel { border-color: var(--sge-primary); background: #FFFBEB; }
.sge-nav-plantel .nombre { font-weight: 600; color: #111827; }
.sge-nav-plantel .detalle { font-size: 12px; color: var(--sge-gray-500); }
.sge-nav-vacio { text-align: center; font-size: 13px; color: var(--sge-gray-400); padding: 14px 0; }
/* Insignias de conteo: alerta (rojo) para pendientes, normal (amarillo) para totales */
.sge-nav-badge { background: var(--sge-primary); color: #23282F; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 12px; white-space: nowrap; }
.sge-nav-badge.alerta { background: #FEE2E2; color: #991B1B; }

/* F1-18 Carga de Bases — zona para arrastrar archivos */
.sge-dropzone {
    border: 2px dashed #D1D5DB;
    border-radius: 8px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    background: #FAFAFA;
    transition: all .2s;
}
.sge-dropzone:hover,
.sge-dropzone.dragover { border-color: #F5C518; background: #FFFBEB; }
/* Fila-resumen: sustituye a la lista cuando ya se eligió, para que la pantalla
   no crezca. Es un botón: al pulsarlo se vuelve a desplegar la lista. */
.sge-nav-resumen { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; background: #FFFBEB; border: 1px solid var(--sge-primary); border-radius: 6px; padding: 8px 14px; margin-bottom: 12px; cursor: pointer; transition: background 0.15s; }
.sge-nav-resumen:hover { background: #FEF3C7; }
.sge-nav-resumen .etq { display: block; font-size: 11px; font-weight: 600; color: var(--sge-gray-500); text-transform: uppercase; letter-spacing: 0.5px; }
.sge-nav-resumen .val { font-size: 14px; font-weight: 600; color: #111827; }
.sge-nav-resumen .cambiar { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #92400E; white-space: nowrap; }
.sge-nav-resumen .cambiar::after { content: '\25BE'; font-size: 13px; line-height: 1; }

/* ══════════════════════════════════════════════════════════════════
   MODALES: el cuerpo hace scroll, header y footer siempre visibles
   ------------------------------------------------------------------
   Sin esto, un modal alto (alta de personal con su tabla de permisos,
   expediente del alumno, contratos) crece más que la pantalla y empuja
   el footer fuera: el botón Guardar queda inalcanzable salvo que el
   usuario reduzca el zoom del navegador.

   Se limita .modal-body en vez de usar el flex de Bootstrap porque en
   41 de los modales del sistema hay un <form> entre .modal-content y
   .modal-body, y ahí la cadena flex de .modal-dialog-scrollable se
   corta. max-height solo LIMITA: los modales cortos no cambian.
   El descuento de 200px cubre márgenes (56) + header (~60) + footer (~65).
   ══════════════════════════════════════════════════════════════════ */
.modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* Móvil: Bootstrap baja el margen del modal de 1.75rem a 0.5rem, así que
   sobran ~40px. El header/footer pueden envolver a dos líneas: se recuperan
   solo 30. */
@media (max-width: 575.98px) {
    .modal-body { max-height: calc(100vh - 170px); }
}