/* ═══════════════════════════════════════════════════════════════
   SQALA DESIGN SYSTEM v1.0
   Fuente única de verdad para todos los paneles y módulos.
   Importar en todos los index.html / head.php
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@700&family=Poppins:wght@400;500;600&display=swap');

/* ── TOKENS ──────────────────────────────────────────────────── */
:root {
  --sq-primary:       #c00060;
  --sq-primary-dark:  #8a0044;
  --sq-primary-light: #ff80b0;
  --sq-secondary:     #deff00;
  --sq-secondary-dark:#b8d400;
  --sq-bg:            #0d0d0d;
  --sq-surface-1:     #141414;
  --sq-surface-2:     #1a1a1a;
  --sq-surface-3:     #252525;
  --sq-border:        #2a2a2a;
  --sq-text:          #ffffff;
  --sq-text-muted:    #888888;
  --sq-text-faint:    #555555;
  --sq-light-bg:      #ffffff;
  --sq-light-surface: #f9f9f9;
  --sq-light-border:  #eeeeee;
  --sq-light-text:    #111111;
  --sq-light-muted:   #6b7280;
  --sq-success:       #22c55e;
  --sq-warning:       #f59e0b;
  --sq-error:         #ef4444;
  --sq-info:          #38bdf8;
  --sq-font-title:    'Hepta Slab', serif;
  --sq-font-body:     'Poppins', sans-serif;
  --sq-radius-sm:     8px;
  --sq-radius-md:     12px;
  --sq-radius-lg:     16px;
  --sq-radius-xl:     20px;
}

/* ── TIPOGRAFÍA GLOBAL ───────────────────────────────────────── */
body { font-family: var(--sq-font-body) !important; }
h1,h2,h3,h4,h5,.sq-title {
  font-family: var(--sq-font-title) !important;
  font-weight: 700 !important;
}

/* ── COMPONENTE: HEADER DE PANEL ─────────────────────────────── */
.sq-panel-header { display:flex; align-items:center; gap:10px; }
.sq-panel-logo { height:32px; width:auto; flex-shrink:0; filter:brightness(0) invert(1); }
.sq-panel-logo--light { filter:none; }
.sq-panel-name {
  font-family: var(--sq-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--sq-primary) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.sq-panel-user {
  font-family: var(--sq-font-body) !important;
  font-size: 11px !important;
  color: var(--sq-text-muted) !important;
  margin: 0 !important;
}

/* ── COMPONENTE: BOTONES ─────────────────────────────────────── */
.sq-btn-primary {
  background: var(--sq-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--sq-radius-md) !important;
  font-family: var(--sq-font-body) !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.sq-btn-primary:hover  { opacity:.88; }
.sq-btn-primary:active { transform:scale(.98); }
.sq-btn-secondary {
  background: var(--sq-secondary) !important;
  color: #111 !important;
  border: none !important;
  border-radius: var(--sq-radius-md) !important;
  font-family: var(--sq-font-body) !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: opacity .15s;
}
.sq-btn-secondary:hover { opacity:.88; }

/* ── TAILWIND INDIGO → PRIMARIO ──────────────────────────────── */
.bg-indigo-600,.bg-indigo-500                   { background-color:var(--sq-primary)      !important; }
.hover\:bg-indigo-500:hover,
.hover\:bg-indigo-600:hover                     { background-color:var(--sq-primary-dark) !important; }
.text-indigo-400                                { color:var(--sq-primary-light)           !important; }
.text-indigo-500,.text-indigo-600               { color:var(--sq-primary)                 !important; }
.border-indigo-500,.border-indigo-600           { border-color:var(--sq-primary)           !important; }
.ring-indigo-500                                { --tw-ring-color:var(--sq-primary)        !important; }
.focus\:ring-indigo-500:focus                   { --tw-ring-color:var(--sq-primary)        !important; }
.bg-indigo-500\/10,.bg-indigo-600\/10           { background-color:rgba(192,0,96,.10)      !important; }
.bg-indigo-500\/15                              { background-color:rgba(192,0,96,.15)      !important; }
.border-indigo-500\/30                          { border-color:rgba(192,0,96,.30)          !important; }
.bg-indigo-500\/20,.bg-indigo-600\/20           { background-color:rgba(192,0,96,.20)      !important; }

/* ── VERSION GLOBAL ──────────────────────────────────────────── */
.sq-version{font-size:11px;color:var(--sq-text-faint);font-family:var(--sq-font-body)}
.sq-version::after{content:'Sqala Ticket v2.1'}

/* ── MODAL SYSTEM ────────────────────────────────────────────── */
[x-cloak]{display:none!important}
.modal-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:0}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.modal-panel{position:relative;width:100%;background:#030712;border:1px solid rgb(31 41 55);border-radius:1.25rem 1.25rem 0 0;display:flex;flex-direction:column;max-height:90dvh;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,.6)}
.modal-panel-sm{max-width:100%}
.modal-panel-lg{max-width:100%}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.25rem;border-bottom:1px solid rgb(31 41 55);flex-shrink:0}
.modal-header h2{font-size:.9375rem;font-weight:700;color:#fff;margin:0;font-family:inherit}
.modal-header p{font-size:.75rem;color:rgb(107 114 128);margin:.15rem 0 0}
.modal-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1.1rem 1.25rem;overflow-x:hidden}
.modal-footer{display:flex;gap:.75rem;padding:1rem 1.25rem;border-top:1px solid rgb(31 41 55);flex-shrink:0}
.modal-close{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:.625rem;color:rgb(107 114 128);background:none;border:none;cursor:pointer;transition:background .15s,color .15s;flex-shrink:0}
.modal-close:hover{background:rgb(31 41 55);color:#fff}
.modal-close svg{width:1rem;height:1rem}
.modal-btn-primary{flex:1;background:#c00060;color:#fff;font-weight:600;border-radius:.75rem;padding:.75rem 1.25rem;font-size:.875rem;border:none;cursor:pointer;transition:background .15s,opacity .15s;font-family:inherit}
.modal-btn-primary:hover{background:#a0004d}
.modal-btn-primary:disabled{opacity:.4;cursor:not-allowed}
.modal-btn-secondary{padding:.75rem 1.25rem;background:rgb(31 41 55);color:rgb(209 213 219);font-weight:500;border-radius:.75rem;font-size:.875rem;border:none;cursor:pointer;transition:background .15s;font-family:inherit;white-space:nowrap}
.modal-btn-secondary:hover{background:rgb(55 65 81)}
.lbl{display:block;color:rgb(156 163 175);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}
.inp{width:100%;background-color:rgb(31 41 55);border:1px solid rgb(55 65 81);color:#fff;border-radius:.75rem;padding:.75rem 1rem;font-size:.875rem;outline:none;font-family:inherit;transition:box-shadow .15s,border-color .15s}
.inp:focus{box-shadow:0 0 0 2px rgba(192,0,96,.3);border-color:#c00060}
.inp::placeholder{color:rgb(75 85 99)}
select.inp{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.slide-up{animation:slideUp .2s ease both}
@media(min-width:640px){
  .modal-overlay{align-items:center;padding:1rem}
  .modal-panel{border-radius:1rem}
  .modal-panel-sm{max-width:32rem}
  .modal-panel-lg{max-width:42rem}
}

/* ── CURSOR E INTERACTIVIDAD GLOBAL ─────────────────────────── */
button,
[role="button"],
label[for],
select,
input[type="checkbox"],
input[type="radio"] {
  cursor: pointer;
}
a { cursor: pointer; }

/* ── ESTADOS ACTIVOS EN TABS Y MENÚS ────────────────────────── */
/* Tab activo — fondo primario + texto blanco */
.tab-active {
  background-color: var(--sq-primary) !important;
  color: #fff !important;
  font-weight: 600;
}
/* Tab inactivo — gris apagado */
.tab-inactive {
  color: rgb(107 114 128);
}
.tab-inactive:hover {
  color: rgb(209 213 219);
  background-color: rgba(255,255,255,.05);
}
/* Sidebar/nav ítem activo */
.nav-active {
  background-color: rgba(192,0,96,.15) !important;
  color: var(--sq-primary-light) !important;
  border-left: 2px solid var(--sq-primary);
}