/* ============================================================================
   CRESTON.CSS — Identidad visual de COOPECOCEIC R.L. / Creston School
   Sistema de Evaluación y Seguimiento del Desempeño Docente — TFG 00886

   Este archivo NO reemplaza a AdminLTE: lo sobrescribe puntualmente. Se carga siempre DESPUÉS de adminlte.min.css para que sus reglas tengan prioridad.
   Así, una actualización de la plantilla no borra la identidad institucional.

   Paleta oficial tomada de la Guía de Marca (documento de tema aprobado).
   ============================================================================ */

:root {
    --creston-azul: #3360a9;
    --creston-azul-oscuro: #274d85;
    --creston-naranja: #f08521;
    --creston-verde: #99cb4b;
    --creston-celeste: #029ebf;
    --creston-azul-alt: #0773b5;
    --creston-morado: #4a3e97;
    --creston-gris-claro: #f4f6f9;
    --creston-gris-borde: #dee2e6;
    --creston-gris-texto: #6c757d;
}

/* ---------- Tipografía (Guía de Marca) ----------------------------------
   Commissioner en títulos, Calibri en el cuerpo. Carlito es la alternativa
   libre y métricamente idéntica a Calibri, para equipos sin Office.        */
body {
    font-family: 'Calibri', 'Carlito', 'Segoe UI', sans-serif;
    font-size: 1rem;
}

h1, h2, h3, h4, h5, h6,
.brand-text, .card-title, .content-header h1 {
    font-family: 'Commissioner', 'Calibri', sans-serif;
    font-weight: 700;
}

/* ---------- Menú lateral ---------------------------------------------- */
.main-sidebar {
    background: linear-gradient(180deg, var(--creston-azul), var(--creston-azul-oscuro));
}

.brand-link {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.brand-text {
    color: #fff;
    font-size: 1rem;
    letter-spacing: 0.3px;
}

.brand-subtext {
    color: var(--creston-verde);
    font-size: 0.7rem;
    font-weight: 600;
    display: block;
    line-height: 1;
}

/* Ítem activo: fondo translúcido y barra naranja, igual que el prototipo. */
.nav-sidebar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border-left: 3px solid var(--creston-naranja);
    border-radius: 4px;
}

.nav-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.85);
    border-left: 3px solid transparent;
}

    .nav-sidebar .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.10);
        color: #fff;
    }

/* ---------- Barra superior -------------------------------------------- */
.main-header {
    border-bottom: 1px solid var(--creston-gris-borde);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.titulo-pantalla {
    font-weight: 700;
    color: var(--creston-azul);
    font-size: 1rem;
}

.enlace-salir {
    color: var(--creston-naranja) !important;
    font-weight: 600;
}

/* ---------- Área de contenido ----------------------------------------- */
.content-wrapper {
    background-color: var(--creston-gris-claro);
}

.card {
    border: 1px solid var(--creston-gris-borde);
    border-radius: 6px;
    box-shadow: none;
}

.card-header {
    border-bottom: 1px solid var(--creston-gris-borde);
    background-color: #fff;
}

.card-title {
    color: var(--creston-azul);
    font-size: 0.95rem;
}

/* ---------- Tablas ----------------------------------------------------- */
.table thead th {
    background-color: var(--creston-azul);
    color: #fff;
    font-weight: 600;
    border: none;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--creston-gris-claro);
}

/* ---------- Botones institucionales ------------------------------------ */
.btn-creston {
    background-color: var(--creston-azul);
    border-color: var(--creston-azul);
    color: #fff;
}

    .btn-creston:hover {
        background-color: var(--creston-azul-oscuro);
        border-color: var(--creston-azul-oscuro);
        color: #fff;
    }

.btn-creston-naranja {
    background-color: var(--creston-naranja);
    border-color: var(--creston-naranja);
    color: #fff;
}

    .btn-creston-naranja:hover {
        background-color: #d9741a;
        border-color: #d9741a;
        color: #fff;
    }

.btn-creston-verde {
    background-color: var(--creston-verde);
    border-color: var(--creston-verde);
    color: #fff;
}

    .btn-creston-verde:hover {
        background-color: #85b53f;
        border-color: #85b53f;
        color: #fff;
    }

/* Botones de acción en tablas: contorno institucional */
.btn-accion-editar {
    border-color: var(--creston-azul);
    color: var(--creston-azul);
    background-color: transparent;
}

    .btn-accion-editar:hover {
        background-color: var(--creston-azul);
        color: #fff;
    }

.btn-accion-desactivar {
    border-color: var(--creston-naranja);
    color: var(--creston-naranja);
    background-color: transparent;
}

    .btn-accion-desactivar:hover {
        background-color: var(--creston-naranja);
        color: #fff;
    }

.btn-accion-activar {
    border-color: var(--creston-verde);
    color: var(--creston-verde);
    background-color: transparent;
}

    .btn-accion-activar:hover {
        background-color: var(--creston-verde);
        color: #fff;
    }

/* ---------- Etiquetas de estado ---------------------------------------- */
.badge-creston-activo {
    background-color: var(--creston-verde);
    color: #fff;
}

.badge-creston-inactivo {
    background-color: var(--creston-gris-texto);
    color: #fff;
}

.badge-creston-conteo {
    background-color: var(--creston-celeste);
    color: #fff;
}

/* ---------- Indicadores del panel de inicio ---------------------------- */
.kpi-azul {
    background-color: var(--creston-azul);
}

.kpi-naranja {
    background-color: var(--creston-naranja);
}

.kpi-verde {
    background-color: var(--creston-verde);
}

.kpi-celeste {
    background-color: var(--creston-celeste);
}

/* ---------- Campo obligatorio (RNF-008, criterio 1) -------------------- */
.obligatorio::after {
    content: " *";
    color: #dc3545;
    font-weight: 700;
}