body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    background-color: #f8f9fa; /* Un gris muy sutil tipo app moderna */
}

/* Ocultar el logo de texto viejo si subís imagen */
#header h1 {
    margin: 0;
}

/* Hacer que los inputs no se vean del año 2005 */
input[type="text"], 
input[type="password"], 
select, 
textarea {
    border-radius: 6px !important;
    border: 1px solid #ced4da !important;
    padding: 0.375rem 0.75rem !important;
}

input[type="text"]:focus, 
textarea:focus {
    border-color: #86b7fe !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Limpieza de la estructura vieja */
#container {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    border: none !important;
    box-shadow: none !important;
}

#header {
    height: auto !important;
    padding: 20px 0 !important;
    background: #ffffff !important;
    border-bottom: 2px solid #0d6efd !important;
}

/* Modernizar la barra de navegación */
#nav {
    background: #212529 !important; /* Gris oscuro moderno */
    border-radius: 8px !important;
    margin-top: 20px !important;
    padding: 5px !important;
}

#nav li a {
    color: #fff !important;
    font-weight: 500 !important;
    border: none !important;
    background: none !important;
}

#nav li a:hover {
    color: #0d6efd !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 5px;
}

/* Forzar que las tablas viejas no rompan el celu */
table {
    width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
}

/* Botones con estilo Bootstrap */
.button, input[type="submit"], input[type="button"] {
    background-color: #0d6efd !important;
    color: white !important;
    border: none !important;
    padding: 10px 25px !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    transition: 0.3s;
}

.button:hover {
    background-color: #0b5ed7 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

/* ========================================= */
/* AJUSTE DEL HEADER: ALINEACIÓN PERFECTA    */
/* ========================================= */

#header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    padding: 20px 15px !important; /* Sacamos el padding de 50px que empujaba todo */
    min-height: 100px !important; /* Altura mínima para que respire */
    background: #ffffff !important;
    border-bottom: 2px solid #0d6efd !important;
}

/* El logo centrado sin que lo empujen */
#header a#logo {
    display: block !important;
    margin: 0 !important;
}

#header img {
    max-width: 250px !important;
    height: auto !important;
}

/* Links de sesión a la derecha y centrados verticalmente con el logo */
#header div.pull-right,
#header p {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important; /* Lo mandamos a la mitad */
    transform: translateY(-50%) !important; /* Lo sube exactamente su propia mitad para un centrado perfecto */
    margin: 0 !important;
    font-size: 14px !important;
    color: #6c757d !important;
}

/* Estilo para los enlaces de sesión */
#header div.pull-right a,
#header p a {
    color: #0d6efd !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    transition: 0.2s !important;
}

#header div.pull-right a:hover,
#header p a:hover {
    background-color: #e9ecef !important;
}

/* Ocultar barra vieja */
#nav {
    display: none !important;
}