/* ══════════════════════════════════════════════════════════
   Header — estilos base + responsive completo
   Breakpoints: ≤480 mobile-sm, ≤640 mobile, ≤860 tablet,
                ≤1024 laptop, ≤1280 desktop, ≥1920 tv
   ══════════════════════════════════════════════════════════ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
}

/* ── Header envolvente ── */
.main-header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* ══════════════════════════════════════════════════════════
   Franja única: logo + nav + acciones
   ══════════════════════════════════════════════════════════ */
.header-top {
    padding: 0;
    border-bottom: none;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 64px;
}

/* ── Logo ── */
.logo h1 {
    font-size: 26px;
    color: #17a2b8;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    white-space: nowrap;
}

.logo i {
    color: #fd7e14;
}

/* ══════════════════════════════════════════════════════════
   Nav inline (ocupa el centro del header)
   ══════════════════════════════════════════════════════════ */
.header-nav-inline {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
}

.nav-links li a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 20px;
    height: 64px;
    color: #444;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}

.nav-links li a:hover,
.nav-links li a.active {
    color: #17a2b8;
    border-bottom-color: #17a2b8;
    background: rgba(23, 162, 184, 0.05);
}

.nav-links li a i {
    font-size: 17px;
    flex-shrink: 0;
}

/* ── Hamburguesa (oculto por defecto en desktop) ── */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: #333;
    font-size: 24px;
    cursor: pointer;
    padding: 8px 10px;
    line-height: 1;
    transition: color 0.2s;
    border-radius: 6px;
}

.nav-toggle:hover { color: #17a2b8; }

/* ── Acciones auth ── */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Conserva compatibilidad con header-buyer y header-seller que usan .header-link */
.header-link {
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    transition: color 0.2s;
    white-space: nowrap;
}

.header-link:hover {
    color: #17a2b8;
}

.header-link i {
    font-size: 20px;
}

/* Botones auth */
.btn-login {
    padding: 8px 20px;
    background: transparent;
    color: #17a2b8;
    border: 2px solid #17a2b8;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-login:hover {
    background: #17a2b8;
    color: white;
}

.btn-register {
    padding: 8px 20px;
    background: #fd7e14;
    color: white;
    border: 2px solid #fd7e14;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-register:hover {
    background: #e8690c;
    border-color: #e8690c;
}

/* ══════════════════════════════════════════════════════════
   Retrocompatibilidad: header-buyer y header-seller
   usan .header-nav como <header> propio con barra oscura
   ══════════════════════════════════════════════════════════ */
.header-nav {
    background: #2c3e50;
    padding: 0;
}

.header-nav .container {
    gap: 0;
    position: relative;
    min-height: 48px;
}

/* ── Nav links sobre fondo oscuro: escritorio ──────────────────────────────
   Sobreescribe el color:#444 genérico de .nav-links li a
   para que los enlaces del panel autenticado sean completamente legibles.
   Ratio de contraste #fff sobre #2c3e50 ≈ 9.7:1 (WCAG AAA).
─────────────────────────────────────────────────────────────────────────── */
.header-nav .nav-links li a {
    color: #ffffff;
    height: 48px;
    padding: 0 18px;
    border-bottom: 3px solid transparent;
    transition: background 0.2s, color 0.2s, border-bottom-color 0.2s;
}

.header-nav .nav-links li a i {
    color: inherit; /* icono hereda el blanco del texto */
}

.header-nav .nav-links li a:hover {
    background: rgba(23, 162, 184, 0.20);
    color: #ffffff;
    border-bottom-color: #17a2b8;
}

.header-nav .nav-links li a.active {
    background: rgba(23, 162, 184, 0.25);
    color: #ffffff;
    border-bottom-color: #17a2b8;
}

/* ── Header-link (Notificaciones, Mensajes, Mi Perfil) ─────────────────────
   En .header-top sobre fondo blanco usa color oscuro (ya definido arriba).
   Aquí se define el color para el contexto de acciones del vendedor/comprador,
   que también viven en .header-top (fondo blanco) — no necesita cambio.
   Regla documentada para claridad.
─────────────────────────────────────────────────────────────────────────── */
/* .header-link ya tiene color:#333 definido arriba — correcto sobre fondo blanco */

/* ── Hamburguesa del panel autenticado ─────────────────────────────────────
   El botón toggle del seller/buyer está dentro de .header-nav (fondo oscuro).
─────────────────────────────────────────────────────────────────────────── */
.header-nav .nav-toggle {
    color: #ffffff;
}

.header-nav .nav-toggle:hover {
    color: #17a2b8;
    background: rgba(255, 255, 255, 0.08);
}

/* ── Buscador del header autenticado (buyer y seller) ──
   El header público ya no tiene .search-bar (usa nav-inline),
   pero header-buyer.php y header-seller.php siguen usándola.
   Vive dentro de .header-top (fondo blanco).
───────────────────────────────────────────────────────── */
.search-bar {
    flex: 1;
    max-width: 520px;
    display: flex;
    min-width: 0;
}

.search-bar input {
    flex: 1;
    min-width: 0;
    padding: 9px 16px;
    border: 2px solid #17a2b8;
    border-right: none;
    border-radius: 20px 0 0 20px;
    font-size: 14px;
    outline: none;
    background: #fff;
    color: #333;
    font-family: inherit;
    transition: border-color 0.2s;
}

.search-bar input::placeholder {
    color: #999;
}

.search-bar input:focus {
    border-color: #138496;
}

.search-bar button {
    padding: 9px 20px;
    background: #17a2b8;
    color: white;
    border: none;
    border-radius: 0 20px 20px 0;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.search-bar button:hover {
    background: #138496;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* ── Laptop (≤ 1280px) ── */
@media (max-width: 1280px) {
    .nav-links li a {
        padding: 0 15px;
        font-size: 13.5px;
    }
    /* El color del nav del vendedor/comprador se mantiene blanco por especificidad */
    .header-nav .nav-links li a {
        padding: 0 14px;
    }
}

/* ── Laptop pequeña (≤ 1024px) ── */
@media (max-width: 1024px) {
    .header-actions {
        gap: 10px;
    }

    .header-link span {
        display: none;
    }

    .header-link i {
        font-size: 22px;
    }

    .nav-links li a {
        padding: 0 12px;
        font-size: 13px;
        gap: 5px;
    }
    /* Mantiene color blanco sobre fondo oscuro */
    .header-nav .nav-links li a {
        padding: 0 11px;
        font-size: 13px;
    }
}

/* ── Tablet (≤ 860px): nav sigue inline, reduce padding ── */
@media (max-width: 860px) {
    .container {
        padding: 0 16px;
        gap: 14px;
        flex-wrap: wrap;
    }

    .logo h1 { font-size: 22px; }

    .nav-links li a {
        padding: 0 10px;
        font-size: 13px;
    }

    /* Buscador autenticado: ocupa segunda fila completa en tablet */
    .header-top .search-bar {
        order: 3;
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* header-buyer / header-seller: scroll horizontal */
    .header-nav .container {
        padding: 0;
    }

    .header-nav .nav-links {
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .header-nav .nav-links::-webkit-scrollbar { display: none; }

    /* En tablet los links ya tienen color #fff desde las reglas base de escritorio.
       Solo ajustamos padding/height para scroll horizontal. */
    .header-nav .nav-links li a {
        padding: 0 16px;
        height: 48px;
        border-bottom: none;
        border-left: 3px solid transparent;
    }

    .header-nav .nav-links li a:hover,
    .header-nav .nav-links li a.active {
        background: rgba(23, 162, 184, 0.25);
        color: #ffffff;
        border-bottom: none;
        border-left-color: #17a2b8;
    }
}

/* ── Mobile (≤ 640px): hamburguesa para header.php principal ── */
@media (max-width: 640px) {
    .container {
        padding: 0 14px;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .logo h1 { font-size: 19px; }

    /* Mostrar botón hamburguesa */
    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        order: 2;
    }

    /* La nav inline se convierte en menú desplegable */
    .header-nav-inline {
        order: 3;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        justify-content: flex-start;
        pointer-events: none;
    }

    .header-nav-inline .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background: #fff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        pointer-events: auto;
        border-top: 2px solid #17a2b8;
    }

    .header-nav-inline .nav-links.open {
        display: flex;
    }

    .header-nav-inline .nav-links li {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }

    .header-nav-inline .nav-links li:last-child {
        border-bottom: none;
    }

    .header-nav-inline .nav-links li a {
        height: auto;
        padding: 14px 20px;
        font-size: 14px;
        width: 100%;
        color: #333;
        border-bottom: none;
    }

    .header-nav-inline .nav-links li a:hover {
        background: rgba(23, 162, 184, 0.08);
        color: #17a2b8;
        border-bottom: none;
    }

    /* Acciones auth: solo iconos en mobile */
    .header-actions {
        gap: 8px;
        order: 1;
        margin-left: auto;
    }

    .header-link span { display: none; }
    .header-link i    { font-size: 21px; }

    .btn-login,
    .btn-register {
        padding: 7px 13px;
        font-size: 12px;
    }

    /* Buscador autenticado en mobile: fila completa debajo de logo+acciones */
    .header-top .search-bar {
        order: 3;
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .search-bar input  { padding: 8px 14px; font-size: 13px; }
    .search-bar button { padding: 8px 16px; font-size: 14px; }

    /* header-buyer / header-seller en mobile */
    .header-nav .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        margin-left: auto;
    }

    .header-nav .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background: #2c3e50;
        overflow: hidden;
    }

    .header-nav .nav-links.open {
        display: flex;
    }

    .header-nav .nav-links li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .header-nav .nav-links li:last-child { border-bottom: none; }

    .header-nav .nav-links li a {
        height: auto;
        padding: 14px 20px;
        font-size: 14px;
        width: 100%;
        color: #ffffff;
        border-bottom: none;
        border-left: 3px solid transparent;
    }

    .header-nav .nav-links li a:hover,
    .header-nav .nav-links li a.active {
        background: rgba(23, 162, 184, 0.20);
        color: #ffffff;
        border-bottom: none;
        border-left-color: #17a2b8;
    }
}

/* ── Mobile pequeño (≤ 400px) ── */
@media (max-width: 400px) {
    .logo h1 { font-size: 16px; }
    .header-link i { font-size: 19px; }
    .header-actions { gap: 6px; }
    .btn-login,
    .btn-register {
        padding: 6px 10px;
        font-size: 11px;
    }
}

/* ── Smart TV (≥ 1920px) ── */
@media (min-width: 1920px) {
    .container {
        max-width: 1700px;
        padding: 0 48px;
        gap: 36px;
        min-height: 80px;
    }

    .logo h1 { font-size: 34px; }
    .logo i  { font-size: 30px; }

    .nav-links li a {
        padding: 0 28px;
        height: 80px;
        font-size: 16px;
    }

    .nav-links li a i { font-size: 20px; }

    /* Nav del panel autenticado en TV: mantiene altura del .header-nav */
    .header-nav .nav-links li a {
        height: 56px;
        padding: 0 24px;
        font-size: 15px;
        color: #ffffff; /* refuerzo explícito */
    }

    .header-link       { font-size: 16px; gap: 7px; }
    .header-link i     { font-size: 24px; }
    .header-actions    { gap: 20px; }

    .btn-login,
    .btn-register {
        padding: 10px 26px;
        font-size: 15px;
    }
}