/* ═══════════════════════════════════════════════════════════════════════════
   AR SPORTS — DESIGN SYSTEM
   Hoja de estilos compartida para todas las apps del sistema.
   Versión: 1.1.0
   Última actualización: 2026-05-22

   v1.1.0 — Identidad de marca: paleta monocromática (negro/blanco/gris)
            con acentos neón por módulo. Header oscuro con logos AR.
            Marca controlada 100% desde las variables :root.

   Importar en cada HTML con:
     <link rel="stylesheet" href="./ar_sports_design.css">

   Apps que la consumen:
   - ar_inventario.html (almacén)
   - comanda_ar_sports.html (taller)
   - comanda_suc_centro.html (sucursal centro)
   - comanda_suc_rincon.html (sucursal del rincón)
   - control_produccion.html (taller — flujo de órdenes)
   - sistema_ventas.html (POS)
   - programa_maestro.html (hub administrativo)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────────────
   1. VARIABLES (TOKENS DEL SISTEMA)
   ────────────────────────────────────────────────────────────────────────── */
:root{
  /* Marca — monocromática (v1.1.0). Antes: azul #378ADD */
  --primary:        #1a1a1a;
  --primary-dark:   #000000;
  --primary-light:  #f0f0f0;

  /* Acentos NEÓN por módulo (señal de identidad, uso puntual) */
  --neon-taller:      #00E0C6;  /* cian   — taller / producción   */
  --neon-pers:        #9D5CFF;  /* violeta— personalizados        */
  --neon-sucursal:    #00E676;  /* verde  — sucursales            */
  --neon-inventario:  #FFB300;  /* ámbar  — inventario / almacén  */
  --neon-ventas:      #2979FF;  /* azul   — ventas / cotizaciones */
  --neon-admin:       #FF1744;  /* rojo   — administración        */

  /* Header oscuro (topbar) */
  --topbar-bg:        #141414;
  --topbar-text:      #ffffff;
  --topbar-muted:     #9a9a9a;
  --topbar-border:    #2a2a2a;

  /* Estados semánticos */
  --green:          #1D9E75;
  --green-light:    #E6F7F1;
  --red:            #A32D2D;
  --red-light:      #FAF0F0;
  --amber:          #854F0B;
  --amber-light:    #FEF3C7;
  --purple:         #7F77DD;
  --purple-light:   #EEEDFE;

  /* Categorías especiales (uniformes) */
  --portero-bg:     #FFF8E6;
  --portero-border: #FAC775;
  --portero-text:   #854F0B;
  --dama-bg:        #EEEDFE;
  --dama-border:    #AFA9EC;
  --dama-text:      #3C3489;
  --nino-bg:        #EAF3DE;
  --nino-border:    #C0DD97;
  --nino-text:      #3B6D11;

  /* Neutros */
  --bg:             #f5f6f8;
  --bg-soft:        #fafafa;
  --bg-muted:       #f5f5f5;
  --white:          #ffffff;
  --border:         #e5e5e5;
  --border-soft:    #ddd;
  --border-focus:   #1a1a1a;

  /* Texto */
  --text:           #1a1a1a;
  --muted:          #888888;
  --subtle:         #bbbbbb;

  /* Geometría */
  --radius-sm:      6px;
  --radius:         8px;
  --radius-lg:      12px;
  --radius-xl:      16px;

  /* Sombras */
  --shadow-sm:      0 1px 2px rgba(0,0,0,.04);
  --shadow:         0 1px 3px rgba(0,0,0,.08);
  --shadow-lg:      0 8px 32px rgba(0,0,0,.15);

  /* Tipografía */
  --font-base:      system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:      "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Capas */
  --z-header:       100;
  --z-overlay:      200;
  --z-toast:        300;
  --z-print:        9999;

  /* Transiciones */
  --t-fast:         .15s ease;
  --t-base:         .2s ease;
}


/* ──────────────────────────────────────────────────────────────────────────
   2. RESET & BASE
   ────────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html{
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body{
  background: var(--white);
  color: var(--text);
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Algunas apps usan fondo gris (sistema_ventas) — clase opcional */
body.app-bg-soft{ background: var(--bg); }

a{ color: var(--primary); text-decoration: none; }
a:hover{ text-decoration: underline; }

img{ max-width: 100%; height: auto; display: block; }

button{ font-family: inherit; }

/* Scrollbar discreta (navegadores webkit) */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover{ background: var(--subtle); }


/* ──────────────────────────────────────────────────────────────────────────
   3. HEADER STICKY (PATRÓN COMÚN) — v1.1.0 oscuro + acento por módulo
   ────────────────────────────────────────────────────────────────────────── */
.app-header{
  --mod-accent: var(--neon-taller);     /* default; se sobreescribe por .mod-* */
  background: var(--topbar-bg);
  color: var(--topbar-text);
  border-bottom: 1px solid var(--topbar-border);
  border-top: 3px solid var(--mod-accent);
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

/* Acento neón por módulo: se aplica la clase junto a .app-header */
.app-header.mod-taller      { --mod-accent: var(--neon-taller); }
.app-header.mod-pers        { --mod-accent: var(--neon-pers); }
.app-header.mod-sucursal    { --mod-accent: var(--neon-sucursal); }
.app-header.mod-inventario  { --mod-accent: var(--neon-inventario); }
.app-header.mod-ventas      { --mod-accent: var(--neon-ventas); }
.app-header.mod-admin       { --mod-accent: var(--neon-admin); }

/* Bloque de logos (pez + monograma juntos) */
.app-header .ar-logos{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.app-header .ar-logos img{
  height: 30px;
  width: auto;
  display: block;
}
/* Separador opcional entre logos y título */
.app-header .ar-logos + .logo{
  padding-left: 14px;
  margin-left: 4px;
  border-left: 1px solid var(--topbar-border);
}

.app-header .logo{
  font-size: 16px;
  font-weight: 600;
  color: var(--topbar-text);
  letter-spacing: -.01em;
}
/* Antes el span iba en azul; ahora toma el neón del módulo */
.app-header .logo span{ color: var(--mod-accent); }

.header-actions{
  display: flex;
  align-items: center;
  gap: 8px;
}

.back-link{
  font-size: 12px;
  color: var(--topbar-muted);
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid var(--topbar-border);
  border-radius: var(--radius-sm);
  transition: color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.back-link:hover{
  color: var(--mod-accent);
  border-color: var(--mod-accent);
  text-decoration: none;
}


/* ──────────────────────────────────────────────────────────────────────────
   4. SIDEBAR / NAV (OPCIONAL)
   ────────────────────────────────────────────────────────────────────────── */
.app-sidebar{
  background: var(--white);
  border-right: 1px solid var(--border);
  width: 220px;
  padding: 16px 12px;
}

.nav-dot{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast);
  text-decoration: none;
}
.nav-dot:hover{ background: var(--bg-muted); color: var(--text); text-decoration: none; }
.nav-dot.active{ background: var(--primary-light); color: var(--primary); }
.nav-dot::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}


/* ──────────────────────────────────────────────────────────────────────────
   5. LAYOUT (MAIN, SECTIONS)
   ────────────────────────────────────────────────────────────────────────── */
.main{
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 20px;
}

.main--wide{ max-width: 1400px; }
.main--narrow{ max-width: 800px; }

.section{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  overflow: hidden;
}

.section-header{
  background: var(--white);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}

.section-title{
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.section-body{
  padding: 18px;
}


/* ──────────────────────────────────────────────────────────────────────────
   6. BOTONES
   ────────────────────────────────────────────────────────────────────────── */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 13px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  cursor: pointer;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  transition: all var(--t-fast);
  white-space: nowrap;
  user-select: none;
}
.btn:hover{ background: var(--bg-muted); }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity: .4; cursor: not-allowed; }
.btn:disabled:hover{ background: transparent; }

/* Variantes */
.btn-primary,
.btn-gold{
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary-dark);
}
.btn-primary:hover,
.btn-gold:hover{ background: var(--primary-dark); }

.btn-outline{
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}
.btn-outline:hover{ background: var(--primary-light); }

.btn-ghost{
  background: var(--bg-muted);
  color: var(--muted);
  border: 1px solid var(--border);
}
.btn-ghost:hover{ color: var(--text); }

.btn-success{
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}
.btn-success:hover{ filter: brightness(.92); }

.btn-danger{
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
.btn-danger:hover{ filter: brightness(.92); }

/* Tamaños */
.btn-sm{ padding: 3px 9px; font-size: 11px; }
.btn-lg{ padding: 10px 22px; font-size: 14px; }

/* Botón circular / icono */
.btn-icon{
  width: 32px;
  height: 32px;
  padding: 0;
  justify-content: center;
}


/* ──────────────────────────────────────────────────────────────────────────
   7. INPUTS / FORMULARIOS
   ────────────────────────────────────────────────────────────────────────── */
.field{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.field label,
.field-label{
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.input,
.field input,
.field select,
.field textarea{
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  width: 100%;
}
.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.field textarea{ min-height: 70px; resize: vertical; }

.field-hint{
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.field-error{
  font-size: 11px;
  color: var(--red);
  margin-top: 2px;
}


/* ──────────────────────────────────────────────────────────────────────────
   8. TABLAS
   ────────────────────────────────────────────────────────────────────────── */
.table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table thead th{
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.table tbody td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.table tbody tr{ transition: background var(--t-fast); }
.table tbody tr:hover{ background: var(--bg-soft); }
.table tbody tr:last-child td{ border-bottom: none; }

.table .num{ text-align: right; font-variant-numeric: tabular-nums; }
.table .center{ text-align: center; }


/* ──────────────────────────────────────────────────────────────────────────
   9. METRIC CARDS
   ────────────────────────────────────────────────────────────────────────── */
.metric-card{
  background: var(--bg-muted);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.metric-card .label{
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.metric-card .value{
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.metric-card .delta{
  font-size: 11px;
  color: var(--muted);
}
.metric-card .delta.up{ color: var(--green); }
.metric-card .delta.down{ color: var(--red); }


/* ──────────────────────────────────────────────────────────────────────────
   10. BADGES
   ────────────────────────────────────────────────────────────────────────── */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text);
  border: 1px solid var(--border);
  letter-spacing: .02em;
}
.badge-ok,
.badge-success{ background: var(--green-light); color: var(--green); border-color: transparent; }
.badge-warn,
.badge-amber{ background: var(--amber-light); color: var(--amber); border-color: transparent; }
.badge-err,
.badge-danger{ background: var(--red-light); color: var(--red); border-color: transparent; }
.badge-info{ background: var(--primary-light); color: var(--primary); border-color: transparent; }
.badge-purple{ background: var(--purple-light); color: var(--purple); border-color: transparent; }

/* Categorías especiales (uniformes) */
.badge-portero{ background: var(--portero-bg); color: var(--portero-text); border-color: var(--portero-border); }
.badge-dama{ background: var(--dama-bg); color: var(--dama-text); border-color: var(--dama-border); }
.badge-nino{ background: var(--nino-bg); color: var(--nino-text); border-color: var(--nino-border); }


/* ──────────────────────────────────────────────────────────────────────────
   11. OVERLAYS / MODALES
   ────────────────────────────────────────────────────────────────────────── */
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.overlay.hidden{ display: none; }

.modal{
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  width: 460px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal-tag{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.modal h3,
.modal-title{
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}
.modal p,
.modal-desc{
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
  line-height: 1.5;
}
.modal-actions{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* Variantes contextuales */
.modal.danger .modal-tag{ color: var(--red); }
.modal.admin  .modal-tag{ color: var(--purple); }
.modal.warn   .modal-tag{ color: var(--amber); }


/* ──────────────────────────────────────────────────────────────────────────
   12. INDICADOR DE SYNC (CONEXIÓN A SUPABASE)
   ────────────────────────────────────────────────────────────────────────── */
.sync-indicator{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}
.sync-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--subtle);
  transition: background var(--t-base);
}
.sync-dot.ok{ background: var(--green); }
.sync-dot.busy{ background: #f0b429; animation: sync-pulse 1s ease-in-out infinite; }
.sync-dot.err{ background: var(--red); }
.sync-dot.off{ background: var(--subtle); }

@keyframes sync-pulse{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .35; }
}


/* ──────────────────────────────────────────────────────────────────────────
   13. TOAST (NOTIFICACIONES)
   ────────────────────────────────────────────────────────────────────────── */
.toast{
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--text);
  color: var(--white);
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-toast);
  opacity: 0;
  transition: all var(--t-base);
  pointer-events: none;
  max-width: 90vw;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.toast-ok{ background: var(--green); }
.toast.toast-err{ background: var(--red); }
.toast.toast-warn{ background: var(--amber); }
.toast.toast-info{ background: var(--primary); }


/* ──────────────────────────────────────────────────────────────────────────
   14. UTILIDADES
   ────────────────────────────────────────────────────────────────────────── */
.hidden{ display: none !important; }
.invisible{ visibility: hidden; }

.flex{ display: flex; }
.flex-col{ display: flex; flex-direction: column; }
.items-center{ align-items: center; }
.justify-between{ justify-content: space-between; }
.justify-end{ justify-content: flex-end; }
.gap-1{ gap: 4px; }
.gap-2{ gap: 8px; }
.gap-3{ gap: 12px; }
.gap-4{ gap: 16px; }

.text-muted{ color: var(--muted); }
.text-subtle{ color: var(--subtle); }
.text-primary{ color: var(--primary); }
.text-green{ color: var(--green); }
.text-red{ color: var(--red); }
.text-amber{ color: var(--amber); }

.text-xs{ font-size: 11px; }
.text-sm{ font-size: 12px; }
.text-base{ font-size: 14px; }
.text-lg{ font-size: 16px; }
.text-xl{ font-size: 20px; }

.font-medium{ font-weight: 500; }
.font-semibold{ font-weight: 600; }
.font-bold{ font-weight: 700; }

.uppercase{ text-transform: uppercase; letter-spacing: .05em; }

.tabular{ font-variant-numeric: tabular-nums; }

.mt-1{ margin-top: 4px; } .mt-2{ margin-top: 8px; } .mt-3{ margin-top: 12px; } .mt-4{ margin-top: 16px; }
.mb-1{ margin-bottom: 4px; } .mb-2{ margin-bottom: 8px; } .mb-3{ margin-bottom: 12px; } .mb-4{ margin-bottom: 16px; }


/* ──────────────────────────────────────────────────────────────────────────
   15. IMPRESIÓN
   ────────────────────────────────────────────────────────────────────────── */
@media print{
  .no-print,
  .app-header,
  .app-sidebar,
  .header-actions,
  .toast,
  .overlay,
  button:not(.print-allow){
    display: none !important;
  }

  body{ background: white; }
  .section{ border: 1px solid #ccc; box-shadow: none; }
  .main{ max-width: none; padding: 0; }

  @page{ margin: 1.5cm; }
}


/* ──────────────────────────────────────────────────────────────────────────
   16. RESPONSIVE (MOBILE — sucursales en tablet/teléfono)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px){
  .app-header{
    padding: 0 14px;
    height: 52px;
  }
  .app-header .logo{ font-size: 14px; }
  .back-link{ font-size: 11px; padding: 4px 8px; }

  .main{ padding: 14px 12px; }
  .section{ border-radius: var(--radius); }

  .modal{
    padding: 22px 20px;
    width: 95vw;
  }

  .btn{ padding: 7px 12px; font-size: 12px; }

  .table thead{ display: none; }
  .table tbody td{ padding: 8px 10px; }
}

/* Fin del archivo ────────────────────────────────────────────────────────── */