/* ==========================================================================
   Thema Default — apariencia macOS (Aqua + tipografía San Francisco)
   Paleta de sistema de macOS en modo claro y fuente SF vía el stack de
   Apple (-apple-system). Cambiar --dash-accent recolorea toda la interfaz.
   ========================================================================== */
:root {
    --dash-sidebar-width: 250px;
    --dash-sidebar-mini: 64px;
    --dash-rightbar-width: var(--dash-sidebar-width);
    --dash-rightbar-mini: var(--dash-sidebar-mini);
    --dash-header-height: 64px;

    /* Azul de sistema de macOS (acento por defecto "Blue") */
    --dash-accent: #007aff;
    --dash-accent-hover: #0a6ae0;
    --dash-accent-soft: rgb(0 122 255 / 0.12);
    --dash-footer-height: 48px;

    /* Fondos y separadores estilo macOS */
    --dash-bg: #c3b3e3;           /* color base bajo el degradado (fallback) */
    --dash-panel: rgb(255 255 255 / 0.72); /* tarjetas de vidrio esmerilado */
    --dash-chrome: rgb(255 255 255 / 0.55); /* barras con efecto vibrancy */
    --dash-border: #d2d2d7;       /* separador/hairline de Apple */
    --dash-glass-border: rgb(255 255 255 / 0.6); /* canto brillante del vidrio */

    /* Fondo de escritorio degradado tipo Big Sur — versión atenuada (~40% menos
       saturación) apta para contexto clínico: mismos tonos (púrpura → magenta →
       naranja con manchas coral/ámbar/púrpura/azul) pero aclarados y en washes.
       La esquina superior izquierda arranca casi blanca (primera capa, va encima). */
    --dash-wallpaper:
radial-gradient(circle at 4% 2%, rgb(255 255 255 / 0.9) 0%, rgb(255 255 255 / 0.9) 18%, rgb(255 255 255 / 0) 55%), radial-gradient(circle at 96% 4%, rgb(255 255 255 / 0.25) 0%, rgb(255 255 255 / 0) 45%), radial-gradient(circle at 12% 18%, #ff9a7a 0%, transparent 42%), radial-gradient(circle at 88% 12%, #fff3e2 0%, transparent 38%), radial-gradient(circle at 80% 88%, #f3faff 0%, transparent 46%), radial-gradient(circle at 15% 92%, #cbe4fa 0%, transparent 46%), linear-gradient(135deg,#fff,#e6e6e6 55%,#ff7a59) !important;

    /* Etiquetas de texto (label / secondary label de macOS) */
    --dash-label: #1d1d1f;
    --dash-label-2: #6e6e73;
    --dash-label-3: #86868b;

    /* Colores de sistema de macOS */
    --dash-green: #34c759;
    --dash-red: #ff3b30;
    --dash-orange: #ff9500;
    --dash-yellow: #ffcc00;

    /* Radios estilo Big Sur */
    --dash-radius: 10px;
    --dash-radius-sm: 6px;

    /* Tipografía del sistema de macOS (San Francisco) */
    --dash-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "Helvetica Neue", "Inter", "Segoe UI", Roboto, Arial, sans-serif;

    /* Variables de Bootstrap 5 para propagar fuente y color a los componentes */
    --bs-body-font-family: var(--dash-font);
    --bs-body-color: var(--dash-label);
    --bs-primary: var(--dash-accent);
    --bs-primary-rgb: 0, 122, 255;
    --bs-link-color: var(--dash-accent);
    --bs-link-color-rgb: 0, 122, 255;
    --bs-link-hover-color: var(--dash-accent-hover);
    --bs-border-color: var(--dash-border);
    --bs-border-radius: var(--dash-radius-sm);
    --bs-border-radius-lg: var(--dash-radius);
}

/* ---- Escala tipográfica por breakpoint (raíz de los rem) ---- */
html {
    font-size: 87.5%; /* xs, sm, md: 1rem = 14px */
}

@media (min-width: 992px) {
    html {
        font-size: 90%; /* lg: 1rem = 14.4px */
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 93.75%; /* xl y xxl: 1rem = 15px */
    }
}

/* ---- Tipografía San Francisco con suavizado como en macOS ---- */
body {
    --bs-body-line-height: 1;
    line-height: 1;
    font-family: var(--dash-font);
    letter-spacing: -0.006em; /* tracking ligeramente negativo de SF */
    color: var(--dash-label);
    background-color: var(--dash-bg);
    background-image: var(--dash-wallpaper);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---- Sidebar (izquierda) ---- */
.dash-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--dash-sidebar-width);
    display: flex;
    flex-direction: column;
    background: var(--dash-chrome);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-right: 1px solid var(--dash-border);
    z-index: 1040;
    transition: transform 0.2s ease;
}

.dash-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: var(--dash-header-height);
    padding: 0 1.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-bottom: 1px solid var(--dash-border);
    flex-shrink: 0;
}

/* Squircle con degradado como los iconos de app de macOS */
.dash-brand-mark {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: linear-gradient(160deg, #3a97ff 0%, var(--dash-accent) 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.18), inset 0 1px 0 rgb(255 255 255 / 0.35);
}

.dash-brand-logo {
    max-height: calc(var(--dash-header-height) - 1rem);
    max-width: 100%;
    object-fit: contain;
}

.dash-nav {
    padding: 0.75rem;
    gap: 0.15rem;
    flex: 1;
    flex-wrap: nowrap;
    overflow-y: auto;
    overflow-x: hidden;
}

.dash-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--dash-label);
    border-radius: var(--dash-radius-sm);
    padding: 0.5rem 0.75rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dash-nav .nav-link:hover {
    background: rgb(0 0 0 / 0.05);
    color: var(--dash-label);
}

/* Ítem seleccionado: pastilla azul rellena como la barra lateral de macOS */
.dash-nav .nav-link.active {
    background: var(--dash-accent);
    color: #fff;
    font-weight: 500;
}

.dash-nav .nav-link.active svg,
.dash-nav .nav-link.active i {
    color: #fff;
}

.dash-sidebar-footer {
    display: flex;
    align-items: center;
    height: var(--dash-footer-height);
    padding: 0 1.25rem;
    border-top: 1px solid var(--dash-border);
    flex-shrink: 0;
}

/* ---- Columna central ---- */
.dash-main {
    margin-left: var(--dash-sidebar-width);
    margin-right: var(--dash-rightbar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.dash-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    height: var(--dash-header-height);
    background: var(--dash-chrome);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--dash-border);
    flex-shrink: 0;
}

.dash-topbar-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/*
 * El esmerilado va en una capa propia, NO sobre el contenedor.
 * `backdrop-filter` con cualquier valor distinto de `none` crea un contexto de
 * apilamiento: si se declara aquí, todo lo que hay dentro queda encerrado y un
 * `.modal` (z-index 1055) no puede subir por encima del `.modal-backdrop`
 * (z-index 1050) que Bootstrap añade al `<body>`, fuera de este contexto. El
 * resultado era que el velo tapaba el modal y se comía sus clics.
 * Con el filtro en un `::before` el efecto es el mismo y el contenedor deja de
 * encerrar a sus hijos.
 */
.dash-content {
    flex: 1;
    position: relative;
    background: transparent;
}

.dash-content::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: rgb(255 255 255 / 0.75);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

.dash-footer {
    height: var(--dash-footer-height);
    flex-shrink: 0;
    border-top: 1px solid var(--dash-border);
}

/* Mismo motivo que en .dash-content: la tarjeta también encerraba a sus hijos,
   y los modales que emiten las vistas suelen ir dentro de una card. */
.dash-content .card {
    position: relative;
    border: 1px solid rgb(210, 210, 215);
    border-radius: var(--dash-radius);
    background: transparent;
    box-shadow: 0 8px 24px rgb(31 38 74 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04);
}

.dash-content .card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: var(--dash-panel);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
}

/* ---- Botones de icono de la topbar (estilo sutil de macOS) ---- */
.dash-iconbtn {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.35rem;
    border-radius: var(--dash-radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--dash-label-2);
    padding: 0;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dash-iconbtn:hover {
    background: rgb(0 0 0 / 0.06);
    color: var(--dash-label);
}

/* Estado activo del botón de Debug (#btnDebuger): barra de depuración encendida. */
.dash-iconbtn.is-active,
.dash-iconbtn.is-active:hover {
    background: var(--dash-accent);
    border-color: var(--dash-accent);
    color: #fff;
}

.dash-iconbtn.dropdown-toggle::after {
    display: none;
}

.dash-badge {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    min-width: 1.1rem;
    padding: 0 0.3em;
    border-radius: 999px;
    background: var(--dash-accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.7;
    text-align: center;
}

.dash-badge-danger {
    background: #dc3545;
}

/* ---- Avatares ---- */
.dash-avatar {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgb(0 122 255 / 0.15);
    color: var(--dash-accent);
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.dash-avatar-lg {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 0.9rem;
}

/* ---- Rightbar (derecha) ---- */
.dash-rightbar {
    position: fixed;
    inset: 0 0 0 auto;
    width: var(--dash-rightbar-width);
    display: flex;
    flex-direction: column;
    background: var(--dash-chrome);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-left: 1px solid var(--dash-border);
    z-index: 1030;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.dash-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: var(--dash-header-height);
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--dash-border);
    flex-shrink: 0;
}

.dash-rightbar-label {
    flex-shrink: 0;
}

.dash-contacts {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ---- Formulario de acceso para visitantes (rightbar) ---- */
.dash-login {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

.dash-login-hint {
    color: var(--dash-label-2);
}

.dash-profile .fw-semibold {
    font-size: 0.9rem;
    line-height: 1.2;
}

.dash-profile .badge {
    font-size: 0.65rem;
}

.dash-rightbar-label {
    padding: 0.9rem 1.25rem 0.35rem;
    color: var(--dash-label-2);
    letter-spacing: 0.08em;
}

.dash-contact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1.25rem;
}

.dash-contact:hover {
    background: rgb(0 0 0 / 0.04);
}

.dash-contact-info {
    min-width: 0;
}

.dash-contact-name {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-contact-status {
    font-size: 0.75rem;
    color: var(--dash-label-2);
}

.dash-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #d1d5db;
    margin-left: auto;
    flex-shrink: 0;
}

.dash-dot.online {
    background: #22c55e;
}

/* ---- Modo iconificado (colapso a mínimo) ---- */
.dash-sidebar,
.dash-rightbar {
    transition: transform 0.2s ease, width 0.2s ease;
}

.dash-main {
    transition: margin 0.2s ease;
}

@media (min-width: 992px) {
    body.dash-mini-left .dash-sidebar {
        width: var(--dash-sidebar-mini);
    }

    body.dash-mini-left .dash-main {
        margin-left: var(--dash-sidebar-mini);
    }

    body.dash-mini-left .dash-brand {
        justify-content: center;
        padding: 0;
    }

    body.dash-mini-left .dash-brand-text,
    body.dash-mini-left .dash-nav-text,
    body.dash-mini-left .dash-nav-label,
    body.dash-mini-left .dash-sidebar-footer {
        display: none;
    }

    body.dash-mini-left .dash-nav .nav-link {
        justify-content: center;
        padding: 0.55rem;
    }
}

@media (min-width: 1400px) {
    body.dash-mini-right .dash-rightbar {
        width: var(--dash-rightbar-mini);
    }

    body.dash-mini-right .dash-main {
        margin-right: var(--dash-rightbar-mini);
    }

    body.dash-mini-right .dash-profile {
        justify-content: center;
        padding: 0;
    }

    body.dash-mini-right .dash-profile-info,
    body.dash-mini-right .dash-rightbar-label,
    body.dash-mini-right .dash-contact-info,
    body.dash-mini-right .dash-login,
    body.dash-mini-right .dash-dot {
        display: none;
    }

    body.dash-mini-right .dash-contact {
        justify-content: center;
        padding: 0.5rem 0;
    }
}

/* ---- Responsive ---- */
@media (max-width: 1399.98px) {
    .dash-rightbar {
        transform: translateX(100%);
    }

    .dash-rightbar.show {
        transform: none;
        box-shadow: 0 0 40px rgb(0 0 0 / 0.25);
    }

    .dash-main {
        margin-right: 0;
    }
}

@media (max-width: 991.98px) {
    .dash-sidebar {
        transform: translateX(-100%);
    }

    .dash-sidebar.show {
        transform: translateX(0);
        box-shadow: 0 0 40px rgb(0 0 0 / 0.25);
    }

    .dash-main {
        margin-left: 0;
    }
}

/* ---- Menú de módulo inyectado en la barra lateral (dato de vista module_menu) ---- */
.dash-nav .sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    flex-shrink: 0;
    color: var(--dash-label);
    border-radius: var(--dash-radius-sm);
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dash-nav .sidebar-item:hover {
    background: rgb(0 0 0 / 0.05);
    color: var(--dash-label);
}

.dash-nav .sidebar-item.active {
    background: var(--dash-accent);
    color: #fff;
    font-weight: 500;
}

.dash-nav .sidebar-item i {
    width: 18px;
    font-size: 0.95rem;
    text-align: center;
    color: var(--dash-label-3);
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.dash-nav .sidebar-item:hover i {
    color: var(--dash-label-2);
}

.dash-nav .sidebar-item.active i,
.dash-nav .sidebar-item.active .sidebar-svg {
    color: #fff;
    opacity: 1;
}

.dash-nav .sidebar-svg {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.75;
    transition: opacity 0.15s ease;
}

.dash-nav .sidebar-item:hover .sidebar-svg,
.dash-nav .sidebar-item.active .sidebar-svg {
    opacity: 1;
}

/* ---- Grupos plegables del menú (acordeón, ver get_NavAccordion) ---- */
.dash-nav-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    flex-shrink: 0;
}

.dash-nav .sidebar-group {
    width: 100%;
}

.dash-nav .sidebar-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--dash-label);
    border-radius: var(--dash-radius-sm);
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dash-nav .sidebar-group-toggle:hover {
    background: rgb(0 0 0 / 0.05);
    color: var(--dash-label);
}

.dash-nav .sidebar-group-toggle i {
    width: 18px;
    font-size: 0.95rem;
    text-align: center;
    color: var(--dash-label-3);
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.dash-nav .sidebar-group-toggle:hover i {
    color: var(--dash-label-2);
}

.dash-nav .sidebar-group-toggle .sidebar-group-chevron {
    margin-left: auto;
    width: auto;
    font-size: 0.7rem;
    transition: transform 0.2s ease, color 0.15s ease;
}

.dash-nav .sidebar-group-toggle[aria-expanded="true"],
.dash-nav .sidebar-group-toggle[aria-expanded="true"] i {
    color: var(--dash-accent);
}

.dash-nav .sidebar-group-toggle[aria-expanded="true"] .sidebar-group-chevron {
    transform: rotate(180deg);
}

/* Submenú indentado con guía vertical alineada bajo el icono del grupo */
.dash-nav .sidebar-group-items {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-left: 1.05rem;
    padding: 0.15rem 0 0.15rem 0.6rem;
    border-left: 1px solid var(--dash-border);
}

@media (min-width: 992px) {
    body.dash-mini-left .dash-nav .sidebar-group-toggle {
        justify-content: center;
        padding: 0.55rem;
    }

    body.dash-mini-left .dash-nav .sidebar-group-chevron {
        display: none;
    }

    body.dash-mini-left .dash-nav .sidebar-group-items {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
}

@media (min-width: 992px) {
    body.dash-mini-left .dash-nav .sidebar-text {
        display: none;
    }

    body.dash-mini-left .dash-nav .sidebar-item {
        justify-content: center;
        padding: 0.55rem;
    }
}

/* ---- Breadcrumb de módulo bajo el topbar (dato de vista module_breadcrumb) ---- */
.dash-breadcrumb {
    padding: 0.65rem 1.5rem;
    background: var(--dash-chrome);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--dash-border);
}

.dash-breadcrumb .breadcrumb {
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: transparent;
    font-size: 0.9rem;
}

.dash-breadcrumb .breadcrumb-item,
.dash-breadcrumb .breadcrumb-item a {
    color: var(--dash-label-2);
    text-decoration: none;
}

.dash-breadcrumb .breadcrumb-item a:hover {
    color: var(--dash-accent);
}

.dash-breadcrumb .breadcrumb-item:last-child a {
    color: var(--dash-label);
}

/* ---- Shortcuts (accesos directos del módulo en la columna central
        y en el modal de Módulos Disponibles) ---- */
.dash-content .shortcuts .shortcut,
#higgs-options-modules .shortcuts .shortcut {
    display: block;
    padding: 1.25rem 1rem;
    border-radius: var(--dash-radius);
    background: var(--dash-panel);
    border: 1px solid var(--dash-glass-border);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    color: var(--dash-label);
    text-decoration: none;
    box-shadow: 0 8px 24px rgb(31 38 74 / 0.07), 0 1px 2px rgb(0 0 0 / 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.dash-content .shortcuts .shortcut:hover,
#higgs-options-modules .shortcuts .shortcut:hover {
    border-color: var(--dash-accent) !important;
    color: var(--dash-accent);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgb(31 38 74 / 0.12);
}

.dash-content .shortcuts .container-icon,
#higgs-options-modules .shortcuts .container-icon {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
    color: var(--dash-accent);
}

.dash-content .shortcuts h5,
#higgs-options-modules .shortcuts h5 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

.shortcuts .container-icon .icon-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* ==========================================================================
   Capa de armonización con componentes de Bootstrap al estilo macOS
   (botones, formularios, foco, badges, dropdowns, modales, tablas, scroll).
   ========================================================================== */

/* ---- Botones estilo Aqua ---- */
.btn {
    --bs-btn-border-radius: var(--dash-radius-sm);
    border-radius: var(--dash-radius-sm);
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
    --bs-btn-bg: var(--dash-accent);
    --bs-btn-border-color: var(--dash-accent);
    --bs-btn-hover-bg: var(--dash-accent-hover);
    --bs-btn-hover-border-color: var(--dash-accent-hover);
    --bs-btn-active-bg: var(--dash-accent-hover);
    --bs-btn-active-border-color: var(--dash-accent-hover);
    --bs-btn-disabled-bg: var(--dash-accent);
    --bs-btn-disabled-border-color: var(--dash-accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--dash-accent);
    --bs-btn-border-color: var(--dash-accent);
    --bs-btn-hover-bg: var(--dash-accent);
    --bs-btn-hover-border-color: var(--dash-accent);
    --bs-btn-active-bg: var(--dash-accent);
    --bs-btn-active-border-color: var(--dash-accent);
}

/* ---- Colores de utilidad recoloreados al sistema de macOS ---- */
.text-primary { color: var(--dash-accent) !important; }
.bg-primary { background-color: var(--dash-accent) !important; }
.link-primary { color: var(--dash-accent) !important; }
.text-success { color: var(--dash-green) !important; }
.bg-success { background-color: var(--dash-green) !important; }
.text-danger { color: var(--dash-red) !important; }
.bg-danger { background-color: var(--dash-red) !important; }
.text-warning { color: var(--dash-orange) !important; }
.bg-warning { background-color: var(--dash-orange) !important; }

a { color: var(--dash-accent); }
a:hover { color: var(--dash-accent-hover); }

/* ---- Formularios: radio y anillo de foco azul suave de macOS ---- */
.form-control,
.form-select {
    border-radius: var(--dash-radius-sm);
    border-color: var(--dash-border);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--dash-accent);
    box-shadow: 0 0 0 3px rgb(0 122 255 / 0.35);
}

.form-check-input:checked {
    background-color: var(--dash-accent);
    border-color: var(--dash-accent);
}

.form-check-input:focus {
    border-color: var(--dash-accent);
    box-shadow: 0 0 0 3px rgb(0 122 255 / 0.35);
}

/* Interruptor tipo macOS (verde cuando está activo) */
.form-switch .form-check-input:checked {
    background-color: var(--dash-green);
    border-color: var(--dash-green);
}

.btn:focus-visible,
.btn.focus {
    box-shadow: 0 0 0 3px rgb(0 122 255 / 0.35);
}

/* ---- Badges ---- */
.badge {
    font-weight: 500;
    border-radius: 999px;
}
.badge.bg-primary { background-color: var(--dash-accent) !important; }
.badge.bg-success { background-color: var(--dash-green) !important; }
.badge.bg-danger { background-color: var(--dash-red) !important; }
.badge.bg-warning { background-color: var(--dash-orange) !important; }

/* ---- Dropdowns / menús contextuales estilo macOS ---- */
.dropdown-menu {
    --bs-dropdown-border-radius: var(--dash-radius);
    --bs-dropdown-border-color: var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: 0 8px 30px rgb(0 0 0 / 0.12), 0 1px 3px rgb(0 0 0 / 0.08);
    padding: 0.35rem;
}

.dropdown-item {
    border-radius: var(--dash-radius-sm);
    padding: 0.4rem 0.75rem;
}

.dropdown-item:active,
.dropdown-item.active {
    background-color: var(--dash-accent);
}

/* ---- Modales y offcanvas ---- */
.modal-content,
.offcanvas {
    border-radius: var(--dash-radius);
    border-color: var(--dash-border);
}

/* ---- Tablas ---- */
.table {
    --bs-table-border-color: var(--dash-border);
}

/* ---- Barras de scroll finas como en macOS ---- */
* {
    scrollbar-width: thin;
    scrollbar-color: rgb(0 0 0 / 0.25) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: rgb(0 0 0 / 0.22);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgb(0 0 0 / 0.38);
    background-clip: padding-box;
}

/* ---- Texto secundario coherente con los "labels" de macOS ---- */
.text-muted { color: var(--dash-label-2) !important; }



.help-block {
	font-size: small;
	opacity: 0.3;
}

 
.field-group {
	padding: 0.5rem;
}



/**
 * SIE Module — Consolidated Stylesheet
 * =====================================
 * Extracted from inline <style> blocks across the Sie module.
 * All styles are organized by functional area.
 *
 * Source: /app/Modules/Sie/Views/**
 * Generated: 2026-05-05
 * Refactored: 2026-05-05 — CSS variables, dark mode, cleanup
 */

/* ==========================================================================
   0. DESIGN TOKENS
   ========================================================================== */

:root {
    /* Shared palette */
    --sie-bg: #fff;
    --sie-bg-alt: #f8f9fa;
    --sie-bg-subtle: #f3f2f1;
    --sie-border: #dee2e6;
    --sie-border-dark: #a6a6a6;
    --sie-text: #333;
    --sie-text-muted: #6c757d;
    --sie-text-strong: #212529;
    --sie-hover-bg: #f8f9fa;
    --sie-selected-bg: #b3d7ff;
    --sie-row-hover: #e6f2f8;
    --sie-shadow: rgba(0, 0, 0, 0.1);

    /* Grid */
    --sie-grid-font: 13px;
    --sie-grid-header-bg: #fff;
    --sie-grid-header-border: 2px solid #dee2e6;

    /* Table Excel */
    --sie-excel-header-bg: #f1f3f5;
    --sie-excel-border: #ddd;
    --sie-excel-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    /* Calendar */
    --sie-cal-day-hover: #e3f2fd;
    --sie-cal-day-hover-border: #90caf9;
    --sie-cal-selected: #1976d2;
    --sie-cal-selected-hover: #1565c0;
    --sie-cal-today-border: #ff9800;
    --sie-cal-weekend: #e53935;
    --sie-cal-weekend-selected: #c62828;

    /* Student list */
    --sie-student-selected-bg: #e3f2fd;
    --sie-student-selected-border: #2196f3;
    --sie-student-accent: #1976d2;
}

.dark-mode {
    --sie-bg: #1a1a1a;
    --sie-bg-alt: #242424;
    --sie-bg-subtle: #2a2a2a;
    --sie-border: #3a3a3a;
    --sie-border-dark: #555;
    --sie-text: #e0e0e0;
    --sie-text-muted: #adb5bd;
    --sie-text-strong: #f8f9fa;
    --sie-hover-bg: #2a2f35;
    --sie-selected-bg: #1a4a7a;
    --sie-row-hover: #1e3a50;
    --sie-shadow: rgba(0, 0, 0, 0.3);

    --sie-grid-header-bg: #242424;
    --sie-grid-header-border: 2px solid #444;

    --sie-excel-header-bg: #2a2a2a;
    --sie-excel-border: #444;
    --sie-excel-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

    --sie-cal-day-hover: #1e3a50;
    --sie-cal-day-hover-border: #2196f3;

    --sie-student-selected-bg: #1a3a5c;
    --sie-student-selected-border: #4dabf7;
    --sie-student-accent: #4dabf7;
}

/* ==========================================================================
   1. REPORT GRID (Standard) — used by 22+ report views
   Source: Views/Reports/.../Grid/styles.php, Views/Tools/Users/Home/Grid/styles.php
   ========================================================================== */

.sie-grid .table {
    border-collapse: collapse;
    font-size: var(--sie-grid-font);
    line-height: var(--sie-grid-font);
}

.sie-grid .table-container {
    height: calc(100vh - 120px);
    position: relative;
}

.sie-grid .table-scroll {
    height: 100%;
    overflow: auto;
}

.sie-grid .table-wrapper {
    position: relative;
}

.sie-grid .table-wrapper table {
    margin-bottom: 0;
}

.sie-grid .table thead th {
    position: sticky;
    top: 0;
    background-color: var(--sie-grid-header-bg);
    z-index: 1;
    border-bottom: var(--sie-grid-header-border);
}

.sie-grid .pagination-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--sie-bg);
    border-top: 1px solid var(--sie-border);
}

.sie-grid .table th,
.sie-grid .table td {
    border: 1px solid var(--sie-border);
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Variant: absolute positioning (Snies/Coursed) */
.sie-grid-absolute .table-container {
    height: calc(100vh - 120px);
    position: absolute;
    top: 0;
    left: 0;
}

/* ==========================================================================
   2. TABLE EXCEL — simulated spreadsheet look
   Source: Views/Reports/Control/Graduations/grid.php, Snies/CoursesEnrolled, etc.
   ========================================================================== */

.table-excel {
    box-shadow: var(--sie-excel-shadow);
}

.table-excel thead {
    background-color: var(--sie-excel-header-bg);
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

.table-excel th,
.table-excel td {
    min-width: 100px;
    padding: 8px;
    text-align: left;
    border: 1px solid var(--sie-excel-border);
    vertical-align: middle;
    white-space: nowrap;
}

.table-excel th {
    border-bottom: 2px solid var(--sie-border);
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

.table-excel tbody tr:hover {
    background-color: var(--sie-hover-bg);
    transition: background-color 0.3s ease;
}

.table-excel .selected {
    background-color: var(--sie-selected-bg) !important;
}

/* Variante plana (Reports/Programs): sin sticky ni anchos mínimos */
.table-excel.table-excel-plain thead {
    position: static;
}

.table-excel.table-excel-plain th,
.table-excel.table-excel-plain td {
    min-width: 0;
}

.table-excel.table-excel-plain th {
    box-shadow: none;
}

/* ==========================================================================
   3. EXCEL GRADING UI (European Tabs)
   Source: Views/Courses/European/Tabs/tabla-muestra.html.php
   ========================================================================== */

.sie-excel-grading {
    --excel-header-bg: #1f4e79;
    --excel-p1-bg: #2e75b6;
    --excel-p2-bg: #1f5c99;
    --excel-ef-bg: #154472;
    --excel-sub-bg: #dae3f3;
    --excel-sub-cons: #bdd0eb;
    --excel-row-even: #ffffff;
    --excel-row-odd: #f2f7fc;
    --excel-row-hover: #e8f0fb;
    --excel-row-sel: #cde0f8;
    --excel-border: #b4c7e7;
    --excel-border-dark: #8faadc;
    --excel-green: #375623;
    --excel-green-bg: #e2efda;
    --excel-red: #7b0000;
    --excel-red-bg: #fce4d6;
    --excel-orange: #7f4900;
    --excel-orange-bg: #fff2cc;
    --excel-frozen-bg: #f0f4fa;
    --excel-input-focus: #ddeeff;
    --col-num-w: 38px;
    --col-name-w: 210px;
    --col-note-w: 74px;
    --col-cons-w: 80px;
    --col-fin-w: 84px;
    --col-est-w: 96px;
}

.sie-excel-grading * { box-sizing: border-box; }

/* Ribbon */
.sie-excel-grading .ribbon {
    background: var(--excel-header-bg);
    color: #fff;
    padding: 6px 16px 0;
    user-select: none;
}

.sie-excel-grading .ribbon-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .3px;
    line-height: 1;
    padding-bottom: 4px;
}

.sie-excel-grading .ribbon-sub {
    font-size: 11px;
    opacity: .75;
}

.sie-excel-grading .ribbon-tabs {
    display: flex;
    gap: 2px;
    padding-top: 6px;
}

.sie-excel-grading .ribbon-tab {
    padding: 5px 14px;
    background: rgba(255, 255, 255, .12);
    border-radius: 4px 4px 0 0;
    font-size: 12px;
    cursor: pointer;
    border: none;
    color: #fff;
    transition: background .15s;
}

.sie-excel-grading .ribbon-tab.active {
    background: #fff;
    color: var(--excel-header-bg);
    font-weight: 600;
}

.sie-excel-grading .ribbon-tab:hover:not(.active) {
    background: rgba(255, 255, 255, .22);
}

/* Toolbar */
/* `.toolbar` viene de la maqueta de origen; `.excel-toolbar` es el nombre que
   emiten las vistas reales (Courses/{Other,European}/Tabs/enrolleds.php). */
.sie-excel-grading .toolbar,
.sie-excel-grading .excel-toolbar {
    background: #fff;
    border-bottom: 1px solid #c8d3e8;
    padding: 5px 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.sie-excel-grading .toolbar .divider,
.sie-excel-grading .excel-toolbar .divider {
    width: 1px;
    height: 22px;
    background: #d0d8e8;
    margin: 0 4px;
}

.sie-excel-grading .tb-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 12px;
    font-family: 'Calibri', 'Segoe UI', sans-serif;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    color: #1a3a5c;
    white-space: nowrap;
    transition: background .1s, border-color .1s;
}

.sie-excel-grading .tb-btn:hover {
    background: #e8f0fb;
    border-color: #b4c7e7;
}

.sie-excel-grading .tb-btn.primary {
    background: #2e75b6;
    color: #fff;
    border-color: #2e75b6;
}

.sie-excel-grading .tb-btn.primary:hover {
    background: #1f5c99;
}

.sie-excel-grading .tb-btn i { font-size: 13px; }

.sie-excel-grading .threshold-info {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
}

.sie-excel-grading .threshold-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 3px;
    font-weight: 600;
}

.sie-excel-grading .t-aprobado {
    background: var(--excel-green-bg);
    color: var(--excel-green);
    border: 1px solid #a9d18e;
}

.sie-excel-grading .t-reprobado {
    background: var(--excel-red-bg);
    color: var(--excel-red);
    border: 1px solid #f4b183;
}

/* Formula Bar */
.sie-excel-grading .formula-bar {
    background: #fafbfd;
    border-bottom: 1px solid #c8d3e8;
    padding: 3px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #555;
}

.sie-excel-grading .cell-ref {
    background: #fff;
    border: 1px solid #c0cde0;
    border-radius: 3px;
    padding: 2px 8px;
    min-width: 80px;
    font-family: 'Calibri', monospace;
    font-size: 12px;
    color: var(--excel-header-bg);
    font-weight: 600;
}

.sie-excel-grading .formula-icon {
    color: #2e75b6;
    font-size: 14px;
}

.sie-excel-grading .formula-text {
    font-family: 'Calibri', monospace;
    color: #1a1a1a;
    font-size: 12px;
    flex: 1;
}

/* Sheet Area */
.sie-excel-grading .sheet-area {
    overflow: auto;
    max-height: calc(100vh - 230px);
    border: 1px solid #b4c7e7;
    border-top: none;
    background: #fff;
    cursor: default;
}

/* Table */
.sie-excel-grading table {
    border-collapse: collapse;
    min-width: max-content;
    width: 100%;
}

/* Column widths */
.sie-excel-grading .col-num { width: var(--col-num-w); min-width: var(--col-num-w); }
.sie-excel-grading .col-name { width: var(--col-name-w); min-width: var(--col-name-w); }
.sie-excel-grading .col-note { width: var(--col-note-w); min-width: var(--col-note-w); }
.sie-excel-grading .col-cons { width: var(--col-cons-w); min-width: var(--col-cons-w); }
.sie-excel-grading .col-fin { width: var(--col-fin-w); min-width: var(--col-fin-w); }
.sie-excel-grading .col-est { width: var(--col-est-w); min-width: var(--col-est-w); }
/* Columna de acciones: no existía en la maqueta de origen, sí en las vistas. */
.sie-excel-grading .col-act { width: 56px; min-width: 56px; text-align: center; }

/* Barra de estado inferior (totales del grupo). Tampoco existía en la maqueta:
   las vistas reales la emiten como `.excel-status-bar`. */
.sie-excel-grading .excel-status-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 18px;
    padding: 6px 12px;
    background: var(--excel-frozen-bg);
    border-top: 1px solid var(--excel-border);
    font-size: 12px;
    color: #33455e;
}

.sie-excel-grading .excel-status-bar .stat-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.sie-excel-grading .excel-status-bar .stat-val {
    font-weight: 700;
    color: var(--excel-header-bg);
}

.sie-excel-grading .excel-status-bar .stat-val.green { color: var(--excel-green); }
.sie-excel-grading .excel-status-bar .stat-val.red { color: var(--excel-red); }
.sie-excel-grading .excel-status-bar .stat-val.orange { color: var(--excel-orange); }

/* Group headers */
.sie-excel-grading th.gh {
    background: var(--excel-header-bg);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    border: 1px solid var(--excel-border-dark);
    padding: 6px 4px;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
    letter-spacing: .3px;
}

.sie-excel-grading th.gh.p1-h { background: var(--excel-p1-bg); }
.sie-excel-grading th.gh.p2-h { background: var(--excel-p2-bg); }
.sie-excel-grading th.gh.ef-h { background: var(--excel-ef-bg); }

.sie-excel-grading th.gh .pct-pill {
    display: inline-block;
    margin-left: 6px;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
}

/* Sub-headers */
.sie-excel-grading th.sh {
    background: var(--excel-sub-bg);
    color: #1a3a5c;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    border: 1px solid var(--excel-border);
    padding: 4px 3px;
    white-space: nowrap;
    position: sticky;
    top: 33px;
    z-index: 9;
}

.sie-excel-grading th.sh .pct-sub {
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: var(--excel-p1-bg);
    margin-top: 1px;
}

.sie-excel-grading th.sh.cons { background: var(--excel-sub-cons); color: #0d2f52; font-weight: 800; }
.sie-excel-grading th.sh.total-h { background: #d6dff0; color: #0d2f52; font-weight: 800; }
.sie-excel-grading th.sh.estado-h { background: #d6dff0; color: #555; }

/* Row number */
.sie-excel-grading th.rn-h,
.sie-excel-grading td.rn {
    background: var(--excel-frozen-bg);
    border: 1px solid var(--excel-border);
    text-align: center;
    font-size: 11px;
    color: #666;
    padding: 0 4px;
    user-select: none;
}

.sie-excel-grading th.rn-h {
    position: sticky;
    top: 0;
    z-index: 20;
    font-weight: 700;
    color: #1a3a5c;
}

/* Name col header */
.sie-excel-grading th.name-h {
    background: var(--excel-frozen-bg);
    border: 1px solid var(--excel-border);
    text-align: left;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #1a3a5c;
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Data rows */
.sie-excel-grading tbody tr { transition: background .08s; }
.sie-excel-grading tbody tr:nth-child(even) { background: var(--excel-row-odd); }
.sie-excel-grading tbody tr:nth-child(odd) { background: var(--excel-row-even); }
.sie-excel-grading tbody tr:hover { background: var(--excel-row-hover); }
.sie-excel-grading tbody tr.selected { background: var(--excel-row-sel); }

.sie-excel-grading td {
    border: 1px solid var(--excel-border);
    padding: 0;
    vertical-align: middle;
    height: 24px;
    font-size: 13px;
}

.sie-excel-grading td.name-cell {
    text-align: left;
    padding: 0 8px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: var(--col-name-w);
    cursor: cell;
}

/* Note Input */
.sie-excel-grading .note-wrap {
    display: flex;
    align-items: center;
    height: 24px;
    padding: 0 2px;
}

.sie-excel-grading input.note-in {
    width: 100%;
    height: 22px;
    border: none;
    background: transparent;
    font-family: 'Calibri', 'Segoe UI', sans-serif;
    font-size: 13px;
    text-align: right;
    padding: 0 3px;
    outline: none;
    color: #1a1a1a;
    cursor: cell;
}

.sie-excel-grading input.note-in:focus {
    background: var(--excel-input-focus);
    border: 2px solid #2e75b6;
    border-radius: 0;
    cursor: text;
    color: #000;
    z-index: 1;
    position: relative;
}

.sie-excel-grading input.note-in::placeholder {
    color: #bbb;
    font-size: 11px;
}

.sie-excel-grading input.note-in::-webkit-outer-spin-button,
.sie-excel-grading input.note-in::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sie-excel-grading input.note-in[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Consolidated/Total Cells */
.sie-excel-grading td.cons-cell {
    background: #f0f5fb;
    text-align: right;
    padding-right: 6px;
    font-weight: 700;
    font-size: 13px;
    border-left: 2px solid var(--excel-border-dark);
}

.sie-excel-grading td.fin-cell {
    background: #e8f0fb;
    text-align: right;
    padding-right: 6px;
    font-weight: 700;
    font-size: 13px;
    border-left: 2px solid var(--excel-header-bg);
}

.sie-excel-grading td.est-cell {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
}

/* State Colors */
.sie-excel-grading .st-aprobado { background: var(--excel-green-bg); color: var(--excel-green); }
.sie-excel-grading .st-reprobado { background: var(--excel-red-bg); color: var(--excel-red); }
.sie-excel-grading .st-pendiente { background: var(--excel-orange-bg); color: var(--excel-orange); }
.sie-excel-grading .val-aprobado { color: var(--excel-green); }
.sie-excel-grading .val-reprobado { color: var(--excel-red); }
.sie-excel-grading .val-pendiente { color: #aaa; }

/* Sheet Tabs */
.sie-excel-grading .sheet-tabs {
    background: #d4dce8;
    border-top: 1px solid #b4c7e7;
    padding: 0 12px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 26px;
}

.sie-excel-grading .sheet-tab {
    padding: 4px 16px;
    background: #c0cede;
    border: 1px solid #aabbd0;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    font-size: 12px;
    cursor: pointer;
    color: #444;
}

.sie-excel-grading .sheet-tab.active {
    background: #fff;
    color: #1a3a5c;
    font-weight: 700;
    border-color: #b4c7e7;
}

.sie-excel-grading .sheet-tab-add {
    padding: 2px 10px;
    background: transparent;
    border: none;
    font-size: 16px;
    color: #888;
    cursor: pointer;
    line-height: 1;
}

/* Status Bar */
.sie-excel-grading .status-bar {
    background: var(--excel-header-bg);
    color: rgba(255, 255, 255, .85);
    padding: 3px 16px;
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 12px;
    flex-wrap: wrap;
}

.sie-excel-grading .status-bar .stat-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sie-excel-grading .status-bar .stat-val {
    font-weight: 700;
    font-size: 13px;
    background: rgba(255, 255, 255, .15);
    padding: 0 7px;
    border-radius: 3px;
}

.sie-excel-grading .status-bar .stat-val.green { color: #9dda6e; }
.sie-excel-grading .status-bar .stat-val.red { color: #ffaa88; }
.sie-excel-grading .status-bar .stat-val.orange { color: #ffd966; }

.sie-excel-grading .status-bar .right {
    margin-left: auto;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 11px;
    opacity: .7;
}

/* ==========================================================================
   4. STATISTICS REPORT (Full-viewport Excel clone)
   Source: Views/Reports/Statistics/General/styles.php
   ========================================================================== */

/* Reset a nivel de página del reporte a pantalla completa (antes body{} del styles.php) */
body:has(.sie-stats-grid) {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: var(--sie-bg-subtle);
    overflow: hidden;
}

.sie-stats-grid .container-fluid {
    padding: 0;
    margin: 0;
    width: 100vw;
    max-width: 100%;
}

.sie-stats-grid .table {
    border-collapse: collapse;
    font-size: 12px;
    font-family: 'Calibri', 'Segoe UI', Arial, sans-serif;
    line-height: 1.2;
    margin-bottom: 0;
    width: max-content;
    min-width: 100%;
}

.sie-stats-grid .table-container {
    height: 100vh;
    width: 100vw;
    position: relative;
    overflow: hidden;
    background: var(--sie-bg);
}

.sie-stats-grid .table-scroll {
    height: 100%;
    width: 100%;
    overflow: auto;
}

.sie-stats-grid .table-wrapper {
    position: relative;
}

.sie-stats-grid .table th,
.sie-stats-grid .table td {
    border: 1px solid #d4d4d4;
    padding: 4px 8px;
    white-space: nowrap;
    background-color: var(--sie-bg);
    vertical-align: middle;
}

.sie-stats-grid .table thead td,
.sie-stats-grid .table thead th {
    position: sticky;
    top: 0;
    background-color: var(--sie-bg-subtle);
    color: var(--sie-text);
    font-weight: bold;
    z-index: 10;
    border-bottom: 2px solid var(--sie-border-dark);
    border-right: 1px solid #d4d4d4;
    text-align: center;
    box-shadow: 0 1px 0 var(--sie-border-dark);
}

.sie-stats-grid .table thead th:first-child,
.sie-stats-grid .table thead td:first-child,
.sie-stats-grid .table tbody th:first-child,
.sie-stats-grid .table tbody td:first-child {
    position: sticky;
    left: 0;
    background-color: var(--sie-bg-subtle);
    z-index: 11;
    font-weight: bold;
    text-align: center;
    border-right: 2px solid var(--sie-border-dark);
}

.sie-stats-grid .table thead th:first-child,
.sie-stats-grid .table thead td:first-child {
    z-index: 12;
}

.sie-stats-grid .table tbody tr:hover td {
    background-color: var(--sie-row-hover);
}

.sie-stats-grid .excel-download-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    box-shadow: 0 4px 6px var(--sie-shadow);
    border-radius: 50px;
    padding: 10px 20px;
    font-weight: 600;
    background-color: #107c41;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.sie-stats-grid .excel-download-btn:hover {
    background-color: #0c5e31;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.sie-stats-grid .pagination-container {
    display: none;
}

/* ==========================================================================
   5. CALENDAR
   Source: Views/Courses/Edit/calendar.php
   ========================================================================== */

#calendar-container { user-select: none; }

.cal-month { margin-bottom: 1.5rem; }

.cal-month-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    text-transform: capitalize;
    color: var(--sie-text-muted);
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.cal-header {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sie-text-muted);
    padding: 4px 0;
}

.cal-day {
    text-align: center;
    padding: 6px 2px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.15s ease;
    position: relative;
}

.cal-day:hover {
    background-color: var(--sie-cal-day-hover);
    border-color: var(--sie-cal-day-hover-border);
}

.cal-day.selected {
    background-color: var(--sie-cal-selected);
    color: #fff;
    border-color: var(--sie-cal-selected-hover);
    font-weight: 600;
}

.cal-day.selected:hover {
    background-color: var(--sie-cal-selected-hover);
    border-color: #0d47a1;
}

.cal-day.outside {
    color: #ccc;
    cursor: default;
    pointer-events: none;
}

.cal-day.today { border-color: var(--sie-cal-today-border); }
.cal-day.weekend { color: var(--sie-cal-weekend); }

.cal-day.weekend.selected {
    background-color: var(--sie-cal-weekend-selected);
    border-color: #b71c1c;
    color: #fff;
}

.cal-day.empty { pointer-events: none; }

.cal-actions {
    margin-bottom: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cal-actions .btn { font-size: 0.8rem; }

/* ==========================================================================
   6. ATTENDANCE
   Source: Views/Courses/Other/Tabs/attendance.php
   ========================================================================== */

.att-container,
.light-mode .att-container {
    width: 100%;
    overflow-x: auto;
    font-size: 13px;
    --att-present-bg: #d3f9d8;
    --att-present: #2b8a3e;
    --att-absent-bg: #ffe3e3;
    --att-absent: #c92a2a;
    --att-late-bg: #fff3bf;
    --att-late: #e67700;
    --att-excused-bg: #d0ebff;
    --att-excused: #1971c2;
}

.dark-mode .att-container {
    --att-present-bg: #23422a;
    --att-present: #7ed695;
    --att-absent-bg: #4a2426;
    --att-absent: #f39b9b;
    --att-late-bg: #453a14;
    --att-late: #f2b13c;
    --att-excused-bg: #1d3a52;
    --att-excused: #6db3ea;
}

.att-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--sie-bg-alt);
    border: 1px solid var(--sie-border);
    border-bottom: none;
    flex-wrap: wrap;
}

.att-toolbar .tb-btn {
    background: var(--sie-bg);
    border: 1px solid #ced4da;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.att-toolbar .tb-btn:hover { background: #e9ecef; }

.att-legend {
    display: flex;
    gap: 12px;
    margin-left: auto;
    flex-wrap: wrap;
}

.att-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

.att-legend-dot {
    width: 14px;
    height: 14px;
    border: 1px solid rgba(0, 0, 0, .15);
}

.att-legend-dot strong {
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.att-legend-dot.st-present { background: var(--att-present-bg); }
.att-legend-dot.st-absent { background: var(--att-absent-bg); }
.att-legend-dot.st-late { background: var(--att-late-bg); }
.att-legend-dot.st-excused { background: var(--att-excused-bg); }
.att-legend-dot.st-present strong { color: var(--att-present); }
.att-legend-dot.st-absent strong { color: var(--att-absent); }
.att-legend-dot.st-late strong { color: var(--att-late); }
.att-legend-dot.st-excused strong { color: var(--att-excused); }

/* Íconos de la barra de estado y celda numeradora (creada por JS) */
.att-ic-present { color: var(--att-present); }
.att-ic-absent { color: var(--att-absent); }

.att-num-cell,
.light-mode .att-num-cell {
    width: 32px;
    text-align: center;
    font-size: 11px;
    color: #868e96;
    padding: 4px;
}

.dark-mode .att-num-cell { color: #98a2ab; }

.att-table-wrap {
    border: 1px solid var(--sie-border);
    overflow: auto;
    max-height: 70vh;
}

.att-table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
}

.att-table th,
.att-table td {
    padding: 0;
    text-align: center;
    border-right: 1px solid #494b5e;
    border-bottom: 1px solid #494b5e;
}

.att-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f1f3f5;
    font-weight: 600;
    font-size: 11px;
    white-space: nowrap;
}

.att-table thead th.col-name {
    position: sticky;
    left: 0;
    z-index: 15;
    text-align: left;
    min-width: 200px;
    padding: 6px 10px;
}

.att-table thead th.col-num {
    position: sticky;
    left: 0;
    z-index: 15;
    width: 32px;
    min-width: 32px;
}

.att-table thead th.col-date {
    width: 32px;
    min-width: 32px;
    padding: 2px 1px;
    height: auto;
    vertical-align: middle;
}

.att-date-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #fff;
    border: 1px solid var(--sie-border);
    padding: 3px 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    line-height: 1;
}

.att-date-chip .att-day-name {
    font-size: 9px;
    font-weight: 600;
    color: #868e96;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.att-date-chip .att-day-num {
    font-size: 16px;
    font-weight: 800;
    color: var(--sie-text-strong);
    line-height: 1.2;
}

.att-date-chip .att-month {
    font-size: 9px;
    font-weight: 500;
    color: #495057;
    text-transform: uppercase;
}

.att-table thead th.col-pct {
    width: 50px;
    min-width: 50px;
    padding: 4px;
}

.att-table tbody td.cell-name {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--sie-bg);
    text-align: left;
    padding: 4px 10px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    border-right: 1px solid #494b5e;
}

.att-table tbody tr:hover td { background: var(--sie-bg-alt); }
.att-table tbody tr:hover td.cell-name { background: #edf2ff; }

.att-cell {
    width: 42px;
    min-width: 42px;
    height: 32px;
    cursor: pointer;
    transition: background .15s;
    position: relative;
}

.att-cell:hover { filter: brightness(0.92); }
.att-cell.st-present { background: var(--att-present-bg); }
.att-cell.st-absent { background: var(--att-absent-bg); }
.att-cell.st-late { background: var(--att-late-bg); }
.att-cell.st-excused { background: var(--att-excused-bg); }

.att-cell .att-letter {
    font-size: 14px;
    font-weight: 700;
    line-height: 32px;
    cursor: pointer;
    user-select: none;
}

.att-cell.st-present .att-letter { color: var(--att-present); }
.att-cell.st-absent .att-letter { color: var(--att-absent); }
.att-cell.st-late .att-letter { color: var(--att-late); }
.att-cell.st-excused .att-letter { color: var(--att-excused); }

.att-pct { font-weight: 600; font-size: 12px; padding: 4px; }
.att-pct.high { color: var(--att-present); }
.att-pct.mid { color: var(--att-late); }
.att-pct.low { color: var(--att-absent); }

.att-status-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--sie-bg-alt);
    border: 1px solid var(--sie-border);
    border-top: none;
    font-size: 12px;
    flex-wrap: wrap;
}

.att-stat { display: flex; align-items: center; gap: 4px; }
.att-stat-val { font-weight: 700; }

.att-saving {
    position: fixed;
    top: 12px;
    right: 12px;
    background: #343a40;
    color: #fff;
    padding: 6px 14px;
    font-size: 12px;
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity .3s;
}

.att-saving.show { display: block; opacity: 1; }

/* ==========================================================================
   7. LOGBOOK (Bitacora)
   Source: Views/Courses/Other/Tabs/logbook.php
   ========================================================================== */

.lb-container { width: 100%; font-size: 13px; }

.lb-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--sie-bg-alt);
    border: 1px solid var(--sie-border);
    border-radius: 6px 6px 0 0;
    flex-wrap: wrap;
}

.lb-toolbar .tb-btn {
    background: var(--sie-bg);
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.lb-toolbar .tb-btn:hover { background: #e9ecef; }
.lb-toolbar .lb-stats { margin-left: auto; font-size: 1rem; color: #495057; }
.lb-toolbar .lb-stats strong { color: var(--sie-text-strong); }

.lb-timeline {
    border: 1px solid var(--sie-border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 72vh;
    overflow-y: auto;
    padding: 0;
}

.lb-session { border-bottom: 1px solid #e9ecef; transition: background .15s; }
.lb-session:last-child { border-bottom: none; }

.lb-session-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    background: var(--sie-bg-alt);
    border-bottom: 1px solid #e9ecef;
}

.lb-session-header:hover { background: #edf2ff; }
.lb-session.is-open .lb-session-header { background: #e7f5ff; border-bottom-color: #a5d8ff; }

.lb-date-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--sie-bg);
    border: 1px solid var(--sie-border);
    border-radius: 6px;
    padding: 4px 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    min-width: 48px;
    line-height: 1;
}

.lb-date-chip .lb-day-name { font-size: 0.75rem; font-weight: 600; color: #868e96; text-transform: uppercase; }
.lb-date-chip .lb-day-num { font-size: 1rem; font-weight: 800; color: var(--sie-text-strong); line-height: 1.2; }
.lb-date-chip .lb-month { font-size: 0.75rem; font-weight: 500; color: #495057; text-transform: uppercase; }

.lb-session-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lb-session-date-full { font-size: 1rem; font-weight: 600; color: var(--sie-text-strong); }
.lb-session-topic-count { font-size: 1rem; color: #868e96; }

.lb-session-toggle { font-size: 1rem; color: #868e96; transition: transform .2s; }
.lb-session.is-open .lb-session-toggle { transform: rotate(180deg); color: #1971c2; }

.lb-session-body { display: none; padding: 12px 14px 14px 72px; background: var(--sie-bg); }
.lb-session.is-open .lb-session-body { display: block; }

.lb-topics-list { list-style: none; padding: 0; margin: 0 0 10px 0; }

.lb-topic-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dashed #e9ecef;
}

.lb-topic-item:last-child { border-bottom: none; }

.lb-topic-bullet {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background: #4dabf7;
    margin-top: 5px;
}

.lb-topic-text {
    flex: 1;
    font-size: 13px;
    color: var(--sie-text-strong);
    line-height: 1.4;
    word-break: break-word;
}

.lb-topic-text[contenteditable="true"] {
    outline: none;
    border-bottom: 1px solid #a5d8ff;
    padding-bottom: 2px;
}

.lb-topic-text[contenteditable="true"]:focus {
    border-bottom-color: #1971c2;
    background: #f0f9ff;
}

.lb-topic-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.lb-topic-item:hover .lb-topic-actions { opacity: 1; }

.lb-topic-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
    border-radius: 3px;
    color: #868e96;
}

.lb-topic-btn:hover { background: #e9ecef; color: var(--sie-text-strong); }
.lb-topic-btn.btn-del:hover { background: #ffe3e3; color: #c92a2a; }

.lb-add-form { display: flex; gap: 8px; align-items: center; }

.lb-add-input {
    flex: 1;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    outline: none;
    transition: border-color .15s;
}

.lb-add-input:focus {
    border-color: #4dabf7;
    box-shadow: 0 0 0 2px rgba(77, 171, 247, .15);
}

.lb-add-btn {
    background: #1971c2;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.lb-add-btn:hover { background: #1864ab; }

.lb-empty-msg {
    font-size: 1rem;
    color: #adb5bd;
    font-style: italic;
    padding: 4px 0 10px 0;
}

.lb-saving {
    position: fixed;
    top: 12px;
    right: 12px;
    background: #343a40;
    color: #fff;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity .3s;
}

.lb-saving.show { display: block; opacity: 1; }

.lb-session-status {
    font-size: 1rem;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
}

.lb-session-status.st-scheduled { background: #fff3bf; color: #e67700; }
.lb-session-status.st-completed { background: #d3f9d8; color: #2b8a3e; }
.lb-session-status.st-canceled { background: #ffe3e3; color: #c92a2a; }

/* ==========================================================================
   8. STUDENT LIST / MODAL
   Source: Views/Courses/Other/javascript.php (shared by European, American)
   ========================================================================== */

.student-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--sie-border);
    border-radius: 0.375rem;
}

.student-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sie-bg-alt);
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--sie-bg);
}

.student-item:hover {
    background-color: var(--sie-bg-alt);
    transform: translateX(2px);
}

.student-item.selected {
    background-color: var(--sie-student-selected-bg);
    border-left: 4px solid var(--sie-student-selected-border);
}

.student-item:last-child { border-bottom: none; }

.student-profile-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.student-photo { flex-shrink: 0; }

.profile-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e0e0e0;
    transition: border-color 0.2s ease;
}

.student-item:hover .profile-img { border-color: var(--sie-student-selected-border); }

.student-item.selected .profile-img {
    border-color: var(--sie-student-accent);
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.student-info { flex: 1; min-width: 0; }

.student-cedula {
    font-weight: 600;
    color: var(--sie-student-accent);
    font-size: 1.1em;
    margin-bottom: 2px;
}

.student-name {
    font-weight: 500;
    color: var(--sie-text);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-details {
    font-size: 0.85em;
    color: var(--sie-text-muted);
    line-height: 1.4;
}

.highlight {
    background-color: #fff3cd;
    padding: 1px 2px;
    border-radius: 2px;
    font-weight: 600;
}

.modal-lg { max-width: 800px; }
.input-group-text { background-color: var(--sie-bg-alt); border-color: #ced4da; }

#studentSearch:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); }

/* ==========================================================================
   9. LOADING OVERLAY / SPINNER
   Source: Views/Tools/Direct/Courses/register.php, Registrations/Create/form.php
   ========================================================================== */

.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

.loading-text {
    color: white;
    font-size: 18px;
    font-weight: bold;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   10. TERMINAL
   Source: Views/Tools/Autoenrollment/view.php, Users/AutoCreate, Moodle/Courses
   ========================================================================== */

.terminal {
    background-color: #000;
    color: #ffffff;
    font-family: 'Courier New', Courier, monospace;
    height: 400px;
    padding: 10px;
    overflow-y: auto;
    border-radius: 5px;
    font-size: 12px;
}

.terminal.terminal-tall {
    height: 1280px;
}

.cursor {
    animation: blink 1s infinite;
}

@keyframes blink {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* ==========================================================================
   11. COMMUNITY GRID
   Source: Views/Tools/Community/grid.php
   ========================================================================== */

.sie-community .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sie-community .table th,
.sie-community .table td {
    padding: 0.5rem;
    vertical-align: middle;
}

.sie-community .table thead th {
    border-bottom: 2px solid var(--sie-border);
}

.sie-community .table {
    width: auto;
    max-width: none;
}

.column-options {
    border-collapse: collapse;
    border-bottom: 1px solid #d6d6d6;
    font-size: 13px;
}

.column-options th,
.column-options td {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #434343;
    background-color: #f7f7f7;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #dcdcdc;
}

.column-options th {
    font-size: 140%;
    font-weight: normal;
    letter-spacing: 0.12em;
    text-shadow: -1px -1px 1px #999;
    color: #fff;
    background-color: #0cb08b;
    padding: 12px 0 8px 0;
    border-bottom: 1px solid #d6d6d6;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.column-options th:first-child { border-top-left-radius: 7px; }
.column-options th:last-child { border-top-right-radius: 7px; }

.column-options td {
    text-shadow: 1px 1px 0 #fff;
    padding: 3px 5px;
}

.column-options .odd td { background-color: #ededed; }

.column-options th:last-child,
.column-options td:last-child {
    border-right: none;
}

.column-options a.button {
    font-size: 70%;
    text-decoration: none;
    text-align: center;
    text-shadow: -1px -1px 1px #72aebd;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: #fff;
    padding: 7px 10px 4px 10px;
    border-radius: 5px;
    background-color: #00CC99;
    border-top: 1px solid #90f2da;
    border-right: 1px solid #00a97f;
    border-bottom: 1px solid #008765;
    border-left: 1px solid #7dd2bd;
    box-shadow: 2px 1px 2px #ccc;
    margin: 10px 5px;
    display: block;
}

.column-options a.button:hover {
    position: relative;
    top: 1px;
    left: 1px;
    background-color: #00CCFF;
    border-top: 1px solid #9aebff;
    border-right: 1px solid #08acd5;
    border-bottom: 1px solid #07a1c8;
    border-left: 1px solid #92def1;
    box-shadow: -1px -1px 2px #ccc;
}

.column-options .selected { background-color: #f0f8ff; }

/* ==========================================================================
   12. CUSTOMIZER TABLE
   Source: Views/Tools/Agreements/Customizer/view.php
   ========================================================================== */

#customizer-table tbody tr { transition: background-color 0.15s ease; }
#customizer-table tbody tr:hover { background-color: #f0f4ff; }

#customizer-table .form-check-input {
    width: 1.3em;
    height: 1.3em;
    cursor: pointer;
}

#customizer-table .form-check-input:checked {
    background-color: #667eea;
    border-color: #667eea;
}

#customizer-table .group-header td {
    background: var(--sie-bg-alt);
    font-weight: 600;
    color: #495057;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#customizer-table .field-row.hidden-field { opacity: 0.45; }
#customizer-table .badge-type { font-size: 0.7rem; }

.font-monospace {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.8rem;
}

#customizer-feedback .alert {
    margin-bottom: 0;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

/* ==========================================================================
   13. CANCEL MODAL (SVG Animation)
   Source: Views/Registrations/Cancel/form.php
   ========================================================================== */

.modal#statusSuccessModal .modal-content,
.modal#statusErrorsModal .modal-content {
    border-radius: 30px;
}

.modal#statusSuccessModal .modal-content svg,
.modal#statusErrorsModal .modal-content svg {
    width: 100px;
    display: block;
    margin: 0 auto;
}

.modal#statusSuccessModal .modal-content .path,
.modal#statusErrorsModal .modal-content .path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
}

.modal#statusSuccessModal .modal-content .path.circle,
.modal#statusErrorsModal .modal-content .path.circle {
    animation: dash 0.9s ease-in-out;
}

.modal#statusSuccessModal .modal-content .path.line,
.modal#statusErrorsModal .modal-content .path.line {
    stroke-dashoffset: 1000;
    animation: dash 0.95s 0.35s ease-in-out forwards;
}

.modal#statusSuccessModal .modal-content .path.check,
.modal#statusErrorsModal .modal-content .path.check {
    stroke-dashoffset: -100;
    animation: dash-check 0.95s 0.35s ease-in-out forwards;
}

@keyframes dash {
    0% { stroke-dashoffset: 1000; }
    100% { stroke-dashoffset: 0; }
}

@keyframes dash-check {
    0% { stroke-dashoffset: -100; }
    100% { stroke-dashoffset: 900; }
}

.box00 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

/* ==========================================================================
   14. CERTIFICATIONS / STUDIES (Print layout)
   Source: Views/Certifications/Studies/index.php
   ========================================================================== */

.sie-cert { font-family: Arial, sans-serif; font-size: 12pt; line-height: 1.4; text-align: justify; }
.sie-cert .consecutivo { text-align: right; font-size: 10pt; margin-bottom: 20px; }
.sie-cert .certificacion { font-weight: bold; font-size: 12pt; margin-bottom: 20px; text-align: center; }
.sie-cert .contenido { text-align: justify; margin-bottom: 20px; }
.sie-cert .info-contacto { font-size: 10pt; margin-top: 20px; }
.sie-cert .fecha-expedicion { font-size: 10pt; text-align: right; margin-top: 20px; }

.sie-cert .header {
    position: relative;
    margin-bottom: 20px;
    min-height: 100px;
    padding: 10px;
}

.sie-cert .header-logo {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: 100px;
    display: flex;
    align-items: center;
}

.sie-cert .header-logo img {
    height: 100px;
    width: auto;
    display: block;
}

.sie-cert .header-text {
    text-align: center;
    margin-left: 220px;
    padding-top: 10px;
}

.sie-cert .header h1 { font-weight: bold; font-size: 10pt; margin: 0; }
.sie-cert .header p { font-size: 10pt; margin: 0; }
.sie-cert .codigo-info { text-align: right; font-size: 10pt; margin-bottom: 40px; }
.sie-cert .codigo-info p { font-size: 10pt; margin: 0; }
.sie-cert .firma { margin-top: 120px; text-align: center; margin-bottom: 0; }
.sie-cert .firma p { margin: 0; }

/* ==========================================================================
   15. SNIES OPTIMIZED TABLE
   Source: Views/Reports/Snies/Freeofcharge/table-optimized.php
   ========================================================================== */

#grid-table {
    font-size: 11px;
}

#grid-table thead {
    position: sticky;
    top: 0;
}

#grid-table th {
    padding: 8px 4px;
    font-weight: bold;
}

#grid-table td {
    padding: 6px 4px;
    vertical-align: middle;
}

#grid-table tbody tr:hover {
    background-color: var(--sie-hover-bg);
}

/* ==========================================================================
   16. TEACHERS REPORT — Course items
   Source: Views/Reports/Teachers/Grid/table.php
   ========================================================================== */

.course-item {
    border-bottom: 1px solid #eee;
    padding: 0;
}

.course-item:last-child { border-bottom: none; }

.course-item .progress-bar {
    font-size: 0.75rem;
    line-height: 20px;
}

/* ==========================================================================
   17. PROGRESS CALIFICATION — grade tables rendered per module row
   Source: Views/Progress/List/Calification/{calification,european,other}.php
   ========================================================================== */

.sie-calif,
.light-mode .sie-calif {
    --calif-gh-bg: #6c757d;        /* banda EF / criterio padre (SEPC) */
    --calif-gh-p1-bg: #adb5bd;     /* banda P1 */
    --calif-gh-p2-bg: #9fa6ac;     /* banda P2 */
    --calif-gh-total-bg: #495057;  /* banda T */
    --calif-gh-text: #fff;
    --calif-cons-bg: #f8f9fa;      /* celda de consolidado */
    --calif-total-bg: #e9ecef;     /* celda/encabezado de total */
    --calif-cons-head-bg: #dee2e6; /* encabezado CONS del formulario de edición */
    --calif-pending: #bbb;         /* nota aún no calculable */
    --calif-fail: #dc3545;
    --calif-pass: #198754;
}

.dark-mode .sie-calif {
    --calif-gh-bg: #495057;
    --calif-gh-p1-bg: #5c636a;
    --calif-gh-p2-bg: #545b62;
    --calif-gh-total-bg: #343a40;
    --calif-gh-text: #f8f9fa;
    --calif-cons-bg: #2a2a2a;
    --calif-total-bg: #333;
    --calif-cons-head-bg: #3a3f44;
    --calif-pending: #777;
    --calif-fail: #f1707c;
    --calif-pass: #4cd39a;
}

/* Variante detallada (sub-notas european / grilla SEPC) */
.sie-calif.sie-calif-detail { font-size: 12px; }

.sie-calif td.ref { font-weight: 600; }

/* Group headers (bandas P1/P2/EF/T o criterios padre del SEPC) */
.sie-calif th.gh {
    text-align: center;
    background: var(--calif-gh-bg);
    color: var(--calif-gh-text);
}

.sie-calif th.gh.p1-h { background: var(--calif-gh-p1-bg); }
.sie-calif th.gh.p2-h { background: var(--calif-gh-p2-bg); }
.sie-calif th.gh.total-h { background: var(--calif-gh-total-bg); }

/* Sub-headers (sub-notas / criterios hoja, CONS y FINAL) */
.sie-calif th.sh {
    text-align: center;
    font-size: 10px;
}

.sie-calif th.sh.cons {
    background: var(--calif-total-bg);
    font-weight: 700;
}

.sie-calif th.sh.final { font-weight: 700; }

/* Celdas de valores */
.sie-calif td.val { text-align: center; }

.sie-calif td.cons-cell {
    text-align: center;
    background: var(--calif-cons-bg);
}

.sie-calif td.fin-cell {
    text-align: center;
    background: var(--calif-total-bg);
}

.sie-calif td.status-cell,
.sie-calif td.empty-cell {
    text-align: center;
}

/* Estado de la nota respecto a la aprobatoria */
.sie-calif .val-reprobado {
    color: var(--calif-fail);
    font-weight: 600;
}

.sie-calif .val-aprobado {
    color: var(--calif-pass);
    font-weight: 600;
}

/* Variantes de tamaño (grilla embebida en Progress/View y formulario de edición) */
.sie-calif.sie-calif-compact { font-size: 11px; }
.sie-calif.sie-calif-input { font-size: 13px; }

/* Peso porcentual dentro de encabezados */
.sie-calif th.gh .pct {
    font-size: 10px;
    opacity: .8;
}

/* Encabezados del formulario de edición (criterios hoja y CONS en vivo) */
.sie-calif th.sh-input {
    text-align: center;
    font-size: 11px;
    background: var(--calif-total-bg);
}

.sie-calif th.sh-input .pct {
    font-size: 9px;
    color: var(--sie-text-muted);
}

.sie-calif th.cons-h {
    text-align: center;
    font-size: 11px;
    background: var(--calif-cons-head-bg);
}

/* Inputs de nota del formulario de edición */
.sie-calif .criterion-input {
    max-width: 70px;
    margin: 0 auto;
}

/* Celdas vivas del preview (Progress/Edit): consolidado, final y estado */
.sie-calif td.cons-cell.live { font-weight: 600; }

.sie-calif td.fin-cell.live {
    font-weight: 700;
    font-size: 14px;
}

.sie-calif td.status-live { font-weight: 600; }

/* Nota aún no calculable */
.sie-calif .val-pendiente { color: var(--calif-pending); }

/* Estado calculado en vivo */
.sie-calif .status-aprobado {
    background: var(--calif-pass);
    color: #fff;
}

.sie-calif .status-reprobado {
    background: var(--calif-fail);
    color: #fff;
}

.sie-calif .status-pendiente { color: var(--sie-text-muted); }

/* ==========================================================================
   18. MISC — resaltados compartidos entre vistas
   Source: Views/Orders/Create/{items,javascripts}.php,
           Views/Students/View/Modals/javascript.php,
           Views/Tools/Agreements/Customizer/view.php
   ========================================================================== */

/* Campo de total resaltado (Orders) */
input.sie-input-total,
.light-mode input.sie-input-total { background-color: #c7eaf4; }
.dark-mode input.sie-input-total { background-color: #1b4a5a; }

/* Marca de campo requerido */
.sie-required-mark,
.light-mode .sie-required-mark {
    color: #dc3545;
    font-weight: bold;
}

.dark-mode .sie-required-mark { color: #f1707c; }

/* Encabezado con gradiente de marca (Customizer y afines) */
.sie-gradient-header,
.light-mode .sie-gradient-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.dark-mode .sie-gradient-header {
    background: linear-gradient(135deg, #4a56b0 0%, #573a80 100%);
}

/* ==========================================================================
   19. COURSED REPORT (Snies/Coursed) — variante absoluta del grid + badges
   Source: Views/Reports/Snies/Coursed/Grid/styles.php
   ========================================================================== */

.coursed-grid-wrapper {
    position: relative;
    height: calc(100vh - 20px);
    overflow: hidden;
}

.sie-grid .grid-toolbar {
    background: var(--sie-bg-alt);
    padding: 8px 16px;
    border-bottom: 1px solid var(--sie-border);
}

/* El contenedor llena el wrapper (absoluto a los 4 bordes) */
.sie-grid-coursed .table-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
}

/* Badge de estado por modelo: el color va en el span (no en el td) porque el
   rayado de table-striped taparía un background plano de la celda */
.sie-estado-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}

#progressModal .modal-header { border-bottom: none; }
#progressModal .modal-footer { border-top: none; }

#progressModal .progress,
.light-mode #progressModal .progress {
    background-color: #e9ecef;
    border-radius: 0.5rem;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dark-mode #progressModal .progress { background-color: #333; }

#progressModal .progress-bar {
    transition: width 0.3s ease;
    font-size: 14px;
    line-height: 30px;
    min-width: 0;
}

/* ==========================================================================
   20. JOB STATUS (Jobs/Status) — geometría de la tarjeta de estado
   Source: Views/Jobs/Status/view.php
   ========================================================================== */

.sie-job-status .card { border-radius: 10px; }

.sie-job-status .card-header {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

.sie-job-status .progress { border-radius: 15px; }

.sie-job-status .progress-bar {
    font-weight: bold;
    font-size: 14px;
}

.sie-job-status .badge {
    font-size: 14px;
    padding: 8px 12px;
}

.sie-job-status .btn-lg {
    padding: 12px 30px;
    font-size: 18px;
}

/* ==========================================================================
   21. PREENROLLMENT FORM — radios grandes de selección de módulos
   Source: Views/Preenrollments/Edit/preenrollment.php
   ========================================================================== */

#form_preenrrolments,
.light-mode #form_preenrrolments {
    --preenroll-radio-border: #6c757d;
    --preenroll-radio-bg: #fff;
    --preenroll-accent: #0d6efd;
    --preenroll-accent-ring: rgba(13, 110, 253, 0.15);
}

.dark-mode #form_preenrrolments {
    --preenroll-radio-border: #8a9199;
    --preenroll-radio-bg: #1a1a1a;
    --preenroll-accent: #4dabf7;
    --preenroll-accent-ring: rgba(77, 171, 247, 0.2);
}

#form_preenrrolments .cell-check {
    width: 64px;
    min-width: 64px;
}

#form_preenrrolments .form-check-input[type="radio"] {
    width: 1.5em;
    height: 1.5em;
    margin: 0;
    cursor: pointer;
    border: 2px solid var(--preenroll-radio-border);
    background: var(--preenroll-radio-bg);
    box-shadow: none;
}

#form_preenrrolments .form-check-input[type="radio"]:hover {
    border-color: var(--preenroll-accent);
    box-shadow: 0 0 0 0.2rem var(--preenroll-accent-ring);
}

#form_preenrrolments .form-check-input[type="radio"]:checked {
    border-color: var(--preenroll-accent);
    background: var(--preenroll-accent);
}

/* ==========================================================================
   22. STUDENT STATUS SIDEBAR — franja de estado en la vista del estudiante
   Source: Views/Students/View/Modals/change_status.php (clase usada por View/right.php)
   ========================================================================== */

.status-title,
.light-mode .status-title {
    background-color: #000;
    padding: 10px;
    font-size: 1rem;
    color: #fff;
    text-align: center;
    font-weight: bold;
}

.dark-mode .status-title {
    background-color: #333;
    color: #f8f9fa;
}