/* --- Variables optimizadas --- */
/* Definición de colores, transiciones y estilos reutilizables en todo el documento */
:root {
    --primary: #6c5ce7;
    --secondary: #00cec9;
    --dark: #2d3436;
    --blanco: #ffffff;
    --gris: #f9f9f9;

    /* Variable para manejar transiciones suaves de transformación, sombras y fondo */
    --trans: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;

    --shadow: 0 10px 30px rgba(0,0,0,0.1);
    --radio: 12px;
}

/* Reset */
/* Reinicio básico para asegurar que márgenes y rellenos no afecten el tamaño calculado */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

/* Base */
/* Configuración del cuerpo: fuente, fondo, color y optimización de renderizado de texto */
body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--gris);
    color: var(--dark);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

/* Transiciones globales */
/* Suavizado de cambios de estado para elementos interactivos */
a, button, input {
    transition: 0.2s ease;
}

/* Layout */
/* Contenedor principal que ocupa toda la pantalla y centra la tarjeta con un degradado */
.zona-acceso {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    padding: 20px;
}

/* Tarjeta */
/* Estilo del contenedor blanco del formulario con límites de ancho y bordes redondeados */
.tarjeta-acceso {
    background: var(--blanco);
    width: 100%;
    max-width: 380px;
    padding: 2.5rem;
    border-radius: var(--radio);
    box-shadow: var(--shadow);
    transition: var(--trans);
}

/* Hover tarjeta */
/* Efecto visual de elevación cuando el usuario pasa el mouse sobre la tarjeta */
.tarjeta-acceso:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* Header + espacios agrupados */
/* Gestión de márgenes inferiores para separar la cabecera y los campos de entrada */
.cabecera-acceso,
.grupo-campo {
    margin-bottom: 15px;
}

/* Alineación central del texto de bienvenida */
.cabecera-acceso {
    text-align: center;
}

/* Tamaño del título del formulario */
.cabecera-acceso h1 {
    font-size: 24px;
}

/* Inputs */
/* Eliminación de bordes por defecto en el contenedor del campo */
.grupo-campo {
    border: none;
}

/* Estilo para el texto explicativo opcional dentro de los campos */
.grupo-campo legend {
    font-size: 14px;
    margin-bottom: 10px;
}

/* Labels agrupados */
/* Estilo de las etiquetas de texto encima de los inputs */
.grupo-campo label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

/* Campo icono */
/* Contenedor flexible que agrupa el icono y el input con un borde personalizado */
.campo-icono {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
    transition: var(--trans);
}

/* Focus campo */
/* Resalte visual cuando el usuario hace clic o selecciona el campo de entrada */
.campo-icono:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.15);
}

/* Inputs internos */
/* Limpieza de estilos por defecto para el cuadro de texto dentro del contenedor con icono */
.campo-icono input {
    border: none;
    outline: none;
    width: 100%;
    padding-left: 10px;
}

/* Input activo */
/* Cambio sutil de color de fondo cuando el campo está seleccionado */
.campo-icono input:focus {
    background: #f4f6ff;
}

/* Botón */
/* Estilo principal del botón de envío: color primario, ancho total y puntero activo */
.boton-acceso {
    width: 100%;
    padding: 13px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    transition: var(--trans);
}

/* Estados botón agrupados */
/* Efectos de hover (elevación) y active (pulsación pequeña) para el botón */
.boton-acceso:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.boton-acceso:active {
    transform: scale(0.98);
}

/* Focus botón */
/* Indicador de accesibilidad para navegación mediante teclado en el botón */
.boton-acceso:focus-visible {
    outline: 3px solid rgba(108, 92, 231, 0.5);
    outline-offset: 3px;
}

/* Acciones */
/* Distribución de enlaces secundarios (olvido de contraseña o registro) */
.acciones-acceso {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-top: 20px;
}

/* Links */
/* Color y estilo para los enlaces dentro de la tarjeta */
.acciones-acceso a {
    color: var(--primary);
    text-decoration: none;
}

/* Estados links agrupados */
/* Efecto de subrayado y opacidad al interactuar con los enlaces */
.acciones-acceso a:hover,
.acciones-acceso a:focus,
.acciones-acceso a:active {
    text-decoration: underline;
    opacity: 0.8;
}

/* Accesibilidad global */
/* Estilo de foco visible universal para mejorar la navegación accesible */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Responsive */
/* Ajustes de espacio y tamaño de texto para pantallas móviles */
@media (max-width: 480px) {
    .tarjeta-acceso {
        padding: 1.8rem;
    }

    .cabecera-acceso h1 {
        font-size: 21px;
    }
}

/* Reduce motion */
/* Desactiva animaciones para usuarios que prefieren reducir el movimiento en el sistema */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
    
    /* lo mismo, Cosas extras que pueden dañar el diseño, esto solo esta para recordatorio */

/* 1 - Cambio de fondo en pantallas medianas */
@media (max-width: 1100px) {
    body {
        background-color: #f5f5f5;
    }
}

/* 2 - Espaciado de letras en h1 */
@media (max-width: 950px) {
    h1 {
        letter-spacing: 1px;
    }
}

/* 3 - Mayor interlineado en párrafos */
@media (max-width: 850px) {
    p {
        line-height: 1.8;
    }
}

/* 4 - Escala menor para tarjetas */
@media (max-width: 700px) {
    .tarjeta {
        transform: scale(0.98);
    }
}

/* 5 - Tamaño de fuente para inputs en móvil */
@media (max-width: 550px) {
    input {
        font-size: 14px;
    }
}

/* 6 - Botones más compactos en móvil */
@media (max-width: 420px) {
    button {
        padding: 8px;
    }
}

/* 7 - Títulos más pequeños en pantallas mínimas */
@media (max-width: 320px) {
    h1 {
        font-size: 1.5rem;
    }
}

/* 8 - Ancho máximo para pantallas muy grandes */
@media (min-width: 1300px) {
    body {
        max-width: 1300px;
        margin: auto;
    }
}

/* 9 - Fondo blanco en modo horizontal */
@media (orientation: landscape) {
    body {
        background-color: #ffffff;
    }
}

/* 10 - Soporte para modo de alto contraste */
@media (prefers-contrast: high) {
    body {
        background: black;
        color: white;
    }
}

/* EXTRA FINAL */

/* 11 - Configuración visual para modo oscuro del sistema */
@media (prefers-color-scheme: dark) {
    body {
        background: #111;
        color: #eee;
    }
}

/* 12 - Opacidad reducida en hover para dispositivos con mouse */
@media (hover: hover) {
    button:hover {
        opacity: 0.8;
    }
}

/* GRID OBLIGATORIO */
/* Estructura de cuadrícula de dos columnas */
.contenedor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
}