/* ================================================================
   POS JOYERÍA & EMPEÑO — v3.0 Design System
   Gold × Deep Navy × Slate
   Arquitectura: CSS Cascade Layers (@layer)
   Tipografía fluida: clamp()  |  Accesibilidad: :focus-visible
   ================================================================ */

/* @import SIEMPRE antes de @layer — requerido por la especificación CSS */
/* Fuentes locales (offline) — antes era Google Fonts por internet */
@import url('../vendor/fonts/fonts.css');

/* Declaración del orden de capas — la prioridad sube de izquierda a derecha */
@layer reset, tokens, base, layout, login, topbar, components, pos, mobile, responsive, utilities;

/* ================================================================
   LAYER: TOKENS — Sistema de design tokens
   ================================================================ */
@layer tokens {

:root {
  /* ── Paleta Dorado ─────────────────────────────────────────── */
  --gold-50:   #FBF6E8;
  --gold-100:  #F5E9BF;
  --gold-200:  #EDD88A;
  --gold-300:  #E2C159;
  --gold-500:  #C9A84C;
  --gold-600:  #A8863A;
  --gold-700:  #826429;
  --gold-800:  #5E4618;

  --gold:      #C9A84C;
  --gold-light:#E2C159;
  --gold-dark: #826429;
  --gold-pale: #FBF6E8;

  /* Componentes del acento, para los tintes con transparencia.
   *
   * `rgba()` no admite un color dentro, así que los brillos, bordes y fondos
   * translúcidos llevaban el dorado escrito a mano —96 veces— y se quedaban
   * dorados por mucho que la marca cambiara `--gold`. Con la terna aparte,
   * `rgba(var(--gold-rgb), .15)` sigue al color de la marca como todo lo demás.
   *
   * Este valor es el de reserva; `js/marca.js` lo sobrescribe con el color
   * configurado antes del primer pintado. */
  --gold-rgb:  201,168,76;

  /* ── Paleta Oscura (login, cabeceras) ──────────────────────── */
  --dark:      #0D0D1A;
  --dark-2:    #16162A;
  --dark-3:    #1E1E35;
  --dark-4:    #252540;
  --dark-5:    #2D2D50;

  /* ── Colores semánticos ────────────────────────────────────── */
  --success:      #10B981;
  --success-bg:   #D1FAE5;
  --success-text: #065F46;
  --danger:       #EF4444;
  --danger-bg:    #FEE2E2;
  --danger-text:  #991B1B;
  --warning:      #F59E0B;
  --warning-bg:   #FEF3C7;
  --warning-text: #92400E;
  --info:         #3B82F6;
  --info-bg:      #DBEAFE;
  --info-text:    #1E40AF;
  --purple:       #8B5CF6;
  --purple-bg:    #EDE9FE;
  --purple-text:  #5B21B6;

  /* ── Tema claro ────────────────────────────────────────────── */
  --bg:         #F4F6FB;
  --bg-raised:  #EEF1F8;
  --card:       #FFFFFF;
  --card-2:     #F9FAFB;
  --text-main:  #111827;
  --text-body:  #374151;
  --text-muted: #6B7280;
  --text-faint: #9CA3AF;
  --border:     #E5E7EB;
  --border-2:   #F3F4F6;

  /* ── Sombras multicapa ─────────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:   0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:      0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
  --shadow-md:   0 4px 16px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg:   0 12px 32px rgba(0,0,0,.11), 0 4px 12px rgba(0,0,0,.06);
  --shadow-xl:   0 24px 56px rgba(0,0,0,.13), 0 8px 24px rgba(0,0,0,.07);
  --shadow-2xl:  0 40px 80px rgba(0,0,0,.15), 0 16px 32px rgba(0,0,0,.08);
  --shadow-gold: 0 4px 20px rgba(var(--gold-rgb),.28), 0 2px 8px rgba(var(--gold-rgb),.15);
  --shadow-inset: inset 0 2px 4px rgba(0,0,0,.06);

  /* ── Border radius ─────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Espaciado (base 4px) ──────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ── Tipografía fluida ─────────────────────────────────────── */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;

  --text-2xs:  clamp(.625rem, .6rem + .1vw, .65rem);    /* ~10px  */
  --text-xs:   clamp(.6875rem, .65rem + .15vw, .72rem); /* ~11px  */
  --text-sm:   clamp(.75rem,  .72rem + .15vw, .78rem);  /* ~12px  */
  --text-base: clamp(.8125rem,.78rem + .2vw,  .85rem);  /* ~13px  */
  --text-md:   clamp(.85rem,  .82rem + .2vw,  .9rem);   /* ~14px  */
  --text-lg:   clamp(.9375rem,.9rem  + .2vw,  .975rem); /* ~15px  */
  --text-xl:   clamp(1rem,    .95rem + .25vw, 1.0625rem);/* ~16px */
  --text-2xl:  clamp(1.125rem,1.05rem + .3vw, 1.25rem); /* ~18px  */
  --text-3xl:  clamp(1.375rem,1.25rem + .5vw, 1.625rem);/* ~22px  */
  --text-4xl:  clamp(1.625rem,1.45rem + .7vw, 1.875rem);/* ~26px  */
  --text-5xl:  clamp(1.875rem,1.65rem + .9vw, 2.25rem); /* ~30px  */

  /* ── Transiciones ──────────────────────────────────────────── */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out:    cubic-bezier(0, 0, .2, 1);

  --t-fast:   120ms var(--ease);
  --t:        220ms var(--ease);
  --t-slow:   350ms var(--ease);
  --transition: all var(--t);

  /* ── Layout ────────────────────────────────────────────────── */
  --topbar-h:        60px;
}

/* ── Modo oscuro ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:         #0F0F1A;
  --bg-raised:  #13131F;
  --card:       #1A1A2E;
  --card-2:     #16162A;
  --text-main:  #F0F0F8;
  --text-body:  #D1D1E0;
  --text-muted: #9CA3AF;
  --text-faint: #6B7280;
  --border:     #2A2A45;
  --border-2:   #222238;

  --shadow:     0 2px 8px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
  --shadow-md:  0 4px 16px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30);
  --shadow-lg:  0 12px 32px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35);
  --shadow-xl:  0 24px 56px rgba(0,0,0,.60), 0 8px 24px rgba(0,0,0,.40);

  --success-bg:   rgba(16,185,129,.14);
  --success-text: #6EE7B7;
  --danger-bg:    rgba(239,68,68,.14);
  --danger-text:  #FCA5A5;
  --warning-bg:   rgba(245,158,11,.14);
  --warning-text: #FCD34D;
  --info-bg:      rgba(59,130,246,.14);
  --info-text:    #93C5FD;
  --purple-bg:    rgba(139,92,246,.14);
  --purple-text:  #C4B5FD;
}

} /* end @layer tokens */


/* ================================================================
   LAYER: RESET
   ================================================================ */
@layer reset {

*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
}
html { scroll-behavior: smooth; }

} /* end @layer reset */


/* ================================================================
   LAYER: BASE
   ================================================================ */
@layer base {

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text-main);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-full);
  transition: background var(--t);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Selección */
::selection {
  background: rgba(var(--gold-rgb),.25);
  color: var(--text-main);
}

/* Focus accesible — solo cuando se usa teclado */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Inputs con acento dorado */
:root { accent-color: var(--gold); }

/* Respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

} /* end @layer base */


/* ================================================================
   LAYER: LAYOUT
   ================================================================ */
@layer layout {

.app-container {
  display: flex;
  min-height: 100vh;
}

/* Sin menú lateral: el contenido ocupa todo el ancho. La navegación entre
   módulos se hace por los mosaicos del Inicio y el botón de casa del topbar. */
.main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content-area {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
  padding: var(--sp-8) var(--sp-8) var(--sp-8);
}

} /* end @layer layout */


/* ================================================================
   LAYER: LOGIN
   ================================================================ */
@layer login {

.login-body {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
  background: var(--dark);
  position: relative;
  overflow: hidden;
}

/* Gradientes de fondo */
.login-body::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 85%, rgba(var(--gold-rgb),.14) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 15%, rgba(var(--gold-rgb),.09) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 60% 70%, rgba(139,92,246,.06) 0%, transparent 50%);
  pointer-events: none;
}

/* Grain texture sutil */
.login-body::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  opacity: .5;
  pointer-events: none;
}

/* ── Layout de dos paneles (marca + formulario) ──────────────────── */
.login-container {
  width: 100%;
  max-width: 940px;
  position: relative;
  z-index: 1;
}

.login-shell {
  display: flex;
  width: 100%;
  min-height: 560px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid rgba(var(--gold-rgb),.22);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 40px 90px rgba(0,0,0,.60),
    0 16px 32px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.07);
  animation: fadeInUp .55s var(--ease-out) both;
}

/* Panel de marca (izquierda) */
.login-brand {
  flex: 0 0 44%;
  position: relative;
  overflow: hidden;
  padding: var(--sp-10) var(--sp-9);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(ellipse 90% 70% at 25% 15%, rgba(var(--gold-rgb),.18) 0%, transparent 55%),
    linear-gradient(160deg, #16264a 0%, #0E1E41 58%, #0A1530 100%);
  border-right: 1px solid rgba(var(--gold-rgb),.18);
}
.login-brand::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .7;
}

.brand-top { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }

/* El halo se deriva de --gold para seguir al color primario configurado. */
.brand-diamond {
  width: 84px; height: 84px;
  filter: drop-shadow(0 8px 22px color-mix(in srgb, var(--gold) 35%, transparent));
  animation: brandGlow 4s ease-in-out infinite;
}
@keyframes brandGlow {
  0%, 100% { filter: drop-shadow(0 8px 22px color-mix(in srgb, var(--gold) 30%, transparent)); }
  50%      { filter: drop-shadow(0 10px 30px color-mix(in srgb, var(--gold) 55%, transparent)); }
}

/* Logo cargado por la empresa: sustituye al símbolo por defecto (marca.js). */
.marca-logo {
  max-width: 180px;
  max-height: 84px;
  object-fit: contain;
  display: block;
}

/* ── Identidad de la empresa cliente ─────────────────────────────────────────
   Tres identidades distintas conviven en la interfaz: el FABRICANTE (RY
   Systems), el PRODUCTO y la EMPRESA que lo usa. Estos estilos son de la
   tercera: dicen a qué negocio y sector sirve la instalación. */
.negocio-logo {
  max-width: 46px; max-height: 46px;
  object-fit: contain; display: block; border-radius: var(--radius-sm);
}

/* En la pantalla de acceso: sobre el panel oscuro de marca. */
.brand-negocio {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: auto; padding: var(--sp-3) var(--sp-4);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
}
.brand-negocio:empty { display: none; }
.brand-negocio-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-negocio-datos strong {
  color: #fff; font-size: var(--text-sm); font-weight: 600; line-height: 1.2;
}
.brand-negocio-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  font-size: var(--text-xs); color: rgba(255,255,255,.62);
}

/* En el panel: franja bajo la barra superior. */
.negocio-barra {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6);
  background: var(--card); border-bottom: 1px solid var(--border);
}
.negocio-barra:not(:has(strong:not([hidden]))) { display: none; }
.negocio-barra-datos { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.negocio-barra-datos strong {
  font-size: var(--text-sm); font-weight: 600; color: var(--text-main); line-height: 1.2;
}
.negocio-barra-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-size: var(--text-xs); color: var(--text-muted);
}
.negocio-chip {
  padding: 1px 9px; border-radius: var(--radius-full);
  background: var(--gold-pale); color: var(--gold-dark);
  font-weight: 600; letter-spacing: .01em;
}
[data-theme="dark"] .negocio-chip { background: rgba(var(--gold-rgb),.15); color: var(--gold-light); }

/* ── Contramarca del fabricante ──────────────────────────────────────────── */
.fabricante-sello {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  text-align: center; font-size: var(--text-xs); color: var(--text-faint);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.fabricante-sello strong { color: var(--gold-dark); font-weight: 600; }
[data-theme="dark"] .fabricante-sello strong { color: var(--gold-light); }
.fabricante-lema { font-style: italic; opacity: .8; }

.fabricante-pie {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  text-align: center; font-size: var(--text-xs); color: var(--text-faint);
}
.fabricante-pie strong { color: var(--gold-dark); font-weight: 600; }
[data-theme="dark"] .fabricante-pie strong { color: var(--gold-light); }
.fabricante-pie i { margin-right: 5px; }

@media (max-width: 640px) {
  .negocio-barra { padding: var(--sp-3) var(--sp-4); }
  .fabricante-pie { padding-bottom: calc(var(--sp-6) + 60px); } /* nav inferior */
}

.brand-word {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: #fff;
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
}
.brand-word span { color: var(--gold); }

.brand-tag {
  color: rgba(255,255,255,.62);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-wide);
  margin-top: calc(var(--sp-1) * -1);
}

.brand-features {
  list-style: none;
  display: flex; flex-direction: column; gap: var(--sp-4);
  margin: var(--sp-7) 0;
}
.brand-features li {
  display: flex; align-items: center; gap: var(--sp-3);
  color: rgba(255,255,255,.78);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}
.brand-features i {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md, 10px);
  background: rgba(var(--gold-rgb),.14);
  border: 1px solid rgba(var(--gold-rgb),.30);
  color: var(--gold);
  font-size: 14px;
}

.brand-foot {
  color: rgba(255,255,255,.42);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider, .08em);
  text-transform: uppercase;
}

/* Panel del formulario (derecha) — conserva .login-card por compatibilidad */
.login-card {
  flex: 1 1 56%;
  padding: var(--sp-12) var(--sp-10);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
}

/* Encabezado de bienvenida (login principal) */
.login-welcome { margin-bottom: var(--sp-8); }
.login-welcome h2 {
  font-family: var(--font-serif);
  font-size: var(--text-3xl, 1.6rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: var(--tracking-tight);
}
.login-welcome p {
  color: rgba(255,255,255,.48);
  font-size: var(--text-sm);
  margin-top: var(--sp-2);
  letter-spacing: var(--tracking-wide);
}

/* Encabezado clásico (lo usan los formularios de recuperar contraseña) */
.login-header {
  text-align: center;
  margin-bottom: var(--sp-8);
}

.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.login-logo-icon {
  width: 76px; height: 76px;
  background: linear-gradient(135deg, var(--gold-200) 0%, var(--gold) 45%, var(--gold-dark) 100%);
  border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  box-shadow: var(--shadow-gold);
  position: relative;
}
.login-logo-icon::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.2) 0%, transparent 60%);
}

.login-logo h1 {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: #fff;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}
.login-logo h1 span { color: var(--gold); }

.login-subtitulo {
  color: rgba(255,255,255,.40);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  line-height: 1.7;
}

.login-divider {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0 auto var(--sp-6);
  width: 60%;
}
.login-divider::before, .login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb),.35), transparent);
}
.login-divider span { color: var(--gold); font-size: 15px; }

/* Responsive: apilar paneles en pantallas estrechas */
@media (max-width: 760px) {
  .login-container { max-width: 430px; }
  .login-shell { flex-direction: column; min-height: 0; }
  .login-brand {
    flex: none;
    border-right: none;
    border-bottom: 1px solid rgba(var(--gold-rgb),.18);
    padding: var(--sp-8) var(--sp-8) var(--sp-7);
  }
  .brand-features { display: none; }
  .brand-foot { display: none; }
  .brand-diamond { width: 64px; height: 64px; }
}

/* Formulario */
.login-form .input-group { margin-bottom: var(--sp-5); }

.login-form label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255,255,255,.60);
  letter-spacing: var(--tracking-wide);
}

.input-icon { position: relative; display: flex; align-items: center; }
.input-icon .icon {
  position: absolute; left: 14px;
  color: var(--gold);
  font-size: var(--text-md);
  pointer-events: none;
  opacity: .8;
  transition: var(--t);
}
.input-icon input {
  width: 100%;
  padding: 13px 14px 13px 42px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  font-family: var(--font-sans);
  color: #fff;
  transition: var(--t);
  outline: none;
}
.input-icon input::placeholder { color: rgba(255,255,255,.28); }
.input-icon input:focus {
  border-color: rgba(var(--gold-rgb),.65);
  background: rgba(var(--gold-rgb),.07);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.15);
}
.input-icon input:focus + .icon,
.input-icon:focus-within .icon { opacity: 1; }

.btn-login {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--gold-200) 0%, var(--gold) 45%, var(--gold-dark) 100%);
  color: var(--dark);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  transition: var(--t);
  letter-spacing: var(--tracking-wide);
  box-shadow: var(--shadow-gold);
  margin-top: var(--sp-2);
  position: relative;
  overflow: hidden;
}
.btn-login::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 60%);
  pointer-events: none;
}
.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(var(--gold-rgb),.50), 0 4px 12px rgba(var(--gold-rgb),.25);
}
.btn-login:active { transform: translateY(0); box-shadow: var(--shadow-gold); }

.login-footer {
  text-align: center;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.06);
}

.demo-info {
  font-size: var(--text-xs);
  color: rgba(255,255,255,.22);
  letter-spacing: var(--tracking-wide);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
}

/* Orbs */
.login-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); animation: float 10s ease-in-out infinite; }
.orb-1 { width: 320px; height: 320px; background: rgba(var(--gold-rgb),.08); top: -120px; right: -80px; }
.orb-2 { width: 240px; height: 240px; background: rgba(var(--gold-rgb),.06); bottom: -80px; left: -60px; animation-delay: 3.5s; }
.orb-3 { width: 180px; height: 180px; background: rgba(139,92,246,.04); top: 50%; left: 15%; animation-delay: 7s; }

/* ── Pulido profesional 2026 ─────────────────────────────────────────────── */

/* Fila de acciones: "Recordarme" + enlace de recuperación */
.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin: calc(var(--sp-1) * -1) 0 var(--sp-6);
}

/* Checkbox personalizado "Recordarme" */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  user-select: none;
  font-size: var(--text-sm);
  color: rgba(255,255,255,.62);
  letter-spacing: var(--tracking-wide);
  transition: var(--t);
}
.checkbox:hover { color: rgba(255,255,255,.85); }
.checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox .checkmark {
  width: 18px; height: 18px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
  color: var(--dark);
  font-size: 10px;
  transition: var(--t);
}
.checkbox .checkmark i { opacity: 0; transform: scale(.4); transition: var(--t); }
.checkbox input:checked + .checkmark {
  background: linear-gradient(135deg, var(--gold-200) 0%, var(--gold-dark) 100%);
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(var(--gold-rgb),.35);
}
.checkbox input:checked + .checkmark i { opacity: 1; transform: scale(1); }
.checkbox input:focus-visible + .checkmark { box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.25); }

/* Botón mostrar/ocultar contraseña */
.btn-toggle-pass {
  position: absolute;
  right: 6px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.38);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--t);
}
.btn-toggle-pass:hover { color: var(--gold); background: rgba(255,255,255,.05); }
.btn-toggle-pass:focus-visible { outline: 2px solid rgba(var(--gold-rgb),.6); outline-offset: 2px; }
.input-icon input[type="password"] { padding-right: 44px; }

/* Hover sutil en los campos */
.input-icon input:hover { border-color: rgba(255,255,255,.18); }

/* Botón en estado de carga */
.btn-login.loading { cursor: wait; opacity: .92; }

/* Sacudida suave cuando falla el inicio de sesión */
@keyframes loginShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.login-shell.shake { animation: loginShake .5s var(--ease-out) both; }

/* Respeta la preferencia de reducir animaciones */
@media (prefers-reduced-motion: reduce) {
  .login-shell, .login-shell.shake,
  .brand-diamond, .orb { animation: none; }
}

} /* end @layer login */




/* ================================================================
   LAYER: TOPBAR
   ================================================================ */
@layer topbar {

.top-bar {
  background: var(--card);
  padding: 0 var(--sp-6);
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: background var(--t), border-color var(--t);
}

/* Línea dorada inferior sutil */
.top-bar::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--gold-rgb),.18) 25%,
    rgba(var(--gold-rgb),.32) 50%,
    rgba(var(--gold-rgb),.18) 75%,
    transparent 100%
  );
}

/* Sin menú lateral la barra superior concentra navegación, búsqueda y usuario,
   así que sus dos mitades deben poder encogerse antes que desbordar. */
.top-bar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }

.btn-topbar-nav {
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 15px;
  cursor: pointer;
  color: var(--text-muted);
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: var(--t);
  flex-shrink: 0;
}
.btn-topbar-nav:hover {
  background: var(--card);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 2px 8px rgba(var(--gold-rgb),.15);
}

.breadcrumb { display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumb-home { font-size: var(--text-base); color: var(--text-muted); font-weight: 400; }
.breadcrumb-sep  { color: var(--border); font-size: 15px; }
#pageTitle { font-size: var(--text-lg); font-weight: 700; color: var(--text-main); }

.top-bar-right { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }

/* Búsqueda */
/* Selector de sucursal activa en la barra superior */
.sucursal-selector {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-full); padding: 5px 12px 5px 12px;
  transition: var(--t);
}
.sucursal-selector:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.10); }
.sucursal-selector > i { color: var(--gold); font-size: 14px; }
.sucursal-selector select {
  border: none; background: transparent; outline: none; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600;
  color: var(--text-main); max-width: 170px;
}
.sucursal-selector select:disabled { cursor: default; opacity: .8; }
[data-theme="dark"] .sucursal-selector { background: var(--card-2); }
[data-theme="dark"] .sucursal-selector select option { background: var(--card); color: var(--text-main); }

.topbar-search { position: relative; display: flex; align-items: center; min-width: 0; }
.topbar-search input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 7px 16px 7px 36px;
  font-size: var(--text-base);
  font-family: var(--font-sans);
  color: var(--text-main);
  outline: none;
  width: 210px;
  min-width: 0;
  transition: var(--t);
}
.topbar-search input::placeholder { color: var(--text-muted); }
.topbar-search input:focus {
  border-color: var(--gold);
  background: var(--card);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.10);
  width: 260px;
}
.topbar-search .search-icon {
  position: absolute; left: 12px;
  color: var(--text-muted);
  font-size: var(--text-base);
  pointer-events: none;
  transition: color var(--t);
}
.topbar-search:focus-within .search-icon { color: var(--gold); }

/* Botones topbar */
.topbar-btn {
  width: 36px; height: 36px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  transition: var(--t);
  position: relative;
}
.topbar-btn:hover {
  background: var(--card);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 2px 8px rgba(var(--gold-rgb),.15);
}

.notification-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--danger); color: #fff;
  font-size: 9px; font-weight: 700;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--card);
}

/* Fecha y hora */
.topbar-datetime {
  text-align: right;
  font-size: var(--text-sm);
  line-height: 1.5;
  padding: 0 var(--sp-1);
}
#currentDate { color: var(--text-main); font-weight: 600; display: block; }
#currentTime { color: var(--text-muted); font-size: var(--text-xs); display: block; }

/* Dark mode topbar */
[data-theme="dark"] .top-bar { background: var(--card); border-bottom-color: var(--border); }
[data-theme="dark"] .topbar-search input { background: var(--card-2); color: var(--text-main); border-color: var(--border); }
[data-theme="dark"] .topbar-btn { color: var(--text-muted); }
[data-theme="dark"] .topbar-btn:hover { background: var(--card-2); color: var(--text-main); }
[data-theme="dark"] .btn-topbar-nav {
  background: var(--card-2);
}
[data-theme="dark"] .notification-badge { border-color: var(--card); }

} /* end @layer topbar */


/* ================================================================
   LAYER: COMPONENTS
   ================================================================ */
@layer components {

/* ─── KEYFRAMES ─────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-22px) scale(1.04); }
}
@keyframes slideInRight {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(110%); opacity: 0; }
}
@keyframes feedSlide {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0%   { background-position: -400% 0; }
  100% { background-position:  400% 0; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}


/* ─── SECTION CARD ──────────────────────────────────────────── */
.section-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  animation: fadeInUp .3s var(--ease-out) both;
}

.section-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border-2);
}

.section-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-main);
  display: flex; align-items: center; gap: var(--sp-3);
  line-height: 1.3;
}
.section-title i {
  color: var(--gold);
  font-size: .9em;
}

.view-all {
  color: var(--gold);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: 600;
  display: flex; align-items: center; gap: var(--sp-1);
  transition: var(--t);
}
.view-all:hover { opacity: .7; }


/* ─── STAT CARDS ────────────────────────────────────────────── */
/* Tarjetas compactas: el cliente pidió cuadros de información más pequeños para
   que quepan junto a la tabla sin empujarla fuera de la pantalla. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.stat-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  display: flex; align-items: flex-start; justify-content: space-between;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  transition: transform var(--t), box-shadow var(--t);
  position: relative;
  overflow: hidden;
  cursor: default;
}

/* Barra superior de color al hacer hover */
.stat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-200) 0%, var(--gold) 100%);
  opacity: 0;
  transform: scaleX(.8);
  transition: opacity var(--t), transform var(--t);
  border-radius: 0 0 2px 2px;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.stat-card:hover::before { opacity: 1; transform: scaleX(1); }

/* Ícono grande de marca de agua detrás del KPI (estilo mockup) */
.stat-watermark {
  position: absolute; right: -8px; bottom: -18px;
  font-size: 76px; line-height: 1;
  color: var(--text-main); opacity: .045;
  pointer-events: none; z-index: 0;
}
[data-theme="dark"] .stat-watermark { color: var(--gold); opacity: .06; }
.stat-card > .stat-info, .stat-card > .stat-icon { position: relative; z-index: 1; }

.stat-info h3 {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--sp-2);
}
.stat-number {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: var(--sp-1);
  letter-spacing: -.03em;
  line-height: 1;
}
.stat-change {
  font-size: var(--text-xs);
  font-weight: 600;
  display: flex; align-items: center; gap: var(--sp-1);
}
.stat-change.positive { color: var(--success); }
.stat-change.negative { color: var(--danger); }

.stat-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(var(--gold-rgb),.14) 0%, rgba(var(--gold-rgb),.05) 100%);
  color: var(--gold) !important;
  border: 1px solid rgba(var(--gold-rgb),.18);
}
.stat-icon i { color: var(--gold) !important; }
.stat-icon.green  { background: var(--success-bg); color: var(--success) !important; border-color: rgba(16,185,129,.20); }
.stat-icon.green i { color: var(--success) !important; }
.stat-icon.red    { background: var(--danger-bg);  color: var(--danger)  !important; border-color: rgba(239,68,68,.20); }
.stat-icon.red i  { color: var(--danger) !important; }
.stat-icon.blue   { background: var(--info-bg);    color: var(--info)    !important; border-color: rgba(59,130,246,.20); }
.stat-icon.blue i { color: var(--info) !important; }
.stat-icon.purple { background: var(--purple-bg);  color: var(--purple)  !important; border-color: rgba(139,92,246,.20); }
.stat-icon.purple i { color: var(--purple) !important; }


/* ─── QUICK ACTIONS ─────────────────────────────────────────── */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.quick-action-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.quick-action-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  color: var(--text-main);
}

.quick-action-btn .qa-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  transition: transform var(--t);
}
.quick-action-btn:hover .qa-icon { transform: scale(1.1); }

.quick-action-btn.qa-gold  { border-color: rgba(var(--gold-rgb),.28); }
.quick-action-btn.qa-gold:hover { background: var(--gold-pale); border-color: rgba(var(--gold-rgb),.55); }
.quick-action-btn.qa-gold  .qa-icon { background: linear-gradient(135deg, rgba(var(--gold-rgb),.18), rgba(var(--gold-rgb),.07)); color: var(--gold-dark); }

.quick-action-btn.qa-blue  { border-color: rgba(59,130,246,.18); }
.quick-action-btn.qa-blue:hover  { background: var(--info-bg); border-color: rgba(59,130,246,.45); }
.quick-action-btn.qa-blue  .qa-icon { background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(59,130,246,.05)); color: var(--info); }

.quick-action-btn.qa-green { border-color: rgba(16,185,129,.18); }
.quick-action-btn.qa-green:hover { background: var(--success-bg); border-color: rgba(16,185,129,.45); }
.quick-action-btn.qa-green .qa-icon { background: linear-gradient(135deg, rgba(16,185,129,.16), rgba(16,185,129,.05)); color: var(--success); }

.quick-action-btn.qa-purple { border-color: rgba(139,92,246,.18); }
.quick-action-btn.qa-purple:hover { background: var(--purple-bg); border-color: rgba(139,92,246,.45); }
.quick-action-btn.qa-purple .qa-icon { background: linear-gradient(135deg, rgba(139,92,246,.16), rgba(139,92,246,.05)); color: var(--purple); }


/* ─── CHARTS ────────────────────────────────────────────────── */
.charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.chart-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  animation: fadeInUp .35s var(--ease-out) both;
}
.chart-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--sp-5);
}
.chart-header h3 {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-main);
  display: flex; align-items: center; gap: var(--sp-2);
}
.chart-header h3 i { color: var(--gold); }
.chart-select {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  color: var(--text-muted);
  outline: none;
  cursor: pointer;
  transition: var(--t);
}
.chart-select:focus { border-color: var(--gold); }

.chart-container {
  height: 180px;
  display: flex; align-items: flex-end; gap: 7px;
  padding: 0 4px;
}
.bar-chart {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  height: 100%; justify-content: flex-end;
}
.bar {
  width: 100%;
  background: linear-gradient(180deg, var(--gold-200) 0%, var(--gold) 60%, var(--gold-dark) 100%);
  border-radius: 5px 5px 3px 3px;
  min-height: 4px;
  transition: height .6s var(--ease-spring), opacity var(--t);
  opacity: .78;
}
.bar:hover { opacity: 1; }
.bar-label { font-size: var(--text-2xs); color: var(--text-muted); font-weight: 500; }


/* ─── FORMULARIOS RESPONSIVOS (grids que colapsan en pantallas chicas) ── */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 640px) {
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
}

/* ─── TABLAS ─────────────────────────────────────────────────── */
.table-responsive { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }

thead tr {
  background: var(--bg);
}
th {
  padding: 11px var(--sp-4);
  text-align: left;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .9px;
  white-space: nowrap;
  border-bottom: 2px solid var(--border);
}
th:first-child { border-radius: var(--radius-sm) 0 0 0; }
th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }

td {
  padding: 13px var(--sp-4);
  font-size: var(--text-base);
  color: var(--text-body);
  border-bottom: 1px solid var(--border-2);
  vertical-align: middle;
  transition: background var(--t-fast);
}
tr:last-child td { border-bottom: none; }

tbody tr:hover td { background: rgba(var(--gold-rgb),.04); }

/* Dark mode tablas */
[data-theme="dark"] table { color: var(--text-main); }
[data-theme="dark"] th { background: var(--card-2); color: var(--text-muted); border-bottom-color: var(--border); }
[data-theme="dark"] td { border-bottom-color: var(--border-2); color: var(--text-body); }
[data-theme="dark"] tbody tr:hover td { background: rgba(255,255,255,.03); }


/* ─── BADGES ────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: .3px;
  line-height: 1.4;
}
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger-text); }
.badge-info    { background: var(--info-bg);    color: var(--info-text); }
.badge-gold    { background: var(--gold-pale);  color: var(--gold-dark); border: 1px solid rgba(var(--gold-rgb),.28); }


/* ─── BOTONES ────────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--gold-200) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  color: var(--dark);
  border: none;
  padding: 9px var(--sp-5);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 700;
  font-family: var(--font-sans);
  transition: transform var(--t), box-shadow var(--t), filter var(--t);
  display: inline-flex; align-items: center; gap: 7px;
  letter-spacing: .2px;
  box-shadow: 0 2px 8px rgba(var(--gold-rgb),.28);
  position: relative; overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%);
  pointer-events: none;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-gold); filter: brightness(1.05); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(var(--gold-rgb),.20); }

.btn-secondary {
  background: var(--card);
  color: var(--text-main);
  border: 1.5px solid var(--border);
  padding: 9px var(--sp-5);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 600;
  font-family: var(--font-sans);
  transition: var(--t);
  display: inline-flex; align-items: center; gap: 7px;
}
.btn-secondary:hover { border-color: var(--gold); color: var(--gold-dark); background: var(--gold-pale); }

.btn-success {
  background: var(--success);
  color: #fff; border: none;
  padding: 9px var(--sp-5); border-radius: var(--radius-sm);
  cursor: pointer; font-size: var(--text-base); font-weight: 600;
  font-family: var(--font-sans); transition: var(--t);
  display: inline-flex; align-items: center; gap: 7px;
  box-shadow: 0 2px 8px rgba(16,185,129,.25);
}
.btn-success:hover { filter: brightness(1.08); box-shadow: 0 4px 14px rgba(16,185,129,.35); }

.btn-danger {
  background: var(--danger);
  color: #fff; border: none;
  padding: 9px var(--sp-5); border-radius: var(--radius-sm);
  cursor: pointer; font-size: var(--text-base); font-weight: 600;
  font-family: var(--font-sans); transition: var(--t);
  display: inline-flex; align-items: center; gap: 7px;
  box-shadow: 0 2px 8px rgba(239,68,68,.20);
}
.btn-danger:hover { filter: brightness(1.08); box-shadow: 0 4px 14px rgba(239,68,68,.30); }

.btn-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border: none;
  font-size: var(--text-base);
  transition: var(--t);
}


/* ─── FORMS ──────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--sp-4); }

.form-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: .1px;
}
.form-label.required::after { content: ' *'; color: var(--danger); }

.form-control {
  width: 100%;
  padding: 10px var(--sp-4);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  font-family: var(--font-sans);
  color: var(--text-main);
  background: var(--card);
  outline: none;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  line-height: 1.5;
}
.form-control:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.12);
  background: var(--card);
}
.form-control::placeholder { color: var(--text-faint); }
textarea.form-control { resize: vertical; min-height: 80px; }

/* Dark mode forms */
[data-theme="dark"] .form-control {
  background: var(--card-2);
  color: var(--text-main);
  border-color: var(--border);
}
[data-theme="dark"] .form-control:focus {
  background: var(--card);
  border-color: var(--gold);
}
[data-theme="dark"] .form-label { color: var(--text-muted); }
[data-theme="dark"] select.form-control option {
  background: var(--card-2);
  color: var(--text-main);
}


/* ─── MODAL ───────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(13,13,26,.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
  animation: fadeIn .18s var(--ease-out);
}

.modal-box {
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: scaleIn .25s var(--ease-spring) both;
  box-shadow: var(--shadow-2xl);
  border: 1px solid var(--border);
}

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.modal-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-main);
  display: flex; align-items: center; gap: var(--sp-3);
}
.modal-title i { color: var(--gold); }

.modal-close {
  width: 32px; height: 32px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 17px;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: var(--t);
  flex-shrink: 0;
}
.modal-close:hover { background: var(--danger-bg); color: var(--danger); border-color: rgba(239,68,68,.25); }

.modal-footer {
  display: flex; justify-content: flex-end; gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

/* Dark mode modal */
[data-theme="dark"] .modal-box { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .modal-header { border-bottom-color: var(--border); }
[data-theme="dark"] .modal-footer { border-top-color: var(--border); }
[data-theme="dark"] .modal-close { background: var(--card-2); border-color: var(--border); }


/* ─── EMPTY STATE ────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--sp-12) var(--sp-5);
  color: var(--text-muted);
}
.empty-state i {
  font-size: 46px;
  color: var(--border);
  margin-bottom: var(--sp-3);
  display: block;
}
.empty-state p { font-size: var(--text-md); line-height: 1.6; }


/* ─── LOADING SPINNER ─────────────────────────────────────────── */
.loading-spinner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px; gap: var(--sp-4);
  color: var(--text-muted); font-size: var(--text-md);
}
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin .75s linear infinite;
}

/* Skeleton loader */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--border) 0%,
    var(--bg-raised) 40%,
    var(--border) 80%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent;
  user-select: none;
}


/* ─── TOAST NOTIFICATIONS ────────────────────────────────────── */
#toastContainer {
  position: fixed; bottom: var(--sp-6); right: var(--sp-6);
  z-index: 99999;
  display: flex; flex-direction: column; gap: var(--sp-3);
  max-width: 380px;
}

.toast {
  background: var(--card);
  border-radius: var(--radius);
  padding: 13px var(--sp-4);
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--text-base);
  font-weight: 500;
  min-width: 280px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  animation: slideInRight .28s var(--ease-out) both;
  color: var(--text-main);
  position: relative;
  overflow: hidden;
}
.toast::before {
  content: '';
  position: absolute; inset: 0;
  background: currentColor;
  opacity: .02;
  pointer-events: none;
}

.toast.success { border-left-color: var(--success); color: var(--success-text); background: var(--success-bg); }
.toast.error   { border-left-color: var(--danger);  color: var(--danger-text);  background: var(--danger-bg); }
.toast.warning { border-left-color: var(--warning); color: var(--warning-text); background: var(--warning-bg); }
.toast.success i { color: var(--success); }
.toast.error   i { color: var(--danger); }
.toast.warning i { color: var(--warning); }
.toast i { font-size: 17px; flex-shrink: 0; }

[data-theme="dark"] .toast {
  background: var(--card);
  border-color: var(--border);
  color: var(--text-main);
}
[data-theme="dark"] .toast.success { background: var(--success-bg); color: var(--success-text); border-color: transparent; }
[data-theme="dark"] .toast.error   { background: var(--danger-bg);  color: var(--danger-text);  border-color: transparent; }
[data-theme="dark"] .toast.warning { background: var(--warning-bg); color: var(--warning-text); border-color: transparent; }


/* ─── ACCESORIO / PROMO / CREDITO CARDS ─────────────────────── */
.accesorio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.accesorio-card {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  border: 1.5px solid var(--border);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.accesorio-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(var(--gold-rgb),.45);
}

.promo-card {
  background: linear-gradient(135deg, #FFFBEB 0%, var(--warning-bg) 100%);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  border-left: 4px solid var(--warning);
  border: 1px solid rgba(245,158,11,.20);
  border-left: 4px solid var(--warning);
}
.credito-card {
  background: var(--info-bg);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  border-left: 4px solid var(--info);
}


/* ─── ATRIBUTOS DINÁMICOS ────────────────────────────────────── */
.attr-row {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  border: 1.5px solid var(--border);
  position: relative;
  transition: border-color var(--t);
}
.attr-row:hover { border-color: rgba(var(--gold-rgb),.40); }


/* ─── PANEL DE NOTIFICACIONES ─────────────────────────────────── */
.notif-panel {
  position: fixed; top: 68px; right: 18px;
  width: 370px; max-height: 510px; overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: 9998;
  animation: scaleIn .2s var(--ease-spring) both;
}
.notif-panel-header {
  padding: var(--sp-4) var(--sp-4);
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; background: var(--card);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  z-index: 1;
}
.notif-section { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.notif-section-label {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: var(--sp-2);
  color: var(--text-muted);
}
.notif-item {
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  margin-bottom: 6px;
  cursor: pointer;
  transition: background var(--t);
  border: 1px solid transparent;
}
.notif-item:hover { background: var(--bg); border-color: var(--border); }
.notif-item:last-child { margin-bottom: 0; }

[data-theme="dark"] .notif-panel { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .notif-panel-header { background: var(--card); border-bottom-color: var(--border); }


/* ─── PAGINACIÓN ─────────────────────────────────────────────── */
.paginacion-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) 4px 4px;
  flex-wrap: wrap; gap: var(--sp-3);
}
.pag-info { font-size: var(--text-base); color: var(--text-muted); }
.pag-botones {
  display: flex; gap: 3px; align-items: center; flex-wrap: wrap;
}
.pag-btn {
  min-width: 34px; height: 34px;
  padding: 0 8px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: var(--t-fast);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 500;
}
.pag-btn:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold-dark);
  background: var(--gold-pale);
}
.pag-btn:disabled { opacity: .35; cursor: default; }
.pag-btn.pag-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(var(--gold-rgb),.30);
}
.pag-dots { color: var(--text-muted); padding: 0 4px; font-size: var(--text-base); line-height: 34px; }

/* ─── TOGGLE SWITCH (reportes programados) ───────────────────── */
.switch-toggle { position:relative; display:inline-block; width:38px; height:22px; cursor:pointer; }
.switch-toggle input { opacity:0; width:0; height:0; }
.slider-toggle {
  position:absolute; inset:0; background:var(--border); border-radius:22px;
  transition:.3s; cursor:pointer;
}
.slider-toggle::before {
  content:''; position:absolute; height:16px; width:16px; left:3px; bottom:3px;
  background:#fff; border-radius:50%; transition:.3s;
}
.switch-toggle input:checked + .slider-toggle { background:var(--gold); }
.switch-toggle input:checked + .slider-toggle::before { transform:translateX(16px); }

/* ─── BADGE TIPO REPORTE ─────────────────────────────────────── */
.badge-tipo {
  display:inline-block; padding:2px 8px; border-radius:6px; font-size:11px; font-weight:700;
  background:rgba(var(--gold-rgb),.15); color:var(--gold);
}

/* ─── DARK MODE: secciones restantes ─────────────────────────── */
[data-theme="dark"] .section-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .quick-action-btn {
  background: var(--card);
  border-color: var(--border);
  color: var(--text-main);
}
[data-theme="dark"] .content-area { background: var(--bg); }
[data-theme="dark"] .section-header { border-bottom-color: var(--border); }
[data-theme="dark"] .section-card  { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .breadcrumb { color: var(--text-muted); }
[data-theme="dark"] #pageTitle { color: var(--text-main); }
[data-theme="dark"] .badge-info    { background: var(--info-bg);    color: var(--info-text); }
[data-theme="dark"] .badge-success { background: var(--success-bg); color: var(--success-text); }
[data-theme="dark"] .badge-warning { background: var(--warning-bg); color: var(--warning-text); }
[data-theme="dark"] .badge-danger  { background: var(--danger-bg);  color: var(--danger-text); }
[data-theme="dark"] .chart-select  { background: var(--card-2); color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] .accesorio-card { background: var(--card-2); border-color: var(--border); }
[data-theme="dark"] .attr-row { background: var(--card-2); border-color: var(--border); }
[data-theme="dark"] .btn-secondary { background: var(--card-2); border-color: var(--border); color: var(--text-main); }
[data-theme="dark"] .pag-btn { background: var(--card-2); border-color: var(--border); color: var(--text-main); }
[data-theme="dark"] .pag-btn:hover:not(:disabled) { background: rgba(var(--gold-rgb),.1); border-color: rgba(var(--gold-rgb),.35); color: var(--gold); }

} /* end @layer components */


/* ================================================================
   LAYER: POS
   ================================================================ */
@layer pos {

/* ────────────────────────────────────────────────────────────────────
   PUNTO DE VENTA (.pos2) — disposición pedida por el cliente:
   riel de acciones a la izquierda, vista previa + buscador arriba,
   tabla de artículos al centro, botones y total a la derecha, y una
   barra inferior con atajos, descuento y el botón de cobrar.
   El pago NO vive aquí: se abre como ventana propia (.pos2-cobro).
   ──────────────────────────────────────────────────────────────────── */
.pos2 {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 320px;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "rail body side"
    "bottom bottom bottom";
  gap: var(--sp-3);
  /* 100dvh y no 100vh: en el navegador móvil, `vh` cuenta la barra de
     direcciones aunque esté visible, y el POS quedaba más alto que la pantalla.
     Los 132px son la barra superior más el respiro de la zona de contenido. */
  height: calc(100dvh - 132px);
  /* SIN min-height: un mínimo de 540px hacía que en pantallas de menos de
     ~670px de alto —portátiles de 14", navegador con barras— el punto de venta
     midiera más que el hueco disponible y la página entera se pusiera a
     scrollear, justo lo que había que ver de un vistazo: la calculadora. Lo que
     se encoge es la tabla de artículos, que ya tiene su propio scroll. */
  min-height: 0;
}
/* Navegadores sin `dvh` (Safari viejo, WebView): se quedan con vh. */
@supports not (height: 100dvh) {
  .pos2 { height: calc(100vh - 132px); }
}

/* Y donde se puede, el hueco se mide en vez de calcularse: el POS ocupa lo que
   deje la zona de contenido, sea cual sea la altura de la barra superior o el
   relleno de la página. Los 132px de arriba quedan solo como respaldo; eran una
   estimación, y cuando se quedaba corta la página entera scrolleaba. */
@supports selector(:has(*)) {
  /* Con el punto de venta en pantalla, la ventana se reparte en tres piezas de
     altura conocida —barra superior, contenido y pie— y ninguna desborda. El
     `min-height: 100vh` del armazón sumaba el pie POR DEBAJO del alto de la
     pantalla, y esos 60 px eran los que obligaban a bajar con el ratón para
     terminar de ver la calculadora. */
  .app-container:has(.pos2),
  .main-content:has(.pos2) { height: 100dvh; min-height: 0; }
  .main-content:has(.pos2) > .content-area { min-height: 0; overflow: hidden; }
  .main-content:has(.pos2) > .fabricante-pie { flex-shrink: 0; }

  .content-area:has(.pos2) > #pageContent { height: 100%; }
  .pos2 { height: 100%; }
}

/* ── Riel de acciones ── */
.pos2-rail { grid-area: rail; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.pos2-rail-btn {
  flex: 1; min-height: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(2px, .6vh, 5px);
  padding: 6px 3px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  cursor: pointer;
  transition: var(--t);
}
.pos2-rail-btn i { font-size: 18px; color: var(--gold); }
.pos2-rail-btn:hover {
  border-color: rgba(var(--gold-rgb),.55);
  background: var(--gold-pale);
  color: var(--text-main);
}
.pos2-rail-danger i { color: var(--danger); }
.pos2-rail-danger:hover { border-color: var(--danger); background: var(--danger-bg); }

/* ── Cuerpo ── */
.pos2-body {
  grid-area: body;
  display: flex; flex-direction: column; gap: var(--sp-3);
  min-width: 0; min-height: 0;
}

.pos2-alerta {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px 14px;
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  border-radius: var(--radius);
  font-size: var(--text-base); color: var(--text-main);
}
.pos2-alerta > i { font-size: 20px; color: var(--warning); flex-shrink: 0; }
.pos2-alerta > div { flex: 1; }
.pos2-alerta button {
  flex-shrink: 0;
  padding: 8px 14px; border: none; border-radius: var(--radius-sm);
  background: var(--gold); color: var(--dark);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 700;
  cursor: pointer; white-space: nowrap;
}

.pos2-top { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: var(--sp-3); }

/* Vista previa del artículo resaltado */
.pos2-img {
  margin: 0; height: 116px;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
}
.pos2-img img { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: var(--bg); padding: 5px; }
.pos2-img-ph {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--bg); color: var(--border); font-size: 28px;
}
.pos2-img-ph span {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint);
}
.pos2-img figcaption {
  padding: 5px 7px;
  border-top: 1px solid var(--border);
  font-size: var(--text-2xs); color: var(--text-muted); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Buscador en píldora */
.pos2-search { position: relative; display: flex; align-items: center; min-width: 0; }
.pos2-pill {
  width: 100%;
  display: flex; align-items: center; gap: var(--sp-3);
  height: 56px; padding: 0 22px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow);
  transition: var(--t);
}
.pos2-pill:focus-within {
  border-color: rgba(var(--gold-rgb),.55);
  box-shadow: 0 0 0 4px rgba(var(--gold-rgb),.12);
}
.pos2-pill > i { color: var(--gold); font-size: 18px; flex-shrink: 0; }
.pos2-pill input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-family: var(--font-sans); font-size: var(--text-lg); color: var(--text-main);
}
.pos2-pill input::placeholder { color: var(--text-muted); }
.pos2-pill kbd {
  flex-shrink: 0;
  font-family: var(--font-sans); font-size: var(--text-xs);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 2px 7px; color: var(--text-muted);
}

/* Resultados: flotan sobre la tabla, no la empujan */
.pos2-drop {
  display: none;
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  padding: 8px; max-height: 46vh; overflow-y: auto;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
}
.pos2-drop.abierto { display: block; }
.pos2-drop-vacio { margin: 0; padding: 14px; text-align: center; font-size: var(--text-base); color: var(--text-muted); }

/* ── Bienvenida de una instalación nueva ──
   Cubre la pantalla entera y no se cierra por fuera: es la única vez que se
   interrumpe al usuario, y lo que pide sale impreso en todo lo que venda. */
.bienv-capa {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
  background: rgba(0, 0, 0, .62); backdrop-filter: blur(3px);
  overflow-y: auto;
}
.bienv-caja {
  width: min(46rem, 100%); margin: auto;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.bienv-cab {
  display: flex; gap: 14px; align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-raised); border-bottom: 1px solid var(--border);
}
.bienv-cab > i { font-size: 26px; color: var(--gold); margin-top: 2px; }
.bienv-cab h2 { margin: 0 0 4px; font-size: var(--text-lg); }
.bienv-cab p  { margin: 0; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.55; max-width: 52ch; }

.bienv-cuerpo {
  display: grid; grid-template-columns: 12rem 1fr; gap: var(--sp-5);
  padding: var(--sp-5);
}
@media (max-width: 640px) { .bienv-cuerpo { grid-template-columns: 1fr; } }

.bienv-logo { display: grid; gap: 8px; justify-items: center; align-content: start; }
.bienv-logo-caja {
  width: 100%; aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background: var(--bg); border: 1.5px dashed var(--border); border-radius: var(--radius);
  color: var(--text-muted); font-size: var(--text-xs); overflow: hidden;
}
.bienv-logo-caja i { font-size: 28px; }
.bienv-logo-caja img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.bienv-logo-btn { cursor: pointer; font-size: var(--text-xs); }
.bienv-logo small { font-size: var(--text-2xs); color: var(--text-muted); text-align: center; }

.bienv-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 12px; }
.bienv-campo { display: grid; gap: 4px; }
.bienv-campo label { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
.bienv-campo small { font-size: var(--text-2xs); color: var(--text-muted); }
/* El nombre es el único obligatorio: ocupa la fila entera para que se note. */
.bienv-campo:first-child { grid-column: 1 / -1; }

.bienv-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-raised); border-top: 1px solid var(--border);
}
.bienv-nota { font-size: var(--text-xs); color: var(--text-muted); }

/* ── «¿Cuál de estos?»: artículos con nombres casi iguales ──
   Se abre cuando el Enter del buscador se llevaría el primero de varios que se
   parecen. Filas altas y con el precio a la derecha: se lee de un vistazo, que
   es todo el tiempo que hay con un cliente delante. */
.pos-dup-lista { display: grid; gap: 8px; max-height: 52vh; overflow-y: auto; }
.pos-dup-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 13px; text-align: left; cursor: pointer;
  background: var(--card); color: var(--text-main);
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-family: inherit;
}
.pos-dup-item:hover, .pos-dup-item:focus-visible {
  border-color: var(--gold); background: var(--bg-raised); outline: none;
}
.pos-dup-tecla {
  flex: 0 0 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px;
  font-size: var(--text-xs); font-weight: 700; color: var(--text-muted);
}
.pos-dup-item:hover .pos-dup-tecla { border-color: var(--gold); color: var(--gold); }
.pos-dup-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pos-dup-txt b { font-size: var(--text-base); font-weight: 600; }
.pos-dup-txt small { font-size: var(--text-xs); color: var(--text-muted); }
.pos-dup-precio { font-weight: 700; white-space: nowrap; color: var(--gold-dark, var(--gold)); }

/* ── Tabla de artículos de la venta ── */
.pos2-cart {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pos2-cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px var(--sp-4);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs); font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.pos2-cart-head i { color: var(--gold); margin-right: 6px; }
.pos2-table-wrap { flex: 1; min-height: 0; overflow: auto; }
.pos2-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); }
.pos2-table thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 9px 12px; text-align: left;
  background: var(--card);
  border-bottom: 1.5px solid var(--border);
  font-size: var(--text-2xs); font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.pos2-table td {
  padding: 9px 12px; vertical-align: middle;
  border-bottom: 1px solid var(--border-2);
  font-size: var(--text-base); color: var(--text-main);
}
.pos2-table tbody tr:hover td { background: var(--bg-raised); }
/* La línea cuya foto se está viendo arriba: el vendedor tiene que saber a qué
   artículo corresponde la imagen del recuadro. La barra dorada va SOLO en la
   primera celda; puesta en todas, dibujaba una raya dentro de cada columna. */
.pos2-table tbody tr.activo td { background: var(--bg-raised); }
.pos2-table tbody tr.activo td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.pos2-table .c-num   { width: 46px;  text-align: center; }
.pos2-table .c-cant  { width: 128px; }
.pos2-table .c-num-r { width: 122px; text-align: right; white-space: nowrap; }
.pos2-table .c-acc   { width: 80px;  text-align: right; white-space: nowrap; }
/* Los botones de acción son flex por defecto: en la celda deben ir en línea. */
.pos2-table .c-acc button { display: inline-flex; vertical-align: middle; }

.pos2-idx {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold-pale); color: var(--gold-dark);
  font-size: var(--text-xs); font-weight: 800;
}
.pos2-art { font-weight: 600; }
.pos2-art-desc {
  font-size: var(--text-xs); color: var(--text-muted); font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42ch;
}
.pos2-art-meta {
  margin-top: 2px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: var(--text-xs); color: var(--text-muted);
}
.pos2-linea-total { font-weight: 800; }
.pos2-linea-total s { font-size: var(--text-xs); color: var(--text-muted); font-weight: 400; }

.pos2-vacio td, .pos2-vacio:hover td {
  padding: 46px 20px; text-align: center; background: transparent;
  border-bottom: none; color: var(--text-muted);
}
.pos2-vacio i { font-size: 36px; color: var(--border); display: block; margin-bottom: var(--sp-2); }
.pos2-vacio p { margin: 0; font-size: var(--text-md); font-weight: 600; }
.pos2-vacio span { font-size: var(--text-sm); color: var(--text-faint); }

/* ── Columna derecha ── */
/* La calculadora se lee entera o no sirve: ni scroll ni piezas cortadas.
   Dos intentos anteriores fallaron por el mismo malentendido:
     1. dejar que las cajas «cedieran espacio» encogiéndose → encoger la caja NO
        encoge su contenido, así que se derramaba sobre la de abajo;
     2. darle scroll a la columna → dejaba de verse «Apartar venta».
   Lo que se adapta es el CONTENIDO: rellenos, huecos y tipografías se miden en
   `vh`, con un mínimo legible y un máximo cómodo (`clamp`). En una pantalla
   holgada se ve como siempre; en una baja todo encoge a la vez y las cuatro
   piezas siguen cabiendo enteras. */
.pos2-side {
  grid-area: side; display: flex; flex-direction: column;
  gap: clamp(3px, .7vh, 8px);
  min-height: 0; min-width: 0;
  overflow: visible;
}
.pos2-side > * { flex-shrink: 0; }
.pos2-side-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pos2-sbtn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(2px, .6vh, 5px);
  padding: clamp(4px, 1.2vh, 9px) 4px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: 700;
  cursor: pointer; transition: var(--t); text-align: center;
}
.pos2-sbtn i { font-size: clamp(11px, 1.9vh, 15px); color: var(--gold); }
.pos2-sbtn:hover { border-color: rgba(var(--gold-rgb),.55); background: var(--gold-pale); }
.pos2-sbtn-cerrar i { color: var(--danger); }
.pos2-sbtn-cerrar:hover { border-color: var(--danger); background: var(--danger-bg); }

.pos2-box {
  background: var(--dark-3);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  padding: clamp(6px, 1.5vh, 12px);
}
.pos2-box-label {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: clamp(3px, .9vh, 8px);
  font-size: var(--text-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: rgba(var(--gold-rgb),.9);
}
.pos2-box-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: clamp(5px, 1.4vh, 10px);
  background: rgba(var(--gold-rgb),.13);
  border: 1.5px solid rgba(var(--gold-rgb),.42);
  border-radius: var(--radius-sm);
  color: var(--gold);
  font-family: var(--font-sans); font-size: var(--text-base); font-weight: 700;
  cursor: pointer; transition: var(--t);
}
.pos2-box-btn:hover { background: rgba(var(--gold-rgb),.22); }
/* Segundo botón de la caja: se distingue del principal sin competir con él. */
.pos2-box-btn + .pos2-box-btn { margin-top: clamp(3px, .8vh, 6px); }
.pos2-box-btn-alt {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.75);
}
.pos2-box-btn-alt:hover { background: rgba(255,255,255,.12); color: #fff; }

.pos2-promo {
  padding: 9px 12px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 600; color: var(--success);
}
.pos2-promo i { margin-right: 6px; }

/* Total: pegado abajo del todo, como en el boceto */
.pos2-total {
  /* `margin-top: auto` lo empuja abajo cuando sobra sitio; `sticky` lo mantiene
     a la vista cuando la columna se desplaza. El fondo es opaco a propósito:
     las cajas de arriba pasan por debajo sin transparentarse. */
  margin-top: auto;
  background: var(--dark-3);
  border: 1px solid rgba(var(--gold-rgb),.35);
  border-radius: var(--radius);
  padding: clamp(8px, 1.8vh, 16px);
}
.pos2-total-desglose { margin-bottom: clamp(2px, .7vh, 8px); }
.pos2-tr {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: clamp(1px, .35vh, 3px) 0;
  font-size: clamp(11px, 1.6vh, 14px); color: rgba(255,255,255,.5);
}
.pos2-tr-resta, .pos2-tr-resta span { color: #FCA5A5; }
.pos2-tr i { font-size: 10px; }
.pos2-total-label {
  padding-top: clamp(4px, 1.2vh, 10px);
  border-top: 1px solid rgba(var(--gold-rgb),.3);
  font-size: var(--text-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: rgba(255,255,255,.55);
}
.pos2-total-val {
  font-size: clamp(20px, min(2.4vw, 4.6vh), 38px); font-weight: 900;
  line-height: 1.1; letter-spacing: -.03em; color: var(--gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Barra inferior ── */
.pos2-bottom {
  grid-area: bottom;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--sp-4);
  padding: 10px var(--sp-4);
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pos2-atajos { display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--text-xs); color: var(--text-muted); }
.pos2-atajos kbd {
  font-family: var(--font-sans); font-size: var(--text-2xs);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 1px 5px; margin-right: 3px;
  box-shadow: 0 1px 0 var(--border);
}
.pos2-desc { display: flex; align-items: center; gap: 8px; }
.pos2-desc label {
  font-size: var(--text-2xs); font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.pos2-desc label i { color: var(--gold); margin-right: 4px; }
.pos2-desc input, .pos2-desc select {
  padding: 8px 10px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-family: var(--font-sans); font-size: var(--text-md); font-weight: 700;
  outline: none; transition: var(--t);
}
.pos2-desc input { width: 96px; }
.pos2-desc input:focus, .pos2-desc select:focus { border-color: rgba(var(--gold-rgb),.6); }

.pos2-cobrar {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 26px;
  background: linear-gradient(135deg, var(--gold-200) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  border: none; border-radius: var(--radius);
  color: var(--dark);
  font-family: var(--font-sans); font-size: var(--text-xl); font-weight: 900;
  text-transform: uppercase; letter-spacing: .04em;
  cursor: pointer; box-shadow: var(--shadow-gold); transition: var(--t);
}
.pos2-cobrar kbd {
  font-family: var(--font-sans); font-size: var(--text-2xs);
  background: rgba(0,0,0,.18); border-radius: var(--radius-xs); padding: 2px 7px;
}
.pos2-cobrar:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 30px rgba(var(--gold-rgb),.45); }
.pos2-cobrar:active:not(:disabled) { transform: translateY(0); }
.pos2-cobrar:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.6); box-shadow: none; }

/* Justificación del descuento: segunda fila de la barra inferior */
.pos2-just { grid-column: 1 / -1; }
.pos2-just input {
  width: 100%; padding: 8px 12px;
  background: var(--warning-bg);
  border: 1.5px solid var(--warning);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-family: var(--font-sans); font-size: var(--text-base);
  outline: none;
}

/* ── Ventana de cobro (todo el pago vive aquí) ── */
.pos2-cobro-ov {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
  background: rgba(0,0,0,.6);
}
.pos2-cobro {
  width: 100%; max-width: 440px; max-height: calc(100vh - 32px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--dark-3);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}
.pos2-cobro-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, rgba(var(--gold-rgb),.18), transparent);
}
.pos2-cobro-t { font-size: var(--text-lg); font-weight: 800; color: #fff; }
.pos2-cobro-t i { color: var(--gold); margin-right: 7px; }
.pos2-cobro-s { margin-top: 2px; font-size: var(--text-sm); color: rgba(255,255,255,.45); }
.pos2-cobro-x {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.45); font-size: 24px; line-height: 1; padding: 0 4px;
}
.pos2-cobro-x:hover { color: #fff; }
.pos2-cobro-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-4) var(--sp-5); }
.pos2-cobro-pie {
  display: flex; gap: 10px;
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.pos2-cobro-cancel {
  flex: none; padding: 12px 16px;
  background: none; border: 1.5px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  color: rgba(255,255,255,.65);
  font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600;
  cursor: pointer; transition: var(--t);
}
.pos2-cobro-cancel:hover { border-color: rgba(255,255,255,.3); color: #fff; }
.pos2-cobro-pie .pos-btn-procesar { flex: 1; justify-content: center; }

.pos2-metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: var(--sp-3); }
.pago-btn-row {
  flex-direction: row; gap: 7px; min-height: 42px; padding: 10px 8px;
  font-size: var(--text-sm); font-weight: 700;
}
.pago-btn-credito { border-color: rgba(255,165,0,.4); color: rgba(255,165,0,.9); }
.pos2-kbd {
  font-family: var(--font-sans); font-size: 9px; margin-left: 5px;
  background: rgba(255,255,255,.1); border-radius: var(--radius-xs); padding: 1px 5px;
}

/* Descuento aplicado a una línea concreta del carrito */
.pos-cart-item-desc-aplicado {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--warning-bg); color: var(--warning);
  font-size: var(--text-2xs); font-weight: 700;
}
.pos-cart-item-desc-aplicado button {
  border: none; background: none; cursor: pointer; color: inherit;
  font-size: 14px; line-height: 1; padding: 0 2px;
}
.pos-cart-item-desc-btn {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--card);
  color: var(--text-muted); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); transition: var(--t-fast);
}
.pos-cart-item-desc-btn:hover {
  border-color: var(--warning); color: var(--warning); background: var(--warning-bg);
}

.pos-cart-item-qty {
  display: flex; align-items: center;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pos-qty-btn {
  width: 30px; height: 30px;
  border: none; background: transparent;
  cursor: pointer; font-size: 15px; font-weight: 700;
  color: var(--text-muted);
  transition: var(--t-fast);
  display: flex; align-items: center; justify-content: center;
}
.pos-qty-btn:hover { background: var(--border); color: var(--text-main); }
.pos-qty-btn-plus:hover { background: var(--gold-pale); color: var(--gold-dark); }
.pos-qty-val {
  min-width: 32px; text-align: center;
  font-weight: 700; font-size: var(--text-md);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  line-height: 30px;
  color: var(--text-main);
}

.pos-cart-item-del {
  width: 28px; height: 28px;
  border: none; background: none;
  color: var(--border);
  cursor: pointer; font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  transition: var(--t-fast);
  display: flex; align-items: center; justify-content: center;
}
.pos-cart-item-del:hover { background: var(--danger-bg); color: var(--danger); }

/* ── Bloques del pago (viven en la ventana de cobro) ── */
/* Blindaje anti-desborde: las celdas de grid/flex traen min-width:auto por defecto,
   así que un importe largo (p. ej. "1.342.320") estiraba el panel y recortaba el resto
   (el "%" del descuento). Con min-width:0 las celdas pueden encogerse y nada desborda. */
.pos2-cobro [style*="grid"] > * { min-width: 0; }

.pos-client-card {
  /* Tinte dorado SOBRE el oscuro sólido (--dark-3 es fijo): destaca como zona
     propia y el texto blanco sigue legible en tema claro y oscuro. */
  background: linear-gradient(180deg, rgba(var(--gold-rgb),.30), rgba(var(--gold-rgb),.12)), var(--dark-3);
  border-radius: var(--radius);
  padding: clamp(6px, 1.5vh, 12px);
  border: 1px solid rgba(var(--gold-rgb),.55);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),.10);
}
.pos-client-label {
  font-size: var(--text-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: rgba(var(--gold-rgb),.9);
  margin-bottom: clamp(3px, .9vh, 8px);
  display: flex; align-items: center; gap: 5px;
}
.pos-client-label i { color: var(--gold); }
.pos-client-input {
  width: 100%; padding: clamp(5px, 1.4vh, 10px) 12px clamp(5px, 1.4vh, 10px) 34px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(var(--gold-rgb),.28);
  border-radius: var(--radius-sm);
  color: #fff; font-size: var(--text-base); font-family: var(--font-sans);
  outline: none; transition: var(--t);
}
.pos-client-input::placeholder { color: rgba(255,255,255,.28); }
.pos-client-input:focus { border-color: rgba(var(--gold-rgb),.55); background: rgba(255,255,255,.09); }
.pos-client-sel {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(var(--gold-rgb),.11);
  border: 1px solid rgba(var(--gold-rgb),.22);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.pos-client-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gold); color: var(--dark);
  font-size: var(--text-xs); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.pos-client-remove {
  background: none; border: none; color: rgba(255,255,255,.35);
  cursor: pointer; font-size: var(--text-base);
  padding: 4px 6px; border-radius: var(--radius-sm);
  transition: var(--t);
}
.pos-client-remove:hover { background: rgba(239,68,68,.2); color: #EF4444; }

/* Desglose de totales dentro de la ventana de cobro */
.pos-totales { margin-bottom: 2px; }
.pos-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 0;
  font-size: var(--text-base); color: rgba(255,255,255,.48);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.pos-total-row:last-of-type { border-bottom: none; }
.pos-total-descuento { color: rgba(252,165,165,.8) !important; }
.pos-descuento-val   { color: #FCA5A5 !important; }

.pos-total-final {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0 2px;
  border-top: 1px solid rgba(var(--gold-rgb),.28);
  margin-top: var(--sp-1);
}
.pos-total-final span:first-child {
  font-size: var(--text-base); font-weight: 700; color: rgba(255,255,255,.65);
  text-transform: uppercase; letter-spacing: .07em;
}
.pos-total-final span:last-child {
  font-size: var(--text-3xl); font-weight: 900; color: var(--gold);
  letter-spacing: -.025em;
}

.pos-sep { height: 1px; background: rgba(255,255,255,.06); margin: var(--sp-2) 0; }

.pos-mini-input {
  flex: 1; padding: 8px 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-sm);
  color: #fff; font-size: var(--text-base); font-family: var(--font-sans);
  outline: none; transition: var(--t); min-width: 0;
}
.pos-mini-input:focus { border-color: rgba(var(--gold-rgb),.55); }
.pos-metodo-label {
  font-size: var(--text-2xs); font-weight: 700;
  color: rgba(255,255,255,.38);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: var(--sp-2);
}

.pos-efectivo-input-wrap {
  display: flex; align-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-sm); overflow: hidden; transition: var(--t);
}
.pos-efectivo-input-wrap:focus-within {
  border-color: rgba(var(--gold-rgb),.55);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.10);
}
.pos-efectivo-prefix {
  padding: 0 12px;
  font-size: 17px; font-weight: 700; color: rgba(255,255,255,.28);
  border-right: 1px solid rgba(255,255,255,.09);
  user-select: none;
}
.pos-efectivo-input {
  flex: 1; min-width: 0;   /* permite encogerse: importes largos no desbordan el panel */
  padding: 9px 14px;
  background: transparent; border: none; outline: none;
  color: #fff; font-size: 18px; font-weight: 800;
  font-family: var(--font-sans); text-align: left;
}
.pos-efectivo-input::placeholder { color: rgba(255,255,255,.18); font-weight: 400; font-size: 16px; }
.pos-cambio-row {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(var(--gold-rgb),.09);
  border: 1px solid rgba(var(--gold-rgb),.18);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: var(--text-xs); color: rgba(255,255,255,.45);
  text-transform: uppercase; letter-spacing: .07em;
}
.pos-cambio-val { font-size: 20px; font-weight: 800; color: var(--gold); }

.pos-mp-info {
  background: rgba(0,158,227,.07);
  border: 1px solid rgba(0,158,227,.18);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.pos-mp-info-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: var(--sp-2);
  font-size: var(--text-base); font-weight: 700; color: #5bc8f5;
}
.pos-mp-cards { margin-left: auto; display: flex; gap: 5px; align-items: center; }
.pos-mp-info-text {
  font-size: var(--text-sm); color: rgba(255,255,255,.45);
  line-height: 1.5; margin: 0;
}
.pos-mp-info-text strong { color: rgba(255,255,255,.82); }

/* Botón procesar */
.pos-btn-procesar {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; padding: 12px var(--sp-5);
  background: linear-gradient(135deg, var(--gold-200) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  color: var(--dark);
  border: none; border-radius: var(--radius);
  font-size: var(--text-xl); font-weight: 800;
  font-family: var(--font-sans); cursor: pointer;
  transition: var(--t); box-shadow: var(--shadow-gold);
  position: relative; overflow: hidden;
}
.pos-btn-procesar::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%);
  pointer-events: none;
}
.pos-btn-procesar:hover { transform: translateY(-1px); box-shadow: 0 8px 32px rgba(var(--gold-rgb),.45); }
.pos-btn-procesar:active { transform: translateY(0); box-shadow: var(--shadow-gold); }
.pos-btn-procesar.mp-mode {
  background: linear-gradient(135deg, #009ee3 0%, #0077b6 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,158,227,.32);
}
.pos-btn-procesar.mp-mode:hover { box-shadow: 0 8px 28px rgba(0,158,227,.45); }

/* Botones de pago */
.pago-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 10px;
  border-radius: var(--radius); border: 1.5px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.48);
  cursor: pointer; font-family: var(--font-sans);
  transition: var(--t); min-height: 46px; width: 100%;
}
.pago-btn:hover {
  border-color: rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.82);
  transform: translateY(-1px);
}
.pago-btn:active { transform: translateY(0); }
.pago-btn-icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.07); transition: background var(--t);
}
.pago-btn:hover .pago-btn-icon { background: rgba(255,255,255,.12); }
.pago-btn-label {
  font-size: var(--text-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  text-align: center; white-space: nowrap;
}

.pago-btn.pago-activo {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb),.12);
  color: var(--gold);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.14);
}
.pago-btn.pago-activo .pago-btn-icon { background: rgba(var(--gold-rgb),.20); }
.pago-btn.pago-activo:hover { transform: none; }

.pago-btn.pago-btn-mp { color: rgba(0,158,227,.58); }
.pago-btn.pago-btn-mp:hover {
  border-color: rgba(0,158,227,.38); background: rgba(0,158,227,.06); color: #5bc8f5;
}
.pago-btn.pago-btn-mp .pago-btn-icon { background: rgba(0,158,227,.09); }
.pago-btn.pago-btn-mp.pago-activo,
.pago-btn.pago-btn-mp.pago-activo-mp {
  border-color: #009ee3; background: rgba(0,158,227,.12); color: #5bc8f5;
  box-shadow: 0 0 0 3px rgba(0,158,227,.14);
}
.pago-btn.pago-btn-mp.pago-activo .pago-btn-icon { background: rgba(0,158,227,.20); }
.pago-btn.pago-btn-mp.pago-activo:hover { transform: none; }

} /* end @layer pos */


/* ================================================================
   LAYER: MOBILE
   ================================================================ */
@layer mobile {

/* Bottom nav */
.mobile-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 62px;
  background: var(--card);
  border-top: 1px solid var(--border);
  z-index: 300; align-items: stretch;
  box-shadow: 0 -4px 24px rgba(0,0,0,.08);
}

.mobile-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--text-muted); text-decoration: none;
  font-size: var(--text-2xs); font-weight: 600; cursor: pointer;
  transition: color var(--t); padding: 6px 0; position: relative;
}
.mobile-nav-item i { font-size: 18px; }
.mobile-nav-item.active { color: var(--gold); }
.mobile-nav-item.active::before {
  content: '';
  position: absolute; top: 0; left: 20%; right: 20%;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 0 0 4px 4px;
}
.mobile-nav-item .mob-badge {
  position: absolute; top: 5px; right: calc(50% - 16px);
  background: var(--danger); color: #fff;
  font-size: 8px; font-weight: 700;
  width: 14px; height: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--card);
}


} /* end @layer mobile */


/* ================================================================
   LAYER: RESPONSIVE
   ================================================================ */
@layer responsive {

@media (max-width: 1280px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .charts-row { grid-template-columns: 1fr; }
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
}

/* ──────────────────────────────────────────────────────────────────
   POS — Pantallas de POCA ALTURA (laptops ~768px, proyectores, navegador
   con muchas barras…). Se aprieta lo accesorio para que la tabla de
   artículos y el total sigan cabiendo sin scroll de página.
   ────────────────────────────────────────────────────────────────── */
@media (min-width: 1101px) and (max-height: 860px) {
  .pos2            { gap: 8px; }
  .pos2-img        { height: 96px; }
  .pos2-pill       { height: 48px; }
  .pos2-total      { padding: var(--sp-3); }
  .pos2-total-val  { font-size: clamp(22px, 2vw, 30px); }
  .pos2-tr         { font-size: var(--text-xs); padding: 2px 0; }
  .pos2-box        { padding: 10px; }
  .pos2-cobrar     { padding: 10px 20px; font-size: var(--text-lg); }
  .pos2-bottom     { padding: 8px var(--sp-3); }
  .pos2-atajos     { font-size: var(--text-2xs); gap: 8px; }
}

/* Pantallas realmente bajas (portátiles de 14" con barras, 1366x625 y
   parecidas). Se recorta lo accesorio —la vista previa del artículo, los
   botones de empeño— para que la calculadora entre completa sin que la página
   scrollee. La tabla de artículos absorbe lo que falte con su propio scroll. */
@media (min-width: 1101px) and (max-height: 700px) {
  .pos2-img        { height: 78px; }
  /* El pie NO se oculta: es lo único que dice de qué artículo es la foto. Sin
     él, un producto sin imagen deja el recuadro idéntico a como estaba y
     parece que la vista previa no funciona. Se aprieta, no se quita. */
  .pos2-img figcaption { padding: 3px 6px; font-size: 10px; }
  .pos2-pill       { height: 42px; }
  .pos-client-card { padding: 8px 10px; }
  .pos2-box        { padding: 8px; }
  .pos2-box-btn    { padding: 7px 8px; }
  .pos2-sbtn       { padding: 6px 4px; }
  .pos2-total      { padding: 10px 12px; }
  .pos2-total-val  { font-size: clamp(20px, 1.8vw, 26px); }
  .pos2-total-label { padding-top: 6px; }
  .pos2-cart-head  { padding: 6px var(--sp-3); }
}

/* Portátiles angostos y tablet apaisada: el riel y el buscador siguen
   arriba, pero la columna derecha pasa a una fila bajo la tabla. */
@media (max-width: 1100px) {
  .pos2 {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "rail body"
      "side side"
      "bottom bottom";
    height: auto; min-height: 0;
  }
  /* Aquí el POS ya no cabe de una sola vista, y no debe intentarlo: apilado en
     una columna mide más que la pantalla. El armazón se dejaba en 100dvh con el
     desbordamiento oculto —eso venía de la vista de escritorio—, así que lo que
     sobresalía quedaba recortado y sin forma de llegar a ello. La página vuelve
     a desplazarse con normalidad. */
  .app-container:has(.pos2),
  .main-content:has(.pos2) { height: auto; min-height: 100dvh; }
  .main-content:has(.pos2) > .content-area { overflow: visible; }
  .content-area:has(.pos2) > #pageContent { height: auto; }
  .pos2-side { overflow-y: visible; }
  .pos2-total { position: static; }
  .pos2-cart   { min-height: 300px; }
  .pos2-side   { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .pos2-side-btns { grid-column: 1 / -1; }
  .pos2-total  { margin-top: 0; grid-column: 1 / -1; }
  .pos2-promo  { grid-column: 1 / -1; }
}

/* Tablet vertical y móvil: todo en una columna y el riel en horizontal. */
@media (max-width: 820px) {
  .pos2 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "rail" "body" "side" "bottom";
    grid-template-rows: auto auto auto auto;
  }
  .pos2-rail { flex-direction: row; flex-wrap: wrap; }
  .pos2-rail-btn { flex: 1 1 90px; flex-direction: row; gap: 8px; min-height: 44px; }
  .pos2-top { grid-template-columns: 96px minmax(0, 1fr); }
  .pos2-img { height: 96px; }
  .pos2-side { grid-template-columns: minmax(0, 1fr); }
  .pos2-bottom { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .pos2-atajos { display: none; }          /* sin teclado físico no aportan */
  .pos2-desc { justify-content: space-between; }
  .pos2-desc input { flex: 1; width: auto; }
  .pos2-cobrar { justify-content: center; font-size: var(--text-lg); }
  .pos2-cobrar kbd { display: none; }
  /* Sin ancho para todo: se oculta el precio unitario (queda el total de línea). */
  .pos2-table thead th:nth-child(4),
  .pos2-table tbody td:nth-child(4) { display: none; }
  .pos2-vacio td { display: table-cell !important; }
}

@media (max-width: 480px) {
  .pos2-metodos { grid-template-columns: 1fr; }
  .pos2-cobro-pie { flex-direction: column-reverse; }
  .pos2-cobro-cancel { width: 100%; }
}

@media (max-width: 768px) {
  .main-content { padding-bottom: 62px; }
  .top-bar       { padding: 0 var(--sp-4); gap: var(--sp-2); }
  .top-bar-left  { gap: var(--sp-2); }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
  .content-area { padding: var(--sp-4); }
  .topbar-search { display: none; }
  #pageTitle { font-size: var(--text-md); }
  .modal-box { padding: var(--sp-6) var(--sp-5); border-radius: var(--radius-lg); }
  .mobile-bottom-nav { display: flex; }
  .topbar-datetime { display: none; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .quick-actions { grid-template-columns: 1fr 1fr; }
  .login-card { padding: var(--sp-8) var(--sp-6); }
  .section-card { padding: var(--sp-4); }
}

} /* end @layer responsive */


/* ================================================================
   LAYER: UTILITIES — Helpers atómicos basados en tokens
   Reemplazan los estilos en línea de las plantillas (consistencia
   + tema claro/oscuro automático). Máxima prioridad de capa.
   ================================================================ */
@layer utilities {

/* ── Display & flex/grid ─────────────────────────────────────── */
.u-flex      { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-grid      { display: grid; }
.u-block     { display: block; }
.u-inline-block { display: inline-block; }
.u-hidden    { display: none; }
.u-col       { flex-direction: column; }
.u-wrap      { flex-wrap: wrap; }
.u-items-center   { align-items: center; }
.u-items-start    { align-items: flex-start; }
.u-items-end      { align-items: flex-end; }
.u-justify-center  { justify-content: center; }
.u-justify-between { justify-content: space-between; }
.u-justify-end     { justify-content: flex-end; }
.u-flex-1    { flex: 1; }
.u-grow      { flex-grow: 1; }
.u-shrink-0  { flex-shrink: 0; }

/* ── Gap ─────────────────────────────────────────────────────── */
.u-gap-1 { gap: var(--sp-1); }
.u-gap-2 { gap: var(--sp-2); }
.u-gap-3 { gap: var(--sp-3); }
.u-gap-4 { gap: var(--sp-4); }
.u-gap-5 { gap: var(--sp-5); }
.u-gap-6 { gap: var(--sp-6); }

/* ── Margin ──────────────────────────────────────────────────── */
.u-m-0  { margin: 0; }
.u-mt-1 { margin-top: var(--sp-1); }  .u-mt-2 { margin-top: var(--sp-2); }
.u-mt-3 { margin-top: var(--sp-3); }  .u-mt-4 { margin-top: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-5); }  .u-mt-6 { margin-top: var(--sp-6); }
.u-mb-1 { margin-bottom: var(--sp-1); }  .u-mb-2 { margin-bottom: var(--sp-2); }
.u-mb-3 { margin-bottom: var(--sp-3); }  .u-mb-4 { margin-bottom: var(--sp-4); }
.u-mb-5 { margin-bottom: var(--sp-5); }  .u-mb-6 { margin-bottom: var(--sp-6); }
.u-mt-auto { margin-top: auto; }
.u-mx-auto { margin-left: auto; margin-right: auto; }

/* ── Padding ─────────────────────────────────────────────────── */
.u-p-0 { padding: 0; }
.u-p-2 { padding: var(--sp-2); }  .u-p-3 { padding: var(--sp-3); }
.u-p-4 { padding: var(--sp-4); }  .u-p-5 { padding: var(--sp-5); }
.u-p-6 { padding: var(--sp-6); }
.u-pad-empty { padding: var(--sp-10) var(--sp-5); }

/* ── Tipografía ──────────────────────────────────────────────── */
.u-text-2xs { font-size: var(--text-2xs); }
.u-text-xs  { font-size: var(--text-xs); }
.u-text-sm  { font-size: var(--text-sm); }
.u-text-md  { font-size: var(--text-md); }
.u-text-lg  { font-size: var(--text-lg); }
.u-text-xl  { font-size: var(--text-xl); }
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }
.u-text-left   { text-align: left; }
.u-nowrap   { white-space: nowrap; }
.u-fw-500 { font-weight: 500; }
.u-fw-600 { font-weight: 600; }
.u-fw-700 { font-weight: 700; }
.u-uppercase { text-transform: uppercase; letter-spacing: .04em; }

/* ── Color de texto (semántico, theme-aware) ─────────────────── */
.u-c-main    { color: var(--text-main); }
.u-c-body    { color: var(--text-body); }
.u-c-muted   { color: var(--text-muted); }
.u-c-faint   { color: var(--text-faint); }
.u-c-gold    { color: var(--gold); }
.u-c-success { color: var(--success); }
.u-c-danger  { color: var(--danger); }
.u-c-warning { color: var(--warning); }
.u-c-info    { color: var(--info); }

/* ── Layout misc ─────────────────────────────────────────────── */
.u-w-full   { width: 100%; }
.u-relative { position: relative; }
.u-rounded  { border-radius: var(--radius); }
.u-rounded-full { border-radius: var(--radius-full); }
.u-pointer  { cursor: pointer; }
.u-opacity-30 { opacity: .3; }

/* Fila de tabla clicable (navega a detalle) con realce al pasar el cursor */
.row-link { cursor: pointer; transition: background var(--t-fast); }
.row-link:hover > td { background: var(--card-2); }

/* ── MOSAICOS del inicio (estilo Akasia: rejilla de módulos) ─── */
.tile-section { margin-bottom: var(--sp-6); }
.tile-section-title {
  font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin-bottom: var(--sp-3);
}
.tile-grid {
  display: grid;
  /* auto-fit (no auto-fill): las columnas vacías se colapsan y los tiles se
     estiran para llenar todo el ancho de la fila, sin hueco a la derecha. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-4);
}
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); padding: var(--sp-5) var(--sp-4); min-height: 132px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  color: var(--text-body); font-family: var(--font-sans);
  transition: var(--t); text-align: center;
}
.tile:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--text-main);
}
.tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tile-icon {
  width: 56px; height: 56px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); font-size: 23px;
  background: var(--gold-pale); color: var(--gold-dark);
  transition: var(--t);
}
[data-theme="dark"] .tile-icon { background: rgba(var(--gold-rgb),.13); color: var(--gold-light); }
.tile:hover .tile-icon { background: var(--gold); color: #fff; }
.tile-label { font-size: var(--text-base); font-weight: 600; line-height: 1.25; }
.tile-badge {
  position: absolute; top: 8px; right: 8px;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; min-width: 18px; height: 18px;
  border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; padding: 0 5px;
}

/* ── Lanzador de módulos en DOS NIVELES ──────────────────────────────────────
   Nivel 1: módulos principales. Nivel 2: las dependencias del que se abre.
   Sustituye a las cuatro pestañas fijas, que mezclaban módulos de áreas
   distintas (Empeños dentro de Ventas, Bienes dentro de Productos). */
.tile-launcher { margin-bottom: var(--sp-6); }

/* Un módulo con dependencias se distingue del que navega directo a su página. */
.tile-grupo { border-style: dashed; }
.tile-grupo:hover { border-style: solid; }
.tile-sub {
  font-size: var(--text-xs); color: var(--text-faint); font-weight: 500;
  margin-top: -4px;
}
.tile:hover .tile-sub { color: var(--gold-dark); }
[data-theme="dark"] .tile:hover .tile-sub { color: var(--gold-light); }

/* Cabecera al entrar en un módulo: dice dónde estás y cómo salir. */
.tile-breadcrumb {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.tile-volver {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--card);
  color: var(--text-muted); cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500;
  transition: var(--t-fast);
}
.tile-volver:hover { border-color: var(--gold); color: var(--gold-dark); }
[data-theme="dark"] .tile-volver:hover { color: var(--gold-light); }
.tile-actual {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 700;
  color: var(--text-main);
}
.tile-actual i { color: var(--gold); font-size: var(--text-lg); }

/* ── Navegación estilo Akasia ─────────────────────────────────────── */
/* No hay menú lateral: se navega por el lanzador de mosaicos del Inicio,
   el buscador de módulos y el botón Inicio de la barra superior. */
.breadcrumb-home { cursor: pointer; transition: color var(--t-fast); }
.breadcrumb-home:hover { color: var(--gold); }

/* ── Tarjetas de Empeños (estilo mockup: urgencia + barra) ──────── */
.empeno-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
.empeno-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: 10px;
  transition: var(--t);
}
.empeno-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.empeno-card-top { display: flex; align-items: center; justify-content: space-between; }
.empeno-folio { font-family: ui-monospace, monospace; font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); letter-spacing: .02em; }
.empeno-cliente { font-size: var(--text-lg); font-weight: 700; color: var(--text-main); line-height: 1.2; }
.empeno-item { font-size: var(--text-sm); color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.empeno-item i { color: var(--gold); }
.empeno-rows { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.empeno-rows > div { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); }
.empeno-rows > div > span { color: var(--text-muted); }
.empeno-rows > div > strong { color: var(--text-main); font-weight: 700; }
.empeno-bar { height: 5px; border-radius: var(--radius-full); background: var(--border); overflow: hidden; }
.empeno-bar > div { height: 100%; border-radius: var(--radius-full); transition: width var(--t); }
.empeno-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.empeno-acciones .btn-secondary, .empeno-acciones .btn-success { padding: 9px; font-size: var(--text-sm); justify-content: center; }

/* ── Pills de filtro (se usan en Empeños; la grilla de productos del POS se
      retiró: la venta es solo por buscador/escáner) ── */
.pos-cat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pos-cat-pill {
  padding: 6px 14px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--card);
  color: var(--text-body); font-size: var(--text-sm); font-weight: 600;
  cursor: pointer; transition: var(--t-fast); white-space: nowrap;
}
.pos-cat-pill:hover { border-color: var(--gold); color: var(--text-main); }
.pos-cat-pill.activo { background: var(--gold-pale); border-color: var(--gold); color: var(--gold-dark); }
[data-theme="dark"] .pos-cat-pill.activo { background: rgba(var(--gold-rgb),.14); color: var(--gold-light); }
/* Aviso de caja cerrada en el POS: bloquea el cobro, no la búsqueda */
/* El botón de cobro deshabilitado debe verse inerte, no solo no responder */
.pos-btn-procesar:disabled {
  opacity: .5; cursor: not-allowed; filter: grayscale(.6);
}
.pos-btn-procesar:disabled:hover { transform: none; box-shadow: none; }

/* Distintivo del kit en los resultados del buscador del POS */
.pos-badge-kit {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: var(--radius-full);
  background: var(--gold-pale); color: var(--gold-dark);
  font-size: var(--text-2xs); font-weight: 800; letter-spacing: .04em;
}
[data-theme="dark"] .pos-badge-kit { background: rgba(var(--gold-rgb),.18); color: var(--gold-light); }

/* Formas de venta del mismo artículo (caja, par, set…). Se distinguen del kit
   porque no son otro artículo: son el mismo stock contado de otra manera. */
.pos-badge-pres {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
  padding: 1px 7px; border-radius: var(--radius-full);
  background: var(--bg); color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: .03em;
}
[data-theme="dark"] .pos-badge-pres { background: var(--card-2); color: var(--text-muted); }

/* ── KITS: conjuntos de productos con código propio ── */
.kit-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-4);
}
.kit-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-4);
  transition: var(--t);
}
.kit-card:hover { border-color: var(--gold); box-shadow: var(--shadow-md); }
/* Un kit sin existencias no se puede vender: se marca sin ocultarlo */
.kit-card-agotado { opacity: .72; border-style: dashed; }

.kit-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.kit-codigo {
  font-family: monospace; font-size: var(--text-2xs); font-weight: 700;
  color: var(--gold-dark); letter-spacing: .04em;
}
.kit-nombre { font-weight: 700; font-size: var(--text-md); color: var(--text-main); line-height: 1.3; }
.kit-precio { font-weight: 800; font-size: var(--text-xl); color: var(--gold); white-space: nowrap; }
.kit-desc { font-size: var(--text-xs); color: var(--text-muted); margin: 0; line-height: 1.5; }

.kit-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.kit-items li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px; align-items: baseline;
  font-size: var(--text-xs); padding: 5px 8px;
  background: var(--bg); border-radius: var(--radius-sm);
}
.kit-item-cant { font-weight: 800; color: var(--gold-dark); }
.kit-item-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-body); }
.kit-item-stock { font-size: var(--text-2xs); white-space: nowrap; }

.kit-metricas {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.kit-metricas > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kit-metricas span {
  font-size: var(--text-2xs); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
}
.kit-metricas strong { font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.kit-acciones { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.kit-acciones button { padding: 7px 11px; font-size: var(--text-xs); }
.kit-acciones .btn-primary { flex: 1; justify-content: center; }

@media (max-width: 600px) {
  .kit-grid { grid-template-columns: 1fr; }
}

/* Aviso de cupo de crédito dentro de la ventana de cobro (fondo oscuro) */
.pos-cred-aviso {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: var(--text-xs); line-height: 1.5;
}
.pos-cred-aviso button {
  border: 1px solid currentColor; background: transparent; color: inherit;
  padding: 5px 10px; border-radius: var(--radius-sm); cursor: pointer;
  font-family: inherit; font-size: var(--text-2xs); font-weight: 700; white-space: nowrap;
}
.pos-cred-aviso button:hover { background: rgba(255,255,255,.12); }
.pos-cred-ok    { background: rgba(16,185,129,.14); color: #6EE7B7; }
.pos-cred-warn  { background: rgba(245,158,11,.14); color: #FCD34D; }
.pos-cred-error { background: rgba(239,68,68,.14);  color: #FCA5A5; }

/* Cantidad editable en el Inventario: se ve que el número se puede pulsar */
.inv-stock-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: var(--radius-sm);
  border: 1px dashed var(--border); background: transparent;
  font-family: inherit; font-size: var(--text-md); cursor: pointer;
  color: var(--text-main); transition: var(--t-fast);
}
.inv-stock-btn strong { font-size: var(--text-md); font-weight: 800; }
.inv-stock-btn i { font-size: var(--text-2xs); color: var(--text-muted); opacity: 0; transition: var(--t-fast); }
.inv-stock-btn:hover { border-color: var(--gold); border-style: solid; background: var(--gold-pale); }
.inv-stock-btn:hover i { opacity: 1; color: var(--gold-dark); }
[data-theme="dark"] .inv-stock-btn:hover { background: rgba(var(--gold-rgb),.12); }

/* Resultados del buscador del POS (lista navegable con flechas) */
.pos-result-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.pos-result-item {
  background: var(--card); border: 1.5px solid var(--border); border-radius: 10px;
  padding: 8px 12px; cursor: pointer; transition: var(--t-fast);
}
.pos-result-item:hover { border-color: var(--gold); }
.pos-result-item.activo {
  border-color: var(--gold);
  background: var(--gold-pale);
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb),.18);
}
[data-theme="dark"] .pos-result-item.activo { background: rgba(var(--gold-rgb),.12); }

/* Botón "ojito" para ver detalle (reutilizable en cualquier tabla) */
.btn-ver {
  width: 30px; height: 30px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text-muted);
  font-size: var(--text-base);
  cursor: pointer;
  transition: var(--t-fast);
}
.btn-ver:hover { color: var(--gold); border-color: var(--gold); background: var(--gold-pale); }
[data-theme="dark"] .btn-ver:hover { background: rgba(var(--gold-rgb),.12); }

/* ================================================================
   COMPONENTES PEQUEÑOS reutilizables (presentación)
   ================================================================ */

/* Chip / píldora (periodos, etiquetas de fecha en encabezados) —
   reemplaza los style= con --dark-3 fijo que rompían el modo claro. */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--card-2);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.chip-gold   { color: var(--gold-dark); background: var(--gold-pale); border-color: var(--gold-200); }
[data-theme="dark"] .chip-gold { color: var(--gold-light); background: rgba(var(--gold-rgb),.12); border-color: rgba(var(--gold-rgb),.28); }

/* Contenedor de canvas de gráfica con alto fijo */
.chart-body    { position: relative; height: 200px; }
.chart-body-sm { position: relative; height: 180px; display: flex; align-items: center; justify-content: center; }

/* ── Skeleton helpers (carga sin parpadeo de spinner global) ─── */
.skeleton-text { height: .8em; border-radius: var(--radius-xs); margin: .35em 0; }
.skeleton-line { height: 14px; border-radius: var(--radius-xs); }
.skeleton-card { height: 92px; border-radius: var(--radius); }
.skeleton-stack { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Estado vacío con acción opcional */
.empty-state .btn-primary,
.empty-state .btn-secondary { margin-top: var(--sp-4); }

/* Estado vacío compacto (dentro de tarjetas/tablas resumen) */
.empty-sm { padding: var(--sp-5) var(--sp-4); }
.empty-sm i { font-size: 26px; margin-bottom: var(--sp-2); }
.empty-sm p { font-size: var(--text-sm); }

/* Enlace dorado discreto (p. ej. "¿Olvidaste tu contraseña?") */
.login-link {
  color: var(--gold);
  font-size: var(--text-sm);
  text-decoration: none;
  opacity: .75;
  transition: opacity var(--t-fast);
}
.login-link:hover { opacity: 1; }

/* Celda de código/folio (número de contrato, venta…) en dorado mono */
.cell-code {
  font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
  font-size: var(--text-xs);
  color: var(--gold);
  letter-spacing: -.01em;
}

/* ═══════════════════════════════════════════════════════════════
   PANELES OPERATIVOS DEL INICIO
   Caja abierta, empeños del día y entradas/salidas: las cifras del
   día a la vista, sin gráficas ni tablas que ocupen media pantalla.
   ═══════════════════════════════════════════════════════════════ */

/* Rejilla de métricas compactas */
.op-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--sp-3);
}
.op-grid-2 { grid-template-columns: 1fr 1fr; }

.op-metric {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.op-metric-label {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.op-metric-value {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.1;
}
.op-metric-sub {
  font-size: var(--text-2xs);
  color: var(--text-faint);
  margin-top: var(--sp-1);
}

/* Tarjetas de cajeros con turno abierto */
.op-cajeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-3);
}
.op-cajero {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--success);
  border-radius: var(--radius);
  padding: var(--sp-4);
  cursor: pointer;
  transition: border-color var(--t), transform var(--t);
}
.op-cajero:hover { border-color: var(--gold); transform: translateY(-2px); }
.op-cajero-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.op-cajero-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent);
  flex-shrink: 0;
}
.op-cajero-nombre { font-weight: 600; font-size: var(--text-sm); color: var(--text-main); }
.op-cajero-monto  { font-size: var(--text-xl); font-weight: 800; color: var(--text-main); line-height: 1.1; }
.op-cajero-sub    { font-size: var(--text-2xs); color: var(--text-faint); margin-top: var(--sp-1); }

/* Neto del día y desglose por concepto */
.op-neto {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-raised);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--text-body);
}
.op-neto strong { font-size: var(--text-md); font-weight: 800; }

.op-detalle { margin-top: var(--sp-3); }
.op-detalle-fila {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs);
}
.op-detalle-fila:last-child { border-bottom: 0; }
.op-detalle-tipo { flex: 1; color: var(--text-body); }

/* ── Desglose de cobros de los turnos abiertos ── */
.cobro-fila {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}
.cobro-fila:last-of-type { border-bottom: 0; }
.cobro-label { color: var(--text-body); }
.cobro-signo {
  display: inline-block; width: 14px;
  color: var(--text-faint); font-weight: 700;
}
.cobro-monto {
  font-weight: 700;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}
.cobro-sep {
  height: 1px;
  margin: var(--sp-3) 0;
  background: var(--border);
}
.cobro-total {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-raised);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--text-body);
}
.cobro-total strong {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.cobro-nota {
  margin-top: var(--sp-3);
  font-size: var(--text-2xs);
  color: var(--text-faint);
  line-height: 1.5;
}
.cobro-nota i { color: var(--info); margin-right: 4px; }

/* ── Zona de avisos ── */
.aviso {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--radius);
  border-left: 3px solid var(--info);
  background: var(--bg);
  font-size: var(--text-xs);
  color: var(--text-body);
  line-height: 1.45;
}
.aviso + .aviso { margin-top: var(--sp-2); }
.aviso i { margin-top: 2px; color: var(--info); flex-shrink: 0; }
.aviso-alerta { border-left-color: var(--warning); }
.aviso-alerta i { color: var(--warning); }
.aviso-link { cursor: pointer; transition: background var(--t-fast); }
.aviso-link:hover { background: var(--card-2); }

/* Usuario activo en la barra superior (antes vivía en el menú lateral) */
.topbar-user {
  display: flex; align-items: center; gap: var(--sp-2);
  padding-left: var(--sp-3);
  border-left: 1px solid var(--border);
  max-width: 190px;
}
.topbar-user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #fff; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.topbar-user-details { min-width: 0; line-height: 1.25; }
.topbar-user-details .user-name {
  font-size: var(--text-xs); font-weight: 600; color: var(--text-main);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-user-details .user-role {
  font-size: var(--text-2xs); color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-btn-logout:hover { color: var(--danger); }

/* Sugerencias del buscador de módulos del topbar */
.modulo-sugerencias {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  z-index: 9999;
  overflow: hidden;
  padding: var(--sp-1);
}
.modulo-sugerencia {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3);
  background: none; border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}
.modulo-sugerencia i { color: var(--gold); width: 16px; text-align: center; }
.modulo-sugerencia:hover,
.modulo-sugerencia.active { background: var(--bg-raised); color: var(--text-main); }

/* Ajustes responsivos de la barra superior. Van en esta capa (utilities) y no
   en `responsive` porque `utilities` se declara después y ganaría el pulso:
   las reglas base de .topbar-user viven aquí arriba. */

/* En pantallas medianas ya no cabe todo: la fecha y hora son lo primero que
   sobra, y la búsqueda deja de ensancharse al enfocar. */
@media (max-width: 1200px) {
  .topbar-datetime { display: none; }
  .topbar-search input,
  .topbar-search input:focus { width: 170px; }
}

/* En móvil solo caben los accesos imprescindibles. Se conservan notificaciones,
   tema y CERRAR SESIÓN: sin menú lateral, el botón de salir no puede quedar
   fuera de pantalla. Configuración y el feed siguen estando en el Inicio. */
@media (max-width: 768px) {
  .topbar-user     { display: none; }
  #btnConfigTopbar { display: none; }
  #feedTicker      { display: none !important; }
}

@media (max-width: 640px) {
  .op-grid, .op-grid-2, .op-cajeros { grid-template-columns: 1fr 1fr; }
}

} /* end @layer utilities */


/* ── Calculadora del POS: adaptable de verdad ────────────────────────────────
   Los `vh` miden la VENTANA, no el hueco que le queda a la columna. En una
   pantalla de 525 px de alto la ventana aún parece holgada, pero a la columna
   solo le quedan 275 px y las cuatro piezas no entran.

   `container-type: size` convierte la columna en unidad de medida: `cqh` es el
   1% de SU altura, así que rellenos y tipografías se ajustan al hueco real.

   OJO — LOS CONTROLES DE FORMULARIO SE QUEDAN FUERA: en Chromium, `button` e
   `input` NO resuelven consultas ni unidades de contenedor (se comprobó: un
   `@container` que pinta un div hermano no llega al botón de al lado, y un
   `cqh` dentro de un botón invalida la declaración y revive el valor anterior).
   Por eso los botones y el buscador de cliente se ajustan con `@media` y `vh`,
   que sí funcionan en ellos. Las dos escalas están calibradas para coincidir:
   a la columna le quedan unos 250 px menos que la ventana. */

@supports (container-type: size) {
  .pos2-side { container-type: size; }

  /* Piezas que NO son controles de formulario: se miden contra la columna. */
  .pos2-side-btns   { gap: clamp(3px, 1.6cqh, 6px); }
  .pos-client-card  { padding: clamp(4px, 1.8cqh, 12px); }
  .pos-client-label { margin-bottom: clamp(2px, 1.2cqh, 8px); }
  .pos2-box         { padding: clamp(5px, 2.1cqh, 12px); }
  .pos2-box-label   { margin-bottom: clamp(2px, 1.1cqh, 8px); }

  .pos2-total           { padding: clamp(6px, 2.1cqh, 16px); }
  .pos2-total-desglose  { margin-bottom: clamp(1px, .9cqh, 8px); }
  .pos2-tr              { padding: clamp(0px, .4cqh, 3px) 0; font-size: clamp(10px, 3.4cqh, 14px); }
  .pos2-total-label     { padding-top: clamp(3px, 1.4cqh, 10px); }
  .pos2-total-val       { font-size: clamp(18px, min(2.4vw, 9.5cqh), 38px); }

  /* Cuando el hueco se queda corto, encoger ya no basta: hay que reordenar.
     Los dos botones de empeño pasan a ir uno al lado del otro —se ahorra una
     fila entera— y el desglose aprieta. Sigue cabiendo todo, sin scroll. */
  @container (max-height: 400px) {
    .pos2-box {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: clamp(3px, 1.2cqh, 6px);
    }
    .pos2-box-label { grid-column: 1 / -1; margin-bottom: 0; }
    .pos2-total-val { font-size: clamp(18px, min(2.4vw, 8.2cqh), 32px); }
  }

  @container (max-height: 285px) {
    .pos-client-label span:first-child { display: none; }
    .pos-client-label { justify-content: flex-end; margin-bottom: 3px; }
    .pos2-total-label { padding-top: 3px; }
  }
}

/* Botones y campos: la misma idea con `vh`, la única unidad que resuelven.
   `.pos2-side` delante porque más arriba hay un @media que también fija estos
   rellenos y, a igual peso, ganaría el que apareciera después. */
@media (max-height: 700px) {
  .pos2-side .pos2-sbtn      { padding: clamp(3px, 1.1vh, 9px) 4px; gap: clamp(1px, .5vh, 5px); }
  .pos2-side .pos2-sbtn i    { font-size: clamp(10px, 1.9vh, 15px); }
  .pos2-side .pos-client-input { padding: clamp(4px, 1.2vh, 10px) 12px clamp(4px, 1.2vh, 10px) 34px; }
  .pos2-side .pos2-box-btn   { padding: clamp(4px, 1.2vh, 10px); font-size: clamp(11px, 2.3vh, 16px); }
  .pos2-side .pos2-box-btn + .pos2-box-btn { margin-top: clamp(2px, .5vh, 6px); }
}

/* A esta altura los dos botones de empeño ya van en paralelo (lo decide el
   @container de arriba): aquí solo se quita el margen que los separaba. */
@media (max-height: 640px) {
  .pos2-side .pos2-box-btn + .pos2-box-btn { margin-top: 0; }
}

/* Último escalón: portátiles muy bajos. Se retiran los rótulos que el propio
   campo ya explica y los botones de arriba se quedan con su icono, que es como
   se reconocen igualmente. Nada se corta y sigue sin haber scroll. */
@media (max-height: 520px) {
  .pos2-side .pos2-sbtn   { font-size: 0; gap: 0; padding: 4px; }
  .pos2-side .pos2-sbtn i { font-size: 13px; }
  /* La ficha del cliente elegido: con el nombre basta, el círculo con su
     inicial es decoración y aquí el alto se cuenta. */
  .pos2-side .pos-client-sel   { padding: 4px 8px; }
  .pos2-side .pos-client-avatar { width: 20px; height: 20px; font-size: 10px; }
}

/* Tercer escalón: ventanas por debajo de ~470 px de alto (portátil pequeño con
   el navegador lleno de barras). Se retira el rótulo de la caja de empeño —sus
   dos botones ya dicen lo que hacen— y el importe cede tamaño. Es lo último que
   se puede quitar sin ocultar información. */
@media (max-height: 470px) {
  .pos2-side .pos2-box-label { display: none; }
  .pos2-side .pos2-box-btn   { padding: 4px; font-size: 11px; }
  .pos2-side .pos-client-card { padding: 4px; }
  .pos2-side .pos2-total     { padding: 6px 8px; }
  .pos2-side .pos2-total-val { font-size: clamp(17px, 2vw, 24px); }
  .pos2-side .pos2-tr        { font-size: 10px; padding: 0; }
  .pos2-side { gap: 3px; }
}

/* Suelo honesto: por debajo de ~460 px de alto ya no queda sitio para el riel,
   la tabla, la calculadora y la barra de cobro a la vez. Antes que recortar
   información —que es lo que pasaba—, el POS deja de forzar el alto de la
   ventana y la página se desplaza con normalidad, como en móvil. */
@media (max-height: 460px) {
  .app-container:has(.pos2),
  .main-content:has(.pos2) { height: auto; min-height: 100dvh; }
  .main-content:has(.pos2) > .content-area { overflow: visible; }
  .content-area:has(.pos2) > #pageContent { height: auto; }
  .pos2 { height: auto; }
  .pos2-cart { min-height: 220px; }
}