/*
 * responsive.css — KUMA S.A
 * Hoja de estilos responsiva global. Se carga DESPUÉS de los estilos
 * de cada plantilla para poder sobreescribirlos sin usar !important.
 * Breakpoints: 1600(TV/4K) · 1400(desktop) · 992(laptop) · 768(tablet) · 576(móvil) · 380(móvil pequeño)
 * ─────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════
   BASE — fluida en cualquier pantalla
══════════════════════════════════════════════════════ */
html { -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; height: auto; }
.container, .container-fluid { width: 100%; }

/* ══════════════════════════════════════════════════════
   PANTALLAS GRANDES / SMART TV (≥1600px)
   Evita que todo quede minúsculo y perdido en el centro
══════════════════════════════════════════════════════ */
@media (min-width: 1600px) {
    .kuma-topbar-inner, .kuma-navbar-inner, .footer-inner { max-width: 1680px; }
    body { font-size: 1.05rem; }
    .section-title { font-size: 2.3rem; }
    .admin-content { padding: 36px 48px; }
}

/* ══════════════════════════════════════════════════════
   MENÚ HAMBURGUESA (tienda) — oculto por defecto, JS lo activa
══════════════════════════════════════════════════════ */
.kuma-menu-toggle {
    display: none;
    background: var(--black-3, #181818);
    border: 1px solid var(--border, rgba(255,107,0,.15));
    color: var(--text, #E8E8E8);
    width: 40px; height: 40px; border-radius: 8px;
    align-items: center; justify-content: center;
    font-size: 1.1rem; cursor: pointer; flex-shrink: 0;
}
.kuma-menu-toggle:hover { border-color: var(--orange, #FF6B00); color: var(--orange, #FF6B00); }

/* ══════════════════════════════════════════════════════
   LAPTOP / TABLET GRANDE (≤992px)
══════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .kuma-topbar-inner { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
    .kuma-logo { font-size: 1.25rem; }
    .kuma-search { order: 3; max-width: 100%; flex-basis: 100%; }
    .kuma-nav-actions { gap: 6px; }
    .kuma-btn-icon span, .kuma-btn-primary span { display: inline; }

    .admin-content { padding: 20px; }
    .stat-card { padding: 16px; }
}

/* ══════════════════════════════════════════════════════
   TABLET (≤768px)
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    body { padding-top: 66px; }

    /* Topbar compacta con hamburguesa */
    .kuma-topbar-inner { padding: 10px 14px; gap: 10px; flex-wrap: nowrap; }
    .kuma-menu-toggle { display: flex; order: -1; }
    .kuma-logo { font-size: 1.1rem; }
    .kuma-logo small { display: none; }
    .kuma-search-wrap { display: none; order: 4; }
    .kuma-search-wrap.mobile-open { display: block; flex-basis: 100%; margin-top: 8px; }
    .kuma-search { width: 100%; }
    .kuma-nav-actions { margin-left: auto; gap: 6px; }
    .kuma-btn-icon, .kuma-btn-primary, .kuma-btn-account { padding: 8px 10px; font-size: 0.8rem; }
    .kuma-btn-icon span, .kuma-btn-primary span:not(.cart-badge) { display: none; }
    .kuma-btn-account span:last-child { display: none; }

    /* Menú inferior colapsable en vertical */
    .kuma-navbar { display: none; position: fixed; top: 66px; left: 0; width: 100%;
        max-height: calc(100vh - 66px); overflow-y: auto; z-index: 999;
        box-shadow: 0 12px 24px rgba(0,0,0,.5); }
    .kuma-navbar.mobile-open { display: block; }
    .kuma-navbar-inner { flex-direction: column; align-items: stretch; padding: 8px 0; }
    .kuma-nav-link { padding: 14px 20px; border-bottom: 1px solid var(--border, rgba(255,107,0,.1));
        border-left: 3px solid transparent; }
    .kuma-nav-link:hover, .kuma-nav-link.active { border-bottom-color: var(--border, rgba(255,107,0,.1)); border-left-color: var(--orange, #FF6B00); }

    .flash-container { top: 74px; right: 10px; left: 10px; max-width: none; }

    /* Grids de producto / cards a 2 columnas */
    .row.g-4 > [class*="col-"], .row.g-3 > [class*="col-"] { margin-bottom: 4px; }
    .section-title { font-size: 1.5rem; }

    /* Footer centrado y apilado */
    .footer-inner .row > div { text-align: center; margin-bottom: 24px; }
    .footer-social { justify-content: center; }

    /* Tablas: scroll horizontal en vez de rotura de layout */
    .table-card, .table-responsive-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .kuma-table { min-width: 640px; }

    /* Admin: sidebar oculto tras hamburguesa */
    .sidebar { transform: translateX(-100%); transition: transform .25s ease; width: 260px; }
    .sidebar.mobile-open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.6); }
    .admin-main { margin-left: 0; }
    .admin-topbar { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
    .admin-page-title { font-size: .95rem; }
    .admin-sidebar-overlay {
        display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 90;
    }
    .admin-sidebar-overlay.show { display: block; }
}

/* ══════════════════════════════════════════════════════
   MÓVIL (≤576px)
══════════════════════════════════════════════════════ */
@media (max-width: 576px) {
    .kuma-topbar-inner { padding: 8px 12px; }
    .kuma-logo { font-size: 1rem; letter-spacing: 1px; }
    .kuma-btn-primary, .kuma-btn-icon { padding: 8px; }

    .section-title { font-size: 1.3rem; }
    .orange-line { margin-bottom: 20px; }
    .page-hero { padding: 20px 0; }

    .prod-card-img, .prod-card-img-placeholder { height: 150px; }
    .prod-card-body { padding: 12px; }
    .prod-card-name { font-size: .85rem; }
    .prod-card-price { font-size: 1.15rem; }
    .prod-card-footer { padding: 0 12px 12px; flex-direction: column; }

    .btn-kuma, .btn-kuma-outline { padding: 10px 18px; font-size: .88rem; width: 100%; justify-content: center; }

    .footer-inner { padding: 32px 16px 16px; }
    .footer-bottom { font-size: .72rem; padding: 14px; }

    .lightbox-nav { padding: 10px 12px; font-size: 1.1rem; }
    .lightbox-nav.prev { left: 6px; }
    .lightbox-nav.next { right: 6px; }

    .admin-content { padding: 14px; }
    .stat-num { font-size: 1.4rem; }
    .kuma-modal-card { padding: 20px; }
}

/* ══════════════════════════════════════════════════════
   MÓVIL PEQUEÑO (≤380px)
══════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .kuma-logo small { display: none; }
    .kuma-btn-account span { display: none; }
    .section-title { font-size: 1.15rem; }
    .prod-card-img, .prod-card-img-placeholder { height: 130px; }
}

/* ══════════════════════════════════════════════════════
   ACCESIBILIDAD TÁCTIL — objetivos de toque más grandes
══════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
    .kuma-nav-link, .footer-link, .sidebar-link, a.btn-kuma, a.btn-kuma-outline,
    .kuma-btn-icon, .kuma-btn-primary, .btn-add-cart, .btn-view-detail { min-height: 40px; }
}