/* Variables de color de estisos.css para unificación */
:root {
    --color-primary: #6A0DAD; /* Morado: Títulos, Bordes */
    --color-secondary: #FF4500; /* Naranja Fuerte: Botones, Enlaces (hover) */
    --color-accent: #32CD32; /* Verde Limón: Resaltado, Fondo de tabla header */
    --color-text-light: #F0F8FF; /* Azul claro (texto claro para fondos oscuros) */
    --color-text-dark: #333; /* Gris oscuro (texto oscuro para fondos claros) */
    --color-background: #f4f4f9; /* Fondo de página sutil */

    /* Conservo la variable de cesio por si se usa en el HTML con este CSS */
    --color-form-background: white; 
}

/* Estilos Generales (body de estisos.css) */
body {
    font-family: Arial, sans-serif;
    background-color: var(--color-background); /* Fondo sutil */
    color: var(--color-text-dark);
    margin: 20px; /* Margen general en lugar de centrado absoluto */
    height: auto; /* Removido vh y centrado */
    display: block;
    background-size: initial;
    background-position: initial;
    background-attachment: initial;
}

/* Título (h1 de estisos.css) */
h1 {
    color: var(--color-primary); /* Morado */
    text-align: center;
    border-bottom: 3px solid var(--color-accent); /* Línea verde */
    padding-bottom: 10px;
    margin-bottom: 25px;
    font-size: 32px; /* Un poco más grande para el título principal */
}

/* Se elimina el estilo 'div' que era un contenedor específico del formulario de login de cesio,
   y se estiliza directamente el 'form' como en estisos.css */

/* Estilos de Formularios (f_*.html, E_*.php, C_alumnos2.php de estisos.css) */
form {
    width: 60%;
    margin: 20px auto;
    padding: 30px;
    background-color: var(--color-form-background); /* Fondo blanco */
    border: 1px solid var(--color-primary); /* Borde Morado */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    text-align: left; /* Alineación del formulario de estisos */
}

/* Etiquetas y Campos de Input (combinando ambos) */
label {
    display: block;
    text-align: left;
    margin-top: 15px;
    color: var(--color-text-dark); /* Color más oscuro para el texto de la etiqueta */
    font-weight: bold;
}

input[type="text"], input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px; /* Un poco más sutil que 5px */
    box-sizing: border-box; 
    display: inline-block; /* Estilo de estisos */
}

/* Botón principal (Submit/.boton) - Estilo de estisos.css */
input[type="submit"], .boton {
    background-color: var(--color-secondary); /* Naranja Fuerte */
    color: white;
    padding: 10px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s, transform 0.1s;
    text-transform: uppercase;
    width: auto; /* Dejamos el ancho por defecto de estisos, no 100% */
    display: inline-block; /* Para permitir varios botones en una línea */
}

input[type="submit"]:hover, .boton:hover {
    background-color: #FF6347; /* Naranja ligeramente más claro */
    transform: translateY(-2px); /* Efecto de elevación de estisos */
    box-shadow: none; /* Quitamos la sombra interna de cesio */
}

/* Botón Mostrar/Ocultar Contraseña (se mantiene el estilo de cesio, pero con colores de estisos) */
button[type="button"] {
    background-color: var(--color-accent); /* Verde Limón */
    color: var(--color-text-dark);
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 5px;
    transition: background-color 0.3s;
}

button[type="button"]:hover {
    background-color: #50e850; /* Verde Limón ligeramente más claro */
}


/* --- Estilos para la Barra de Navegación Principal (.main-menu) --- */
/* Estilo ciberpunk/neón de estisos.css */

.main-menu {
    /* Fondo Morado Oscuro para la barra (de estisos.css) */
    background-color: #380064; /* Un morado muy oscuro */
    padding: 10px 0; /* Menos padding que cesio para un look más compacto */
    margin-bottom: 40px; /* Separación de estisos.css */
    /* Sombra con brillo principal Morado (de estisos.css) */
    box-shadow: 0 0 15px var(--color-primary), inset 0 0 30px var(--color-primary); 
    border-radius: 8px;
    
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    display: block; /* Vuelve a ser un bloque normal */
    position: static; /* Quitamos el 'sticky' de cesio */
    z-index: 1000; 
}

.main-menu ul {
    list-style: none;
    display: flex;
    justify-content: center; /* Centrado horizontal */
    gap: 40px; /* Espacio entre elementos de estisos.css */
    margin: 0;
    padding: 0;
}

.main-menu li {
    margin: 0; 
    padding: 0;
}

/* Estilo de los enlaces (Texto Verde Neón de estisos.css) */
.main-menu ul li a {
    /* Color de texto en Verde Limón */
    color: var(--color-accent); 
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    /* Efecto de brillo de texto en Verde Limón */
    text-shadow: 0 0 10px var(--color-accent), 0 0 20px var(--color-accent);
    transition: color 0.3s ease, text-shadow 0.3s ease;
    padding: 5px 10px;
    border-radius: 5px;
    text-transform: initial; /* Quitamos uppercase */
    display: inline-block;
}

/* Efecto Hover (al pasar el ratón) (Naranja Fuerte Neón de estisos.css) */
.main-menu ul li a:hover {
    /* Color Naranja Fuerte al pasar el ratón */
    color: var(--color-text-light); 
    /* Brillo de texto en Naranja Fuerte */
    text-shadow: 0 0 10px var(--color-secondary), 0 0 20px var(--color-secondary);
    /* Fondo semi-transparente de Naranja Fuerte */
    background-color: rgba(255, 69, 0, 0.2); 
    transform: none; 
    box-shadow: none;
}

/* Estilos de enlaces generales (manteniendo el color Morado con Brillo de estisos.css) */
a {
    display: inline-block;
    margin-bottom: 20px;
    color: var(--color-primary); 
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0 0 8px var(--color-primary), 0 0 16px var(--color-primary);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

a:hover {
    color: var(--color-secondary); 
    text-shadow: 0 0 12px var(--color-secondary), 0 0 24px var(--color-secondary);
}

/* Se elimina el estilo de margin-top para elementos no-menu */