/* ============================================================
   UBICACIÓN: public_html/farmapos.css
   FarmaPos — Design System v3.0
   "Swiss Watch Edition" — Apple × Notion × Linear
   
   Principios:
   1. Jerarquía clara — el ojo sabe qué leer primero
   2. Espacio generoso — respira, no ahoga
   3. Consistencia absoluta — mismos tokens en todo
   4. Performance — sin bloqueos, sin flashes
============================================================ */

/* ═══════════════════════════════════════════════════════════
   1. TOKENS — La única fuente de verdad
═══════════════════════════════════════════════════════════ */
:root, [data-theme="dark"] {
  /* Fondos — escala de profundidad */
  --bg-0:    #07070e;   /* base absoluta */
  --bg-1:    #0c0c16;   /* superficie */
  --bg-2:    #11111c;   /* card */
  --bg-3:    #171724;   /* elevado */
  --bg-4:    #1e1e2e;   /* hover / selected */

  /* Bordes */
  --line-0:  rgba(255,255,255,0.04);
  --line-1:  rgba(255,255,255,0.08);
  --line-2:  rgba(255,255,255,0.14);
  --line-3:  rgba(255,255,255,0.22);

  /* Texto — escala */
  --t-0:     #f4f4f8;   /* primary */
  --t-1:     #9898b2;   /* secondary */
  --t-2:     #8080a8;   /* muted — mejorado contraste 4.97:1 */
  --t-3:     #32324a;   /* disabled */

  /* Verde — acción principal */
  --g:       #00c896;
  --g-d:     #00a87e;
  --g-l:     #33d9ac;
  --g-bg:    rgba(0,200,150,0.08);
  --g-bd:    rgba(0,200,150,0.20);
  --g-glow:  rgba(0,200,150,0.25);

  /* Azul — info / links */
  --b:       #5b8fff;
  --b-bg:    rgba(91,143,255,0.09);
  --b-bd:    rgba(91,143,255,0.22);

  /* Rojo — peligro */
  --r:       #ff5757;
  --r-bg:    rgba(255,87,87,0.09);
  --r-bd:    rgba(255,87,87,0.22);

  /* Amarillo — advertencia */
  --y:       #ffb020;
  --y-bg:    rgba(255,176,32,0.09);
  --y-bd:    rgba(255,176,32,0.22);

  /* Morado — especial */
  --p:       #a78bfa;
  --p-bg:    rgba(167,139,250,0.09);
  --p-bd:    rgba(167,139,250,0.22);

  /* Sombras */
  --s-xs: 0 1px 3px rgba(0,0,0,0.5);
  --s-sm: 0 2px 8px rgba(0,0,0,0.5);
  --s-md: 0 4px 20px rgba(0,0,0,0.55);
  --s-lg: 0 8px 40px rgba(0,0,0,0.65);
  --s-xl: 0 20px 60px rgba(0,0,0,0.75);

  /* Radios */
  --rx-xs: 6px;
  --rx-sm: 10px;
  --rx:    14px;
  --rx-lg: 18px;
  --rx-xl: 24px;

  /* Topbar */
  --bar-h:  56px;
  --bar-bg: rgba(7,7,14,0.94);

  /* Transiciones */
  --ease:   cubic-bezier(0.4,0,0.2,1);
  --spring: cubic-bezier(0.34,1.56,0.64,1);
  --fast:   0.12s;
  --mid:    0.22s;
  --slow:   0.38s;

  /* Aliases para compatibilidad con código existente */
  --bg-base:        var(--bg-0);
  --bg-surface:     var(--bg-1);
  --bg-card:        var(--bg-2);
  --bg-elevated:    var(--bg-3);
  --bg-hover:       var(--bg-4);
  --border:         var(--line-1);
  --border-strong:  var(--line-2);
  --text-primary:   var(--t-0);
  --text-secondary: var(--t-1);
  --text-muted:     var(--t-2);
  --green:          var(--g);
  --green-d:        var(--g-d);
  --green-g:        linear-gradient(135deg,var(--g) 0%,var(--g-d) 100%);
  --green-glow:     var(--g-glow);
  --green-subtle:   var(--g-bg);
  --green-border:   var(--g-bd);
  --blue:           var(--b);
  --blue-s:         var(--b-bg);
  --blue-border:    var(--b-bd);
  --red:            var(--r);
  --red-s:          var(--r-bg);
  --red-border:     var(--r-bd);
  --yellow:         var(--y);
  --yellow-s:       var(--y-bg);
  --yellow-border:  var(--y-bd);
  --purple:         var(--p);
  --purple-s:       var(--p-bg);
  --shadow-sm:      var(--s-sm);
  --shadow-md:      var(--s-md);
  --shadow-lg:      var(--s-lg);
  --r-sm:           var(--rx-sm);
  --r:              var(--rx);
  --r-lg:           var(--rx-lg);
  --r-xl:           var(--rx-xl);
  --topbar-h:       var(--bar-h);
  --topbar-bg:      var(--bar-bg);
}

[data-theme="light"] {
  --bg-0:    #f0f2f7;
  --bg-1:    #f6f8fc;
  --bg-2:    #ffffff;
  --bg-3:    #ebeef5;
  --bg-4:    #e2e6ef;
  --line-0:  rgba(0,0,0,0.04);
  --line-1:  rgba(0,0,0,0.08);
  --line-2:  rgba(0,0,0,0.13);
  --line-3:  rgba(0,0,0,0.20);
  --t-0:     #0d0d1a;
  --t-1:     #5c5c78;
  --t-2:     #686885;  /* mejorado contraste 5.37:1 */
  --t-3:     #c0c0d0;
  --g:       #00a87e;
  --g-d:     #008f6a;
  --g-l:     #00c896;
  --g-bg:    rgba(0,168,126,0.07);
  --g-bd:    rgba(0,168,126,0.18);
  --g-glow:  rgba(0,168,126,0.18);
  --b:       #3b6fff;
  --b-bg:    rgba(59,111,255,0.07);
  --b-bd:    rgba(59,111,255,0.18);
  --r:       #e53535;
  --r-bg:    rgba(229,53,53,0.07);
  --r-bd:    rgba(229,53,53,0.18);
  --y:       #d97706;
  --y-bg:    rgba(217,119,6,0.07);
  --y-bd:    rgba(217,119,6,0.18);
  --p:       #7c3aed;
  --p-bg:    rgba(124,58,237,0.07);
  --p-bd:    rgba(124,58,237,0.18);
  --s-xs: 0 1px 3px rgba(0,0,0,0.06);
  --s-sm: 0 2px 8px rgba(0,0,0,0.07);
  --s-md: 0 4px 20px rgba(0,0,0,0.09);
  --s-lg: 0 8px 40px rgba(0,0,0,0.11);
  --s-xl: 0 20px 60px rgba(0,0,0,0.13);
  --bar-bg: rgba(246,248,252,0.96);
}

/* ═══════════════════════════════════════════════════════════
   2. RESET & BASE
═══════════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg-0); color:var(--t-0);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-size:14px; line-height:1.55; min-height:100%;
  transition:background var(--slow) var(--ease), color var(--slow) var(--ease);
  padding-bottom:env(safe-area-inset-bottom);
}
a { color:var(--g); text-decoration:none; }
img,svg { display:block; max-width:100%; }
input,button,select,textarea {
  font-family:inherit; font-size:inherit; color:inherit;
}
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:99px; }
::selection { background:var(--g-bg); color:var(--g); }

/* ═══════════════════════════════════════════════════════════
   3. FONDO ATMOSFÉRICO
═══════════════════════════════════════════════════════════ */
.fp-mesh {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at -10% -10%, rgba(0,200,150,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 110% 110%, rgba(91,143,255,0.04) 0%, transparent 55%),
    var(--bg-0);
}
[data-theme="light"] .fp-mesh {
  background:
    radial-gradient(ellipse 80% 60% at -10% -10%, rgba(0,168,126,0.04) 0%, transparent 55%),
    var(--bg-0);
}

/* ═══════════════════════════════════════════════════════════
   4. TOPBAR — Barra superior única y elegante
═══════════════════════════════════════════════════════════ */
.fp-topbar {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--bar-h);
  background:var(--bar-bg);
  border-bottom:1px solid var(--line-1);
  display:flex; align-items:center; gap:0;
  padding:0 12px 0 8px;
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  padding-top:env(safe-area-inset-top);
}
.fp-topbar-left {
  display:flex; align-items:center; gap:8px;
  flex-shrink:0; min-width:0;
}
.fp-logo {
  display:flex; align-items:center; gap:7px;
  text-decoration:none; flex-shrink:0;
}
.fp-logo-icon {
  width:32px; height:32px; border-radius:9px;
  background:linear-gradient(135deg,var(--g) 0%,var(--g-d) 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; box-shadow:0 2px 12px var(--g-glow);
  flex-shrink:0;
}
.fp-logo-name {
  font-size:15px; font-weight:800; color:var(--t-0);
  letter-spacing:-0.3px; white-space:nowrap;
}

/* Nav desktop — centro del topbar */
.fp-nav {
  display:none;
  align-items:center; gap:1px;
  flex:1; overflow:hidden; min-width:0;
  padding:0 8px;
}
@media (min-width:700px) { .fp-nav { display:flex; } }

.fp-nav-item {
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 9px; border-radius:var(--rx-sm);
  color:var(--t-1); font-size:12px; font-weight:500;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  border:none; background:transparent; font-family:inherit;
  transition:background var(--fast), color var(--fast);
  flex-shrink:0; line-height:1;
}
.fp-nav-item:hover { background:var(--bg-4); color:var(--t-0); }
.fp-nav-item.active {
  background:var(--g-bg); color:var(--g);
  font-weight:600;
}
/* Pantallas medianas: texto más pequeño */
@media (max-width:1200px) and (min-width:700px) {
  .fp-nav-item { padding:5px 6px; font-size:11px; gap:3px; }
}
/* Pantallas pequeñas desktop: solo emoji */
@media (max-width:900px) and (min-width:700px) {
  .fp-nav-item { font-size:0; padding:6px 8px; gap:0; }
  .fp-nav-item::before { content:attr(data-ico); font-size:16px; }
}

/* Topbar derecha */
.fp-topbar-right {
  display:flex; align-items:center; gap:6px;
  flex-shrink:0; margin-left:auto;
}
.fp-topbar-info {
  display:none;
  flex-direction:column; align-items:flex-end;
  margin-right:2px; flex-shrink:0;
}
@media (min-width:900px) {
  .fp-topbar-info { display:flex; }
}
.fp-topbar-user {
  font-size:12px; font-weight:600; color:var(--t-0);
  white-space:nowrap; max-width:130px;
  overflow:hidden; text-overflow:ellipsis;
}
.fp-topbar-sub {
  font-size:10px; color:var(--t-2); white-space:nowrap;
}

/* Botón de tema */
.fp-theme-btn {
  width:32px; height:32px; border-radius:var(--rx-sm);
  background:var(--bg-3); border:1px solid var(--line-2);
  color:var(--t-1); font-size:14px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:all var(--fast);
}
.fp-theme-btn:hover { background:var(--bg-4); color:var(--t-0); transform:rotate(15deg); }

/* Botón salir */
.fp-logout-btn {
  padding:6px 11px; border-radius:var(--rx-sm);
  background:transparent; border:1px solid var(--line-2);
  color:var(--t-1); font-size:12px; font-weight:500;
  cursor:pointer; white-space:nowrap; font-family:inherit;
  transition:all var(--fast);
  display:none;
}
@media (min-width:700px) { .fp-logout-btn { display:flex; align-items:center; gap:4px; } }
.fp-logout-btn:hover { background:var(--r-bg); border-color:var(--r-bd); color:var(--r); }

/* Botón de monto en POS */
.fp-topbar-btn {
  padding:5px 10px; border-radius:var(--rx-sm);
  border:1px solid var(--line-2); background:var(--bg-3);
  color:var(--t-1); font-size:12px; font-weight:600;
  cursor:pointer; white-space:nowrap; font-family:inherit;
  transition:all var(--fast);
}
.fp-topbar-btn:hover { background:var(--bg-4); color:var(--t-0); }
.fp-topbar-btn.green {
  background:var(--g-bg); border-color:var(--g-bd); color:var(--g);
}

/* Hamburguesa — solo móvil */
.fp-hamburger {
  width:32px; height:32px; border-radius:var(--rx-sm);
  background:var(--bg-3); border:1px solid var(--line-2);
  color:var(--t-1); font-size:17px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:all var(--fast); line-height:1;
}
@media (min-width:700px) { .fp-hamburger { display:none; } }
.fp-hamburger:hover { background:var(--bg-4); color:var(--t-0); }

/* ═══════════════════════════════════════════════════════════
   5. MENÚ MÓVIL
═══════════════════════════════════════════════════════════ */
.fp-mobile-menu {
  display:none;
  position:fixed; top:var(--bar-h); left:0; right:0; bottom:0;
  background:var(--bg-1);
  z-index:99; flex-direction:column;
  overflow-y:auto; padding:8px 6px 24px;
  gap:2px;
  border-top:1px solid var(--line-1);
}
.fp-mobile-menu.show {
  display:flex;
  animation:mmSlideIn var(--mid) var(--ease);
}
@keyframes mmSlideIn {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}
.fp-mm-section {
  font-size:10px; font-weight:700; color:var(--t-2);
  text-transform:uppercase; letter-spacing:0.08em;
  padding:14px 10px 4px;
}
.fp-mm-divider { height:1px; background:var(--line-1); margin:6px 4px; }
.fp-mobile-menu .fp-nav-item {
  display:flex; align-items:center; gap:11px;
  padding:11px 12px; border-radius:var(--rx-sm);
  font-size:14px; font-weight:500;
  color:var(--t-1);
}
.fp-mobile-menu .fp-nav-item:hover,
.fp-mobile-menu .fp-nav-item.active {
  background:var(--bg-4); color:var(--t-0);
}
.fp-mobile-menu .fp-nav-item.active { color:var(--g); background:var(--g-bg); }
.fp-mobile-menu .fp-nav-item .mm-icon {
  font-size:18px; width:26px; text-align:center; flex-shrink:0;
}
.fp-mobile-menu .fp-nav-item .mm-lbl { flex:1; }
.fp-mobile-menu .fp-nav-item .mm-badge {
  font-size:9px; font-weight:700;
  background:var(--r); color:#fff;
  padding:2px 6px; border-radius:99px;
}

/* ═══════════════════════════════════════════════════════════
   6. PAGE WRAPPER
═══════════════════════════════════════════════════════════ */
.page {
  padding-top:var(--bar-h);
  min-height:100vh;
  position:relative; z-index:1;
}
.fp-wrap {
  max-width:900px;
  margin:0 auto;
  padding:28px 16px 60px;
}
@media (max-width:600px) { .fp-wrap { padding:20px 12px 60px; } }

/* ═══════════════════════════════════════════════════════════
   7. TIPOGRAFÍA — Jerarquía clara
═══════════════════════════════════════════════════════════ */
.fp-page-title {
  font-size:26px; font-weight:800;
  color:var(--t-0); letter-spacing:-0.5px; line-height:1.2;
  margin-bottom:4px;
}
.fp-page-sub {
  font-size:14px; color:var(--t-1); margin-bottom:24px;
}
.fp-section-title {
  font-size:11px; font-weight:700; color:var(--t-2);
  text-transform:uppercase; letter-spacing:0.07em;
  margin-bottom:10px;
}

/* ═══════════════════════════════════════════════════════════
   8. CARDS — Contenedores universales
═══════════════════════════════════════════════════════════ */
.fp-card {
  background:var(--bg-2);
  border:1px solid var(--line-1);
  border-radius:var(--rx-lg);
  padding:20px;
  box-shadow:var(--s-xs);
  transition:box-shadow var(--mid), border-color var(--mid);
}
.fp-card:hover { border-color:var(--line-2); }
.fp-card-sm { padding:14px; border-radius:var(--rx); }
.fp-card-lg { padding:28px; border-radius:var(--rx-xl); }

/* Card con borde izquierdo de color */
.fp-card-accent { border-left:3px solid var(--g); }
.fp-card-accent-r { border-left:3px solid var(--r); }
.fp-card-accent-y { border-left:3px solid var(--y); }
.fp-card-accent-b { border-left:3px solid var(--b); }

/* Hero card — fondo verde */
.fp-hero-card {
  background:linear-gradient(135deg,var(--g-d) 0%,var(--g) 60%,var(--g-l) 100%);
  border:none; color:#fff;
  box-shadow:0 8px 32px var(--g-glow);
}
.fp-hero-card * { color:#fff !important; }

.fp-card-title {
  font-size:13px; font-weight:700; color:var(--t-0);
  margin-bottom:14px; display:flex; align-items:center; gap:6px;
}
.fp-card-title small {
  font-size:11px; font-weight:500; color:var(--t-2);
  margin-left:auto;
}

/* ═══════════════════════════════════════════════════════════
   9. KPIs / STATS
═══════════════════════════════════════════════════════════ */
.fp-kpis {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:10px; margin-bottom:16px;
}
.fp-kpi {
  background:var(--bg-2); border:1px solid var(--line-1);
  border-radius:var(--rx); padding:14px 16px;
  transition:border-color var(--mid), transform var(--fast);
}
.fp-kpi:hover { border-color:var(--line-2); transform:translateY(-1px); }
.fp-kpi-label {
  font-size:10px; font-weight:700; color:var(--t-2);
  text-transform:uppercase; letter-spacing:0.07em;
  margin-bottom:6px; display:flex; align-items:center; gap:4px;
}
.fp-kpi-val {
  font-size:22px; font-weight:800; color:var(--t-0);
  letter-spacing:-0.5px; line-height:1;
}
.fp-kpi-sub {
  font-size:11px; color:var(--t-2); margin-top:3px;
}
.fp-kpi-green .fp-kpi-val { color:var(--g); }
.fp-kpi-red   .fp-kpi-val { color:var(--r); }
.fp-kpi-yellow .fp-kpi-val { color:var(--y); }
.fp-kpi-blue  .fp-kpi-val { color:var(--b); }

/* ═══════════════════════════════════════════════════════════
   10. BOTONES
═══════════════════════════════════════════════════════════ */
.fp-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 16px; border-radius:var(--rx-sm);
  font-size:13px; font-weight:600; font-family:inherit;
  border:1px solid transparent; cursor:pointer;
  white-space:nowrap; transition:all var(--fast);
  position:relative; overflow:hidden; line-height:1;
}
.fp-btn:disabled { opacity:0.45; cursor:not-allowed; }
.fp-btn-primary {
  background:var(--g); color:#fff;
  box-shadow:0 2px 12px var(--g-glow);
  border-color:var(--g);
}
.fp-btn-primary:hover:not(:disabled) {
  background:var(--g-l);
  box-shadow:0 4px 20px var(--g-glow);
  transform:translateY(-1px);
}
.fp-btn-secondary {
  background:var(--bg-3); color:var(--t-0);
  border-color:var(--line-2);
}
.fp-btn-secondary:hover:not(:disabled) {
  background:var(--bg-4); border-color:var(--line-3);
}
.fp-btn-ghost {
  background:transparent; color:var(--t-1);
  border-color:transparent;
}
.fp-btn-ghost:hover:not(:disabled) {
  background:var(--bg-3); color:var(--t-0);
}
.fp-btn-danger {
  background:var(--r-bg); color:var(--r);
  border-color:var(--r-bd);
}
.fp-btn-danger:hover:not(:disabled) {
  background:var(--r); color:#fff;
  box-shadow:0 2px 12px rgba(255,87,87,0.3);
}
.fp-btn-sm { padding:6px 11px; font-size:12px; border-radius:var(--rx-xs); }
.fp-btn-lg { padding:12px 22px; font-size:15px; border-radius:var(--rx); }
.fp-btn-full { width:100%; }

/* Ripple */
.fp-ripple { overflow:hidden; }
.fp-ripple-wave {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,0.18);
  transform:scale(0); animation:ripple 0.45s linear;
  pointer-events:none;
}
@keyframes ripple { to { transform:scale(1); opacity:0; } }

/* ═══════════════════════════════════════════════════════════
   11. FORMULARIOS
═══════════════════════════════════════════════════════════ */
.fp-form-group { display:flex; flex-direction:column; gap:5px; }
.fp-form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:500px) { .fp-form-row { grid-template-columns:1fr; } }
.fp-label {
  font-size:11px; font-weight:700; color:var(--t-1);
  text-transform:uppercase; letter-spacing:0.06em;
}
.fp-input {
  padding:10px 12px; border-radius:var(--rx-sm);
  background:var(--bg-3); border:1px solid var(--line-2);
  color:var(--t-0); font-size:14px; font-family:inherit;
  outline:none; width:100%;
  transition:border-color var(--fast), box-shadow var(--fast);
  appearance:none; -webkit-appearance:none;
}
.fp-input:focus {
  border-color:var(--g);
  box-shadow:0 0 0 3px var(--g-bg);
}
.fp-input::placeholder { color:var(--t-2); }
.fp-input:disabled { opacity:0.5; cursor:not-allowed; }
.fp-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239898b2' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:32px; cursor:pointer; }
.fp-input-group { position:relative; }
.fp-input-prefix { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--t-2); pointer-events:none; }
.fp-input-group .fp-input { padding-left:28px; }

/* ═══════════════════════════════════════════════════════════
   12. TABLA
═══════════════════════════════════════════════════════════ */
.fp-table-wrap {
  background:var(--bg-2); border:1px solid var(--line-1);
  border-radius:var(--rx-lg); overflow:hidden;
}
.fp-table {
  width:100%; border-collapse:collapse;
  font-size:13px;
}
.fp-table thead tr {
  background:var(--bg-3); border-bottom:1px solid var(--line-1);
}
.fp-table th {
  padding:10px 14px; text-align:left;
  font-size:10px; font-weight:700; color:var(--t-2);
  text-transform:uppercase; letter-spacing:0.07em;
  white-space:nowrap;
}
.fp-table td {
  padding:12px 14px; border-bottom:1px solid var(--line-0);
  color:var(--t-0); vertical-align:middle;
}
.fp-table tbody tr:last-child td { border-bottom:none; }
.fp-table tbody tr {
  transition:background var(--fast);
}
.fp-table tbody tr:hover { background:var(--bg-3); }

/* ═══════════════════════════════════════════════════════════
   13. BADGES / TAGS
═══════════════════════════════════════════════════════════ */
.fp-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:99px;
  font-size:11px; font-weight:600; white-space:nowrap;
}
.fp-badge-green { background:var(--g-bg); color:var(--g); border:1px solid var(--g-bd); }
.fp-badge-red   { background:var(--r-bg); color:var(--r); border:1px solid var(--r-bd); }
.fp-badge-yellow{ background:var(--y-bg); color:var(--y); border:1px solid var(--y-bd); }
.fp-badge-blue  { background:var(--b-bg); color:var(--b); border:1px solid var(--b-bd); }
.fp-badge-gray  { background:var(--bg-3); color:var(--t-1); border:1px solid var(--line-2); }
.fp-badge-purple{ background:var(--p-bg); color:var(--p); border:1px solid var(--p-bd); }

/* ═══════════════════════════════════════════════════════════
   14. MODAL
═══════════════════════════════════════════════════════════ */
.fp-overlay {
  position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,0.7);
  display:none; align-items:center; justify-content:center;
  padding:16px;
  backdrop-filter:blur(4px);
  animation:none;
}
.fp-overlay.show { display:flex; animation:overlayIn var(--mid) var(--ease); }
@keyframes overlayIn { from { opacity:0; } to { opacity:1; } }
.fp-modal {
  background:var(--bg-2); border:1px solid var(--line-2);
  border-radius:var(--rx-xl); padding:24px;
  width:100%; max-width:460px; max-height:90vh;
  overflow-y:auto; box-shadow:var(--s-xl);
  animation:modalIn var(--mid) var(--spring);
}
@keyframes modalIn {
  from { opacity:0; transform:scale(0.94) translateY(8px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.fp-modal-title {
  font-size:17px; font-weight:800; color:var(--t-0);
  margin-bottom:4px; letter-spacing:-0.2px;
}
.fp-modal-sub {
  font-size:13px; color:var(--t-1); margin-bottom:18px; line-height:1.4;
}
.fp-modal-btns {
  display:flex; gap:8px; justify-content:flex-end; margin-top:20px;
}

/* ═══════════════════════════════════════════════════════════
   15. TOAST — Notificaciones
═══════════════════════════════════════════════════════════ */
.fp-toast-wrap {
  position:fixed; bottom:24px; right:16px; z-index:500;
  display:flex; flex-direction:column; gap:8px;
  pointer-events:none;
}
.fp-toast {
  display:flex; align-items:center; gap:10px;
  padding:11px 16px; border-radius:var(--rx);
  background:var(--bg-3); border:1px solid var(--line-2);
  box-shadow:var(--s-lg); font-size:13px; font-weight:500;
  color:var(--t-0); max-width:320px; word-break:break-word;
  animation:toastIn 0.25s var(--spring);
  pointer-events:auto;
  backdrop-filter:blur(12px);
}
.fp-toast.err { background:var(--r-bg); border-color:var(--r-bd); color:var(--r); }
.fp-toast.warn { background:var(--y-bg); border-color:var(--y-bd); color:var(--y); }
.fp-toast.ok { background:var(--g-bg); border-color:var(--g-bd); color:var(--g); }
@keyframes toastIn {
  from { opacity:0; transform:translateX(20px) scale(0.9); }
  to   { opacity:1; transform:translateX(0) scale(1); }
}

/* ═══════════════════════════════════════════════════════════
   16. BANNER / ALERT
═══════════════════════════════════════════════════════════ */
.fp-banner {
  display:none; padding:10px 16px;
  border-radius:var(--rx); border:1px solid var(--y-bd);
  background:var(--y-bg); color:var(--y);
  font-size:13px; margin-bottom:16px;
  align-items:center; gap:8px;
}
.fp-banner.show { display:flex; }
.fp-banner.danger { border-color:var(--r-bd); background:var(--r-bg); color:var(--r); }
.fp-banner.info { border-color:var(--b-bd); background:var(--b-bg); color:var(--b); }

/* ═══════════════════════════════════════════════════════════
   17. TABS — Pestañas de navegación interna
═══════════════════════════════════════════════════════════ */
.fp-tabs {
  display:flex; gap:4px; flex-wrap:wrap;
  background:var(--bg-3); border-radius:var(--rx);
  padding:4px; margin-bottom:20px;
  border:1px solid var(--line-1);
}
.fp-tab {
  padding:7px 14px; border-radius:var(--rx-xs);
  font-size:13px; font-weight:500; cursor:pointer;
  border:none; background:transparent; font-family:inherit;
  color:var(--t-1); transition:all var(--fast);
  white-space:nowrap;
}
.fp-tab.active {
  background:var(--bg-2); color:var(--t-0);
  font-weight:600; box-shadow:var(--s-xs);
}
.fp-tab:hover:not(.active) { color:var(--t-0); background:var(--bg-4); }

/* ═══════════════════════════════════════════════════════════
   18. VACÍO / CARGANDO
═══════════════════════════════════════════════════════════ */
.vacio {
  padding:40px 20px; text-align:center;
  color:var(--t-2); font-size:14px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.vacio::before { content:''; font-size:32px; }
.load-ph {
  height:40px; border-radius:var(--rx-sm);
  background:linear-gradient(90deg,var(--bg-3) 25%,var(--bg-4) 50%,var(--bg-3) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
}
@keyframes shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
.fp-spinner {
  width:20px; height:20px; border-radius:50%;
  border:2px solid var(--line-2);
  border-top-color:var(--g);
  animation:spin 0.7s linear infinite;
  display:inline-block;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   19. ANIMACIONES ENTRADA
═══════════════════════════════════════════════════════════ */
.fp-fade-in {
  animation:fpFadeIn var(--mid) var(--ease);
}
@keyframes fpFadeIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
.fp-slide-in { animation:fpSlideIn var(--mid) var(--ease); }
@keyframes fpSlideIn {
  from { opacity:0; transform:translateX(-8px); }
  to   { opacity:1; transform:translateX(0); }
}

/* ═══════════════════════════════════════════════════════════
   20. PAGINACIÓN
═══════════════════════════════════════════════════════════ */
.pag-wrap {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; gap:10px; flex-wrap:wrap;
}

/* ═══════════════════════════════════════════════════════════
   21. MANTENIMIENTO
═══════════════════════════════════════════════════════════ */
.fp-maint {
  position:fixed; inset:0; z-index:999;
  background:var(--bg-0); display:none;
  align-items:center; justify-content:center; text-align:center; padding:20px;
}
.fp-maint.show { display:flex; }

/* ═══════════════════════════════════════════════════════════
   22. EXTRAS ESPECÍFICOS REUSADOS
═══════════════════════════════════════════════════════════ */
/* Stats row */
.fp-stats-row {
  display:flex; gap:6px; flex-wrap:wrap; margin:14px 0;
}
.fp-stat-item {
  flex:1; min-width:90px;
  background:var(--bg-3); border-radius:var(--rx-sm);
  padding:10px 12px; border:1px solid var(--line-1);
  text-align:center;
}
.fp-stat-val { font-size:18px; font-weight:800; color:var(--t-0); line-height:1; }
.fp-stat-lbl { font-size:10px; color:var(--t-2); text-transform:uppercase; letter-spacing:0.06em; margin-top:3px; }

/* Search bar */
.fp-search-wrap { position:relative; margin-bottom:14px; }
.fp-search-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:14px; color:var(--t-2); pointer-events:none; }
.fp-search-input { padding-left:34px !important; }

/* Avatar */
.fp-avatar {
  width:36px; height:36px; border-radius:50%;
  background:var(--g); display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:14px; color:#fff;
  flex-shrink:0;
}
.fp-avatar-sm { width:28px; height:28px; font-size:11px; }
.fp-avatar-lg { width:48px; height:48px; font-size:18px; }

/* Separador */
.fp-divider { height:1px; background:var(--line-1); margin:16px 0; }

/* Tooltip simple */
[title]:hover::after {
  content:attr(title);
  position:absolute; bottom:calc(100% + 4px); left:50%;
  transform:translateX(-50%);
  background:var(--bg-3); color:var(--t-0);
  font-size:11px; padding:4px 8px; border-radius:6px;
  white-space:nowrap; pointer-events:none;
  box-shadow:var(--s-sm);
  border:1px solid var(--line-2);
}

/* ═══════════════════════════════════════════════════════════
   23. RESPONSIVE UTILIDADES
═══════════════════════════════════════════════════════════ */
@media (max-width:700px) {
  .fp-hide-mobile { display:none !important; }
  .fp-card { padding:14px; }
  .fp-modal { padding:18px; border-radius:var(--rx-lg); }
  .fp-kpi-val { font-size:18px; }
}
@media (min-width:700px) {
  .fp-hide-desktop { display:none !important; }
}


/* ═══════════════════════════════════════════════════════════
   24. POS — Botones específicos del punto de venta
═══════════════════════════════════════════════════════════ */

/* Botón COBRAR — grande, prominente, impacto visual */
.fp-btn-cobrar {
  width:100%;
  padding:16px 20px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--g) 0%,var(--g-d) 100%);
  color:#fff;
  border:none;
  font-size:18px;
  font-weight:900;
  font-family:inherit;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  letter-spacing:.02em;
  box-shadow:0 6px 28px var(--g-glow);
  transition:all .18s var(--spring);
  position:relative;
  overflow:hidden;
}
.fp-btn-cobrar:hover:not(:disabled) {
  transform:translateY(-2px);
  box-shadow:0 10px 36px var(--g-glow);
  background:linear-gradient(135deg,var(--g-l) 0%,var(--g) 100%);
}
.fp-btn-cobrar:active:not(:disabled) {
  transform:translateY(0);
  box-shadow:0 4px 16px var(--g-glow);
}
.fp-btn-cobrar:disabled {
  background:var(--bg-4);
  color:var(--t-2);
  box-shadow:none;
  cursor:not-allowed;
  transform:none;
}

/* Cache-bust refresh */

/* Glow pulsante del botón COBRAR cuando hay items */
@keyframes cobrarPulse {
  0%,100% { box-shadow: 0 6px 28px var(--g-glow); }
  50%      { box-shadow: 0 6px 40px rgba(0,200,150,0.55), 0 0 0 4px var(--g-bg); }
}

/* ═══════════════════════════════════════════════════════════
   25. SIDEBAR — Navegación lateral colapsable
       Estilo: Stripe × Notion × Linear
       Iconos: Lucide (sin emojis)
═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   SIDEBAR ELITE — FarmaPos v6
   ══════════════════════════════════════════════════ */
:root {
  --sb-w:     240px;
  --sb-w-col: 64px;
}

/* Overlay móvil */
.fp-sidebar-overlay{
  display:none;position:fixed;inset:0;z-index:89;
  background:rgba(0,0,0,.5);backdrop-filter:blur(3px);
}
.fp-sidebar-overlay.show{display:block}

/* ── BASE SIDEBAR ─────────────────────────────────── */
.fp-sidebar{
  position:fixed;top:0;left:0;bottom:0;
  width:var(--sb-w);z-index:90;
  display:flex;flex-direction:column;overflow:hidden;
  transition:width .22s cubic-bezier(.4,0,.2,1);
  /* Fondo con sutil glassmorphism */
  background:var(--bg-1);
  border-right:1px solid var(--line-1);
}
body.sb-collapsed .fp-sidebar{ width:var(--sb-w-col); }

/* ── HEADER ───────────────────────────────────────── */
.sb-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 14px 14px;flex-shrink:0;
  border-bottom:1px solid var(--line-0);
}
.sb-logo{
  display:flex;align-items:center;gap:9px;
  text-decoration:none;flex:1;min-width:0;overflow:hidden;
}
.sb-logo-icon{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,var(--g) 0%,var(--g-d) 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px var(--g-glow);
}
.sb-logo-icon svg{width:16px;height:16px;stroke:white;stroke-width:2.5;fill:none}
.sb-logo-name{
  font-size:14px;font-weight:800;color:var(--t-0);
  letter-spacing:-.3px;white-space:nowrap;
  transition:opacity .2s,width .2s;
}
.sb-collapse-btn{
  width:24px;height:24px;border-radius:6px;flex-shrink:0;
  background:transparent;border:1px solid var(--line-2);
  color:var(--t-2);cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.sb-collapse-btn:hover{background:var(--bg-3);color:var(--t-0);border-color:var(--line-3)}
.sb-collapse-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;transition:transform .2s}
body.sb-collapsed .sb-collapse-btn svg{transform:rotate(180deg)}

/* ── NAVEGACIÓN ───────────────────────────────────── */
.sb-nav{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:10px 8px;display:flex;flex-direction:column;gap:1px;
}
.sb-nav::-webkit-scrollbar{width:2px}
.sb-nav::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}

/* Etiquetas de grupo */
.sb-group-label{
  font-size:9px;font-weight:700;color:var(--t-3,var(--t-2));
  text-transform:uppercase;letter-spacing:.12em;
  padding:16px 8px 5px;white-space:nowrap;
  transition:opacity .2s;user-select:none;
}
body.sb-collapsed .sb-group-label{
  opacity:0;height:0;padding:0;overflow:hidden;
}

/* ── ITEMS ─────────────────────────────────────────── */
.sb-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:9px;
  color:var(--t-2);font-size:13px;font-weight:500;
  text-decoration:none;white-space:nowrap;
  transition:background .12s,color .12s;
  position:relative;overflow:hidden;cursor:pointer;
}
.sb-item:hover{
  background:var(--bg-3);
  color:var(--t-0);
}
[data-theme="light"] .sb-item:hover{
  background:rgba(0,0,0,.04);color:var(--t-0);
}
/* Item activo */
.sb-item.active{
  background:var(--g-bg);
  color:var(--g);
  font-weight:600;
}
[data-theme="light"] .sb-item.active{
  background:rgba(0,168,126,.1);color:var(--g);
}
/* Indicador activo */
.sb-item.active::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:3px;border-radius:0 3px 3px 0;background:var(--g);
}
/* Ícono */
.sb-icon{
  width:18px;height:18px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  opacity:.7;transition:opacity .12s;
}
.sb-icon svg{
  width:16px;height:16px;
  stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.sb-item:hover .sb-icon,
.sb-item.active .sb-icon{opacity:1}

/* Label */
.sb-label{
  flex:1;min-width:0;
  transition:opacity .2s,width .2s;overflow:hidden;
}

/* ── COLAPSADO ─────────────────────────────────────── */
body.sb-collapsed .sb-logo-name,
body.sb-collapsed .sb-label{
  opacity:0;width:0;
}
body.sb-collapsed .sb-item{
  justify-content:center;padding:9px;
}
/* Tooltip en modo colapsado */
body.sb-collapsed .sb-item:hover::after{
  content:attr(title);
  position:absolute;left:calc(var(--sb-w-col) + 8px);top:50%;
  transform:translateY(-50%);
  background:var(--bg-3);color:var(--t-0);
  font-size:12px;padding:5px 10px;border-radius:8px;
  white-space:nowrap;pointer-events:none;
  box-shadow:var(--s-md);border:1px solid var(--line-2);
  z-index:200;font-weight:500;
}

/* ── FOOTER USUARIO ────────────────────────────────── */
.sb-footer{
  padding:10px 10px 14px;
  border-top:1px solid var(--line-1);
  flex-shrink:0;
}
/* Card del usuario */
.sb-user-card{
  display:flex;align-items:center;gap:9px;
  padding:8px 6px;border-radius:9px;
  margin-bottom:8px;overflow:hidden;
  transition:background .12s;cursor:default;
}
.sb-user-card:hover{background:var(--bg-3)}
.sb-av{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--g),var(--g-d));
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:#fff;
  box-shadow:0 1px 6px var(--g-glow);
}
.sb-user-info{flex:1;min-width:0;transition:opacity .2s,width .2s;overflow:hidden}
.sb-user-nom{
  font-size:12px;font-weight:700;color:var(--t-0);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sb-user-rol{font-size:10px;color:var(--t-2);margin-top:1px}

/* Acciones del footer */
.sb-footer-actions{display:flex;gap:5px;overflow:hidden}
.sb-action-btn{
  display:flex;align-items:center;gap:6px;
  padding:7px 8px;border-radius:8px;
  background:var(--bg-3);border:1px solid var(--line-1);
  color:var(--t-1);cursor:pointer;font-family:inherit;
  font-size:12px;font-weight:600;
  transition:all .15s;white-space:nowrap;
}
.sb-action-btn:hover{background:var(--bg-4);color:var(--t-0);border-color:var(--line-2)}
.sb-action-btn svg{
  width:15px;height:15px;flex-shrink:0;
  stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Botón logout — flex:1 para ocupar espacio */
.sb-logout-btn{flex:1;justify-content:center}
.sb-logout-btn:hover{
  background:var(--r-bg)!important;
  border-color:var(--r-bd)!important;
  color:var(--r)!important;
}

/* Colapsado: ocultar info usuario y texto de botones */
body.sb-collapsed .sb-user-info,
body.sb-collapsed .sb-logout-btn .sb-label{
  opacity:0;width:0;overflow:hidden;
}
body.sb-collapsed .sb-user-card{justify-content:center;padding:8px}
body.sb-collapsed .sb-footer-actions{flex-direction:column}
body.sb-collapsed .sb-logout-btn{justify-content:center;flex:unset}

/* ── TOPBAR adjustments ────────────────────────────── */
.fp-topbar{left:var(--sb-w);transition:left .22s cubic-bezier(.4,0,.2,1)}
body.sb-collapsed .fp-topbar{left:var(--sb-w-col)}
.page{margin-left:var(--sb-w);transition:margin-left .22s cubic-bezier(.4,0,.2,1)}
body.sb-collapsed .page{margin-left:var(--sb-w-col)}

/* Ocultar logout del topbar (está en sidebar) */
.fp-logout-btn{display:none!important}
body.no-sidebar .fp-logout-btn{display:flex!important}
#topbar-nav{display:none!important}

/* ── MÓVIL ─────────────────────────────────────────── */
@media(max-width:700px){
  .fp-sidebar{transform:translateX(-100%);width:var(--sb-w)!important}
  .fp-sidebar.sb-open{transform:translateX(0)}
  .fp-topbar{left:0!important}
  .page{margin-left:0!important}
  .sb-collapse-btn{display:none}
}

/* Cajero: sin sidebar → topbar completo con nav visible */
body.no-sidebar .fp-topbar  { left:0 !important; }
body.no-sidebar .page       { margin-left:0 !important; }
body.no-sidebar .pos-app    { margin-left:0 !important; }
body.no-sidebar .fp-sidebar { display:none !important; }
/* Mostrar nav en topbar para cajero */
body.no-sidebar #topbar-nav { display:flex !important; }
/* Ocultar sidebar overlay innecesario */
body.no-sidebar .fp-sidebar-overlay { display:none !important; }

/* Iconos Lucide en topbar del cajero */
.fp-nav-item {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:var(--rx-xs);
  color:var(--t-1); font-size:12px; font-weight:500;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  border:none; background:transparent; font-family:inherit;
  transition:all .15s; flex-shrink:0;
}
.fp-nav-item svg { width:14px;height:14px;stroke-width:1.8; }
.fp-nav-item:hover { background:var(--bg-4); color:var(--t-0); }
.fp-nav-item.active { background:var(--g-bg); color:var(--g); font-weight:600; }

/* ── Filter chips (compartido entre productos y sucursales) ── */
.p-filter-chip {
  display:inline-flex; align-items:center;
  padding:5px 14px; border-radius:99px;
  background:transparent; border:1px solid var(--line-2);
  font-size:12px; font-weight:500; color:var(--t-1);
  cursor:pointer; font-family:inherit; white-space:nowrap;
  transition:all .15s; letter-spacing:.01em;
}
.p-filter-chip:hover { background:var(--bg-3); color:var(--t-0); border-color:var(--line-2); }
.p-filter-chip.active {
  background:var(--t-0); color:var(--bg-0);
  border-color:var(--t-0); font-weight:600;
}
[data-theme="light"] .p-filter-chip.active {
  background:var(--t-0); color:#fff;
}