@font-face {
    font-family: 'Rajdhani';
    src: url('../fonts/Rajdhani-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rajdhani';
    src: url('../fonts/Rajdhani-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rajdhani';
    src: url('../fonts/Rajdhani-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rajdhani';
    src: url('../fonts/Rajdhani-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rajdhani';
    src: url('../fonts/Rajdhani-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Aplicar a la palabra "PIPETC" en todo el sitio (marca del sistema) */
.font-pipetc {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    letter-spacing: .3px;
}

:root {
    --esasa-primary: #1E7A8C;
    --esasa-primary-dark: #155C6B;
    --esasa-dark: #123B24;
    --esasa-bg: #F5F4EF;
    --esasa-card: #FFFFFF;
    --esasa-border: #E4E1D6;
    --esasa-muted: #7C7A6E;
    --esasa-success: #3E8E4F;
    --esasa-warning: #D69A2D;
    --esasa-danger: #C64B3C;
    --esasa-text: #1B2620;

    /* Misma familia verde-caña usada en la pantalla de login */
    --cane-mid-1: #123B24;
    --cane-mid-2: #1E5C38;
    --cane-glow: #2E7D4F;
}

:root {
    --bs-primary: var(--esasa-primary);
    --bs-success: var(--esasa-success);
    --bs-warning: var(--esasa-warning);
    --bs-danger: var(--esasa-danger);
    --bs-link-color: var(--esasa-primary-dark);
}

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

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

.topbar {
    background: linear-gradient(90deg, var(--cane-mid-1), var(--cane-mid-2));
}
.topbar .acento { color: #BFE6C9; }

.topbar .nav-link {
    position: relative;
    transition: color .15s ease;
}
.topbar .nav-link.active {
    color: #fff;
    font-weight: 600;
}
.topbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: -2px;
    height: 3px;
    border-radius: 2px;
    background: #BFE6C9;
}
@media (max-width: 991.98px) {
    .topbar .nav-link.active {
        background: rgba(255, 255, 255, .12);
        border-radius: 6px;
    }
    .topbar .nav-link.active::after { display: none; }
}

.btn-primary {
    --bs-btn-bg: var(--esasa-primary); --bs-btn-border-color: var(--esasa-primary);
    --bs-btn-hover-bg: var(--esasa-primary-dark); --bs-btn-hover-border-color: var(--esasa-primary-dark);
}

/* ============================================
   MODO OSCURO — contraste real, no solo el toggle.
   Bootstrap cambia sus propios componentes con
   data-bs-theme="dark", pero nuestro fondo/tarjetas
   personalizados necesitan su propia versión oscura.
   ============================================ */
[data-bs-theme="dark"] {
    --esasa-bg: #10241A;
    --esasa-card: #17301F;
    --esasa-border: #2A4A34;
    --esasa-muted: #A7BBAC;
    --esasa-text: #EAF3EC;
}

[data-bs-theme="dark"] body {
    background: var(--esasa-bg);
    color: var(--esasa-text);
}

[data-bs-theme="dark"] .card {
    background: var(--esasa-card);
    color: var(--esasa-text);
}

[data-bs-theme="dark"] .card .text-muted,
[data-bs-theme="dark"] .text-muted {
    color: var(--esasa-muted) !important;
}

[data-bs-theme="dark"] .table {
    --bs-table-color: var(--esasa-text);
    --bs-table-bg: var(--esasa-card);
    --bs-table-border-color: var(--esasa-border);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #1C3A26;
    border-color: var(--esasa-border);
    color: var(--esasa-text);
}
[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--esasa-muted);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #1C3A26;
    color: var(--esasa-text);
    border-color: var(--esasa-primary);
}

[data-bs-theme="dark"] .form-label {
    color: var(--esasa-text);
}

[data-bs-theme="dark"] a {
    color: #6FCF97;
}

[data-bs-theme="dark"] .btn-outline-primary {
    color: #6FCF97;
    border-color: #6FCF97;
}
[data-bs-theme="dark"] .btn-outline-primary:hover {
    background: #6FCF97;
    color: #10241A;
}

[data-bs-theme="dark"] .alert-success {
    background-color: #163826; color: #BFF0D3; border-color: #245038;
}
[data-bs-theme="dark"] .alert-danger {
    background-color: #3A1B18; color: #F5C6C0; border-color: #5A2A24;
}
[data-bs-theme="dark"] .alert-warning {
    background-color: #3A2E12; color: #F3DDA0; border-color: #5A481E;
}

[data-bs-theme="dark"] .badge.bg-light {
    background-color: #24402F !important;
    color: var(--esasa-text) !important;
}

[data-bs-theme="dark"] .modal-content {
    background-color: var(--esasa-card);
    color: var(--esasa-text);
}

[data-bs-theme="dark"] hr {
    border-color: var(--esasa-border);
    opacity: .5;
}