/* 
   ============================================
   IMPORTACIÓN DE FUENTES
   ============================================ 
*/
@import url('https://fonts.googleapis.com/css?family=Poppins');

/* 
   ============================================
   RESET Y ESTILOS BASE
   ============================================ 
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background: #f6f5f7;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    height: 100vh;
    margin: -20px 0 50px;
}

/* 
   ============================================
   BARRA DE NAVEGACIÓN (ACTUALIZADA PARA COINCIDIR)
   ============================================ 
*/
/* ===========================
   BARRA DE NAVEGACIÓN
   =========================== */
/* Contenedor de la barra superior fija con fondo degradado y sombra */
.navbar {
  background: linear-gradient(135deg, #024C8C 0%, #0F7BD9 100%);
  color: white;
  padding: 0px 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(2, 76, 140, 0.15);
}


/* Contenedor flexible para los elementos de navegación */
.nav-container {
    display: flex;               /* Activa flexbox */
    justify-content: space-between; /* Espacio entre logo y links */
    align-items: center;         /* Centrado vertical */
    max-width: 1200px;          /* Ancho máximo */
    margin: 0 auto;             /* Centrado horizontal */
    padding: 0 20px;            /* Espacio interno horizontal */
}

/* Estilos del logo/texto ASTRA */
.nav-logo {
    font-size: 1.5rem;          /* Tamaño de fuente */
    font-weight: bold;          /* Texto en negrita */
    text-decoration: none;      /* Sin subrayado */
    color: white;               /* Color blanco */
    display: flex;              /* Para alinear imagen y texto */
    align-items: center;        /* Centrado vertical */
    margin-right: auto;         /* Empuja los links a la derecha */
    gap: 10px;                  /* Espacio entre imagen y texto */
}

/* Estilos de la imagen del logo */
.logo-image {
    height: 50px;               /* Altura fija */
    width: auto;                /* Ancho proporcional */
}

.nav-logo img {
    height: 50px;               /* Altura fija */
    width: auto;                /* Ancho proporcional */
    display: block;             /* Comportamiento de bloque */
    opacity: 0.9;      /* Ligera transparencia */
    
    /* Efecto de sombra para dar profundidad */
    filter:  
        drop-shadow(0 0 15px #ffffff)
        drop-shadow(0 0 30px #88c3ef)
        drop-shadow(0 0 45px #69afdd)
        drop-shadow(0 0 60px #ffffff);
}

/* Contenedor de los links de navegación */
.nav-links {
    display: flex;              /* Disposición en línea */
    list-style: none;           /* Sin viñetas */
    gap: 20px;                  /* Espacio entre links */
}

/* Estilos de los enlaces de navegación */
.nav-links a {
    color: white;               /* Color blanco */
    text-decoration: none;      /* Sin subrayado */
    transition: color 0.3s;     /* Transición suave para hover */
    font-weight: 500;           /* Grosor de fuente */
    font-size: 20px;            /* Tamaño de fuente */
}

/* Efecto hover para los links */
.nav-links a:hover {
    color: #71b7e6;             /* Color azul claro al pasar mouse */
}
/* Estilos de los enlaces de navegación */
.nav-links a {
    color: white;               
    text-decoration: none;      
    transition: color 0.3s;     
    font-weight: 500;           
    font-size: 20px;            
    position: relative;   /* Necesario para ubicar la línea debajo */
}

/* Línea animada debajo de los enlaces */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;                /* Al inicio no se ve */
    height: 2px;             /* Grosor de la línea */
    bottom: -5px;            /* Un poco debajo del texto */
    left: 0;
    background-color: #71b7e6;  /* Mismo color del hover */
    transition: width 0.3s;     /* Animación */
}

/* Al pasar el mouse la línea se expande */
.nav-links a:hover {
    color: #71b7e6;
}

.nav-links a:hover::after {
    width: 100%;             /* Se extiende a todo el ancho */
}

/* 
   ============================================
   DISEÑO RESPONSIVE (TABLETS)
   ============================================ 
*/
@media (max-width: 768px) {
    .nav-container {
        flex-direction: row;     /* Mantiene disposición horizontal */
        padding: 0 15px;         /* Reduce espaciado */
    }
    
    .nav-links {
        gap: 12px;               /* Reduce espacio entre enlaces */
    }
    
    .nav-links a {
        font-size: 16px;         /* Reduce tamaño de fuente */
    }
}

/* ==================== ESTILOS BÁSICOS PARA TEXTOS ==================== */

/* Estilos para encabezados h1 */
h1 {
    font-weight: bold; /* Texto en negrita */
    margin: 0; /* Sin margen exterior */
}

/* Estilos para encabezados h2 */
h2 {
    text-align: center; /* Centrado horizontal */
}

/* Estilos para párrafos */
p {
    font-size: 14px; /* Tamaño de fuente */
    font-weight: 100; /* Grosor de fuente (light) */
    line-height: 20px; /* Altura de línea */
    letter-spacing: 0.5px; /* Espaciado entre letras */
    margin: 20px 0 30px; /* Margen superior e inferior */
}

/* Estilos para elementos span */
span {
    font-size: 14px; /* Tamaño de fuente pequeño */
}

/* Estilos para enlaces */
a {
    color: #333; /* Color de texto gris oscuro */
    font-size: 14px; /* Tamaño de fuente */
    text-decoration: none; /* Sin subrayado */
    margin: 15px 0; /* Margen superior e inferior */
}

.formulario .inicio .input input:focus,
.formulario .inicio .input input:valid {

	border-color: #024C8C;       /* Cambia color del borde */

}

/* ==================== ESTILOS PARA BOTONES ==================== */

/* Estilos base para botones */
button {
    border-radius: 20px;
    border: 1px solid #D98B0F;
    background-color: #D98B0F;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    padding: 12px 45px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s ease; /* Cambiado a 'all' para animar todas las propiedades */
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Efecto hover para botones normales */
button:not(.alternativo):hover {
    background-color: #C47A0D; /* Color naranja más oscuro */
    transform: translateY(-2px); /* Efecto de levitación */
    box-shadow: 0 4px 8px rgba(217, 139, 15, 0.3); /* Sombra sutil */
}

/* Efecto active para botones normales */
button:not(.alternativo):active {
    transform: translateY(0);
    box-shadow: none;
}

/* Variante alternativa de botón */
button.alternativo {
    background-color: transparent;
    border-color: #FFFFFF;
}

/* Efecto hover para botones alternativos */
button.alternativo:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Fondo blanco semi-transparente */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
}

/* Efecto active para botones alternativos */
button.alternativo:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Efecto de "onda" al hacer clic (opcional) */
button::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10.01%) no-repeat 50%;
    transform: scale(10,10);
    opacity: 0;
    transition: transform .5s, opacity 1s;
}

button:active::after {
    transform: scale(0,0);
    opacity: 0.3;
    transition: 0s;
}



/* ==================== ESTILOS PARA FORMULARIOS ==================== */

/* Estilos base para formularios */
form {
    background-color: #FFFFFF; /* Fondo blanco */
    display: flex; /* Usa flexbox para layout */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    flex-direction: column; /* Disposición en columna */
    padding: 0 50px; /* Relleno interno lateral */
    height: 100%; /* Altura completa */
    text-align: center; /* Texto centrado */
}

/* Estilos para campos de entrada */
input {
    height: 45px;
    width: 100%;
    outline: none;
    border-radius: 5px;
    border: 1px solid #ccc; /* Borde gris por defecto */
    padding-left: 15px;
    margin: 8px 0;
    font-size: 16px;
    border-bottom-width: 2px;
    transition: all 0.3s ease; /* Transición para todos los cambios */
    background-color: #f8f9fa; /* Color de fondo claro */
}

/* Estilo cuando el campo está enfocado (seleccionado) */
input:focus {
    border-color: #024C8C; /* Borde azul cuando está enfocado */
    box-shadow: 0 0 0 2px rgba(2, 76, 140, 0.2); /* Sombra sutil para mejor feedback */
}

/* Estilo cuando el campo contiene un valor válido */
input:valid {
    border-color: #28a745; /* Borde verde cuando es válido (opcional) */
}

/* Estilo para campos requeridos que no están completados */
input:invalid:not(:placeholder-shown) {
    border-color: #dc3545; /* Borde rojo cuando es inválido (opcional) */
}

/* ==================== CONTENEDOR PRINCIPAL ==================== */

/* Contenedor principal del formulario de login */
.contenedor {
    background-color: #fff; /* Fondo blanco */
    border-radius: 10px; /* Esquinas redondeadas */
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); /* Sombra */
    position: relative; /* Posicionamiento relativo */
    overflow: hidden; /* Oculta contenido que sobresale */
    width: 968px; /* Ancho fijo */
    max-width: 100%; /* Máximo ancho permitido */
    min-height: 480px; /* Altura mínima */
    margin-top: 150px; /* Margen superior */
}

/* ==================== CONTENEDORES DE FORMULARIOS ==================== */

/* Estilos base para contenedores de formularios */
.formulario {
    position: absolute; /* Posicionamiento absoluto */
    top: 0; /* Alineado arriba */
    height: 100%; /* Altura completa */
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out; /* Transiciones suaves */
}

/* Formulario de inicio de sesión */
.inicio {
    left: 0; /* Alineado a la izquierda */
    width: 50%; /* Mitad del ancho */
    z-index: 2; /* Nivel de apilamiento */
}

/* Efecto cuando el panel está activo (se mueve a la derecha) */
.contenedor.panel-activo .inicio {
    transform: translateX(100%); /* Desplazamiento horizontal */
}

/* Formulario de registro */
.registro {
    left: 0; /* Alineado a la izquierda */
    width: 50%; /* Mitad del ancho */
    opacity: 0; /* Inicialmente invisible */
    z-index: 1; /* Nivel de apilamiento */
}

/* Efecto cuando el panel está activo (se muestra) */
.contenedor.panel-activo .registro {
    transform: translateX(100%); /* Desplazamiento horizontal */
    opacity: 1; /* Hace visible */
    z-index: 5; /* Nivel de apilamiento superior */
    animation: mostrar 0.6s ease-in-out; /* Animación personalizada */
}

/* Animación para mostrar el formulario de registro */
@keyframes mostrar {
    0%, 49.99% {
        opacity: 0; /* Invisible */
        z-index: 1; /* Nivel de apilamiento bajo */
    }
    
    50%, 100% {
        opacity: 1; /* Visible */
        z-index: 5; /* Nivel de apilamiento alto */
    }
}

/* ==================== OVERLAY (FONDO DE TRANSICIÓN) ==================== */

/* Contenedor del overlay (fondo animado) */
.cambiador {
    position: absolute; /* Posicionamiento absoluto */
    top: 0; /* Alineado arriba */
    left: 50%; /* Centrado horizontal */
    width: 50%; /* Mitad del ancho */
    height: 100%; /* Altura completa */
    overflow: hidden; /* Oculta contenido que sobresale */
    transition: transform 0.6s ease-in-out; /* Transición suave */
    z-index: 100; /* Nivel de apilamiento alto */
}

/* Efecto cuando el panel está activo (se mueve a la izquierda) */
.contenedor.panel-activo .cambiador {
    transform: translateX(-100%); /* Desplazamiento horizontal */
}

/* Fondo del overlay (gradiente animado) */
.fondo {
    background: #43b9e7; /* Color de fondo base */
    background: -webkit-linear-gradient(to right, #024C8C, #2B9DFF); /* Gradiente para Webkit */
    background: linear-gradient(to right,  #024C8C, #2B9DFF); /* Gradiente moderno */
    background-repeat: no-repeat; /* No repetir el fondo */
    background-size: cover; /* Cubrir todo el espacio */
    background-position: 0 0; /* Posición inicial */
    color: #FFFFFF; /* Texto blanco */
    position: relative; /* Posicionamiento relativo */
    left: -100%; /* Posición inicial fuera de vista */
    height: 100%; /* Altura completa */
    width: 200%; /* Doble ancho para efecto de desplazamiento */
    transform: translateX(0); /* Transformación inicial */
    transition: transform 0.6s ease-in-out; /* Transición suave */
}

/* Efecto cuando el panel está activo (desplaza el fondo) */
.contenedor.panel-activo .fondo {
    transform: translateX(50%); /* Desplazamiento horizontal */
}

/* ==================== PANELES DEL OVERLAY ==================== */

/* Estilos base para los paneles del overlay */
.panel {
    position: absolute; /* Posicionamiento absoluto */
    display: flex; /* Usa flexbox para layout */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    flex-direction: column; /* Disposición en columna */
    padding: 0 40px; /* Relleno interno lateral */
    text-align: center; /* Texto centrado */
    top: 0; /* Alineado arriba */
    height: 100%; /* Altura completa */
    width: 50%; /* Mitad del ancho */
    transform: translateX(0); /* Transformación inicial */
    transition: transform 0.6s ease-in-out; /* Transición suave */
}

/* Panel izquierdo (para alumnos) */
.izquierda {
    transform: translateX(-20%); /* Posición inicial desplazada */
}

/* Efecto cuando el panel está activo (vuelve a posición normal) */
.contenedor.panel-activo .izquierda {
    transform: translateX(0); /* Sin desplazamiento */
}

/* Panel derecho (para maestros) */
.derecha {
    right: 0; /* Alineado a la derecha */
    transform: translateX(0); /* Sin desplazamiento */
}

/* Efecto cuando el panel está activo (se desplaza ligeramente) */
.contenedor.panel-activo .derecha {
    transform: translateX(20%); /* Desplazamiento horizontal */
}

/* ==================== ICONOS SOCIALES ==================== */

/* Contenedor de iconos sociales */
.redes {
    margin: 20px 0; /* Margen superior e inferior */
}

/* Estilos para los enlaces de redes sociales */
.redes a {
    border: 1px solid #DDDDDD; /* Borde gris claro */
    border-radius: 50%; /* Forma circular */
    display: inline-flex; /* Contenedor flexible en línea */
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    margin: 0 10px; /* Margen entre iconos */
    height: 50px; /* Altura fija */
    width: 50px; /* Ancho fijo */
    background-color: #fff; /* Fondo blanco */
    color: #024C8C; /* Color del icono (azul) */
    font-size: 22px; /* Tamaño del icono */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transiciones suaves */
}

/* Efecto hover para iconos sociales */
.redes a:hover {
    background-color: #024C8C; /* Fondo azul */
    color: #fff; /* Icono blanco */
}

/* ==================== PIE DE PÁGINA ==================== */

/* Estilos para el pie de página */
footer {
    background-color: #222; /* Fondo oscuro */
    color: #fff; /* Texto blanco */
    font-size: 14px; /* Tamaño de fuente */
    bottom: 0; /* Alineado abajo */
    position: fixed; /* Posición fija */
    left: 0; /* Alineado a la izquierda */
    right: 0; /* Alineado a la derecha */
    text-align: center; /* Texto centrado */
    z-index: 999; /* Nivel de apilamiento muy alto */
}

/* Párrafos dentro del footer */
footer p {
    margin: 10px 0; /* Margen superior e inferior */
}

/* Iconos dentro del footer */
footer i {
    color: rgb(13, 0, 255); /* Color azul para iconos */
}

/* Enlaces dentro del footer */
footer a {
    color: #3c97bf; /* Color azul claro */
    text-decoration: none; /* Sin subrayado */
}


/* ==================== RESPONSIVE: que se vea igual en móvil (stack) ==================== */
/* Móvil: alternar Inicio/Maestros sin overlay animado */
@media (max-width: 768px){
  /* separa el contenido de la navbar fija */
  body{
    margin: 0 !important;
    padding-top: calc(var(--nav-h, 60px) + env(safe-area-inset-top, 0px)) !important;
  }

  .contenedor{
    width: min(560px, 94vw);
    margin: calc(var(--nav-h, 60px) + 16px) auto 20px !important;
    overflow: visible !important;
    display: block;
    min-height: unset;
  }

  /* desactiva overlay en móvil */
  .cambiador, .fondo, .panel{ display: none !important; }

  /* ambos formularios en flujo normal */
  .formulario{
    position: static !important;
    top: auto !important; left: auto !important;
    width: 100% !important; height: auto !important;
    transform: none !important; opacity: 1 !important;
    padding: 22px 16px !important;
  }
  .inicio, .registro{ width: 100% !important; }

  /* ESTO ES LO CLAVE: alternar con .panel-activo */
  .registro{ display: none !important; }                   /* por defecto: Inicio visible */
  .contenedor.panel-activo .registro{ display: block !important; } /* al activar: Maestros visible */
  .contenedor.panel-activo .inicio{ display: none !important; }    /* y ocultar Inicio */

  button{ width: 100%; padding: 12px 20px; }
  footer{ position: static !important; margin-top: 12px; }
}