/**
 * Sistema de Aplicación de Instrumento Vocacional FITECMA
 * Módulo: Estilos del Formulario Público (Wizard Glassmorphism)
 * Ubicación: /assets/css/instrumento.css
 * @author    Dr. Daniel Olegario León Ruiz
 * @version   3.1.0
 * @since     20 de marzo de 2026
 */

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

 /* ==========================================================================
    Variables Globales y Reset
    ========================================================================== */
 :root {
     /* Paleta UMSNH y Fondos */
     --bg-color-1: #64748b; 
     --bg-color-2: #94a3b8; 
     --bg-color-3: #d1c1a5; 
     --bg-color-4: #475569; 
 
     /* Variables Glassmorphism */
     --glass-bg: rgba(255, 255, 255, 0.45);
     --glass-bg-hover: rgba(255, 255, 255, 0.6);
     --glass-border: rgba(255, 255, 255, 0.5);
     --glass-shadow: 0 8px 32px 0 rgba(11, 35, 65, 0.15);
     --glass-blur: blur(12px);
 
     /* Textos y acentos institucionales */
     --color-texto: #0f172a; 
     --color-texto-mutado: #334155;
     --color-primario: #0b2341;
     --color-umsnh-dorado: #c9a050;
     --color-error: #dc2626;
     
     --fuente-titulos: 'Montserrat', sans-serif;
     --fuente-cuerpo: 'Poppins', sans-serif;
     --radio-borde: 16px;
     --transicion-suave: all 0.4s 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);
     line-height: 1.6;
     padding: clamp(1rem, 3vw, 2rem);
     min-height: 100vh;
     
     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 15s ease infinite;
 }
 
 @keyframes gradientBG {
     0% { background-position: 0% 50%; }
     50% { background-position: 100% 50%; }
     100% { background-position: 0% 50%; }
 }
 
 /* ==========================================================================
    Clase Utilitaria Glassmorphism Principal
    ========================================================================== */
 .glass-panel {
     background: var(--glass-bg);
     backdrop-filter: var(--glass-blur);
     -webkit-backdrop-filter: var(--glass-blur);
     border: 1px solid var(--glass-border);
     border-radius: var(--radio-borde);
     box-shadow: var(--glass-shadow);
 }
 
 /* ==========================================================================
    Contenedores Estructurales y Logos
    ========================================================================== */
 .header-institucional {
     padding: clamp(1.5rem, 3vw, 2.5rem);
     max-width: 1200px;
     margin: 0 auto 2rem auto;
     border-top: 6px solid var(--color-umsnh-dorado);
 }
 
 .header-grid-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1.5rem;
 }
 
 .header-textos {
     flex: 1;
     text-align: center;
 }
 
 .logo-wrapper {
     flex-shrink: 0;
     width: clamp(100px, 15vw, 180px); 
     display: flex;
     justify-content: center;
 }
 
 .logo-animado {
     width: 100%;
     height: auto;
     filter: drop-shadow(0 10px 15px rgba(11, 35, 65, 0.4));
     animation: flotar 4s ease-in-out infinite;
     transition: var(--transicion-suave);
 }
 
 .logo-animado:hover {
     transform: scale(1.08);
     filter: drop-shadow(0 15px 25px rgba(201, 160, 80, 0.5));
 }
 
 @keyframes flotar {
     0% { transform: translateY(0px); }
     50% { transform: translateY(-10px); }
     100% { transform: translateY(0px); }
 }
 
 /* ==========================================================================
    Tipografía de Cabecera
    ========================================================================== */
 .header-textos h1 {
     font-family: var(--fuente-titulos);
     font-size: clamp(1.2rem, 3.5vw, 2rem); 
     color: var(--color-primario);
     margin-bottom: 0.5rem;
     font-weight: 800;
     text-shadow: 0 1px 2px rgba(255,255,255,0.8);
     text-transform: uppercase;
 }
 
 .header-textos h2 {
     font-family: var(--fuente-titulos);
     font-size: clamp(1rem, 2.5vw, 1.3rem);
     margin-bottom: 0.5rem;
     font-weight: 700;
     color: var(--color-texto);
 }
 
 .texto-dorado-brillante {
     font-family: var(--fuente-titulos);
     font-size: clamp(1rem, 2.5vw, 1.4rem);
     color: var(--color-umsnh-dorado);
     margin-bottom: 1rem;
     font-weight: 800;
     letter-spacing: 1px;
     text-shadow: 1px 1px 4px rgba(11, 35, 65, 0.8), 0 0 15px rgba(201, 160, 80, 0.3);
 }
 
 .header-textos p {
     font-family: var(--fuente-cuerpo);
     font-size: clamp(0.9rem, 2vw, 1.1rem);
     color: var(--color-texto);
 }
 
 .main-container {
     max-width: 1000px;
     margin: 0 auto;
 }
 
 /* ==========================================================================
    Barra de Progreso
    ========================================================================== */
 .progress-container {
     margin-bottom: 2rem;
     padding: 1rem 1.5rem;
     display: flex;
     flex-direction: column;
     gap: 0.8rem;
 }
 
 .progress-bar {
     height: 8px;
     background: linear-gradient(90deg, var(--color-umsnh-dorado), #e3bc6e);
     border-radius: 4px;
     transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
     box-shadow: 0 0 10px rgba(201, 160, 80, 0.5);
     width: 0%; 
 }
 
 .progress-text {
     font-size: 0.85rem;
     font-weight: 700;
     color: var(--color-primario);
     text-align: right;
     font-family: var(--fuente-titulos);
     text-transform: uppercase;
     letter-spacing: 1px;
 }
 
 /* ==========================================================================
    Animación del Wizard
    ========================================================================== */
 .wizard-step {
     display: none;
     animation: fadeSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }
 
 .wizard-step.step-active {
     display: block;
 }
 
 @keyframes fadeSlideUp {
     0% {
         opacity: 0;
         transform: translateY(30px);
     }
     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* ==========================================================================
    Alertas e Instrucciones Likert
    ========================================================================== */
 .alerta-error {
     background: rgba(254, 226, 226, 0.8);
     backdrop-filter: var(--glass-blur);
     color: var(--color-error);
     padding: 1.2rem;
     border: 1px solid rgba(239, 68, 68, 0.3);
     border-radius: 12px;
     margin-bottom: 2rem;
     font-weight: 600;
     text-align: center;
 }
 
 .instrucciones-box {
     padding: clamp(1.5rem, 4vw, 3rem);
 }
 
 .instrucciones-box h2 {
     font-family: var(--fuente-titulos);
     color: var(--color-primario);
     margin-bottom: 1.5rem;
     font-size: clamp(1.3rem, 3vw, 1.8rem);
     font-weight: 800;
 }
 
 .escala-leyenda {
     list-style-type: none;
     display: flex;
     flex-wrap: nowrap;
     justify-content: space-between;
     gap: clamp(0.5rem, 1vw, 1rem);
     margin-top: 2rem;
     padding-top: 1.5rem;
     border-top: 1px solid rgba(11, 35, 65, 0.1);
     overflow-x: auto;
     padding-bottom: 0.5rem;
 }
 
 .escala-leyenda li {
     font-size: clamp(0.8rem, 1.5vw, 0.9rem);
     background: rgba(255, 255, 255, 0.6);
     padding: 0.5rem 1rem;
     border-radius: 30px;
     border: 1px solid var(--glass-border);
     font-weight: 500;
     white-space: nowrap;
 }
 
 .escala-leyenda strong {
     color: var(--color-umsnh-dorado);
     font-weight: 800;
 }
 
 /* ==========================================================================
    Formulario - Elementos Estructurales
    ========================================================================== */
 .formulario-vocacional fieldset {
     border: none;
     padding: clamp(1.5rem, 4vw, 2.5rem);
     margin-bottom: 1rem;
 }
 
 .formulario-vocacional legend {
     background: var(--color-primario);
     font-family: var(--fuente-titulos);
     color: white;
     padding: 0.6rem 1.8rem;
     border-radius: 30px;
     font-weight: 600;
     font-size: 1.1rem;
     box-shadow: 0 4px 15px rgba(11, 35, 65, 0.3);
     transform: translateY(15px);
 }
 
 /* ==========================================================================
    Grid de Datos de Identificación
    ========================================================================== */
 .form-group-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 1.5rem;
     margin-top: 1rem;
 }
 
 .form-control {
     display: flex;
     flex-direction: column;
 }
 
 .form-control label {
     font-family: var(--fuente-titulos);
     font-weight: 600;
     margin-bottom: 0.5rem;
     color: var(--color-primario);
     font-size: 0.95rem;
 }
 
 .form-control input[type="text"],
 .form-control select {
     width: 100%;
     padding: 0.8rem 1rem;
     background: rgba(255, 255, 255, 0.6);
     border: 1px solid var(--glass-border);
     border-radius: 10px;
     font-size: 1rem;
     font-family: inherit;
     color: var(--color-texto);
     transition: var(--transicion-suave);
 }
 
 .form-control input[type="text"]:focus,
 .form-control select:focus {
     outline: none;
     background: rgba(255, 255, 255, 0.9);
     border-color: var(--color-umsnh-dorado);
     box-shadow: 0 0 0 4px rgba(201, 160, 80, 0.2);
 }
 
 /* ==========================================================================
    Preguntas y Escala Likert
    ========================================================================== */
 .preguntas-contenedor {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
     margin-top: 1rem;
 }
 
 .pregunta-item {
     background: rgba(255, 255, 255, 0.35);
     padding: clamp(1.2rem, 3vw, 1.8rem);
     border-radius: 12px;
     border: 1px solid var(--glass-border);
     transition: var(--transicion-suave);
 }
 
 .pregunta-item:hover {
     background: rgba(255, 255, 255, 0.55);
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(0,0,0,0.08);
 }
 
 .pregunta-texto {
     font-size: clamp(1rem, 2.5vw, 1.1rem);
     margin-bottom: 1.2rem;
     color: var(--color-primario);
     font-weight: 500;
 }
 
 .opciones-likert {
     display: flex;
     flex-wrap: wrap;
     gap: 0.8rem;
     justify-content: space-between;
 }
 
 .opciones-likert label {
     flex: 1;
     min-width: 50px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 0.8rem 0.5rem;
     background: rgba(255, 255, 255, 0.5);
     border: 1px solid var(--glass-border);
     border-radius: 10px;
     cursor: pointer;
     transition: var(--transicion-suave);
     font-weight: 700;
     color: var(--color-texto);
 }
 
 .opciones-likert label:hover {
     background: var(--color-primario);
     color: white;
     transform: scale(1.02);
 }
 
 .opciones-likert input[type="radio"] {
     margin-bottom: 0.6rem;
     transform: scale(1.3);
     cursor: pointer;
     accent-color: var(--color-umsnh-dorado);
 }
 
 .opciones-likert label:has(input[type="radio"]:checked) {
     background: var(--color-primario);
     color: white;
     border-color: var(--color-primario);
     box-shadow: 0 4px 12px rgba(11, 35, 65, 0.3);
 }
 
 /* ==========================================================================
    Botones de Navegación del Wizard
    ========================================================================== */
 .wizard-controls {
     align-items: center;
 }
 
 .btn-wizard {
     font-family: var(--fuente-titulos);
     font-size: clamp(0.95rem, 2.5vw, 1.1rem);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     border: none;
     border-radius: 30px;
     padding: 0.8rem 2rem;
     cursor: pointer;
     transition: var(--transicion-suave);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 }
 
 .btn-wizard:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
 .btn-wizard:active {
     transform: translateY(1px);
 }
 
 .btn-secondary {
     background: rgba(255, 255, 255, 0.6);
     color: var(--color-texto-mutado);
     border: 1px solid var(--glass-border);
 }
 
 .btn-secondary:hover {
     background: rgba(255, 255, 255, 0.9);
     color: var(--color-primario);
 }
 
 .btn-primary {
     background: var(--color-primario);
     color: white;
 }
 
 .btn-primary:hover {
     background: #081a30;
     box-shadow: 0 8px 20px rgba(11, 35, 65, 0.3);
 }
 
 .btn-submit {
     background: linear-gradient(135deg, var(--color-umsnh-dorado), #e3bc6e);
     color: var(--color-primario);
     box-shadow: 0 8px 25px rgba(201, 160, 80, 0.4);
 }
 
 .btn-submit:hover {
     box-shadow: 0 12px 30px rgba(201, 160, 80, 0.6);
 }
 
 /* ==========================================================================
    Ajustes para Móviles
    ========================================================================== */
 @media (max-width: 768px) {
     .header-grid-container {
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: center;
     }
     .header-textos {
         order: 3;
         width: 100%;
     }
     .logo-wrapper {
         width: 100px; /* Logos más pequeños en móvil */
     }
 }
 
 @media (max-width: 600px) {
     .wizard-controls {
         flex-direction: column-reverse; /* El botón principal queda arriba en móviles */
         gap: 1rem;
     }
     .btn-wizard {
         width: 100%;
         margin: 0 !important;
     }
 }

 .btn-admin-login {
    position: fixed;
    bottom: 25px;
    left: 25px;
    width: 45px; /* Ligeramente más pequeño y elegante */
    height: 45px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 4px 15px rgba(11, 35, 65, 0.2);
    transition: var(--transicion-suave);
    z-index: 1000;
    opacity: 0.4; /* Aún más sutil */
}

/* Control estricto del PNG de 200px */
.icono-login-img {
    width: 20px !important; 
    height: 20px !important;
    object-fit: contain;
    transition: var(--transicion-suave);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.btn-admin-login:hover {
    opacity: 1;
    transform: scale(1.1) translateY(-5px);
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 25px rgba(201, 160, 80, 0.5); 
    border-color: var(--color-umsnh-dorado);
}