.fondoprincipal {
    background: 0% 0% / 50px 50px repeat repeating-radial-gradient(farthest-corner at 50% 50%, #ffffff00 6% 15%, #bf00ff80 13% 18%), linear-gradient(to top left, #bd0045ff 0%, #003694ff 100%);
    width: 100%;
    height: 100vh;
}
.fondoheader{
    background: rgba(20, 13, 114, 0.747);
    
    padding: 15px;
}
.borde{
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;  
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

}
.imagenlogo{
    width: 100px;
    height: 100px; 
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;  
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

}
.imagentrago{
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;  
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
} 
.textlink{
    text-decoration: none;
}
/* Asegúrate que este código esté en tu archivo styles.css o similar */
:root {
    --font-size-base: 16px;
    --color-texto: #333;
    --color-fondo: #fff;
    --color-fondo-secundario: #f4f4f4;
}
/* ... resto del CSS base ... */

/* Estilos de Tipografía Dinámica */
body {
    /* El tamaño de fuente base se hereda de la variable --font-size-base */
    font-size: var(--font-size-base); 
    color: var(--color-texto);
    background-color: var(--color-fondo);
    transition: background-color 0.3s, color 0.3s;
}

/* Estilos para Modos Claro y Oscuro */
.modo-claro {
    --color-texto: #333;
    --color-fondo: #fff;
}

.modo-oscuro {
    --color-texto: #eee; 
    --color-fondo: #121212; 
}
/* ... etc. ... */

/* Estilos de Impresión (@media print) */
@media print {
    /* Oculta los controles y encabezado al imprimir */
    #controles, header {
        display: none !important;
    }

    body, #contenido-principal {
        color: #000 !important;
        background-color: #fff !important;
        background-image: none !important;
        /* Puedes agregar un diseño distinto para el contenido si lo deseas */
        border: 1px solid #ddd;
        padding: 20px;
    }
}
 body {
            margin: 0;
            font-family: sans-serif;
        }

        /* --- PRIMERA BARRA (SUPERIOR) --- */
        .header-top {
            background-color: #343a40; /* Un color oscuro para la barra superior */
            padding: 8px 0;
            font-size: 0.9em;
        }

        .header-top .textlink {
            text-decoration: none;
            color: #f8f9fa; /* Color de texto claro */
            transition: color 0.3s;
        }

        .header-top .textlink:hover {
            color: #adb5bd; /* Color al pasar el mouse */
        }
        
        /* Ajuste para que los botones de accesibilidad no sean tan grandes en la barra */
        #controles .btn {
            padding: 0.2rem 0.5rem;
            font-size: 0.8rem;
        }

        /* --- SEGUNDA BARRA (PRINCIPAL) --- */
        .header-main {
            background-color: #f8f9fa; /* Fondo claro para la barra principal */
            padding: 15px 0;
            border-bottom: 1px solid #dee2e6;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .imagenlogo {
            max-height: 60px; /* Ajusta el tamaño del logo */
            width: auto;
        }
        
        /* Estilos para el menú de navegación de ejemplo */
        .main-nav a {
            color: #333;
            text-decoration: none;
            font-weight: bold;
            margin-left: 20px;
            font-size: 1.1em;
            transition: color 0.3s;
        }

        .main-nav a:hover {
            color: #007bff; /* Color azul al pasar el mouse */
        }