/**
 * Sistema de Aplicación de Instrumento Vocacional FITECMA
 * Módulo: Estilos del Panel de Administración (Glassmorphism)
 * Ubicación: /assets/css/admin.css
 * @author    Dr. Daniel Olegario León Ruiz
 * @version   2.0.0
 * @since     20 de marzo de 2026
 */

 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Poppins:wght@400;500;600&display=swap');

 /* ==========================================================================
    Variables Globales y Reset
    ========================================================================== */
 :root {
     /* Paleta UMSNH & Gradientes */
     --bg-color-1: #1e293b; /* Slate muy oscuro para contraste admin */
     --bg-color-2: #334155; 
     --bg-color-3: #0f172a; 
     --bg-color-4: #0b2341; /* Azul UMSNH profundo */
 
     /* Variables Glassmorphism */
     --glass-bg: rgba(255, 255, 255, 0.15); /* Más oscuro/transparente para modo admin */
     --glass-bg-hover: rgba(255, 255, 255, 0.25);
     --glass-border: rgba(255, 255, 255, 0.2);
     --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
     --glass-blur: blur(16px);
 
     /* Colores UI */
     --color-umsnh-dorado: #c9a050;
     --color-umsnh-dorado-hover: #e3bc6e;
     --color-blanco: #ffffff;
     --color-texto-claro: #f8fafc;
     --color-texto-mutado: #cbd5e1;
     --color-error: #ef4444;
     --color-exito: #10b981;
     
     --fuente-titulos: 'Montserrat', sans-serif;
     --fuente-cuerpo: 'Poppins', sans-serif;
     --radio-borde: 16px;
     --transicion-suave: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 body {
     font-family: var(--fuente-cuerpo);
     color: var(--color-texto-claro);
     line-height: 1.6;
     min-height: 100vh;
     
     /* Fondo oscuro animado para el área de administración */
     background: linear-gradient(-45deg, var(--bg-color-1), var(--bg-color-2), var(--bg-color-3), var(--bg-color-4));
     background-size: 400% 400%;
     animation: gradientBG 20s ease infinite;
 }
 
 @keyframes gradientBG {
     0% { background-position: 0% 50%; }
     50% { background-position: 100% 50%; }
     100% { background-position: 0% 50%; }
 }
 
 /* ==========================================================================
    Utilidades Globales Admin
    ========================================================================== */
 .alerta-error {
     background: rgba(239, 68, 68, 0.2);
     backdrop-filter: blur(8px);
     color: #fca5a5;
     padding: 1rem;
     border: 1px solid rgba(239, 68, 68, 0.4);
     border-radius: 8px;
     margin-bottom: 1.5rem;
     font-weight: 500;
     text-align: center;
 }
 
 /* ==========================================================================
    Pantalla de Login Administrativo (login.php)
    ========================================================================== */
 .body-login {
     display: flex;
     justify-content: center;
     align-items: center;
     padding: clamp(1rem, 4vw, 2rem);
 }
 
 .login-wrapper {
     width: 100%;
     max-width: 450px;
     animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }
 
 @keyframes slideUpFade {
     0% { opacity: 0; transform: translateY(30px); }
     100% { opacity: 1; transform: translateY(0); }
 }
 
 .login-container {
     background: var(--glass-bg);
     backdrop-filter: var(--glass-blur);
     -webkit-backdrop-filter: var(--glass-blur);
     border: 1px solid var(--glass-border);
     border-radius: 24px;
     padding: clamp(2rem, 5vw, 3.5rem);
     box-shadow: var(--glass-shadow);
     border-top: 5px solid var(--color-umsnh-dorado);
 }
 
 .login-header {
     text-align: center;
     margin-bottom: 2rem;
 }
 
 .login-logo {
     width: clamp(70px, 15vw, 90px);
     margin-bottom: 1rem;
     filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
 }
 
 .login-header h1 {
     font-family: var(--fuente-titulos);
     font-size: clamp(1.4rem, 4vw, 1.8rem);
     color: var(--color-blanco);
     margin-bottom: 0.3rem;
 }
 
 .login-header p {
     font-size: 0.95rem;
     color: var(--color-umsnh-dorado);
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: 500;
 }
 
 /* Formulario de Login */
 .form-login .form-control {
     margin-bottom: 1.5rem;
     display: flex;
     flex-direction: column;
 }
 
 .form-login label {
     font-family: var(--fuente-titulos);
     font-size: 0.9rem;
     margin-bottom: 0.5rem;
     color: var(--color-texto-claro);
     font-weight: 500;
 }
 
 .form-login input {
     width: 100%;
     padding: 0.85rem 1rem;
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 10px;
     font-family: var(--fuente-cuerpo);
     font-size: 1rem;
     color: var(--color-blanco);
     transition: var(--transicion-suave);
 }
 
 .form-login input::placeholder {
     color: rgba(255, 255, 255, 0.4);
 }
 
 .form-login input:focus {
     outline: none;
     background: rgba(255, 255, 255, 0.15);
     border-color: var(--color-umsnh-dorado);
     box-shadow: 0 0 0 3px rgba(201, 160, 80, 0.2);
 }
 
 .btn-login {
     width: 100%;
     padding: 1rem;
     background: linear-gradient(135deg, var(--color-umsnh-dorado), #a6813b);
     color: var(--bg-color-4);
     font-family: var(--fuente-titulos);
     font-weight: 700;
     font-size: 1.1rem;
     text-transform: uppercase;
     border: none;
     border-radius: 10px;
     cursor: pointer;
     transition: var(--transicion-suave);
     box-shadow: 0 4px 15px rgba(201, 160, 80, 0.3);
     margin-top: 0.5rem;
 }
 
 .btn-login:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(201, 160, 80, 0.5);
     background: linear-gradient(135deg, var(--color-umsnh-dorado-hover), var(--color-umsnh-dorado));
 }
 
 .login-footer {
     text-align: center;
     margin-top: 2rem;
     padding-top: 1.5rem;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .link-volver {
     color: var(--color-texto-mutado);
     text-decoration: none;
     font-size: 0.9rem;
     transition: var(--transicion-suave);
 }
 
 .link-volver:hover {
     color: var(--color-umsnh-dorado);
 }
 
 /* ==========================================================================
    Estructura General del Dashboard (Preparación)
    ========================================================================== */
 .admin-layout {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     padding: clamp(1rem, 3vw, 2rem);
     gap: 1.5rem;
     max-width: 1400px;
     margin: 0 auto;
 }
 
 .admin-header-nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 1rem;
     padding: 1.2rem 2rem;
     background: var(--glass-bg);
     backdrop-filter: var(--glass-blur);
     border: 1px solid var(--glass-border);
     border-radius: 16px;
     box-shadow: var(--glass-shadow);
 }
 
 .admin-header-nav h2 {
     font-family: var(--fuente-titulos);
     color: var(--color-umsnh-dorado);
     font-size: clamp(1.2rem, 3vw, 1.5rem);
 }
 
 .admin-info-user {
     display: flex;
     align-items: center;
     gap: 1rem;
     font-size: 0.9rem;
 }
 
 .btn-logout {
     background: rgba(239, 68, 68, 0.2);
     color: #fca5a5;
     border: 1px solid rgba(239, 68, 68, 0.4);
     padding: 0.5rem 1rem;
     border-radius: 8px;
     text-decoration: none;
     font-family: var(--fuente-titulos);
     font-size: 0.85rem;
     transition: var(--transicion-suave);
 }
 
 .btn-logout:hover {
     background: rgba(239, 68, 68, 0.4);
     color: var(--color-blanco);
 }
 
 /* ==========================================================================
    Tarjetas y Tablas Glassmorphism (Para dashboard.php e individual.php)
    ========================================================================== */
 .glass-card {
     background: var(--glass-bg);
     backdrop-filter: var(--glass-blur);
     border: 1px solid var(--glass-border);
     border-radius: 16px;
     padding: clamp(1.2rem, 3vw, 2rem);
     box-shadow: var(--glass-shadow);
 }
 
 /* Contenedor responsivo para evitar que las tablas rompan el diseño en móviles */
 .table-responsive {
     width: 100%;
     overflow-x: auto;
     border-radius: 12px;
 }
 
 .glass-table {
     width: 100%;
     border-collapse: collapse;
     min-width: 800px; /* Asegura que no se aplaste el contenido; el scroll lo maneja el padre */
 }
 
 .glass-table th, 
 .glass-table td {
     padding: 1rem;
     text-align: left;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .glass-table th {
     background: rgba(0, 0, 0, 0.2);
     font-family: var(--fuente-titulos);
     color: var(--color-umsnh-dorado);
     font-weight: 600;
     font-size: 0.95rem;
     letter-spacing: 0.5px;
 }
 
 .glass-table tr {
     transition: var(--transicion-suave);
 }
 
 .glass-table tr:hover {
     background: rgba(255, 255, 255, 0.05);
 }
 
 .glass-table td {
     font-size: 0.9rem;
     color: var(--color-texto-mutado);
 }
 
 /* Etiquetas de estado (Afinidad, Perfil) */
 .badge {
     padding: 0.3rem 0.8rem;
     border-radius: 20px;
     font-size: 0.8rem;
     font-weight: 600;
     font-family: var(--fuente-titulos);
     display: inline-block;
 }
 
 .badge-alta { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.3); }
 .badge-buena { background: rgba(59, 130, 246, 0.2); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.3); }
 .badge-media { background: rgba(245, 158, 11, 0.2); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.3); }
 .badge-baja { background: rgba(239, 68, 68, 0.2); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); }
 
 /* ==========================================================================
    Botones de Acción Admin
    ========================================================================== */
 .btn-action {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.5rem 1rem;
     background: rgba(255, 255, 255, 0.1);
     color: var(--color-blanco);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 8px;
     text-decoration: none;
     font-size: 0.85rem;
     font-family: var(--fuente-titulos);
     transition: var(--transicion-suave);
     cursor: pointer;
 }
 
 .btn-action:hover {
     background: rgba(255, 255, 255, 0.2);
     border-color: var(--color-umsnh-dorado);
     color: var(--color-umsnh-dorado);
 }