/* Importar las nuevas fuentes de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Modak&family=Ramaraja&family=Roboto+Flex:wght@100..1000&family=Pacifico&family=Montserrat:wght@400;600&display=swap');
/* Se añaden Pacifico y Montserrat a la importación global */

/* Paleta de colores "Encanto Rosa" */
:root {
    --color-primary: #FFC0CB; /* Rosa Palo Suave */
    --color-secondary: #DDA0DD; /* Orquídea Pálida */
    --color-accent: #FF69B4; /* Rosa Chicle / Baussé */
    --color-text-dark: #4A4A4A;
    --color-background-light: #FDF0F5; /* Rosa muy pálido, casi blanco */
    --color-light-pink: #FFF0F5; /* Un rosa aún más suave */
    --color-error-bg: #ffe0e0;
    --color-error-text: #cc0000;
}

/* === body ===*/
body {
    font-family: 'Roboto Flex', sans-serif; /* Fuente general para el cuerpo en index.php */
    margin: 0;
    padding: 0;
    background-color: var(--color-background-light);
    color: var(--color-text-dark);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Estilos específicos para el body en login.php */
body.login-page { /* Nueva clase para el body de login.php */
    font-family: 'Montserrat', sans-serif;
    padding: 20px;
    box-sizing: border-box;
    /* justify-content y align-items ya están en el body general, no necesitamos duplicarlos aquí */
}
/* === termina body ===*/


/* === main-container y login-container ===*/
.main-container, .login-container {
    background-color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    max-width: 700px; /* Para main-container */
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-top: 60px;
    margin-bottom: 30px;
}

/* Estilos específicos para login-container (sobrescriben los generales) */
.login-container {
    padding: 30px; /* Menos padding que el main-container */
    max-width: 400px; /* Más estrecho que el main-container */
    box-shadow: 0 4px 8px rgba(0,0,0,.1); /* Sombra ligeramente diferente */
    text-align: center;
    /* margin-top: 60px; (ya está en el general, no es necesario duplicar a menos que sea diferente) */
}
/* === termina main-container y login-container ===*/


/* === logo-superpuesto ===*/
.logo-superpuesto {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px; /* Tamaño del logo */
    height: 120px;
    border-radius: 50%;
    overflow: hidden; /* Esto es crucial para que la imagen no se salga del círculo */
    border: 6px solid white; /* Borde blanco para destacarlo */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Sombra para el logo */
    background-color: var(--color-primary); /* Fondo del círculo del logo */
    display: flex; /* Usamos flexbox para centrar la imagen */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    z-index: 10;
}

.logo-superpuesto img {
    /* Ajustes para que la imagen abarque todo el círculo */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Esto es clave: la imagen cubrirá todo el espacio, recortando si es necesario */
    display: block;
}
/* === termina logo-superpuesto ===*/

/* === h1 (index.php) ===*/
h1 {
    font-family: 'Modak', cursive; /* Fuente fija para H1 */
    font-size: 4.8em;
    color: var(--color-accent);
    margin-top: 30px;
    margin-bottom: 5px; /* Reducido para acercar H2 */
    text-shadow: 2px 2px 3px rgba(0,0,0,0.1);
    line-height: 1.1;
    word-break: break-word;
    font-weight: normal; /* Asegura que Modak no sea más negrita de lo que ya es */
}
/* === termina h1 (index.php) ===*/

/* === h1 (login.php) ===*/
.login-container h1 { /* Específico para el h1 dentro del login-container */
    font-family: 'Modak', cursive; /* ¡Cambiado a Modak! */
    font-size: 3.5em; /* Puedes ajustar el tamaño si es necesario con Modak */
    color: var(--color-accent);
    margin-top: 30px; /* Ajuste el margen superior después del logo */
    margin-bottom: 10px; /* Menos margen para el subtítulo */
    line-height: 1;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.05);
    font-weight: normal; /* Modak ya es gruesa por sí misma */

    /* === curvatura del texto ===*/
    /* La curvatura es experimental y puede no ser soportada en todos los navegadores */
    /* Para un texto simple, no hay una propiedad CSS directa para curvarlo.
       Se logra con SVG, o más complejo con JavaScript.
       Para este caso, una "ligera curva" se puede simular con text-shadow y un poco de transformación,
       pero será una ilusión, no una curva real.
       Si quieres una curva real, necesitarías envolver cada letra en un span y transformarla individualmente,
       o usar SVG. Esto añade mucha complejidad.
       Como alternativa simple, podemos usar una transformación de perspectiva y rotación para una ilusión de curva.
       Esta es una aproximación: */
    /* transform: perspective(200px) rotateX(5deg); */
    /* text-shadow: 0 0 5px rgba(0,0,0,0.2); /* Sombra para dar volumen */
    /* Prueba esta línea, pero no siempre es el efecto deseado de "curva" */
    /* === termina curvatura del texto ===*/

    /* Otra alternativa más sutil para un efecto "curvado" (no real) */
    /* filter: url(#wavy); /* Requiere un filtro SVG definido en el HTML */
    /* Consideraremos que la "ligera curva" puede ser el diseño de la fuente Modak.
       Para una curva real, se recomienda SVG o JavaScript. */
}
/* === termina h1 (login.php) ===*/


/* === h2.subtitle (index.php) ===*/
h2.subtitle { /* Solo para index.php */
    font-family: 'Bagel Fat One', cursive; /* Fuente fija para H2 */
    font-size: 2.5em; /* Ajustado para Bagel Fat One, que es grande */
    color: var(--color-secondary);
    margin-top: -%; /* Subido un poco más para acercar al h1 */
   /* Ajustado para el botón */
    font-weight: normal; /* Bagel Fat One es audaz por naturaleza, esto no la hará más ligera */
}
/* === termina h2.subtitle (index.php) ===*/

/* === h2 (login.php) ===*/
#h2dashboard {font-family: 'Montserrat', sans-serif;
font-size:20px;
 color: var(--color-secondary);
}
.login-container h2 { /* Estilo específico para el h2 en login.php */
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8em;
    color: var(--color-secondary);
    margin-bottom: 25px;
    margin-top:;
    font-weight: 600; /* Un poco más de peso para Montserrat */
}
/* === termina h2 (login.php) ===*/


/* === p ===*/
p {
    font-family: 'Roboto Flex', sans-serif; /* Contenido general con Roboto Flex */
    font-size: 1.1em;
    color: var(--color-text-dark);
    margin-bottom: 25px;
    line-height: 1.6;
    text-align: justify;
}
/* === termina p ===*/

/* === content-section ===*/
.content-section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: var(--color-light-pink);
    border-radius: 8px;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.05);
}

.content-section h3 {
    font-family: 'Ramaraja', serif; /* Fuente fija para H3 */
    font-size: 2.5em;
    color: var(--color-accent);
    margin-bottom: 15px;
    line-height: 1.2;
    font-weight: normal; /* Ramaraja es pesada, pero esto la establecerá a su peso normal si no está ya en bold */
}

.content-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.content-section ul li {
    font-size: 1em;
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
    text-align: left;
}

.content-section ul li::before {
    content: '🌸';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-size: 1.2em;
    line-height: 1;
}
/* === termina content-section ===*/


/* === btn-iniciar-sesion ===*/
.btn-iniciar-sesion {
    background-color: var(--color-accent);
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.3em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Estilos para el botón de iniciar sesión reubicado */
.btn-iniciar-sesion-top {
    margin-top: 15px; /* Espacio después del subtítulo */
    margin-bottom: 30px; /* Espacio antes del contenido */
    display: inline-block;
}

.btn-iniciar-sesion:hover {
    background-color: var(--color-secondary);
    transform: translateY(-2px);
}
/* === termina btn-iniciar-sesion ===*/


/* === footer-visitante ===*/
.footer-visitante {
    margin-top: auto;
    padding: 15px;
    background-color: var(--color-primary);
    color: var(--color-text-dark);
    font-size: 0.85em;
    border-top: 1px solid var(--color-secondary);
    width: 100%;
    box-sizing: border-box;
}
/* === termina footer-visitante ===*/


/* === login-container form styles ===*/
.login-container label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--color-text-dark);
    text-align: left;
}
        
.login-container input[type="text"], 
.login-container input[type="password"] {
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}
        
.login-container input[type="submit"] {
    background-color: var(--color-accent);
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    width: 100%;
    transition: background-color 0.3s ease;
}
        
.login-container input[type="submit"]:hover {
    background-color: var(--color-secondary);
}
        
.error {
    background-color: var(--color-error-bg);
    color: var(--color-error-text);
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    text-align: center;
    border: 1px solid var(--color-error-text);
}
/* === termina login-container form styles ===*/


/* === Responsive adjustments ===*/
@media (max-width: 768px) {
    .main-container, .login-container {
        padding: 30px;
    }
    h1 { /* general h1 */
        font-size: 3.8em;
    }
    .login-container h1 { /* login specific h1 */
        font-size: 3em; /* Ajuste para login h1 en responsive */
    }
    h2.subtitle { /* index h2 */
        font-size: 2em;
    }
    .login-container h2 { /* login h2 */
        font-size: 1.8em; /* Ajuste para login h2 en responsive */
    }
    .content-section h3 {
        font-size: 2em;
    }
    .logo-superpuesto {
        width: 100px;
        height: 100px;
        top: -50px;
        border: 5px solid white;
    }
    .btn-iniciar-sesion {
        font-size: 1.1em;
        padding: 12px 25px;
    }
    p {
        font-size: 1em;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .main-container, .login-container {
        padding: 20px;
        margin-top: 50px;
    }
    h1 { /* general h1 */
        font-size: 2.8em;
    }
    .login-container h1 { /* login specific h1 */
        font-size: 2em; /* Ajuste para login h1 en responsive */
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    h2.subtitle { /* index h2 */
        font-size: 1.8em;
    }
    .login-container h2 { /* login h2 */
        font-size: 1.5em;
        margin-top: -100px;/* Ajuste para login h2 en responsive */
    }
    .content-section h3 {
        font-size: 1.8em;
    }
    .logo-superpuesto {
        width: 80px;
        height: 80px;
        top: -40px;
        border: 4px solid white;
    }
    .btn-iniciar-sesion {
        font-size: 1em;
        padding: 10px 20px;
    }
}
/* === termina Responsive adjustments ===*/