/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE.CSS — Kinítos
   Breakpoints unificados:
     xs  : < 480px  (teléfonos pequeños)
     sm  : < 640px  (teléfonos)
     md  : < 768px  (tablets portrait)
     lg  : < 1024px (tablets landscape / laptops pequeños)
     xl  : < 1280px (laptops)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. BASE GLOBAL ──────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

img, video, iframe { max-width: 100%; height: auto; }

/* Tablas con scroll horizontal en móvil */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Botones con mínimo 44px de área táctil */
button, .boton-principal, .boton-secundario,
.admin-enlace { min-height: 40px; }

/* ── 2. HEADER PÚBLICO ───────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Carrito counter visible en móvil */
  .contador-carrito { font-size: .65rem; width: 16px; height: 16px; }

  /* Logo más compacto */
  #logo-principal { height: 36px; }

  /* Search field full width en móvil */
  .campo-busqueda { width: 100% !important; max-width: none !important; }

  /* Mega menú: scroll vertical si hay mucho contenido */
  .mega-menu { max-height: 80vh; overflow-y: auto; }
}

@media (max-width: 479px) {
  .boton-carrito span { display: none; } /* Oculta texto del carrito, solo icono */
}

/* ── 3. HOMEPAGE ─────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .hero-titulo     { font-size: clamp(1.6rem, 6vw, 2.5rem); }
  .hero-subtitulo  { font-size: clamp(.9rem, 3vw, 1.1rem); }
  .hero-botones    { flex-direction: column; gap: .75rem; align-items: center; }
  .hero-botones a  { width: min(280px, 100%); text-align: center; }
}

@media (max-width: 479px) {
  .carrusel-productos     { grid-template-columns: repeat(2, 1fr) !important; gap: .75rem; }
  .grid-valores           { grid-template-columns: 1fr 1fr !important; }
  .seccion-titulo         { font-size: 1.4rem; }
}

/* ── 4. CATÁLOGOS ────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .catalogo-layout { grid-template-columns: 1fr !important; }
  .catalogo-filtros {
    position: fixed !important; top: 0; left: 0; height: 100vh;
    width: min(320px, 85vw); z-index: 200;
    transform: translateX(-105%); transition: transform .3s ease;
    overflow-y: auto; background: #fff;
    box-shadow: 4px 0 20px rgba(0,0,0,.15);
  }
  .catalogo-filtros.abierto { transform: translateX(0) !important; }
  .filtros-toggle { display: flex !important; }
  .filtros-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4);
    z-index: 199; backdrop-filter: blur(2px);
  }
  .filtros-overlay.activo { display: block; }
  .catalogo-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 479px) {
  .catalogo-grid  { grid-template-columns: 1fr !important; }
  .producto-card  { max-width: 100%; }
  .filtros-toggle { width: 100%; justify-content: center; }
}

/* ── 5. DETALLE DE PRODUCTO ──────────────────────────────────────────────── */

@media (max-width: 967px) {
  .producto-contenedor   { grid-template-columns: 1fr !important; gap: 1.5rem; }
  .producto-imagen       { position: relative !important; top: 0 !important; max-height: 380px; object-fit: contain; }
}

@media (max-width: 767px) {
  .producto-titulo       { font-size: clamp(1.3rem, 5vw, 1.8rem) !important; }
  .precio-principal      { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
  .selectores-grupo      { flex-direction: column; }
  .compra-popup          { width: 94vw !important; left: 3vw !important; right: 3vw !important; bottom: 12px; }
  .botones-compra        { flex-direction: column; gap: .5rem; }
  .botones-compra button { width: 100%; }
  /* Guía de tallas ocupa toda la pantalla en móvil */
  .guia-caja { max-width: 96vw !important; max-height: 94vh; }
}

/* ── 6. CHECKOUT ─────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .contenedor-columnas { flex-direction: column !important; gap: 1.5rem; }
  .columna-imagen      { display: none; } /* Ocultar imagen decorativa */
  .columna-formulario  { width: 100% !important; padding: 1rem; }
  .dir-grid            { grid-template-columns: 1fr !important; }
}

/* ── 7. PÁGINA DE PAGO ───────────────────────────────────────────────────── */

@media (max-width: 967px) {
  .pago-layout         { flex-direction: column !important; }
  .pago-resumen        { width: 100% !important; }
  .pago-metodos        { width: 100% !important; }
}

@media (max-width: 767px) {
  .grupo-fecha-cvv     { grid-template-columns: 1fr !important; }
  .tarjetas-aceptadas  { justify-content: center; }
  .dev-sim-box         { padding: .75rem; }
  .pago-mp-fila        { font-size: .88rem; }
  .pago-mp-fila-total  { font-size: 1rem; }
}

/* ── 8. TICKET ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .contenedor-ticket     { padding: .75rem !important; }
  .ticket-container      { padding: 1.25rem !important; border-radius: 16px; }
  .producto-ticket       { grid-template-columns: 54px 1fr auto !important; gap: .5rem; }
  .botones-accion        { flex-direction: column; gap: .5rem; }
  .botones-accion a      { width: 100%; text-align: center; }
}

@media (max-width: 479px) {
  .ticket-header         { padding: 1.5rem 1rem; }
  .icono-exito           { width: 52px; height: 52px; font-size: 1.4rem; }
  .titulo-agradecimiento { font-size: 1.3rem; }
  .numero-pedido         { font-size: 1.1rem; }
}

/* ── 9. USUARIO — PERFIL ─────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .usuario-grid          { grid-template-columns: 1fr !important; }
  .tarjeta-usuario       { border-radius: 16px; }
  .tarjeta-header        { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .pedido-item           { flex-direction: column; gap: .75rem; }
  .pedido-acciones       { width: 100%; }
  .pedido-acciones a, .pedido-acciones button { flex: 1; text-align: center; justify-content: center; }
  .lista-pedidos, .lista-devoluciones { max-height: none !important; } /* Sin scroll fijo en móvil */
}

@media (max-width: 479px) {
  .pedido-badge-status   { font-size: .7rem; }
  .pedido-total          { font-size: .95rem; }
}

/* ── 10. PEDIDO DETALLE ──────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .producto-detalle-item { flex-direction: column; gap: .75rem; }
  .producto-precio-detalle { text-align: left; }
  .botones-accion-pedido { justify-content: stretch; }
  .boton-volver          { width: 100%; text-align: center; }
  .seccion-resumen-costos .resumen-item { flex-wrap: wrap; }
}

/* ── 11. MINICART ────────────────────────────────────────────────────────── */

@media (max-width: 479px) {
  .minicart-panel        { width: 100% !important; max-width: none !important; border-radius: 20px 20px 0 0; bottom: 0 !important; top: auto !important; }
  .minicart-item__img    { width: 52px; height: 52px; }
}

/* ── 12. CARRUSEL COMENTARIOS ────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Contenedor: menos padding lateral para que no se desborde */
  .carrusel-resenas-contenedor {
    padding: 0 2.25rem !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* Wrapper recorta el contenido que sobresale */
  .carrusel-resenas-wrapper { overflow: hidden !important; }
  /* Tarjeta: max-width 100% para que no sobresalga, mantiene min-height */
  .tarjeta-resena {
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 2rem 1.25rem !important;
  }
  /* Texto más pequeño en móvil */
  .texto-resena  { font-size: .92rem !important; line-height: 1.6; }
  .estrellas     { font-size: 1.1rem !important; }
  .nombre-cliente { font-size: .88rem !important; }
  .cargo-cliente  { font-size: .78rem !important; }
}

@media (max-width: 479px) {
  .carrusel-resenas-contenedor { padding: 0 1.75rem !important; }
  .tarjeta-resena              { padding: 1.75rem 1rem !important; }
  .texto-resena                { font-size: .86rem !important; }
  .carrusel-flecha             { width: 30px !important; height: 30px !important; }
}

/* ── 12b. NOSOTROS / CONTACTANOS ─────────────────────────────────────────── */

@media (max-width: 767px) {
  .nosotros-grid         { grid-template-columns: 1fr !important; }
  .valores-grid          { grid-template-columns: 1fr 1fr !important; }
  .form-contacto         { padding: 1rem !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN — RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 13. ADMIN HEADER ────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .admin-menu        { display: none !important; }
  .admin-usuario-pill, .admin-btn-tienda { display: none !important; }
}

@media (min-width: 961px) {
  #admin-mobile-menu { display: none !important; }
}

/* ── 14. ADMIN DASHBOARD ─────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .dashboard-stats       { grid-template-columns: repeat(2, 1fr) !important; }
  .graficas-row          { grid-template-columns: 1fr !important; }
  .grafica-card          { min-height: 280px; }
}

@media (max-width: 640px) {
  .dashboard-stats       { grid-template-columns: 1fr 1fr !important; gap: .75rem; }
  .stat-card             { padding: 1rem !important; }
  .stat-valor            { font-size: 1.5rem !important; }
  .dashboard-filtros     { flex-direction: column; gap: .5rem; }
  .dashboard-filtros input,
  .dashboard-filtros select,
  .dashboard-filtros button { width: 100%; }
  .top-productos-tabla   { font-size: .8rem; }
  .top-productos-tabla th,
  .top-productos-tabla td { padding: .5rem .6rem; }
}

@media (max-width: 479px) {
  .dashboard-stats { grid-template-columns: 1fr !important; }
}

/* ── 15. ADMIN PRODUCTOS ─────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .galeria-grid          { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 640px) {
  .galeria-grid          { grid-template-columns: 1fr !important; }
  .admin-page-header     { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .admin-page-acciones   { width: 100%; display: flex; flex-wrap: wrap; gap: .5rem; }
  .admin-page-acciones select,
  .admin-page-acciones button { flex: 1; min-width: 120px; }

  /* Modal de nuevo/editar producto: scroll */
  .modal-overlay .modal-contenido,
  .modal-producto {
    width: 96vw !important; max-width: none !important;
    max-height: 92vh; overflow-y: auto;
    border-radius: 16px; margin: 4vh auto;
  }
  .form-fila-doble       { flex-direction: column !important; }
}

/* ── 16. GESTIÓN DE PEDIDOS ──────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .pedidos-grid          { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 767px) {
  .pedidos-tabs          { flex-wrap: wrap; gap: .4rem; }
  .pedido-tab            { flex: 1 1 calc(50% - .2rem); justify-content: center; font-size: .8rem; padding: .5rem .75rem; }
  .pedidos-grid          { grid-template-columns: 1fr !important; }

  /* Filtros finalizados: stack */
  .finalizados-filtros   { flex-direction: column; gap: .5rem; }
  .filtro-buscar,
  .filtro-select-peds    { width: 100%; }

  /* Modal de detalle: pantalla completa */
  .modal-overlay         { align-items: flex-end !important; padding: 0; }
  .modal-contenido       {
    width: 100% !important; max-width: none !important;
    max-height: 90vh; border-radius: 20px 20px 0 0 !important;
    overflow-y: auto;
  }
  .modal-header          { position: sticky; top: 0; background: #fff; z-index: 1; }

  /* Botones de status: scroll horizontal */
  .status-steps          { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .25rem; }
  .btn-status            { white-space: nowrap; flex-shrink: 0; }
}

@media (max-width: 479px) {
  .pedido-tab            { font-size: .75rem; padding: .45rem .5rem; }
  .tab-badge             { font-size: .65rem; }
  .pedidos-grid          { gap: .75rem; }
  .pedido-card           { padding: .75rem; }

  /* Finalizados resumen: 2 columnas */
  .finalizados-resumen   { grid-template-columns: 1fr 1fr !important; }
}

/* ── 17. VENTA FÍSICA ────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .vf-layout             { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  .linea-fila1           { grid-template-columns: 48px 1fr 1fr auto !important; }
  .linea-fila2           { grid-template-columns: 1fr !important; }
  .vf-total-box          { flex-direction: column; gap: .25rem; text-align: center; }
}

@media (max-width: 479px) {
  .linea-fila1           { grid-template-columns: 44px 1fr auto !important; }
  .linea-fila1 .vf-field:nth-child(3) { display: none; } /* Oculta tipo venta, va a la fila 2 */
  .historial-lista       { max-height: 300px; }
}

/* ── 18. ADMIN PROVEEDORES ───────────────────────────────────────────────── */

@media (max-width: 767px) {
  .proveedores-grid      { grid-template-columns: 1fr !important; }
  .proveedor-card        { padding: 1rem; }
  .ordenes-lista         { overflow-x: auto; }
  .tabla-ordenes         { min-width: 600px; }
}

/* ── 19. ADMIN COMENTARIOS ───────────────────────────────────────────────── */

@media (max-width: 767px) {
  .comentarios-grid      { grid-template-columns: 1fr !important; }
}

/* ── 20. SOLICITUDES / MODAL RECHAZO ─────────────────────────────────────── */

@media (max-width: 640px) {
  .solicitud-card        { padding: .875rem; }
  .solicitud-header      { flex-direction: column; gap: .5rem; }
  .solicitud-acciones    { flex-direction: column; }
  .btn-aprobar, .btn-rechazar { width: 100%; justify-content: center; }

  /* Modal rechazo full width en móvil */
  #modal-rechazo > div  { width: 96vw !important; max-width: none !important; }
}

/* ── 21. MODALES GENERALES ───────────────────────────────────────────────── */

@media (max-width: 540px) {
  /* Modal reportes */
  .modal-reporte-caja    { padding: 1.25rem; border-radius: 16px 16px 0 0; }
  .modal-reporte-overlay { align-items: flex-end; padding: 0; }
  .reporte-tipos         { flex-direction: column; }

  /* Modal guía de tallas */
  .guia-overlay          { align-items: flex-end; padding: 0; }
  .guia-caja             { border-radius: 20px 20px 0 0 !important; max-height: 92vh !important; }

  /* Knitos modals */
  .knitos-modal-box      { width: 94vw !important; padding: 1.25rem; }
}

/* ── 22. FORMULARIOS GLOBALES ────────────────────────────────────────────── */

@media (max-width: 640px) {
  .form-fila-doble       { flex-direction: column !important; gap: .75rem; }
  .campo-entrada-login   { font-size: 16px; } /* Evita zoom automático en iOS */
  .campo-feedback        { font-size: 16px; }
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select, textarea       { font-size: 16px !important; } /* Previene zoom en iOS */
}

/* ── 23. CUSTOM SELECT EN MÓVIL ──────────────────────────────────────────── */

@media (max-width: 640px) {
  .cs-panel              { border-radius: 14px !important; }
  .cs-trigger            { border-radius: 12px !important; font-size: .88rem; padding: .6rem .85rem; }
  .cs-option             { padding: .65rem .85rem; font-size: .9rem; }
  /* Panel con más espacio táctil */
  .cs-panel-inner        { max-height: 220px; }
}

/* ── 24. TOASTS Y NOTIFICACIONES ─────────────────────────────────────────── */

@media (max-width: 640px) {
  .knitos-toast          { bottom: 16px !important; left: 16px !important; right: 16px !important; width: auto !important; }
}

/* ── 25. CONTENEDOR GLOBAL ───────────────────────────────────────────────── */

.admin-contenido {
  max-width: 1400px; margin: 0 auto; width: 100%;
  padding: 0 clamp(.75rem, 3vw, 2rem);
}

@media (max-width: 640px) {
  .admin-page-full  { padding: .75rem !important; }
  .admin-contenido  { padding: 0 .5rem; }
}

/* ── 26. ANIMACIONES — Reducir en móvil para mejor rendimiento ──────────── */

@media (max-width: 640px) {
  .molino-origami-1, .molino-origami-2,
  .molino-origami-3, .molino-origami-4 { display: none !important; }
  /* Transiciones más rápidas */
  * { transition-duration: .15s !important; }
  .cs-panel { transition: opacity .15s ease, transform .15s ease !important; }
}

/* ── 27. PRINT ───────────────────────────────────────────────────────────── */

@media print {
  .barra-navegacion, .menu-movil, .minicart-panel,
  .botones-accion, .admin-page-acciones { display: none !important; }
  body { font-size: 12px; }
  .ticket-container, .pedido-detalle-container { box-shadow: none; border: 1px solid #ccc; }
}

/* ── 28. TOUCH — Mejoras para dispositivos táctiles ─────────────────────── */

@media (hover: none) and (pointer: coarse) {
  /* Áreas táctiles más grandes */
  .btn-dir-accion        { padding: .5rem .9rem; }
  .boton-reportar        { padding: .5rem 1rem; }
  .cs-option             { padding: .75rem 1rem; }
  .mega-menu-link        { padding: .75rem .5rem; }
  /* Quitar hover states que no aplican en touch */
  .cs-option:hover       { padding-left: .85rem; }
}

/* ── 29. SAFE AREAS (iPhone X+) ─────────────────────────────────────────── */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .menu-movil {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  .minicart-footer {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  }
}

/* ── 30. SCROLLBAR GLOBAL (webkit) ──────────────────────────────────────── */

::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: #CBD5E0; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #A0AEC0; }