/**
 * Cabecera: posición del botón de tema y cabecera compacta en móvil.
 * Se carga la última para poder ajustar lo que definen styles.css y header-fix.css.
 * News AI Pal - JavocSoft
 */

/* Estructura del header para mantener todo correctamente alineado */
.header-container {
    display: flex;
    align-items: center;
}

/* Logo y botón de tema a la izquierda */
.logo {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

/* Posicionamiento específico para el botón de tema */
.theme-toggle-btn {
    margin-left: 0; /* Asegurar que no haya margen izquierdo no deseado */
}

/* Elementos de la derecha (botón de tema, buscador y controles de usuario) */
.header-controls-right {
    display: flex;
    align-items: center;
    /* justify-content: flex-end; /* No es necesario, el contenedor padre (.header-controls) se encarga de empujar este bloque a la derecha. */
    /* margin-left: auto; /* No es necesario, el contenedor padre (.header-controls) se encarga de empujar este bloque a la derecha. */
}

/* Ajustes específicos para diferentes tamaños de pantalla */
@media (max-width: 576px) {
    /* En pantallas muy pequeñas, reducir el tamaño del botón */
    .theme-toggle-btn {
        width: 35px;
        height: 35px;
        margin-left: 0; /* Asegurar que no haya margen izquierdo */
        margin-right: 10px; /* Ajustar margen derecho para pantallas pequeñas */
    }
    
    .theme-toggle-btn i {
        font-size: 16px;
    }
    
    /* Ajustar espacio en el header-controls */
    .header-controls {
        gap: 5px;
        justify-content: flex-end;
    }
}

/* Ajustes para pantallas medianas */
@media (min-width: 577px) and (max-width: 768px) {
    .theme-toggle-btn {
        margin-left: 0; /* Asegurar que no haya margen izquierdo */
        margin-right: 10px; /* Ajustar margen derecho para pantallas medianas */
    }
    
    .header-container {
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .header-controls {
        margin-top: 10px;
        width: 100%;
        justify-content: flex-end;
    }
}

/* Ajuste para asegurar que el botón no flote incorrectamente */
.header-controls {
    position: relative;
    flex: 1;
    display: flex; 
    align-items: center; 
    justify-content: flex-end; /* Mantiene el bloque .header-controls-right a la derecha */
}

/* Asegurar que el botón de tema tenga buen contraste con el fondo */
[data-theme="light"] .theme-toggle-btn {
    background-color: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .theme-toggle-btn {
    background-color: rgba(255, 255, 255, 0.1);
}

/* "JavocSoft |" forma parte del logotipo completo; en móvil solo queda "News AI Pal" */
.brand-full {
    display: contents;
}

/* --- Cabecera compacta en móvil (KI-69) ------------------------------------------
   Una fila con el logotipo corto, el tema y el menú, y el buscador debajo a todo el
   ancho. Los contenedores intermedios usan display: contents para que sus hijos
   se coloquen directamente en la fila de .header-container. */
@media (max-width: 768px) {
    .header-container {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
    }

    .header-controls,
    .header-controls-right {
        display: contents;
    }

    .logo {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 0;
    }

    .logo h1 {
        font-size: 1.3rem;
        margin: 0;
    }

    .brand-full {
        display: none;
    }

    .theme-toggle-btn {
        order: 2;
        width: 38px;
        height: 38px;
        margin: 0;
    }

    .auth-controls {
        order: 3;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .auth-controls .btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .auth-controls .me-2 {
        margin-right: 0 !important;
    }

    .user-menu-btn {
        height: 38px;
        width: 38px;
        padding: 0;
    }

    header .search-container {
        order: 4;
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
    }

    #search-input,
    .search-btn {
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }
}