/* --- Estilos para el Header Principal --- */

.site-header {
    background-color: #2d3748; /* Color oscuro base (ajusta si main.css tiene otro) */
    padding: 1rem 0;
    color: #fff;
    border-bottom: 1px solid #4a5568; /* Borde sutil */
}

.header-nav {
    display: flex;
    justify-content: space-between; /* Logo a la izquierda, acciones a la derecha */
    align-items: center;
    /* Hereda el max-width y padding lateral de .container en main.css */
}

.logo a {
    color: #fff;
    text-decoration: none;
    font-size: 1.5em; /* Tamaño del logo */
    font-weight: bold;
}

.logo a:hover {
    color: #e2e8f0; /* Color ligeramente más claro al pasar el ratón */
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Espacio entre los botones */
}

/* Estilos base para los botones dentro del header */
.header-actions .button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem; 
    padding: 0.6rem 1.1rem; /* Padding ajustado */
    font-size: 0.95em;
    font-weight: 600; /* Semi-bold */
    line-height: 1.3;
    border: 1px solid transparent; /* Borde transparente por defecto */
    border-radius: 0.375rem; /* Redondeo */
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    color: #e2e8f0; /* Color de texto base para botones secundarios */
    background-color: transparent; /* Fondo transparente por defecto */
}

/* Estilo del botón primario (Búsqueda) */
.header-actions .button-primary {
    background-color: #4299e1; /* Azul */
    border-color: #4299e1;
    color: #fff; 
}

.header-actions .button-primary:hover {
    background-color: #3182ce;
    border-color: #3182ce;
    color: #fff;
}

/* Estilo del botón secundario (Comprobación, potencialmente otros) */
.header-actions .button-secondary {
    background-color: #4a5568; /* Gris oscuro/azulado */
    border-color: #4a5568;
    color: #fff;
}

.header-actions .button-secondary:hover {
    background-color: #2d3748; /* Ligeramente más oscuro */
    border-color: #2d3748;
    color: #fff;
}

/* Estilo para el botón activo */
.header-actions .button.active {
    background-color: #63b3ed; /* Azul más claro para indicar activo */
    border-color: #63b3ed;
    color: #1a202c; /* Texto oscuro para contraste */
    font-weight: bold;
    /* Podríamos quitar el hover o hacerlo sutil para el activo */
}

/* Ajustes para el SVG dentro de los botones */
.header-actions .button svg {
    width: 1.1em;
    height: 1.1em;
    vertical-align: middle;
    /* fill: currentColor; */ /* Comentario corregido */
    /* Puede necesitar ajustes específicos si el SVG tiene su propio 'fill' */
}

/* Asegurar que los SVGs en botones específicos tengan el color correcto si no usan currentColor */
.header-actions .button-primary svg {
     /* El fill se hereda o viene del SVG */
}
.header-actions .button-secondary svg {
     /* El fill se hereda o viene del SVG */
}
.header-actions .button.active svg {
     fill: #1a202c; /* Hacer que el icono coincida con el texto oscuro del botón activo */
}

/* --- Estilos para el menú desplegable Admin --- */
.dropdown {
    position: relative; /* Necesario para posicionar el menú */
    display: inline-block; /* Para que se alinee con otros botones */
}

/* El botón que abre el menú */
.dropdown-toggle {
    cursor: pointer;
}

/* Contenedor del menú desplegable (oculto por defecto) */
.dropdown-menu {
    display: none; /* Oculto por defecto */
    position: absolute;
    background-color: #2a2a2a; /* Fondo oscuro, similar a los botones secundarios */
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
    z-index: 100; /* Asegurar que esté por encima de otros elementos */
    border-radius: 4px; /* Bordes redondeados */
    padding: 8px 0; /* Espaciado interno vertical */
    margin-top: 4px; /* Pequeño espacio entre el botón y el menú */
    right: 0; /* Alinear a la derecha del botón */
}

/* Mostrar el menú cuando se pasa el ratón por encima del contenedor .dropdown */
/* Comentamos esta regla, ahora se controla por JS */
/* 
.dropdown:hover .dropdown-menu {
    display: block;
} 
*/

/* Estilo de los elementos dentro del menú */
.dropdown-menu a.dropdown-item {
    color: #ddd; /* Color de texto claro */
    padding: 10px 16px; /* Espaciado interno */
    text-decoration: none;
    display: block; /* Ocupar todo el ancho */
    white-space: nowrap; /* Evitar que el texto se divida en líneas */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Estilo al pasar el ratón por encima de un elemento del menú */
.dropdown-menu a.dropdown-item:hover {
    background-color: #383838; /* Fondo ligeramente más claro */
    color: #fff; /* Texto blanco */
}

/* Estilo para el elemento activo dentro del menú */
.dropdown-menu a.dropdown-item.active {
    background-color: #007bff; /* Color primario para resaltar */
    color: white;
}