/* Título: Estilos Globales y de Componentes */

/* --- Base y Tipografía --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f7f7f9;
    /* IMPORTANTE para App-like: Evita el desplazamiento horizontal */
    overflow-x: hidden; 
    /* Base para un tamaño de fuente legible en móviles */
    font-size: 16px; 
}

/* ---------------------------------- */
/* 1. Estilos de la Landing Page (index.html) */
/* ---------------------------------- */

/* Hero Section: Fondo con gradiente */
.hero-section {
    /* Gradiente original: from #1e3a8a to #1d4ed8 */
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
    /* Altura mínima para que siempre se vea bien en cualquier móvil */
    padding: 40px 15px; /* Más padding en móviles para respirar */
    min-height: 40vh;
}

/* Feature Card Hover Effect */
.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    /* En móviles, las tarjetas deben ocupar todo el ancho para un mejor toque */
    width: 100%; 
    margin-bottom: 20px;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* CTA Button Hover Effect */
.cta-button {
    transition: background-color 0.3s ease, transform 0.3s ease;
    /* Asegura que el botón se expanda para fácil toque en móviles */
    width: 100%; 
    padding: 12px 0; /* Aumenta el área de toque vertical */
    font-size: 18px;
}

.cta-button:hover {
    background-color: #fcd34d; /* yellow-400 */
    transform: scale(1.05);
}

/* Imagen del menú en la sección hero (para asegurar el borde) */
.hero-section .menu-mockup {
    border-color: rgba(29, 78, 216, 0.5); /* blue-900/50 */
    /* En móviles, la imagen debe ser flexible pero no demasiado grande */
    max-width: 90%; 
    height: auto;
}

/* ---------------------------------- */
/* 2. Estilos de Formularios (login.html, registro.html) */
/* ---------------------------------- */

/* Tarjeta principal de formularios */
.form-card {
    /* IMPORTANTE: Elimina el ancho fijo para que ocupe todo el espacio en móvil */
    max-width: none; 
    margin: 20px 15px; /* Deja un pequeño margen lateral para que no toque los bordes */
    padding: 30px 20px; /* Asegura un buen padding interno */
    /* Estilos de sombra y borde del formulario */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* Sombra más suave en móvil */
    border: 1px solid #f3f4f6;
    border-radius: 8px; /* Bordes redondeados */
}

/* Inputs de formularios */
.form-input {
    width: 100%; /* El input debe ocupar todo el ancho del contenedor */
    box-sizing: border-box; /* Asegura que el padding no desborde el ancho */
    padding: 12px 10px; /* Mayor padding para facilitar la entrada táctil */
}

/* Botón de envío de formularios */
.submit-button {
    transition: background-color 0.15s;
    width: 100%; /* El botón debe ocupar todo el ancho */
    padding: 15px; /* Gran área de toque */
    font-size: 18px;
}

/* ---------------------------------- */
/* --- 3. MOBILE RESPONSIVENESS (Media Queries) --- */
/* ---------------------------------- */

/* 📱 Diseño para pantallas pequeñas (Mobile-First) */
/* Todo el CSS anterior ya está optimizado para móviles por defecto (Mobile-First) */


/* 💻 Diseño para Tabletas y PCs pequeños (Mínimo 640px) */
@media (min-width: 640px) {
    /* Hero Section: Aumenta la altura y el padding */
    .hero-section {
        min-height: 50vh;
        padding: 60px 20px;
    }

    /* Cards: Permite que las tarjetas se coloquen una al lado de la otra si el layout HTML lo permite */
    .feature-card {
        width: auto; /* El ancho vuelve a ser dictado por el layout del padre (por ejemplo, grid o flex) */
    }

    /* Botones: Vuelve al ancho automático, ya no necesita ser 100% */
    .cta-button, .submit-button {
        width: auto;
        padding: 12px 24px;
    }
}

/* 🖥️ Diseño para Escritorio (Mínimo 1024px) */
@media (min-width: 1024px) {
    /* Hero Section: Aumenta la altura para el diseño de escritorio */
    .hero-section {
        min-height: 60vh;
    }
    
    /* Formularios: Limita el ancho en escritorio para centrar mejor */
    .form-card {
        max-width: 420px; /* Por ejemplo, limita a un tamaño razonable */
        margin: 40px auto; /* Centrar horizontalmente */
    }

    /* Sombras: Vuelve a la sombra más fuerte original */
    .form-card {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
}