/* =====================================================================
   theme.css — Identidad visual del Aula Virtual
   Paleta: verde pizarra (principal) + ámbar tiza (acento)
   Tipografía: Fraunces (títulos, con carácter) + Inter (UI, funcional)
   Cargar DESPUÉS del CSS de Bootstrap para que estas reglas lo sobrescriban.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Paleta principal */
    --pizarra-900: #1B3A36;
    --pizarra-700: #23514C;
    --pizarra-600: #2C6560;
    --pizarra-500: #357A73;
    --pizarra-100: #E4EEEC;

    --tiza-500: #E8A33D;
    --tiza-600: #D68F27;
    --tiza-100: #FBEDD7;

    --tinta: #1F2A2E;
    --gris-texto: #5B6B6E;
    --fondo: #F6F7F5;
    --borde: #E1E6E4;

    /* Reasignar variables de Bootstrap a nuestra paleta */
    --bs-primary: var(--pizarra-600);
    --bs-primary-rgb: 44, 101, 96;
    --bs-body-bg: var(--fondo);
    --bs-body-color: var(--tinta);
    --bs-border-color: var(--borde);
    --bs-link-color: var(--pizarra-600);
    --bs-link-hover-color: var(--pizarra-700);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--fondo);
    color: var(--tinta);
}

h1, h2, h3, .h1, .h2, .h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--pizarra-900);
}

h4, h5, h6, .h4, .h5, .h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--pizarra-900);
}

.text-muted { color: var(--gris-texto) !important; }

/* ---------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------- */
.btn-primary {
    background-color: var(--pizarra-600);
    border-color: var(--pizarra-600);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--pizarra-700) !important;
    border-color: var(--pizarra-700) !important;
}
.btn-outline-primary {
    color: var(--pizarra-600);
    border-color: var(--pizarra-600);
}
.btn-outline-primary:hover {
    background-color: var(--pizarra-600);
    border-color: var(--pizarra-600);
}
.btn-warning {
    background-color: var(--tiza-500);
    border-color: var(--tiza-500);
    color: var(--tinta);
}
.btn-warning:hover {
    background-color: var(--tiza-600) !important;
    border-color: var(--tiza-600) !important;
    color: var(--tinta) !important;
}
.btn-outline-warning {
    color: var(--tiza-600);
    border-color: var(--tiza-500);
}
.btn-outline-warning:hover {
    background-color: var(--tiza-500);
    border-color: var(--tiza-500);
    color: var(--tinta);
}
.btn, .btn-sm { border-radius: 8px; font-weight: 500; }

/* ---------------------------------------------------------------------
   Tarjetas
   --------------------------------------------------------------------- */
.card {
    border: 1px solid var(--borde);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(27, 58, 54, 0.06), 0 1px 2px rgba(27, 58, 54, 0.04);
}
.card-header {
    background-color: #fff;
    border-bottom: 1px solid var(--borde);
    font-weight: 600;
    color: var(--pizarra-900);
    border-radius: 14px 14px 0 0 !important;
}

/* ---------------------------------------------------------------------
   Tablas
   --------------------------------------------------------------------- */
.table thead.table-light th {
    background-color: var(--pizarra-100);
    color: var(--pizarra-900);
    font-weight: 600;
    border-bottom: none;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
}
.table-hover tbody tr:hover { background-color: var(--pizarra-100); }

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */
.form-control, .form-select {
    border-radius: 8px;
    border-color: var(--borde);
}
.form-control:focus, .form-select:focus {
    border-color: var(--pizarra-500);
    box-shadow: 0 0 0 0.2rem rgba(53, 122, 115, 0.15);
}
.form-label { font-weight: 500; color: var(--pizarra-900); font-size: 0.92rem; }

/* ---------------------------------------------------------------------
   Badges
   --------------------------------------------------------------------- */
.badge.bg-success { background-color: var(--pizarra-600) !important; }
.badge.bg-primary { background-color: var(--pizarra-600) !important; }
.badge.bg-warning { background-color: var(--tiza-500) !important; color: var(--tinta) !important; }

/* ---------------------------------------------------------------------
   Pestañas (nav-tabs) y pills (nav-pills) — usadas en curso.php, cursos, etc.
   --------------------------------------------------------------------- */
.nav-pills .nav-link.active {
    background-color: var(--pizarra-600);
}
.nav-tabs { border-bottom-color: var(--borde); }
.nav-tabs .nav-link {
    color: var(--gris-texto);
}
.nav-tabs .nav-link:hover { border-color: transparent; color: var(--pizarra-700); }

/* ---------------------------------------------------------------------
   Alertas
   --------------------------------------------------------------------- */
.alert-success { background-color: var(--pizarra-100); color: var(--pizarra-900); border-color: var(--pizarra-500); }
.alert-info { background-color: #EAF3F6; color: #245566; border-color: #A9CBD6; }

/* ---------------------------------------------------------------------
   Breadcrumb
   --------------------------------------------------------------------- */
.breadcrumb { font-size: 0.9rem; }
.breadcrumb-item a { color: var(--pizarra-600); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   Login / registro: tarjeta central
   --------------------------------------------------------------------- */
.card.shadow-sm {
    box-shadow: 0 4px 16px rgba(27, 58, 54, 0.08) !important;
}

/* ---------------------------------------------------------------------
   Código (ej. código de inscripción, código de institución)
   --------------------------------------------------------------------- */
code {
    background-color: var(--tiza-100);
    color: var(--tiza-600);
    padding: 2px 6px;
    border-radius: 5px;
    font-weight: 600;
}