/* ===========================================================================
   Esencial POS — capa de modernización (pastel retro-futurista / acrílico)
   Se carga DESPUÉS de AdminLTE y lo re-estiliza. Tema por [data-theme] en <html>.
   =========================================================================== */

:root{
  --page: linear-gradient(135deg,#E4F3EE 0%,#E7EFF8 46%,#FBEDE4 100%);
  --glass: rgba(255,255,255,.74);
  --glass-2: rgba(255,255,255,.9);
  --glass-brd: rgba(255,255,255,.92);
  --edge: rgba(255,255,255,.55);
  --hair: rgba(90,130,128,.16);
  --field:#ffffff; --field-brd:rgba(56,104,99,.34); --field-brd-hover:rgba(47,178,154,.65);
  --scroll: rgba(90,130,128,.34);
  --sheen: linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,0) 46%);
  --side: linear-gradient(165deg,#173432 0%,#122838 100%);
  --side-glint: rgba(92,207,183,.22);
  --side-txt:#B4CCC6; --side-active:rgba(255,255,255,.14);
  --text:#22403E; --muted:#607674; --strong:#12302E;
  --aqua:#2FB29A; --aqua2:#5CCFB7; --aqua-soft:rgba(70,200,170,.16);
  --peach:#EE9E6F; --peach2:#F6C39B;
  --sky:#7FAAE0; --sky2:#AFCBEE; --sky-soft:rgba(130,175,230,.18);
  --success:#2CA982; --success-soft:rgba(70,200,170,.16);
  --warn:#C6892F; --warn-soft:rgba(220,170,80,.2);
  --danger:#DE6A62; --danger-soft:rgba(225,115,105,.16);
  --sh-sm:0 2px 10px rgba(30,60,58,.07);
  --sh-md:0 10px 30px rgba(30,60,58,.12);
  --sh-lg:0 22px 55px rgba(24,50,48,.20);
  --r:18px; --r-sm:12px;
  /* Escala de espaciado (base 4px) — auditoría UI */
  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:48px;
  /* Escala tipográfica (rem, base 16px) — auditoría UI #2 */
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.9375rem; --fs-md:1rem;
  --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-2xl:1.75rem;
  --lh-tight:1.25; --lh:1.5;
  /* Azul-morado uniforme para acciones (índigo/violeta) */
  --brand:#5B57D8; --brand-2:#7E7BE6; --brand-soft:rgba(91,87,216,.12); --brand-ink:#ffffff;
}
:root[data-theme="dark"]{
  --page: linear-gradient(135deg,#0C1B1A 0%,#0D1B26 52%,#161320 100%);
  --glass: rgba(26,42,44,.82); --glass-2: rgba(33,51,53,.92); --glass-brd: rgba(255,255,255,.05);
  --edge: rgba(255,255,255,.05); --hair: rgba(255,255,255,.07); --scroll: rgba(255,255,255,.16);
  --field:rgba(18,30,32,.5); --field-brd:rgba(255,255,255,.16); --field-brd-hover:rgba(92,207,183,.6);
  --sheen: linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,0) 42%);
  --side: linear-gradient(165deg,#0B1717 0%,#08131A 100%); --side-glint: rgba(80,200,175,.14);
  --side-txt:#9BB4AE; --side-active:rgba(255,255,255,.1);
  --text:#E6F1EF; --muted:#8FA8A5; --strong:#F2FAF8;
  --aqua:#3DB9A0; --aqua2:#54C6AE; --aqua-soft:rgba(70,190,165,.15);
  --peach:#E6A57C; --peach2:#EEBE96;
  --sky:#7FA9DC; --sky2:#A6C4E8; --sky-soft:rgba(130,175,225,.15);
  --success:#3FBF95; --success-soft:rgba(70,190,150,.15);
  --warn:#D4A046; --warn-soft:rgba(215,165,80,.16);
  --danger:#EC847C; --danger-soft:rgba(235,130,120,.15);
  --sh-sm:0 2px 10px rgba(0,0,0,.35); --sh-md:0 12px 32px rgba(0,0,0,.45); --sh-lg:0 26px 60px rgba(0,0,0,.55);
  --brand:#8B86F0; --brand-2:#A7A3F5; --brand-soft:rgba(139,134,240,.20); --brand-ink:#0C1220;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --page: linear-gradient(135deg,#0C1B1A 0%,#0D1B26 52%,#161320 100%);
  --glass: rgba(26,42,44,.82); --glass-2: rgba(33,51,53,.92); --glass-brd: rgba(255,255,255,.05);
  --edge: rgba(255,255,255,.05); --hair: rgba(255,255,255,.07); --scroll: rgba(255,255,255,.16);
  --field:rgba(18,30,32,.5); --field-brd:rgba(255,255,255,.16); --field-brd-hover:rgba(92,207,183,.6);
  --sheen: linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,0) 42%);
  --side: linear-gradient(165deg,#0B1717 0%,#08131A 100%); --side-glint: rgba(80,200,175,.14);
  --side-txt:#9BB4AE; --side-active:rgba(255,255,255,.1);
  --text:#E6F1EF; --muted:#8FA8A5; --strong:#F2FAF8;
  --aqua:#3DB9A0; --aqua2:#54C6AE; --aqua-soft:rgba(70,190,165,.15);
  --peach:#E6A57C; --peach2:#EEBE96;
  --sky:#7FA9DC; --sky2:#A6C4E8; --sky-soft:rgba(130,175,225,.15);
  --success:#3FBF95; --success-soft:rgba(70,190,150,.15);
  --warn:#D4A046; --warn-soft:rgba(215,165,80,.16);
  --danger:#EC847C; --danger-soft:rgba(235,130,120,.15);
  --sh-sm:0 2px 10px rgba(0,0,0,.35); --sh-md:0 12px 32px rgba(0,0,0,.45); --sh-lg:0 26px 60px rgba(0,0,0,.55);
  --brand:#8B86F0; --brand-2:#A7A3F5; --brand-soft:rgba(139,134,240,.20); --brand-ink:#0C1220;
}}

/* ---------- fondo global (forzado en todos los wrappers) ---------- */
html body.skin-black-light,
html body,
.wrapper,
.content-wrapper,
.right-side{
  background:var(--page) !important;
  background-attachment:fixed !important;
  color:var(--text) !important;
}
.content-wrapper{ min-height:100vh; }
.content, .content-header{ color:var(--text) !important; }
.content-header > h1{ color:var(--strong) !important; font-weight:800; }
h1,h2,h3,h4,h5,.box-title{ color:var(--strong) !important; }

/* ---------- Escala tipográfica (auditoría UI #2) ----------
   Jerarquía uniforme para títulos de página dentro del área de contenido.
   No cambia la maquetación: solo tamaño/peso/interlínea coherentes. */
.content-wrapper{ font-size:var(--fs-base); line-height:var(--lh); }
.content-wrapper h1{ font-size:var(--fs-2xl); font-weight:800; line-height:var(--lh-tight); }
.content-wrapper h2{ font-size:var(--fs-xl); font-weight:700; line-height:var(--lh-tight); }
/* h3 = título de página (el patrón más usado en las vistas del panel) */
.content-wrapper h3{ font-size:var(--fs-xl); font-weight:700; line-height:var(--lh-tight); }
.content-wrapper h4,.content-wrapper .box-title{ font-size:var(--fs-lg); font-weight:700; line-height:var(--lh-tight); }
.content-wrapper h5{ font-size:var(--fs-md); font-weight:700; line-height:var(--lh-tight); }
.content-wrapper h6{ font-size:var(--fs-sm); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted) !important; }
.content-wrapper small,.content-wrapper .small{ font-size:var(--fs-sm); }

/* scrollbars acordes al tema */
*{ scrollbar-width:thin; scrollbar-color:var(--scroll) transparent; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--scroll); border-radius:10px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--muted); background-clip:content-box; }

/* ---------- HEADER ---------- */
.main-header{ box-shadow:none !important; }
/* navbar en flex: burger a la izquierda, iconos de acceso rápido + admin agrupados a la derecha */
.main-header .navbar{ display:flex !important; align-items:center !important; }
.main-header .navbar > a[data-toggle="offcanvas"]{ margin-right:auto !important; }
/* saca el admin del position:absolute;top:0 (que lo hacía saltar arriba) y lo centra con margen */
.main-header .navbar-custom-menu,
.navbar-custom-menu{
  position:static !important; top:auto !important; right:auto !important; float:none !important;
  display:flex !important; align-items:center !important; margin:0 14px 0 10px !important;
}
.navbar-custom-menu > .navbar-nav{ float:none !important; display:flex !important; align-items:center; }
/* sin subrayados ni líneas de selección al hover/focus */
.main-header a,.main-header .navbar a,.main-header .btn-link{ text-decoration:none !important; }
.main-header a:hover,.main-header .btn-link:hover{ text-decoration:none !important; }
.main-header a:focus,.main-header button:focus,.main-header .btn:focus,
.main-header a:active,.main-header button:active{ outline:none !important; }
.main-header .navbar,
.skin-black-light .main-header > .logo,
.main-header > .logo,
.main-header > .logo:hover{
  background:var(--glass) !important;
  backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:0 !important; box-shadow:inset 0 -1px 0 var(--hair) !important;
}
.main-header .logo .logo-lg{ color:var(--strong) !important; font-weight:800; letter-spacing:-.3px; }
.main-header .navbar-custom-menu.shadow{ box-shadow:none !important; background:transparent !important; padding:0 !important; }
.main-header .navbar a[data-toggle="offcanvas"],
.main-header .navbar .fa-bars,
.main-header .navbar .text-white{ color:var(--text) !important; }
/* botones de acción del header → glass redondeado con ícono pastel */
.main-header .navbar > a > button,
.main-header .navbar > button,
.main-header .navbar button.btn,
#themeToggle{
  background:var(--glass-2) !important; border:1px solid var(--glass-brd) !important;
  width:30px; height:30px; padding:0 !important; margin:0 3px; border-radius:9px !important;
  box-shadow:var(--sh-sm) !important; display:inline-flex; align-items:center; justify-content:center;
  color:var(--text) !important; transition:transform .13s; font-size:13px;
}
/* Barra superior: altura consistente para que calce con el sidebar */
.main-header .navbar,
.main-header > .logo{ min-height:48px !important; height:48px !important; }
.main-header > .logo{ padding:0 12px !important; line-height:48px !important; }
.main-header .logo .logo-lg{ font-size:.95rem; }
/* Centrado VERTICAL real de todo lo que va en la barra */
.main-header .navbar{ display:flex !important; align-items:center !important; padding:0 !important; }
.main-header .navbar > *{ align-self:center !important; margin-top:0 !important; margin-bottom:0 !important; }
/* los iconos van dentro de <a> → el <a> también debe centrar su botón */
.main-header .navbar > a{ display:inline-flex !important; align-items:center !important; height:48px; }
.main-header .navbar > a[data-toggle="offcanvas"]{ margin:0 auto 0 4px !important; }
.main-header .navbar .fa-bars{ float:none !important; font-size:18px; }
.main-header .navbar-custom-menu,
.main-header .navbar-custom-menu .navbar-nav,
.main-header .navbar-custom-menu .nav{ display:flex !important; align-items:center !important; height:48px; margin-bottom:0 !important; padding:0 !important; }
.main-header .navbar-custom-menu .nav > li{ display:flex !important; align-items:center; height:48px; list-style:none; }
.main-header .navbar-custom-menu .nav > li > .btn{ margin:0 !important; }
.main-header .navbar > a > button:hover,
.main-header .navbar button.btn:hover,
#themeToggle:hover{ transform:translateY(-2px); }
.main-header .navbar > a > button i,
.main-header .navbar button i,
#themeToggle i{ color:var(--aqua) !important; }
.main-header .navbar > a > button.active,
.main-header .navbar button.btn.active{ background:linear-gradient(135deg,var(--aqua),var(--aqua2)) !important; border-color:transparent !important; }
.main-header .navbar > a > button.active i{ color:#08302a !important; }
.main-header .navbar .nav > li > a{ color:var(--text) !important; }
.main-header .navbar .hidden-xs{ color:var(--text) !important; font-weight:600; }

/* ---------- SIDEBAR ---------- */
.main-sidebar,
.skin-black-light .main-sidebar,
.left-side{
  background:var(--side) !important; box-shadow:var(--sh-lg);
  min-height:100vh !important;                          /* que tope hasta abajo (no deja hueco) */
  border-radius:var(--r) !important;                    /* redondeado como el mockup (in situ, no rompe el plegado) */
}
/* barra FIJA detrás del sidebar → el riel izquierdo queda oscuro hasta abajo, aunque el contenido sea largo
   (el content-wrapper la tapa donde corresponde; solo se ve en la franja del sidebar) */
body.skin-black-light::before{
  content:""; position:fixed; top:0; left:0; bottom:0; width:230px; z-index:0; background:var(--side); pointer-events:none;
  transition:width .3s;
}
/* Sidebar colapsado (p.ej. pantalla de venta): el riel oscuro se ajusta al ancho de iconos
   para que su borde vertical calce con la barra superior y no sobresalga. */
body.skin-black-light.sidebar-collapse::before{ width:50px; }
@media (max-width:767px){ body.skin-black-light::before{ width:0; } }

/* Menos aire arriba: la venta (y todo el contenido) sube. */
.content-wrapper .content{ padding:8px 12px 0 !important; }
.content-wrapper .box-header{ padding:8px 14px !important; }
.content-wrapper .box-header .box-title{ font-size:var(--fs-md); }
.content-wrapper .box-body{ padding:12px 14px !important; }
.main-sidebar .sidebar-menu{ padding-top:16px !important; }  /* baja los elementos del menú */
.main-sidebar .sidebar{ position:relative; }
/* iconos: matar los text-blue / text-orange de AdminLTE dentro del menú */
.sidebar-menu i,
.sidebar-menu .text-blue,
.sidebar-menu .text-orange,
.sidebar-menu .fa-angle-left{ color:var(--side-txt) !important; opacity:.9; }
.sidebar-menu > li > a{ color:var(--side-txt) !important; border-radius:12px; margin:3px 10px; padding:11px 12px; transition:.18s; }
.sidebar-menu > li > a > span,
.sidebar-menu > li > a > .text-muted{ color:var(--side-txt) !important; font-weight:500; }
.sidebar-menu > li > a:hover{ background:rgba(255,255,255,.07) !important; color:#fff !important; }
.sidebar-menu > li > a:hover i{ color:#fff !important; }
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a{ background:var(--side-active) !important; color:#fff !important; border-left:3px solid var(--aqua) !important; }
.sidebar-menu > li.active > a i,
.sidebar-menu > li.active > a span{ color:#fff !important; }
.sidebar-menu .treeview-menu{ background:rgba(0,0,0,.16) !important; border-radius:10px; margin:2px 12px 6px; padding:5px; }
.sidebar-menu .treeview-menu > li > a{ color:var(--side-txt) !important; border-radius:8px; padding:8px 10px; }
.sidebar-menu .treeview-menu > li > a:hover,
.sidebar-menu .treeview-menu > li.active > a{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
/* Enlaces de "crear" en el submenú (antes "Add X" naranja): acento aqua + texto discreto */
.sidebar-menu .treeview-menu > li > a.sb-crear{ font-size:var(--fs-sm); opacity:.92; }
.sidebar-menu .treeview-menu > li > a.sb-crear i{ color:var(--aqua2) !important; opacity:1; width:16px; text-align:center; }
.sidebar-menu .treeview-menu > li > a.sb-crear:hover{ background:var(--side-active) !important; color:#fff !important; }
.sidebar-menu .treeview-menu > li > a.sb-crear:hover i{ color:#fff !important; }
.sidebar-menu li.header{ background:transparent !important; border:0 !important; height:6px; padding:0; }
.sidebar-menu hr,.sidebar hr{ border-color:rgba(255,255,255,.08) !important; }

/* SIDEBAR PLEGADO: iconos centrados.
   Solo desde 768px: bajo ese ancho AdminLTE deja de plegar el menú y vuelve a
   mostrar los textos, así que centrar el ícono dejaba la etiqueta encima de él. */
@media (min-width:768px){
  .sidebar-collapse .sidebar-menu > li > a{ margin:3px 6px !important; padding:12px 0 !important; text-align:center !important; }
  .sidebar-collapse .sidebar-menu > li > a > i:first-child{ width:100% !important; margin:0 !important; font-size:18px; text-align:center; }
  .sidebar-collapse .sidebar-menu > li:hover > a{ border-radius:12px; }
  .sidebar-collapse .main-header .logo .logo-mini{ display:inline-block; }
}

/* En móvil el menú se despliega completo: ícono y texto en una fila normal. */
@media (max-width:767px){
  .sidebar-collapse .sidebar-menu > li > a{ text-align:left !important; padding:11px 14px !important; margin:2px 6px !important; }
  .sidebar-collapse .sidebar-menu > li > a > i:first-child{ width:22px !important; margin-right:10px !important; text-align:center; }
  .sidebar-collapse .sidebar-menu > li > a > span{ display:inline !important; position:static !important; width:auto !important; }
}

/* ---------- OPCIÓN CON INTERRUPTOR ----------
   Bloque uniforme para los "activar" sueltos de los formularios (vender a granel,
   controla vencimiento…). Antes cada uno era un label suelto con distinto alto y
   alineación, y las pantallas de crear y editar no coincidían. */
.opt-box{
  display:flex; flex-direction:column; gap:4px;
  background:var(--glass-2); border:1px solid var(--hair);
  border-radius:var(--r-sm); padding:10px 12px; height:100%;
}
.opt-box > .opt-tit{
  font-size:var(--fs-xs); font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; margin:0;
}
.opt-box > .opt-sw{
  display:flex; align-items:center; gap:8px; margin:0;
  font-weight:600; color:var(--text); cursor:pointer; font-size:var(--fs-sm);
}
.opt-box > .opt-sw input{ margin:0; }
.opt-box > .opt-ayuda{ font-size:var(--fs-xs); color:var(--muted); line-height:1.3; margin:0; }
.opt-box.on{ border-color:var(--aqua); background:var(--aqua-soft); }

/* ---------- BOXES → tarjetas acrílicas ---------- */
.box,
.nav-tabs-custom,
.box.box-primary,.box.box-info,.box.box-success,.box.box-warning,.box.box-danger,.box.box-default{
  background:var(--glass) !important;
  backdrop-filter:blur(16px) saturate(1.35); -webkit-backdrop-filter:blur(16px) saturate(1.35);
  border:1px solid var(--glass-brd) !important;
  border-top:1px solid var(--glass-brd) !important;
  border-radius:var(--r) !important;
  box-shadow:var(--sh-md), inset 0 1px 0 var(--edge) !important;
  position:relative; overflow:hidden;
}
.box::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--sheen); opacity:.55; pointer-events:none; }
.box-header{ border-bottom:1px solid var(--hair) !important; position:relative; z-index:1; color:var(--strong) !important; }
.box-header .box-title{ font-weight:800; color:var(--strong) !important; }
.box-body,.box-footer{ position:relative; z-index:1; background:transparent !important; border-color:var(--hair) !important; }
.box.box-solid > .box-header{ background:transparent !important; color:var(--strong) !important; }
.info-box,.small-box{ border-radius:var(--r) !important; box-shadow:var(--sh-md) !important; overflow:hidden; }
.info-box .info-box-icon,.small-box > .icon{ opacity:.9; }
/* ---------- AVISOS (.alert / .callout) ----------
   Un solo formato para todo el sistema: capa translúcida sobre el fondo, borde
   fino y una barra de color a la izquierda. El color queda en el acento (barra,
   ícono, enlaces) y NO en el fondo: los .alert de Bootstrap traen tonos planos y
   saturados que en un panel lleno de datos gritan más que la información. */
.callout,.alert{
  border-radius:var(--r-sm) !important;
  background:var(--glass-2) !important;
  border:1px solid var(--hair) !important;
  border-left:3px solid var(--muted) !important;
  color:var(--text) !important;
  box-shadow:none !important;
}
.alert-warning{ background:var(--warn-soft) !important;    border-left-color:var(--warn) !important; }
.alert-danger { background:var(--danger-soft) !important;  border-left-color:var(--danger) !important; }
.alert-success{ background:var(--success-soft) !important; border-left-color:var(--success) !important; }
.alert-info   { background:var(--sky-soft) !important;     border-left-color:var(--sky) !important; }
.alert-light,.alert-secondary{ background:var(--glass-2) !important; border-left-color:var(--hair) !important; }

/* Los CALLOUT necesitan su propia vuelta.
   AdminLTE los pinta con `.callout.callout-info` —dos clases— y encima con
   !important: `background-color:#00c0ef` y `color:#fff`. Contra eso, la regla
   `.callout` de arriba pierde por especificidad, y el aviso salía celeste
   saturado con texto blanco en medio de una pantalla de datos.
   Se repiten los selectores con el mismo peso para empatarle, y como esta hoja
   carga después, gana. */
.callout.callout-warning{ background:var(--warn-soft) !important;    border-left-color:var(--warn) !important;    color:var(--text) !important; }
.callout.callout-danger { background:var(--danger-soft) !important;  border-left-color:var(--danger) !important;  color:var(--text) !important; }
.callout.callout-success{ background:var(--success-soft) !important; border-left-color:var(--success) !important; color:var(--text) !important; }
.callout.callout-info   { background:var(--sky-soft) !important;     border-left-color:var(--sky) !important;     color:var(--text) !important; }
/* El enlace de un callout venía en blanco y subrayado, para leerse sobre el
   fondo saturado. Sin ese fondo, quedaba invisible. */
.callout a{ color:var(--brand) !important; font-weight:700; text-decoration:none; }
.callout a:hover{ color:var(--brand-2) !important; }
.callout.callout-warning > i:first-child, .callout.callout-warning small > i:first-child{ color:var(--warn); }
.callout.callout-danger  > i:first-child, .callout.callout-danger  small > i:first-child{ color:var(--danger); }
.callout.callout-success > i:first-child, .callout.callout-success small > i:first-child{ color:var(--success); }
.callout.callout-info    > i:first-child, .callout.callout-info    small > i:first-child{ color:var(--sky); }

/* El color vive en el acento, no en el texto: así se lee igual en claro y oscuro.
   Solo el ícono del propio aviso: si la regla alcanza a los <i> de adentro, los
   íconos de los botones del aviso se tiñen y dejan de hacer juego con el botón. */
.alert-warning > i:first-child, .alert-warning > b > i:first-child{ color:var(--warn); }
.alert-danger  > i:first-child, .alert-danger  > b > i:first-child{ color:var(--danger); }
.alert-success > i:first-child, .alert-success > b > i:first-child{ color:var(--success); }
.alert-info    > i:first-child, .alert-info    > b > i:first-child{ color:var(--sky); }
/* Los botones mandan sobre su propio ícono, estén donde estén. */
.alert .btn > i{ color:inherit !important; }
.alert a{ color:var(--brand); font-weight:700; }
.alert a:hover{ color:var(--brand-2); }

/* Avisos cerrables: la ✕ va fija arriba a la derecha, no arrastrada por el texto. */
[data-alerta]{ position:relative; padding-right:34px !important; }
[data-alerta] .alerta-x{ position:absolute; top:6px; right:8px; float:none !important; }

/* Cierre: discreto, sin el negro duro de Bootstrap. */
.alert .close, .alert .alerta-x, [data-alerta] .alerta-x{
  color:var(--muted) !important; opacity:.65; text-shadow:none;
  background:none; border:0; cursor:pointer; font-size:1.15rem; line-height:1;
  padding:0 2px; margin-left:8px;
}
.alert .close:hover, .alert .alerta-x:hover{ opacity:1; color:var(--text) !important; }

/* Nota destacada dentro de una ficha (observación de una venta, referencia a otro
   documento…). Va con los tokens del tema: los .alert claros de Bootstrap traen
   el fondo blanco fijo y en modo oscuro quedan ilegibles. */
.nota{
  background:var(--brand-soft); color:var(--text);
  border:1px solid var(--hair); border-left:4px solid var(--brand);
  border-radius:var(--r-sm); padding:12px 14px; margin-bottom:1rem;
}
.nota-tit{
  display:block; color:var(--brand); font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; font-size:var(--fs-xs); margin-bottom:2px;
}
.nota a{ color:var(--brand); font-weight:700; text-decoration:underline; }
.nota a:hover{ color:var(--brand-2); }
.nota .nota-pie{ color:var(--muted); font-size:var(--fs-sm); }

/* ---------- BOTONES ---------- */
.btn{ border-radius:var(--r-sm) !important; font-weight:700; transition:transform .13s, filter .15s; border:0; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary,.btn-info{ background:linear-gradient(135deg,var(--aqua),var(--aqua2)) !important; color:#08302a !important; box-shadow:var(--sh-sm) !important; }
/* btn-success se usa como acción PRIMARIA (guardar/crear) → azul-morado de marca.
   El ÉXITO como feedback sigue verde: .alert-success / .badge-success / .text-success. */
.btn-success{ background:var(--brand) !important; color:var(--brand-ink) !important; box-shadow:var(--sh-sm) !important; }
.btn-success:hover, .btn-success:focus{ background:var(--brand-2) !important; color:var(--brand-ink) !important; }
.btn-danger{ background:linear-gradient(135deg,var(--danger),#EC8B84) !important; color:#fff !important; }
.btn-warning{ background:linear-gradient(135deg,var(--warn),var(--peach2)) !important; color:#3a2a08 !important; }
.btn-default{ background:var(--glass-2) !important; color:var(--text) !important; border:1px solid var(--glass-brd) !important; box-shadow:var(--sh-sm); }
.btn-default:hover{ color:var(--aqua) !important; }

/* ---------- TABLAS ---------- */
.table{ color:var(--text) !important; }
.table > thead > tr > th{ border-bottom:1px solid var(--hair) !important; border-top:0 !important; text-transform:uppercase; font-size:11px; letter-spacing:.04em; color:var(--muted) !important; font-weight:700; }
.table > tbody > tr > td{ border-top:1px solid var(--hair) !important; vertical-align:middle; color:var(--text) !important; }
.table-hover > tbody > tr:hover,.table > tbody > tr:hover{ background:var(--glass-2) !important; }
.table-striped > tbody > tr:nth-of-type(odd){ background:transparent !important; }

/* ---------- FORMULARIOS (mismo tema claro/oscuro) ---------- */
.form-control,.custom-select,select.form-control,textarea.form-control,input.form-control,
input[type="text"],input[type="number"],input[type="date"],input[type="email"],input[type="password"],input[type="search"],
.bootstrap-select > button.btn,.bootstrap-select .dropdown-toggle,.input-group-addon,.input-group-text{
  background:var(--field) !important; color:var(--text) !important;
  border:1px solid var(--field-brd) !important; border-radius:var(--r-sm) !important; box-shadow:var(--sh-sm) !important;
}
.form-control:hover,.custom-select:hover,select.form-control:hover,textarea.form-control:hover,
input[type="text"]:hover,input[type="number"]:hover,input[type="date"]:hover,input[type="email"]:hover,input[type="search"]:hover{
  border-color:var(--field-brd-hover) !important;
}
.form-control:focus,.custom-select:focus,.bootstrap-select > button.btn:focus,
input[type="text"]:focus,input[type="number"]:focus,input[type="date"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="search"]:focus{
  border-color:var(--aqua) !important; box-shadow:0 0 0 3px var(--aqua-soft) !important; outline:none !important;
}
.form-control::placeholder{ color:var(--muted) !important; }

/* Checkboxes y radios: acento del tema, tamaño y cursor. */
input[type="checkbox"],input[type="radio"]{
  accent-color:var(--aqua); width:16px; height:16px; cursor:pointer; vertical-align:-2px;
}
input[type="checkbox"]:focus,input[type="radio"]:focus{ outline:2px solid var(--aqua-soft); outline-offset:1px; }

/* ---------- Subir imagen: input file oculto + label como botón/dropzone temático ---------- */
.content-wrapper input[type="file"]#rutaFile{
  position:absolute !important; width:1px !important; height:1px !important; padding:0 !important;
  margin:-1px !important; overflow:hidden; clip:rect(0 0 0 0); border:0 !important; opacity:0;
}
.content-wrapper label[for="rutaFile"]{
  display:inline-flex !important; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  float:none !important; margin:2px 0; text-align:center; white-space:nowrap;
  background:var(--brand-soft); color:var(--brand) !important; border:1.5px dashed var(--brand);
  border-radius:var(--r-sm); padding:12px 24px; font-weight:700; line-height:1;
  transition:transform .12s, background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.content-wrapper label[for="rutaFile"]:hover{
  background:var(--brand) !important; color:var(--brand-ink) !important; border-style:solid; transform:translateY(-2px); box-shadow:var(--sh-sm);
}
.content-wrapper label[for="rutaFile"]:hover i{ color:var(--brand-ink) !important; }
.content-wrapper label[for="rutaFile"] i{ color:var(--brand) !important; font-size:1.15em; }
.content-wrapper label[for="rutaFile"] span{ font-size:1em !important; letter-spacing:.02em; }

/* Select nativo: flecha propia acorde al tema (gris medio visible en claro y oscuro). */
select.form-control,select.custom-select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c918e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat:no-repeat !important; background-position:right 12px center !important;
  background-size:12px !important; padding-right:34px !important;
}
select.form-control::-ms-expand{ display:none; }
.bootstrap-select .dropdown-menu,
.bs-container .dropdown-menu{ background:var(--glass-2) !important; backdrop-filter:blur(16px); border:1px solid var(--glass-brd) !important; border-radius:var(--r-sm) !important; }
.bootstrap-select .dropdown-menu li a,
.bs-container .dropdown-menu li a{ color:var(--text) !important; }
.bootstrap-select .dropdown-menu li a:hover,.bootstrap-select .dropdown-menu li.selected a,
.bs-container .dropdown-menu li a:hover,.bs-container .dropdown-menu li.selected a{ background:var(--aqua-soft) !important; color:var(--aqua) !important; }
/* Los selectores con data-container="body" cuelgan su lista de <body> (dentro de
   .bs-container) para que .box/.card, que llevan overflow:hidden, no la recorten.
   Ahí ya no la alcanzan las reglas de .bootstrap-select, así que se repiten, y
   sube por encima de los paneles flotantes de la aplicación. */
.bs-container{ z-index:3100; }
.bs-container .dropdown-menu{ z-index:3100 !important; box-shadow:var(--sh-lg) !important; }
label{ color:var(--muted) !important; }

/* ---------- CHIPS / labels ---------- */
.label,.badge{ border-radius:20px !important; font-weight:800; padding:4px 11px !important; font-size:11px; }
.label-success,.badge-success{ background:var(--success-soft) !important; color:var(--success) !important; }
.label-warning,.badge-warning{ background:var(--warn-soft) !important; color:var(--warn) !important; }
.label-danger,.badge-danger{ background:var(--danger-soft) !important; color:var(--danger) !important; }
.label-info,.badge-info,.label-primary,.badge-primary{ background:var(--sky-soft) !important; color:var(--sky) !important; }

/* ---------- misc ---------- */
.pagination{ display:flex !important; flex-wrap:wrap; gap:6px; align-items:center; }
.pagination svg{ width:16px !important; height:16px !important; }   /* respaldo: limita SVG gigantes */
.pagination > li > a,.pagination > li > span,.pagination .page-link{
  color:var(--text) !important; border:1px solid var(--hair) !important; background:var(--glass-2) !important;
  border-radius:10px !important; margin:0 !important; padding:8px 14px !important; box-shadow:var(--sh-sm);
}
.pagination .page-link:hover{ color:var(--aqua) !important; border-color:var(--aqua) !important; }
.pagination > .active > a,.pagination > .active > span,.pagination .page-item.active .page-link{
  background:linear-gradient(135deg,var(--aqua),var(--aqua2)) !important; border-color:transparent !important; color:#08302a !important;
}
.pagination .page-item.disabled .page-link{ opacity:.5; }
.modal-content{ background:var(--glass-2) !important; backdrop-filter:blur(20px); border:1px solid var(--glass-brd) !important; border-radius:var(--r) !important; color:var(--text) !important; }
.modal-header,.modal-footer{ border-color:var(--hair) !important; }
.dropdown-menu{ background:var(--glass-2) !important; backdrop-filter:blur(18px); border:1px solid var(--glass-brd) !important; border-radius:var(--r-sm) !important; box-shadow:var(--sh-lg) !important; }
.dropdown-item,.dropdown-menu a,.dropdown-menu p{ color:var(--text) !important; }
.dropdown-menu .text-muted{ color:var(--muted) !important; }
hr,.hr{ border-color:var(--hair) !important; }
.text-muted{ color:var(--muted) !important; }
#themeToggle{ cursor:pointer; }

/* ---------- Miga de pan (breadcrumb) ---------- */
/* Miga de pan discreta: sin contenedor, pequeña y tenue. */
.breadcrumb,.breadcrumb.bg-white{
  background:transparent !important; border:0 !important;
  box-shadow:none !important; padding:2px 0 !important; margin-bottom:2px !important;
  font-size:.78em; opacity:.65;
}
/* Buscador del header sin margen inferior para alinear en una línea. */
.header-tools .form-group{ margin-bottom:0 !important; }
.header-tools form{ margin-bottom:0 !important; }

/* Menú de exportación desplegable (custom). */
.export-menu{ position:relative; display:inline-block; }
/* El panel se mueve a <body> al abrirlo (ver admin.blade.php): .box tiene
   overflow:hidden y backdrop-filter, y cualquiera de los dos por separado lo
   recortaba o le cambiaba el marco de referencia. El JS le fija posición y
   coordenadas; aquí solo va la apariencia. */
.export-panel{
  z-index:3000; min-width:236px; max-height:calc(100vh - 24px); overflow-y:auto;
  background:var(--glass-2) !important; border:1px solid var(--glass-brd) !important;
  border-radius:var(--r-sm) !important; box-shadow:0 12px 34px rgba(0,0,0,.28) !important;
  padding:12px; display:none;
}
.export-lbl{ font-size:.72em; text-transform:uppercase; letter-spacing:.04em; color:var(--muted) !important; margin-bottom:8px; display:block; font-weight:700; }
.export-mini{ font-size:.72em; color:var(--muted) !important; margin-bottom:2px; display:block; }
.breadcrumb .breadcrumb-item a{ color:var(--aqua) !important; font-weight:600; }
.breadcrumb .breadcrumb-item.active{ color:var(--muted) !important; }
.breadcrumb-item + .breadcrumb-item::before{ color:var(--muted) !important; }

/* ---------- Cabecera de tabla (venta / ingreso): redondeada + temática ---------- */
.table > thead,.table thead[style]{ background:transparent !important; }
.table > thead > tr > th{
  background:var(--aqua-soft) !important; color:var(--aqua) !important;
  border:0 !important; border-bottom:1px solid var(--hair) !important; padding:11px 14px !important;
}
.table > thead > tr > th:first-child{ border-top-left-radius:var(--r-sm) !important; border-bottom-left-radius:var(--r-sm) !important; }
.table > thead > tr > th:last-child{ border-top-right-radius:var(--r-sm) !important; border-bottom-right-radius:var(--r-sm) !important; }

/* ---------- Footer acorde al tema ---------- */
.main-footer{
  background:var(--glass) !important; color:var(--muted) !important;
  border-top:1px solid var(--hair) !important; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.main-footer a,.main-footer b,.main-footer strong{ color:var(--aqua) !important; }

/* ---------- Recuadro de perfil / fondos claros heredados ---------- */
.main-sidebar .bg-gray-light,.main-sidebar a.bg-gray-light{
  background:rgba(255,255,255,.06) !important; border-radius:var(--r-sm) !important; padding:8px !important; display:block;
}
.content-wrapper .bg-white{ background:var(--glass-2) !important; color:var(--text) !important; }

/* ---------- Bootstrap .card (resumen de compra, perfil empresa, etc.) ---------- */
.card{
  background:var(--glass) !important; color:var(--text) !important;
  backdrop-filter:blur(16px) saturate(1.35); -webkit-backdrop-filter:blur(16px) saturate(1.35);
  border:1px solid var(--glass-brd) !important; border-radius:var(--r) !important;
  box-shadow:var(--sh-md), inset 0 1px 0 var(--edge) !important; overflow:hidden;
}
.card-header{ background:transparent !important; border-bottom:1px solid var(--hair) !important; color:var(--strong) !important; font-weight:700; }
.card-body,.card-footer{ background:transparent !important; border-color:var(--hair) !important; }
.card-title{ color:var(--strong) !important; }

/* bordes de tablas "table-bordered" (rejilla blanca en oscuro) */
.table-bordered,
.table-bordered > tbody > tr > td,.table-bordered > tbody > tr > th,
.table-bordered > thead > tr > td,.table-bordered > thead > tr > th{ border-color:var(--hair) !important; }

/* ---------- Menú PLEGADO: flyout como UNA sola pieza ---------- */
/* Solo en escritorio: en móvil no hay menú plegado que desplegar al pasar el mouse. */
@media (min-width:768px){
/* prefijo body.sidebar-mini.sidebar-collapse para GANARLE en especificidad a AdminLTE */
/* el <a> estático → el título (span) se posiciona relativo al <li>, IGUAL que el submenú */
body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a{ position:static !important; background:rgba(255,255,255,.12) !important; color:#fff !important; }
body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a i{ color:#fff !important; }
/* cabecera (título) y cuerpo (submenú): MISMA posición, ancho y borde → una pieza */
body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span,
body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu{
  left:100% !important; width:210px !important; min-width:210px !important; margin:0 !important;
  box-sizing:border-box !important; background:#0F2422 !important; box-shadow:var(--sh-lg) !important;
  border-left:1px solid rgba(255,255,255,.06) !important; border-right:1px solid rgba(255,255,255,.06) !important;
}
body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span{
  top:0 !important; height:46px !important; line-height:22px !important; padding:12px 18px !important;
  color:#fff !important; font-weight:700 !important;
  border-top:1px solid rgba(255,255,255,.06) !important; border-radius:0 var(--r-sm) 0 0 !important;
}
body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu{
  top:46px !important; padding:6px !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important; border-radius:0 0 var(--r-sm) 0 !important;
}
:root[data-theme="dark"] body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span,
:root[data-theme="dark"] body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu{ background:#0A1817 !important; }
body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu > li > a{ color:var(--side-txt) !important; }
body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu > li > a:hover{ background:rgba(255,255,255,.1) !important; color:#fff !important; }
}   /* fin @media (min-width:768px) del flyout */

/* ---------- Items de menús desplegables (menú de usuario, selects) ---------- */
.dropdown-menu{ padding:6px !important; }
.dropdown-menu > li > a,
.dropdown-menu .dropdown-item{
  border-radius:10px !important; margin:3px 6px !important; padding:9px 12px !important; width:auto !important;
  color:var(--text) !important; transition:.14s;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu > li.active > a,
.dropdown-menu .dropdown-item.active{
  background:var(--aqua-soft) !important; color:var(--aqua) !important;   /* hover legible (no blanco sobre blanco) */
}
.dropdown-menu > li > a:hover i,
.dropdown-menu .dropdown-item:hover i{ color:var(--aqua) !important; }

/* reserva el ancho de la barra de scroll → el header no se corre al abrir menús/modales */
html{ scrollbar-gutter:stable; }

/* ---------- "admin" (menú de usuario del header): margen, redondeo y hover ---------- */
.navbar-custom-menu{ padding-right:10px !important; }
.main-header .navbar-nav > li > a,
.skin-black-light .main-header .navbar .nav > li > a,
.navbar-custom-menu .nav > li > a{
  border-radius:12px !important; margin:6px 0 !important; padding:8px 14px !important; background:transparent !important;
}
.main-header .navbar-nav > li.open > a,
.main-header .navbar-nav > li > a:hover,
.main-header .navbar-nav > li > a:focus,
.skin-black-light .main-header .navbar .nav > li.open > a,
.skin-black-light .main-header .navbar .nav > li > a:hover,
.navbar-custom-menu .nav > li.open > a,
.navbar-custom-menu .nav > li > a:hover{ background:var(--aqua-soft) !important; }
.main-header .navbar-nav > li.open > a .hidden-xs,
.main-header .navbar-nav > li > a:hover .hidden-xs,
.navbar-custom-menu .nav > li.open > a .hidden-xs{ color:var(--aqua) !important; }

/* ---------- Espacio entre inputs/iconos agrupados (fechas, buscar, etc.) ---------- */
.input-group{ display:flex !important; align-items:center; flex-wrap:wrap; }
.input-group > *{ margin-right:8px !important; margin-left:0 !important; float:none !important; }
.input-group > *:last-child{ margin-right:0 !important; }
/* el <span class="input-group-addon"> es solo envoltorio: lo hacemos invisible y dejamos el ícono interno como pastilla */
.input-group-addon{ background:transparent !important; border:0 !important; padding:0 !important; width:auto !important; }
.input-group-addon:empty{ display:none !important; }
.input-group .form-control,
.input-group .btn,
.input-group-addon > .btn,
.input-group-addon > .form-control{ border-radius:var(--r-sm) !important; }

/* ---------- Menú de usuario (admin): show/hide simple, sin Popper/MDB (no salta) ---------- */
.navbar-custom-menu .dropdown-menu{ display:none !important; }
.navbar-custom-menu .dropdown-menu.show-menu{
  display:block !important; position:absolute !important; top:100% !important; right:0 !important; left:auto !important;
  transform:none !important; margin-top:8px !important;
}

/* ---------- Botón de usuario "admin": ancho/padding propios (no es un ícono cuadrado) ---------- */
.navbar-custom-menu button[data-toggle="dropdown"]{
  width:auto !important; height:auto !important; padding:8px 12px !important;
  border-radius:12px !important; margin:6px 0 !important;
}
.navbar-custom-menu button[data-toggle="dropdown"] span{ margin:0 8px !important; padding:0 !important; }

/* ---------- Sección/página activa: recuerda dónde estás ---------- */
.sidebar-menu > li.active > a > i:first-child,
.sidebar-menu > li.menu-open > a > i:first-child{ color:var(--aqua) !important; opacity:1 !important; }
.sidebar-menu .treeview-menu > li.active > a{ background:rgba(255,255,255,.1) !important; color:#fff !important; font-weight:600; }
.sidebar-menu .treeview-menu > li.active > a i{ color:var(--aqua) !important; }

/* ---------- Visor (lightbox) de imágenes de producto ---------- */
#imgLightbox{ position:fixed; inset:0; background:rgba(6,14,12,.8); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  z-index:9999; display:none; place-items:center; padding:28px; cursor:zoom-out; }
#imgLightbox.open{ display:grid; }
#imgLightbox img{ max-width:90vw; max-height:90vh; border-radius:18px; box-shadow:var(--sh-lg); border:4px solid var(--glass-2); }
img.img-thumbnail{ cursor:zoom-in; transition:transform .13s; border-radius:10px !important; background:var(--glass-2) !important; border:1px solid var(--hair) !important; padding:2px !important; }
img.img-thumbnail:hover{ transform:scale(1.1); }

/* ---------- Cabeceras con <th> directo en <thead> (sin <tr>) + enlaces de orden ---------- */
.table > thead > th{
  background:var(--aqua-soft) !important; color:var(--aqua) !important; border:0 !important;
  border-bottom:1px solid var(--hair) !important; text-transform:uppercase; font-size:10.5px;
  letter-spacing:.05em; font-weight:700; padding:11px 14px !important; text-align:left; white-space:nowrap;
}
.table > thead > th:first-child{ border-top-left-radius:var(--r-sm) !important; border-bottom-left-radius:var(--r-sm) !important; }
.table > thead > th:last-child{ border-top-right-radius:var(--r-sm) !important; border-bottom-right-radius:var(--r-sm) !important; }
.table thead a{ cursor:pointer !important; color:inherit !important; text-decoration:none !important; }
.table thead a:hover{ color:var(--strong) !important; }
.table thead a i{ margin-left:4px; font-size:11px; }

/* SweetAlert temático (mismo lenguaje visual: acrílico + acento aqua). */
.swal2-container{ z-index:20050 !important; }
.swal2-container.swal2-backdrop-show{ background:rgba(10,20,18,.5) !important; backdrop-filter:blur(2px); }
.swal2-popup.pos-swal{
  background:var(--glass-2) !important; color:var(--text) !important;
  border:1px solid var(--glass-brd) !important; border-radius:var(--r) !important;
  box-shadow:var(--sh-lg) !important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.swal2-popup.pos-swal .swal2-title{ color:var(--strong) !important; font-weight:700; }
.swal2-popup.pos-swal .swal2-html-container{ color:var(--text) !important; }
.swal2-popup.pos-swal .swal2-actions{ gap:8px; }

/* Avisos largos: que quepan en pantallas bajas.
   El popup se limita a la ventana y hace scroll completo. Se probó dejar fijos
   el campo y los botones, pero como son hermanos del texto —no van dentro de un
   contenedor propio— la barra de botones se montaba encima del input. Con el
   scroll normal el orden se respeta: bajando se llega al campo y, debajo, a los
   botones. */
.swal2-popup.pos-swal{
  max-height:92vh; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
}
/* El ícono ocupa mucho alto y en pantallas bajas es lo primero que sobra. */
@media (max-height:700px){
  .swal2-popup.pos-swal .swal2-icon{ width:3em; height:3em; margin:.6em auto .4em; }
  .swal2-popup.pos-swal .swal2-icon .swal2-icon-content{ font-size:1.9em; }
  .swal2-popup.pos-swal .swal2-title{ font-size:1.35em; padding:.4em 1em 0; }
}

/* Campos dentro del modal.
   Van estilados acá y NO con la clase .form-control de Bootstrap: el input es
   hermano del texto, no hijo, así que un width:100% se mide contra el popup
   completo y el campo sobresalía de la columna de texto. */
.swal2-popup.pos-swal .swal2-input,
.swal2-popup.pos-swal .swal2-textarea,
.swal2-popup.pos-swal .swal2-select{
  box-sizing:border-box;
  width:calc(100% - 2.4em); margin:.4em 1.2em .8em;
  background:var(--field) !important; color:var(--text) !important;
  border:1px solid var(--field-brd) !important; border-radius:var(--r-sm) !important;
  box-shadow:none !important; font-size:1em; height:auto; padding:.55em .75em;
}
.swal2-popup.pos-swal .swal2-input:focus,
.swal2-popup.pos-swal .swal2-textarea:focus,
.swal2-popup.pos-swal .swal2-select:focus{
  border-color:var(--field-brd-hover) !important; outline:none;
}
.swal2-popup.pos-swal .swal2-input::placeholder{ color:var(--muted); opacity:.75; }
.swal2-popup.pos-swal .swal2-validation-message{
  background:var(--danger-soft) !important; color:var(--danger) !important;
  border-radius:var(--r-sm); margin:0 1.2em .6em;
}
.swal2-popup.pos-swal .swal2-icon.swal2-error{ border-color:var(--danger) !important; color:var(--danger) !important; }
.swal2-popup.pos-swal .swal2-icon.swal2-error [class^='swal2-x-mark-line']{ background-color:var(--danger) !important; }
.swal2-popup.pos-swal .swal2-icon.swal2-success{ border-color:var(--success) !important; }
.swal2-popup.pos-swal .swal2-icon.swal2-success .swal2-success-ring{ border-color:var(--success-soft) !important; }
.swal2-popup.pos-swal .swal2-icon.swal2-success [class^='swal2-success-line']{ background-color:var(--success) !important; }
.swal2-popup.pos-swal .swal2-icon.swal2-warning{ border-color:var(--warn) !important; color:var(--warn) !important; }
.swal2-popup.pos-swal .swal2-icon.swal2-info,
.swal2-popup.pos-swal .swal2-icon.swal2-question{ border-color:var(--aqua) !important; color:var(--aqua) !important; }

/* Toast (aviso breve esquina superior). Hereda el vidrio del tema. */
.swal2-popup.pos-toast{
  background:var(--glass-2) !important; color:var(--text) !important;
  border:1px solid var(--glass-brd) !important; border-radius:var(--r-sm) !important;
  box-shadow:var(--sh-md) !important; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.swal2-popup.pos-toast .swal2-title{ color:var(--strong) !important; font-weight:600; font-size:.95rem; }
.swal2-popup.pos-toast .swal2-timer-progress-bar{ background:var(--brand-soft) !important; }
.swal2-popup.pos-toast .swal2-icon.swal2-success{ border-color:var(--success) !important; }
.swal2-popup.pos-toast .swal2-icon.swal2-success .swal2-success-ring{ border-color:var(--success-soft) !important; }
.swal2-popup.pos-toast .swal2-icon.swal2-success [class^='swal2-success-line']{ background-color:var(--success) !important; }
.swal2-popup.pos-toast .swal2-icon.swal2-error{ border-color:var(--danger) !important; color:var(--danger) !important; }
.swal2-popup.pos-toast .swal2-icon.swal2-error [class^='swal2-x-mark-line']{ background-color:var(--danger) !important; }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* ============================================================================
   ACCIONES DE TABLA — auditoría UI (separación + azul-morado uniforme)
   Menú desplegable "Acciones" cuando hay más de dos opciones por fila, para no
   amontonar iconos de colores. Un solo botón de marca; el menú lista acciones
   con icono + texto; lo destructivo va en rojo, separado por un divisor.
   ============================================================================ */
.acciones{ display:inline-flex; align-items:center; gap:var(--sp-2); }

/* Botones de acción sueltos (listas de 1–2 acciones): mismo azul-morado */
.btn-accion{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-width:34px; min-height:34px; padding:6px 10px; border-radius:var(--r-sm);
  background:var(--brand-soft) !important; color:var(--brand) !important;
  border:1px solid transparent !important; font-size:.85rem; font-weight:600; box-shadow:none !important;
}
.btn-accion:hover{ background:var(--brand) !important; color:var(--brand-ink) !important; }
.btn-accion.is-danger{ background:var(--danger-soft) !important; color:var(--danger) !important; }
.btn-accion.is-danger:hover{ background:var(--danger) !important; color:#fff !important; }

/* Disparador del menú "Acciones" — compacto (kebab, sin caret) */
.btn-acciones{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; min-height:34px; padding:6px 9px; border-radius:var(--r-sm);
  font-size:.9rem; line-height:1;
  background:var(--brand-soft) !important; color:var(--brand) !important;
  border:1px solid transparent !important; box-shadow:none !important;
}
.btn-acciones:hover, .btn-acciones[data-open], .menu-acciones[data-open] + .btn-acciones{
  background:var(--brand) !important; color:var(--brand-ink) !important;
}
.btn-acciones::after, .btn-acciones.dropdown-toggle::after{ display:none !important; }  /* sin caret: es kebab */

/* Menú temático (claro/oscuro). El display/position lo fija el JS inline. */
.menu-acciones{
  float:none; margin:0; min-width:190px;
  background:var(--glass-2, #fff) !important; border:1px solid var(--hair) !important;
  border-radius:var(--r-sm) !important; box-shadow:var(--sh-md) !important;
  padding:var(--sp-1) 0 !important;
}
.menu-acciones form{ margin:0; }
.menu-acciones .dropdown-item{
  display:flex; align-items:center; gap:var(--sp-2); width:100%; text-align:left;
  padding:8px var(--sp-3) !important; font-size:.9rem; color:var(--text) !important;
  background:none !important; border:0 !important; cursor:pointer;
}
.menu-acciones .dropdown-item i{ width:18px; text-align:center; color:var(--muted); }
.menu-acciones .dropdown-item:hover{ background:var(--brand-soft) !important; color:var(--brand) !important; }
.menu-acciones .dropdown-item:hover i{ color:var(--brand); }
.menu-acciones .dropdown-item.text-danger{ color:var(--danger) !important; }
.menu-acciones .dropdown-item.text-danger i{ color:var(--danger); }
.menu-acciones .dropdown-item.text-danger:hover{ background:var(--danger-soft) !important; }
.menu-acciones .dropdown-divider{ border-top:1px solid var(--hair); margin:var(--sp-1) 0; }

/* Botón PRIMARIO de marca (crear / acción principal): azul-morado uniforme.
   Los mensajes de éxito siguen en verde (.alert-success / .badge-success). */
.btn-brand{
  background:var(--brand) !important; color:var(--brand-ink) !important;
  border:1px solid var(--brand) !important; border-radius:var(--r-sm) !important;
  font-weight:600; box-shadow:var(--sh-sm) !important;
}
.btn-brand:hover, .btn-brand:focus{ background:var(--brand-2) !important; border-color:var(--brand-2) !important; color:var(--brand-ink) !important; }

/* ---------- SWITCHES (configuración) ----------
   El verde de css.css (#89c12d) se apagaba contra el fondo oscuro: quedaba un
   tono apenas distinto del track apagado y no se leía si estaba encendido.
   Naranja de la paleta, que tiene su propio valor en cada tema, y con degradado
   igual que los botones para que se note el estado de un vistazo. */
.switch-input:checked + .switch-label::before{
  background-color:var(--peach) !important;
  background-image:linear-gradient(135deg,var(--warn),var(--peach));
}
/* El track apagado también seguía tokens fijos y se perdía en oscuro. */
.switch-label::before{ background-color:var(--field-brd) !important; }
.switch-label::after{
  background-color:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
/* Foco visible al llegar con el teclado: el input real está oculto (display:none
   en css.css), así que el anillo tiene que pintarlo la etiqueta. */
.switch-input:focus-visible + .switch-label::before{ outline:2px solid var(--brand); outline-offset:2px; }