/* ================================================================
   STOLIA · Design System v1.0
   The Architecture of Business
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */
:root {
  /* --- Brand Colors --- */
  --stolia-navy:          #0D1117;
  --stolia-surface-dark:  #1B2430;
  --stolia-teal:          #00C2B2;
  --stolia-teal-light:    #7DE9E1;

  /* --- Accent Colors --- */
  --stolia-blue:          #1677FF;
  --stolia-orange:        #FFB020;
  --stolia-red:           #FF4D4F;
  --stolia-purple:        #7C4DFF;
  --stolia-green:         #22C55E;

  /* --- Neutrals --- */
  --gray-50:  #F9FAFB;
  --gray-100: #F2F4F7;
  --gray-150: #ECEEF2;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* --- Semantic (Light Mode default) --- */
  --color-primary:        var(--stolia-teal);
  --color-primary-hover:  #00A89A;
  --color-primary-subtle: rgba(0, 194, 178, 0.10);
  --color-accent:         var(--stolia-teal);

  --color-bg:             #F7F8FA;
  --color-surface:        #FFFFFF;
  --color-surface-alt:    var(--gray-50);
  --color-text:           var(--gray-900);
  --color-text-muted:     var(--gray-500);
  --color-text-subtle:    var(--gray-400);
  --color-border:         var(--gray-200);
  --color-border-strong:  var(--gray-300);
  --color-divider:        var(--gray-150);

  --color-sidebar-bg:           var(--stolia-navy);
  --color-sidebar-bg-gradient:  linear-gradient(180deg, #0D1117 0%, #131A24 100%);
  --color-sidebar-text:         rgba(255, 255, 255, 0.65);
  --color-sidebar-text-hover:   #FFFFFF;
  --color-sidebar-active-bg:    var(--stolia-blue);
  --color-sidebar-active-text:  #FFFFFF;
  --color-sidebar-divider:      rgba(255, 255, 255, 0.08);

  /* Status colors */
  --status-success-bg:   #E8F8EF;
  --status-success-text: #0A8B47;
  --status-warning-bg:   #FFF6E5;
  --status-warning-text: #B97500;
  --status-danger-bg:    #FFEBEC;
  --status-danger-text:  #D43439;
  --status-info-bg:      #E8F1FF;
  --status-info-text:    #0F5FD9;
  --status-neutral-bg:   var(--gray-100);
  --status-neutral-text: var(--gray-600);

  /* --- Spacing --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Radius --- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* --- Shadow --- */
  --shadow-xs:  0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sm:  0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md:  0 4px 8px -2px rgba(16, 24, 40, 0.06), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
  --shadow-lg:  0 12px 24px -4px rgba(16, 24, 40, 0.08), 0 4px 8px -2px rgba(16, 24, 40, 0.04);
  --shadow-focus: 0 0 0 3px rgba(22, 119, 255, 0.18);

  /* --- Typography --- */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;
  --text-4xl:  34px;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* --- Layout --- */
  --sidebar-width:  240px;
  --topbar-height:  72px;
  --content-max:    1600px;

  /* --- Transitions --- */
  --transition-fast:  120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:  200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Z-index --- */
  --z-sidebar:    50;
  --z-topbar:     40;
  --z-dropdown:   60;
  --z-modal:      100;
  --z-toast:      200;
}

/* --- Dark Mode --- */
[data-theme="dark"] {
  --color-bg:             var(--stolia-navy);
  --color-surface:        var(--stolia-surface-dark);
  --color-surface-alt:    #232C39;
  --color-text:           #F2F4F7;
  --color-text-muted:     rgba(242, 244, 247, 0.65);
  --color-text-subtle:    rgba(242, 244, 247, 0.45);
  --color-border:         rgba(255, 255, 255, 0.08);
  --color-border-strong:  rgba(255, 255, 255, 0.14);
  --color-divider:        rgba(255, 255, 255, 0.06);

  --status-success-bg:   rgba(34, 197, 94, 0.15);
  --status-warning-bg:   rgba(255, 176, 32, 0.15);
  --status-danger-bg:    rgba(255, 77, 79, 0.15);
  --status-info-bg:      rgba(22, 119, 255, 0.15);
  --status-neutral-bg:   rgba(255, 255, 255, 0.08);
  --status-neutral-text: rgba(242, 244, 247, 0.7);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.5);
}

/* ================================================================
   2. RESET & BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss03";
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
}

p { margin: 0; }

/* ================================================================
   3. LAYOUT
   ================================================================ */
.stolia-app {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

.stolia-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-bg);
  /* Sprint C2.5 BUG #8: overflow-x:hidden creaba scroll-context que rompía
     el sticky de .topbar (Chrome/Firefox tratan overflow-x:hidden como
     overflow-y:auto a efectos de sticky). overflow:clip NO crea
     formatting/scroll context → sticky vuelve a funcionar manteniendo el
     comportamiento de "ocultar overflow horizontal". */
  overflow-x: clip;
}

.stolia-content {
  flex: 1;
  padding: var(--space-4) var(--space-8) var(--space-6);  /* 16px top, 24px sides+bottom — minimiza espacio vacío bajo topbar */
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
}

/* ================================================================
   4. SIDEBAR
   ================================================================ */
.sidebar {
  background: var(--color-sidebar-bg-gradient);
  color: var(--color-sidebar-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: var(--z-sidebar);
  padding: var(--space-5) 0;
  /* En CSS Grid el item se estira por defecto (align-self: stretch) y eso
     rompe `position: sticky`. Forzamos `start` para que el sticky funcione
     y la barra (logo + menu) no se mueva al hacer scroll vertical. */
  align-self: start;
  /* Si el viewport es mas bajo que el contenido (logo + N modulos +
     ajustes), permitimos scroll interno en la sidebar para que ningun
     item quede fuera de alcance. */
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar__logo {
  padding: 0 var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sidebar__logo-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  object-fit: contain;
}

.sidebar__logo-text {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  letter-spacing: -0.02em;
}

.sidebar__nav {
  padding: 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.sidebar__label {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.30);
  padding: var(--space-3) var(--space-3) var(--space-1);
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
}

.sidebar__item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.90);
  text-decoration: none;
}

.sidebar__item.is-active {
  background: rgba(0, 194, 178, 0.12);
  color: var(--stolia-teal);
  font-weight: var(--weight-medium);
}

.sidebar__item.is-active::before {
  display: none;
}

.sidebar__item-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke-width: 1.8;
  opacity: 0.75;
}

.sidebar__item:hover .sidebar__item-icon { opacity: 0.95; }
.sidebar__item.is-active .sidebar__item-icon { opacity: 1; }

/* Badge configurable NUEVO/PRONTO en módulos del sidebar
   (configurado en Sections::manifest()['<modulo>']['badge']) */
.sidebar__badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 10px;
  line-height: 1.4;
}
.sidebar__badge--info {
  background: rgba(0,194,178,0.20);
  color: #00C2B2;
}
.sidebar__badge--success {
  background: rgba(34,197,94,0.20);
  color: #22C55E;
}
.sidebar__badge--warning {
  background: rgba(255,176,32,0.22);
  color: #FFB020;
}
.sidebar__badge--neutral {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
}

.sidebar__subnav {
  padding: 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  overflow-y: auto;
  flex-shrink: 1;
}

/* Bootstrap Icons dentro de sidebar__item */
.sidebar__item i.sidebar__item-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  font-size: 15px;
  line-height: 18px;
  opacity: 0.75;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar__item:hover i.sidebar__item-icon { opacity: 0.95; }
.sidebar__item.is-active i.sidebar__item-icon { opacity: 1; }

.sidebar__nav {
  flex-shrink: 0;
}

.sidebar__footer {
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: 1px solid var(--color-sidebar-divider);
  margin-top: auto;
  flex-shrink: 0;
}
.sidebar__footer .sidebar__label {
  margin-top: var(--space-1);
}
.sidebar__item--logout {
  font: inherit;
  color: var(--color-sidebar-text);
}
.sidebar__item--logout:hover {
  color: var(--color-sidebar-text-hover);
}

/* ================================================================
   5. TOPBAR
   ================================================================ */
/* Topbar v3 · 2 filas (contexto + tabs).
   Fila 1 (56px): módulo › subsección + theme + user-chip.
   Fila 2 (48px): tabs subrayado + CTA contextual a la derecha (opcional, solo si hay tabs).
*/
:root { --topbar-height: 56px; --topbar-row2-height: 48px; }

.topbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: flex;
  flex-direction: column;
}

.topbar__row {
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
  gap: var(--space-5);
}
.topbar__row--top {
  height: var(--topbar-height);
  justify-content: space-between;
}
.topbar__row--bottom {
  height: var(--topbar-row2-height);
  justify-content: space-between;
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface);
}

/* ── Fila 1: contexto módulo › subsección ── */
.topbar__context {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--text-base);
}
.topbar__module {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.topbar__module-icon {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
  flex-shrink: 0;
  stroke-width: 2;
}
.topbar__module-name {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  white-space: nowrap;
}
.topbar__module-name--muted { color: var(--color-text-muted); font-weight: var(--weight-regular, 400); }
.topbar__sep {
  color: var(--color-text-subtle);
  font-size: var(--text-base);
  flex-shrink: 0;
}
.topbar__section {
  color: var(--color-text-muted);
  font-weight: var(--weight-regular, 400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Botón de acción rápida configurable del usuario en el topbar fila 1 */
.topbar__quick-action {
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: var(--weight-semibold) !important;
}
.topbar__quick-action svg { width: 14px; height: 14px; }
.topbar__quick-action-config { color: var(--color-text-subtle); }
.topbar__quick-action-config:hover { color: var(--color-primary); background: var(--color-primary-subtle); }

/* ── Fila 2: tabs + CTA contextual ── */
.topbar__tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  height: 100%;
}
.topbar__tabs::-webkit-scrollbar { display: none; }

.topbar__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 14px;
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.005em;
  transition: color var(--transition-fast);
}
.topbar__tab::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms cubic-bezier(.4,.2,.2,1);
}
.topbar__tab:hover {
  color: var(--color-text);
  text-decoration: none;
}
.topbar__tab.is-active {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}
.topbar__tab.is-active::after { transform: scaleX(1); }
.topbar__tab.is-disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

/* CTA contextual a la derecha de los tabs (+ Nueva factura, etc.).
   Gap consistente entre extras (Descargar) y la primaria (+ Nueva factura). */
.topbar__cta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.topbar__cta:empty { display: none; }

/* Legacy: title-block sigue usándose en alguna vista antigua */
.topbar__title { min-width: 0; }
.topbar__title h1 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0;
}
.topbar__title p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Topbar search/notif/help eliminados del topbar v3 (eran huérfanos). Si vuelven en sprint
   futuro, reactivar con su CSS dedicado. */

.topbar__search input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.topbar__search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-text-subtle);
  pointer-events: none;
}

.topbar__kbd {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  pointer-events: none;
}

.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  position: relative;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.icon-btn:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.icon-btn svg { width: 18px; height: 18px; }

.icon-btn .badge-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--stolia-blue);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-surface);
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
  text-decoration: none !important;
  color: inherit !important;
}

.user-chip:hover { background: var(--color-surface-alt); text-decoration: none !important; color: inherit !important; }

.user-chip__avatar {
  width: 28px;
  height: 28px;
  font-size: 12px;
  border-radius: var(--radius-full);
  background: var(--gray-200);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-semibold);
  color: var(--gray-700);
}

.user-chip__info { line-height: 1.2; }
.user-chip__name { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text); }
.user-chip__role { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ================================================================
   6. PAGE HEADER & TABS
   ================================================================ */
/* Page header · estilo Stolia adaptado a Stolia.
   Container blanco con barra accent lateral 4px en color de marca,
   H1 del módulo + icono inline (mismo color), Volver/acciones a la derecha. */
.page-header {
  background: var(--color-surface, #fff);
  border-radius: var(--radius-md);
  padding: 14px 22px;
  margin-bottom: var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--stolia-teal, #00C2B2);
}
.page-header h1,
.page-header .h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--stolia-teal, #00C2B2);
  margin: 0;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}
.page-header h1 i,
.page-header h1 i.bi,
.page-header .h1 i {
  font-family: 'bootstrap-icons' !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 1.4rem;
  color: var(--stolia-teal, #00C2B2);
  line-height: 1;
}
[data-theme="dark"] .page-header {
  background: var(--color-surface);
  border-left-color: var(--stolia-teal);
}
[data-theme="dark"] .page-header h1,
[data-theme="dark"] .page-header h1 i { color: var(--stolia-teal); }

.tabs {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
  position: relative;
}

.tabs__item {
  padding: var(--space-3) 0;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: color var(--transition-fast);
}

.tabs__item:hover { color: var(--color-text); }

.tabs__item.is-active {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.tabs__item.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px 2px 0 0;
}

.tabs__action {
  margin-left: auto;
}

/* ================================================================
   7. BUTTONS
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  height: 40px;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}

.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--stolia-blue, #1677FF) !important;
  border: none !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.btn-primary:hover {
  background: #0c5fdb !important;
  filter: none !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0) !important;
  background: #0a50b8 !important;
  filter: none !important;
}

/* Override old app.blade.php .btn-outline-primary (uses var(--c-primary)) */
.btn-outline-primary {
  color: var(--stolia-blue, #1677FF) !important;
  border: 1.5px solid var(--stolia-blue, #1677FF) !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background: rgba(22, 119, 255, 0.08) !important;
  color: var(--stolia-blue, #1677FF) !important;
  border-color: var(--stolia-blue, #1677FF) !important;
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-border-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
}
.btn-ghost:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.btn-sm { height: 32px; padding: 0 var(--space-3); font-size: var(--text-sm); }

.btn svg { width: 16px; height: 16px; }

/* ================================================================
   8. CARDS
   ================================================================ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card--hover:hover {
  box-shadow: var(--shadow-md);
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.card__link {
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: var(--weight-medium);
}

/* --- KPI Card --- */
.kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.kpi:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.kpi__label {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}

.kpi__icon {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi__icon svg { width: 18px; height: 18px; }

.kpi__icon--success { background: var(--status-success-bg); color: var(--status-success-text); }
.kpi__icon--info    { background: var(--status-info-bg);    color: var(--status-info-text); }
.kpi__icon--danger  { background: var(--status-danger-bg);  color: var(--status-danger-text); }
.kpi__icon--warning { background: var(--status-warning-bg); color: var(--status-warning-text); }
.kpi__icon--neutral { background: var(--status-neutral-bg); color: var(--status-neutral-text); }

.kpi__value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: var(--space-1);
}

.kpi__value--danger { color: var(--stolia-red); }

/* KPI compact (variante densa para module-cards del dashboard global) */
.kpi--compact { padding: 12px 14px !important; }
.kpi--compact .kpi__label { font-size: 12px !important; }
.kpi--compact .kpi__value { font-size: 22px !important; line-height: 1.15 !important; }
.kpi--compact .kpi__icon { width: 28px !important; height: 28px !important; }
.kpi--compact .kpi__icon svg { width: 14px !important; height: 14px !important; }
.kpi--compact .kpi__delta { font-size: 12px !important; }

.kpi__delta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.kpi__delta-value { font-weight: var(--weight-semibold); }
.kpi__delta--up    .kpi__delta-value { color: var(--stolia-green); }
.kpi__delta--down  .kpi__delta-value { color: var(--stolia-red); }
.kpi__delta--up-warning .kpi__delta-value { color: var(--stolia-red); }

/* ================================================================
   9. INVOICE LIST (Facturas vencidas)
   ================================================================ */
.invoice-list {
  display: flex;
  flex-direction: column;
}

.invoice-item {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}

.invoice-item:last-child { border-bottom: none; }

.invoice-item__avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--gray-600);
  flex-shrink: 0;
}
/* 8 paletas hash para diferenciar clientes/proveedores en listas largas */
.invoice-item__avatar[data-hash="0"] { background: rgba(22,119,255,.10);  color: var(--stolia-blue); }
.invoice-item__avatar[data-hash="1"] { background: rgba(0,194,178,.10);   color: var(--stolia-teal); }
.invoice-item__avatar[data-hash="2"] { background: rgba(124,77,255,.10);  color: var(--stolia-purple); }
.invoice-item__avatar[data-hash="3"] { background: rgba(255,176,32,.12);  color: var(--stolia-orange); }
.invoice-item__avatar[data-hash="4"] { background: rgba(34,197,94,.10);   color: var(--stolia-green); }
.invoice-item__avatar[data-hash="5"] { background: rgba(255,77,79,.08);   color: var(--stolia-red); }
.invoice-item__avatar[data-hash="6"] { background: rgba(75,85,99,.10);    color: var(--gray-700); }
.invoice-item__avatar[data-hash="7"] { background: rgba(15,95,217,.10);   color: var(--status-info-text); }

.invoice-item__info { min-width: 0; }
.invoice-item__name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.invoice-item__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.invoice-item__amount {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  white-space: nowrap;
}

.invoice-item__status {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.invoice-item__status--overdue { color: var(--stolia-red); }

.card__footer {
  text-align: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  margin-top: var(--space-2);
}

.card__footer a {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
}

/* ================================================================
   10. TIMELINE (Próximos pagos)
   ================================================================ */
.timeline {
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--color-divider);
}

.timeline__item {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) 0;
  position: relative;
}

.timeline__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-surface);
  z-index: 1;
  padding: 4px 0;
}

.timeline__date-day {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: 1;
}

.timeline__date-month {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.timeline__dot {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-surface);
  z-index: 2;
  display: none;
}

.timeline__info {
  padding-left: var(--space-4);
  min-width: 0;
}

.timeline__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.timeline__amount {
  text-align: right;
  white-space: nowrap;
}

.timeline__amount-value {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.timeline__amount-when {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ================================================================
   11. CHART CONTAINERS
   ================================================================ */
.chart-card__value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.chart-card__delta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.chart-card__delta--up { color: var(--stolia-green); font-weight: var(--weight-semibold); }

.chart-svg { width: 100%; height: auto; display: block; margin-top: var(--space-3); }

/* --- Donut Legend --- */
.donut-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--space-4);
  align-items: center;
}

.donut-legend { display: flex; flex-direction: column; gap: var(--space-2); }

.donut-legend__row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--text-sm);
}

.donut-legend__dot { width: 10px; height: 10px; border-radius: 50%; }
.donut-legend__label { color: var(--color-text-muted); }
.donut-legend__value { color: var(--color-text); font-weight: var(--weight-semibold); }

/* ================================================================
   12. TABLE
   ================================================================ */

/* Bootstrap 5.3 sets --bs-table-bg on each <th> which covers any
   background set on <thead> via inline style. Reset it so
   `<thead style="background:var(--c-primary)">` shows through.
   The box-shadow trick Bootstrap uses for hover/stripes still works. */
.table > thead > tr > th,
.table > thead > tr > td {
    --bs-table-bg: transparent;
    color: inherit;
}

.table-stolia {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-base);
}

.table-stolia thead th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  white-space: nowrap;
}

.table-stolia thead th .sort-icon {
  display: inline-block;
  margin-left: 4px;
  opacity: 0.5;
  font-size: 10px;
}

.table-stolia tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text);
  vertical-align: middle;
}

.table-stolia tbody tr:hover td { background: var(--color-surface-alt); }

.table-stolia tbody tr:last-child td { border-bottom: none; }

.table-stolia .text-right { text-align: right; }

/* ──────────────────────────────────────────────────────────────────────
   Listados estandar dentro de .card · norma de espaciado
   ──────────────────────────────────────────────────────────────────────
   Iguala el padding/altura de cualquier <table class="table"> dentro
   de un .card al canónico de table-stolia. Excluye .table-sm (que es
   la variante para tablas internas de cuotas/líneas con padding más
   compacto a propósito). Así Pay > Proveedores y Facturación > Clientes
   (y todos los demás listados) tienen filas del mismo alto sin necesidad
   de tocar cada vista una a una.
*/
.card > .table-responsive > .table:not(.table-sm) > tbody > tr > td,
.card > .table-responsive > .table:not(.table-sm) > thead > tr > th,
.card > .table:not(.table-sm) > tbody > tr > td,
.card > .table:not(.table-sm) > thead > tr > th {
  padding: var(--space-3) var(--space-4) !important;
  vertical-align: middle !important;
}
/* Primera columna (códigos / nº documento) y última (Acciones) en una sola línea
   — los códigos como "A26-00008" o "F-DEMO-0001" no deben partirse. */
.card > .table-responsive > .table:not(.table-sm) > tbody > tr > td:first-child,
.card > .table-responsive > .table:not(.table-sm) > tbody > tr > td:last-child,
.card > .table:not(.table-sm) > tbody > tr > td:first-child,
.card > .table:not(.table-sm) > tbody > tr > td:last-child {
  white-space: nowrap;
}
/* Celdas numéricas alineadas a la derecha (importes, totales) — nunca
   romper el "€" a una segunda línea aunque el total sea alto. */
.card > .table-responsive > .table:not(.table-sm) > tbody > tr > td.text-end,
.card > .table:not(.table-sm) > tbody > tr > td.text-end {
  white-space: nowrap;
}
/* Opt-out .td-wrap: última columna de TEXTO LARGO (avisos, estados de las
   revisiones del libro/archivador). Con el nowrap de arriba el texto no
   envuelve, la tabla crece a su max-content y aparece scroll horizontal
   (caso real 2026-09-17 y 2026-10-02). Mismos selectores para ganar el
   empate de especificidad por orden. */
.card > .table-responsive > .table:not(.table-sm) > tbody > tr > td.td-wrap,
.card > .table:not(.table-sm) > tbody > tr > td.td-wrap {
  white-space: normal;
}

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pagination__btn {
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pagination__btn:hover { background: var(--color-surface-alt); }

.pagination__btn.is-active {
  background: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
}

/* ================================================================
   13. STATUS CHIPS
   ================================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.chip--success { background: var(--status-success-bg); color: var(--status-success-text); }
.chip--warning { background: var(--status-warning-bg); color: var(--status-warning-text); }
.chip--danger  { background: var(--status-danger-bg);  color: var(--status-danger-text); }
.chip--info    { background: var(--status-info-bg);    color: var(--status-info-text); }
.chip--neutral { background: var(--status-neutral-bg); color: var(--status-neutral-text); }

/* ================================================================
   14. QUICK ACTIONS
   ================================================================ */
.quick-action {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-text);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.quick-action:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-alt);
  text-decoration: none;
  transform: translateX(2px);
}

.quick-action__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.quick-action__icon svg { width: 18px; height: 18px; }

.quick-action__info { flex: 1; min-width: 0; }
.quick-action__title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text); }
.quick-action__desc  { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; }

.quick-action__arrow {
  color: var(--color-text-subtle);
  transition: transform var(--transition-fast);
}
.quick-action:hover .quick-action__arrow { transform: translateX(2px); color: var(--color-primary); }

/* ================================================================
   15. UTILITIES & GRID
   ================================================================ */
.grid-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.grid-dashboard {
  display: grid;
  grid-template-columns: 2fr 1.4fr 1.6fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.grid-bottom {
  display: grid;
  grid-template-columns: 2.5fr 1fr;
  gap: var(--space-4);
}

.stack-cards { display: flex; flex-direction: column; gap: var(--space-4); }

.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-success { color: var(--status-success-text); }
.text-danger  { color: var(--status-danger-text); }
.text-warning { color: var(--status-warning-text); }
.text-info    { color: var(--status-info-text); }

.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }

/* ================================================================
   16. RESPONSIVE
   ================================================================ */
@media (max-width: 1280px) {
  .grid-dashboard { grid-template-columns: 1fr 1fr; }
  .grid-dashboard > :last-child { grid-column: span 2; }
}

@media (max-width: 1024px) {
  .grid-kpis { grid-template-columns: repeat(2, 1fr); }
  .grid-dashboard { grid-template-columns: 1fr; }
  .grid-dashboard > :last-child { grid-column: auto; }
  .grid-bottom { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .stolia-app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .topbar { padding: 0 var(--space-4); }
  .topbar__search { display: none; }
  .stolia-content { padding: var(--space-4); }
  .grid-kpis { grid-template-columns: 1fr; }
}

/* ================================================================
   17. LEGACY OVERRIDES  (neutralise app.blade.php dark-navy vars)
   app.blade.php embeds a large <style> block loaded before this
   file. Everything below wins because:
     • equal specificity → last stylesheet wins
     • !important used where the old rule also has !important
   Inline [style="background:…!important"] on specific card-hd
   elements (e.g. red urgent headers) are NOT affected — inline
   !important beats any stylesheet !important.
   ================================================================ */

/* ── CARD SECTION HEADERS (.card-hd) ─────────────────────────────────────
   La definición canónica del .card-hd con gradiente teal→azul vive más
   abajo en el bloque "Patrón Form Clásico". Aquí solo dejamos los hooks
   estructurales para texto/counter dentro del banner. ─────────────────── */
.card-hd small { color: rgba(255,255,255,0.85) !important; opacity: 1 !important; }

/* ── STAT CARDS ───────────────────────────────────────────────── */
.stat-card::before {
  background: linear-gradient(180deg, var(--stolia-teal, #00C2B2) 0%, #00A89A 100%) !important;
}
.stat-card .num {
  color: var(--gray-900, #111827) !important;
}
.stat-card .icon {
  color: var(--stolia-teal, #00C2B2) !important;
  opacity: 0.15 !important;
}

/* ── KPI CARDS ────────────────────────────────────────────────── */
.kpi-card {
  border-top-color: var(--stolia-teal, #00C2B2) !important;
}
.kpi-card .kpi-num {
  color: var(--gray-900, #111827) !important;
}
.kpi-card .kpi-num.c-danger  { color: var(--stolia-red,    #FF4D4F) !important; }
.kpi-card .kpi-num.c-warning { color: var(--stolia-orange, #FFB020) !important; }
.kpi-card .kpi-icon {
  color: var(--stolia-teal, #00C2B2) !important;
  opacity: 0.12 !important;
}

/* ── NAV TABS ─────────────────────────────────────────────────── */
.nav-tabs .nav-link:hover {
  color: var(--stolia-blue, #1677FF) !important;
  border-bottom-color: rgba(22, 119, 255, 0.3) !important;
}
.nav-tabs .nav-link.active {
  color: var(--stolia-blue, #1677FF) !important;
  border-bottom-color: var(--stolia-blue, #1677FF) !important;
}

/* ── FORM SECTION LABELS ──────────────────────────────────────── */
.form-section {
  background: var(--gray-100, #F2F4F7) !important;
  color: var(--gray-600, #4B5563) !important;
}

/* ── PAGE-HEADER SUBTITLE & BUTTONS (old white-on-dark pattern) ── */
/*
   Views designed for the old dark page-header use inline
   color:rgba(255,255,255,0.x) on subtitles and btn-outline-light
   on action buttons.  With the new white Stolia page-header these
   become invisible.
   CSS !important beats inline non-!important — use it to fix all
   affected views in one rule.
   EXCEPTION: page-headers that already have an inline dark
   background (e.g. portal hero, escrituras/show hero) are detected
   via :not([style*="background"]) so their white text is preserved.
*/
.page-header:not([style*="background"]) [style*="color:rgba(255,255,255"] {
  color: var(--color-text-muted, #6B7280) !important;
}
/* btn-outline-light inside light page-headers → make them visible */
.page-header:not([style*="background"]) .btn-outline-light {
  color: var(--gray-600, #4B5563) !important;
  border-color: var(--color-border-strong, #D1D5DB) !important;
  background: transparent !important;
}
.page-header:not([style*="background"]) .btn-outline-light:hover {
  background: var(--gray-50, #F9FAFB) !important;
  border-color: var(--gray-400, #9CA3AF) !important;
}

/* ── FOCUS OUTLINES (replace dark navy with Stolia blue) ──────── */
:focus-visible {
  outline: 2px solid var(--stolia-blue, #1677FF) !important;
  outline-offset: 2px !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--stolia-blue, #1677FF) !important;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.15) !important;
}
.form-check-input:checked {
  background-color: var(--stolia-blue, #1677FF) !important;
  border-color: var(--stolia-blue, #1677FF) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §18 LEGACY COMPONENT LIBRARY
   Portado de layouts.app para backward-compat con las 96 vistas migradas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── KPI-XS (tarjeta KPI compacta) ──────────────────────────────────────── */
.kpi-xs {
  background: #fff; border-radius: var(--radius-sm, 8px);
  padding: 12px 14px; box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,.06));
  border-left: 3px solid var(--stolia-teal, #00C2B2);
  transition: box-shadow .2s, transform .2s;
}
.kpi-xs:hover { box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.1)); transform: translateY(-1px); }
.kpi-xs .n   { font-size: 1.65rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--color-text, #111827); }
.kpi-xs .l   { font-size: .7rem; color: var(--color-text-subtle, #9CA3AF); text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
.kpi-xs.danger  { border-left-color: var(--stolia-red, #EF4444); }
.kpi-xs.warning { border-left-color: var(--stolia-orange, #F59E0B); }
.kpi-xs.info    { border-left-color: var(--stolia-blue, #1677FF); }

/* ── KPI-ROW-COMPACT ─────────────────────────────────────────────────────── */
.kpi-row-compact { margin-bottom: 8px !important; }
.kpi-row-compact .kpi-xs,
.kpi-row-compact .kpi-card  { padding: 8px 12px !important; }
.kpi-row-compact .kpi-xs .n,
.kpi-row-compact .kpi-num   { font-size: 1.25rem !important; }
.kpi-row-compact .kpi-xs .l,
.kpi-row-compact .kpi-label { font-size: .66rem !important; margin-top: 2px !important; }

/* ── DASH-CARD ───────────────────────────────────────────────────────────── */
:root { --dash-h: calc((100vh - 272px) / 2); }
.dash-card {
  height: var(--dash-h); min-height: 140px;
  display: flex; flex-direction: column;
  border: none; border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,.06));
  background: #fff; overflow: hidden; transition: box-shadow .2s;
}
.dash-card:hover { box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.1)); }
.dash-hd {
  flex-shrink: 0; color: #fff; padding: 0 14px; height: 38px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.dash-hd .dash-title {
  font-weight: 600; font-size: .8rem; flex-shrink: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 6px;
}
.dash-hd .dash-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.dash-count { background: rgba(255,255,255,.22); color: #fff; font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 100px; }
.dash-ver   { color: rgba(255,255,255,.9); font-size: .68rem; font-weight: 600; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28); border-radius: 6px; padding: 2px 8px; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; transition: background .15s; }
.dash-ver:hover { background: rgba(255,255,255,.3); color: #fff; }
.dash-amt   { font-size: .72rem; font-weight: 700; color: #fff; background: rgba(0,0,0,.22); padding: 2px 8px; border-radius: 100px; }
.dash-body  { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.dash-body::-webkit-scrollbar { width: 3px; }
.dash-body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
.dash-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #94a3b8; font-size: .82rem; padding: 12px; }
.dash-footer{ flex-shrink: 0; padding: 4px 14px; border-top: 1px solid #f0f2f5; font-size: .72rem; color: #64748b; background: #f8fafc; display: flex; align-items: center; justify-content: space-between; }
.dash-table { width: 100%; border-collapse: collapse; }
.dash-table thead th { position: sticky; top: 0; z-index: 1; padding: 5px 12px; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #64748b; border-bottom: 1px solid #f0f2f5; background: #fff; }
.dash-table tbody td { padding: 5px 12px; border-bottom: 1px solid #f5f7fa; font-size: .82rem; }
.dash-item  { padding: 7px 14px; border-bottom: 1px solid #f0f2f5; transition: background .15s; }
.dash-item:hover { background: #f8fafc; }
.dash-item:last-child { border-bottom: none; }
.dash-item .d-title { font-weight: 600; font-size: .84rem; color: #0f172a; text-decoration: none; display: block; }
.dash-item .d-sub   { font-size: .7rem; color: #6b7685; margin-top: 1px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

/* Colores de cabecera de dash-card */
.hd-verde   { background: linear-gradient(135deg, #1a4a2e 0%, #2d7a4a 100%); }
.hd-mostaza { background: linear-gradient(135deg, #8b6914 0%, #a07a1a 100%); }
.hd-ambar   { background: linear-gradient(135deg, #b45309 0%, #d97706 100%); }
.hd-rojo    { background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%); }
.hd-azul    { background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%); }

/* ── BADGES DE ESTADO ────────────────────────────────────────────────────── */
.badge-estado, .badge-pendiente, .badge-pagada, .badge-parcial,
.badge-vencida, .badge-multivencimiento, .badge-activo, .badge-baja,
.badge-borrador, .badge-enviada, .badge-inactivo {
  display: inline-block; padding: 3px 10px; border-radius: 100px;
  font-size: .73rem; font-weight: 600; line-height: 1.5;
}
.badge-pendiente        { background: #fef3c7; color: #92400e; }
.badge-pagada           { background: #dcfce7; color: #14532d; }
.badge-parcial          { background: #e0f2fe; color: #0c4a6e; }
.badge-vencida          { background: #fee2e2; color: #7f1d1d; }
.badge-multivencimiento { background: #ede9fe; color: #3730a3; }
.badge-activo           { background: #dcfce7; color: #14532d; }
.badge-baja             { background: #fee2e2; color: #7f1d1d; }
.badge-borrador         { background: #f1f5f9; color: #475569; }
.badge-enviada          { background: #dbeafe; color: #1e3a8a; }
.badge-inactivo         { background: #f1f5f9; color: #64748b; }

/* ── ALERT UTILITIES ────────────────────────────────────────────────────── */
.alert-ok    { background: #dcfce7; color: #14532d; border: 1px solid #bbf7d0; border-radius: var(--radius-sm, 6px); padding: 8px 14px; }
.alert-error { background: #fee2e2; color: #7f1d1d; border: 1px solid #fecaca; border-radius: var(--radius-sm, 6px); padding: 8px 14px; }

/* ── FORM-SECTION ────────────────────────────────────────────────────────── */
.form-section {
  background: var(--gray-50, #F9FAFB); border-radius: var(--radius-sm, 6px);
  padding: 8px 14px; margin-bottom: 12px;
  font-size: .8rem; font-weight: 600; color: var(--stolia-blue, #1677FF);
  text-transform: uppercase; letter-spacing: .06em;
  border-left: 3px solid var(--stolia-blue, #1677FF);
}

/* ── INFO-TABLE ─────────────────────────────────────────────────────────── */
.info-table td:first-child { color: #64748b; font-size: .85rem; width: 48%; padding: 5px 2px; }
.info-table td:last-child  { font-weight: 500; padding: 5px 2px; }
.info-table tr + tr td     { border-top: 1px solid #f1f5f9; }

/* ── ROL ASESORÍA — solo lectura ────────────────────────────────────────── */
body.user-asesoria .hide-for-readonly,
body.user-asesoria [data-write-only],
body.user-asesoria form.pago-ctl,
body.user-asesoria form.d-inline .pg-undo,
body.user-asesoria input[type=file],
body.user-asesoria .btn-form-save { display: none !important; }
body.user-asesoria .readonly-banner {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(135deg, #eef4ff 0%, #f7eaec 100%);
  border-bottom: 1px solid #c5d8f5; padding: 8px 20px;
  font-size: .82rem; color: #334155; display: flex; align-items: center; gap: 10px;
}

/* ── ROW UTILITIES ─────────────────────────────────────────────────────── */
.cuota-pagada, .venc-pagada { background: #f0fdf4; border-radius: var(--radius-sm, 6px); padding: 6px 10px; margin-bottom: 6px; border-left: 3px solid #16a34a; }
.tr-vencida td             { background: #fff5f5 !important; }
.tr-vencida td:first-child { border-left: 3px solid #dc2626; }
.tr-proxima td             { background: #fffbeb !important; }
.tr-proxima td:first-child { border-left: 3px solid #f59e0b; }

/* ── TOM SELECT ─────────────────────────────────────────────────────────── */
.ts-hidden-accessible { clip: rect(0 0 0 0) !important; }
.ts-wrapper { position: relative; }
.ts-wrapper.form-select, .ts-wrapper.form-select-sm, .ts-wrapper.form-select-lg {
  border: none !important; box-shadow: none !important;
  background-image: none !important; padding: 0 !important; height: auto !important;
}
.ts-wrapper .ts-control {
  border: 1.5px solid #dee2e6 !important; border-radius: 8px !important;
  padding: 0 36px 0 14px !important; height: 38px !important;
  font-size: .9rem !important; background: #fff !important; color: #111 !important;
  box-shadow: none !important; cursor: pointer !important;
  transition: border-color .2s, box-shadow .2s !important;
  display: flex !important; align-items: center !important; position: relative;
}
.ts-wrapper.focus .ts-control {
  border-color: var(--stolia-blue, #1677FF) !important;
  box-shadow: 0 0 0 3px rgba(22,119,255,.15) !important;
}
.ts-wrapper.ts-sm .ts-control { height: 31px !important; padding: 0 28px 0 10px !important; font-size: .83rem !important; border-radius: 6px !important; }
.ts-wrapper.single .ts-control::after {
  content: '' !important; position: absolute !important; right: 14px !important; top: 50% !important;
  width: 8px !important; height: 8px !important;
  border-right: 2px solid #64748b !important; border-bottom: 2px solid #64748b !important;
  transform: translateY(-68%) rotate(45deg) !important; pointer-events: none !important;
}
.ts-wrapper.single.dropdown-active .ts-control::after { transform: translateY(-30%) rotate(-135deg) !important; }
.ts-wrapper .ts-control > svg { display: none !important; }

/* CRÍTICO: input de búsqueda en TomSelect (single).
   Está absoluto sobre el control, oculto en reposo, visible al abrir dropdown. */
.ts-wrapper.single .ts-control input {
  position: absolute !important;
  top: 0 !important; bottom: 0 !important;
  left: 0 !important; right: 36px !important;
  width: auto !important;
  padding: 0 0 0 14px !important;
  font-size: inherit !important;
  font-family: inherit !important;
  color: #111 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.ts-wrapper.single.dropdown-active .ts-control input {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.ts-wrapper.single.dropdown-active .ts-control .item,
.ts-wrapper.single.dropdown-active .ts-control .placeholder {
  opacity: 0 !important;
}
.ts-wrapper.single .ts-control .item {
  color: #111 !important;
  font-size: inherit !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}
.ts-wrapper .ts-control .placeholder {
  color: #94a3b8 !important;
  font-style: normal !important;
  position: relative !important;
  z-index: 1 !important;
}

.ts-dropdown {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.05) !important;
  font-size: 0.9rem !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  z-index: 9999 !important;
  font-family: inherit !important;
  background: #fff !important;
}
.ts-dropdown-content {
  max-height: 240px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
.ts-dropdown-content > .ts-input,
.ts-wrapper.has-search .ts-dropdown-content::before {
  display: none;
}
.ts-dropdown .ts-option {
  padding: 9px 14px !important;
  color: #1e293b !important;
  cursor: pointer !important;
  transition: background 0.1s !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ts-dropdown .ts-option.option-active,
.ts-dropdown .ts-option:hover {
  background: rgba(0,194,178,0.08) !important;
  color: var(--stolia-teal) !important;
}
.ts-dropdown .ts-option.option-selected {
  background: rgba(0,194,178,0.07) !important;
  color: var(--stolia-teal) !important;
  font-weight: 600 !important;
}
.ts-dropdown .ts-option.option-selected.option-active {
  background: rgba(0,194,178,0.10) !important;
}
.ts-dropdown .ts-option[data-value=""] {
  color: #94a3b8 !important;
  font-style: italic !important;
}
.ts-dropdown .ts-no-results {
  padding: 14px !important;
  text-align: center !important;
  color: #94a3b8 !important;
  font-size: 0.86rem !important;
}
[data-theme="dark"] .ts-wrapper .ts-control {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.90) !important;
}
[data-theme="dark"] .ts-wrapper.single .ts-control input { color: rgba(255,255,255,0.90) !important; }
[data-theme="dark"] .ts-wrapper.single .ts-control .item { color: rgba(255,255,255,0.90) !important; }
[data-theme="dark"] .ts-dropdown {
  background: var(--color-surface) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
[data-theme="dark"] .ts-dropdown .ts-option { color: rgba(255,255,255,0.85) !important; }

/* ── CARD-HD: NO redefinir aquí. La definición canónica con gradiente
   teal→azul vive más abajo en el bloque "Patrón Form Clásico". ───────── */

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
  .dash-card { height: auto; min-height: 260px !important; max-height: 420px !important; }
  :root { --dash-h: auto; }
}

/* ================================================================
   19. DARK MODE — Bootstrap component overrides
   Bootstrap 5 uses its own CSS variables (--bs-*) that default to
   light values and don't read our --color-* tokens. These rules
   bridge the gap so cards, forms, modals, tables, dropdowns and
   badges all respond to [data-theme="dark"].
   ================================================================ */

[data-theme="dark"] {
  /* Bootstrap body/background */
  --bs-body-bg:       var(--stolia-navy, #0D1117);
  --bs-body-color:    #F2F4F7;
  --bs-secondary-bg: #232C39;
  --bs-tertiary-bg:  #1B2430;

  /* ── Cards ─────────────────────────────────────────────────── */
  --bs-card-bg:               var(--stolia-surface-dark, #1B2430);
  --bs-card-border-color:     rgba(255,255,255,0.08);
  --bs-card-color:            #F2F4F7;
  --bs-card-cap-bg:           #232C39;

  /* ── Forms ─────────────────────────────────────────────────── */
  --bs-input-bg:              #232C39;
  --bs-input-border-color:    rgba(255,255,255,0.12);
  --bs-input-color:           #F2F4F7;
  --bs-input-placeholder-color: rgba(242,244,247,0.4);
  --bs-input-focus-bg:        #2a3447;
  --bs-input-focus-border-color: rgba(0,194,178,0.5);

  /* ── Table ─────────────────────────────────────────────────── */
  --bs-table-bg:              transparent;
  --bs-table-color:           #F2F4F7;
  --bs-table-border-color:    rgba(255,255,255,0.06);
  --bs-table-striped-bg:      rgba(255,255,255,0.03);
  --bs-table-hover-bg:        rgba(255,255,255,0.04);

  /* ── Modal ─────────────────────────────────────────────────── */
  --bs-modal-bg:              var(--stolia-surface-dark, #1B2430);
  --bs-modal-header-bg:       #232C39;
  --bs-modal-border-color:    rgba(255,255,255,0.1);
  --bs-modal-color:           #F2F4F7;

  /* ── Dropdown ───────────────────────────────────────────────── */
  --bs-dropdown-bg:           #232C39;
  --bs-dropdown-border-color: rgba(255,255,255,0.1);
  --bs-dropdown-color:        #F2F4F7;
  --bs-dropdown-link-color:   #F2F4F7;
  --bs-dropdown-link-hover-bg:#2a3447;
  --bs-dropdown-link-hover-color: #fff;

  /* ── List group ─────────────────────────────────────────────── */
  --bs-list-group-bg:             #1B2430;
  --bs-list-group-border-color:   rgba(255,255,255,0.08);
  --bs-list-group-color:          #F2F4F7;
  --bs-list-group-action-hover-bg:#232C39;

  /* ── Breadcrumb ─────────────────────────────────────────────── */
  --bs-breadcrumb-divider-color: rgba(242,244,247,0.4);
  --bs-breadcrumb-item-active-color: rgba(242,244,247,0.7);
}

/* ── Form controls (needs both variables + direct overrides for BC) ──── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: #232C39 !important;
  border-color:     rgba(255,255,255,0.12) !important;
  color:            #F2F4F7 !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: #2a3447 !important;
  border-color:     rgba(0,194,178,0.5) !important;
  box-shadow:       0 0 0 3px rgba(0,194,178,0.15) !important;
  color:            #F2F4F7 !important;
}
[data-theme="dark"] .form-control::placeholder { color: rgba(242,244,247,0.35) !important; }
[data-theme="dark"] .input-group-text {
  background-color: #2a3447 !important;
  border-color:     rgba(255,255,255,0.12) !important;
  color:            rgba(242,244,247,0.7) !important;
}

/* ── Cards ────────────────────────────────────────────────────────────── */
[data-theme="dark"] .card {
  background-color: var(--stolia-surface-dark, #1B2430) !important;
  border-color:     rgba(255,255,255,0.08) !important;
  color:            #F2F4F7;
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  background-color: #232C39 !important;
  border-color:     rgba(255,255,255,0.08) !important;
  color:            #F2F4F7;
}
[data-theme="dark"] .card-body { color: #F2F4F7; }

/* ── Tables ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .table {
  --bs-table-color:  #F2F4F7;
  --bs-table-bg:     transparent;
  --bs-table-border-color: rgba(255,255,255,0.06);
  color: #F2F4F7;
}
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: rgba(255,255,255,0.04);
}
[data-theme="dark"] .table-responsive { border-color: rgba(255,255,255,0.06); }

/* ── Modals ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .modal-content {
  background-color: var(--stolia-surface-dark, #1B2430) !important;
  border-color:     rgba(255,255,255,0.1) !important;
  color:            #F2F4F7;
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: rgba(255,255,255,0.08) !important;
  background-color: #232C39;
}
[data-theme="dark"] .modal-title { color: #F2F4F7; }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }

/* ── Dropdowns ────────────────────────────────────────────────────────── */
[data-theme="dark"] .dropdown-menu {
  background-color: #232C39 !important;
  border-color:     rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .dropdown-item {
  color: #F2F4F7 !important;
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: #2a3447 !important;
  color: #fff !important;
}
[data-theme="dark"] .dropdown-divider { border-color: rgba(255,255,255,0.08) !important; }

/* ── Alerts ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .alert-ok {
  background-color: rgba(34,197,94,0.15) !important;
  border-color:     rgba(34,197,94,0.3) !important;
  color:            #86efac !important;
}
[data-theme="dark"] .alert-error {
  background-color: rgba(255,77,79,0.15) !important;
  border-color:     rgba(255,77,79,0.3) !important;
  color:            #fca5a5 !important;
}
[data-theme="dark"] .alert-warning {
  background-color: rgba(255,176,32,0.15) !important;
  border-color:     rgba(255,176,32,0.3) !important;
  color:            #fde68a !important;
}
[data-theme="dark"] .alert-info {
  background-color: rgba(22,119,255,0.15) !important;
  border-color:     rgba(22,119,255,0.3) !important;
  color:            #93c5fd !important;
}

/* ── Misc ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] hr { border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .text-muted { color: rgba(242,244,247,0.55) !important; }
[data-theme="dark"] .border     { border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top { border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light   { background-color: var(--stolia-surface-dark,#1B2430) !important; color: #F2F4F7; }
[data-theme="dark"] .shadow-sm  { box-shadow: 0 1px 3px rgba(0,0,0,0.5) !important; }
[data-theme="dark"] code { background: rgba(255,255,255,0.08); color: #7de9e1; }

/* ── stat-card in dark ─────────────────────────────────────────────────── */
[data-theme="dark"] .stat-card {
  background: var(--stolia-surface-dark, #1B2430) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] .stat-card .num   { color: #F2F4F7 !important; }
[data-theme="dark"] .stat-card .label { color: rgba(242,244,247,0.6) !important; }
[data-theme="dark"] .stat-card .icon  { color: rgba(242,244,247,0.15) !important; opacity: 1 !important; }

/* ── kpi-card in dark ─────────────────────────────────────────────────── */
[data-theme="dark"] .kpi-card { background: var(--stolia-surface-dark, #1B2430) !important; border-color: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .kpi-card .kpi-num { color: #F2F4F7 !important; }
[data-theme="dark"] .kpi-card .kpi-label { color: rgba(242,244,247,0.6) !important; }

/* ── kpi-xs in dark ────────────────────────────────────────────────────── */
[data-theme="dark"] .kpi-xs {
  background: var(--stolia-surface-dark, #1B2430) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .kpi-xs .n { color: #F2F4F7 !important; }
[data-theme="dark"] .kpi-xs .l { color: rgba(242,244,247,0.55) !important; }
[data-theme="dark"] .kpi-xs.danger  { border-color: rgba(255,77,79,0.4) !important; background: rgba(255,77,79,0.1) !important; }
[data-theme="dark"] .kpi-xs.warning { border-color: rgba(255,176,32,0.4) !important; background: rgba(255,176,32,0.08) !important; }
[data-theme="dark"] .kpi-xs.info    { border-color: rgba(22,119,255,0.4) !important; background: rgba(22,119,255,0.08) !important; }

/* ── dash-card in dark ─────────────────────────────────────────────────── */
[data-theme="dark"] .dash-card { background: var(--stolia-surface-dark, #1B2430); border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .dash-body { background: transparent !important; }
[data-theme="dark"] .dash-item { border-color: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .d-title   { color: #F2F4F7 !important; }
[data-theme="dark"] .d-sub     { color: rgba(242,244,247,0.55) !important; }
[data-theme="dark"] .dash-empty { color: rgba(242,244,247,0.4) !important; }
[data-theme="dark"] .dash-ver   { color: rgba(242,244,247,0.55) !important; }
[data-theme="dark"] .dash-table thead th { background: #232C39 !important; color: rgba(242,244,247,0.55) !important; border-color: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .dash-table tbody td { border-color: rgba(255,255,255,0.04) !important; color: #F2F4F7; }

/* ── View-local white-background cards (specificity wins over plain class) ── */
/* Facturación dashboard */
[data-theme="dark"] .cmp-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .fac-info-card,
[data-theme="dark"] .fac-phase-card,
[data-theme="dark"] .fac-phase-grid { background: var(--stolia-surface-dark,#1B2430) !important; border-color: rgba(255,255,255,0.08) !important; color: #F2F4F7 !important; }
[data-theme="dark"] .cmp-year   { color: #F2F4F7 !important; }
[data-theme="dark"] .cmp-label  { color: rgba(242,244,247,0.45) !important; }
[data-theme="dark"] .cmp-unit,
[data-theme="dark"] .cmp-prev   { color: rgba(242,244,247,0.55) !important; border-color: rgba(255,255,255,0.06) !important; }

/* Facturación module list tables */
[data-theme="dark"] .fac-table-card,
[data-theme="dark"] .fac-filter-card { background: var(--stolia-surface-dark,#1B2430) !important; border-color: rgba(255,255,255,0.08) !important; color: #F2F4F7 !important; }
[data-theme="dark"] .fac-table { --bs-table-bg: transparent; color: #F2F4F7 !important; }
[data-theme="dark"] .lineas-table { background: var(--stolia-surface-dark,#1B2430) !important; color: #F2F4F7 !important; }
[data-theme="dark"] .lineas-table th { background: #232C39 !important; color: rgba(242,244,247,0.65) !important; border-color: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .lineas-table td { border-color: rgba(255,255,255,0.04) !important; color: #F2F4F7 !important; }
[data-theme="dark"] .total-row,
[data-theme="dark"] .tablefoot   { background: #232C39 !important; color: #F2F4F7 !important; border-color: rgba(255,255,255,0.08) !important; }

/* Recibos */
[data-theme="dark"] .rec-table,
[data-theme="dark"] .rec-header,
[data-theme="dark"] .rec-card    { background: var(--stolia-surface-dark,#1B2430) !important; border-color: rgba(255,255,255,0.08) !important; color: #F2F4F7 !important; }

/* Presupuestos/Albaranes */
[data-theme="dark"] .pres-card,
[data-theme="dark"] .rem-card,
[data-theme="dark"] .rem-form-card { background: var(--stolia-surface-dark,#1B2430) !important; border-color: rgba(255,255,255,0.08) !important; color: #F2F4F7 !important; }

/* Vehículos KPIs */
[data-theme="dark"] .v-kpi,
[data-theme="dark"] .kpi-box,
[data-theme="dark"] .res-card,
[data-theme="dark"] .section-box  { background: var(--stolia-surface-dark,#1B2430) !important; border-color: rgba(255,255,255,0.08) !important; color: #F2F4F7 !important; }

/* Expedientes */
[data-theme="dark"] .exp-rec      { background: var(--stolia-surface-dark,#1B2430) !important; border-color: rgba(255,255,255,0.08) !important; color: #F2F4F7 !important; }

/* Generic data containers */
[data-theme="dark"] .data         { background: var(--stolia-surface-dark,#1B2430) !important; color: #F2F4F7 !important; }
[data-theme="dark"] .preview-box  { background: #232C39 !important; border-color: rgba(255,255,255,0.08) !important; color: #F2F4F7 !important; }

/* cli-picker (client lookup dropdown) */
[data-theme="dark"] .cli-picker-suggestions { background: #232C39 !important; border-color: rgba(255,255,255,0.1) !important; color: #F2F4F7 !important; }

/* Inline style overrides for the most common white backgrounds */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"] {
    background: var(--stolia-surface-dark,#1B2430) !important;
    color: #F2F4F7 !important;
}

/* ── Tom Select in dark ────────────────────────────────────────────────── */
[data-theme="dark"] .ts-control {
  background: #232C39 !important;
  color: #F2F4F7 !important;
  border-color: rgba(255,255,255,0.12) !important;
}
[data-theme="dark"] .ts-dropdown {
  background: #232C39 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #F2F4F7 !important;
}
[data-theme="dark"] .ts-dropdown .option:hover,
[data-theme="dark"] .ts-dropdown .option.active { background: #2a3447 !important; }
[data-theme="dark"] .ts-dropdown .option.selected { color: var(--stolia-teal,#00C2B2) !important; }

/* ================================================================
   DRAG & DROP REORDER — sortable config tables
   ================================================================ */
.drag-handle {
  cursor: grab;
  color: var(--gray-400, #9CA3AF);
  padding: 0 6px;
  user-select: none;
  display: inline-block;
  line-height: 1;
  font-size: 1rem;
}
.drag-handle:active { cursor: grabbing; }
.drag-handle:hover { color: var(--color-primary, #1677FF); }

tr.sortable-ghost { opacity: 0.35; background: var(--gray-100, #F2F4F7); }
tr.sortable-chosen { background: var(--color-primary-subtle, #EFF6FF) !important; }
tr.sortable-drag   { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }

.reorder-saved {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.75rem;
  color: var(--status-success-text, #15803d);
  opacity: 0;
  transition: opacity 0.4s;
}
.reorder-saved.show { opacity: 1; }

/* ── PAGO-CTL — formulario compacto "marcar como pagado" ───────────────── */
form.pago-ctl {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0; padding: 0;
}
form.pago-ctl.pago-ctl-sm { gap: 3px; }

.pg-date-wrap {
  display: inline-flex; align-items: center; gap: 4px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
  padding: 3px 6px; cursor: text;
}
.pg-date-wrap svg {
  width: 14px; height: 14px; flex-shrink: 0;
  color: #64748b; pointer-events: none;
}
.pg-date-wrap input[type="date"] {
  border: none; background: transparent; outline: none;
  font-size: 0.8rem; color: #1e293b; padding: 0; margin: 0;
  width: 116px;
}
.pago-ctl-sm .pg-date-wrap input[type="date"] { font-size: 0.74rem; width: 106px; }

button.pg-hoy {
  padding: 3px 7px; border: 1px solid #e2e8f0; border-radius: 6px;
  background: #f1f5f9; color: #475569; font-size: 0.75rem; font-weight: 600;
  cursor: pointer; line-height: 1.4; white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
button.pg-hoy:hover { background: #e2e8f0; color: #1e293b; }
.pago-ctl-sm button.pg-hoy { font-size: 0.7rem; padding: 2px 6px; }

button.pg-go {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border: none; border-radius: 6px;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
  color: #fff; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: opacity 0.12s;
}
button.pg-go:hover { opacity: 0.88; }
.pago-ctl-sm button.pg-go { font-size: 0.74rem; padding: 3px 8px; }

.pg-check { width: 14px; height: 14px; flex-shrink: 0; }
.pago-ctl-sm .pg-check { width: 12px; height: 12px; }

/* ================================================================
   COHERENCIA VISUAL · PATRONES ADICIONALES
   (page-header extendido, card-section, kpi-feature, grid-kpis,
    empty-state, roadmap, chip, comparativa)
   ================================================================ */

/* --- Section spacing token (used by stolia-content gap) --- */
:root {
  --space-section: var(--space-4); /* 16px — espacio entre bloques top-level (antes 24px) */
  --space-section-lg: var(--space-8);
}

/* Optionally enforce vertical rhythm between top-level cards */
.stolia-content > * + * { margin-top: var(--space-section); }

/* --- Page header (extendido, con title__sub y actions) --- */
.page-header {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 16px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--stolia-teal);
}
.page-header__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.page-header__title h1 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
  line-height: 1.15;
  display: flex; align-items: center; gap: 8px;
}
.page-header__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}
.page-header__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* --- Card sections (header / body / footer / meta / actions) --- */
.card { padding: 0; }                               /* Override default padding when using __body */
.card.card--padded { padding: var(--space-5); }     /* Opt-in para legacy */
.card__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 0;
}
.card__header > div { min-width: 0; }
.card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.card__title svg { width: 18px; height: 18px; color: var(--color-text-muted); }
.card__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 2px 0 0;
}
.card__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.card__body   { padding: var(--space-5); }
.card__body--flush { padding: 0; }                  /* For full-bleed tables */
.card__footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface-alt);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}

/* --- KPI grid (4 cols → 2 → 1) --- */
.grid-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 1024px) { .grid-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .grid-kpis { grid-template-columns: 1fr; } }

/* --- KPI feature (big number with comparison) --- */
.kpi-feature { padding: 0; }
.kpi-feature .card__body { padding: var(--space-5); }
.kpi-feature__value {
  font-size: 44px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-text);
  margin: var(--space-3) 0 var(--space-2);
  display: flex; align-items: baseline; gap: 6px;
}
.kpi-feature__unit {
  font-size: 22px;
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}
.kpi-feature__compare {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-divider);
  margin-top: var(--space-2);
}
.kpi-feature__compare strong { color: var(--color-text); font-weight: var(--weight-semibold); }

/* --- Chips (status pills) --- */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
}
.chip--success { background: var(--status-success-bg); color: var(--status-success-text); }
.chip--info    { background: var(--status-info-bg);    color: var(--status-info-text); }
.chip--warning { background: var(--status-warning-bg); color: var(--status-warning-text); }
.chip--danger  { background: var(--status-danger-bg);  color: var(--status-danger-text); }
.chip--neutral { background: var(--status-neutral-bg); color: var(--status-neutral-text); }

/* --- Empty state (uniform across the app) --- */
.empty-state {
  padding: var(--space-10) var(--space-6);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  color: var(--color-text-muted);
}
.empty-state__icon {
  width: 44px; height: 44px;
  color: var(--color-text-subtle);
  opacity: 0.65;
}
.empty-state__icon svg { width: 100%; height: 100%; stroke-width: 1.5; }
.empty-state__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
}
.empty-state__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 360px;
  line-height: var(--leading-relaxed);
}
.empty-state__action { margin-top: var(--space-2); }

/* --- Roadmap (phases grid: done / current / pending) --- */
.roadmap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-3);
}
.roadmap__step {
  position: relative;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.roadmap__step:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.roadmap__step-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.roadmap__step-num {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}
.roadmap__step-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
  line-height: 1.25;
}
.roadmap__step-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
  margin: 0;
}
.roadmap__step.is-done {
  background: var(--color-surface-alt);
}
.roadmap__step.is-done .roadmap__step-title { color: var(--color-text); }
.roadmap__step.is-current {
  border-color: var(--stolia-blue);
  background: rgba(22, 119, 255, 0.04);
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.06);
}
.roadmap__step.is-current .roadmap__step-num { color: var(--stolia-blue); }

/* --- Comparativa label (pre-card section header) --- */
.section-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
  display: flex; align-items: center; gap: 6px;
}
.section-eyebrow svg { width: 13px; height: 13px; }

/* --- Variation chips (for comparativa numbers) --- */
.var-chip {
  display: inline-flex; align-items: center; gap: 3px;
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.var-chip--up   { background: var(--status-success-bg); color: var(--status-success-text); }
.var-chip--down { background: var(--status-danger-bg);  color: var(--status-danger-text); }
.var-chip--eq   { background: var(--status-neutral-bg); color: var(--status-neutral-text); }

/* --- Section action bar (acción contextual flotante a la derecha del contenido) --- */
.section-action-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  margin-top: 0;
}
.section-action-bar + * { margin-top: 0 !important; }
.stolia-content > .section-action-bar:first-child { margin-top: -8px; margin-bottom: var(--space-3); }

/* --- Segment group (filtros tipo iOS-style con activo SÓLIDO teal + texto blanco) --- */
.segment-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  /* margin-bottom delegado en .stolia-content > * + * para evitar duplicación */
  /* Móvil (2026-10-07): con varios segments la fila supera el ancho de la
     pantalla — scroll horizontal propio y discreto en vez de desbordar. */
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.segment-group::-webkit-scrollbar { display: none; }
.segment { flex: 0 0 auto; }
.segment {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 120ms, color 120ms;
  white-space: nowrap;
  border: none;
  background: transparent;
  cursor: pointer;
}
.segment:hover {
  color: var(--color-text);
  text-decoration: none;
}
.segment.is-active {
  background: linear-gradient(135deg, var(--stolia-teal) 0%, var(--stolia-blue) 100%);
  color: #fff;
  font-weight: var(--weight-semibold);
  box-shadow: 0 1px 2px rgba(0,194,178,0.20);
}
.segment.is-active:hover { color: #fff; }
[data-theme="dark"] .segment-group {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .segment { color: var(--color-text-muted); }
[data-theme="dark"] .segment:hover { color: var(--color-text); }
[data-theme="dark"] .segment.is-active {
  background: linear-gradient(135deg, var(--stolia-teal) 0%, var(--stolia-blue) 100%);
  color: #fff;
}

/* --- Table-stolia thead (override del header azul oscuro intenso) --- */
.table-stolia-thead th,
table .table-stolia-thead th {
  background: var(--color-surface-alt) !important;
  color: var(--color-text-muted) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-semibold) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
}

/* --- Callout (banner de aviso suave, alternativa al recuadro rojo agresivo) --- */
.callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid;
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
}
.callout__icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }
.callout__body { flex: 1; line-height: var(--leading-snug); }
.callout--warning { background: var(--status-warning-bg); border-color: #FCD9A0; color: var(--status-warning-text); }
.callout--info    { background: var(--status-info-bg);    border-color: #C8DCFB; color: var(--status-info-text); }
.callout--danger  { background: var(--status-danger-bg);  border-color: #F8C0C2; color: var(--status-danger-text); }
.callout--success { background: var(--status-success-bg); border-color: #B0E0C5; color: var(--status-success-text); }
.callout strong { font-weight: var(--weight-semibold); }
.callout a { color: inherit; text-decoration: underline; }

/* --- Module cards (dashboard global, sin hero) --- */
.modules-grid {
  display: grid;
  /* 5 columnas en >=1280px, wrap natural a tamaños inferiores. min 220 evita que se compriman demasiado */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.module-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.module-card:hover {
  text-decoration: none;
  color: var(--color-text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}
.module-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.module-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.module-card__icon svg { width: 20px; height: 20px; }
.module-card__icon--team        { background: rgba(22, 119, 255, 0.10); color: var(--stolia-blue); }
.module-card__icon--pay         { background: rgba(124, 77, 255, 0.10); color: var(--stolia-purple); }
.module-card__icon--expedientes { background: rgba(34, 197, 94, 0.10); color: var(--stolia-green); }
.module-card__icon--vehiculos   { background: rgba(255, 176, 32, 0.12); color: var(--stolia-orange); }
.module-card__icon--facturacion { background: rgba(0, 194, 178, 0.10); color: var(--stolia-teal); }
.module-card__title-group { min-width: 0; flex: 1; }
.module-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}
.module-card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 2px 0 0;
  line-height: 1.35;
}
.module-card__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}
.module-card__metric { min-width: 0; }
.module-card__metric-value {
  font-size: 22px;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.module-card__metric-value--alert { color: var(--status-danger-text); }
.module-card__metric-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.module-card__cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  margin-top: auto;
}
.module-card__cta svg { width: 14px; height: 14px; transition: transform var(--transition-fast); }
.module-card:hover .module-card__cta svg { transform: translateX(2px); }

/* ================================================================
   TYPOGRAPHY · jerarquía canónica (Fase L)
   Aplicada vía cascada CSS: cualquier h1/h2/h3/h4/h5/h6 del proyecto
   hereda el styling DS sin tocar markup. Para opt-out usar clase
   `h-legacy`.
   ================================================================ */
h1:not(.h-legacy), .h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-text);
}
h2:not(.h-legacy), .h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--color-text);
}
h3:not(.h-legacy), .h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--color-text);
}
h4:not(.h-legacy), .h4 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-text);
}
h5:not(.h-legacy), .h5 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--color-text);
}
h6:not(.h-legacy), .h6 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-text);
}

/* ================================================================
   TOAST · Notificaciones flotantes
   ================================================================ */
.toast-root {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  z-index: 10000;
  max-width: 380px;
  pointer-events: none;
}
.toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-text-muted);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-base);
  color: var(--color-text);
  pointer-events: auto;
  transform: translateX(110%);
  opacity: 0;
  transition: transform 220ms cubic-bezier(.4,.2,.2,1), opacity 220ms ease;
}
.toast.is-visible { transform: translateX(0); opacity: 1; }
.toast.is-leaving { transform: translateX(110%); opacity: 0; }
.toast__icon { display: flex; align-items: center; }
.toast__icon svg { width: 18px; height: 18px; }
.toast__body { line-height: var(--leading-snug); min-width: 0; }
.toast__close {
  background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1;
  color: var(--color-text-subtle);
  padding: 4px 6px; margin: -4px -6px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.toast__close:hover { background: var(--color-surface-alt); color: var(--color-text); }

.toast--success { border-left-color: var(--status-success-text); }
.toast--success .toast__icon { color: var(--status-success-text); }
.toast--error   { border-left-color: var(--status-danger-text); }
.toast--error   .toast__icon { color: var(--status-danger-text); }
.toast--warning { border-left-color: var(--status-warning-text); }
.toast--warning .toast__icon { color: var(--status-warning-text); }
.toast--info    { border-left-color: var(--status-info-text); }
.toast--info    .toast__icon { color: var(--status-info-text); }

/* ================================================================
   ANIMACIONES GLOBALES — transiciones sutiles
   ================================================================ */
button, a, input, select, textarea, .card, .kpi, .module-card,
.btn, .chip, .tabs__item, .topbar__tab, .segment, .sidebar__item {
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast),
              opacity var(--transition-fast);
}

/* ================================================================
   FORM FIELDS · v3 (componentes input, select, textarea unificados)
   ================================================================ */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--space-3);
}
.form-field__label {
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin: 0;
}
.lbl-req::after { content: ' *'; color: var(--status-danger-text); margin-left: 2px; }
.form-field__helper {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.form-field__error {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px;
  color: var(--status-danger-text);
  margin-top: 2px;
}
.form-field__error svg { width: 13px; height: 13px; flex-shrink: 0; }

/* DS look se aplica a todas las form-control y form-select Bootstrap por defecto.
   Así formularios legacy heredan el DS sin tocar markup. Para opt-out: añadir
   class form-control-legacy. */
.form-control:not(.form-control-legacy),
.form-select:not(.form-control-legacy),
.form-control-stolia,
.form-select-stolia {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  line-height: 1.5;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:not(.form-control-legacy):hover,
.form-select:not(.form-control-legacy):hover,
.form-control-stolia:hover,
.form-select-stolia:hover { border-color: var(--color-border-strong); }
.form-control:not(.form-control-legacy):focus,
.form-select:not(.form-control-legacy):focus,
.form-control-stolia:focus,
.form-select-stolia:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 194, 178, 0.12);
}
.form-control:not(.form-control-legacy).is-invalid,
.form-select:not(.form-control-legacy).is-invalid,
.form-control-stolia.is-invalid,
.form-select-stolia.is-invalid {
  border-color: var(--status-danger-text);
}
.form-control:not(.form-control-legacy)::placeholder,
.form-control-stolia::placeholder { color: var(--color-text-subtle); }
.form-control-sm:not(.form-control-legacy),
.form-select-sm:not(.form-control-legacy),
.form-control-stolia.form-control-sm,
.form-select-stolia.form-select-sm { padding: 5px 10px; font-size: 13px; }
.form-control-color { padding: 2px !important; cursor: pointer; }

/* ================================================================
   COMBOBOX (input con typeahead)
   ================================================================ */
.combobox { position: relative; }
.combobox__wrap { position: relative; }
.combobox__input {
  padding-right: 32px !important;
}
.combobox__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-text-subtle);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  display: none;
}
.combobox.is-open .combobox__clear,
.combobox__wrap:hover .combobox__clear { display: block; }
.combobox__clear:hover { color: var(--color-text); background: var(--color-surface-alt); }

.combobox__list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 100;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 280px;
  overflow-y: auto;
}
.combobox__option {
  padding: 8px 10px;
  font-size: 14px;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  outline: none;
}
.combobox__option:hover,
.combobox__option:focus {
  background: var(--color-surface-alt);
}
.combobox__option[hidden] { display: none; }

/* ================================================================
   TABLE · v3 respiración aumentada
   ================================================================ */
.table-stolia {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--color-text);
}
.table-stolia thead th,
.table-stolia-thead th {
  background: var(--color-surface-alt) !important;
  color: var(--color-text-muted) !important;
  font-size: 12px !important;
  font-weight: var(--weight-semibold) !important;
  text-transform: none;
  letter-spacing: 0;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-divider);
  white-space: nowrap;
}
.table-stolia thead th.text-end,
.table-stolia-thead th.text-end { text-align: right; }
.table-stolia tbody td {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-divider);
  vertical-align: middle;
}
.table-stolia tbody tr:last-child td { border-bottom: none; }
.table-stolia tbody tr:hover td { background: var(--color-surface-alt); }

.table-stolia--compact tbody td { padding: 10px 12px; }
.table-stolia--compact thead th,
.table-stolia--compact .table-stolia-thead th { padding: 9px 12px; }

/* Aplicar respiración a las tablas Bootstrap legacy también */
.card .table:not(.table-stolia--compact) tbody td,
table.table:not(.table-sm) tbody td { padding: 13px 14px; }

/* ================================================================
   ROW ACTIONS (iconos de acción de fila)
   ================================================================ */
.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.row-action {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.row-action:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
  text-decoration: none;
}
.row-action svg { width: 15px; height: 15px; }
.row-action--danger:hover {
  background: var(--status-danger-bg);
  color: var(--status-danger-text);
}

/* Botón "Deshacer pago" — chip pequeño en tonos slate/neutro,
   compacto y legible sobre cualquier fondo (también sobre filas
   verdes de "Pagada"). Usado en pay/partials/despagar-form. */
.btn-undo-pay {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: var(--weight-medium);
  background: #ffffff;
  color: #475569;                  /* slate-600 */
  border: 1px solid #cbd5e1;       /* slate-300 */
  border-radius: var(--radius-sm); /* 6px · coherente con resto de botones Stolia */
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.btn-undo-pay:hover {
  background: #1e293b;             /* slate-800 */
  color: #ffffff;
  border-color: #1e293b;
}
.btn-undo-pay svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
[data-theme="dark"] .btn-undo-pay {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.75);
  border-color: rgba(255,255,255,0.15);
}
[data-theme="dark"] .btn-undo-pay:hover {
  background: rgba(255,255,255,0.95);
  color: #1e293b;
  border-color: rgba(255,255,255,0.95);
}

/* ================================================================
   MARK PAID (componente DS para "marcar como pagado")
   ================================================================ */
.mark-paid {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.mark-paid__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}
.mark-paid__date svg { width: 13px; height: 13px; color: var(--color-text-muted); flex-shrink: 0; }
.mark-paid__date input[type="date"] {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: var(--color-text);
  padding: 0;
  margin: 0;
  width: 116px;
}
.mark-paid__today {
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.mark-paid__today:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.mark-paid__note {
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  font-size: 12px;
  width: 130px;
  outline: none;
  transition: border-color var(--transition-fast);
}
.mark-paid__note:focus {
  border-color: var(--color-primary);
}
.mark-paid__note::placeholder {
  color: var(--color-text-muted);
  font-style: italic;
}
.mark-paid__go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: none;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.mark-paid__go:hover { background: var(--color-primary-hover); }
.mark-paid__go svg { width: 13px; height: 13px; }

.mark-paid--sm .mark-paid__date { padding: 3px 6px; }
.mark-paid--sm .mark-paid__date input[type="date"] { font-size: 12px; width: 106px; }
.mark-paid--sm .mark-paid__today { padding: 3px 8px; font-size: 11px; }
.mark-paid--sm .mark-paid__go { padding: 4px 10px; font-size: 12px; }

/* ================================================================
   MODAL DS (sobre Bootstrap modal)
   ================================================================ */
.modal-stolia .modal-content {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--color-surface);
  overflow: hidden;
}
.modal-stolia__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-divider);
}
.modal-stolia__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
  display: flex;
  align-items: center;
}
.modal-stolia__title i,
.modal-stolia__title i.bi {
  font-family: 'bootstrap-icons' !important;
  font-style: normal;
  font-size: 18px;
  color: var(--stolia-teal);
}
.modal-stolia__close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-subtle);
  cursor: pointer;
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: var(--radius-sm);
}
.modal-stolia__close:hover { background: var(--color-surface-alt); color: var(--color-text); }

/* ================================================================
   MODAL DESCARGAR FACTURAS · paridad Stolia adaptado a paleta Stolia
   Tabs horizontales (icono izq + label) + summary stats inline + tabla
   ================================================================ */
.dm-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.dm-tab {
  flex: 1;
  background: var(--color-surface-alt);
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.88rem;
  text-align: left;
}
.dm-tab:hover { background: rgba(0,194,178,0.06); }
.dm-tab.active {
  background: rgba(0,194,178,0.10);
  border-color: var(--stolia-teal);
  color: var(--stolia-teal);
}
.dm-tab i,
.dm-tab i.bi {
  font-family: 'bootstrap-icons' !important;
  font-style: normal;
  font-size: 1.25rem;
  flex-shrink: 0;
  color: var(--stolia-teal);
}
.dm-panel { display: none; }
.dm-panel.active { display: block; animation: dmFade 0.2s ease; }
@keyframes dmFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Summary stats inline (Facturas / Con PDF / Ya descargadas / etc.) */
.dm-summary {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.dm-stat {
  display: flex;
  flex-direction: column;
}
.dm-stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dm-stat-num {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--stolia-teal);
  font-variant-numeric: tabular-nums;
}

#dm-results { max-height: 55vh; overflow-y: auto; }
#dm-loading {
  text-align: center;
  padding: 30px;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  display: none;
}
.dm-error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.86rem;
  margin-bottom: 12px;
}
.dm-row-done td { background: rgba(34,197,94,0.08) !important; }
.dm-row-done td:first-child input { accent-color: #16a34a; }

[data-theme="dark"] .dm-tab {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
}
[data-theme="dark"] .dm-tab.active {
  background: rgba(0,194,178,0.15);
  border-color: var(--stolia-teal);
  color: var(--stolia-teal);
}
[data-theme="dark"] .dm-summary {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .dm-error {
  background: rgba(239,68,68,0.15);
  color: #FF8585;
  border-color: rgba(239,68,68,0.30);
}

/* ================================================================
   SHOW FACTURA · breakdown de importes + lista vencimientos limpia
   ================================================================ */
.importes-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.importes-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-divider);
}
.importes-row:last-child { border-bottom: none; }
.importes-row__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--color-text);
  font-weight: var(--weight-medium);
}
.importes-row__label small {
  font-size: 11px;
  color: var(--color-text-muted);
}
.importes-row__value {
  font-weight: var(--weight-semibold);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.importes-row--negative .importes-row__value { color: var(--color-text-muted); }

/* Vencimientos · lista limpia */
.venc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.venc-item {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: all 0.15s ease;
}
.venc-item--paid {
  background: rgba(34,197,94,0.06);
  border-color: rgba(34,197,94,0.20);
}
.venc-item--overdue {
  background: rgba(255,77,79,0.06);
  border-color: rgba(255,77,79,0.25);
}
.venc-item__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.venc-item__date {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  margin-bottom: 2px;
}
.venc-item__amount {
  font-size: 17px;
  font-weight: var(--weight-bold);
  color: var(--stolia-teal);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.venc-item--overdue .venc-item__amount { color: var(--stolia-red); }
.venc-item--paid .venc-item__amount { color: #16a34a; }
.venc-item__paid-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 6px;
}
.venc-item__notes {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--color-divider);
}
.venc-item__action {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-divider);
}
[data-theme="dark"] .venc-item {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}

/* Adjunto preview · file card limpia */
.adjunto-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.20);
  border-radius: var(--radius-md);
}
.adjunto-preview__icon {
  font-size: 1.6rem !important;
  color: #dc2626 !important;
  font-family: 'bootstrap-icons' !important;
  flex-shrink: 0;
}
.adjunto-preview__info {
  flex: 1;
  min-width: 0;
}
.adjunto-preview__name {
  font-weight: var(--weight-semibold);
  font-size: 13px;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adjunto-preview__meta {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.adjunto-preview__actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
[data-theme="dark"] .adjunto-preview {
  background: rgba(34,197,94,0.10);
  border-color: rgba(34,197,94,0.25);
}

/* ================================================================
   PDF UPLOADER · componente DS canónico
   Patrón unificado para subir/ver/descargar/eliminar PDFs en TODA la app.
   Usado vía <x-stolia.pdf-uploader> · documentado en IDENTIDAD-VISUAL.md §23
   ================================================================ */
.pdf-uploader {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Lista de archivos existentes */
.pdf-uploader__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pdf-uploader__file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.22);
  border-radius: var(--radius-md);
  transition: border-color 120ms, background 120ms;
}
.pdf-uploader__file:hover {
  border-color: rgba(34,197,94,0.35);
}
.pdf-uploader__file-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  color: #dc2626;
  border-radius: var(--radius-sm);
  font-size: 18px;
}
.pdf-uploader__file-icon i,
.pdf-uploader__file-icon i.bi {
  font-family: 'bootstrap-icons' !important;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
}
.pdf-uploader__file-info {
  flex: 1;
  min-width: 0;
}
.pdf-uploader__file-name {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdf-uploader__file-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdf-uploader__file-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Botones de acción individual (Ver / Descargar / Eliminar) */
.pdf-uploader__action {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: all 120ms;
  padding: 0;
}
.pdf-uploader__action:hover {
  color: var(--stolia-teal);
  border-color: var(--stolia-teal);
  background: rgba(0,194,178,0.06);
  text-decoration: none;
}
.pdf-uploader__action i,
.pdf-uploader__action i.bi {
  font-family: 'bootstrap-icons' !important;
  font-style: normal;
  font-size: 14px;
  line-height: 1;
}
.pdf-uploader__action--danger:hover {
  color: var(--stolia-red);
  border-color: rgba(255,77,79,0.30);
  background: rgba(255,77,79,0.06);
}

/* Form de subida */
.pdf-uploader__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pdf-uploader__title-input { margin-bottom: 0; }

/* Dropzone */
.pdf-uploader__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 28px 20px;
  /* DS §23: dropzone neutro con acento teal (el tinte naranja previo
     era herencia de v1, fuera de la anatomía canónica) */
  background: var(--color-surface-alt);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 160ms ease;
  margin: 0;
  text-align: center;
}
.pdf-uploader__dropzone:hover,
.pdf-uploader__dropzone.is-drag {
  background: rgba(0,194,178,0.06);
  border-color: var(--stolia-teal);
}
/* Con archivos elegidos: borde sólido teal y check (lo gestiona pdf-uploader.js) */
.pdf-uploader__dropzone--filled {
  border-style: solid;
  border-color: var(--stolia-teal);
  background: rgba(0,194,178,0.06);
  padding: 16px 20px;
}
.pdf-uploader__dropzone--filled .pdf-uploader__dropzone-icon { color: var(--stolia-teal); }
.pdf-uploader__dropzone input[type="file"] { display: none; }
.pdf-uploader__dropzone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  color: var(--stolia-teal);
}
.pdf-uploader__dropzone-icon i,
.pdf-uploader__dropzone-icon i.bi {
  font-family: 'bootstrap-icons' !important;
  font-style: normal;
  font-size: 28px;
  line-height: 1;
}
.pdf-uploader__dropzone-text {
  font-size: 14px;
  color: var(--color-text);
  font-weight: var(--weight-medium);
}
.pdf-uploader__dropzone-text strong {
  font-weight: var(--weight-bold);
  color: var(--color-text);
}
.pdf-uploader__dropzone-hint {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Lista de archivos seleccionados antes de subir (preview) */
.pdf-uploader__selected {
  font-size: 12px;
  color: var(--color-text);
  background: rgba(0,194,178,0.08);
  border: 1px solid rgba(0,194,178,0.22);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.pdf-uploader__selected strong {
  font-weight: var(--weight-semibold);
  color: var(--stolia-teal);
}
.pdf-uploader__selected ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

/* Botón submit · CTA gradient teal→azul */
.pdf-uploader__submit {
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(135deg, var(--stolia-teal) 0%, var(--stolia-blue) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md);
  padding: 11px 18px;
  font-weight: var(--weight-semibold);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: filter 160ms, transform 120ms;
  width: 100%;
  text-decoration: none;
}
.pdf-uploader__submit:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  color: #fff !important;
  text-decoration: none;
}
.pdf-uploader__submit i,
.pdf-uploader__submit i.bi {
  font-family: 'bootstrap-icons' !important;
  font-style: normal;
  font-size: 14px;
  line-height: 1;
}

/* Dark mode overrides */
[data-theme="dark"] .pdf-uploader__file {
  background: rgba(34,197,94,0.10);
  border-color: rgba(34,197,94,0.25);
}
[data-theme="dark"] .pdf-uploader__file-icon {
  background: rgba(220,38,38,0.18);
  color: #FCA5A5;
}
[data-theme="dark"] .pdf-uploader__action {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.65);
}
[data-theme="dark"] .pdf-uploader__action:hover {
  background: rgba(0,194,178,0.12);
  border-color: var(--stolia-teal);
  color: var(--stolia-teal);
}
[data-theme="dark"] .pdf-uploader__action--danger:hover {
  background: rgba(255,77,79,0.12);
  border-color: var(--stolia-red);
  color: #FF8585;
}
[data-theme="dark"] .pdf-uploader__dropzone {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.15);
}
[data-theme="dark"] .pdf-uploader__dropzone:hover,
[data-theme="dark"] .pdf-uploader__dropzone.is-drag {
  background: rgba(0,194,178,0.08);
  border-color: var(--stolia-teal);
}
[data-theme="dark"] .pdf-uploader__selected {
  background: rgba(0,194,178,0.10);
  border-color: rgba(0,194,178,0.25);
}

/* ================================================================
   MODAL PREVIEW PDF · singleton del layout para <x-stolia.pdf-uploader>
   Barra fina del mismo gris que la toolbar nativa de PDF.js → continuidad
   visual (parecen una sola barra). Sólo botón cerrar (el visor ya trae
   descargar / imprimir / kebab en su propia toolbar).
   ================================================================ */
.pdf-preview-modal .modal-dialog {
  max-width: min(1200px, 92vw);
  height: 92vh;
  margin-top: 4vh;
  margin-bottom: 4vh;
}
.pdf-preview-modal__content {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #38383d;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.pdf-preview-modal__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 40px;
  padding: 0 8px 0 16px;
  background: #38383d;
  border-bottom: 1px solid #1a1a1c;
  flex-shrink: 0;
}
.pdf-preview-modal__name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}
.pdf-preview-modal__action,
.pdf-preview-modal__close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.70);
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms, color 120ms;
  padding: 0;
  flex-shrink: 0;
}
/* Variante con etiqueta (Imprimir / Compartir) — paridad con LaviHub v1 */
.pdf-preview-modal__action--labeled {
  width: auto;
  padding: 0 10px;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.30);
  color: rgba(255,255,255,0.85);
}
.pdf-preview-modal__action--labeled:hover {
  border-color: rgba(255,255,255,0.55);
}
.pdf-preview-modal__action:hover,
.pdf-preview-modal__close:hover {
  background: rgba(255,255,255,0.10);
  color: #fff;
  text-decoration: none;
}
.pdf-preview-modal__action i,
.pdf-preview-modal__action i.bi,
.pdf-preview-modal__close i,
.pdf-preview-modal__close i.bi {
  font-family: 'bootstrap-icons' !important;
  font-style: normal;
  font-size: 13px;
  line-height: 1;
}
.pdf-preview-modal__iframe {
  flex: 1;
  width: 100%;
  border: 0;
  display: block;
  background: #525659;
  min-height: 0;
}

/* Show pages compactar: card-body más denso, KPIs sumario más compactos */
.show-page .card .card-body { padding: 14px 16px !important; }
.show-page .fc-title { margin-bottom: 0.85rem !important; }
.show-page .kpi { padding: 12px 14px !important; }
.show-page .kpi__label { font-size: 11px !important; }
.show-page .kpi__value { font-size: 20px !important; }
.show-page .kpi__icon { width: 28px !important; height: 28px !important; }
.show-page .kpi__icon svg { width: 14px !important; height: 14px !important; }
.show-page .kpi__delta { font-size: 11px !important; }
.show-page .venc-item { padding: 10px 12px !important; }
.show-page .venc-item__amount { font-size: 16px !important; }
.show-page .importes-row { padding: 8px 0 !important; }
.show-page .fc-total-display { padding: 14px 18px !important; }
.show-page .fc-total-display .fc-total-value { font-size: 1.6rem !important; }
.show-page .fc-total-display .fc-total-label { font-size: 0.85rem !important; }

/* Variant hero · header con gradient teal→azul (estilo Stolia navy→burdeos) */
.modal-stolia__header--hero {
  background: linear-gradient(135deg, var(--stolia-teal) 0%, var(--stolia-blue) 100%);
  border-bottom: none;
  color: #fff;
}
.modal-stolia__header--hero .modal-stolia__title { color: #fff; }
.modal-stolia__header--hero .modal-stolia__title i { color: rgba(255,255,255,0.95); }
.modal-stolia__header--hero .modal-stolia__close {
  color: rgba(255,255,255,0.85);
}
.modal-stolia__header--hero .modal-stolia__close:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.modal-stolia__body { padding: var(--space-5); }
.modal-stolia__footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-divider);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  background: var(--color-surface-alt);
}

/* Card seleccionable (para modal con múltiples modos) */
.card--selectable {
  cursor: pointer;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all var(--transition-fast);
  text-align: center;
}
.card--selectable:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-alt);
}
.card--selectable.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  box-shadow: 0 0 0 3px rgba(0, 194, 178, 0.08);
}
.card--selectable svg { width: 24px; height: 24px; color: var(--color-primary); margin: 0 auto 4px; }
.card--selectable h4 { font-size: 14px; font-weight: var(--weight-semibold); color: var(--color-text); margin: 0; }
.card--selectable p { font-size: 12px; color: var(--color-text-muted); margin: 0; }

/* ================================================================
   SKELETON (placeholder animado para loading)
   ================================================================ */
@keyframes skeleton-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
  display: block;
  background: var(--color-surface-alt);
  background-image: linear-gradient(90deg, var(--color-surface-alt), var(--gray-150), var(--color-surface-alt));
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: var(--radius-sm);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton--text { height: 14px; margin-bottom: 8px; }
.skeleton--circle { border-radius: var(--radius-full); }
.skeleton-card { display: flex; flex-direction: column; gap: 8px; padding: var(--space-4); }
[data-theme="dark"] .skeleton {
  background: var(--gray-700);
  background-image: linear-gradient(90deg, var(--gray-700), var(--gray-600), var(--gray-700));
}

/* ================================================================
   FORM GRID (utilidad para layouts de formulario)
   ================================================================ */
.form-grid { display: grid; gap: var(--space-3); }
.form-grid--2cols { grid-template-columns: repeat(2, 1fr); }
.form-grid--3cols { grid-template-columns: repeat(3, 1fr); }
.form-grid--4cols { grid-template-columns: repeat(4, 1fr); }
.form-grid__col-span-2 { grid-column: span 2; }
.form-grid__col-span-3 { grid-column: span 3; }
@media (max-width: 768px) {
  .form-grid--2cols, .form-grid--3cols, .form-grid--4cols { grid-template-columns: 1fr; }
  .form-grid__col-span-2, .form-grid__col-span-3 { grid-column: span 1; }
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

/* ================================================================
   PAY/RESUMEN · densidad Stolia (1080p sin scroll)
   ================================================================ */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
/* Sprint C2.5 · variant 4 columnas para dashboards "vistazo rápido" */
.kpi-strip--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1280px) { .kpi-strip { grid-template-columns: repeat(3, 1fr); } .kpi-strip--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .kpi-strip { grid-template-columns: repeat(2, 1fr); } .kpi-strip--4 { grid-template-columns: repeat(2, 1fr); } }

/* Sprint C2.5 · KPI mini con borde lateral según severidad (clickable) */
.kpi-mini {
  text-decoration: none;
  color: inherit;
  border-left-width: 3px;
}
.kpi-mini--danger  { border-left-color: var(--stolia-red, #DC2626) !important; }
.kpi-mini--warning { border-left-color: var(--stolia-orange, #D97706) !important; }
.kpi-mini--success { border-left-color: var(--stolia-green, #15803D) !important; }
.kpi-mini__sublabel {
  font-size: 12px;
  font-weight: var(--weight-regular, 400);
  color: var(--color-text-muted);
  letter-spacing: 0;
}

.kpi-mini {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.kpi-mini:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.kpi-mini__value {
  font-size: 19px;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.kpi-mini__label {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.kpi-mini__icon {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 14px;
  height: 14px;
  opacity: 0.7;
}
.kpi-mini__icon--info    { color: var(--status-info-text); }
.kpi-mini__icon--danger  { color: var(--status-danger-text); }
.kpi-mini__icon--warning { color: var(--status-warning-text); }
.kpi-mini__icon--success { color: var(--status-success-text); }
.kpi-mini__icon--neutral { color: var(--color-text-subtle); }

/* Cuadrícula 2×2 de cards. Altura calculada para caber en 1080p:
   1080 - topbar(56+48) - content padding(24+24) = ~928
   - kpi-strip: ~70
   - margin-bottom: 12
   - Disponible para grid: ~846
   - Grid con gap 12 entre filas → cada fila ~417, cada card ~417 max */
.pay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  /* Calc para que en 1080p TODO quepa sin scroll: viewport - topbar(56+48) - content padding (16+24) - kpi-strip - gap */
  height: calc(100vh - 56px - 48px - 40px - 96px);
  min-height: 460px;
}
/* Sprint C2.5 · variant 3 columnas para dashboard Pay rediseñado.
   Layout: 2 filas × 3 columnas = 6 celdas, con la card Seguros ocupando
   2 columnas en la fila inferior (4 cards de pago + 1 Seguros = 5 cells). */
.pay-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}
.pay-card--span-2 { grid-column: span 2; }
.pay-card--danger { border-left: 3px solid var(--stolia-red, #DC2626); }

@media (max-width: 1280px) {
  .pay-grid--3col { grid-template-columns: 1fr 1fr; }
  .pay-card--span-2 { grid-column: span 2; }
}
@media (max-width: 1024px) {
  .pay-grid { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
  .pay-grid--3col { grid-template-columns: 1fr; }
  .pay-card--span-2 { grid-column: span 1; }
}

/* Sprint C2.5 · mini-grid para KPIs internos de la card Seguros */
.seguros-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-divider);
}
.seguros-mini {
  text-align: center;
  padding: 8px 6px;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt, #f9fafb);
  border-left: 3px solid transparent;
}
.seguros-mini__value { font-size: 20px; font-weight: var(--weight-bold); display: block; line-height: 1.1; }
.seguros-mini__label { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.seguros-mini--success { border-left-color: var(--stolia-green, #15803D); background: rgba(22, 163, 74, 0.06); }
.seguros-mini--warning { border-left-color: var(--stolia-orange, #D97706); background: rgba(217, 119, 6, 0.06); }
.seguros-mini--danger  { border-left-color: var(--stolia-red, #DC2626); background: rgba(220, 38, 38, 0.06); }
.seguros-mini--info    { border-left-color: #0EA5E9; background: rgba(14, 165, 233, 0.06); }

.pay-list--seguros { padding: 0 14px 10px; }

.pay-card {
  display: flex;
  flex-direction: column;
  min-height: 0;     /* Permite que flex children scroll cuando overflow */
  overflow: hidden;
}
.pay-card__header {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: 0;
  flex-shrink: 0;
}
.pay-card__header .card__title { font-size: var(--text-base); }
.card__title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pay-card__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--space-4);
  color: var(--color-text-muted);
  font-size: 12px;
}
.pay-card__empty svg { width: 24px; height: 24px; opacity: 0.55; }
.pay-card__foot {
  padding: 6px 14px;
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface-alt);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-text);
  flex-shrink: 0;
}
.pay-card__foot strong { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

/* Pay list (filas compactas dentro de las cards 2×2) */
.pay-list { flex: 1; padding: 0; overflow-y: auto; min-height: 0; }
.pay-list__item {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  text-decoration: none;
  color: var(--color-text);
  font-size: 12px;
  border-bottom: 1px solid var(--color-divider);
  transition: background var(--transition-fast);
}
.pay-list__item:last-child { border-bottom: none; }
.pay-list__item:hover { background: var(--color-surface-alt); text-decoration: none; color: var(--color-text); }

.pay-list__avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: var(--gray-600);
  background: var(--gray-100);
  flex-shrink: 0;
}
.pay-list__avatar[data-hash="0"] { background: rgba(22,119,255,.10);  color: var(--stolia-blue); }
.pay-list__avatar[data-hash="1"] { background: rgba(0,194,178,.10);   color: var(--stolia-teal); }
.pay-list__avatar[data-hash="2"] { background: rgba(124,77,255,.10);  color: var(--stolia-purple); }
.pay-list__avatar[data-hash="3"] { background: rgba(255,176,32,.12);  color: var(--stolia-orange); }
.pay-list__avatar[data-hash="4"] { background: rgba(34,197,94,.10);   color: var(--stolia-green); }
.pay-list__avatar[data-hash="5"] { background: rgba(255,77,79,.08);   color: var(--stolia-red); }
.pay-list__avatar[data-hash="6"] { background: rgba(75,85,99,.10);    color: var(--gray-700); }
.pay-list__avatar[data-hash="7"] { background: rgba(15,95,217,.10);   color: var(--status-info-text); }

.pay-list__info { min-width: 0; line-height: 1.2; }
.pay-list__name {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pay-list__meta {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pay-list__amount {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  text-align: right;
  white-space: nowrap;
}
.pay-list__status {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  min-width: 48px;
  text-align: right;
}

/* ================================================================
   CONFIG NAV (sub-menu lateral de Configuración)
   ================================================================ */
.config-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 6px;
  position: sticky;
  top: calc(var(--topbar-height) + var(--topbar-row2-height) + var(--space-3));
}
.config-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
}
.config-nav__item:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
  text-decoration: none;
}
.config-nav__item i { font-size: 14px; opacity: 0.7; flex-shrink: 0; }
.config-nav__item.is-active {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}
.config-nav__item.is-active i { opacity: 1; }
.config-nav__item.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--color-primary);
  border-radius: 0 2px 2px 0;
}

/* ================================================================
   FILTERS BAR (cinta de filtros sobre listados)
   ================================================================ */
.filters-bar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  position: relative;
  /* margin-bottom delegado en .stolia-content > * + * para evitar duplicación */
}
.filters-bar.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, transparent 0%, rgba(0,194,178,0.10) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  pointer-events: none;
}
/* ──────────────────────────────────────────────────────────────────────
   Filters bar · NORMA UNIFICADA Stolia
   ──────────────────────────────────────────────────────────────────────
   - Una sola fila flex con todos los campos del mismo ancho y altura
   - Todos los inputs/selects/comboboxes a 32px de alto (form-control-sm)
   - Tab navega entre campos · Enter lanza el filtro (HTML nativo del form)
   - Si es selección de entidad (cliente, proveedor, artículo…) usar
     <x-stolia.combobox> en lugar de <x-stolia.select>
*/
.filters-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: stretch;
}
.filters-form > *:not(.filters-form__actions) {
  flex: 1 1 0;
  min-width: 140px;
}
.filters-form .form-field { margin-bottom: 0; }
.filters-form input,
.filters-form select,
.filters-form .combobox__input,
.filters-form .form-select,
.filters-form .form-control {
  width: 100% !important;
  max-width: none !important;
  height: 32px !important;        /* misma altura para todos */
  padding: 4px 10px !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}
.filters-form .combobox,
.filters-form .combobox__wrap {
  width: 100% !important;
  height: 32px !important;
}
/* TomSelect (.ts-wrapper / .ts-control) — el wrapper tenía padding que
   empujaba el control 4px hacia abajo, rompiendo la alineación. */
.filters-form .ts-wrapper {
  width: 100% !important;
  height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.filters-form .ts-control {
  height: 32px !important;
  min-height: 32px !important;
  padding: 4px 28px 4px 10px !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}
.filters-form__actions {
  display: flex;
  gap: var(--space-2); /* 8px · respiración entre Filtrar / Limpiar / PDF */
  align-items: center;
  white-space: nowrap;
  flex: 0 0 auto;
}
@media (max-width: 768px) {
  .filters-form > *:not(.filters-form__actions) { flex: 1 1 calc(50% - var(--space-3)); }
  .filters-form__actions { flex: 1 1 100%; justify-content: flex-end; }
}

/* ================================================================
   BUTTON variants extra (danger, success usados en forms)
   ================================================================ */
.btn-danger-stolia {
  background: var(--status-danger-text) !important;
  border: none !important;
  color: #fff !important;
}
.btn-danger-stolia:hover { background: #b32830 !important; color: #fff !important; }
.btn-success-stolia {
  background: var(--status-success-text) !important;
  border: none !important;
  color: #fff !important;
}
.btn-success-stolia:hover { background: #086c37 !important; color: #fff !important; }

/* ================================================================
   BUTTON SYSTEM · Stolia v4 — degradados con presencia
   ----------------------------------------------------------------
   Todos los botones de la app heredan el look DS por defecto.
   Sistema canónico:

   PRIMARY (acción principal · degradado teal→azul-oscuro · texto blanco):
     .btn-primary         · 36px alto, padding 16px, font 14px semibold
     .btn-primary.btn-sm  · 32px alto, padding 12px, font 13px
     .btn-primary.btn-lg  · 44px alto, padding 22px, font 15px (CTAs hero)

   SECONDARY (outline neutro · hover sólido):
     .btn-secondary       · borde + texto, hover surface-alt
     .btn-outline-primary · borde primary, hover bg primary-subtle

   GHOST (sin borde, solo texto · acciones terciarias):
     .btn-ghost           · texto muted, hover surface-alt

   DANGER (degradado rojo):
     .btn-danger / .btn-danger-stolia

   PILL DARK (atajos · oscuro elegante con presencia tipo Stolia):
     .btn-pill-dark       · degradado teal→navy oscuro, redondeado pill
     .btn-pill-dark.is-active  · primary teal sólido

   Para opt-out: clase .btn-legacy
   ================================================================ */

/* PRIMARY heredado a todos los .btn-primary del proyecto */
.btn-primary:not(.btn-legacy) {
  background: linear-gradient(135deg, var(--stolia-teal) 0%, var(--stolia-blue) 100%) !important;
  color: #fff !important;
  border: none !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: -0.005em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  height: 36px !important;
  font-size: 14px !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  transition: transform 120ms cubic-bezier(.4,.2,.2,1), filter 120ms !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.btn-primary:not(.btn-legacy):hover {
  background: linear-gradient(135deg, #00A89A 0%, #0c5fdb 100%) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: none !important;
  text-decoration: none !important;
}
.btn-primary:not(.btn-legacy):active { transform: translateY(0); }
.btn-primary:not(.btn-legacy).btn-sm {
  height: 32px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
}
.btn-primary:not(.btn-legacy).btn-lg {
  height: 44px !important;
  padding: 0 22px !important;
  font-size: 15px !important;
}
.btn-primary:not(.btn-legacy) svg,
.btn-primary:not(.btn-legacy) i { flex-shrink: 0; }

/* SECONDARY · borde elegante, hover sólido */
.btn-secondary:not(.btn-legacy) {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
  font-weight: var(--weight-medium) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  height: 36px !important;
  font-size: 14px !important;
  border-radius: var(--radius-md) !important;
  transition: background 120ms, border-color 120ms !important;
  text-decoration: none !important;
}
.btn-secondary:not(.btn-legacy):hover {
  background: var(--color-surface-alt) !important;
  border-color: var(--color-border-strong) !important;
  color: var(--color-text) !important;
  text-decoration: none !important;
}
.btn-secondary:not(.btn-legacy).btn-sm { height: 32px !important; padding: 5px 12px !important; font-size: 13px !important; }

/* OUTLINE primary */
.btn-outline-primary:not(.btn-legacy) {
  background: transparent !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
  font-weight: var(--weight-semibold) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  height: 36px !important;
  font-size: 14px !important;
  border-radius: var(--radius-md) !important;
  transition: background 120ms !important;
  text-decoration: none !important;
}
.btn-outline-primary:not(.btn-legacy):hover {
  background: var(--color-primary-subtle) !important;
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  text-decoration: none !important;
}
.btn-outline-primary:not(.btn-legacy).btn-sm { height: 32px !important; padding: 5px 12px !important; font-size: 13px !important; }

/* OUTLINE secondary (legacy Bootstrap clase) — lo tratamos como btn-secondary */
.btn-outline-secondary:not(.btn-legacy) {
  background: var(--color-surface) !important;
  color: var(--color-text-muted) !important;
  border: 1px solid var(--color-border) !important;
  font-weight: var(--weight-medium) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  height: 36px !important;
  font-size: 14px !important;
  border-radius: var(--radius-md) !important;
  transition: background 120ms !important;
  text-decoration: none !important;
}
.btn-outline-secondary:not(.btn-legacy):hover {
  background: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border-strong) !important;
  text-decoration: none !important;
}
.btn-outline-secondary:not(.btn-legacy).btn-sm { height: 32px !important; padding: 5px 12px !important; font-size: 13px !important; }

/* OUTLINE DANGER · mismo relieve que el secondary (fondo surface + borde
   visible) con el icono/texto en rojo; relleno rojo solo al hover.
   Sin esto caía al Bootstrap pelado y se veía sin borde (Frederic 2026-10-13). */
.btn-outline-danger:not(.btn-legacy) {
  background: var(--color-surface) !important;
  color: var(--stolia-red) !important;
  border: 1px solid var(--color-border) !important;
  font-weight: var(--weight-medium) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  height: 36px !important;
  font-size: 14px !important;
  border-radius: var(--radius-md) !important;
  transition: background 120ms !important;
  text-decoration: none !important;
}
.btn-outline-danger:not(.btn-legacy):hover {
  background: var(--stolia-red) !important;
  color: #fff !important;
  border-color: var(--stolia-red) !important;
  text-decoration: none !important;
}
.btn-outline-danger:not(.btn-legacy).btn-sm { height: 32px !important; padding: 5px 12px !important; font-size: 13px !important; }

/* GHOST · texto solamente */
.btn-ghost:not(.btn-legacy) {
  background: transparent !important;
  color: var(--color-text-muted) !important;
  border: none !important;
  font-weight: var(--weight-medium) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 12px !important;
  height: 36px !important;
  font-size: 14px !important;
  border-radius: var(--radius-md) !important;
  transition: background 120ms, color 120ms !important;
  text-decoration: none !important;
}
.btn-ghost:not(.btn-legacy):hover {
  background: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
  text-decoration: none !important;
}
.btn-ghost:not(.btn-legacy).btn-sm { height: 32px !important; padding: 5px 10px !important; font-size: 13px !important; }

/* DANGER · degradado rojo */
.btn-danger:not(.btn-legacy) {
  background: linear-gradient(135deg, var(--stolia-red) 0%, #b32830 100%) !important;
  color: #fff !important;
  border: none !important;
  font-weight: var(--weight-semibold) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  height: 36px !important;
  font-size: 14px !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 1px 2px rgba(255,77,79,0.18) !important;
  transition: transform 120ms, box-shadow 120ms !important;
  text-decoration: none !important;
}
.btn-danger:not(.btn-legacy):hover {
  background: linear-gradient(135deg, #db4448 0%, #8b1d24 100%) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.btn-danger:not(.btn-legacy).btn-sm { height: 32px !important; padding: 6px 12px !important; font-size: 13px !important; }

/* PILL DARK · atajos elegantes (30d / 60d / Hoy / Contado / Generar) */
.btn-pill-dark {
  background: linear-gradient(135deg, var(--gray-800) 0%, var(--stolia-navy) 100%);
  color: #fff !important;
  border: none;
  font-weight: var(--weight-semibold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  height: 32px;
  font-size: 13px;
  border-radius: 100px;  /* pill */
  box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 120ms, box-shadow 120ms, filter 120ms;
  text-decoration: none !important;
  cursor: pointer;
}
.btn-pill-dark:hover {
  filter: brightness(1.18);
  transform: translateY(-1px);
  color: #fff !important;
  text-decoration: none !important;
}
.btn-pill-dark.is-active,
.btn-pill-dark:active {
  background: linear-gradient(135deg, var(--stolia-teal) 0%, var(--stolia-blue) 100%);
}

/* Iconos dentro de cualquier botón */
.btn-primary svg, .btn-secondary svg, .btn-outline-primary svg, .btn-outline-secondary svg,
.btn-ghost svg, .btn-danger svg, .btn-pill-dark svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Dark mode adjustments para botones del sistema */
[data-theme="dark"] .btn-secondary:not(.btn-legacy) {
  background: rgba(255,255,255,0.04) !important;
  color: var(--color-text) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
[data-theme="dark"] .btn-secondary:not(.btn-legacy):hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
[data-theme="dark"] .btn-outline-secondary:not(.btn-legacy) {
  background: transparent !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: var(--color-text-muted) !important;
}
[data-theme="dark"] .btn-outline-secondary:not(.btn-legacy):hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--color-text) !important;
}
[data-theme="dark"] .btn-ghost:not(.btn-legacy):hover {
  background: rgba(255,255,255,0.04) !important;
}

/* ================================================================
   CARD BANNER · cabecera subtle de card · estilo Stolia elegante
   ----------------------------------------------------------------
   Filosofía: en lugar de banner sólido cromático (que se siente
   "casposo" tipo Bootstrap viejo), usamos una cabecera blanca con:
     · barra accent lateral 3px en color del módulo
     · icono pequeño en color del módulo
     · título en dark text (semibold)
     · border-bottom sutil para separar del body
   Da identidad sin gritar. Moderno, elegante, alineado con
   referencias Linear/Stripe/Vercel.

   Variantes (color del accent + icono):
   .card-banner-primary  · teal      (default · acción / contenido)
   .card-banner-dark     · navy      (totales / sumarios)
   .card-banner-success  · verde     (confirmaciones / pagados)
   .card-banner-warning  · naranja
   .card-banner-danger   · rojo
   ================================================================ */
.card-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 12px 14px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  border-left: 3px solid var(--stolia-teal);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.005em;
  color: var(--color-text);
}
.card-banner svg, .card-banner i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--stolia-teal);
}
.card-banner-primary { border-left-color: var(--stolia-teal); }
.card-banner-primary svg, .card-banner-primary i { color: var(--stolia-teal); }
.card-banner-dark    { border-left-color: var(--stolia-navy); }
.card-banner-dark svg, .card-banner-dark i { color: var(--stolia-navy); }
.card-banner-success { border-left-color: var(--stolia-green); }
.card-banner-success svg, .card-banner-success i { color: var(--stolia-green); }
.card-banner-warning { border-left-color: #d97706; }
.card-banner-warning svg, .card-banner-warning i { color: #d97706; }
.card-banner-danger  { border-left-color: var(--stolia-red); }
.card-banner-danger svg, .card-banner-danger i { color: var(--stolia-red); }

.card-banner__meta {
  margin-left: auto;
  font-weight: var(--weight-medium);
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: 0;
}

[data-theme="dark"] .card-banner {
  background: rgba(255,255,255,0.02);
  border-bottom-color: rgba(255,255,255,0.06);
}

/* Hero card · banner total prominente al pie de cards de cierre.
   Sombra clean (no halo multicolor): solo depth sutil. */
.hero-card {
  background: linear-gradient(135deg, var(--stolia-teal) 0%, var(--stolia-blue) 100%);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.06);
}
.hero-card__label {
  font-size: 13px;
  font-weight: var(--weight-medium);
  opacity: 0.95;
  letter-spacing: 0.01em;
}
.hero-card__value {
  font-size: 26px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hero-card--dark {
  background: linear-gradient(135deg, #1f2937 0%, var(--stolia-navy) 100%);
  box-shadow: 0 2px 8px rgba(13,17,23,0.18), 0 1px 2px rgba(13,17,23,0.08);
}

/* ================================================================
   DASHBOARD HERO · saludo grande del portal global (sustituye page-header)
   ================================================================ */
.dashboard-hero {
  margin: 0 0 var(--space-3);
  padding: 0 0 var(--space-2);
}
.dashboard-hero__title {
  font-size: 22px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.2;
  margin: 0;
}
.dashboard-hero__subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 2px 0 0;
  /* La fecha viene formateada del backend con capitalización correcta */
}
.dashboard-hero__subtitle::first-letter { text-transform: uppercase; }

/* ================================================================
   PAY/RESUMEN · Charts grid + Shortcuts (Acciones rápidas)
   ================================================================ */
.pay-charts-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
}
@media (max-width: 1024px) { .pay-charts-grid { grid-template-columns: 1fr; } }
.pay-charts-grid .pay-card { min-height: 280px; }

.pay-shortcut-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 14px 16px;
}
@media (max-width: 1024px) { .pay-shortcut-row { grid-template-columns: repeat(2, 1fr); } }
.pay-shortcut {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition: transform 120ms, border-color 120ms, box-shadow 120ms;
}
.pay-shortcut:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  text-decoration: none;
  color: var(--color-text);
}
.pay-shortcut__icon {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--stolia-teal) 0%, var(--stolia-blue) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.pay-shortcut__icon svg { width: 16px; height: 16px; }
.pay-shortcut__label { font-size: 14px; font-weight: var(--weight-semibold); margin-top: 6px; }
.pay-shortcut__desc { font-size: 12px; color: var(--color-text-muted); }
[data-theme="dark"] .pay-shortcut {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .pay-shortcut:hover {
  border-color: var(--color-primary);
}

/* ================================================================
   CTA BUTTONS · botones grandes con degradado para acciones de cierre de form
   ----------------------------------------------------------------
   Variantes:
   - .btn-cta            → primario CTA con degradado teal → navy (44px alto)
   - .btn-cta-cancel     → secundario oscuro (cancelación)
   - .btn-cta-danger     → degradado para acciones destructivas (eliminar definitivo)
   - .btn-cta-lg         → versión más grande (52px alto, padding 28px)

   Uso típico: pies de formularios (Guardar / Cancelar) y CTAs hero del dashboard.
   ================================================================ */
.btn-cta,
.btn-cta-cancel,
.btn-cta-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 120ms cubic-bezier(.4,.2,.2,1), box-shadow 120ms;
  position: relative;
  overflow: hidden;
}
.btn-cta svg, .btn-cta-cancel svg, .btn-cta-danger svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-cta {
  background: linear-gradient(135deg, var(--stolia-teal) 0%, var(--stolia-blue) 100%);
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(0,194,178,0.20), 0 4px 12px rgba(22,119,255,0.18);
}
.btn-cta:hover {
  background: linear-gradient(135deg, #00A89A 0%, #0c5fdb 100%);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,194,178,0.25), 0 8px 20px rgba(22,119,255,0.25);
  text-decoration: none;
}
.btn-cta:active { transform: translateY(0); }

.btn-cta-cancel {
  background: linear-gradient(135deg, var(--gray-700) 0%, var(--stolia-navy) 100%);
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.10);
}
.btn-cta-cancel:hover {
  background: linear-gradient(135deg, var(--gray-800) 0%, #0a0e15 100%);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15), 0 8px 20px rgba(0,0,0,0.15);
  text-decoration: none;
}

.btn-cta-danger {
  background: linear-gradient(135deg, var(--stolia-red) 0%, #b32830 100%);
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(255,77,79,0.20), 0 4px 12px rgba(180,40,48,0.20);
}
.btn-cta-danger:hover {
  background: linear-gradient(135deg, #db4448 0%, #8b1d24 100%);
  color: #fff !important;
  transform: translateY(-1px);
  text-decoration: none;
}

.btn-cta-lg, .btn-cta-cancel.btn-cta-lg, .btn-cta-danger.btn-cta-lg {
  height: 52px;
  padding: 0 28px;
  font-size: 15px;
}
.btn-cta-lg svg { width: 18px; height: 18px; }

/* CTA bar: fila al pie de un formulario donde van los botones Cancelar/Guardar */
.cta-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.cta-bar--floating {
  /* Se ancla al fondo del viewport, full-width sobre el content. Se usa en formularios largos */
  position: sticky;
  bottom: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-5);
  margin-left: calc(-1 * var(--space-8));
  margin-right: calc(-1 * var(--space-8));
  z-index: 20;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
}
[data-theme="dark"] .cta-bar--floating {
  background: var(--color-surface);
  border-top-color: rgba(255,255,255,0.06);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.20);
}

/* ================================================================
   DARK MODE · componentes nuevos del sprint pay-perfecto (Fase M)
   ================================================================ */
[data-theme="dark"] .topbar { background: var(--color-surface); border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .topbar__row--bottom { background: var(--color-surface); border-top-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .topbar__module-name { color: var(--color-text); }
[data-theme="dark"] .topbar__section { color: var(--color-text-muted); }
[data-theme="dark"] .topbar__sep { color: rgba(255,255,255,0.25); }
[data-theme="dark"] .topbar__tab { color: rgba(242,244,247,0.55); }
[data-theme="dark"] .topbar__tab:hover { color: rgba(242,244,247,0.95); }
[data-theme="dark"] .topbar__tab.is-active { color: rgba(242,244,247,1); }

[data-theme="dark"] .kpi-mini {
  background: var(--color-surface);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .kpi-mini__value { color: var(--color-text); }
[data-theme="dark"] .kpi-mini__label { color: var(--color-text-muted); }

[data-theme="dark"] .pay-card {
  background: var(--color-surface);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .pay-card__header { border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .pay-card__foot {
  background: rgba(255,255,255,0.03);
  border-top-color: rgba(255,255,255,0.06);
  color: var(--color-text);
}
[data-theme="dark"] .pay-list__item { border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .pay-list__item:hover { background: rgba(255,255,255,0.04); color: var(--color-text); }
[data-theme="dark"] .pay-list__name { color: var(--color-text); }

[data-theme="dark"] .segment-group {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .segment { color: var(--color-text-muted); }
[data-theme="dark"] .segment.is-active {
  background: var(--color-surface);
  color: var(--color-primary);
}

[data-theme="dark"] .filters-bar {
  background: var(--color-surface);
  border-color: rgba(255,255,255,0.06);
}

[data-theme="dark"] .form-control-stolia,
[data-theme="dark"] .form-select-stolia {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: var(--color-text);
}
[data-theme="dark"] .form-control-stolia::placeholder { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .form-control-stolia:focus,
[data-theme="dark"] .form-select-stolia:focus {
  background: rgba(255,255,255,0.06);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 194, 178, 0.18);
}

[data-theme="dark"] .combobox__list {
  background: var(--color-surface);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .combobox__option { color: var(--color-text); }
[data-theme="dark"] .combobox__option:hover,
[data-theme="dark"] .combobox__option:focus { background: rgba(255,255,255,0.04); }

[data-theme="dark"] .table-stolia tbody td { border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .table-stolia tbody tr:hover td { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .table-stolia thead th,
[data-theme="dark"] .table-stolia-thead th {
  background: rgba(255,255,255,0.03) !important;
  color: rgba(242,244,247,0.55) !important;
  border-bottom-color: rgba(255,255,255,0.06);
}

[data-theme="dark"] .modal-stolia .modal-content {
  background: var(--color-surface);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .modal-stolia__header,
[data-theme="dark"] .modal-stolia__footer { border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .modal-stolia__footer { background: rgba(255,255,255,0.02); }
[data-theme="dark"] .card--selectable {
  background: var(--color-surface);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .card--selectable:hover { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .card--selectable.is-selected {
  background: rgba(0, 194, 178, 0.10);
  border-color: var(--color-primary);
}

[data-theme="dark"] .module-card {
  background: var(--color-surface);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .module-card:hover {
  border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .module-card__metrics { border-top-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .module-card__metric-value { color: var(--color-text); }

[data-theme="dark"] .toast {
  background: var(--color-surface);
  border-color: rgba(255,255,255,0.08);
  color: var(--color-text);
}

[data-theme="dark"] .callout--warning { background: rgba(255,176,32,0.10); border-color: rgba(255,176,32,0.35); color: #FFD480; }
[data-theme="dark"] .callout--info    { background: rgba(22,119,255,0.10);  border-color: rgba(22,119,255,0.35);  color: #6BA8FF; }
[data-theme="dark"] .callout--danger  { background: rgba(255,77,79,0.10);   border-color: rgba(255,77,79,0.35);   color: #FF8585; }
[data-theme="dark"] .callout--success { background: rgba(34,197,94,0.10);   border-color: rgba(34,197,94,0.35);   color: #6EE89F; }

[data-theme="dark"] .config-nav {
  background: var(--color-surface);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .config-nav__item:hover { background: rgba(255,255,255,0.04); color: var(--color-text); }

[data-theme="dark"] .roadmap__step {
  background: var(--color-surface);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .roadmap__step.is-done { background: rgba(255,255,255,0.02); }
[data-theme="dark"] .roadmap__step.is-current {
  background: rgba(22,119,255,0.06);
  border-color: var(--stolia-blue);
}

[data-theme="dark"] .empty-state__icon { color: rgba(255,255,255,0.25); }
[data-theme="dark"] .mark-paid__date {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .mark-paid__date input[type="date"] { color: var(--color-text); }
[data-theme="dark"] .mark-paid__today {
  background: var(--color-surface);
  border-color: rgba(255,255,255,0.08);
  color: var(--color-text-muted);
}
[data-theme="dark"] .mark-paid__today:hover { background: rgba(255,255,255,0.06); color: var(--color-text); }

[data-theme="dark"] .row-action { color: rgba(242,244,247,0.55); }
[data-theme="dark"] .row-action:hover { background: rgba(255,255,255,0.06); color: var(--color-text); }
[data-theme="dark"] .row-action--danger:hover {
  background: rgba(255,77,79,0.12);
  color: #FF8585;
}

[data-theme="dark"] .page-header { background: var(--color-surface); }

/* Quick Actions Grid (configuración por módulo en /perfil) */
.quick-actions-grid { display: flex; flex-direction: column; gap: 10px; }
.quick-action-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
}
.quick-action-row__label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: var(--weight-medium); color: var(--color-text);
  margin: 0;
}
.quick-action-row__label svg { width: 16px; height: 16px; color: var(--color-primary); flex-shrink: 0; }
.quick-action-row__label i { color: var(--color-primary); }
.quick-action-row select {
  background: var(--color-surface);
}
@media (max-width: 768px) {
  .quick-action-row { grid-template-columns: 1fr; }
}
[data-theme="dark"] .quick-action-row { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }

/* Sidebar SVGs uniformes (stroke 1.8, tamaño 18) */
.sidebar__item-icon { width: 18px !important; height: 18px !important; stroke-width: 1.8 !important; flex-shrink: 0; }
.sidebar__item-icon svg { width: 18px; height: 18px; stroke-width: 1.8; }

/* Dark mode: avatar hash con paletas más vibrantes para contraste */
[data-theme="dark"] .pay-list__avatar[data-hash="0"],
[data-theme="dark"] .invoice-item__avatar[data-hash="0"] { background: rgba(22,119,255,.18); color: #6BA8FF; }
[data-theme="dark"] .pay-list__avatar[data-hash="1"],
[data-theme="dark"] .invoice-item__avatar[data-hash="1"] { background: rgba(0,194,178,.18); color: #5EEDDC; }
[data-theme="dark"] .pay-list__avatar[data-hash="2"],
[data-theme="dark"] .invoice-item__avatar[data-hash="2"] { background: rgba(124,77,255,.18); color: #B098FF; }
[data-theme="dark"] .pay-list__avatar[data-hash="3"],
[data-theme="dark"] .invoice-item__avatar[data-hash="3"] { background: rgba(255,176,32,.18); color: #FFD480; }
[data-theme="dark"] .pay-list__avatar[data-hash="4"],
[data-theme="dark"] .invoice-item__avatar[data-hash="4"] { background: rgba(34,197,94,.18); color: #6EE89F; }
[data-theme="dark"] .pay-list__avatar[data-hash="5"],
[data-theme="dark"] .invoice-item__avatar[data-hash="5"] { background: rgba(255,77,79,.18); color: #FF8585; }
[data-theme="dark"] .pay-list__avatar[data-hash="6"],
[data-theme="dark"] .invoice-item__avatar[data-hash="6"] { background: rgba(255,255,255,.10); color: rgba(255,255,255,0.85); }
[data-theme="dark"] .pay-list__avatar[data-hash="7"],
[data-theme="dark"] .invoice-item__avatar[data-hash="7"] { background: rgba(15,95,217,.18); color: #6BA8FF; }

/* ================================================================
   FORM EYEBROW · pequeña etiqueta de contexto sobre formularios
   (sustituye al "page-header" cuando el contexto va en topbar pero
   queremos mostrar info del registro en edición — proveedor, cliente)
   ================================================================ */
.form-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-3);
  padding: 6px 12px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 13px;
}
.form-eyebrow__label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}
.form-eyebrow__value {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
[data-theme="dark"] .form-eyebrow {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

/* ================================================================
   HERO CARD · ajuste tipográfico del valor + unidad (€/kg/etc.)
   ================================================================ */
.hero-card__unit {
  font-size: 18px;
  font-weight: var(--weight-medium);
  margin-left: 4px;
  opacity: 0.85;
}
/* Cuando un .hero-card va al pie de un .card-body, asegurarnos de que
   no se pegue al borde inferior. Un poco de respiración. */
.card-body > .hero-card.mt-auto { margin-top: var(--space-3); }

/* ================================================================
   CARD con banner subtle: el banner es primer hijo y comparte
   border-top-radius con la card padre. La barra accent lateral
   continúa hasta el body (no hace falta overflow:hidden).
   ================================================================ */
.card > .card-banner:first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* ================================================================
   BTN ADD LINE · botón "+ Añadir línea X" dentro de formularios
   con repetición de filas (línea IVA, vencimiento, cuota, etc.)
   Borde discontinuo teal · centro ancho completo · hover sólido.
   Es el patrón canónico para "añadir item a colección".
   ================================================================ */
.btn-add-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 38px;
  padding: 0 14px;
  background: transparent;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 120ms, background 120ms, color 120ms;
}
.btn-add-line:hover {
  border-color: var(--stolia-teal);
  border-style: solid;
  background: rgba(0,194,178,0.04);
  color: var(--stolia-teal);
  text-decoration: none;
}
.btn-add-line svg, .btn-add-line i {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
[data-theme="dark"] .btn-add-line {
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.55);
}
[data-theme="dark"] .btn-add-line:hover {
  border-color: var(--stolia-teal);
  background: rgba(0,194,178,0.08);
  color: var(--stolia-teal);
}

/* ================================================================
   FORM HERO · cabecera de página de formulario
   Reemplaza al .page-header viejo con un look elegante alineado al
   resto del DS: barra accent lateral + icono cuadrado teal→azul +
   título grande + subtítulo opcional + acciones a la derecha.
   ================================================================ */
.form-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 var(--space-4);
  padding: 14px 18px 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--stolia-teal);
  border-radius: var(--radius-md);
}
.form-hero__icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--stolia-teal) 0%, var(--stolia-blue) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.form-hero__icon svg { width: 18px; height: 18px; }
.form-hero__icon i,
.form-hero__icon i.bi,
.form-hero__icon i[class*="bi-"] {
  font-family: 'bootstrap-icons' !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  font-size: 18px;
  line-height: 1;
  color: #fff;
  display: inline-block;
  vertical-align: middle;
}
.form-hero__title-group { flex: 1; min-width: 0; }
.form-hero__title {
  font-size: 18px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--color-text);
  line-height: 1.2;
}
.form-hero__subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 2px 0 0;
  line-height: 1.3;
}
.form-hero__actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-shrink: 0;
}
[data-theme="dark"] .form-hero {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.08);
}

/* ================================================================
   RETENCIÓN ROW · check + input + sufijo en línea, elegante
   Patrón reutilizable para inputs con sufijo (% / días / unidades)
   acompañados de un toggle previo.
   ================================================================ */
.retencion-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.retencion-row__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  margin: 0;
  user-select: none;
}
.retencion-row__check input[type="checkbox"] {
  width: 16px; height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--stolia-teal);
}
.retencion-row__field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.retencion-row__field .form-control,
.retencion-row__field .form-control-sm {
  width: 64px !important;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.retencion-row__suffix {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}
[data-theme="dark"] .retencion-row {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}

/* ================================================================
   PATRÓN FORM CLÁSICO · adaptado de Stolia a paleta Stolia
   ----------------------------------------------------------------
   Este bloque replica el sistema de formularios largos del Stolia
   original (form factura, préstamo, impuesto, proveedor, etc.) con
   los tokens visuales de Stolia. Es el canon para todos los forms
   de detalle del proyecto.

   Componentes:
   - .fc-title          · cabecera subtle de sección dentro de card
                          (barra accent lateral + título dark) ← Stolia
   - .card-hd           · banner sólido fuerte de cabecera de card
                          (gradiente teal→azul, presencia hero)
   - .card-hd-dark      · variante dark (gradiente navy)
   - .card-hd-success   · variante éxito (verde)
   - .fc-total-display  · bloque "total factura" hero al pie de card
   - .fc-kpi            · KPI mini dentro de card sidebar de form
   - .fc-table          · tabla densa dentro de form (vencimientos, cuotas)
   - .fc-generator      · panel de generador rápido (atajos pildora)
   - .fc-sidebar        · sticky sidebar dentro de form (resumen)
   - .btn-form-save     · CTA primario al pie de form (Guardar X)
   - .btn-form-cancel   · CTA secundario al pie (Cancelar)
   - .btn-form-action   · botón inline neutral (Añadir línea X)
   - .btn-form-generate · botón generar/aplicar (acción quick)
   - .btn-badge         · pildora pequeña (Auto €, Ver detalle, etc.)

   Y a nivel de form: labels UPPERCASE con letter-spacing (firma Stolia)
   ================================================================ */

/* Labels UPPERCASE — firma visual de los formularios Stolia */
form label.form-label,
.fc-form label.form-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Input-group dentro de forms: nowrap para que input + sufijo (%, €, días)
   queden siempre en línea sin saltar. */
form .input-group,
.input-group {
  flex-wrap: nowrap !important;
}
form .input-group .form-control:not(:last-child),
.input-group .form-control:not(:last-child) {
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
form .input-group .input-group-text,
.input-group .input-group-text {
  border: 1.5px solid var(--color-border);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
[data-theme="dark"] form .input-group .input-group-text,
[data-theme="dark"] .input-group .input-group-text {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.65);
}
form label.form-label.lbl-req::after {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--stolia-teal);
}
[data-theme="dark"] form label.form-label,
[data-theme="dark"] .fc-form label.form-label {
  color: rgba(255,255,255,0.55);
}

/* .fc-title — cabecera subtle de sección INSIDE card-body
   (Proveedor y referencia, Importes e IVA, Vencimientos de pago, etc.) */
.fc-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  border-left: 3px solid var(--stolia-teal);
  padding: 0.1rem 0 0.1rem 0.75rem;
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
}
.fc-title.mb-0 { margin-bottom: 0; }
.fc-title.mb-2 { margin-bottom: 0.5rem; }
.fc-title.fc-title--success {
  border-left-color: var(--stolia-green);
  color: #15803d;
}
/* Variante "in-card" — actúa como cabecera subtle dentro de una .card.
   Sustituye el .card-hd gradient (casposo). Mantiene el acento teal lateral
   pero añade fondo suave + border-bottom como separador del card-body. */
.fc-title.fc-title--in-card {
  margin: 0 !important;
  padding: 10px 14px 10px 12px;
  background: var(--color-surface-alt);
  border-left: 3px solid var(--stolia-teal);
  border-bottom: 1px solid var(--color-border);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.fc-title.fc-title--in-card small {
  font-weight: 400;
  font-size: 0.75rem;
  flex-shrink: 0;
}
[data-theme="dark"] .fc-title { color: var(--color-text); }
[data-theme="dark"] .fc-title.fc-title--in-card {
  background: rgba(255,255,255,0.03);
  border-bottom-color: var(--color-border);
}

/* .card-hd — banner SÓLIDO fuerte de cabecera de card (gradiente teal→azul) */
.card-hd {
  background: linear-gradient(135deg, var(--stolia-teal) 0%, var(--stolia-blue) 100%) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 11px 18px;
  border-bottom: none !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-hd .btn,
.card-hd button {
  color: rgba(255,255,255,0.9) !important;
  border-color: rgba(255,255,255,0.35) !important;
  background: rgba(255,255,255,0.12) !important;
  font-size: 0.78rem;
  padding: 2px 10px;
}
.card-hd .btn:hover,
.card-hd button:hover {
  background: rgba(255,255,255,0.25) !important;
}
.card-hd-dark {
  background: linear-gradient(135deg, #1f2937 0%, var(--stolia-navy) 100%) !important;
}
.card-hd-success {
  background: linear-gradient(135deg, var(--stolia-green) 0%, #15803d 100%) !important;
}

/* .fc-total-display — total hero dentro de card sidebar (Importes e IVA, Resumen)
   El gradiente "dark" Stolia equivale al "theme-facturas" de Stolia (navy→burdeos).
   Aquí: navy oscuro → teal/blue brillante para dar presencia a la cifra grande. */
.fc-total-display {
  padding: 20px 22px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--stolia-teal) 0%, var(--stolia-blue) 100%);
  color: #fff;
}
.fc-total-display--dark {
  background: linear-gradient(135deg, var(--stolia-navy) 0%, #1c4a72 60%, var(--stolia-blue) 100%);
}
.fc-total-display .fc-total-label {
  font-size: 1rem;
  opacity: 0.95;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
  font-weight: 700;
}
.fc-total-display .fc-total-value {
  font-size: 2.4rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  font-variant-numeric: tabular-nums;
  color: #fff !important;
}
.fc-total-display .fc-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* .fc-kpi — KPI mini dentro de form sidebar */
.fc-kpi {
  padding: 16px 18px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  height: 100%;
}
.fc-kpi-num {
  font-size: 2rem;
  font-weight: 900;
  color: var(--stolia-teal);
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.fc-kpi-label {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  margin-top: 2px;
}
[data-theme="dark"] .fc-kpi {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}

/* .fc-table — tabla densa dentro de form (cuotas, vencimientos) */
.fc-table { width: 100%; border-collapse: collapse; }
.fc-table thead th {
  background: var(--color-surface-alt) !important;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  padding: 10px 12px;
  border-bottom: 1.5px solid var(--color-border);
  border-top: none;
}
.fc-table tbody tr { transition: background 0.12s; }
.fc-table tbody tr:hover { background: var(--color-surface-alt) !important; }
.fc-table tbody td {
  padding: 8px 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-divider);
}
.fc-table tbody tr.row-paid { background: #f0fdf4 !important; }
.fc-table tbody tr.row-paid:hover { background: #dcfce7 !important; }
[data-theme="dark"] .fc-table tbody tr.row-paid { background: rgba(34,197,94,0.10) !important; }

/* .fc-generator — panel de generador rápido (atajos pildora) */
.fc-generator {
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  border: 1.5px solid var(--color-border);
  margin-bottom: 1.5rem;
}
.fc-generator-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-theme="dark"] .fc-generator {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}

/* .fc-sidebar — sticky sidebar de form (Resumen) */
.fc-sidebar { position: sticky; top: 86px; }

/* .btn-form-save — CTA primario al pie del form (Guardar X) · presencia Stolia */
.btn-form-save {
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(135deg, var(--stolia-teal) 0%, var(--stolia-blue) 100%) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--radius-sm);
  padding: 14px 36px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
  transition: filter 0.25s, box-shadow 0.25s, transform 0.2s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  height: auto;
  min-height: 50px;
}
.btn-form-save:hover {
  filter: brightness(1.06) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.14) !important;
  transform: translateY(-1px);
  text-decoration: none;
}
.btn-form-save:active { transform: translateY(0); filter: brightness(0.97) !important; }
.btn-form-save svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-form-save i, .btn-form-save i.bi {
  font-family: 'bootstrap-icons' !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

/* .btn-form-cancel — secundario al pie del form (Cancelar) · presencia Stolia */
.btn-form-cancel {
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  color: var(--color-text) !important;
  border-radius: var(--radius-sm);
  padding: 14px 30px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-decoration: none !important;
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1.4;
  white-space: nowrap;
  height: auto;
  min-height: 50px;
}
.btn-form-cancel:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-border-strong);
  color: var(--color-text) !important;
}
.btn-form-cancel svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-form-cancel i, .btn-form-cancel i.bi {
  font-family: 'bootstrap-icons' !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
[data-theme="dark"] .btn-form-cancel {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .btn-form-cancel:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}

/* .btn-form-action — inline neutral action (Añadir línea X, Añadir vencimiento) */
.btn-form-action {
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  color: var(--color-text) !important;
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.5;
  white-space: nowrap;
}
.btn-form-action:hover {
  background: rgba(0,194,178,0.04);
  border-color: var(--stolia-teal);
  color: var(--stolia-teal) !important;
}
.btn-form-action svg, .btn-form-action i { width: 14px; height: 14px; flex-shrink: 0; }
[data-theme="dark"] .btn-form-action {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85) !important;
}
[data-theme="dark"] .btn-form-action:hover {
  background: rgba(0,194,178,0.10);
  color: var(--stolia-teal) !important;
}

/* .btn-form-generate — generate/apply quick action */
.btn-form-generate {
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(135deg, var(--stolia-teal) 0%, var(--stolia-blue) 100%) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--radius-sm);
  padding: 9px 20px;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition: filter 0.2s, transform 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.5;
  white-space: nowrap;
}
.btn-form-generate:hover {
  filter: brightness(1.06) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.btn-form-generate svg, .btn-form-generate i { width: 14px; height: 14px; flex-shrink: 0; }

/* .btn-badge — pildora pequeña (Ver detalle, Auto €, etc.) */
.btn-badge {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(0,194,178,0.10);
  color: var(--stolia-teal) !important;
  border: 1.5px solid rgba(0,194,178,0.25);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: filter 0.15s, background 0.15s;
  line-height: 1.5;
  text-decoration: none;
}
.btn-badge:hover {
  background: rgba(0,194,178,0.18);
  color: var(--stolia-teal) !important;
  text-decoration: none;
}
.btn-badge svg, .btn-badge i { width: 12px; height: 12px; flex-shrink: 0; }

/* ================================================================
   DASHBOARDS DE MÓDULO · grid-kpis variantes (3, 5, 6 cols) y filas densas
   Necesario para que dashboards tipo expedientes/vehículos quepan en
   viewport sin scroll.
   ================================================================ */
.grid-kpis--3 { grid-template-columns: repeat(3, 1fr); }
.grid-kpis--4 { grid-template-columns: repeat(4, 1fr); }
.grid-kpis--5 { grid-template-columns: repeat(5, 1fr); }
.grid-kpis--6 { grid-template-columns: repeat(6, 1fr); }
.grid-kpis.mb-3, .grid-kpis.mb-2 { margin-bottom: var(--space-3) !important; }
@media (max-width: 1100px) {
  .grid-kpis--5, .grid-kpis--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  /* --4 faltaba en esta media: Vehículos/Nóminas/Facturación quedaban
     a 4 columnas en móvil con las tarjetas amputadas. 2×2 como Pay. */
  .grid-kpis--3, .grid-kpis--4, .grid-kpis--5, .grid-kpis--6 { grid-template-columns: repeat(2, 1fr); }

  /* KPI compacto en móvil: icono menor y etiqueta con holgura para
     que el icono absoluto no la pise. */
  .kpi { padding: var(--space-4); min-width: 0; }
  .kpi__label { padding-right: 40px; font-size: 13px; }
  .kpi__icon { top: var(--space-4); right: var(--space-4); width: 32px; height: 32px; }
  .kpi__icon svg { width: 16px; height: 16px; }
}

/* Dashboard 2x2 — limita altura útil para que las 2 filas de cards quepan en viewport */
.dashboard-grid-2x2 .card { display: flex; flex-direction: column; }
.dashboard-grid-2x2 .card .card-body { flex: 1; min-height: 0; }

/* card-body con scroll interno cuando la lista crece (en lugar de scroll de página) */
.card-body--scroll {
  overflow-y: auto;
  max-height: 240px;
}

/* Dashboard rows — sustituyen al patrón legacy .dash-item / .d-title / .d-sub */
.dash-row {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none !important;
  color: var(--color-text);
  border: 1px solid transparent;
  transition: background 120ms, border-color 120ms;
}
.dash-row + .dash-row { margin-top: 2px; }
.dash-row:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text);
}
.dash-row__main {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dash-row__time {
  color: var(--stolia-teal);
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.dash-row__sub {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: var(--color-text-muted);
}

/* Distribución (barras + leyenda) — sustituyen al CSS embebido legacy */
.dist-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.dist-bar {
  display: flex;
  height: 8px;
  border-radius: 100px;
  overflow: hidden;
  background: var(--color-surface-alt);
  margin-bottom: 6px;
}
.dist-bar > div { transition: all 0.3s; }
.dist-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--color-text);
}
.dist-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 4px;
}
.dist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  padding: 3px 0;
}
.dist-row__label { width: 140px; color: var(--color-text-muted); font-weight: 500; }
.dist-row__bar { flex: 1; height: 5px; background: var(--color-surface-alt); border-radius: 100px; overflow: hidden; }
.dist-row__bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--stolia-teal), var(--stolia-blue));
  transition: width 0.6s;
}
.dist-row__num { min-width: 24px; text-align: right; font-weight: 700; color: var(--color-text); font-size: 0.78rem; }

/* Comparativa numérica del dashboard de Facturación · número grande + delta YoY compacto */
.dash-comparativa { margin-bottom: 8px; }
.dash-comparativa__main {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1;
}
.dash-comparativa__main span {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-left: 2px;
}
.dash-comparativa__sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.dash-comparativa__sub strong { color: var(--color-text); }
.dash-comparativa__delta {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 11px;
}
.dash-comparativa__delta--up   { background: rgba(0, 168, 84, 0.10); color: #0a8b47; }
.dash-comparativa__delta--down { background: rgba(220, 53, 69, 0.10); color: #c82333; }

/* Cabecera de show pages (Stolia subtle) — sustituye al .page-header gradient
   pesado en vistas tipo expedientes/show, escrituras/show, etc. */
.show-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--color-border);
}
.show-header__main { flex: 1; min-width: 0; }
.show-header__title {
  font-size: 22px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.2;
  margin: 0 0 6px;
}
.show-header__title i.bi { color: var(--stolia-teal); }
.show-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text);
}
.show-header__meta .text-muted { color: var(--color-text-subtle) !important; }
.show-header__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
}


/* ─────────────────────────────────────────────────────────────────
   Sprint V · Info-cards (Seguro / ITV / Revisión)
   Componente: <x-stolia.info-card>
   ───────────────────────────────────────────────────────────────── */
.info-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 900px) { .info-cards-row { grid-template-columns: 1fr; } }

.info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.info-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--color-border);
}
.info-card--seguro::before        { background: var(--stolia-teal); }
.info-card--itv-vigente::before   { background: #16a34a; }
.info-card--itv-proximo::before   { background: #ea580c; }
.info-card--itv-vencido::before   { background: #dc2626; }
.info-card--revision-vigente::before { background: #7c4dff; }
.info-card--revision-proximo::before { background: #ea580c; }
.info-card--revision-vencido::before { background: #dc2626; }

.info-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.info-card__title-block {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.info-card__icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.04);
  color: var(--color-text-subtle);
  flex-shrink: 0;
}
.info-card__icon--seguro   { background: rgba(0,194,178,0.12); color: var(--stolia-teal); }
.info-card__icon--itv      { background: rgba(34,197,94,0.12); color: #16a34a; }
.info-card__icon--revision { background: rgba(124,77,255,0.12); color: #7c4dff; }

.info-card__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
  font-weight: 600;
}
.info-card__title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
}
.info-card__primary {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.1;
  margin-top: 4px;
}
.info-card__secondary {
  font-size: 12px;
  color: var(--color-text-subtle);
  margin-top: 6px;
}
.info-card__days {
  font-size: 12px;
  color: var(--color-text);
  margin-top: 4px;
}
.info-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border);
}
.info-card__sprint-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
  background: rgba(0,0,0,0.04);
  padding: 3px 8px;
  border-radius: 100px;
  font-weight: 700;
}
.info-card__cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--stolia-teal);
  text-decoration: none;
  cursor: pointer;
}
.info-card__cta:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────
   Sprint V · Observaciones timeline
   ───────────────────────────────────────────────────────────────── */
.notes-block { margin-top: 20px; }
.notes-block__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.notes-block__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; margin: 0;
  color: var(--color-text);
}
.notes-block__count {
  font-size: 11px;
  color: var(--color-text-subtle);
  font-weight: 500;
  background: rgba(0,0,0,0.04);
  padding: 2px 8px;
  border-radius: 100px;
  margin-left: 6px;
}

.note-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 14px;
}
.note-form__row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.note-form__date { width: 140px; font-size: 12px; padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 6px; }
.note-form__author { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-subtle); }
.note-form__author-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  color: white; font-size: 11px; font-weight: 700;
}
.note-form__textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}
.note-form__footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

.notes-list { display: flex; flex-direction: column; gap: 10px; }
.note-item {
  display: flex; gap: 10px;
  padding: 10px 12px;
  border-left: 2px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.note-item__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  color: white; font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.note-item__body { flex: 1; min-width: 0; }
.note-item__head { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.note-item__author { font-weight: 600; color: var(--color-text); }
.note-item__date { color: var(--color-text-subtle); }
.note-item__actions { margin-left: auto; display: flex; gap: 4px; }
.note-item__action-btn {
  background: none; border: none;
  color: var(--color-text-subtle);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 11px;
}
.note-item__action-btn:hover { color: var(--color-text); }
.note-item__text {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--color-text);
  white-space: pre-line;
  line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────────
   Sprint V · Subtabs pill-style (Datos / Intervenciones / Vencimientos / Documentos)
   ───────────────────────────────────────────────────────────────── */
.subtabs-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: var(--color-bg);
  padding: 6px;
  border-radius: var(--radius-lg);
  margin-bottom: 18px;
  border: 1px solid var(--color-border);
}
@media (max-width: 720px) { .subtabs-bar { grid-template-columns: 1fr 1fr; } }

.subtab-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text-subtle);
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: 0;
  transition: all 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.subtab-pill:hover { color: var(--color-text); }
.subtab-pill.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.06);
}
.subtab-pill .bi { font-size: 14px; }
.subtab-pill__count {
  font-size: 11px;
  background: rgba(0,0,0,0.06);
  color: var(--color-text-subtle);
  padding: 1px 7px;
  border-radius: 100px;
  font-weight: 600;
}
.subtab-pill.is-active .subtab-pill__count {
  background: rgba(0,194,178,0.14);
  color: var(--stolia-teal);
}
.subtab-pill__count--warning {
  background: rgba(234,88,12,0.14) !important;
  color: #ea580c !important;
}

/* ─────────────────────────────────────────────────────────────────
   Sprint IVA · <x-stolia.coste-display>
   Muestra base imponible (principal) + total con IVA debajo (sutil)
   ───────────────────────────────────────────────────────────────── */
.coste-display {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
}
.coste-display__base {
  font-weight: var(--weight-semibold, 600);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.coste-display--lg .coste-display__base {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.coste-display--sm .coste-display__base {
  font-size: 0.78rem;
}
.coste-display__total {
  font-size: 11px;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
  font-weight: 400;
}
.coste-display--empty {
  color: var(--color-text-subtle);
  font-weight: normal;
}

/* Sprint M2 · Row actions: contenedor + variantes nuevas (success, info) */
.row-actions {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  justify-content: flex-end;
}
.row-action i { font-size: 14px; }
.row-action--success:hover {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}
.row-action--info:hover {
  background: rgba(14, 165, 233, 0.12);
  color: #0ea5e9;
}

/* row-action deshabilitado · gris atenuado, no clickable */
.row-action--disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}
.row-action--disabled:hover {
  background: transparent !important;
  color: var(--color-text-muted) !important;
}
/* Pero permitir tooltip aunque sea no-clickable */
.row-action--disabled[title] { pointer-events: auto; }

/* =====================================================================
 * Sprint Design System · F2 · Utilities pendientes de C3b
 *
 * Las decisiones D1 viven en SPRINT-DESIGN-SYSTEM.md. Resumen:
 *   - fs-7 / fs-xs cubren los font-size custom más usados (0.78/0.85rem).
 *   - w-70/100px/120/140 sustituyen anchos inline px más repetidos.
 *   - text-secondary-2 y text-danger-strong para colores hex one-off
 *     dominantes (#64748b · 195 occs, #be123c · 17 occs).
 *   - grid-label-1fr para el patrón "label fijo + contenido fluido"
 *     (140px 1fr) que aparecía 6 veces inline.
 *
 * Importante: el resto de valores frecuentes (font-size 0.72/0.82rem,
 * width 90/110/130/200px, color #94a3b8/#475569) quedan inline a
 * propósito (regla 2: NO crear utilities especulativas). Cuando un
 * sprint posterior las consolide, se añaden aquí.
 * ===================================================================== */

/* Font sizes · alinea con Bootstrap fs-1..fs-6 (fs-6=1rem, descendente) */
.fs-7  { font-size: 0.875rem; line-height: 1.5; }
.fs-xs { font-size: 0.78rem;  line-height: 1.4; }

/* Anchos fijos para columnas de listados · NO confundir con .w-100 de
   Bootstrap (que es 100% width). Por eso .w-100px lleva sufijo px. */
.w-70    { width: 70px; }
.w-100px { width: 100px; }
.w-120   { width: 120px; }
.w-140   { width: 140px; }

/* Variables semánticas · evitar uso directo de hex */
:root {
  --text-secondary-2: #64748b;
  --text-danger-strong: #be123c;
}

/* NO usar .text-secondary (lo reservamos por si Bootstrap entra) */
.text-secondary-2   { color: var(--text-secondary-2); }
.text-danger-strong { color: var(--text-danger-strong); }

/* Grids semánticos · patrón "etiqueta + valor" en formularios y resúmenes */
.grid-label-1fr {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0.5rem;
  align-items: center;
}

/* =====================================================================
 * Sprint Design System · F3 · Sidebar estado desktop plegado
 *
 * Activado vía atributo `data-collapsed="true"` en el `<aside>` y
 * `data-sidebar-collapsed="true"` en `<body>` (para que el `.stolia-app`
 * grid reduzca `--sidebar-width`).
 *
 * Persistencia via localStorage (decisión D2 · sidebar-toggle.js).
 * ===================================================================== */

/* Hotfix Sidebar Plegado · `<a>` wrapper del logo · sustituye inline
   styles `display:block;text-decoration:none;flex:1;` que rompían el
   toggle cuando plegado (flex:1 absorbía el ancho de 64px). */
.sidebar__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: 1 1 auto;
  min-width: 0;
}
.sidebar__brand:hover { text-decoration: none; }

/* Logo full SVG · estilos vía CSS (no inline) para que el `display:none`
   plegado prevalezca por especificidad correcta. */
.sidebar__logo-full {
  display: block;
  height: 36px;
  width: auto;
}

/* Logo · alternar entre full e isotipo según estado. El isotipo es el
   mismo SVG que el favicon de la pestaña del navegador (favicon.svg),
   no una letra · garantiza consistencia visual de marca. */
.sidebar__logo-compact {
  display: none;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.sidebar[data-collapsed="true"] .sidebar__logo-full { display: none; }
.sidebar[data-collapsed="true"] .sidebar__logo-compact {
  display: block;
}

/* Hotfix · cuando plegado, el <a> wrapper centra la "S" sin estirarse. */
.sidebar[data-collapsed="true"] .sidebar__brand {
  flex: 0 0 auto;
  justify-content: center;
}

/* Toggle · botón chevron al lado del logo */
.sidebar__toggle {
  background: transparent;
  border: 0;
  color: var(--color-sidebar-text);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--transition-fast), background var(--transition-fast), transform var(--transition-base);
  flex-shrink: 0;
}
.sidebar__toggle:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
}
.sidebar[data-collapsed="true"] .sidebar__toggle {
  /* En estado plegado el toggle se queda visible pero apunta hacia la derecha */
  transform: rotate(180deg);
}
.sidebar__toggle :is(svg, i) { width: 16px; height: 16px; }

/* Labels · ocultos cuando plegado · iconos visibles */
.sidebar[data-collapsed="true"] .sidebar__label,
.sidebar[data-collapsed="true"] .sidebar__item-label,
.sidebar[data-collapsed="true"] .sidebar__badge {
  display: none;
}

/* Item · centrar icono cuando plegado */
.sidebar[data-collapsed="true"] .sidebar__item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* Logo wrapper · cuando plegado: stack vertical para que "S" + toggle
   queden visibles ambos dentro del ancho de 64px. Padding compactado
   para no robar altura útil a la navegación. */
.sidebar[data-collapsed="true"] .sidebar__logo {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding-left: 0;
  padding-right: 0;
  padding-bottom: var(--space-3);
}

/* Hotfix · footer plegado · compactar padding superior para reducir el
   hueco visual entre el último módulo de la nav y Configuración cuando
   `margin-top:auto` empuja el footer al fondo. NO eliminamos
   `margin-top:auto` (mantiene el footer pegado al fondo, comportamiento
   intencional). D1: sin separador horizontal extra. */
.sidebar[data-collapsed="true"] .sidebar__footer {
  padding-top: 0;
  padding-bottom: var(--space-2);
}
.sidebar[data-collapsed="true"] .sidebar__footer .sidebar__label {
  display: none;
}

/* Grid principal · respetar la preferencia desde body */
body[data-sidebar-collapsed="true"] .stolia-app {
  --sidebar-width: 64px;
  transition: grid-template-columns var(--transition-base);
}
.stolia-app {
  transition: grid-template-columns var(--transition-base);
}

/* =====================================================================
 * Sprint Design System · F4 · Mobile / tablet sidebar overlay
 *
 * Breakpoints (D3):
 *   - >=1280px desktop normal (sidebar fijo, plegable con F3).
 *   - 768-1279px tablet (sidebar visible · F3 toggle disponible).
 *   - <768px mobile · sidebar oculto · top bar + overlay drawer.
 *
 * Hooks DOM:
 *   - [data-topbar-mobile]      → header visible solo <768px.
 *   - [data-mobile-overlay]     → drawer izq que entra/sale con transform.
 *   - [data-mobile-menu-toggle] → botón ☰ del topbar mobile.
 *   - [data-mobile-menu-close]  → backdrop y botón ❌ cierran.
 *   - body[data-mobile-menu-open="true"]  · estado overlay abierto.
 * ===================================================================== */

/* Topbar mobile · oculto por defecto · solo aparece <768px */
.topbar-mobile {
  display: none;
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  background: var(--color-sidebar-bg-gradient, #0f172a);
  color: #FFFFFF;
  padding: var(--space-2) var(--space-4);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
}

.topbar-mobile__menu-btn,
.topbar-mobile__action {
  background: transparent;
  border: 0;
  color: inherit;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}
.topbar-mobile__menu-btn:hover,
.topbar-mobile__action:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}
.topbar-mobile__menu-btn :is(svg, i),
.topbar-mobile__action :is(svg, i) {
  width: 22px; height: 22px;
}

/* Alto explícito por CSS: el preflight de Tailwind (bundle Vite) pone
   img { height:auto; max-width:100% } y anula el height="28" del atributo,
   dejando el logo a su tamaño intrínseco (desproporcionado). */
.topbar-mobile__brand img { display: block; height: 24px; width: auto; }

.topbar-mobile__actions {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

/* ── Overlay drawer ──────────────────────────────────────────────── */
.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 86%;
  max-width: 340px;
  background: var(--color-sidebar-bg-gradient, #0f172a);
  color: #FFFFFF;
  z-index: calc(var(--z-modal) + 50);
  transform: translateX(-100%);
  transition: transform var(--transition-slow);
  display: none;          /* solo activado <768px */
  flex-direction: column;
  overflow-y: auto;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
}

.mobile-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: calc(var(--z-modal) + 40);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
  display: none;
}

body[data-mobile-menu-open="true"] .mobile-overlay {
  transform: translateX(0);
}
body[data-mobile-menu-open="true"] .mobile-overlay-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.mobile-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-overlay__title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mobile-overlay__close {
  background: transparent;
  border: 0;
  color: inherit;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}
.mobile-overlay__close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
}
.mobile-overlay__close svg { width: 20px; height: 20px; }

.mobile-overlay__content {
  padding: var(--space-3) var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  flex: 1; /* permite empujar el __footer al fondo con margin-top:auto */
}

.mobile-overlay__section-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 var(--space-2) 0;
  font-weight: 700;
}

.mobile-modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.mobile-module-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 0.78rem;
  text-align: center;
  line-height: 1.2;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.mobile-module-card:hover {
  background: rgba(255, 255, 255, 0.14);
}
.mobile-module-card.is-active {
  background: var(--color-accent, #14b8a6);
}
.mobile-module-card__icon { width: 22px; height: 22px; }

.mobile-overlay__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.92rem;
  transition: background var(--transition-fast);
}
.mobile-overlay__item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}
.mobile-overlay__item.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  font-weight: 600;
}

/* Iconos del drawer a tamaño fijo: un svg sin constraint se expande al
   ancho del contenedor (el caso del engranaje gigante de Configuración). */
.mobile-overlay__item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* La cascada tipográfica global (h3 → text-xl + color-text) pisaba este
   título por especificidad; se re-afirma con selector más específico. */
.mobile-overlay h3.mobile-overlay__section-title {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.08em;
}

.mobile-overlay__logo { display: block; height: 20px; width: auto; }

/* Pie del drawer: Dashboard · Mi perfil · Salir (paridad sidebar desktop) */
.mobile-overlay__footer {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-overlay__logout { margin: 0; }
.mobile-overlay__item--btn {
  background: transparent;
  border: 0;
  width: 100%;
  font-family: inherit;
  font-size: 0.92rem;
}

/* ── Activación responsive ───────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Mostrar topbar mobile + overlay; ocultar sidebar */
  .topbar-mobile { display: flex; }
  .mobile-overlay,
  .mobile-overlay-backdrop { display: block; }
  .mobile-overlay { display: flex; }

  /* Grid de la app pasa a 1 sola columna (sin sidebar) */
  .stolia-app {
    grid-template-columns: 1fr;
  }
  .sidebar { display: none; }

  /* Bloquear scroll del body cuando overlay abierto */
  body[data-mobile-menu-open="true"] {
    overflow: hidden;
  }

  /* ── Topbar fila 1 · contexto legible, sin solapes ─────────────
     El user-chip pierde nombre+rol (queda el avatar, que enlaza a
     perfil igual) y el par módulo/subsección puede elidir con
     ellipsis real en vez de amputarse a una letra. */
  .topbar__row { padding: 0 var(--space-4); gap: var(--space-3); }
  .user-chip__info { display: none; }
  .topbar__module { min-width: 0; }
  .topbar__module-name { overflow: hidden; text-overflow: ellipsis; }
  .topbar__section { max-width: 46vw; }

  /* ── Topbar fila 2 · tabs a ancho completo con fundido ─────────
     Las tabs ya scrollean (overflow-x auto, scrollbar oculta); aquí
     ganan la fila entera + un fundido derecho que delata que hay
     más secciones. Los CTAs bajan a su propia línea, alineados a la
     derecha, y ya no aplastan la navegación. */
  .topbar__row--bottom { flex-wrap: wrap; height: auto; row-gap: 0; }
  .topbar__tabs {
    flex: 0 0 100%;
    height: 42px;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 36px), transparent);
  }
  .topbar__cta {
    flex: 1 1 100%;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .topbar__cta > * { margin-bottom: var(--space-2); }

  /* ── Tablas → tarjetas (patrón tc-*) ───────────────────────────
     Los listados de trabajo se recomponen: cada <tr> pasa a ser una
     tarjeta en grid de 2 columnas, con roles por celda:
       tc-title  → línea principal (enlace)   tc-amount → importe dcha
       tc-sub    → secundaria izda            tc-status → chip dcha
       tc-meta   → línea completa muted       tc-actions→ fila de acciones
       tc-hide-m → oculto en móvil            td[colspan] → fila completa
     Mismo molde que las listas del Resumen de Pay. Solo <768px. */
  table.tabla-cards { display: block; }
  table.tabla-cards thead { display: none; }
  table.tabla-cards tbody { display: block; }
  table.tabla-cards tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-3);
    row-gap: 2px;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-divider);
  }
  /* Reset deliberado del skin desktop de tablas, que fija el padding con
     !important desde .card > .table-responsive > .table:not(.table-sm) >
     tbody > tr > td (0,4,3): se espeja el selector con la clase propia
     para superarla en especificidad (0,4,4) manteniendo el !important. */
  .card > .table-responsive > table.tabla-cards:not(.table-sm) > tbody > tr > td,
  .card > table.tabla-cards:not(.table-sm) > tbody > tr > td,
  table.tabla-cards > tbody > tr > td {
    padding: 0 !important;
    border: 0;
    background: transparent;
    line-height: 1.45;
    white-space: normal;
  }
  /* display en regla débil aparte: así los roles (tc-hide-m, td:empty)
     pueden seguir ocultando celdas sin pelear con el reset de arriba */
  table.tabla-cards td { display: block; }
  table.tabla-cards .tc-title   { grid-row: 1; grid-column: 1; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; }
  table.tabla-cards .tc-amount  { grid-row: 1; grid-column: 2; justify-self: end; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
  table.tabla-cards .tc-sub     { grid-row: 2; grid-column: 1; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  table.tabla-cards .tc-status  { grid-row: 2; grid-column: 2; justify-self: end; align-self: center; }
  table.tabla-cards .tc-meta    { grid-column: 1 / -1; font-size: 12px; color: var(--color-text-muted); }
  table.tabla-cards .tc-actions { grid-column: 1 / -1; margin-top: var(--space-2); }
  /* Formularios inline dentro de la fila de acciones (marcar pagado):
     envuelven en vez de salirse de la tarjeta; la nota estira. */
  table.tabla-cards .tc-actions form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  table.tabla-cards .tc-actions form input[type="text"] { flex: 1 1 110px; min-width: 0; }
  table.tabla-cards .tc-hide-m  { display: none; }
  table.tabla-cards td:empty    { display: none; } /* celdas sin dato no reservan fila */
  table.tabla-cards td[colspan] { grid-column: 1 / -1; }
  table.tabla-cards tr.tc-foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    background: var(--color-surface-alt);
    font-weight: var(--weight-semibold);
  }
  table.tabla-cards tr.tc-foot td:empty { display: none; }

  /* Segments (filtro fino): carril horizontal con fundido, como las
     tabs. El !important vence el flex-wrap inline de pagos-próximos
     (que en desktop sí debe envolver). */
  .segment-group {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent);
  }
  .segment-group::-webkit-scrollbar { display: none; }
  .segment-group .segment { white-space: nowrap; flex-shrink: 0; }
}

/* Higiene: el <select> original que Tom Select deja oculto conservaba su
   ancho intrínseco (530px+) y desbordaba los contenedores en móvil. */
select.tomselected,
select.ts-hidden-accessible {
  max-width: 100%;
}

/* Filtros de listado en móvil estrecho: una sola columna para que los
   campos no amputen sus placeholders ("Todos los proveedore…"). */
@media (max-width: 480px) {
  .filters-form > *:not(.filters-form__actions) {
    flex-basis: 100%;
    min-width: 100%;
  }
}

/* ── Generador de vencimientos (form factura) ─────────────────────
   Desktop: .gen-field es transparente (display:contents) y la etiqueta
   no existe — la fila inline queda exactamente como siempre.
   Móvil: rejilla simétrica 2 col con etiquetas visibles (los title
   no existen en táctil). Los !important vencen al d-flex de Bootstrap. */
.gen-field { display: contents; }
.gen-field__lbl { display: none; }

@media (max-width: 767.98px) {
  .gen-atajos {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }
  /* "Atajos:" y el divisor vertical (este último trae display inline) */
  .gen-atajos > span { display: none !important; }
  .gen-atajos #btn-importar-pago { grid-column: 1 / -1; }
  .gen-atajos > button { width: 100%; justify-content: center; }

  .gen-custom {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    align-items: end;
  }
  .gen-custom .gen-field:first-child { grid-column: 1 / -1; }
  .gen-custom > button { grid-column: 1 / -1; }
  .gen-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .gen-field__lbl {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin: 0;
  }
  .gen-field input { width: 100% !important; }

  /* Tabla editable de vencimientos: scroll contenido en su card,
     sin provocar el bamboleo lateral de toda la página. */
  .fc-table { display: block; overflow-x: auto; }

  /* ── Cabecera colapsable (S5) ──
     Al hacer scroll hacia abajo la barra navy se retira y la fila de
     contexto se pliega: quedan las tabs. Al subir, todo vuelve. */
  .topbar-mobile { transition: transform 0.22s ease; }
  .topbar-mobile.is-hidden { transform: translateY(-100%); }
  .topbar__row--top { max-height: 56px; overflow: hidden; transition: max-height 0.22s ease; }
  .topbar.is-collapsed .topbar__row--top { max-height: 0; }
}

/* ================================================================
   OVERLAY «IA PENSANDO» · componente DS canónico (§24)
   La S del imagotipo respirando + chispas aleatorias + mensaje
   rotatorio. API: Stolia.ia.show({mensajes}) / Stolia.ia.hide().
   Montado una vez en layouts.stolia (x-stolia.ia-overlay).
   ================================================================ */
.ia-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 100);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 17, 23, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.ia-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.ia-overlay__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  min-width: 280px;
  max-width: min(90vw, 360px);
  padding: 30px 40px 26px;
  background: var(--color-surface);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.ia-overlay__halo {
  position: relative;
  width: 176px;
  height: 176px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ia-overlay__logo {
  width: 74px;
  height: 78px;
  color: var(--color-text);
  animation: ia-latido 2.2s ease-in-out infinite;
}
.ia-overlay__chispa {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  color: var(--stolia-teal);
  opacity: 0;
  pointer-events: none;
}
.ia-overlay__chispa:nth-child(3n) { color: var(--stolia-blue); }
.ia-overlay__chispa svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(var(--chispa-scale, 1));
}
.ia-overlay__chispa.is-viva { animation: ia-destello 1.8s ease-in-out both; }
.ia-overlay__msg {
  min-height: 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: opacity 0.18s ease;
}
@keyframes ia-latido {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}
@keyframes ia-destello {
  0%   { opacity: 0; transform: scale(0.4) rotate(0deg); }
  35%  { opacity: 0.95; }
  100% { opacity: 0; transform: scale(1) rotate(40deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ia-overlay__logo { animation: none; }
  .ia-overlay__chispa { display: none; }
}

/* ── Variante minimal del overlay IA (§24.6) ──────────────────────
   Solo la S sobre el fondo oscurecido: sin tarjeta y sin mensaje.
   Chispas más grandes y con brillo para que ganen presencia.
   Se activa con Stolia.ia.show({ estilo: 'minimal' }). */
.ia-overlay--minimal {
  background: rgba(13, 17, 23, 0.66);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ia-overlay--minimal .ia-overlay__card {
  background: transparent;
  box-shadow: none;
  padding: 0;
  min-width: 0;
}
.ia-overlay--minimal .ia-overlay__msg { display: none; }
.ia-overlay--minimal .ia-overlay__halo {
  width: 230px;
  height: 230px;
}
.ia-overlay--minimal .ia-overlay__logo {
  width: 96px;
  height: 101px;
  color: #FFFFFF; /* siempre sobre el scrim navy, en ambos temas */
}
.ia-overlay--minimal .ia-overlay__chispa {
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
}
.ia-overlay--minimal .ia-overlay__chispa svg {
  filter: drop-shadow(0 0 7px currentColor);
}
/* En minimal, el destello mantiene una meseta encendida (~45% del ciclo)
   para que las chispas se perciban claramente; la variante tarjeta
   conserva su destello fugaz original. */
.ia-overlay--minimal .ia-overlay__chispa.is-viva { animation-name: ia-destello-vivo; }
@keyframes ia-destello-vivo {
  0%   { opacity: 0; transform: scale(0.5) rotate(0deg); }
  22%  { opacity: 1; }
  70%  { opacity: 1; transform: scale(1.05) rotate(24deg); }
  100% { opacity: 0; transform: scale(0.85) rotate(45deg); }
}

/* ================================================================
   iOS · ANTI-ZOOM AL ENFOCAR CAMPOS (2026-10-12)
   Safari iOS hace zoom automatico (y lo deja puesto) al enfocar
   cualquier campo con font-size < 16px. En movil todos los campos
   de texto van a 16px exactos: desaparece el zoom inesperado y de
   paso mejora el tacto. Solo afecta a pantallas pequenas.
   ================================================================ */
@media (max-width: 767.98px) {
  /* !important a proposito: cualquier override de vista con letra <16px
     reintroduce el zoom de iOS — esto es invariante de plataforma.
     Los selectores de Tom Select repiten los de §Tom Select (tambien con
     !important): mismo peso + orden posterior = gana el 16px. */
  .form-control,
  .form-select,
  .form-control-sm,
  .form-select-sm,
  textarea.form-control,
  .filters-form input,
  .filters-form select,
  .filters-form .combobox__input,
  .filters-form .form-select,
  .filters-form .form-control,
  .ts-wrapper .ts-control,
  .ts-wrapper.ts-sm .ts-control,
  .ts-wrapper .ts-control input,
  .ts-dropdown,
  .ts-dropdown .option {
    font-size: 16px !important;
  }
}

/* ================================================================
   MOVIL · Auditoria 2026-10-13
   - show-header: las acciones (flex-shrink:0, fila de botones) pedian
     mas ancho que la pantalla: aplastaban el titulo a una palabra por
     linea y se cortaban por la derecha. En estrecho, el header pasa a
     columna y las acciones envuelven debajo del titulo.
   - filters-form__actions: white-space nowrap cortaba los botones
     (Filtrar / Importar / Enviar...) — en movil envuelven.
   ================================================================ */
@media (max-width: 767.98px) {
  .show-header { flex-direction: column; }
  .show-header__title { font-size: 19px; }
  .filters-form__actions { flex-wrap: wrap; white-space: normal; }
}