/* ==========================================================================
   VARIABLES GLOBALES (Design Tokens)
   ========================================================================== */
:root {
    --itam-green: #005953;
    --itam-green-hover: #00423d;
    --itam-green-alpha: rgba(0, 89, 83, 0.1);
    --itam-dark: #1f2937;
    --itam-light-bg: #f8f9fa;
}

/* ==========================================================================
   ESTILOS GENERALES
   ========================================================================== */
body {
    background-color: var(--itam-light-bg);
    color: var(--itam-dark);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   COMPONENTES REUTILIZABLES (Clases de Utilidad ITAM)
   ========================================================================== */
.bg-itam {
    background-color: var(--itam-green) !important;
}

.text-itam {
    color: var(--itam-green) !important;
}

.btn-itam {
    background-color: var(--itam-green);
    color: white;
    border: none;
    transition: background-color 0.2s ease-in-out;
}

.btn-itam:hover {
    background-color: var(--itam-green-hover);
    color: white;
}

.nav-link-itam {
    color: white;
    opacity: 0.9;
    transition: opacity 0.2s, color 0.2s;
}

.nav-link-itam:hover {
    opacity: 1;
    color: #ffc107; 
}

/* Tarjetas y contenedores específicos */
.card-login {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.norma-icon {
    font-size: 1.5rem;
    color: var(--itam-green);
    background-color: var(--itam-green-alpha);
    padding: 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Selectores compartidos para la futura página de repositorio */
.badge-category {
    background-color: var(--itam-green-alpha);
    color: var(--itam-green);
    font-weight: 500;
}