/* ======================================================= */
/* CSS OPTIMIZADO - HEADER PRO Y BÚSQUEDA (MOBILE FIRST) */
/* (Requiere las variables de color y layout de style.css) */
/* ======================================================= */

/* Reset para todos los botones del header */
.header-pro button {
    all: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* ==================================== */
/* 1. BASE MÓVIL (Por defecto: max-width 768px) */
/* ==================================== */

/* HEADER PRINCIPAL */
.header-pro {
    margin: 0;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: var(--color-bg-header);
    /* ADAPTADO */
    z-index: var(--z-index-header);
    /* ADAPTADO */
}

/* Header izquierdo - Logo */
.header-pro #leftHeader {
    display: flex;
    gap: 10px;
    height: 32px;
    align-items: center;
}

.header-pro #logoIcon {
    width: auto;
    height: 32px;
    min-width: 70px;
    display: flex;
    align-items: center;
}

.header-pro #logoIcon img {
    height: 100%;
    width: auto;
    max-width: 100%;
}

.header-pro #logoIcon a {
    display: flex;
    height: 100%;
}

/* Header central - Compacto y a la derecha */
.header-pro #centerHeader {
    display: flex;
    width: auto;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
}

/* Ocultar Navegación, Campo de Texto de Búsqueda y algunos iconos en Móvil */
.header-pro .header-pro-nav,
.header-pro #profileIcon,
.header-pro #searchField input[type="search"] {
    display: none;
}

.header-pro #searchField input[type="search"]:focus {
    outline: none;
    border-color: var(--color-text-main);
    /* ADAPTADO */
}

.header-pro #searchField input[type="search"] {
    color: var(--color-text-main);
    /* ADAPTADO */
}

/* Header derecho - Iconos */
.header-pro #rightHeader {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* COMPONENTE DE BÚSQUEDA (Modo icono) */
.header-pro .search-form {
    width: auto;
    display: flex;
    align-items: center;
}

.header-pro #searchField {
    background-color: transparent;
    width: auto;
    height: auto;
    border: none;
    margin-right: 10px;
    border-radius: var(--search-radius);
    /* ADAPTADO */
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* El botón #searchIcon (la lupa) */
.header-pro #searchIcon {
    width: var(--icon-size-mobile);
    /* ADAPTADO */
    height: var(--icon-size-mobile);
    /* ADAPTADO */
    border-radius: 50%;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--color-bg-header);
    /* ADAPTADO */
    padding: 0;
    cursor: pointer;
    line-height: 0;
}

.header-pro #backIcon {
    display: none;
    margin-right: 15px;
    cursor: pointer;
    width: 25px;
    align-items: center;
    justify-content: center;
}


/* ICONOS INTERACTIVOS (Tamaño móvil) */
.header-pro #notificationIcon,
.header-pro #createIcon,
.header-pro #toggle-theme,
.header-pro #hamburIcon {
    border-radius: 50%;
    /* Quitamos el background-color de base-sidebar y usamos el de header (como estaba antes) */
    background-color: var(--color-bg-header);
    width: var(--icon-size-mobile);
    /* ADAPTADO */
    height: var(--icon-size-mobile);
    /* ADAPTADO */
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-pro #createIcon {
    margin-left: 0;
}

.header-pro #notificationIcon svg,
.header-pro #createIcon svg,
.header-pro #toggle-theme svg,
.header-pro #hamburIcon svg,
.header-pro #searchIcon svg,
.header-pro #backIcon svg {
    fill: var(--color-text-main);
    /* ADAPTADO */
    width: 30px;
}

/* ESTADOS HOVER */
.header-pro #notificationIcon:hover,
.header-pro #createIcon:hover,
.header-pro #toggle-theme:hover,
.header-pro #hamburIcon:hover,
.header-pro #searchIcon:hover,
.header-pro #backIcon:hover {
    background-color: var(--color-bg-sidebar-alt);
    /* ADAPTADO (antes fondo-base-sidebar-iconos) */
}

.header-pro #profileIcon img {
    border-radius: 50%;
}

.header-pro span {
    cursor: pointer;
}

.header-pro .search-mode-item {
    transition: opacity var(--transition-duration), visibility var(--transition-duration);
}

.header-pro #searchField input[type="search"] {
    border: 1px solid var(--color-bg-sidebar);
    /* ADAPTADO */
    background-color: var(--color-bg-alt);
    /* ADAPTADO (antes fondo-base-1) */
}

body.search-active .header-pro #searchField input[type="search"] {
    /*border: 1px solid var(--texto-color);*/
    border: 1px solid var(--color-text-main);
    /* ADAPTADO */
}

/* Ocultar elementos en móviles muy pequeños (360px) */
@media (max-width: 360px) {
    .header-pro #createIcon {
        margin-left: 0;
    }
}

/* ==================================== */
/* 2. RESPONSIVE - TABLET (min-width: 769px) */
/* ==================================== */

@media (min-width: 769px) {

    /* HEADER PRINCIPAL */
    .header-pro {
        padding: 0 20px;
    }

    /* ICONOS Y ELEMENTOS INTERACTIVOS (Vuelve al tamaño grande) */
    .header-pro #notificationIcon,
    .header-pro #createIcon,
    .header-pro #toggle-theme,
    .header-pro #hamburIcon {
        width: var(--icon-size);
        /* ADAPTADO */
        height: var(--icon-size);
        /* ADAPTADO */
        background-color: var(--color-bg-sidebar);
        /* ADAPTADO */
    }

    /* OCULTAR NAVEGACIÓN Y MOSTRAR ICONOS DE PERFIL/VOZ */
    .header-pro .header-pro-nav {
        display: none;
    }

    .header-pro #toggle-theme,
    .header-pro #profileIcon {
        display: flex;
    }

    /* BÚSQUEDA - EXPANDIR EL CAMPO DE TEXTO */
    .header-pro #centerHeader {
        width: 50%;
        justify-content: flex-start;
        gap: 15px;
    }

    .header-pro .search-form {
        width: 100%;
    }

    .header-pro #searchField {
        background-color: var(--color-bg-sidebar);
        /* ADAPTADO */
        width: 100%;
        height: var(--icon-size);
        /* ADAPTADO */
        margin-right: 0;
        justify-content: space-between;
    }

    .header-pro #searchField input[type="search"] {
        display: block;
        width: 90%;
        height: var(--icon-size);
        /* ADAPTADO */
        border-radius: var(--search-radius) 0 0 var(--search-radius);
        /* ADAPTADO */
        padding-left: 10px;
        font-size: 17px;
    }


    /* Estilos del Botón de Búsqueda en Desktop (Estado Normal) */
    .header-pro #searchIcon {
        height: var(--icon-size);
        /* ADAPTADO */
        width: 10%;
        min-width: 50px;
        background-color: transparent;
        border-radius: 0 var(--search-radius) var(--search-radius) 0;
        /* ADAPTADO */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        cursor: pointer;
    }
}

/* ==================================== */
/* 3. RESPONSIVE - DESKTOP (min-width: 1025px) */
/* ==================================== */

@media (min-width: 1025px) {

    /* REVELAR NAVEGACIÓN PRINCIPAL */
    .header-pro .header-pro-nav {
        display: flex;
        align-items: center;
        margin-right: 15px;
    }

    .header-pro .header-pro-menu {
        list-style: none;
        display: flex;
        margin: 0;
        padding: 0;
        gap: 15px;
    }

    .header-pro .header-pro-menu li a {
        color: var(--color-text-main);
        /* ADAPTADO */
        text-decoration: none;
        padding: 8px 10px;
        border-radius: 4px;
        font-size: 15px;
        transition: background-color var(--transition-duration);
        /* ADAPTADO */
        font-weight: 500;
    }

    .header-pro .header-pro-menu li a:hover {
        background-color: var(--color-bg-sidebar-alt);
        /* ADAPTADO */
    }

    /* AJUSTES DE BUSCADOR Y SECCIONES */
    .header-pro #centerHeader {
        width: 67%;
        justify-content: flex-start;
    }

    .header-pro .search-form {
        width: 60%;
    }

    .header-pro #rightHeader {
        display: flex;
        gap: 20px;
    }

    .header-pro #createIcon {
        margin-left: 20px;
    }
}

@media (min-width: 1350px) {
    .header-pro #centerHeader {
        width: 50%;
        justify-content: flex-start;
    }
}

/* ==================================== */
/* 4. MODO BÚSQUEDA ACTIVA */
/* ==================================== */

/* Ocultar elementos no esenciales */
body.search-active .header-pro #leftHeader,
body.search-active .header-pro #rightHeader,
body.search-active .header-pro .search-mode-item {
    display: none;
    opacity: 0;
    visibility: hidden;
}

/* Ajustes del header en modo búsqueda */
body.search-active .header-pro {
    padding: 0 10px;
    justify-content: flex-start;
}

/* Expansión del área central */
body.search-active .header-pro #centerHeader {
    width: 100%;
    padding: 0;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

/* Mostrar botón de retroceso */
body.search-active .header-pro #backIcon {
    display: flex;
    border-radius: 50%;
    background-color: transparent;
}

/* Expansión del buscador */
body.search-active .header-pro .search-form,
body.search-active .header-pro #searchField {
    width: 100%;
    background-color: var(--color-bg-sidebar);
    /* ADAPTADO */
    border-radius: var(--search-radius);
    /* ADAPTADO */
}

body.search-active .header-pro #searchField input[type="search"] {
    display: block;
    width: 100%;
    border-radius: var(--search-radius) 0 0 var(--search-radius);
    /* ADAPTADO */
}


body.search-active .header-pro #searchIcon {
    background-color: transparent;
    border-radius: 0 var(--search-radius) var(--search-radius) 0;
    /* ADAPTADO */
}