/* Header principal */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: 50px;
    padding: 10px 20px;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

/* Parte blanca superior izquierda */
header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10%;
    height: 100%;
    background-color: white;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Parte azul inferior derecha */
header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 203%;
    height: 100%;
    background-color: #002f6c; /* Azul oscuro */
    clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 19% 100%)
}

  /* Asegurar que el contenido del header esté por encima */
header * {
    position: relative;
    z-index: 1;
}

.hd1 > span {
    margin: 0 25px 0 0 !important;
}

.bnv {
    color: white !important; 
    font-size: 1rem !important;
    font-weight: bold;
}

.bnvU {
    color: #FF632D !important; 
    font-size: 1rem !important; 
    font-weight: bold !important;
}

.topBar_span-visita {
    color: #6c83ab !important;
}

.icon {
    font-size: xxx-large !important; /* Hereda el tamaño del h1 */
    vertical-align: middle !important; /* Alinea con el texto */
}

/* Logo a la izquierda */
.logo-icon img {
    height: 30px;
}

/* Barra naranja debajo del header */
.barra-naranja {
    background-color: #FF632D; /* Color de fondo naranja */
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80px;
}

/* Logo dentro de la barra */
#logo {
    display: flex;
    align-items: center;
}

#logo img {
    height: 30px;
}

/* Contenedor de navegación */
.primary-menu {
    display: flex;
    align-items: center;
}

/* Contenedor de los elementos de la lista */
.menu-container {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0px;
}

/* Estilos de las listas*/
/* Asegurar que el <li> tenga el mismo tamaño que el <a> */
.menu-item {
    display: flex;
    align-items: center;
    padding: 0;
    position: relative;
}

/* Línea divisora entre los elementos */
.menu-item:not(:first-child) {
    border-right: 2px solid white; /* Línea divisoria blanca */
}

/* Línea divisora antes del primer elemento */
.menu-item:first-child {
    border-left: 2px solid white; /* Línea blanca al inicio */
    border-right: 2px solid white; /* Línea divisoria con el segundo elemento */
    padding-left: 1px; /* Espacio para que no se pegue el texto */
}

/* Diseño de los botones */
/* Hacer que el <a> ocupe todo el espacio disponible */
.menu-link {
    color: white;
    font-size: 1rem;
    text-decoration: none;
    padding: 12px 20px; /* Espaciado interno */
    background-color: #FF632D;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Para que el <a> abarque todo el <li> */
    height: 100%; /* Ocupe toda la altura */
    min-width: 120px; /* Evita que el primer botón sea demasiado pequeño */
}


/* Efecto hover */
.menu-link:hover {
    background-color: #002f6c;

}

/* Ajustes para el icono */
.icono {
    font-size: 1.2rem;
    margin-left: 8px;
}

.logo-home { 
    position: fixed !important; 
    width: 250px !important; 
    height: auto !important; 
    z-index: 99 !important; 
    top: 1.3% !important; 
}

.text-h {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.text-i {
    font-size:  1.2rem;
    font-weight: bolder;
    letter-spacing: 1px;
    text-transform: uppercase;
}

::selection {
    background-color: #FF632D; /* Color de fondo amarillo */
    color: white; /* Texto en negro */
    font-weight: bold;
  }