/* vision-theme.css — Tema global Vision Pro para admin + escuelas (clientes)
   Aplica: tipografía Plus Jakarta Sans, sombras profundas, pills, paleta morada de la marca.
   Excluye: #page-vendedora (tiene su propio scope), widget de chat. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ═══ Variables base que se mezclan con las existentes de main.css ═══ */
:root {
  --vt-purple:    #7b68b3;
  --vt-purple-dk: #5a4a8f;
  --vt-purple-lt: #e8e0f5;
  --vt-rose:      #e8a0bf;
  --vt-rose-dk:   #d987a8;
  --vt-cream:     #fdf8f9;
  --vt-soft:      #f3eef9;
  --vt-navy:      #2c3e6b;
  --vt-text:      #1f1933;
  --vt-muted:     #8b7fa6;
  --vt-line:      rgba(123,104,179,0.14);
  --vt-glow:      rgba(123,104,179,0.22);
  --vt-sh-card:
    0 24px 50px -20px rgba(58,47,78,0.20),
    0 14px 32px -18px rgba(58,47,78,0.16),
    0 4px 10px -4px rgba(58,47,78,0.08),
    inset 0 1px 0 rgba(255,255,255,0.95);
  --vt-sh-hover:
    0 40px 70px -22px rgba(58,47,78,0.28),
    0 22px 44px -20px rgba(58,47,78,0.20),
    0 8px 16px -8px rgba(58,47,78,0.12),
    inset 0 1px 0 rgba(255,255,255,0.95);
  --vt-sh-soft:
    0 10px 28px -10px rgba(58,47,78,0.16),
    0 4px 12px -6px rgba(58,47,78,0.08);
}

/* ═══ Body + tipografía global (NO afecta #page-vendedora) ═══ */
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  background: radial-gradient(circle at 100% 0%, #fce8f0 0%, transparent 38%),
              radial-gradient(circle at 0% 100%, #e8e0f5 0%, transparent 50%),
              var(--vt-cream) !important;
  letter-spacing: -0.005em;
}
body :not(#page-vendedora):not(#page-vendedora *):not(#gsc-chat-panel):not(#gsc-chat-panel *):not(#gsc-chat-btn):not(#gsc-chat-btn *) {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}
/* Tighter letter-spacing on headings */
h1, h2, h3, h4, .auth-title, .page-header h2 {
  letter-spacing: -0.025em;
}

/* ═══ Header global (.site-header) ═══ */
.site-header {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--vt-line) !important;
  box-shadow: 0 2px 20px rgba(58,47,78,0.05);
}
.logo-icon {
  background: linear-gradient(135deg, var(--vt-purple), var(--vt-purple-dk)) !important;
  box-shadow: 0 6px 16px var(--vt-glow), inset 0 1px 0 rgba(255,255,255,0.25);
}
.logo-text h1 { font-weight: 800 !important; }

/* ═══ Nav buttons del header ═══ */
.nav-btn {
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 9px 18px !important;
  transition: all .18s ease !important;
}
.nav-btn:hover {
  background: var(--vt-purple-lt) !important;
  color: var(--vt-purple-dk) !important;
}
.nav-btn.active {
  background: var(--vt-purple) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px var(--vt-glow);
}
.nav-logout {
  background: var(--vt-purple-lt) !important;
  color: var(--vt-purple-dk) !important;
}
.nav-logout:hover {
  background: var(--vt-purple) !important;
  color: #fff !important;
}

/* ═══ Auth card ═══ */
.auth-card {
  border-radius: 28px !important;
  box-shadow: var(--vt-sh-card) !important;
  border: 1px solid rgba(255,255,255,0.7);
}
.auth-logo {
  background: linear-gradient(135deg, var(--vt-purple), var(--vt-purple-dk)) !important;
  box-shadow: 0 10px 24px var(--vt-glow);
}

/* ═══ HOME (cliente / escuela) cards ═══ */
.home-hero {
  background: linear-gradient(135deg, var(--vt-purple-dk) 0%, var(--vt-purple) 55%, var(--vt-rose) 100%) !important;
  border-radius: 0 0 32px 32px;
  padding: 38px 24px 40px !important;
  position: relative;
  overflow: hidden;
}
.home-hero::after {
  content: ''; position: absolute;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%);
  top: -100px; right: -80px; pointer-events: none;
}
.home-name {
  font-weight: 800 !important;
  letter-spacing: -0.035em;
  font-size: clamp(1.6rem, 4vw, 2.2rem) !important;
}
.home-avatar {
  background: rgba(255,255,255,0.22) !important;
  border: 2px solid rgba(255,255,255,0.35);
}
.home-card {
  border-radius: 26px !important;
  box-shadow: var(--vt-sh-card) !important;
  border: 1px solid rgba(255,255,255,0.7);
  transition: all .25s cubic-bezier(.2,.8,.2,1) !important;
}
.home-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--vt-sh-hover) !important;
}
.home-card::before {
  width: 6px !important;
}
.hc-icon {
  border-radius: 16px !important;
  box-shadow: 0 6px 14px rgba(58,47,78,0.08);
}

/* ═══ BUTTONS estilo pill ═══ */
.btn {
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--vt-purple) 0%, var(--vt-purple-dk) 100%) !important;
  box-shadow: 0 10px 24px -8px var(--vt-glow), 0 4px 8px -4px rgba(123,104,179,0.20), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.btn-primary:hover {
  box-shadow: 0 14px 30px -10px var(--vt-glow), 0 6px 12px -6px rgba(123,104,179,0.28), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.btn-secondary {
  background: var(--vt-navy) !important;
  border-radius: 999px !important;
}
.btn-outline {
  border-radius: 999px !important;
  border: 1.5px solid var(--vt-line) !important;
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(10px);
}
.btn-outline:hover {
  background: #fff !important;
  border-color: var(--vt-purple) !important;
  color: var(--vt-purple-dk) !important;
}

.btn-volver {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(10px);
  border: 1px solid var(--vt-line) !important;
  border-radius: 999px !important;
  color: var(--vt-purple-dk) !important;
  font-weight: 700 !important;
  box-shadow: var(--vt-sh-soft);
}

/* ═══ ADMIN TABS (estilo pills tipo Vision Pro) ═══ */
.admin-tab-nav {
  display: inline-flex !important;
  flex-wrap: wrap;
  gap: 4px !important;
  padding: 5px !important;
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.8) !important;
  border-radius: 999px !important;
  box-shadow: var(--vt-sh-soft), inset 0 1px 0 rgba(255,255,255,0.6);
  margin-bottom: 22px;
}
.admin-tab-btn {
  background: transparent !important;
  border: 0 !important;
  color: var(--vt-muted) !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: .85rem !important;
  cursor: pointer;
  transition: all .2s ease !important;
  letter-spacing: -0.01em;
}
.admin-tab-btn:hover { color: var(--vt-purple-dk) !important; }
.admin-tab-btn.atb-active {
  background: var(--vt-purple) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px var(--vt-glow), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

/* ═══ Inputs / selects / textareas global ═══ */
input:not([type='checkbox']):not([type='radio']):not(#page-vendedora input):not(#gsc-chat-panel input),
select:not(#page-vendedora select):not(#gsc-chat-panel select),
textarea:not(#page-vendedora textarea):not(#gsc-chat-panel textarea) {
  border-radius: 12px !important;
  border: 1.5px solid var(--vt-line) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: .92rem !important;
  transition: all .2s ease !important;
}
input:focus:not([type='checkbox']):not([type='radio']):not(#page-vendedora input):not(#gsc-chat-panel input),
select:focus:not(#page-vendedora select):not(#gsc-chat-panel select),
textarea:focus:not(#page-vendedora textarea):not(#gsc-chat-panel textarea) {
  border-color: var(--vt-purple) !important;
  box-shadow: 0 0 0 3px var(--vt-glow) !important;
  background: #fff !important;
}

label {
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: var(--vt-purple-dk) !important;
}

/* ═══ Cards genéricos (.card-like detection con background blanco + border-radius) ═══ */
/* No podemos seleccionar todo, así que pegamos los más usados */
.section, .card, .panel,
.admin-card, .escuelas-card, .pedido-card,
.adm-card, .at-card, .stat-card, .esc-card, .col-card {
  border-radius: 22px !important;
  box-shadow: var(--vt-sh-soft) !important;
  border: 1px solid rgba(255,255,255,0.7);
  transition: all .25s ease !important;
}
.admin-card:hover, .escuelas-card:hover, .pedido-card:hover,
.adm-card:hover, .at-card:hover, .esc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--vt-sh-card) !important;
}

/* ═══ Section heads / titles ═══ */
.sec-head {
  border-radius: 18px !important;
}
.ic-rose { background: var(--vt-purple-lt) !important; color: var(--vt-purple-dk) !important; }
.ic-navy { background: rgba(58,47,78,.08) !important; }
.ic-gold { background: #fce8f0 !important; color: var(--vt-rose-dk) !important; }

/* ═══ Filtros del admin ═══ */
.admin-filtros, .at-filters {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(12px);
  border-radius: 18px !important;
  box-shadow: var(--vt-sh-soft);
  border: 1px solid rgba(255,255,255,0.7);
}
.at-filter-input, .admin-filtros input, .admin-filtros select {
  border-radius: 999px !important;
}

/* ═══ Modal overlay ═══ */
.modal-overlay {
  background: rgba(28,20,32,0.55) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal, #modalBox {
  border-radius: 28px !important;
  box-shadow: var(--vt-sh-hover) !important;
  border: 1px solid rgba(255,255,255,0.7);
}

/* ═══ Toast ═══ */
.toast-msg {
  border-radius: 999px !important;
  box-shadow: var(--vt-sh-card) !important;
  backdrop-filter: blur(14px);
  font-weight: 700 !important;
}

/* ═══ Tables más limpias ═══ */
table {
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow: var(--vt-sh-soft);
}
thead tr {
  background: linear-gradient(135deg, var(--vt-purple-dk), var(--vt-navy)) !important;
}
tbody tr:hover { background: var(--vt-soft) !important; }

/* ═══ Badges / chips ═══ */
.badge, .chip, .estado-pill, .at-chip {
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* ═══ Loading state ═══ */
.loading-state {
  color: var(--vt-muted) !important;
  font-weight: 600;
  padding: 40px !important;
}

/* ═══ Resumen dashboard cards ═══ */
.adm-stat-card, .dashboard-card, .stat-card {
  background: #fff !important;
  border-radius: 22px !important;
  box-shadow: var(--vt-sh-card) !important;
  border: 1px solid rgba(255,255,255,0.7);
}

/* ═══ Header de páginas (.page-header) ═══ */
.page-header {
  border-bottom: 0 !important;
  padding-bottom: 16px !important;
}
.page-header h2 {
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--vt-navy) !important;
}

/* ═══ Mobile menu ═══ */
.mobile-menu {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(20px);
  border-radius: 0 0 24px 24px !important;
  box-shadow: var(--vt-sh-soft);
}
.mob-btn {
  border-radius: 14px !important;
}

/* ═══ Login form ═══ */
#formLogin .field input {
  border-radius: 14px !important;
}
.btn-block {
  border-radius: 16px !important;
}

/* ═══ Detalle pedido (cliente) ═══ */
#detalleContenido > div {
  border-radius: 22px !important;
}

/* ═══════════════════════════════════════════════
   ROL PRODUCCIÓN — ocultar finanzas/ganancias
   ═══════════════════════════════════════════════ */
body.rol-produccion #atb-finanzas,
body.rol-produccion #atab-finanzas,
body.rol-produccion #atb-comisiones,
body.rol-produccion #atab-comisiones,
body.rol-produccion #atb-escuelas,
body.rol-produccion #atab-escuelas,
body.rol-produccion #atb-usuarios,
body.rol-produccion #atab-usuarios,
body.rol-produccion #atb-config,
body.rol-produccion #atab-config,
body.rol-produccion #atb-calzado,
body.rol-produccion #atab-calzado,
body.rol-produccion #atb-resumen,
body.rol-produccion #atab-resumen,
body.rol-produccion #atb-mapa,
body.rol-produccion #atab-mapa,
body.rol-produccion #atb-entregas,
body.rol-produccion #atab-entregas {
  display: none !important;
}

/* Ocultar barra Excel financiero y enlaces de estado-cuenta */
body.rol-produccion a[href*='excel-finanzas'],
body.rol-produccion a[href*='estado-cuenta'],
body.rol-produccion [data-hide-prod] {
  display: none !important;
}

/* Si producción ve detalle de pedido del admin, ocultar bloques de finanzas */
/* Buscar elementos por palabras clave en su contenido es imposible en CSS puro;
   pero podemos ocultar elementos comunes que tengan ciertos data attributes
   o que estén dentro de #adminFinanzasContenido (no aplica en detalle directo) */

/* ═══════════════════════════════════════════════
   TABLET (≤900px) — colapsa grids de 3 a 2 cols
   ═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  #page-admin [style*='grid-template-columns:repeat(3'],
  #page-admin [style*='grid-template-columns: repeat(3'] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════
   FIXES MÓVIL (≤640px) — pasada comprensiva
   ═══════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* — LAYOUT GENERAL — */
  body { font-size: 15px; }
  #page-admin .page-inner, #page-nuevo .page-inner,
  #page-detalle .page-inner, #page-perfil .page-inner,
  #page-pedidos .page-inner, #page-escuelas .page-inner {
    padding: 14px 12px !important;
  }
  .page-header { gap: 8px !important; flex-wrap: wrap !important; }
  .page-header h2 { font-size: 1.15rem !important; }

  /* — HEADER GLOBAL — */
  .site-header { padding: 0 14px !important; height: 56px !important; }
  .logo-text h1 { font-size: .9rem !important; }
  .logo-text p { font-size: .7rem !important; }

  /* — ADMIN TABS — scroll horizontal compacto */
  .admin-tab-nav {
    width: 100% !important;
    border-radius: 18px !important;
    padding: 5px !important;
    gap: 4px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    white-space: nowrap !important;
  }
  .admin-tab-btn {
    padding: 7px 13px !important;
    font-size: .76rem !important;
    flex-shrink: 0 !important;
  }

  /* — STAT CARDS — */
  .stat-card, .adm-stat-card, .dashboard-card,
  .adm-card, .at-card {
    padding: 16px 18px !important;
    border-radius: 18px !important;
  }
  .stat-num, .adm-stat-num, [class*='stat-val'] { font-size: 1.7rem !important; }

  /* — HOME HERO — */
  .home-hero { padding: 26px 18px 28px !important; border-radius: 0 0 22px 22px; }
  .home-name { font-size: 1.4rem !important; }
  .home-cards { padding: 18px 14px 40px !important; }
  .home-card { padding: 18px 16px !important; border-radius: 20px !important; }
  .hc-icon { width: 44px !important; height: 44px !important; font-size: 22px !important; }
  .home-card h3 { font-size: 1rem !important; }
  .home-card p { font-size: .82rem !important; }

  /* — TODOS los grids inline 1fr 1fr → 1 columna en mobile — */
  #page-admin [style*='grid-template-columns:1fr 1fr'],
  #page-admin [style*='grid-template-columns: 1fr 1fr'],
  #page-admin [style*='grid-template-columns:1fr 1fr 1fr'],
  #page-admin [style*='grid-template-columns: 1fr 1fr 1fr'],
  #page-nuevo [style*='grid-template-columns:1fr 1fr'],
  #page-nuevo [style*='grid-template-columns:1fr 1fr 1fr'],
  #formPedido [style*='grid-template-columns:1fr 1fr'],
  #formPedido [style*='grid-template-columns: 1fr 1fr'],
  #formPedido [style*='grid-template-columns:1fr 1fr 1fr'],
  #formPedido [style*='grid-template-columns:2fr 1fr 1fr'] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* — FORM PEDIDO — inputs/selects sin desborde */
  #formPedido select,
  #formPedido input[type="text"],
  #formPedido input[type="number"],
  #formPedido input[type="date"],
  #formPedido input[type="email"],
  #formPedido input[type="tel"],
  #formPedido textarea {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 16px !important;  /* 16px evita zoom iOS */
    padding: 9px 11px !important;
    box-sizing: border-box !important;
  }
  #formPedido [style*='border-radius:16px'],
  #formPedido [style*='border-radius:14px'] {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  /* — TABLAS — scroll horizontal forzado */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  th, td { font-size: .8rem !important; padding: 8px 10px !important; }

  /* — FILTROS — bar wrap limpio */
  .admin-filtros, .at-filters,
  [class*='filtros'], [class*='filter-bar'] {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  .admin-filtros input, .admin-filtros select,
  .at-filter-input {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }

  /* — INPUTS GLOBALES — 16px para no zoom iOS */
  input:not([type='checkbox']):not([type='radio']),
  select, textarea {
    font-size: 16px !important;
  }

  /* — BUTTONS — touch-friendly */
  .btn { min-height: 42px; padding: 10px 18px !important; font-size: .9rem !important; }
  .btn-sm { min-height: 36px; padding: 8px 14px !important; font-size: .82rem !important; }
  .nav-btn { padding: 8px 14px !important; font-size: .82rem !important; }

  /* — MODAL — full width mobile */
  .modal, #modalBox {
    width: calc(100vw - 20px) !important;
    max-width: none !important;
    max-height: calc(100vh - 30px) !important;
    border-radius: 22px !important;
    overflow-y: auto;
  }

  /* — CARDS DE PEDIDOS (admin lista) — */
  .adm-card, .pedido-card {
    padding: 14px !important;
  }
  .adm-card-title, .pedido-card-title { font-size: .95rem !important; }
  .adm-card-meta, .pedido-card-meta { font-size: .76rem !important; }

  /* — INVENTARIO — tabla más compacta */
  #atab-inventario table, .inv-table {
    font-size: .78rem !important;
  }
  #atab-inventario input { font-size: 14px !important; padding: 6px 8px !important; }
  #atab-inventario button { padding: 6px 10px !important; font-size: .72rem !important; }

  /* — DETALLE PEDIDO (admin) — */
  #detalleContenido, #adminFinanzasContenido {
    padding: 0 !important;
  }
  #detalleContenido > div, #adminFinanzasContenido > div {
    padding: 14px !important;
  }

  /* — TOAST — */
  #toast { left: 12px !important; right: 12px !important; bottom: 12px !important; }
  .toast-msg { padding: 12px 16px !important; font-size: .88rem !important; }

  /* — VENDEDORA (la nuestra ya está bien pero por si acaso) — */
  #page-vendedora .vp-shell { padding: 0 14px !important; }
  #page-vendedora .vp-card { padding: 18px !important; }

  /* — COMBINACIONES / CALZADO — */
  #atab-calzado [style*='grid-template-columns:1fr auto 1fr'] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Ocultar separador vertical en mobile */
  #atab-calzado [style*='width:1px;background:#f0e0f0'] {
    display: none !important;
  }
  /* Stat cards de combinaciones: compactos en fila horizontal */
  #atab-calzado #calRes-nina,
  #atab-calzado #calRes-nino {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #atab-calzado #calRes-nina > div,
  #atab-calzado #calRes-nino > div {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
  /* Reducir font del número de la stat card */
  #atab-calzado #calRes-nina [style*='font-size:1.6rem'],
  #atab-calzado #calRes-nino [style*='font-size:1.6rem'],
  #atab-calzado [style*='font-size:1.8rem'] {
    font-size: 1.2rem !important;
  }
  /* Tabla combinaciones: scroll horizontal visible con hint */
  #atab-calzado [style*='overflow-x:auto'] {
    border-bottom: 1px dashed rgba(123,104,179,0.3);
    position: relative;
  }
  #atab-calzado table { font-size: .72rem !important; }
  #atab-calzado th, #atab-calzado td {
    padding: 7px 8px !important;
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════
   MUY ESTRECHO (≤380px) — phones pequeños
   ═══════════════════════════════════════════════ */
@media (max-width: 380px) {
  .admin-tab-btn { padding: 6px 10px !important; font-size: .72rem !important; }
  .stat-num, .adm-stat-num, [class*='stat-val'] { font-size: 1.5rem !important; }
  .home-name { font-size: 1.25rem !important; }
  .page-header h2 { font-size: 1rem !important; }
  .btn { font-size: .85rem !important; }
}