/* ============================================================
   FLAMINCO — OVERRIDE POS
   Se carga DESPUES de assets/pos/css/style.css (gana por orden).
   Orden (en layouts/theme-pos/tema.blade.php):
     bootstrap.min.css -> style.css -> design-tokens.css -> ESTE

   SHELL Flaminco: sidebar + topbar OSCUROS siempre (light-3),
   con contenido claro. Selectores tomados del propio dark-mode
   del template (body[data-theme=dark] ...), des-scopeados del
   body y recoloreados a la paleta Flaminco. NO se tocan los
   paneles .dropdown-menu (quedan blancos con texto oscuro).

   Paleta: negro #0B0B0F, raised #101217, borde #2A2E35,
   texto #F5F7FA, muted #AEB6C2/#767E8C, acento fucsia var(--fl-accent).
   ============================================================ */

/* ---------- SIDEBAR ----------
   El sidebar ahora es el PORT de hlp (grupos colapsables + buscador +
   favoritos), con su propio sistema de variables --sb-* remapeado a
   fucsia en layouts/theme-pos/sidebar/sidebar.blade.php. Por eso acá
   NO se estiliza el sidebar (se quitaron las reglas para no chocar). */

/* Alpine: ocultar elementos con x-cloak hasta que Alpine inicializa (evita flash) */
[x-cloak] { display: none !important; }

/* ---------- TOPBAR (header) = topbar del mockup ---------- */
/* Borde del header: default = MISMO color que su fondo (invisible); la CC lo puede cambiar (--fl-header-border-color) */
.header { background: var(--fl-header-bg, linear-gradient(180deg,#121218,#0C0C11)) !important; border-bottom: 1px solid var(--fl-header-border-color, var(--fl-header-bg, #0C0C11)) !important; }
.header .header-left { border-right: 1px solid var(--fl-header-border-color, var(--fl-header-bg, #0C0C11)) !important; }
/* Toggle « de colapso: ELIMINADO del header (no está en el mockup) */
.header #toggle_btn { display: none !important; }

/* Letras del header = color de "Header — texto" del editor (--fl-header-color). */
.header .header-left a,
.header .header-left i,
.header #toggle_btn,
.header .user-info .user-name { color: var(--fl-header-color, #F5F7FA) !important; }

/* ---------- SECUNDARIO (Fase 2): acento de links de contenido ----------
   Solo pisa el link default de Bootstrap (--bs-link-color); los <a> con color
   explicito NO se tocan. Default = fucsia-700 (on-brand); la CC lo puede cambiar. */
.page-wrapper { --bs-link-color: var(--fl-secondary, var(--fl-accent-hover,#CC0062)); --bs-link-hover-color: var(--fl-secondary, var(--fl-accent-hover,#CC0062)); }
.header .user-info .user-role,
.header .user-info p { color: var(--fl-header-color, #AEB6C2) !important; opacity: .7 !important; }

/* ---------- LOGO Flaminco: isotipo + wordmark FLAMINCO (como el reskin) ---------- */
.header .logo-normal { display: flex !important; align-items: center; gap: 10px; }
.header .logo-normal img,
.header .logo-white img,
.header .logo-small img { height: 25px !important; width: auto !important; }
.header .logo-normal img { filter: var(--fl-logo-glow, drop-shadow(0 0 10px rgba(var(--fl-accent-rgb,255,0,122),.25))); }
/* Logotipo "FLAMINCO" (wordmark de marca, sin isotipo). Blanco/negro segun fondo del header. */
.header .fl-logo { display: block; }
.header .fl-word {
  font-family: 'Space Grotesk','Helvetica Neue',Arial,sans-serif;
  font-weight: 700; font-size: 20px; letter-spacing: 3px;
  color: var(--fl-header-color, #F5F7FA); line-height: 1; white-space: nowrap;
}

/* ---------- ICONOS del topbar = .tb-ic del mockup (cuadrados oscuros con borde) ---------- */
.header .user-menu .nav-item-box > a {
  width: 38px !important; height: 38px !important; min-width: 38px !important;
  border-radius: 10px !important;
  background: var(--fl-header-ic-bg, #14161B) !important;
  border: 1px solid var(--fl-header-ic-border, #2A2E35) !important;
  display: flex !important; align-items: center; justify-content: center;
  color: var(--fl-header-ic-color, #AEB6C2) !important; padding: 0 !important; box-shadow: none !important;
}
.header .user-menu .nav-item-box > a:hover { border-color: var(--fl-accent, #FF007A) !important; }
.header .user-menu .nav-item-box > a > i,
.header .user-menu .nav-item-box > a > svg { color: var(--fl-header-ic-color, #AEB6C2) !important; }
/* Burbuja del contador de notificaciones: el borde debe ser del MISMO color que el relleno
   (el theme lo pone blanco -> anillo). Fucsia = fucsia; la campana de tienda (verde) = verde. */
.header .user-menu.nav > li > a .badge,
.user-menu.nav > li > a .badge { border-color: var(--fl-accent, #FF007A) !important; }
#nv-tienda-badge { border-color: #28a745 !important; }
/* Hover del icono de tienda online: verde (mismo color que su burbuja), no el fucsia general */
.header .user-menu #nv-tienda-wrap > a:hover,
#nv-tienda-wrap > a:hover { border-color: #28a745 !important; }

/* ---------- Ocultar el botón rojo "Videos tutoriales" (el .btn-danger) ---------- */
.header a.btn-danger[href*="tutoriales"] { display: none !important; }

/* ---------- Sección del topbar (estilo mockup): ícono fucsia + texto muted, tras el logo ---------- */
.header .fl-topbar-section {
  float: left !important;
  display: flex !important; align-items: center; gap: 11px;
  height: 60px; padding: 0 0 0 26px;
  color: var(--fl-header-color, #F5F7FA) !important; font-weight: 500 !important; text-decoration: none !important;
}
.header .fl-topbar-section i,
.header .fl-topbar-section svg { color: var(--fl-accent, #FF007A) !important; stroke: var(--fl-accent, #FF007A) !important; opacity: .9; width: 18px !important; height: 18px !important; }
.header .fl-topbar-section:hover { opacity: .85 !important; }

/* ---------- HEADER en MOBILE (<=991.98px) ----------
   El template pone .header-left en position:absolute width:100% con el logo
   CENTRADO y la hamburguesa (#mobile_btn) flotada a la izquierda por encima.
   El reskin lo rompía: forzaba .logo-normal a display:flex (quedaba a la
   izquierda, no centrado -> se encimaba con la hamburguesa) y no ocultaba la
   sección "Tutoriales" (el template sí oculta su .page-title-box en mobile).
   Acá lo corregimos: un solo logo centrado + ocultar lo que no entra. */
@media (max-width: 991.98px) {
  .header .header-left .logo-normal { justify-content: center !important; width: 100% !important; }
  .header .header-left .logo-white,
  .header .header-left .logo-small { display: none !important; }
  .header .fl-topbar-section { display: none !important; }
}

/* ---------- Sidebar un poco más ancho (260 -> 275) — SOLO desktop ----------
   OJO: va scopeado a >=992px. En mobile (<=991.98px) el template pone el
   sidebar off-canvas y .page-wrapper con margin:0. Si forzamos el margin/width
   en TODAS las pantallas (como estaba antes), en mobile el contenido queda
   empujado 275px a la derecha y se rompe (no responsive). El breakpoint 992
   es el complemento del 991.98 que usa style.css. */
@media (min-width: 992px) {
  .sidebar,
  .sidebar .slimScrollDiv,
  .sidebar .sidebar-inner { width: 275px !important; }
  .header .header-left { width: 275px !important; }
  .page-wrapper { margin-left: 275px !important; }
}

/* ---------- Tercer nivel (subitems de submenu): sin bullet ---------- */
.sidebar .sidebar-submenu ul { list-style: none !important; }

/* ---------- Tenant: nombre Space Grotesk, sin avatar ni caret (como el mockup) ---------- */
.header .user-menu .userset .user-letter,
.header .user-menu .userset .user-img { display: none !important; }
.header .user-menu .userset.dropdown-toggle::after,
.header .user-menu .userset .status { display: none !important; }
.header .user-info .user-name {
  font-family: 'Space Grotesk','Helvetica Neue',Arial,sans-serif !important;
  font-weight: 600 !important; font-size: 16px !important; letter-spacing: .4px !important;
  color: var(--fl-header-color, #F5F7FA) !important;
}
.header .user-info .user-role { color: var(--fl-header-color, #8A93A1) !important; font-size: 12px !important; opacity: .7 !important; }

/* ============================================================
   RESKIN light-3 REUTILIZABLE — componentes GLOBALES.
   Copia fiel del mockup (pos.html / light-2 / light-3). Estos
   estilos NO están scopeados: aplican a TODA la app (la override
   se carga en cada pantalla después de style.css), así el POS,
   listados, formularios, etc. comparten la misma piel.
   Valores: page #F5F7FA, cards/inputs #FFFFFF + borde 1px #E1E5EC,
   radios 4px, fucsia var(--fl-accent, #FF007A)/var(--fl-accent-hover, #CC0062), texto #0B0B0F, muted #5A6270/#6E7681.
   Las clases .fl-btn-primary / .fl-btn-ghost son reutilizables en
   cualquier botón. Lo específico del POS queda en .fl-pos / .fl-pos-panel.
   ============================================================ */

/* ---- Botón primario reutilizable: fucsia PLANO + TEXTO NEGRO (decisión ENTREGA) ---- */
.fl-btn-primary {
  background: var(--fl-accent, #FF007A) !important;
  color: var(--fl-text-on-accent, #0B0B0F) !important;
  border: 1px solid var(--fl-accent, #FF007A) !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.fl-btn-primary:hover,
.fl-btn-primary:focus { background: var(--fl-accent-hover, #CC0062) !important; border-color: var(--fl-accent-hover, #CC0062) !important; color: var(--fl-text-on-accent, #0B0B0F) !important; }
/* ---- Botón ghost reutilizable (Cancelar): blanco, borde, texto negro ---- */
.fl-btn-ghost {
  background: #FFFFFF !important;
  color: #0B0B0F !important;
  border: 1px solid #C9CFDA !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}
.fl-btn-ghost:hover,
.fl-btn-ghost:focus { background: #F5F7FA !important; border-color: #C9CFDA !important; color:#0B0B0F !important; }

/* ---- Inputs / selects (GLOBAL) = tamaño del reskin: blanco, borde 1px #E1E5EC,
   radio 4px, 13.5px, padding 9px 14px (~42px alto), foco fucsia ---- */
.form-control,
.form-select {
  border: 1px solid #E1E5EC !important;
  border-radius: 4px !important;
  font-size: 13.5px !important;
  padding: 9px 14px !important;
  min-height: 42px !important;
  color: #0B0B0F !important;
  background-color: #FFFFFF !important;
}
textarea.form-control { min-height: 80px !important; }
.form-control-sm,
.form-select-sm { min-height: 34px !important; padding: 6px 10px !important; font-size: 13px !important; }
.form-control:focus,
.form-select:focus {
  border-color: var(--fl-accent, #FF007A) !important;
  box-shadow: 0 0 0 2px rgba(var(--fl-accent-rgb,255,0,122),.15) !important;
}
.form-control::placeholder { color: #6E7681 !important; }

/* ---- Botones (GLOBAL): tamaño/tipografía consistente del reskin ---- */
.btn { border-radius: 4px !important; font-size: 13.5px !important; font-weight: 600 !important; }
.btn-sm { font-size: 12.5px !important; }

/* ---- Tabla (GLOBAL): header 10px uppercase muted, zebra + hover fucsia-subtle ---- */
.content-page table thead th,
.page-wrapper table thead th {
  background: #F5F7FA !important;
  color: #6E7681 !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #E1E5EC !important;
}
.content-page table tbody tr:nth-child(even),
.page-wrapper table tbody tr:nth-child(even) { background: #F7F9FC !important; }
.content-page table tbody tr:hover,
.page-wrapper table tbody tr:hover { background: var(--fl-accent-subtle,#FFEAF3) !important; }

/* ---- Botón primario Bootstrap (GLOBAL) -> fucsia texto negro, angular ---- */
.btn-primary {
  background-color: var(--fl-accent, #FF007A) !important;
  border-color: var(--fl-accent, #FF007A) !important;
  color: #0B0B0F !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.btn-primary:hover,
.btn-primary:focus { background-color: var(--fl-accent-hover, #CC0062) !important; border-color: var(--fl-accent-hover, #CC0062) !important; color:#0B0B0F !important; }

/* ---- BOTONES consistentes en TODAS las pantallas (reskin light-3) ---- */
/* Radios angulares en todo botón */
.btn { border-radius: 5px !important; }
/* Neutros/toolbar -> blanco con borde 1px, texto negro (contenido claro) */
.btn-cancel, .btn-light,
.btn-outline-secondary, .btn-outline-dark, .btn-searchset {
  background: #FFFFFF !important; border: 1px solid #C9CFDA !important;
  color: #0B0B0F !important; box-shadow: none !important;
}
.btn-cancel:hover, .btn-light:hover,
.btn-outline-secondary:hover, .btn-searchset:hover {
  background: #F5F7FA !important; border-color: #C9CFDA !important; color: #0B0B0F !important;
}

/* ---- btn-secondary: acción SECUNDARIA -> gris claro RELLENO + borde.
   Un neutro blanco con borde clarito se pierde al lado de un primario fucsia (parece
   texto flotando); el relleno gris lo hace leer claramente como botón secundario. ---- */
.btn-secondary {
  background: #EDF0F5 !important; border: 1px solid #C9CFDA !important;
  color: #0B0B0F !important; box-shadow: none !important; font-weight: 600 !important;
}
.btn-secondary:hover, .btn-secondary:focus {
  background: #E1E5EC !important; border-color: #C9CFDA !important; color: #0B0B0F !important;
}
/* íconos (ej. el "+" azul de plus.svg) -> gris neutro uniforme */
.btn-secondary img { filter: brightness(0) saturate(100%) invert(45%) !important; }
.btn-secondary svg, .btn-secondary i { color: #5A6270 !important; stroke: #5A6270 !important; }

/* ---- Botones de acción del PAGEHEAD (título + acciones): que NO se estiren a la
   altura del título de 2 líneas (se veían muy altos) y que el ícono+texto queden
   centrados verticalmente. Alto controlado y uniforme. ---- */
.page-header { align-items: center !important; }
.page-header .btn:not([hidden]) {
  align-self: center !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  padding: 9px 16px !important; line-height: 1.1 !important;
}
/* Respetar el atributo [hidden]: el display:inline-flex de arriba NO debe destapar botones ocultos. */
.page-header .btn[hidden], .page-header [hidden] { display: none !important; }
.page-header .btn img { width: 15px !important; height: 15px !important; margin-right: 6px !important; vertical-align: middle !important; }
/* Semánticos con hex Flaminco (angular) */
.btn-success { background:#00B27A !important; border-color:#00B27A !important; color:#0B0B0F !important; }
.btn-danger  { background:#CC3413 !important; border-color:#CC3413 !important; color:#FFFFFF !important; }
.btn-warning { background:#F0B429 !important; border-color:#F0B429 !important; color:#0B0B0F !important; }

/* ---- btn-added / btn-submit: acción primaria -> FUCSIA (manual de marca), sin styles propios ---- */
.btn-added, .btn-submit {
  background: var(--fl-accent, #FF007A) !important; border: 1px solid var(--fl-accent, #FF007A) !important;
  color: var(--fl-text-on-accent, #0B0B0F) !important; border-radius: 5px !important; box-shadow: none !important; font-weight: 600 !important;
}
.btn-added:hover, .btn-added:focus,
.btn-submit:hover, .btn-submit:focus { background: var(--fl-accent-hover, #CC0062) !important; border-color: var(--fl-accent-hover, #CC0062) !important; color: var(--fl-text-on-accent, #0B0B0F) !important; }
.btn-added i, .btn-added svg,
.btn-submit i, .btn-submit svg { color: var(--fl-text-on-accent, #0B0B0F) !important; }

/* ---- btn-filter: neutro blanco con borde (manual de marca) ---- */
.btn-filter {
  background: #FFFFFF !important; border: 1px solid #C9CFDA !important;
  color: #0B0B0F !important; border-radius: 5px !important; box-shadow: none !important;
}
.btn-filter:hover, .btn-filter:focus { background: #F5F7FA !important; border-color: var(--fl-accent, #FF007A) !important; color: #0B0B0F !important; }

/* ---- Íconos SVG (blancos) de botones de filtro/búsqueda -> visibles y UNIFORMES (gris) sobre botón blanco ---- */
.btn-searchset img, .btn-filter img, .btn-filters img,
.btn img[src*="white"], .btn img[src*="-white"], .btn img[src*="filter"] {
  filter: brightness(0) saturate(100%) invert(45%) !important;
}
/* En hover, el ícono a fucsia (mismo criterio que el borde) */
.btn-searchset:hover img, .btn-filter:hover img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(99%) saturate(6600%) hue-rotate(316deg) !important;
}
/* Íconos SVG inline de filtro/búsqueda -> mismo gris que los img (uniforme entre vistas) */
.btn-filter svg, .btn-searchset svg, .btn-filters svg { color: #6E7681 !important; stroke: #6E7681 !important; }
.btn-filter:hover svg, .btn-searchset:hover svg { color: var(--fl-accent, #FF007A) !important; stroke: var(--fl-accent, #FF007A) !important; }

/* ---- btn-export: TODOS los "Exportar" con el mismo estilo -> blanco con BORDE VERDE + ícono verde ---- */
.btn-export {
  background: #FFFFFF !important; border: 1px solid #00B27A !important;
  color: #0B0B0F !important; border-radius: 5px !important; box-shadow: none !important; font-weight: 500 !important;
}
.btn-export:hover, .btn-export:focus { background: #E3F7EF !important; border-color: #00B27A !important; color: #0B0B0F !important; }
.btn-export i, .btn-export svg { color: #00B27A !important; }
.btn-export img { filter: brightness(0) saturate(100%) invert(48%) sepia(72%) saturate(600%) hue-rotate(115deg) !important; }
/* Export barridos por sed (borde verde inline): ícono verde uniforme, igual que .btn-export */
.btn[style*="00B27A"] svg, .btn[style*="00B27A"] i { color: #00B27A !important; stroke: #00B27A !important; }
.btn[style*="00B27A"] img { filter: brightness(0) saturate(100%) invert(48%) sepia(72%) saturate(600%) hue-rotate(115deg) !important; }

/* ---- TODOS los "Exportar" (por atributo) -> formato reports-ventas-detalles: blanco, borde verde, ícono verde ---- */
.btn[wire\:click*="xportar"],
.btn[wire\:click*="xcel"],
.btn[onclick*="xportar"],
.btn[onclick*="xcel"],
.btn[href*="exportar"],
.btn[href*="/exportar"],
.btn[title*="xcel"],
.btn[title*="xportar"] {
  background: #FFFFFF !important;
  border: 1px solid #00B27A !important;
  color: #0B0B0F !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}
.btn[wire\:click*="xportar"] svg, .btn[wire\:click*="xcel"] svg,
.btn[onclick*="xportar"] svg, .btn[onclick*="xcel"] svg,
.btn[href*="exportar"] svg, .btn[title*="xcel"] svg, .btn[title*="xportar"] svg,
.btn[wire\:click*="xportar"] i, .btn[onclick*="xportar"] i, .btn[href*="exportar"] i, .btn[title*="xcel"] i {
  color: #00B27A !important; stroke: #00B27A !important;
}
.btn[wire\:click*="xportar"] img, .btn[onclick*="xportar"] img, .btn[href*="exportar"] img, .btn[title*="xcel"] img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(72%) saturate(600%) hue-rotate(115deg) !important;
}

/* ---- PDF (descargar) -> ROJO en vez de verde (gana sobre la regla de export) ---- */
.btn[wire\:click*="pdf" i], .btn[onclick*="pdf" i], .btn[href*="pdf" i], .btn[title*="pdf" i],
.btn:has(.fa-file-pdf), .btn:has(img[src*="pdf" i]) {
  background: #FFFFFF !important;
  border: 1px solid #CC3413 !important;
  color: #0B0B0F !important;
  border-radius: 5px !important;
}
.btn[wire\:click*="pdf" i] svg, .btn[onclick*="pdf" i] svg, .btn[href*="pdf" i] svg, .btn[title*="pdf" i] svg,
.btn[wire\:click*="pdf" i] i, .btn[onclick*="pdf" i] i, .btn[href*="pdf" i] i,
.btn:has(.fa-file-pdf) svg, .btn:has(.fa-file-pdf) i, .btn:has(.fa-file-pdf) .fa-file-pdf {
  color: #CC3413 !important; stroke: #CC3413 !important;
}
.btn[wire\:click*="pdf" i] img, .btn[onclick*="pdf" i] img, .btn[href*="pdf" i] img,
.btn:has(img[src*="pdf" i]) img {
  filter: brightness(0) saturate(100%) invert(19%) sepia(90%) saturate(3500%) hue-rotate(350deg) !important;
}

/* ---- TABS consistentes: nav-tabs + Activos/Papelera (activo fucsia con subrayado) ---- */
.nav-tabs { border-bottom: 1px solid #E1E5EC !important; }
.nav-tabs .nav-link {
  color: #6E7681 !important; border: none !important; border-radius: 0 !important;
  font-weight: 500 !important; background: transparent !important;
}
.nav-tabs .nav-link:hover { color: #0B0B0F !important; }
.nav-tabs .nav-link.active {
  color: var(--fl-accent, #FF007A) !important; background: transparent !important;
  border-bottom: 2px solid var(--fl-accent, #FF007A) !important; font-weight: 600 !important;
}
/* Tabs Activos / Papelera (.estado / .estado-activo) */
.estado, .estado-activo { font-weight: 600 !important; padding: 4px 12px !important; display: inline-block; }
.estado { color: #6E7681 !important; }
.estado-activo { color: var(--fl-accent, #FF007A) !important; border-bottom: 2px solid var(--fl-accent, #FF007A) !important; }

/* ---- PAGINACIÓN Bootstrap (GLOBAL) -> reskin: números angulares separados,
   activo fucsia, hover borde fucsia. Reemplaza el azul default de Bootstrap. ---- */
.pagination { gap: 5px !important; flex-wrap: wrap !important; }
.pagination .page-item .page-link,
.pagination .page-link {
  color: #0B0B0F !important;
  background: #FFFFFF !important;
  border: 1px solid #E1E5EC !important;
  border-radius: 4px !important;
  margin: 0 !important;               /* mata el margin-left:-1px de Bootstrap (los junta) */
  min-width: 34px !important;
  padding: 6px 10px !important;
  font-size: 13px !important; font-weight: 500 !important;
  line-height: 1.2 !important; text-align: center !important;
  box-shadow: none !important;
  transition: background .12s, border-color .12s, color .12s !important;
}
.pagination .page-link:hover {
  background: #F5F7FA !important;
  border-color: var(--fl-accent, #FF007A) !important;
  color: var(--fl-accent-hover, #CC0062) !important;
  z-index: 1 !important;
}
.pagination .page-item.active .page-link,
.pagination .page-link.active {
  background: var(--fl-accent, #FF007A) !important;
  border-color: var(--fl-accent, #FF007A) !important;
  color: var(--fl-text-on-accent, #FFFFFF) !important;
  font-weight: 600 !important;
}
.pagination .page-item.disabled .page-link {
  color: #B4BAC4 !important;
  background: #FFFFFF !important;
  border-color: #EDF0F5 !important;
}
.pagination .page-link:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(var(--fl-accent-rgb,255,0,122),.15) !important;
}

/* ---- Toggle pill (GLOBAL): track gris, activo blanco con borde ---- */
.pill-toggle { background: #EDF0F5 !important; border-radius: 4px !important; padding: 2px !important; }
.pill-toggle .pill-btn { color: #5A6270 !important; border: none !important; background: transparent !important; border-radius: 3px !important; }
.pill-toggle .pill-btn.active { background: #FFFFFF !important; color: #0B0B0F !important; box-shadow: inset 0 0 0 1px #C9CFDA !important; font-weight: 600 !important; }

/* ---- Cards (GLOBAL): blanco, borde 1px, angular, sin sombra fuerte ---- */
.content-page .card,
.page-wrapper .card { background:#FFFFFF !important; border: 1px solid #E1E5EC !important; border-radius: 4px !important; box-shadow: none !important; }

/* ---- KPI cards GLOBALES (.dash-widget): IDÉNTICAS al mockup (dashboard.html) en TODAS
   las vistas (dashboard, compras-resumen, reports-ventas, facturación, reports-nuevo, etc.)
   -> SIN ícono, layout columna (label arriba 11px muted + valor grande Space Grotesk),
   card blanca angular con borde neutro. Todas comparten estructura dash-widgetimg +
   dash-widgetcontent(h5 valor / h6 label). ---- */
.dash-widget {
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; justify-content: center !important; gap: 6px !important;
  background: #FFFFFF !important; border: 1px solid #E1E5EC !important;
  border-radius: 4px !important; box-shadow: none !important; padding: 16px !important;
}
/* fuera el ícono */
.dash-widget .dash-widgetimg { display: none !important; }
.dash-widget .dash-widgetcontent { display: flex !important; flex-direction: column !important; gap: 4px !important; width: 100% !important; }
/* label ARRIBA (order -1), chica y muted, con el tooltip svg más chico */
.dash-widget .dash-widgetcontent h6 {
  order: -1 !important; margin: 0 !important;
  color: #6E7681 !important; font-size: 11px !important; font-weight: 500 !important;
  display: flex !important; align-items: center !important; gap: 5px !important; line-height: 1.3 !important;
}
.dash-widget .dash-widgetcontent h6 svg { width: 13px !important; height: 13px !important; flex-shrink: 0 !important; }
/* valor grande en Space Grotesk, negro */
.dash-widget .dash-widgetcontent h5,
.dash-widget .dash-widgetcontent h5 .counters {
  font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 24px !important; font-weight: 600 !important; color: #0B0B0F !important;
  margin: 0 !important; white-space: nowrap !important; letter-spacing: -0.2px !important;
}
/* Card DESTACADA (ej. "Ganancia"): acento lateral fucsia como el card resaltado del mockup.
   Sigue el PRIMARIO del tema (--fl-accent) -> cambia si la CC cambia el color principal. */
.dash-widget.dash-widget--accent {
  border-left: 3px solid var(--fl-accent, #FF007A) !important;
  border-radius: 0 4px 4px 0 !important;
}

/* ---- Fondo del contenido gris claro (GLOBAL): los blancos (cards/inputs) resaltan, como el mockup ----
   body en style.css es #FAFBFE (casi blanco). Lo bajamos a #F5F7FA (gris del mockup)
   para que la card blanca del form y el panel transparente resalten. */
body { background-color: #F5F7FA !important; }
.page-wrapper,
.page-wrapper > .content,
.page-wrapper .content,
#content { background: #F5F7FA !important; }

/* ---- POS: form en CARD BLANCA sobre el gris; panel derecho SOBRE el gris (mockup) ---- */
.fl-pos-form {
  background: #FFFFFF !important;
  border: 1px solid #E1E5EC !important;
  border-radius: 4px !important;
  padding: 6px 18px 18px !important;
}
.fl-pos-panel { background: transparent !important; }
/* El panel NO lleva cards blancas internas (el mockup va plano sobre el gris) */
.fl-pos-panel .card,
.fl-pos-panel .card-body {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.fl-pos-title {
  font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  letter-spacing: .4px !important;
  color: #0B0B0F !important;
}

/* ---- Panel de cobro (POS): totales estilo mockup (.sumline / total) + tamaños ---- */
.fl-pos-panel .d-flex.justify-content-between {
  padding: 6px 0 !important;
  color: #5A6270 !important;
  font-size: 13.5px !important;
}
.fl-pos-panel .d-flex.justify-content-between strong { color: #0B0B0F !important; font-weight: 600 !important; }
.fl-pos-panel .fl-sumline-total {
  border-top: 1px solid #E1E5EC !important;
  margin-top: 6px !important;
  padding-top: 12px !important;
}
.fl-pos-panel .fl-sumline-total span,
.fl-pos-panel .fl-sumline-total strong {
  font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0B0B0F !important;
}
/* Retiro / forma de entrega -> fucsia (respaldo del inline) */
.fl-pos-panel select[x-model="formaEntrega"] { color: var(--fl-accent-hover, #CC0062) !important; font-weight: 600 !important; }

/* ---------- PANEL DE COBRO: labels en MAYÚSCULA (como el mockup) ----------
   Scopeado a .fl-pos-panel (columna derecha del POS) para no afectar otras pantallas. */
.fl-pos-panel label.small,
.fl-pos-panel label.form-label,
.fl-pos-panel .form-label {
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--fl-text-muted,#5C6675) !important;
}

/* ---------- TIPOGRAFÍA: Space Grotesk (display) ----------
   Se aplica al wordmark, títulos de grupo del sidebar y headings de
   pantalla. El cuerpo sigue en la fuente base (Inter/fallback). */
.header .fl-word,
.sidebar .submenu-hdr,
.sidebar .sidebar-group-titulo,
.sidebar .sidebar-label,
.page-header h1, .page-header h4, .page-header h6,
.page-title, .content-page h1, .content-page h2 {
  font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif !important;
}

/* ---------- Buscador Cmd+K: panel BLANCO -> texto OSCURO (era --sb-text-strong = blanco, invisible) ---------- */
.sidebar-search-input-row input { color: #0B0B0F !important; }
.sidebar-search-input-row input::placeholder { color: #8A93A1 !important; }
.sidebar-search-result,
.sidebar-search-result *:not(svg):not(.sidebar-search-result-section) { color: #1B1F28 !important; }
.sidebar-search-result.is-highlighted,
.sidebar-search-result:hover,
.sidebar-search-result.is-highlighted *:not(.sidebar-search-result-section),
.sidebar-search-result:hover *:not(.sidebar-search-result-section) { color: var(--fl-accent-hover, #CC0062) !important; }

/* ============================================================
   FASE 2 · LINKS SIN CLASE, DROPDOWNS Y BOTONES OUTLINE
   base.scss trae `a { color:#FF9F43 }` (naranja del template viejo).
   OJO: NO recolorear <a> en BLOQUE -> pisa las pestañas de sucursal
   (.sucursal-chip), Activos/Papelera (.estado/.estado-activo) y demás
   links que tienen su propio color (regresión ya probada).
   La solución es targetear SOLO los <a> SIN clase (ej. "Agregar pago"):
   los que tienen clase (chips, tabs, etc.) quedan intactos.
   ============================================================ */

/* Links de texto SIN clase del contenido (ej. "Agregar pago") -> fucsia.
   Sin !important: la specificity (.page-wrapper + a + :not([class]) = 0,2,1)
   ya le gana al `a{color:#FF9F43}` base (0,0,1), y así NO pisa colores inline.
   :not(:has(img/svg/i/picture)) = si el <a> envuelve un logo/ícono (ej. los de
   "Acc. rápidas": facturar/imprimir/WooCommerce/ARCA), NO se recolorea, así el
   currentColor no tiñe el SVG/ícono. Solo se pintan los links de puro texto. */
.page-wrapper a:not([class]):not(:has(img)):not(:has(svg)):not(:has(i)):not(:has(picture)) { color: var(--fl-secondary, var(--fl-accent-hover,#CC0062)); }
.page-wrapper a:not([class]):not(:has(img)):not(:has(svg)):not(:has(i)):not(:has(picture)):hover { color: var(--fl-accent, #FF007A); }

/* Dropdown de acciones (Ver / Ver en nueva ventana / Eliminar, etc.):
   normal texto oscuro, hover gris claro + fucsia, activo fucsia relleno.
   Scopeado a .page-wrapper para no tocar los dropdown del header (user/notif). */
.page-wrapper .dropdown-menu .dropdown-item { color:#1B1F28 !important; }
.page-wrapper .dropdown-menu .dropdown-item:hover,
.page-wrapper .dropdown-menu .dropdown-item:focus {
  background:#F5F7FA !important; color: var(--fl-accent-hover,#CC0062) !important;
}
.page-wrapper .dropdown-menu .dropdown-item:hover i,
.page-wrapper .dropdown-menu .dropdown-item:hover svg,
.page-wrapper .dropdown-menu .dropdown-item:focus i,
.page-wrapper .dropdown-menu .dropdown-item:focus svg { color: var(--fl-accent-hover,#CC0062) !important; }
.page-wrapper .dropdown-menu .dropdown-item.active,
.page-wrapper .dropdown-menu .dropdown-item:active {
  background: var(--fl-accent, #FF007A) !important; color:#fff !important;
}

/* btn-outline-primary (ej. "Cargar historial"): el "primary" del template
   viejo era naranja -> a fucsia (borde+texto), hover relleno fucsia. */
.btn-outline-primary {
  color: var(--fl-accent-hover,#CC0062) !important;
  border-color: var(--fl-accent, #FF007A) !important;
  background: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color:#FFFFFF !important;
  background: var(--fl-accent, #FF007A) !important;
  border-color: var(--fl-accent, #FF007A) !important;
}

/* ---------- SCROLLBAR neutro ----------
   El template pintaba el thumb con el acento (naranja -> fucsia tras el
   replace). Un scrollbar fucsia full-height es "fucsia decorativo", que el
   manual prohibe. Vuelve a neutro. */
::-webkit-scrollbar-thumb { background: #C9CFDA !important; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #A8B0BE !important; }
/* En el shell oscuro, thumb apenas visible sobre negro */
.sidebar ::-webkit-scrollbar-thumb,
.sidebar .slimscroll ::-webkit-scrollbar-thumb { background: #2A2E35 !important; }


/* ============================================================
   FASE 2 · SPINNER (loader) + BADGE de notificaciones
   scss/main.css (base.scss compilado, template viejo) se carga en prod y
   pisa a style.css: el whirly-loader y el badge del bell quedan en NARANJA
   (#FF9F43). Los re-asegtamos a fucsia con !important (specificity + !important
   le ganan al naranja, que va sin !important).
   ============================================================ */

/* Spinner del loader global -> fucsia (mismo box-shadow que style.css, forzado). */
div#global-loader .whirly-loader:not(:required) { box-shadow: 0 26px 0 6px var(--fl-accent,#FF007A), 0.90971px 26.05079px 0 5.93333px var(--fl-accent,#FF007A), 1.82297px 26.06967px 0 5.86667px var(--fl-accent,#FF007A), 2.73865px 26.05647px 0 5.8px var(--fl-accent,#FF007A), 3.65561px 26.01104px 0 5.73333px var(--fl-accent,#FF007A), 4.57274px 25.93327px 0 5.66667px var(--fl-accent,#FF007A), 5.48887px 25.8231px 0 5.6px var(--fl-accent,#FF007A), 6.40287px 25.68049px 0 5.53333px var(--fl-accent,#FF007A), 7.31358px 25.50548px 0 5.46667px var(--fl-accent,#FF007A), 8.21985px 25.2981px 0 5.4px var(--fl-accent,#FF007A), 9.12054px 25.05847px 0 5.33333px var(--fl-accent,#FF007A), 10.01448px 24.78672px 0 5.26667px var(--fl-accent,#FF007A), 10.90054px 24.48302px 0 5.2px var(--fl-accent,#FF007A), 11.77757px 24.1476px 0 5.13333px var(--fl-accent,#FF007A), 12.64443px 23.78072px 0 5.06667px var(--fl-accent,#FF007A), 13.5px 23.38269px 0 5px var(--fl-accent,#FF007A), 14.34315px 22.95384px 0 4.93333px var(--fl-accent,#FF007A), 15.17277px 22.49455px 0 4.86667px var(--fl-accent,#FF007A), 15.98776px 22.00526px 0 4.8px var(--fl-accent,#FF007A), 16.78704px 21.48643px 0 4.73333px var(--fl-accent,#FF007A), 17.56953px 20.93855px 0 4.66667px var(--fl-accent,#FF007A), 18.33418px 20.36217px 0 4.6px var(--fl-accent,#FF007A), 19.07995px 19.75787px 0 4.53333px var(--fl-accent,#FF007A), 19.80582px 19.12626px 0 4.46667px var(--fl-accent,#FF007A), 20.5108px 18.468px 0 4.4px var(--fl-accent,#FF007A), 21.1939px 17.78379px 0 4.33333px var(--fl-accent,#FF007A), 21.85416px 17.07434px 0 4.26667px var(--fl-accent,#FF007A), 22.49067px 16.34043px 0 4.2px var(--fl-accent,#FF007A), 23.10251px 15.58284px 0 4.13333px var(--fl-accent,#FF007A), 23.68881px 14.80241px 0 4.06667px var(--fl-accent,#FF007A), 24.24871px 14px 0 4px var(--fl-accent,#FF007A), 24.7814px 13.1765px 0 3.93333px var(--fl-accent,#FF007A), 25.28607px 12.33284px 0 3.86667px var(--fl-accent,#FF007A), 25.76198px 11.46997px 0 3.8px var(--fl-accent,#FF007A), 26.2084px 10.58888px 0 3.73333px var(--fl-accent,#FF007A), 26.62462px 9.69057px 0 3.66667px var(--fl-accent,#FF007A), 27.01001px 8.77608px 0 3.6px var(--fl-accent,#FF007A), 27.36392px 7.84648px 0 3.53333px var(--fl-accent,#FF007A), 27.68577px 6.90284px 0 3.46667px var(--fl-accent,#FF007A), 27.97502px 5.94627px 0 3.4px var(--fl-accent,#FF007A), 28.23116px 4.97791px 0 3.33333px var(--fl-accent,#FF007A), 28.4537px 3.99891px 0 3.26667px var(--fl-accent,#FF007A), 28.64223px 3.01042px 0 3.2px var(--fl-accent,#FF007A), 28.79635px 2.01364px 0 3.13333px var(--fl-accent,#FF007A), 28.91571px 1.00976px 0 3.06667px var(--fl-accent,#FF007A), 29px 0 0 3px var(--fl-accent,#FF007A), 29.04896px -1.01441px 0 2.93333px var(--fl-accent,#FF007A), 29.06237px -2.03224px 0 2.86667px var(--fl-accent,#FF007A), 29.04004px -3.05223px 0 2.8px var(--fl-accent,#FF007A), 28.98185px -4.07313px 0 2.73333px var(--fl-accent,#FF007A), 28.88769px -5.09368px 0 2.66667px var(--fl-accent,#FF007A), 28.75754px -6.1126px 0 2.6px var(--fl-accent,#FF007A), 28.59138px -7.12863px 0 2.53333px var(--fl-accent,#FF007A), 28.38926px -8.14049px 0 2.46667px var(--fl-accent,#FF007A), 28.15127px -9.1469px 0 2.4px var(--fl-accent,#FF007A), 27.87755px -10.1466px 0 2.33333px var(--fl-accent,#FF007A), 27.56827px -11.1383px 0 2.26667px var(--fl-accent,#FF007A), 27.22365px -12.12075px 0 2.2px var(--fl-accent,#FF007A), 26.84398px -13.09268px 0 2.13333px var(--fl-accent,#FF007A), 26.42956px -14.05285px 0 2.06667px var(--fl-accent,#FF007A), 25.98076px -15px 0 2px var(--fl-accent,#FF007A), 25.49798px -15.93291px 0 1.93333px var(--fl-accent,#FF007A), 24.98167px -16.85035px 0 1.86667px var(--fl-accent,#FF007A), 24.43231px -17.75111px 0 1.8px var(--fl-accent,#FF007A), 23.85046px -18.63402px 0 1.73333px var(--fl-accent,#FF007A), 23.23668px -19.49789px 0 1.66667px var(--fl-accent,#FF007A), 22.5916px -20.34157px 0 1.6px var(--fl-accent,#FF007A), 21.91589px -21.16393px 0 1.53333px var(--fl-accent,#FF007A), 21.21024px -21.96384px 0 1.46667px var(--fl-accent,#FF007A), 20.4754px -22.74023px 0 1.4px var(--fl-accent,#FF007A), 19.71215px -23.49203px 0 1.33333px var(--fl-accent,#FF007A), 18.92133px -24.2182px 0 1.26667px var(--fl-accent,#FF007A), 18.10379px -24.91772px 0 1.2px var(--fl-accent,#FF007A), 17.26042px -25.58963px 0 1.13333px var(--fl-accent,#FF007A), 16.39217px -26.23295px 0 1.06667px var(--fl-accent,#FF007A), 15.5px -26.84679px 0 1px var(--fl-accent,#FF007A), 14.58492px -27.43024px 0 0.93333px var(--fl-accent,#FF007A), 13.64796px -27.98245px 0 0.86667px var(--fl-accent,#FF007A), 12.69018px -28.50262px 0 0.8px var(--fl-accent,#FF007A), 11.7127px -28.98995px 0 0.73333px var(--fl-accent,#FF007A), 10.71663px -29.4437px 0 0.66667px var(--fl-accent,#FF007A), 9.70313px -29.86317px 0 0.6px var(--fl-accent,#FF007A), 8.67339px -30.2477px 0 0.53333px var(--fl-accent,#FF007A), 7.6286px -30.59666px 0 0.46667px var(--fl-accent,#FF007A), 6.57001px -30.90946px 0 0.4px var(--fl-accent,#FF007A), 5.49886px -31.18558px 0 0.33333px var(--fl-accent,#FF007A), 4.41643px -31.42451px 0 0.26667px var(--fl-accent,#FF007A), 3.32401px -31.6258px 0 0.2px var(--fl-accent,#FF007A), 2.22291px -31.78904px 0 0.13333px var(--fl-accent,#FF007A), 1.11446px -31.91388px 0 0.06667px var(--fl-accent,#FF007A), 0 -32px 0 0 var(--fl-accent,#FF007A), -1.11911px -32.04713px 0 -0.06667px var(--fl-accent,#FF007A), -2.24151px -32.05506px 0 -0.13333px var(--fl-accent,#FF007A), -3.36582px -32.02361px 0 -0.2px var(--fl-accent,#FF007A), -4.49065px -31.95265px 0 -0.26667px var(--fl-accent,#FF007A), -5.61462px -31.84212px 0 -0.33333px var(--fl-accent,#FF007A), -6.73634px -31.69198px 0 -0.4px var(--fl-accent,#FF007A), -7.8544px -31.50227px 0 -0.46667px var(--fl-accent,#FF007A), -8.9674px -31.27305px 0 -0.53333px var(--fl-accent,#FF007A), -10.07395px -31.00444px 0 -0.6px var(--fl-accent,#FF007A), -11.17266px -30.69663px 0 -0.66667px var(--fl-accent,#FF007A), -12.26212px -30.34982px 0 -0.73333px var(--fl-accent,#FF007A), -13.34096px -29.96429px 0 -0.8px var(--fl-accent,#FF007A), -14.4078px -29.54036px 0 -0.86667px var(--fl-accent,#FF007A), -15.46126px -29.07841px 0 -0.93333px var(--fl-accent,#FF007A), -16.5px -28.57884px 0 -1px var(--fl-accent,#FF007A), -17.52266px -28.04212px 0 -1.06667px var(--fl-accent,#FF007A), -18.52792px -27.46878px 0 -1.13333px var(--fl-accent,#FF007A), -19.51447px -26.85936px 0 -1.2px var(--fl-accent,#FF007A), -20.48101px -26.21449px 0 -1.26667px var(--fl-accent,#FF007A), -21.42625px -25.53481px 0 -1.33333px var(--fl-accent,#FF007A), -22.34896px -24.82104px 0 -1.4px var(--fl-accent,#FF007A), -23.2479px -24.07391px 0 -1.46667px var(--fl-accent,#FF007A), -24.12186px -23.29421px 0 -1.53333px var(--fl-accent,#FF007A), -24.96967px -22.48279px 0 -1.6px var(--fl-accent,#FF007A), -25.79016px -21.64052px 0 -1.66667px var(--fl-accent,#FF007A), -26.58223px -20.76831px 0 -1.73333px var(--fl-accent,#FF007A), -27.34477px -19.86714px 0 -1.8px var(--fl-accent,#FF007A), -28.07674px -18.938px 0 -1.86667px var(--fl-accent,#FF007A), -28.7771px -17.98193px 0 -1.93333px var(--fl-accent,#FF007A), -29.44486px -17px 0 -2px var(--fl-accent,#FF007A), -30.07908px -15.99333px 0 -2.06667px var(--fl-accent,#FF007A), -30.67884px -14.96307px 0 -2.13333px var(--fl-accent,#FF007A), -31.24325px -13.91039px 0 -2.2px var(--fl-accent,#FF007A), -31.7715px -12.83652px 0 -2.26667px var(--fl-accent,#FF007A), -32.26278px -11.74269px 0 -2.33333px var(--fl-accent,#FF007A), -32.71634px -10.63018px 0 -2.4px var(--fl-accent,#FF007A), -33.13149px -9.5003px 0 -2.46667px var(--fl-accent,#FF007A), -33.50755px -8.35437px 0 -2.53333px var(--fl-accent,#FF007A), -33.84391px -7.19374px 0 -2.6px var(--fl-accent,#FF007A), -34.14px -6.0198px 0 -2.66667px var(--fl-accent,#FF007A), -34.39531px -4.83395px 0 -2.73333px var(--fl-accent,#FF007A), -34.60936px -3.63759px 0 -2.8px var(--fl-accent,#FF007A), -34.78173px -2.43218px 0 -2.86667px var(--fl-accent,#FF007A), -34.91205px -1.21916px 0 -2.93333px var(--fl-accent,#FF007A), -35px 0 0 -3px var(--fl-accent,#FF007A), -35.04531px 1.22381px 0 -3.06667px var(--fl-accent,#FF007A), -35.04775px 2.45078px 0 -3.13333px var(--fl-accent,#FF007A), -35.00717px 3.6794px 0 -3.2px var(--fl-accent,#FF007A), -34.92345px 4.90817px 0 -3.26667px var(--fl-accent,#FF007A), -34.79654px 6.13557px 0 -3.33333px var(--fl-accent,#FF007A), -34.62643px 7.36007px 0 -3.4px var(--fl-accent,#FF007A), -34.41316px 8.58016px 0 -3.46667px var(--fl-accent,#FF007A), -34.15683px 9.79431px 0 -3.53333px var(--fl-accent,#FF007A), -33.85761px 11.001px 0 -3.6px var(--fl-accent,#FF007A), -33.5157px 12.19872px 0 -3.66667px var(--fl-accent,#FF007A), -33.13137px 13.38594px 0 -3.73333px var(--fl-accent,#FF007A), -32.70493px 14.56117px 0 -3.8px var(--fl-accent,#FF007A), -32.23675px 15.72291px 0 -3.86667px var(--fl-accent,#FF007A), -31.72725px 16.86968px 0 -3.93333px var(--fl-accent,#FF007A), -31.17691px 18px 0 -4px var(--fl-accent,#FF007A), -30.58627px 19.11242px 0 -4.06667px var(--fl-accent,#FF007A), -29.95589px 20.2055px 0 -4.13333px var(--fl-accent,#FF007A), -29.28642px 21.27783px 0 -4.2px var(--fl-accent,#FF007A), -28.57852px 22.32799px 0 -4.26667px var(--fl-accent,#FF007A), -27.83295px 23.35462px 0 -4.33333px var(--fl-accent,#FF007A), -27.05047px 24.35635px 0 -4.4px var(--fl-accent,#FF007A), -26.23192px 25.33188px 0 -4.46667px var(--fl-accent,#FF007A), -25.37819px 26.27988px 0 -4.53333px var(--fl-accent,#FF007A), -24.49018px 27.1991px 0 -4.6px var(--fl-accent,#FF007A), -23.56888px 28.0883px 0 -4.66667px var(--fl-accent,#FF007A), -22.6153px 28.94626px 0 -4.73333px var(--fl-accent,#FF007A), -21.6305px 29.77183px 0 -4.8px var(--fl-accent,#FF007A), -20.61558px 30.56385px 0 -4.86667px var(--fl-accent,#FF007A), -19.57168px 31.32124px 0 -4.93333px var(--fl-accent,#FF007A), -18.5px 32.04294px 0 -5px var(--fl-accent,#FF007A), -17.40175px 32.72792px 0 -5.06667px var(--fl-accent,#FF007A), -16.27818px 33.37522px 0 -5.13333px var(--fl-accent,#FF007A), -15.1306px 33.98389px 0 -5.2px var(--fl-accent,#FF007A), -13.96034px 34.55305px 0 -5.26667px var(--fl-accent,#FF007A), -12.76875px 35.08186px 0 -5.33333px var(--fl-accent,#FF007A), -11.55724px 35.56951px 0 -5.4px var(--fl-accent,#FF007A), -10.32721px 36.01527px 0 -5.46667px var(--fl-accent,#FF007A), -9.08014px 36.41843px 0 -5.53333px var(--fl-accent,#FF007A), -7.81748px 36.77835px 0 -5.6px var(--fl-accent,#FF007A), -6.54075px 37.09443px 0 -5.66667px var(--fl-accent,#FF007A), -5.25147px 37.36612px 0 -5.73333px var(--fl-accent,#FF007A), -3.95118px 37.59293px 0 -5.8px var(--fl-accent,#FF007A), -2.64145px 37.77443px 0 -5.86667px var(--fl-accent,#FF007A), -1.32385px 37.91023px 0 -5.93333px var(--fl-accent,#FF007A) !important; }

/* Badge del contador de notificaciones (bell) -> fondo fucsia.
   El de la tienda online (#nv-tienda-badge) queda VERDE (su desplegable es verde). */
.header .user-menu.nav > li > a .badge,
.user-menu.nav > li > a .badge { background: var(--fl-accent, #FF007A) !important; }
#nv-tienda-badge { background: #28a745 !important; }

/* ---- Select2: opción resaltada (hover/teclado) y seleccionada -> fucsia
   (el style.css viejo de prod las pinta naranja). El dropdown de select2 se
   monta en <body>, por eso NO se scopea a .page-wrapper. ---- */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background: var(--fl-accent, #FF007A) !important;
  color: #FFFFFF !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background: var(--fl-accent-subtle, #FFEAF3) !important;
  color: #0B0B0F !important;
}
/* La X de quitar de los chips multi-select (era naranja inline en styles.blade) */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--fl-accent-hover, #CC0062) !important;
}