:root {
    --ucem-primary: #DEAA34;
    --ucem-primary-dark: #B58E36;
    --ucem-dark: #1C1C1C;
    --ucem-charcoal: #3A3B3A;
    --ucem-bg: #F4F6FB;
    --ucem-card: #FFFFFF;
    --ucem-text: #1C2434;
    --ucem-muted: #7A8699;
    --ucem-border: #E7EAF0;
    --ucem-success: #10B981;
    --ucem-danger: #EF4444;
    --ucem-warning: #F59E0B;
}

@font-face {
    font-family: 'Gentax';
    src: url('../fonts/Gentax.woff') format('woff'),
         url('../fonts/Gentax.ttf') format('truetype'),
         url('../fonts/Gentax.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.marca-gentax { font-family: 'Gentax', -apple-system, sans-serif; letter-spacing: 0.5px; }

/* ==========================================================================
   Reasignar los colores semanticos de Bootstrap a la paleta institucional UCEM
   ========================================================================== */
:root {
    --bs-primary: var(--ucem-primary);
    --bs-primary-rgb: 222, 170, 52;
    --bs-success: var(--ucem-success);
    --bs-warning: var(--ucem-warning);
    --bs-danger: var(--ucem-danger);
    --bs-link-color: var(--ucem-primary-dark);
    --bs-link-hover-color: var(--ucem-dark);
}

a { color: var(--ucem-primary-dark); }
a:hover { color: var(--ucem-dark); }

.btn-primary {
    --bs-btn-bg: var(--ucem-primary); --bs-btn-border-color: var(--ucem-primary);
    --bs-btn-color: #1C1C1C; --bs-btn-hover-color: #1C1C1C; --bs-btn-active-color: #1C1C1C;
    --bs-btn-hover-bg: var(--ucem-primary-dark); --bs-btn-hover-border-color: var(--ucem-primary-dark);
    --bs-btn-active-bg: var(--ucem-primary-dark); --bs-btn-active-border-color: var(--ucem-primary-dark);
}
.btn-outline-primary {
    --bs-btn-color: var(--ucem-primary-dark); --bs-btn-border-color: var(--ucem-primary);
    --bs-btn-hover-bg: var(--ucem-primary); --bs-btn-hover-border-color: var(--ucem-primary);
    --bs-btn-hover-color: #1C1C1C;
}
.text-bg-primary { background-color: var(--ucem-primary) !important; color: #1C1C1C !important; }

/* Badges de categoria de desempeno (se mantienen semaforo, no institucionales) */
.badge.bg-destacado { background-color: #4CAF50 !important; }
.badge.bg-competente { background-color: #2196F3 !important; }
.badge.bg-acompanamiento { background-color: #FFC107 !important; color: #333; }
.badge.bg-insatisfactorio { background-color: #F44336 !important; }

* { -webkit-tap-highlight-color: transparent; }

body {
    background: var(--ucem-bg);
    color: var(--ucem-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding-bottom: 78px;
}

.card { border: none; border-radius: 14px; }

/* ---------- Topbar (institucional, oscuro con acento dorado) ---------- */
.topbar {
    background: var(--ucem-dark);
    color: #fff;
}
.topbar .navbar-brand { color: #fff !important; }
.topbar .navbar-brand .acento { color: var(--ucem-primary); }
.topbar .nav-link { color: rgba(255,255,255,0.85) !important; }
.topbar .nav-link:hover { color: var(--ucem-primary) !important; }
.topbar .dropdown-menu { --bs-dropdown-link-active-bg: var(--ucem-primary); }

/* ---------- Bottom nav (mobile-first, tipo app) ---------- */
.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    background: var(--ucem-card);
    border-top: 1px solid var(--ucem-border);
    display: none;
    align-items: center;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 200;
}
.bottom-nav .nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--ucem-muted); text-decoration: none; font-size: 0.65rem; gap: 2px; flex: 1;
}
.bottom-nav .nav-item i { font-size: 1.2rem; }
.bottom-nav .nav-item.active { color: var(--ucem-primary-dark); }
@media (max-width: 767px) {
    .bottom-nav { display: flex; }
    body { padding-bottom: 78px; }
}

/* ---------- Login ---------- */
.login-body {
    min-height: 100vh;
    background: radial-gradient(circle at 30% 20%, #2b2b2b, #0d0d0d 70%);
}
.login-card {
    background: #1f1f1f;
    border: 1px solid #333;
    border-radius: 20px;
    padding: 36px 28px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
    color: #fff;
}
.login-icon-img { max-width: 84px; max-height: 84px; object-fit: contain; border-radius: 50%; }
.login-card h1 { color: #fff; }
.login-card p.subtitulo { color: #B5B5B5; }
.login-card label { color: #D6D6D6; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.4px; }
.login-card .form-control {
    background: #141414; border: 1px solid #3a3a3a; color: #fff;
}
.login-card .form-control:focus {
    background: #141414; border-color: var(--ucem-primary); color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(222,170,52,0.25);
}
.login-card .form-control::placeholder { color: #6b6b6b; }
.btn-accent { background: var(--ucem-primary); border-color: var(--ucem-primary); color: #1C1C1C; font-weight: 700; }
.btn-accent:hover { background: var(--ucem-primary-dark); border-color: var(--ucem-primary-dark); color: #1C1C1C; }
.login-pie { text-align: center; margin-top: 18px; color: #7a7a7a; font-size: 0.8rem; letter-spacing: 0.4px; }

@media (min-width: 768px) {
    .app-content, main.container-fluid { max-width: 1100px; margin: 0 auto; }
}

/* ==========================================================================
   MODO OSCURO — se activa con <html data-theme="dark">
   ========================================================================== */
:root[data-theme="dark"] {
    --ucem-bg: #121212;
    --ucem-card: #1E1E1E;
    --ucem-text: #EAEAEA;
    --ucem-muted: #9A9A9A;
    --ucem-border: #333333;
    --bs-body-color: #EAEAEA;
}

:root[data-theme="dark"] body { background: var(--ucem-bg); color: var(--ucem-text); }
:root[data-theme="dark"] .bg-white { background-color: var(--ucem-card) !important; color: var(--ucem-text); }
:root[data-theme="dark"] .card { background-color: var(--ucem-card); color: var(--ucem-text); }
:root[data-theme="dark"] .text-body { color: var(--ucem-text) !important; }
:root[data-theme="dark"] .text-muted { color: var(--ucem-muted) !important; }

:root[data-theme="dark"] .table { color: var(--ucem-text); }
:root[data-theme="dark"] .table > :not(caption) > * > * { background-color: var(--ucem-card); color: var(--ucem-text); border-color: var(--ucem-border); }
:root[data-theme="dark"] .table-responsive { color: var(--ucem-text); }

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    background-color: #181818;
    border-color: var(--ucem-border);
    color: var(--ucem-text);
}
:root[data-theme="dark"] .form-control::placeholder { color: #6b6b6b; }
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
    background-color: #181818;
    border-color: var(--ucem-primary);
    color: var(--ucem-text);
    box-shadow: 0 0 0 0.2rem rgba(222,170,52,0.25);
}
:root[data-theme="dark"] .form-label,
:root[data-theme="dark"] label { color: var(--ucem-text); }
:root[data-theme="dark"] .form-text { color: var(--ucem-muted); }

:root[data-theme="dark"] .dropdown-menu { background-color: var(--ucem-card); border-color: var(--ucem-border); }
:root[data-theme="dark"] .dropdown-item { color: var(--ucem-text); }
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus { background-color: var(--ucem-bg); color: var(--ucem-text); }
:root[data-theme="dark"] .dropdown-divider { border-color: var(--ucem-border); }

:root[data-theme="dark"] .modal-content { background-color: var(--ucem-card); color: var(--ucem-text); border: 1px solid var(--ucem-border); }
:root[data-theme="dark"] .modal-header, :root[data-theme="dark"] .modal-footer { border-color: var(--ucem-border); }
:root[data-theme="dark"] .btn-close { filter: invert(1); }

:root[data-theme="dark"] .bottom-nav { background: var(--ucem-card); border-color: var(--ucem-border); }
:root[data-theme="dark"] .btn-outline-secondary { color: var(--ucem-text); border-color: var(--ucem-border); }
:root[data-theme="dark"] code { color: #F0C868; }

:root[data-theme="dark"] .pagination .page-link { background-color: var(--ucem-card); border-color: var(--ucem-border); color: var(--ucem-text); }
:root[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--ucem-card); color: var(--ucem-muted); }

.pagination .page-link { color: var(--ucem-primary-dark); }
.page-item.active .page-link { background-color: var(--ucem-primary); border-color: var(--ucem-primary); color: #1C1C1C; }

/* Icono de hamburguesa (menu movil) en dorado institucional, visible sobre
   la topbar oscura. Mismo grafico de Bootstrap, solo recoloreado. */
.topbar .navbar-toggler {
    border-color: rgba(222,170,52,0.6) !important;
}
.topbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(222,170,52,0.35);
}
.topbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23DEAA34' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Barras de progreso por categoria de desempeno (dashboard) */
.progress-bar.bg-destacado { background-color: #4CAF50 !important; }
.progress-bar.bg-competente { background-color: #2196F3 !important; }
.progress-bar.bg-acompanamiento { background-color: #FFC107 !important; }
.progress-bar.bg-insatisfactorio { background-color: #F44336 !important; }
:root[data-theme="dark"] .progress { background-color: #2a2a2a; }
:root[data-theme="dark"] .list-group-item { background-color: var(--ucem-card); color: var(--ucem-text); border-color: var(--ucem-border); }