/* public_html/css/global_styles.css */

/* Variables CSS Globales */
:root {
    --color-primario: #007bff;          /* Azul vibrante */
    --color-secundario: #6c757d;        /* Gris para texto secundario */
    --color-fondo-claro: #f8f9fa;       /* Gris claro para fondos */
    --color-fondo-oscuro: #343a40;      /* Gris oscuro para fallback/overlay */
    --color-tarjeta: #ffffff;           /* Blanco para el contenedor del formulario */
    --sombra: 0 4px 15px rgba(0,0,0,0.2);/* Sombra más pronunciada */
    --borde-input: #ced4da;             /* Borde suave para inputs */
    --transicion-rapida: 0.3s ease;     /* Transición para hover y estados */
}

/* --- ESTILOS DEL BODY (GLOBALES para todas las páginas con fondo y overlay) --- */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente moderna */
    margin: 0;
    padding: 0;
    color: #333; /* Color de texto general */
    min-height: 100vh; /* Asegura que el body ocupe al menos toda la altura de la ventana *//* public_html/css/global_styles.css */

/* Variables CSS Globales (Asegúrate de que estas sean las variables DEFINITIVAS para todo tu sitio) */
:root {
    --color-primario: #007bff;          /* Azul vibrante */
    --color-secundario: #6c757d;        /* Gris para texto secundario */
    --color-fondo-claro: #f8f9fa;       /* Gris claro para fondos */
    --color-fondo-oscuro: #343a40;      /* Gris oscuro para fallback/overlay */
    --color-tarjeta: #ffffff;           /* Blanco para el contenedor del formulario */
    --sombra: 0 4px 15px rgba(0,0,0,0.2);/* Sombra más pronunciada */
    --borde-input: #ced4da;             /* Borde suave para inputs */
    --transicion-rapida: 0.3s ease;     /* Transición para hover y estados */
}

/* --- Estilos para el body con imagen de fondo y overlay (GLOBALES) --- */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente moderna */
    margin: 0;
    padding: 0;
    color: #333; /* Color de texto general */
    min-height: 100vh; /* Asegura que ocupe toda la altura de la ventana */

    /* ESTILOS DE LA IMAGEN DE FONDO (COPIA Y PEGA ESTO TAL CUAL) */
    background: var(--color-fondo-oscuro) url('/imagenes/MODELO%20TAVI%20LINDO.jpg') no-repeat center center fixed;
    background-size: cover; /* La imagen cubre todo el fondo, escalándose si es necesario */
    position: relative; /* Necesario para el pseudo-elemento ::before (overlay) */
    overflow-x: hidden; /* Evita barra de desplazamiento horizontal */

    /* NOTA: Estas propiedades display: flex, align-items, justify-content
       centran el contenido del body. Si tu 'index.html' tiene un layout complejo
       (con header, footer, etc.), es mejor MANTENERLOS COMENTADOS.
       Si tu 'index.html' es simple y quieres que todo esté centrado, descoméntalos. */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
}

/* OVERLAY (CAPA SEMITRANSPARENTE) SOBRE LA IMAGEN DE FONDO */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Capa negra con 50% de opacidad */
    z-index: -1; /* Coloca el overlay detrás del contenido pero sobre la imagen */
}

/* --- ESTILOS GENERALES Y DE ELEMENTOS (FUSIONADOS DE TU INDEX.HTML Y MEJORAS) --- */

/* Contenedor principal (index.html) */
.container {
    max-width: 800px;
    margin: 20px auto; /* Centrado */
    background: var(--color-tarjeta);
    padding: 40px;
    border-radius: 12px; /* Redondeado mejorado */
    box-shadow: var(--sombra); /* Sombra mejorada */
    text-align: center;
    z-index: 1; /* Asegura que esté sobre el overlay */
    position: relative; /* Necesario para z-index */
}

/* Títulos */
h1, h2, h3 {
    text-align: center;
    color: var(--color-primario);
    margin-bottom: 10px;
}

h3 {
    color: #333;
}

p {
    font-size: 16px;
    margin-bottom: 20px;
}

/* Mensajes de bienvenida */
.welcome-message {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 30px;
}
.welcome-message span {
    font-weight: bold;
}

/* Grillas de tests y recursos */
.test-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.recursos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Tarjetas de test y recurso */
.test-card {
    background-color: #f1f3f5;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    transition: transform 0.2s, box-shadow 0.2s;
}
.test-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.recurso-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.recurso-card h4 {
    margin-top: 0;
    color: var(--color-primario);
}
.recurso-card .autor {
    font-size: 0.9em;
    font-style: italic;
    color: #6c757d;
    margin-bottom: 10px;
}
.recurso-card .descripcion {
    font-size: 0.95em;
    flex-grow: 1;
}

/* Botones */
button, .btn {
    display: block;
    width: 100%; /* Generalmente para botones de formulario, ajusta si es necesario */
    padding: 15px;
    border: none;
    border-radius: 8px;
    background-color: var(--color-primario);
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
    margin: 10px auto; /* Centrar botones si son 'block' */
}

button:hover, .btn:hover {
    background: #1d4ed8;
}

.btn-secondary {
    background-color: var(--color-secundario);
    margin-top: 15px;
    cursor: pointer;
}
.btn-secondary:hover {
    background-color: #5a6268;
}

.recurso-card .btn-recurso {
    margin-top: 15px;
    padding: 10px;
    font-size: 14px;
    background-color: #28a745;
}
.recurso-card .btn-recurso:hover {
    background-color: #218838;
}

/* Secciones adicionales */
.recursos-section {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.separador {
    height: 20px;
}

/* Inputs (estilos generales para todo el sitio, tomados de login/recuperar) */
input[type="text"],
input[type="email"],
input[type="password"] {
    width: 90%;
    padding: 12px;
    margin: 10px auto;
    border: 1px solid #ccc;
    border-radius: 12px;
    font-size: 16px;
    display: block;
    box-sizing: border-box;
    transition: 0.2s ease-in-out;
}

input:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 4px #2563eb33;
}

/* Estilos para Mensajes (para login/recuperar, etc.) */
.msg {
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
    padding: 12px;
    border-radius: 8px;
    display: none; /* Oculto por defecto, se muestra con JS */
    opacity: 0;
    transition: opacity 0.3s ease, height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
    height: 0;
    overflow: hidden;
}

.msg.visible {
    display: block;
    opacity: 1;
    height: auto;
}

.msg.error {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}

.msg.success {
    color: #28a745;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

/* Media Queries para Responsividad (Generales para todo el sitio) */
@media screen and (max-width: 600px) {
    .container {
        margin: 20px;
        padding: 20px;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"] {
        width: 100%;
    }
}


    /* ESTILOS DE LA IMAGEN DE FONDO */
    /* Asegúrate de que esta ruta sea CORRECTA en Hostinger.
       Si tu imagen está en public_html/imagenes/MODELO TAVI LINDO.jpg, esta ruta es la correcta. */
    background: var(--color-fondo-oscuro) url('/imagenes/MODELO%20TAVI%20LINDO.jpg') no-repeat center center fixed;
    background-size: cover; /* La imagen cubre todo el fondo */
    position: relative; /* Necesario para el overlay */
    overflow-x: hidden; /* Evita barra de desplazamiento horizontal */

    /* NOTA IMPORTANTE: Estas propiedades centran todo el contenido del body.
       Si tu página tiene un layout complejo (barra de navegación, pie de página, contenido no centrado),
       DEBES MANTENERLAS COMENTADAS. Si es una página de formulario simple que quieres centrar, puedes descomentarlas. */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
}

/* OVERLAY (capa semitransparente) sobre la imagen de fondo */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Capa negra con 50% de opacidad */
    z-index: -1; /* Detrás del contenido pero sobre la imagen */
}

/* --- ESTILOS DE CONTENEDORES Y ELEMENTOS (GLOBALES) --- */

/* Contenedor principal de formularios (login, recuperar, etc.) */
.container {
    max-width: 450px; /* Ancho típico para formularios */
    margin: 50px auto; /* Centrar formularios */
    background: var(--color-tarjeta);
    padding: 40px;
    border-radius: 12px;
    box-shadow: var(--sombra);
    text-align: center;
    z-index: 1; /* Asegura que esté sobre el overlay */
    position: relative;
    box-sizing: border-box; /* Incluye padding en el ancho/alto */
}

/* Ajustes para el contenedor de Panel Principal si es más ancho */
.container.panel-principal {
    max-width: 800px; /* Ancho específico de tu index.html */
    margin: 20px auto; /* Margen de tu index.html */
    padding: 40px;
}

/* Títulos */
h1, h2, h3 {
    text-align: center;
    color: var(--color-primario);
    margin-bottom: 10px;
}
h3 { /* Color específico para h3 si es diferente */
    color: #333;
}

p {
    font-size: 16px;
    margin-bottom: 20px;
}

/* Mensajes de bienvenida (del index.html) */
.welcome-message {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 30px;
}
.welcome-message span {
    font-weight: bold;
}

/* Grupos de formulario */
.form-group {
    margin-bottom: 25px;
    text-align: left;
}

/* Etiquetas */
label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-secundario); /* Color para labels */
    font-size: 15px;
}

/* Inputs de texto, email, y contraseña */
input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--borde-input);
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 16px;
    color: var(--color-secundario);
    transition: 0.2s ease-in-out;
}

input:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 4px #2563eb33;
}

/* Botones (general) */
button, .btn {
    display: block; /* Para que ocupen todo el ancho por defecto */
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 8px;
    background-color: var(--color-primario);
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color var(--transicion-rapida);
}

button:hover, .btn:hover {
    background-color: #0056b3;
}

/* Botones secundarios (como cerrar sesión) */
.btn-secondary {
    background-color: var(--color-secundario);
    margin-top: 15px;
}
.btn-secondary:hover {
    background-color: #5a6268;
}

/* Enlaces de formularios (como "¿Olvidaste tu contraseña?") */
.form-link {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.5;
}
.form-link p {
    margin: 5px 0;
}
.form-link a {
    color: var(--color-primario);
    text-decoration: none;
    transition: color var(--transicion-rapida);
}
.form-link a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Estilos para Mensajes (para login/recuperar, etc.) */
.msg {
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
    padding: 12px;
    border-radius: 8px;
    display: none; /* Oculto por defecto, se muestra con JS */
    opacity: 0;
    transition: opacity var(--transicion-rapida), height var(--transicion-rapida), padding var(--transicion-rapida), margin var(--transicion-rapida);
    height: 0;
    overflow: hidden;
}

.msg.visible {
    display: block;
    opacity: 1;
    height: auto;
}
.msg.error {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}
.msg.success {
    color: #28a745;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

/* Grillas de tests y recursos */
.test-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.test-card {
    background-color: #f1f3f5;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    transition: transform 0.2s, box-shadow 0.2s;
}
.test-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.recursos-section {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.recursos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
.recurso-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.recurso-card h4 {
    margin-top: 0;
    color: var(--color-primario);
}
.recurso-card .autor {
    font-size: 0.9em;
    font-style: italic;
    color: #6c757d;
    margin-bottom: 10px;
}
.recurso-card .descripcion {
    font-size: 0.95em;
    flex-grow: 1;
}
.recurso-card .btn-recurso {
    margin-top: 15px;
    padding: 10px;
    font-size: 14px;
    background-color: #28a745;
}
.recurso-card .btn-recurso:hover {
    background-color: #218838;
}

.separador {
    height: 20px;
}

/* Responsive adjustments (Globales) */
@media screen and (max-width: 600px) {
    .container {
        margin: 20px;
        padding: 20px;
    }
    .container.panel-principal { /* Ajuste para el panel principal en móvil si aplica */
        margin: 10px;
        padding: 15px;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"] {
        width: 100%;
    }
    button, .btn {
        font-size: 16px;
        padding: 12px;
    }
    .test-grid, .recursos-grid {
        grid-template-columns: 1fr; /* Una columna en móvil */
    }
}