/* ═══════════════════════════════════════════════════════════
   B2YOU - Design Tokens
   Branding cognac/cream conservado.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Paleta core */
  --cream:        #F5F1EB;
  --cream-dark:   #EDE8DF;
  --cream-deep:   #E0D9CE;
  --cognac:       #6B463F;
  --cognac-light: #8A5E56;
  --cognac-deep:  #4F3029;
  --noir:         #1A1614;
  --noir-soft:    #2C2421;

  /* Estados (heredados, levemente ajustados) */
  --color-success:    #15803D;
  --color-success-bg: #DCFCE7;
  --color-warning:    #B45309;
  --color-warning-bg: #FEF3C7;
  --color-danger:     #DC2626;
  --color-danger-bg:  #FEE2E2;
  --color-info:       #0369A1;
  --color-info-bg:    #E0F2FE;

  /* Tema claro (default) */
  --bg:            var(--cream);
  --bg-card:       #FFFFFF;
  --bg-sidebar:    var(--cognac-deep);
  --bg-hover:      var(--cream-dark);
  --bg-subtle:     #FAF7F2;
  --border:        #D8D0C4;
  --border-light:  #EBE5DC;
  --text:          #2A1F1B;
  --text-muted:    #7A6A63;
  --text-soft:     #5A4A43;
  --text-sidebar:  #F0E8E2;
  --accent:        var(--cognac);
  --accent-hover:  var(--cognac-light);
  --shadow-sm:     0 1px 2px rgba(107,70,63,0.06);
  --shadow:        0 2px 12px rgba(107,70,63,0.10);
  --shadow-lg:     0 8px 32px rgba(107,70,63,0.15);
  --shadow-modal:  0 20px 60px rgba(0,0,0,0.25);

  /* Tipografía */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'DM Mono', 'JetBrains Mono', 'Courier New', monospace;

  /* Layout */
  --sidebar-w:         240px;
  --sidebar-collapsed: 64px;
  --topbar-h:          60px;
  --radius:            10px;
  --radius-sm:         6px;
  --radius-lg:         16px;
  --radius-pill:       999px;

  /* Espaciados */
  --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;

  /* Timing */
  --t-fast:   120ms;
  --t-normal: 220ms;
  --t-slow:   360ms;
  --t-xslow:  520ms;
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  /* Easings premium (estilo Apple): spring suave, énfasis emphasized, overshoot leve */
  --ease-spring:      cubic-bezier(0.22, 1, 0.36, 1);     /* ease-out-expo soft (sheets, panels) */
  --ease-emphasized:  cubic-bezier(0.2, 0, 0, 1);         /* Material emphasized - focos */
  --ease-overshoot:   cubic-bezier(0.34, 1.56, 0.64, 1);  /* pop con leve rebote */
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);     /* simétrico para fades */
}

[data-theme="dark"] {
  --bg:            #1A1614;
  --bg-card:       #231E1B;
  --bg-sidebar:    #120E0C;
  --bg-hover:      #2C2421;
  --bg-subtle:     #1E1916;
  --border:        #3D3330;
  --border-light:  #2C2421;
  --text:          #F0E8E2;
  --text-muted:    #9A8A83;
  --text-soft:     #C5B5AD;
  --text-sidebar:  #E8DDD8;

  --color-success-bg: rgba(34, 197, 94, 0.15);
  --color-warning-bg: rgba(217, 119, 6, 0.15);
  --color-danger-bg:  rgba(220, 38, 38, 0.15);
  --color-info-bg:    rgba(3, 105, 161, 0.15);

  --shadow-sm:     0 1px 2px rgba(0,0,0,0.20);
  --shadow:        0 2px 12px rgba(0,0,0,0.35);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.50);
  --shadow-modal:  0 20px 60px rgba(0,0,0,0.65);
}
/* Reset + base global */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 15px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

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

h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -0.02em; font-weight: 600; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: 0.95rem; }
p  { margin: 0; }

/* Inputs base */
input, textarea, select, button {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; background: none; border: 0; padding: 0; }

/* Hide number spinners */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* iOS Safari: forzar 16px en mobile para no triggear zoom on focus */
@media (max-width: 640px) {
  input, textarea, select { font-size: 16px !important; }
}

/* Scrollbar discreto */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Selection */
::selection { background: var(--cognac); color: var(--cream); }

/* Focus visible globally */
:focus-visible {
  outline: 2px solid var(--cognac-light);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Animaciones globales */

/* Transición default interactiva */
.b2-anim-base,
.b2-btn, .b2-input, .b2-card, .b2-nav-link, .b2-menu-item {
  transition:
    background-color var(--t-normal) var(--ease),
    border-color var(--t-normal) var(--ease),
    color var(--t-normal) var(--ease),
    transform var(--t-normal) var(--ease),
    opacity var(--t-normal) var(--ease),
    box-shadow var(--t-normal) var(--ease);
}

/* Mount-in de cada página */
.b2-page-mount {
  animation: b2-page-mount var(--t-slow) var(--ease) both;
}
@keyframes b2-page-mount {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stagger para listas/grids */
.b2-stagger > * {
  opacity: 0;
  animation: b2-page-mount 0.4s var(--ease) forwards;
}
.b2-stagger > *:nth-child(1)  { animation-delay: 0.00s; }
.b2-stagger > *:nth-child(2)  { animation-delay: 0.04s; }
.b2-stagger > *:nth-child(3)  { animation-delay: 0.08s; }
.b2-stagger > *:nth-child(4)  { animation-delay: 0.12s; }
.b2-stagger > *:nth-child(5)  { animation-delay: 0.16s; }
.b2-stagger > *:nth-child(6)  { animation-delay: 0.20s; }
.b2-stagger > *:nth-child(7)  { animation-delay: 0.24s; }
.b2-stagger > *:nth-child(8)  { animation-delay: 0.28s; }
.b2-stagger > *:nth-child(9)  { animation-delay: 0.32s; }
.b2-stagger > *:nth-child(10) { animation-delay: 0.36s; }
.b2-stagger > *:nth-child(n+11) { animation-delay: 0.40s; }

/* Loader de 3 puntos en cascada (Apple-style) */
@keyframes b2-dots-pulse {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.7); }
  40% { opacity: 1; transform: scale(1); }
}
.b2-dots-loader {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  line-height: 0;
  font-size: 1rem; /* default; ajustable con clases sm/md/lg */
}
.b2-dots-loader.sm { font-size: 0.75rem; }
.b2-dots-loader.md { font-size: 1rem; }
.b2-dots-loader.lg { font-size: 1.5rem; }
.b2-dots-loader > span {
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  background: currentColor;
  border-radius: 50%;
  animation: b2-dots-pulse 1.2s var(--ease) infinite both;
}
.b2-dots-loader > span:nth-child(1) { animation-delay: 0s; }
.b2-dots-loader > span:nth-child(2) { animation-delay: 0.18s; }
.b2-dots-loader > span:nth-child(3) { animation-delay: 0.36s; }

/* Slide-down (drawer mobile) */
@keyframes b2-slide-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes b2-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes b2-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes b2-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Skeleton shimmer (loading placeholders) */
@keyframes b2-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.b2-skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-hover) 0%,
    var(--bg-subtle) 50%,
    var(--bg-hover) 100%
  );
  background-size: 200% 100%;
  animation: b2-shimmer 1.5s linear infinite;
  border-radius: var(--radius-sm);
}

/* Respect reduce-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Layout: app shell, sidebar, hamburger, header scroll, content area */

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

/* ─── SIDEBAR ─────────────────────────────────────────── */
.b2-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  background: var(--bg-sidebar);
  color: var(--text-sidebar);
  border-right: 1px solid rgba(255,255,255,0.06);
  z-index: 50;
  transform: translateX(0);
  transition: transform var(--t-normal) var(--ease);
  /* Respeta el notch/Dynamic Island (arriba) y el home indicator (abajo) del iPhone */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* En mobile algún hijo (notif badge, gesto swipe) habilitaba scroll horizontal
     y dejaba los labels corridos a la derecha. El sidebar nunca debería tener
     overflow-x. */
  overflow-x: hidden;
}
.b2-sidebar-nav {
  overscroll-behavior: contain;
  overflow-x: hidden;
}

.b2-sidebar-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  color: inherit;
}
.b2-sidebar-brand-logo {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.02em;
}
.b2-sidebar-brand-sub {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240, 232, 226, 0.55);
}

.b2-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 8px;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge legacy */
}
.b2-sidebar-nav::-webkit-scrollbar { display: none; } /* Chrome/Safari/Webkit */

.b2-sidebar-section {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240, 232, 226, 0.55);
  padding: 14px 18px 6px;
}

.b2-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: 0.875rem;
  color: rgba(240, 232, 226, 0.92);
  text-decoration: none;
  position: relative;
  transition: background-color var(--t-normal) var(--ease), color var(--t-normal) var(--ease);
}
.b2-nav-link:hover {
  background: rgba(255,255,255,0.06);
  color: var(--cream);
}
.b2-nav-link.active {
  background: rgba(255,255,255,0.12);
  color: var(--cream);
  font-weight: 600;
}
.b2-nav-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--cognac-light);
  border-radius: 0 3px 3px 0;
}
.b2-nav-link .b2-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  min-width: 18px;
  opacity: 0.85;
}
.b2-nav-link .b2-nav-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  margin-left: auto;
}

/* ─── SIDEBAR FOOTER (user + theme) ───────────────────── */
.b2-sidebar-footer {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 12px 14px 14px;
}
.b2-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.b2-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cognac-light);
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.b2-sidebar-user-info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.b2-sidebar-user-name {
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.b2-sidebar-user-role {
  font-size: 0.7rem;
  color: rgba(240, 232, 226, 0.45);
}
.b2-sidebar-user-popup {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.b2-sidebar-user-popup .b2-btn {
  width: 100%;
  justify-content: center;
}

.b2-theme-toggle {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: rgba(240, 232, 226, 0.75);
  background: transparent;
  transition: background-color var(--t-normal) var(--ease), color var(--t-normal) var(--ease);
}
.b2-theme-toggle:hover {
  background: rgba(255,255,255,0.08);
  color: var(--cream);
}

/* ─── MAIN AREA ───────────────────────────────────────── */
.b2-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-left: var(--sidebar-w);
  min-height: 100dvh;
  background: var(--bg);
}

.b2-content {
  flex: 1;
  padding: 24px 28px;
  max-width: 100%;
}

/* ─── APP HEADER (scroll inteligente) ─────────────────── */
.b2-app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform var(--t-normal) var(--ease), opacity var(--t-normal) var(--ease);
}
.b2-app-header.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.b2-app-header-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.b2-app-header-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  background: transparent;
}
.b2-app-header-back:hover { background: var(--bg-hover); color: var(--text); }
.b2-app-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Solo en la vista del juego: b2-app full width + titulo centrado en viewport real
   (no dentro del padded area que tiene 60px left para el hamburger). */
body.controller-juego .b2-app {
  flex: 1 1 100%;
  width: 100%;
}
body.controller-juego .b2-app-header {
  position: relative;
}
body.controller-juego .b2-app-header-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  flex: none;
  text-align: center;
  pointer-events: none;
  margin: 0;
}
body.controller-juego .b2-app-header-actions {
  margin-left: auto;
}

/* ─── HAMBURGER (mobile) ──────────────────────────────── */
.b2-hamburger {
  display: none;
  position: fixed;
  /* Respeta el notch / Dynamic Island del iPhone (viewport-fit=cover) */
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  z-index: 60;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

/* ─── BACKDROP MOBILE ─────────────────────────────────── */
.b2-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 45;
  animation: b2-fade-in var(--t-normal) var(--ease);
}

/* ─── PAGE WRAPPER / HEADER ──────────────────────────── */
.b2-page {
  padding: 0;
  animation: b2-page-mount var(--t-slow) var(--ease) both;
}
.b2-page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.b2-page-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.b2-page-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.b2-page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 1023px) {
  .b2-sidebar {
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
  }
  .b2-sidebar.is-open {
    transform: translateX(0);
  }
  .b2-main {
    margin-left: 0;
  }
  .b2-hamburger {
    display: inline-flex;
  }
  /* env(safe-area-inset-*) en los lados → en landscape el contenido no queda
     tapado por el notch/Dynamic Island del iPhone */
  .b2-content {
    padding: 64px calc(16px + env(safe-area-inset-right, 0px)) 24px calc(16px + env(safe-area-inset-left, 0px));
  }
  .b2-app-header {
    padding: 12px calc(16px + env(safe-area-inset-right, 0px)) 12px calc(60px + env(safe-area-inset-left, 0px));
  }
  .b2-page-title { font-size: 1.35rem; }
}

@media (max-width: 640px) {
  .b2-content {
    padding: 64px calc(12px + env(safe-area-inset-right, 0px)) 24px calc(12px + env(safe-area-inset-left, 0px));
  }
  .b2-app-header {
    padding: 10px calc(12px + env(safe-area-inset-right, 0px)) 10px calc(56px + env(safe-area-inset-left, 0px));
  }
}
/* Componentes core: card, btn, input, badge, table, modal, dots-menu, tabs, etc. */

/* ═══════════════ CARD ═══════════════ */
.b2-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
  overflow: hidden;
  transition: box-shadow var(--t-normal) var(--ease), border-color var(--t-normal) var(--ease);
}
.b2-card:hover { box-shadow: var(--shadow); }
.b2-card.is-saving { pointer-events: none; opacity: 0.7; }

.b2-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-subtle);
}
.b2-card-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.b2-card-title .b2-icon {
  flex-shrink: 0;
  color: var(--text-muted);
}
.b2-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.b2-card-body {
  padding: 16px 18px;
}
.b2-card-body.is-flush { padding: 0; }
.b2-card-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  background: var(--bg-subtle);
}

/* Card de estado de guardado: spinner se monta dentro */
.b2-card .b2-card-saving-indicator {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.b2-card.is-saving .b2-card-saving-indicator {
  display: inline-flex;
}
.b2-card.is-saved .b2-card-saving-indicator {
  display: inline-flex;
  color: var(--color-success);
}

/* ═══════════════ BUTTON ═══════════════ */
.b2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  line-height: 1.2;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.b2-btn:disabled, .b2-btn.is-loading { opacity: 0.6; cursor: not-allowed; }

.b2-btn-primary {
  background: var(--cognac);
  color: var(--cream);
  border-color: var(--cognac);
}
.b2-btn-primary:hover:not(:disabled) {
  background: var(--cognac-deep);
  border-color: var(--cognac-deep);
  color: var(--cream);
}

.b2-btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border);
}
.b2-btn-secondary:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--text-muted);
}

.b2-btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
}
.b2-btn-ghost:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text);
}

.b2-btn-danger {
  background: var(--color-danger);
  color: white;
  border-color: var(--color-danger);
}
.b2-btn-danger:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
}

.b2-btn-sm { padding: 5px 10px; font-size: 0.8rem; }
.b2-btn-lg { padding: 11px 18px; font-size: 0.95rem; }
.b2-btn-icon { padding: 8px; min-width: 36px; }

/* Loader dentro de botón (reemplaza texto) */
.b2-btn .b2-dots-loader { margin: 0 4px; }

/* ═══════════════ INPUT / FORM ═══════════════ */
.b2-input,
.b2-select,
.b2-textarea {
  width: 100%;
  padding: 8px 12px;
  font-size: 0.9rem;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.b2-input:focus,
.b2-select:focus,
.b2-textarea:focus {
  outline: none;
  border-color: var(--cognac-light);
  box-shadow: 0 0 0 3px rgba(138, 94, 86, 0.15);
}
.b2-input:disabled,
.b2-input[readonly] {
  background: var(--bg-hover);
  cursor: not-allowed;
  color: var(--text-soft);
}
.b2-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }

.b2-input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-card);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.b2-input-group:focus-within {
  border-color: var(--cognac-light);
  box-shadow: 0 0 0 3px rgba(138, 94, 86, 0.15);
}
.b2-input-group .b2-input-prefix,
.b2-input-group .b2-input-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 0.85rem;
  border-right: 1px solid var(--border-light);
}
.b2-input-group .b2-input-suffix {
  border-right: 0;
  border-left: 1px solid var(--border-light);
}
.b2-input-group .b2-input {
  border: 0;
  background: transparent;
}
.b2-input-group .b2-input:focus { box-shadow: none; }

.b2-form-group {
  margin-bottom: 14px;
}
.b2-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.b2-form-help {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.b2-form-error {
  display: block;
  font-size: 0.78rem;
  color: var(--color-danger);
  margin-top: 4px;
}

.b2-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

/* Info-grid (readonly view) */
.b2-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.b2-info-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.b2-info-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.b2-info-value {
  font-size: 0.92rem;
  color: var(--text);
  word-break: break-word;
}
.b2-info-value.mono { font-family: var(--font-mono); }

/* ═══════════════ BADGE ═══════════════ */
.b2-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--bg-hover);
  color: var(--text);
  white-space: nowrap;
}
.b2-badge-success { background: var(--color-success-bg); color: var(--color-success); }
.b2-badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.b2-badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger);  }
.b2-badge-info    { background: var(--color-info-bg);    color: var(--color-info);    }
.b2-badge-neutral { background: var(--bg-hover); color: var(--text-muted); }
.b2-badge-outline { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }

.b2-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ═══════════════ STATUS BADGE LG (header de detalle) ═══════════════ */
.b2-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
}
.b2-status-badge .b2-badge-dot { width: 8px; height: 8px; }

/* ═══════════════ TABLE ═══════════════ */
.b2-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.b2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  color: var(--text);
}
.b2-table thead th {
  background: var(--bg-subtle);
  padding: 10px 14px;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.b2-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
.b2-table tbody tr:hover { background: var(--bg-hover); }
.b2-table tbody tr:last-child td { border-bottom: 0; }
.b2-table .text-right { text-align: right; }
.b2-table .text-center { text-align: center; }
.b2-table .mono { font-family: var(--font-mono); }

/* Sombras laterales que indican "hay más contenido" en scroll horizontal */
.b2-table-wrapper.has-scroll-shadow::before,
.b2-table-wrapper.has-scroll-shadow::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 16px;
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--t-normal) var(--ease);
}
.b2-table-wrapper.has-scroll-shadow::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-card), transparent);
  opacity: 0;
}
.b2-table-wrapper.has-scroll-shadow::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-card), transparent);
  opacity: 0;
}
.b2-table-wrapper.scrolled-x::before { opacity: 1; }
.b2-table-wrapper.has-more-right::after { opacity: 1; }

/* ═══════════════ MODAL ═══════════════ */
.b2-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: b2-fade-in var(--t-normal) var(--ease);
}
.b2-modal {
  background: var(--bg-card);
  border-radius: var(--radius);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
  animation: b2-scale-in var(--t-normal) var(--ease);
}
.b2-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
}
.b2-modal-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  flex: 1;
}
.b2-modal-body { padding: 18px 20px; }
.b2-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  background: var(--bg-subtle);
}

/* ═══ Modales estilo "bottom sheet" (Apple) en mobile: salen de abajo, translúcidos ═══ */
@media (max-width: 768px) {
    .b2-modal-backdrop,
    .gasto-modal-backdrop {
        align-items: flex-end;
        padding: 0;
        background: rgba(0, 0, 0, 0.45);
    }
    .b2-modal,
    .gasto-modal-box {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        border: none;
        border-radius: 22px 22px 0 0;
        background: color-mix(in srgb, var(--bg-card) 60%, transparent);
        -webkit-backdrop-filter: blur(26px) saturate(180%);
        backdrop-filter: blur(26px) saturate(180%);
        box-shadow: 0 -10px 44px -10px rgba(0, 0, 0, 0.45);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        animation: b2-sheet-up 0.3s cubic-bezier(.16, .84, .44, 1);
    }
    /* Agarradera (drag handle) arriba del sheet */
    .b2-modal::before,
    .gasto-modal-box::before {
        content: '';
        display: block;
        flex-shrink: 0;
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: var(--text-muted);
        opacity: 0.4;
        margin: 8px auto 2px;
    }
    /* La fecha de entrega inline se confirma en el modal: se oculta en mobile */
    .js-fecha-inline { display: none !important; }
}
@keyframes b2-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ═══ Información del cliente: layout compacto inline en mobile ═══ */
/* OJO: la regla base en tailwind.css usa !important, así que acá también */
@media (max-width: 640px) {
    .b2-detail-info .info-grid-modern {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    .b2-detail-info .info-cell {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding: 8px 14px !important;
        border-right: none !important;
    }
    .b2-detail-info .info-cell .info-label { margin-bottom: 0 !important; flex-shrink: 0; }
    .b2-detail-info .info-cell .info-value { text-align: right; min-width: 0; }
    /* Si el valor es un control de form (select / date / textarea), va debajo full-width */
    .b2-detail-info .info-cell:has(select),
    .b2-detail-info .info-cell:has(textarea),
    .b2-detail-info .info-cell:has(input) {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
    }
    .b2-detail-info .info-cell:has(select) .info-value,
    .b2-detail-info .info-cell:has(textarea) .info-value,
    .b2-detail-info .info-cell:has(input) .info-value { text-align: left; }
    .b2-detail-info .info-cell .form-control { max-width: 100% !important; }
    /* Header: título + botones siempre en una línea (sin wrap) */
    .b2-detail-info .card-header {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .b2-detail-info .card-header .card-title { flex: 1; min-width: 0; }
}

/* ═══════════════ DOTS MENU (⋯) ═══════════════ */
.b2-dots-menu-wrap { position: relative; display: inline-block; }
.b2-dots-menu-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
}
.b2-dots-menu-btn:hover { background: var(--bg-hover); color: var(--text); }
.b2-dots-menu-btn[aria-expanded="true"] { background: var(--bg-hover); color: var(--text); }

.b2-dots-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 40;
  padding: 4px;
  animation: b2-scale-in var(--t-fast) var(--ease);
  transform-origin: top right;
}
.b2-dots-menu.align-left { right: auto; left: 0; transform-origin: top left; }
.b2-dots-menu[hidden] { display: none; }

.b2-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 0.875rem;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.b2-menu-item:hover { background: var(--bg-hover); }
.b2-menu-item.danger { color: var(--color-danger); }
.b2-menu-item.danger:hover { background: var(--color-danger-bg); }
.b2-menu-divider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 0;
}

/* ═══════════════ KPI CARD ═══════════════ */
.b2-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.b2-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 16px 18px;
  position: relative;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--t-normal) var(--ease), transform var(--t-normal) var(--ease);
  text-decoration: none;
  color: inherit;
  display: block;
}
.b2-kpi:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.b2-kpi::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--cognac);
}
.b2-kpi.green::before  { background: var(--color-success); }
.b2-kpi.amber::before  { background: var(--color-warning); }
.b2-kpi.red::before    { background: var(--color-danger); }
.b2-kpi.blue::before   { background: var(--color-info); }

.b2-kpi-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.b2-kpi-value {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  word-break: break-word;
}
.b2-kpi-value.sm { font-size: 1.3rem; }
.b2-kpi-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ═══════════════ TABS ═══════════════ */
.b2-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 16px;
  scrollbar-width: none;
}
.b2-tabs::-webkit-scrollbar { display: none; }
.b2-tab {
  padding: 10px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  text-decoration: none;
  transition: color var(--t-normal) var(--ease), border-color var(--t-normal) var(--ease);
}
.b2-tab:hover { color: var(--text); }
.b2-tab.active {
  color: var(--cognac);
  border-bottom-color: var(--cognac);
  font-weight: 600;
}

/* ═══════════════ EMPTY STATE ═══════════════ */
.b2-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}
.b2-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.4;
}
.b2-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.b2-empty-text {
  font-size: 0.875rem;
  max-width: 360px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ═══════════════ TOAST ═══════════════ */
.b2-toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 420px;
}
.b2-toast {
  background: var(--bg-card);
  color: var(--text);
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  pointer-events: auto;
  animation: b2-toast-in var(--t-normal) var(--ease);
  max-width: 100%;
}
.b2-toast.success { border-left: 3px solid var(--color-success); }
.b2-toast.error { border-left: 3px solid var(--color-danger); }
.b2-toast.warning { border-left: 3px solid var(--color-warning); }
.b2-toast.info { border-left: 3px solid var(--color-info); }
@keyframes b2-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.b2-toast.is-leaving { animation: b2-fade-out var(--t-normal) var(--ease) forwards; }

@media (max-width: 640px) {
  .b2-toast-container {
    bottom: 12px;
    left: 12px;
    right: 12px;
    max-width: none;
  }
}

/* ═══════════════ ID CHIP ═══════════════ */
.b2-id-chip {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.b2-id-chip:hover {
  background: var(--cognac);
  color: var(--cream);
}

/* ═══════════════ AMOUNTS ═══════════════ */
.b2-amount { font-family: var(--font-mono); white-space: nowrap; }
.b2-amount-positive { color: var(--color-success); }
.b2-amount-negative { color: var(--color-danger); }
.b2-amount-pending { color: var(--color-warning); }
.b2-amount-neutral { color: var(--text); }
.b2-amount-muted { color: var(--text-muted); }

/* ═══════════════ ALERTS ═══════════════ */
.b2-alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  font-size: 0.875rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-left: 3px solid;
}
.b2-alert-success { background: var(--color-success-bg); color: var(--color-success); border-left-color: var(--color-success); }
.b2-alert-warning { background: var(--color-warning-bg); color: var(--color-warning); border-left-color: var(--color-warning); }
.b2-alert-danger  { background: var(--color-danger-bg);  color: var(--color-danger);  border-left-color: var(--color-danger); }
.b2-alert-info    { background: var(--color-info-bg);    color: var(--color-info);    border-left-color: var(--color-info); }

/* ═══════════════ TIMELINE (entregas, actividad) ═══════════════ */
.b2-timeline { display: flex; flex-direction: column; gap: 14px; padding: 8px 0; }
.b2-timeline-item {
  position: relative;
  padding-left: 24px;
  border-left: 2px solid var(--border-light);
  padding-bottom: 10px;
}
.b2-timeline-item::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cognac);
  border: 2px solid var(--bg-card);
}
.b2-timeline-date {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-bottom: 4px;
}
.b2-timeline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.b2-timeline-tag {
  display: inline-flex;
  padding: 3px 8px;
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--text);
}
.b2-timeline-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}

/* ═══════════════ DANGER ZONE ═══════════════ */
.b2-danger-zone {
  background: var(--color-danger-bg);
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-top: 18px;
}
.b2-danger-zone-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-danger);
  margin-bottom: 8px;
}
/* Utilities cortas para no spammear style="" inline. */

/* Display */
.b2-flex { display: flex; }
.b2-inline-flex { display: inline-flex; }
.b2-grid { display: grid; }
.b2-block { display: block; }
.b2-inline-block { display: inline-block; }
.b2-hidden { display: none !important; }

/* Flex */
.b2-flex-1 { flex: 1; }
.b2-flex-row { flex-direction: row; }
.b2-flex-col { flex-direction: column; }
.b2-flex-wrap { flex-wrap: wrap; }
.b2-items-center { align-items: center; }
.b2-items-start { align-items: flex-start; }
.b2-items-end { align-items: flex-end; }
.b2-justify-center { justify-content: center; }
.b2-justify-between { justify-content: space-between; }
.b2-justify-end { justify-content: flex-end; }
.b2-gap-1 { gap: 4px; }
.b2-gap-2 { gap: 8px; }
.b2-gap-3 { gap: 12px; }
.b2-gap-4 { gap: 16px; }
.b2-gap-6 { gap: 24px; }

/* Text */
.b2-text-left { text-align: left; }
.b2-text-center { text-align: center; }
.b2-text-right { text-align: right; }
.b2-text-muted { color: var(--text-muted); }
.b2-text-soft { color: var(--text-soft); }
.b2-text-danger { color: var(--color-danger); }
.b2-text-success { color: var(--color-success); }
.b2-text-warning { color: var(--color-warning); }
.b2-text-info { color: var(--color-info); }
.b2-text-sm { font-size: 0.8rem; }
.b2-text-xs { font-size: 0.7rem; }
.b2-text-lg { font-size: 1.05rem; }
.b2-text-xl { font-size: 1.25rem; }
.b2-text-bold { font-weight: 600; }
.b2-mono { font-family: var(--font-mono); }
.b2-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Spacing */
.b2-mt-1 { margin-top: 4px; }
.b2-mt-2 { margin-top: 8px; }
.b2-mt-3 { margin-top: 12px; }
.b2-mt-4 { margin-top: 16px; }
.b2-mt-6 { margin-top: 24px; }
.b2-mb-1 { margin-bottom: 4px; }
.b2-mb-2 { margin-bottom: 8px; }
.b2-mb-3 { margin-bottom: 12px; }
.b2-mb-4 { margin-bottom: 16px; }
.b2-mb-6 { margin-bottom: 24px; }
.b2-p-0 { padding: 0; }
.b2-p-2 { padding: 8px; }
.b2-p-3 { padding: 12px; }
.b2-p-4 { padding: 16px; }

/* Sizing */
.b2-w-full { width: 100%; }
.b2-w-auto { width: auto; }
.b2-min-w-0 { min-width: 0; }
.b2-max-w-md { max-width: 480px; }
.b2-max-w-lg { max-width: 720px; }

/* Border */
.b2-border-0 { border: 0; }
.b2-border-t { border-top: 1px solid var(--border-light); }

/* Bg */
.b2-bg-card { background: var(--bg-card); }
.b2-bg-hover { background: var(--bg-hover); }
.b2-bg-subtle { background: var(--bg-subtle); }

/* Responsive */
@media (min-width: 768px) {
  .b2-md-flex { display: flex; }
  .b2-md-grid { display: grid; }
  .b2-md-hidden { display: none !important; }
}
@media (max-width: 767px) {
  .b2-mobile-hidden { display: none !important; }
  .b2-mobile-full { width: 100% !important; }
}
/* ═══════════════════════════════════════════════════════════
   B2YOU Redesign - Capa de compatibilidad
   Mapea las clases viejas de b2you.css al sistema de diseño nuevo.
   Permite que TODAS las vistas existentes hereden el look nuevo
   sin tener que tocar markup. Conservar todas las clases existentes.
   ═══════════════════════════════════════════════════════════ */

/* === Cards === */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 18px;
    overflow: hidden;
    transition: box-shadow var(--t-normal) var(--ease);
}
.card:hover { box-shadow: var(--shadow); }
.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
}
.card-title {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text);
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.card-body { padding: 16px 18px; }
.card-body.p-0, .card-body[style*="padding:0"] { padding: 0; }
.card-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-subtle);
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    line-height: 1.2;
    transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary {
    background: var(--cognac); color: var(--cream); border-color: var(--cognac);
}
.btn-primary:hover:not(:disabled) {
    background: var(--cognac-deep); border-color: var(--cognac-deep); color: var(--cream);
}
.btn-secondary {
    background: var(--bg-card); color: var(--text); border-color: var(--border);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--bg-hover); border-color: var(--text-muted);
}
.btn-danger {
    background: var(--color-danger); color: white; border-color: var(--color-danger);
}
.btn-danger:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; }
.btn-success {
    background: var(--color-success); color: white; border-color: var(--color-success);
}
.btn-warning {
    background: var(--color-warning); color: white; border-color: var(--color-warning);
}
.btn-sm { padding: 5px 10px; font-size: 0.8rem; }
.btn-lg { padding: 11px 18px; font-size: 0.95rem; }

/* === Forms === */
.form-control {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.9rem;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form-control:focus {
    outline: none;
    border-color: var(--cognac-light);
    box-shadow: 0 0 0 3px rgba(138, 94, 86, 0.15);
}
.form-control:disabled, .form-control[readonly] {
    background: var(--bg-hover); cursor: not-allowed; color: var(--text-soft);
}
.form-control-sm { padding: 5px 10px; font-size: 0.8rem; }
.form-group { margin-bottom: 14px; }
.form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 5px;
}
/* El espaciado label→input lo da el gap flex de .form-group; evitamos el doble margen
   (la regla .form-label de tailwind.css agrega margin-bottom y se duplicaba). */
.form-group .form-label { margin-bottom: 0; line-height: 1.3; }
.form-actions {
    display: flex; align-items: center; gap: 8px; justify-content: flex-end;
    padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border-light);
}
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.col-md-4, .col-md-6, .col-md-8, .col-md-12 { min-width: 0; }

.input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-card);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input-group:focus-within {
    border-color: var(--cognac-light);
    box-shadow: 0 0 0 3px rgba(138, 94, 86, 0.15);
}
.input-group .form-control { border: 0; }
.input-group .form-control:focus { box-shadow: none; }
.input-group .input-prefix, .input-group .input-suffix {
    display: inline-flex; align-items: center; padding: 0 12px;
    background: var(--bg-subtle); color: var(--text-muted); font-size: 0.85rem;
    border-right: 1px solid var(--border-light);
}
.input-group .input-suffix { border-right: 0; border-left: 1px solid var(--border-light); }

/* === Badges (existentes) === */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--bg-hover);
    color: var(--text);
    white-space: nowrap;
}
.badge-success, .badge-activo, .badge-enviada {
    background: var(--color-success-bg); color: var(--color-success);
}
.badge-warning, .badge-confirmada {
    background: var(--color-warning-bg); color: var(--color-warning);
}
.badge-danger, .badge-cancelada {
    background: var(--color-danger-bg); color: var(--color-danger);
}
.badge-inactivo, .badge-secondary {
    background: var(--bg-hover); color: var(--text-muted);
}
.badge-outline {
    background: transparent; border: 1px solid var(--border); color: var(--text-muted);
}
.badge-info {
    background: var(--color-info-bg); color: var(--color-info);
}
.badge-estado-lg {
    padding: 6px 14px;
    font-size: 0.85rem;
}
.badge-dot {
    width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

/* === Tables === */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    color: var(--text);
}
.table thead th {
    background: var(--bg-subtle);
    padding: 10px 14px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

/* En reportes preferimos legibilidad sobre la etiqueta uniforme: nada de uppercase,
   nada de letter-spacing, sin negrita en headers / totales / KPIs / amounts. */
body.controller-reportes .table thead th,
body.controller-reportes .doc-expand-pane th,
body.controller-reportes .cajacal-head,
body.controller-reportes [data-reportes-cell-uppercase] {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
}
/* Body de la tabla: peso normal */
body.controller-reportes .table tbody td,
body.controller-reportes .table tbody td * {
    font-weight: 400 !important;
}
/* tfoot (Totales): un poco más marcado pero sin uppercase ni bold extremo */
body.controller-reportes .table tfoot,
body.controller-reportes .table tfoot tr,
body.controller-reportes .table tfoot td,
body.controller-reportes .table tfoot td * {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
}
/* Amounts (positivos/negativos/pendientes/muted) sin bold */
body.controller-reportes .amount,
body.controller-reportes [class*="amount-"],
body.controller-reportes .mono,
body.controller-reportes .text-right.mono {
    font-weight: 400 !important;
}
/* KPI cards (titulos como "VENTAS", "TOTAL FACTURADO") sin uppercase ni bold */
body.controller-reportes .kpi-card .kpi-label,
body.controller-reportes .kpi-card .kpi-title,
body.controller-reportes [class*="kpi"] [class*="label"],
body.controller-reportes [class*="kpi"] [class*="title"],
body.controller-reportes .stat-label,
body.controller-reportes .stat-card .stat-title {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
}
/* Y los valores grandes de los KPI tampoco en bold extremo */
body.controller-reportes .kpi-card .kpi-value,
body.controller-reportes [class*="kpi"] [class*="value"],
body.controller-reportes .stat-card .stat-value {
    font-weight: 500 !important;
}

/* Números no se rompen entre líneas; el "$" no queda separado del número.
   Aplica a celdas de tabla, KPIs y a cualquier cosa que contenga un importe. */
body.controller-reportes .kpi-value,
body.controller-reportes .table tbody td.text-right,
body.controller-reportes .table tbody td.text-center,
body.controller-reportes .table tbody td.mono,
body.controller-reportes .table tfoot td,
body.controller-reportes .amount,
body.controller-reportes [class*="amount-"] {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}

/* Toggle global de gráficos (controlado por reportes-charts-toggle.js) */
body.controller-reportes .b2-chart-hidden { display: none !important; }
body.controller-reportes .b2-charts-toggle-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
body.controller-reportes .b2-charts-toggle-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
body.controller-reportes .b2-charts-toggle-left:empty { display: none; }
.table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}
.table tbody tr:hover { background: var(--bg-hover); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .text-right, .text-right { text-align: right; }
.table .text-center, .text-center { text-align: center; }

/* === Amounts === */
.amount { font-family: var(--font-mono); white-space: nowrap; }
.amount-positive { color: var(--color-success); }
.amount-negative { color: var(--color-danger); }
.amount-pending { color: var(--color-warning); }
.amount-neutral { color: var(--text); }
.amount-muted { color: var(--text-muted); }

/* === Mono / monospace === */
.mono { font-family: var(--font-mono); }

/* === Text helpers === */
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }

/* === ID Chip === */
.id-chip {
    display: inline-block;
    padding: 2px 8px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.id-chip:hover { background: var(--cognac); color: var(--cream); }

/* === KPI Cards (dashboard) === */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 16px 18px;
    position: relative;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--t-normal) var(--ease), transform var(--t-normal) var(--ease);
    text-decoration: none;
    color: inherit;
}
.metric-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.metrics-grid .metric-card {
    user-select: none;
    /* En el dashboard el movimiento se hace con la prop CSS `translate` (kpi-physics.js).
       Bloqueamos `transform` para que el `transform: translate3d(...)` que Draggable
       setea inline cada frame no se renderice y duplique el desplazamiento (flicker). */
    transform: none !important;
    transition: box-shadow var(--t-normal) var(--ease);
}
.metrics-grid .metric-card:hover { transform: none !important; }
.metric-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--cognac);
}
.metric-card.green::before  { background: var(--color-success); }
.metric-card.amber::before  { background: var(--color-warning); }
.metric-card.red::before    { background: var(--color-danger); }
.metric-card.blue::before   { background: var(--color-info); }
/* Card de bienvenida: ocupa dos columnas de la grilla de KPIs (misma altura y motion). */
.metric-welcome { grid-column: span 2; }
.metric-welcome::before { background: var(--cognac); }
.metric-card-icon {
    color: var(--text-muted);
    margin-bottom: 8px;
    opacity: 0.5;
}
.metric-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.metric-value {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.15;
    word-break: break-word;
}
.metric-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* === Alerts === */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    font-size: 0.875rem;
    border-left: 3px solid;
}
.alert-success { background: var(--color-success-bg); color: var(--color-success); border-left-color: var(--color-success); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning); border-left-color: var(--color-warning); }
.alert-danger  { background: var(--color-danger-bg); color: var(--color-danger); border-left-color: var(--color-danger); }
.alert-info    { background: var(--color-info-bg); color: var(--color-info); border-left-color: var(--color-info); }

/* === Empty state (existente) === */
.empty-state, .empty-state-text {
    text-align: center;
    padding: 30px 16px;
    color: var(--text-muted);
}
.empty-state h3 { color: var(--text); margin-bottom: 6px; }
.empty-state p { color: var(--text-muted); }
.empty-icon, .empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.4;
}

/* === Existente: info-grid (Detail views) === */
.info-grid, .info-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}
.info-cell, .info-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.info-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.info-value, .data-label + dd {
    font-size: 0.92rem;
    color: var(--text);
    word-break: break-word;
}
.data-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

/* === Dashboard hero === */
.dash-hero {
    background: linear-gradient(135deg, var(--cognac) 0%, var(--cognac-deep) 100%);
    color: var(--cream);
    padding: 22px 24px;
    border-radius: var(--radius);
    margin-bottom: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.dash-hero-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: var(--cream);
    letter-spacing: -0.02em;
}
.dash-hero-sub {
    font-size: 0.9rem;
    color: rgba(245, 241, 235, 0.85);
    margin: 0;
}
.dash-hero-alerts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.dash-alert-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(255,255,255,0.15);
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    color: var(--cream);
}

/* === Sidebar links viejos (en caso de fallback) === */
.sidebar-link { display: none; }
.sidebar-section { display: none; }
.sidebar-brand { display: none; }
.sidebar-footer { display: none; }
.sidebar-user { display: none; }
.sidebar-avatar { display: none; }
.sidebar { display: none; }

/* === Detail layout === */
.detail-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 900px) {
    .detail-layout {
        grid-template-columns: 1.6fr 1fr;
    }
}

/* === Hide-mobile column class (used in tables) === */
@media (max-width: 768px) {
    .col-hide-mobile { display: none; }
}

/* === Financial summary (caja) === */
.financial-summary {
    background: var(--bg-subtle);
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.875rem;
}

/* === Product cell (items tables) === */
.product-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.product-name { font-weight: 600; color: var(--text); }
.product-code { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); }

/* === Pagination === */
.pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
    justify-content: center;
}
.pagination a, .pagination span {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    background: var(--bg-card);
}
.pagination a:hover { background: var(--bg-hover); color: var(--text); }
.pagination .active, .pagination [aria-current="page"] {
    background: var(--cognac); color: var(--cream); border-color: var(--cognac);
}

/* === Items-readonly / items-editable toggles === */
.items-readonly { display: inline; }
.items-editable { display: none; }
.editing .items-readonly { display: none; }
.editing .items-editable { display: inline; }

/* === Botón con icono === */
.btn .icon, .btn svg { flex-shrink: 0; }

/* === Cualquier <pre> de errores que pueda venir === */
pre.error {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    padding: 10px;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-size: 0.8rem;
}
/* ═══════════════════════════════════════════════════════════
   Polish: ajustes finos y overrides especificos para vistas
   particulares que tienen styling propio en b2you.css.
   ═══════════════════════════════════════════════════════════ */

/* ─── Hero del detail (Ventas, Compras, etc) ──────────────────── */
.hero-header {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 18px 22px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
}
.hero-left { flex: 1; min-width: 0; }
.hero-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text);
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.hero-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.hero-meta .sep {
    width: 3px;
    height: 3px;
    background: var(--text-muted);
    border-radius: 50%;
    opacity: 0.5;
}
.hero-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ─── KPI Row (Detail views) ──────────────────────────────────── */
.kpi-row, .kpi-row--4 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 14px 16px;
    position: relative;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--t-normal) var(--ease);
}
.kpi-card:hover { box-shadow: var(--shadow); }
.kpi-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--cognac);
}
.kpi-card--total::before { background: var(--cognac); }
.kpi-card--profit::before { background: var(--color-success); }
.kpi-card--progress::before { background: var(--color-info); }
.kpi-card--saldo::before { background: var(--color-warning); }
.kpi-card .kpi-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.kpi-card .kpi-value {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}
.kpi-card .kpi-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}
.kpi-pct {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}
.progress-bar-bg {
    background: var(--bg-hover);
    overflow: hidden;
    margin-top: 6px;
}
.progress-bar-fill {
    background: var(--cognac);
    height: 100%;
    transition: width 0.5s var(--ease);
}
.progress-bar-fill--delivery { background: var(--color-info); }
.progress-bar-fill--payment { background: var(--color-success); }

/* ─── Dashboard charts grid ──────────────────────────────────── */
.dash-charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 22px;
}
@media (min-width: 768px) {
    .dash-charts-grid {
        grid-template-columns: 1.4fr 1fr;
    }
}
.dash-chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow-sm);
}

/* ─── Topbar legacy hide (no debería verse, pero por las dudas) ─ */
.topbar, .main-wrapper { display: contents !important; }
.page-content { padding: 0 !important; }

/* ─── Hamburger button del shell viejo, ocultar ───────────────── */
.hamburger-btn { display: none !important; }
.sidebar-overlay { display: none !important; }

/* ─── Botones especiales (existentes) ─────────────────────────── */
.btn-edit-comision {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
}
.btn-edit-comision:hover { background: var(--bg-hover); color: var(--text); }

.btn-topbar {
    padding: 6px 12px;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
}
.btn-topbar:hover { background: var(--bg-hover); }
.btn-full { width: 100%; }

/* ─── Mobile específico ───────────────────────────────────────── */
@media (max-width: 768px) {
    /* Cards más compactas */
    .card-header, .b2-card-header { padding: 12px 14px; }
    .card-body, .b2-card-body { padding: 14px; }
    .b2-page-title { font-size: 1.2rem; }
    .hero-header { padding: 14px 16px; }
    .hero-title { font-size: 1.2rem; }
    .kpi-card { padding: 12px 14px; }
    .kpi-card .kpi-value { font-size: 1.2rem; }
    .metric-card { padding: 14px 16px; }
    .metric-value { font-size: 1.4rem; }

    /* Tablas dentro de cards */
    .card .table, .b2-card .b2-table {
        font-size: 0.82rem;
    }
    .card .table th, .card .table td,
    .b2-card .b2-table th, .b2-card .b2-table td {
        padding: 8px 10px;
    }

    /* Botones más cómodos para dedo */
    .btn { min-height: 40px; padding: 9px 14px; }
    .btn-sm { min-height: 34px; padding: 6px 12px; }
    .btn-icon, .b2-btn-icon { min-width: 40px; }

    /* Forms stackean */
    .form-row, .b2-form-row {
        grid-template-columns: 1fr;
    }

    /* Detail layout stack */
    .detail-layout { grid-template-columns: 1fr; }
}

/* ─── Dark mode adicional (overrides para componentes con hardcoded) ─ */
[data-theme="dark"] .login-card,
[data-theme="dark"] .b2-login-card {
    background: var(--bg-card);
    color: var(--text);
}
[data-theme="dark"] canvas { filter: brightness(0.95); }

/* ─── Scroll header mejorado: padding bajo para que no se solape con content ─ */
.b2-app-header + .b2-content {
    /* el sticky header está dentro de .b2-main, así que content empuja naturalmente */
}

/* Cuando hay un .b2-page-mount como primer hijo, asegurarse de que el animation
   no haga que se solape con el header */
.b2-content > .b2-page-mount { position: relative; }

/* ─── Botones flotantes (calc-fab) sobre el resto ─────────────── */
.calc-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 80;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--cognac);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--t-normal) var(--ease);
}
.calc-fab:hover { transform: scale(1.08); }
@media (max-width: 768px) {
    .calc-fab, .calc-popup { display: none !important; }
}

.calc-popup {
    position: fixed;
    bottom: 80px;
    right: 24px;
    z-index: 81;
    width: 280px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 0;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.calc-popup.open { display: flex; }
.calc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.calc-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: background var(--t-normal) var(--ease), color var(--t-normal) var(--ease);
}
.calc-close:hover { background: var(--bg-hover); color: var(--text); }
.calc-body { padding: 14px; }
.calc-input {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 1.15rem;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    outline: none;
    transition: border-color var(--t-normal) var(--ease);
}
.calc-input:focus { border-color: var(--cognac); }
.calc-hint {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
}
.calc-error {
    margin-top: 6px;
    font-size: 0.78rem;
    color: #dc2626;
    text-align: center;
    min-height: 1.1em;
}

/* ─── Notification badge en bell positioning ─────────────────── */
#notifBell { position: relative; }

/* ─── Mejoras para inputs en cards ────────────────────────────── */
.card input[type="text"],
.card input[type="email"],
.card input[type="number"],
.card input[type="date"],
.card input[type="password"],
.card select,
.card textarea {
    /* Heredan estilo de .form-control via compat */
}

/* ─── Sticky header z-index sobre cards ─────────────────────── */
.b2-app-header { z-index: 30; }
.b2-sidebar { z-index: 55; }
.b2-backdrop { z-index: 50; }

/* ─── Theme-aware shadows ────────────────────────────────────── */
[data-theme="dark"] .card,
[data-theme="dark"] .b2-card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .b2-kpi,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .hero-header {
    border-color: var(--border);
}

/* ─── Toggle ↔ tema iconos sun/moon ──────────────────────────── */
.b2-icon-sun, .b2-icon-moon { display: none; }
:root:not([data-theme="dark"]) .b2-theme-toggle .b2-icon-moon { display: block; }
[data-theme="dark"] .b2-theme-toggle .b2-icon-sun { display: block; }

/* ─── Page mount en main para evitar shift al cargar ─────────── */
.b2-content { will-change: opacity, transform; }

/* ─── Override del hero del login con la nueva paleta ────────── */
.login-body {
    background: linear-gradient(135deg, var(--cognac) 0%, var(--cognac-deep) 100%) !important;
}
.login-card {
    background: var(--bg-card) !important;
    color: var(--text);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

/* ─── Inputs en dark mode: textos sutiles más visibles ────────── */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* ─── Detail edit/readonly toggle ────────────────────────────── */
.detail-layout > div { min-width: 0; }

/* ─── Financial breakdown (cobros) ───────────────────────────── */
.fin-breakdown {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}
.fin-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.fin-row--highlight {
    font-weight: 600;
    color: var(--text);
    border-top: 1px solid var(--border-light);
    padding-top: 6px;
    margin-top: 4px;
}

/* ─── Danger row (filas resaltadas en rojo) ──────────────────── */
.danger-row {
    background: var(--color-danger-bg) !important;
    color: var(--color-danger);
}

/* ─── Danger zone modern (cancelar venta, eliminar) ──────────── */
.danger-zone-modern {
    background: var(--color-danger-bg);
    border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-top: 18px;
}

/* ─── Socio estimation detail ────────────────────────────────── */
.socio-est-detail {
    background: var(--bg-subtle);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ─── Item info popup (cuando se clica el "?" en un item) ────── */
.item-info-popup {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 14px;
    color: var(--text);
}
.close-popup {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}
.close-popup:hover { background: var(--bg-hover); color: var(--text); }

/* ─── Upload dropzone (subir imágenes) ───────────────────────── */
.upload-dropzone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color var(--t-normal) var(--ease), background-color var(--t-normal) var(--ease);
}
.upload-dropzone:hover {
    border-color: var(--cognac-light);
    background: var(--bg-hover);
}
.upload-dropzone-content { font-size: 0.85rem; }
.upload-dropzone-selected {
    border-color: var(--color-success);
    background: var(--color-success-bg);
    color: var(--color-success);
}

/* ─── Img loading skeleton ───────────────────────────────────── */
.img-loading {
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    animation: b2-shimmer 1.5s linear infinite;
    min-height: 60px;
}

/* ─── Botones de item info (?, image) ────────────────────────── */
.btn-item-info-detail, .btn-item-img {
    background: var(--bg-hover);
    border: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.btn-item-info-detail:hover, .btn-item-img:hover {
    background: var(--cognac);
    color: var(--cream);
}

/* ─── Cards flex (cuando varios cards van lado a lado) ───────── */
.cards-flex {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
@media (min-width: 900px) {
    .cards-flex { flex-direction: row; }
    .cards-flex > * { flex: 1; min-width: 0; }
}

/* ─── Full width helper ──────────────────────────────────────── */
.full-width { width: 100%; }

/* ─── Form buttons toggle group ──────────────────────────────── */
.btn-group-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.btn-group-toggle > button,
.btn-group-toggle > .btn {
    border-radius: 0;
    border: 0;
    border-right: 1px solid var(--border);
}
.btn-group-toggle > button:last-child,
.btn-group-toggle > .btn:last-child { border-right: 0; }
.btn-group-toggle > .active {
    background: var(--cognac);
    color: var(--cream);
}

/* ─── Expandable row de ventas/compras ───────────────────────── */
.btn-expand-venta {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
}
.btn-expand-venta:hover { color: var(--text); }
.venta-items-inner {
    background: var(--bg-subtle);
    padding: 12px;
}

/* ─── Empty state interior de cards ──────────────────────────── */
.card .empty-state,
.b2-card .empty-state {
    padding: 30px 16px;
}

/* ─── Hero gradient sutil en cards de KPIs cuando no hay datos ─ */
.kpi-card .empty-kpi {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ─── Tabla responsive con shadows automáticas ──────────────── */
.card .table-responsive,
.b2-card .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* ─── Calendario (vista) ─────────────────────────────────────── */
.calendar-day {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: 6px;
    min-height: 80px;
    border-radius: var(--radius-sm);
}
.calendar-day.today { border-color: var(--cognac); background: var(--bg-hover); }
.calendar-day.other-month { opacity: 0.4; }

/* ─── Asistente (chat) ───────────────────────────────────────── */
.asistente-message {
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 8px;
    max-width: 80%;
}
.asistente-message.user {
    background: var(--cognac);
    color: var(--cream);
    margin-left: auto;
}
.asistente-message.bot {
    background: var(--bg-hover);
    color: var(--text);
    margin-right: auto;
}

/* ─── Mobile: more breathing room ─────────────────────────────── */
@media (max-width: 480px) {
    .b2-content { padding: 60px 10px 20px; }
    .b2-app-header { padding: 8px 10px 8px 54px; }
    .b2-page-title { font-size: 1.1rem; }
    .hero-title { font-size: 1.1rem; }
    .kpi-card .kpi-value, .b2-kpi-value, .metric-value { font-size: 1.15rem; }
}

/* ─── Asegurar que botones dentro de cards no overflow ────────── */
.b2-card-actions { flex-shrink: 0; flex-wrap: wrap; }
.card-header { flex-wrap: wrap; }

/* ─── Forms con labels más legibles en dark mode ─────────────── */
[data-theme="dark"] .form-label,
[data-theme="dark"] .b2-form-label,
[data-theme="dark"] .data-label,
[data-theme="dark"] .info-label,
[data-theme="dark"] .kpi-label,
[data-theme="dark"] .metric-label {
    color: var(--text-muted);
}

/* ─── Sticky table headers within cards ──────────────────────── */
.b2-card .b2-table thead th,
.card .table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* ─── Asegurar visibilidad de badges en dark mode ────────────── */
[data-theme="dark"] .badge-outline {
    border-color: var(--border);
    color: var(--text-muted);
}

/* ─── Refinar el active state en sidebar ──────────────────────── */
.b2-sidebar-section + .b2-nav-link { margin-top: 2px; }

/* ─── Force base styles para botones de submit dentro de forms en cards ─ */
.b2-card form .btn[type="submit"],
.card form .btn[type="submit"] {
    /* nothing - heredan via compat */
}

/* ─── Login mobile ───────────────────────────────────────────── */
@media (max-width: 480px) {
    .b2-login-card { padding: 24px 22px; }
    .b2-login-logo { font-size: 1.6rem; }
}

/* ─── Chart.js canvas responsive ─────────────────────────────── */
.dash-chart-card canvas { max-width: 100%; }

/* ─── Print styles ───────────────────────────────────────────── */
@media print {
    .b2-sidebar, .b2-hamburger, .b2-app-header,
    .calc-fab, .b2-toast-container,
    .dash-hero-alerts, .danger-zone, .danger-zone-modern,
    [data-card-edit] .btn-edit-card,
    [data-card-edit] .btn-cancel-card,
    [data-card-edit] .btn-save-card-new,
    [data-card-edit] .btn-original-submit,
    .card-edit-actions {
        display: none !important;
    }
    .b2-main { margin-left: 0 !important; }
    .b2-content { padding: 0 !important; }
    .card, .b2-card { box-shadow: none !important; border: 1px solid #ccc !important; page-break-inside: avoid; }
    .card-header, .b2-card-header { background: #f5f5f5 !important; }
    body { background: white !important; color: black !important; }
    a { color: black !important; text-decoration: underline !important; }
    /* Forzar light mode al imprimir */
    :root { --bg: white; --bg-card: white; --text: #1A1614; }
}

/* ─── Empty states con icono SVG centrado ─────────────────────── */
.b2-empty .b2-empty-icon-svg {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    color: var(--text-muted);
    opacity: 0.4;
}

/* ─── Loading indicator para navegación entre páginas ────────── */
.b2-nav-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--cognac);
    z-index: 200;
    transform-origin: 0 0;
    animation: b2-nav-load 8s ease-out forwards;
}
@keyframes b2-nav-load {
    0% { transform: scaleX(0); opacity: 1; }
    50% { transform: scaleX(0.6); opacity: 1; }
    99% { transform: scaleX(0.95); opacity: 0.8; }
    100% { transform: scaleX(1); opacity: 0; }
}

/* ─── Skeleton loader para cards mientras cargan ──────────────── */
.b2-skeleton-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 18px;
}
.b2-skeleton-card .b2-skeleton {
    height: 14px;
    margin-bottom: 8px;
    border-radius: 4px;
}
.b2-skeleton-card .b2-skeleton.short { width: 30%; }
.b2-skeleton-card .b2-skeleton.medium { width: 60%; }
.b2-skeleton-card .b2-skeleton.long { width: 90%; }

/* ─── Helper: scroll smooth in card overflow areas ───────────── */
.b2-card .scroll-area {
    scroll-behavior: smooth;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* ─── Focus dentro de un card editable más destacado ─────────── */
[data-card-edit].is-card-editing input:focus,
[data-card-edit].is-card-editing textarea:focus,
[data-card-edit].is-card-editing select:focus {
    box-shadow: 0 0 0 3px rgba(138, 94, 86, 0.2) !important;
    border-color: var(--cognac-light) !important;
}

/* ─── Highlight subtil cuando una card está en editing ───────── */
[data-card-edit].is-card-editing {
    background: linear-gradient(0deg, transparent 0%, rgba(107, 70, 63, 0.02) 100%);
}

/* ─── Botón hover lift sutil ────────────────────────────────── */
.btn:not(:disabled):not(.btn-ghost):hover { transform: translateY(-1px); }
.btn:not(:disabled):active { transform: translateY(0); }

/* ─── ID chip more readable ─────────────────────────────────── */
.id-chip { font-size: 0.78rem; padding: 3px 8px; letter-spacing: 0.02em; }

/* ─── Improve focus visibility for keyboard users ────────────── */
.b2-nav-link:focus-visible {
    outline: 2px solid var(--cognac-light);
    outline-offset: -2px;
}

/* ─── Mejorar visual de selects en dark mode ────────────────── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .b2-input,
[data-theme="dark"] .b2-select,
[data-theme="dark"] .b2-textarea {
    color-scheme: dark;
}

/* ─── Modal fixes ────────────────────────────────────────────── */
.b2-modal-backdrop.is-leaving { animation: b2-fade-out 0.18s ease forwards; }

/* ─── Form actions consistentes ──────────────────────────────── */
.form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--border-light);
    flex-wrap: wrap;
}
.form-actions .btn { min-width: 100px; }

/* ─── Page-actions-bar (legacy) ──────────────────────────────── */
.page-actions-bar {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   CARD EDIT TOGGLE (data-card-edit)
   Modo readonly: inputs/selects/textareas se ven como texto plano.
   Modo editing: inputs normales con bordes y backgrounds.
   ═══════════════════════════════════════════════════════════ */

/* Botones en header del card */
[data-card-edit] .btn-edit-card,
[data-card-edit] .btn-cancel-card,
[data-card-edit] .btn-save-card-new,
[data-card-edit] .btn-original-submit {
    transition: opacity var(--t-fast) var(--ease);
}

[data-card-edit]:not(.is-card-editing) .btn-cancel-card,
[data-card-edit]:not(.is-card-editing) .btn-save-card-new,
[data-card-edit]:not(.is-card-editing) .btn-original-submit {
    display: none !important;
}
[data-card-edit].is-card-editing .btn-edit-card {
    display: none !important;
}

/* Readonly mode: inputs/textareas/selects parecen texto */
[data-card-edit]:not(.is-card-editing) input[type="text"],
[data-card-edit]:not(.is-card-editing) input[type="email"],
[data-card-edit]:not(.is-card-editing) input[type="number"],
[data-card-edit]:not(.is-card-editing) input[type="date"],
[data-card-edit]:not(.is-card-editing) input[type="datetime-local"],
[data-card-edit]:not(.is-card-editing) input[type="password"],
[data-card-edit]:not(.is-card-editing) input[type="tel"],
[data-card-edit]:not(.is-card-editing) textarea,
[data-card-edit]:not(.is-card-editing) select {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    color: var(--text);
    cursor: default !important;
    pointer-events: none;
    resize: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-height: 0;
}

[data-card-edit]:not(.is-card-editing) select {
    background-image: none !important;
    padding-right: 0 !important;
}

/* Input groups en readonly: ocultar prefix/suffix backgrounds */
[data-card-edit]:not(.is-card-editing) .input-group {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
[data-card-edit]:not(.is-card-editing) .input-prefix,
[data-card-edit]:not(.is-card-editing) .input-suffix {
    background: transparent !important;
    border: 0 !important;
    padding: 0 4px 0 0 !important;
    color: var(--text);
}

/* Custom listbox (.b2-select) en readonly: se ve como texto plano */
[data-card-edit]:not(.is-card-editing) .b2-select {
    pointer-events: none;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
[data-card-edit]:not(.is-card-editing) .b2-select-trigger {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    cursor: default !important;
    color: var(--text);
}
[data-card-edit]:not(.is-card-editing) .b2-select-chevron {
    display: none !important;
}

/* Input date en readonly: ocultar el calendar picker indicator nativo */
[data-card-edit]:not(.is-card-editing) input[type="date"]::-webkit-calendar-picker-indicator,
[data-card-edit]:not(.is-card-editing) input[type="date"]::-webkit-inner-spin-button,
[data-card-edit]:not(.is-card-editing) input[type="date"]::-webkit-clear-button {
    display: none !important;
    -webkit-appearance: none !important;
}

/* Form controls en readonly: anular height/min-height del .form-control para que
   alineen verticalmente con los demás info-cells (texto plano de ~20px). */
[data-card-edit]:not(.is-card-editing) .form-control,
[data-card-edit]:not(.is-card-editing) .form-control-sm {
    height: auto !important;
    min-height: 0 !important;
    line-height: inherit !important;
}

/* Pareja readonly/input para alternar entre vista y edición sin placeholder nativo.
   En modo readonly: muestra el span con el valor formateado; oculta el input/select.
   En modo edición: oculta el span y muestra el input/select para tipear. */
[data-card-edit] .card-edit-readonly { display: inline; }
[data-card-edit] .card-edit-input { display: none !important; }
/* Si el select tiene .card-edit-input, ocultar también el wrapper del listbox custom.
   El custom listbox reemplaza al <select> nativo, así que cuando estamos en modo edit
   mostramos el wrapper pero NUNCA el <select> original (se mantiene display:none). */
[data-card-edit] .b2-select:has(> select.card-edit-input) { display: none !important; }
[data-card-edit].is-card-editing .card-edit-readonly { display: none !important; }
[data-card-edit].is-card-editing input.card-edit-input { display: inline-block !important; }
[data-card-edit].is-card-editing textarea.card-edit-input { display: block !important; width: 100%; }
[data-card-edit].is-card-editing .b2-select:has(> select.card-edit-input) { display: block !important; }

/* Editing mode: inputs visibles con borde */
[data-card-edit].is-card-editing {
    box-shadow: 0 0 0 2px var(--cognac-light), var(--shadow);
}

/* Smooth transition de estilos */
[data-card-edit] input,
[data-card-edit] textarea,
[data-card-edit] select {
    transition: border-color var(--t-normal) var(--ease), background-color var(--t-normal) var(--ease), padding var(--t-normal) var(--ease);
}

/* Botones del card edit más prominentes */
.btn-edit-card svg { opacity: 0.7; }

/* Mobile: en cards editables que tienen el header con muchos elementos */
@media (max-width: 640px) {
    [data-card-edit] .card-header,
    [data-card-edit] .b2-card-header {
        flex-wrap: wrap;
    }
    [data-card-edit] .card-edit-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 6px;
    }
}
/* ═══════════════════════════════════════════════════════════
   PROVEEDORES STYLE - adapta el aesthetic minimalista de
   B2YOU Proveedores: cards flat con border, hover lift + accent,
   labels uppercase tracking-wider en text-xs, status colors
   transparentes (emerald-500/10).
   Loaded AT THE END para overridear los efectos previos.
   ═══════════════════════════════════════════════════════════ */

/* ─── Cards FLAT, sin sombra default ─────────────────────────── */
.b2-card,
.card {
    background: var(--bg-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border);
    box-shadow: none;
    border-radius: var(--radius);
    transition:
        border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2-card:hover,
.card:hover {
    border-color: var(--cognac);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .b2-card,
[data-theme="dark"] .card {
    background: var(--bg-card);
}

[data-theme="dark"] .b2-card:hover,
[data-theme="dark"] .card:hover {
    border-color: var(--cognac-light);
}

/* Card header limpio sin background */
.b2-card-header,
.card-header {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--border-light);
    padding: 14px 18px 12px;
}

.b2-card-title,
.card-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text);
}

/* ─── App header sin blur, simple ────────────────────────────── */
.b2-app-header {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}

.b2-app-header-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* ─── Sidebar limpio, sin blur ───────────────────────────────── */
.b2-sidebar {
    background: var(--bg-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-right: 1px solid var(--border);
    color: var(--text);
}

.b2-sidebar-brand {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: 16px 18px 14px;
}

.b2-sidebar-brand-logo {
    color: var(--text);
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
}

.b2-sidebar-brand-sub {
    color: var(--text-muted);
}

.b2-sidebar-section {
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 14px 18px 6px;
}

.b2-nav-link {
    color: var(--text);
    padding: 9px 18px;
    font-size: 0.875rem;
}

.b2-nav-link:hover {
    background: var(--bg-hover);
    color: var(--cognac);
}

.b2-nav-link.active {
    background: var(--cognac);
    color: var(--cream);
    font-weight: 600;
}

.b2-nav-link.active::before {
    background: var(--cognac-deep);
}

[data-theme="dark"] .b2-sidebar {
    background: var(--bg-sidebar);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .b2-sidebar-brand {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .b2-sidebar-brand-logo {
    color: var(--cream);
}

[data-theme="dark"] .b2-nav-link {
    color: rgba(240, 232, 226, 0.92);
}

[data-theme="dark"] .b2-nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--cream);
}

[data-theme="dark"] .b2-nav-link.active {
    background: rgba(255, 255, 255, 0.15);
    color: var(--cream);
}

[data-theme="dark"] .b2-sidebar-section {
    color: rgba(240, 232, 226, 0.55);
}

[data-theme="dark"] .b2-avatar {
    background: var(--cognac-light);
}

[data-theme="dark"] .b2-sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .b2-sidebar-user-name {
    color: var(--cream);
}

[data-theme="dark"] .b2-sidebar-user-role {
    color: rgba(240, 232, 226, 0.45);
}

[data-theme="dark"] .b2-theme-toggle {
    color: rgba(240, 232, 226, 0.75);
}

[data-theme="dark"] .b2-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--cream);
}

/* ─── KPI / Metric cards FLAT ────────────────────────────────── */
.b2-kpi,
.metric-card,
.kpi-card {
    background: var(--bg-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border);
    box-shadow: none;
    transition:
        border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2-kpi:hover,
.metric-card:hover,
.kpi-card:hover {
    border-color: var(--cognac);
    transform: translateY(-1px);
    box-shadow: none;
}

/* Remove colored top accent strips - Proveedores no usa esto */
.b2-kpi::before,
.metric-card::before,
.kpi-card::before {
    display: none !important;
}

/* ─── Hero del dashboard: limpio, color sólido ──────────────── */
.dash-hero {
    background: linear-gradient(135deg, var(--cognac) 0%, var(--cognac-deep) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
}

.dash-hero::before {
    display: none;
}

/* ─── Body: gradiente MUY sutil, casi imperceptible ──────────── */
body {
    background: var(--bg);
    background-attachment: fixed;
}

[data-theme="dark"] body {
    background: var(--bg);
}

/* ─── Labels uppercase tracking-wider, font-xs (Proveedores style) ─ */
.metric-label,
.kpi-label,
.b2-kpi-label,
.info-label,
.data-label,
.form-label,
.b2-form-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

/* Status badges con transparencia (Proveedores style) */
.badge-success, .badge-activo, .badge-enviada,
.b2-badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: rgb(5, 150, 105);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

[data-theme="dark"] .badge-success,
[data-theme="dark"] .badge-activo,
[data-theme="dark"] .badge-enviada,
[data-theme="dark"] .b2-badge-success {
    background: rgba(16, 185, 129, 0.15);
    color: rgb(110, 231, 183);
}

.badge-warning, .badge-confirmada,
.b2-badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: rgb(180, 83, 9);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

[data-theme="dark"] .badge-warning,
[data-theme="dark"] .badge-confirmada,
[data-theme="dark"] .b2-badge-warning {
    background: rgba(245, 158, 11, 0.15);
    color: rgb(252, 211, 77);
}

.badge-danger, .badge-cancelada,
.b2-badge-danger {
    background: rgba(220, 38, 38, 0.1);
    color: rgb(185, 28, 28);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

[data-theme="dark"] .badge-danger,
[data-theme="dark"] .badge-cancelada,
[data-theme="dark"] .b2-badge-danger {
    background: rgba(220, 38, 38, 0.15);
    color: rgb(252, 165, 165);
}

.badge-info,
.b2-badge-info {
    background: rgba(59, 130, 246, 0.1);
    color: rgb(29, 78, 216);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

[data-theme="dark"] .badge-info,
[data-theme="dark"] .b2-badge-info {
    background: rgba(59, 130, 246, 0.15);
    color: rgb(147, 197, 253);
}

.badge-inactivo, .badge-borrador, .badge-secondary,
.b2-badge-neutral {
    background: var(--bg-hover);
    color: var(--text-muted);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.badge-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ─── Buttons: simples y planos ──────────────────────────────── */
.btn-primary,
.b2-btn-primary {
    background: var(--cognac);
    color: var(--cream);
    border: 1px solid var(--cognac);
    box-shadow: none;
}

.btn-primary:hover:not(:disabled),
.b2-btn-primary:hover:not(:disabled) {
    background: var(--cognac-light);
    border-color: var(--cognac-light);
    transform: none;
}

.btn-secondary,
.b2-btn-secondary {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: none;
}

.btn-secondary:hover:not(:disabled),
.b2-btn-secondary:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--cognac);
    color: var(--cognac);
    transform: none;
}

.btn:not(:disabled):not(.btn-ghost):hover {
    transform: none;
}

/* ─── Inputs: borde simple, focus cognac ─────────────────────── */
.b2-input,
.b2-select,
.b2-textarea,
.form-control {
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: none;
}

.b2-input:focus,
.b2-select:focus,
.b2-textarea:focus,
.form-control:focus {
    border-color: var(--cognac);
    box-shadow: 0 0 0 3px rgba(107, 70, 63, 0.1);
}

/* ─── Modals limpios ─────────────────────────────────────────── */
.b2-modal-backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.b2-modal {
    background: var(--bg-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* ─── Hamburger limpio ───────────────────────────────────────── */
.b2-hamburger {
    background: var(--bg-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border);
}

/* ─── Login: gradient cognac, card flat ──────────────────────── */
.b2-login-bg {
    background: linear-gradient(135deg, var(--cognac) 0%, var(--cognac-deep) 100%);
}

.b2-login-card {
    background: var(--bg-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

/* ─── Dots menu limpio ───────────────────────────────────────── */
.b2-dots-menu {
    background: var(--bg-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

.b2-toast {
    background: var(--bg-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

/* ─── Inputs no transparentes ────────────────────────────────── */
.b2-card .b2-input:not(:focus),
.b2-card .form-control:not(:focus),
.card .b2-input:not(:focus),
.card .form-control:not(:focus) {
    background: var(--bg-card);
}

/* ─── Tables más limpias ─────────────────────────────────────── */
.b2-table thead th,
.table thead th {
    background: transparent;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 12px 14px;
}

.b2-table tbody td,
.table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
}

.b2-table tbody tr:hover,
.table tbody tr:hover {
    background: var(--bg-hover);
}

/* ─── Badges sin blur ────────────────────────────────────────── */
.b2-badge,
.badge {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ─── ID chip: monoespaciado simple ──────────────────────────── */
.id-chip {
    background: var(--bg-hover);
    color: var(--text-muted);
    border: none;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.02em;
}

.id-chip:hover {
    background: var(--cognac);
    color: var(--cream);
}

/* ─── Sidebar hover/active más sutil ─────────────────────────── */
.b2-nav-link {
    position: relative;
}

/* ─── Avatar más simple ──────────────────────────────────────── */
.b2-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
    font-weight: 700;
}

/* ─── Empty state limpio ─────────────────────────────────────── */
.empty-state,
.b2-empty {
    padding: 40px 20px;
    color: var(--text-muted);
    text-align: center;
}

/* ─── Card body padding consistente ──────────────────────────── */
.card-body,
.b2-card-body {
    padding: 16px 18px;
}

/* ─── Hover lift sutil sólo en items interactivos clickeables ── */
.b2-kpi[href]:hover,
.metric-card[href]:hover,
a.card:hover,
a.b2-card:hover {
    transform: translateY(-2px);
}

/* ─── Quitar sheen sutil del hero ────────────────────────────── */
.dash-hero-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cream);
    margin: 0;
    letter-spacing: -0.02em;
}

.dash-hero-sub {
    color: rgba(245, 241, 235, 0.85);
    font-size: 0.9rem;
}

/* ─── Card editing border más visible ────────────────────────── */
[data-card-edit].is-card-editing {
    border-color: var(--cognac);
    box-shadow: 0 0 0 2px rgba(107, 70, 63, 0.1);
    background: var(--bg-card);
}

/* ─── Páginas con padding más controlado ─────────────────────── */
.b2-content {
    padding: 24px 28px;
    min-width: 0;
}

@media (max-width: 1023px) {
    .b2-content {
        padding: 64px 16px 24px;
        overflow-x: hidden;
    }
    .b2-main { min-width: 0; max-width: 100vw; overflow-x: hidden; }
    /* Anular el min-width: max-content del CSS legacy que empujaba la página entera */
    .flujo-container {
        min-width: 0 !important;
        max-width: 100%;
    }
    /* Tablas dentro de cards: scroll horizontal interno, no empujan la página */
    .card-body .table,
    .card-body table,
    .card > .table,
    .card > table,
    .card .table,
    .b2-card .table,
    .b2-card table,
    .b2-tab-section-body table,
    .b2-tab-panel table,
    .productos-table-wrapper,
    .b2-table-wrap,
    .table-responsive {
        display: block;
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    /* Evitar doble scroll cuando la tabla ya vive dentro de un wrapper scrolleable */
    .b2-table-wrap .table,
    .table-responsive .table {
        display: table;
        width: max-content;
        min-width: 100%;
    }
    /* iOS zoomea si el input tiene <16px al enfocar; el .form-control-sm legacy
       (0.825rem !important) le ganaba a la regla global de 16px. */
    input.form-control-sm,
    select.form-control-sm,
    textarea.form-control-sm {
        font-size: 16px !important;
    }
    /* Touch targets mínimos en botones chicos de filas de items */
    .btn-item-info-detail,
    .btn-item-img {
        width: 34px !important;
        height: 34px !important;
    }
    /* Con la tabla en display:block scrolleable el sticky del thead queda
       relativo a la tabla y produce jitter en WebKit: desactivarlo. */
    .card .table thead th,
    .b2-card .table thead th {
        position: static;
    }
    /* Modales legacy: nunca más altos que el viewport, con scroll interno */
    .modal {
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
    }
    .card-body .productos-table-wrapper .table,
    .productos-table-wrapper .table {
        display: table;
        width: max-content;
        min-width: 100%;
    }
    /* App header en mobile: acciones compactas, dejar respirar al título */
    .b2-app-header-actions .btn,
    .b2-app-header-actions .btn-topbar,
    .b2-app-header-actions a.btn,
    .b2-app-header-actions button.btn {
        padding: 6px 10px;
        font-size: 0.78rem;
    }
    .b2-app-header-actions .btn-sm { padding: 5px 8px; font-size: 0.74rem; }
    .b2-app-header-actions { gap: 6px; }
}

/* iPhone 17 Pro y similares (≤ 430px): header aún más compacto, KPIs en 2 columnas */
@media (max-width: 430px) {
    .b2-app-header {
        padding: 10px 12px 10px 56px;
    }
    .b2-app-header-title {
        font-size: 1.1rem;
    }
    .b2-app-header-actions .btn,
    .b2-app-header-actions .btn-topbar,
    .b2-app-header-actions a.btn,
    .b2-app-header-actions button.btn {
        padding: 6px 8px;
        font-size: 0.72rem;
    }
    /* KPI grid en mobile: 2 columnas en lugar de 1 wide */
    .b2-kpi-grid,
    .dash-kpi-grid,
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .b2-kpi, .kpi-card, .metric-card {
        padding: 12px 12px;
    }
    .metric-card { padding: 14px 12px; }
    .b2-kpi-value, .kpi-value, .metric-value { font-size: 1.1rem !important; }
    .b2-kpi-label, .kpi-label, .metric-label { font-size: 0.6rem !important; }
    .b2-kpi-sub, .kpi-sub, .metric-sub { font-size: 0.68rem !important; }
    .metric-card-icon { width: 32px !important; height: 32px !important; }
    .metric-card-icon svg { width: 18px !important; height: 18px !important; }
    /* Filtros: cada campo ocupa toda la fila (1 columna), pero los inputs/selects no fuerzan min-width */
    .b2-card .card-body > form[method="get"] > div,
    .card .card-body > form[method="get"] > div {
        flex: 1 1 100%;
        min-width: 0;
    }
    .b2-card .card-body > form[method="get"] input:not([type="checkbox"]):not([type="radio"]),
    .b2-card .card-body > form[method="get"] select,
    .card .card-body > form[method="get"] input:not([type="checkbox"]):not([type="radio"]),
    .card .card-body > form[method="get"] select {
        min-width: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }
    /* Botones de filtros: row de 2 al final */
    .b2-card .card-body > form[method="get"] > button,
    .b2-card .card-body > form[method="get"] > a.btn,
    .card .card-body > form[method="get"] > button,
    .card .card-body > form[method="get"] > a.btn {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
    }
    /* Hero del dashboard menos vertical en mobile */
    .dash-hero { padding: 16px 16px; }
    .dash-hero-title { font-size: 1.15rem !important; }
    .dash-hero-sub { font-size: 0.82rem !important; }

    /* Calendar compacto: 7 cols caben en viewport sin scroll lateral */
    .calendar-grid {
        grid-template-columns: repeat(7, 1fr) !important;
        min-width: 0 !important;
    }
    .calendar-day { min-height: 60px !important; padding: 4px 2px !important; font-size: 0.7rem; }
    .calendar-day-num { font-size: 0.7rem !important; }
    .calendar-header { font-size: 0.6rem; padding: 6px 2px; }
    .cal-event-item { font-size: 0.55rem !important; padding: 1px 3px !important; }
}

/* ─── Tipografía page-mount mantener ─────────────────────────── */
.b2-page-mount {
    animation: b2-page-mount 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ─── Animación lift en hover de elementos interactivos ──────── */
[role="button"]:not(:disabled):hover,
a:not(.b2-nav-link):not(.b2-sidebar-brand):hover {
    /* nada por defecto, deja que el componente decida */
}

/* ─── Texto display más grande para titles importantes ──────── */
.font-display {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.text-display-lg {
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  CUSTOM SELECT (estilo "proveedores"): trigger + listbox + opciones  ║
   ║  con icono/avatar/iniciales/swatch según data-attrs en <option>      ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.b2-select {
    /* Reset: hay un .b2-select legacy (línea ~774) con padding/border/bg pensado
       para un <select> nativo. Mi wrapper se llama igual y necesita resetear. */
    position: relative !important;
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
/* Selector compuesto para ganar especificidad sobre .form-control de tailwind */
.b2-select > .b2-select-native,
select.b2-select-native {
    display: none !important;
}

/* ─── Avatar uploader (cliente / producto / proveedor) ─────────────────── */
.b2-avatar-uploader {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.b2-avatar-circle {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border);
    background: var(--bg-hover);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.b2-avatar-circle:hover {
    border-color: var(--cognac);
    transform: scale(1.03);
}
.b2-avatar-circle.has-img { background: transparent; }
.b2-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.b2-avatar-initials {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.b2-avatar-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.65);
    color: #fff;
    border: none;
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.b2-avatar-circle:hover .b2-avatar-remove { opacity: 1; }
.b2-avatar-uploader-label {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Avatar con imagen embebida usado en listados y headers (cliente, etc) */
.avatar-circle.b2-avatar-with-img {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
}
.avatar-circle.b2-avatar-with-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─── Toolbar de filtros: altura unificada en todos los controles ─────────
   Aplica a cualquier `<form method="get">` (en este codebase los forms GET
   son siempre toolbars de filtros) + a la clase explícita `b2-filter-toolbar`
   cuando hace falta forzar en un form POST. */
.b2-filter-toolbar,
form[method="get"] {
    --b2-ctrl-h: 36px;
}
.b2-filter-toolbar .b2-btn-group,
.b2-filter-toolbar .b2-select-trigger,
.b2-filter-toolbar .btn.btn-sm,
.b2-filter-toolbar .form-control.form-control-sm,
.b2-filter-toolbar input.form-control-sm,
.b2-filter-toolbar input[type="date"].form-control,
.b2-filter-toolbar input[type="text"].form-control,
.b2-filter-toolbar input[type="number"].form-control,
.b2-filter-toolbar input[type="search"].form-control,
form[method="get"] .b2-btn-group,
form[method="get"] .b2-select-trigger,
form[method="get"] .btn.btn-sm,
form[method="get"] .form-control.form-control-sm,
form[method="get"] input.form-control-sm,
form[method="get"] input[type="date"].form-control,
form[method="get"] input[type="text"].form-control,
form[method="get"] input[type="number"].form-control,
form[method="get"] input[type="search"].form-control {
    height: var(--b2-ctrl-h) !important;
    min-height: var(--b2-ctrl-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box;
}
.b2-filter-toolbar .btn.btn-sm,
.b2-filter-toolbar input.form-control,
.b2-filter-toolbar input.form-control-sm,
form[method="get"] .btn.btn-sm,
form[method="get"] input.form-control,
form[method="get"] input.form-control-sm {
    display: inline-flex;
    align-items: center;
}
.b2-filter-toolbar .b2-select-trigger,
form[method="get"] .b2-select-trigger {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.b2-filter-toolbar .b2-btn-group > a,
.b2-filter-toolbar .b2-btn-group > button,
form[method="get"] .b2-btn-group > a,
form[method="get"] .b2-btn-group > button {
    height: calc(var(--b2-ctrl-h) - 6px);
}
.b2-select-trigger {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 28px 7px 10px !important;
    min-height: auto !important;
    height: auto !important;
    cursor: pointer;
    text-align: left;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    font-family: inherit;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.b2-select-trigger:focus,
.b2-select-trigger:focus-visible {
    border-color: var(--cognac);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cognac) 18%, transparent);
    outline: none;
}
.b2-select.is-open .b2-select-trigger {
    border-color: var(--cognac);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cognac) 18%, transparent);
}
.b2-select-trigger-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.b2-select-trigger .b2-select-label {
    flex: 1;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.b2-select-placeholder { color: var(--text-muted); }

.b2-select-chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    transition: transform 220ms var(--ease-spring);
}
.b2-select.is-open .b2-select-chevron { transform: translateY(-50%) rotate(180deg); }

/* Menú - más ajustado */
.b2-select-menu {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 3px;
    max-height: 320px;
    overflow-y: auto;
    transform-origin: top center;
    transition: opacity 150ms var(--ease-in-out), transform 220ms var(--ease-spring);
}
.b2-select-search {
    padding: 3px 3px 6px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 3px;
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 2;
}
.b2-select-search-input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 0.8rem;
    font-family: inherit;
}
.b2-select-search-input:focus { outline: none; border-color: var(--cognac); }

.b2-select-options {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.b2-select-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--text);
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    transition: background-color 120ms var(--ease);
}
.b2-select-option:hover:not(.is-disabled) { background: var(--bg-hover); }
.b2-select-option[aria-selected="true"] {
    background: color-mix(in srgb, var(--cognac) 10%, transparent);
    font-weight: 600;
}
.b2-select-option.is-disabled { opacity: 0.5; cursor: not-allowed; }
.b2-select-option-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Iconografía dentro del trigger y opciones - más compacto */
.b2-select-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cognac) 15%, var(--bg-hover));
    color: var(--cognac);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.b2-select-avatar {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.b2-select-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    color: var(--cognac);
    flex-shrink: 0;
}
.b2-select-icon svg { width: 100%; height: 100%; }
.b2-select-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    min-width: 14px;
    border-radius: 50%;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

/* En mobile el menú toma ancho un poco más generoso */
@media (max-width: 640px) {
    .b2-select-menu { min-width: 100%; max-height: 60vh; }
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║   PREMIUM MOTION (estilo Apple) - agregado sin tocar lo existente   ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Keyframes nuevos ─────────────────────────────────────────────────── */
@keyframes b2-pop-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes b2-pop-in-soft {
    from { opacity: 0; transform: translateY(4px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes b2-sheet-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(12%); }
}
@keyframes b2-modal-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.97); }
}
@keyframes b2-toast-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-12px) scale(0.98); }
}
@keyframes b2-shake {
    10%, 90%  { transform: translateX(-1px); }
    20%, 80%  { transform: translateX(2px);  }
    30%, 50%, 70% { transform: translateX(-3px); }
    40%, 60%  { transform: translateX(3px);  }
}
@keyframes b2-tab-enter {
    from { opacity: 0; transform: translateX(6px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Sección 2: Mount escalonado de páginas y grids ─────────────────── */
/* Children directos de .page-mount entran con stagger sutil */
.page-mount > * {
    animation: b2-pop-in-soft 420ms var(--ease-spring) both;
}
.page-mount > *:nth-child(1) { animation-delay: 0ms; }
.page-mount > *:nth-child(2) { animation-delay: 50ms; }
.page-mount > *:nth-child(3) { animation-delay: 100ms; }
.page-mount > *:nth-child(4) { animation-delay: 140ms; }
.page-mount > *:nth-child(5) { animation-delay: 175ms; }
.page-mount > *:nth-child(n+6) { animation-delay: 205ms; }

/* Stagger interno en KPIs y métricas (items individuales) */
.metrics-grid > *,
.b2-kpi-grid > * {
    animation: b2-pop-in 380ms var(--ease-spring) both;
}
.metrics-grid > *:nth-child(1), .b2-kpi-grid > *:nth-child(1) { animation-delay: 40ms; }
.metrics-grid > *:nth-child(2), .b2-kpi-grid > *:nth-child(2) { animation-delay: 90ms; }
.metrics-grid > *:nth-child(3), .b2-kpi-grid > *:nth-child(3) { animation-delay: 140ms; }
.metrics-grid > *:nth-child(4), .b2-kpi-grid > *:nth-child(4) { animation-delay: 185ms; }
.metrics-grid > *:nth-child(n+5), .b2-kpi-grid > *:nth-child(n+5) { animation-delay: 220ms; }

/* ── Sección 3: Feedback de interacción ─────────────────────────────── */
/* Botones: lift muy sutil en hover + press scale (spring) */
.btn,
.b2-btn {
    transition:
        background-color var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease),
        transform 180ms var(--ease-spring),
        box-shadow var(--t-fast) var(--ease);
}
.btn:hover:not(:disabled),
.b2-btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled),
.b2-btn:active:not(:disabled) { transform: scale(0.97); transition-duration: 90ms; }

/* Cards interactivas: lift al hover */
.b2-kpi { transition: box-shadow var(--t-normal) var(--ease), transform 260ms var(--ease-spring); }
.b2-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* Filas linkeables: solo background-color al hover. Antes habia un
   `transform: translateX(2px)` que en mobile/desktop disparaba scrollbar
   horizontal cuando la tabla llenaba el ancho disponible. */
[data-href].b2-rowlink,
tr.b2-rowlink {
    /* cursor pointer en cualquier tabla clickeable (.table, no solo .b2-table-rows) */
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease);
}

/* Sidebar nav: solo el TEXTO (label) se agranda en hover. El icono y el
   fondo del hover quedan quietos. Como el texto es un nodo suelto sin span,
   usamos font-size en lugar de transform: scale.
   line-height FIJO en px para que el cambio de font-size no empuje el item
   hacia abajo. */
.b2-nav-link {
    line-height: 20px;
    transition: background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                font-size 240ms var(--ease-spring);
}
.b2-nav-link:hover { font-size: 0.91rem; /* 0.875 * 1.04 */ }
/* Anti-contagio: el icono no debe escalar con el font-size del link. */
.b2-nav-link .b2-nav-icon { font-size: initial; }

/* ── Lightbox global para ampliar imágenes (avatares, productos, etc.) ── */
.b2-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    cursor: zoom-out;
    padding: 24px;
    backdrop-filter: blur(2px);
}
.b2-lightbox-overlay.is-open { display: flex; animation: b2-lightbox-in 0.18s ease-out; }
.b2-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    object-fit: contain;
    user-select: none;
}
body.b2-lightbox-locked { overflow: hidden; }
@keyframes b2-lightbox-in {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* Cualquier <img> que dispara lightbox: cursor zoom-in para hint visual. */
.b2-avatar-with-img,
.avatar-circle.b2-avatar-with-img,
.b2-avatar-with-img img,
img[data-lightbox] { cursor: zoom-in; }

/* ── Popup "Ver / Cambiar / Quitar" del avatar uploader cuando hay imagen ──
   z-index alto (1000) para que NO quede tapado por la siguiente card del form
   (info-grid, secciones del hero del producto, etc.). */
.b2-avatar-uploader { position: relative; }
.b2-avatar-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px) scale(0.96);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg, 0 14px 40px rgba(0, 0, 0, 0.28));
    padding: 6px;
    display: none;
    flex-direction: column;
    min-width: 180px;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.14s ease-out, transform 0.14s ease-out;
}
.b2-avatar-menu.is-open {
    display: flex;
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}
.b2-avatar-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 0.85rem;
    text-align: left;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    width: 100%;
}
.b2-avatar-menu-item:hover { background: var(--bg-hover); }
.b2-avatar-menu-item--danger:hover { background: color-mix(in srgb, var(--color-danger, #dc2626) 12%, transparent); color: var(--color-danger, #dc2626); }
.b2-avatar-menu-item svg { flex-shrink: 0; opacity: 0.75; }
/* Cuando el menú está abierto dentro de un hero con overflow:hidden (Productos),
   le permitimos overflow visible para que el popup no quede cortado. */
.product-hero:has(.b2-avatar-menu.is-open) { overflow: visible; }
.b2-avatar-uploader:has(.b2-avatar-menu.is-open) { overflow: visible; }

/* ── Botón "Recalcular" del Desglose Financiero ── */
.b2-recalc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.b2-recalc-btn:hover {
    color: var(--cognac);
    border-color: color-mix(in srgb, var(--cognac) 50%, transparent);
    background: color-mix(in srgb, var(--cognac) 8%, transparent);
}
.b2-recalc-btn svg { display: block; }
.b2-recalc-btn.is-spinning svg { animation: b2-recalc-spin 0.7s linear infinite; }
@keyframes b2-recalc-spin { to { transform: rotate(360deg); } }

/* Flash en los valores del desglose cuando se confirma el recalculo. */
.b2-flash-update {
    animation: b2-flash-emerald 700ms ease-out;
}
@keyframes b2-flash-emerald {
    0% { background: transparent; }
    20% { background: color-mix(in srgb, var(--color-success, #16a34a) 22%, transparent); }
    100% { background: transparent; }
}

/* ── Link "← Volver a X" arriba del hero en detalles de entidades hijas ── */
.b2-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 4px 10px 4px 6px;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    background: color-mix(in srgb, var(--bg-card) 70%, transparent);
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.b2-back-link:hover {
    color: var(--cognac);
    border-color: color-mix(in srgb, var(--cognac) 45%, transparent);
    background: color-mix(in srgb, var(--cognac) 8%, var(--bg-card));
    transform: translateX(-2px);
}
.b2-back-link svg { flex-shrink: 0; }

/* ── Boton "aro" circular para acciones inline (eliminar gasto, etc.) ── */
.b2-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.b2-icon-btn:hover { transform: scale(1.08); }
.b2-icon-btn:focus-visible { outline: 2px solid var(--cognac); outline-offset: 2px; }
.b2-icon-btn svg { display: block; }
.b2-icon-btn--danger:hover {
    background: color-mix(in srgb, var(--color-danger, #dc2626) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-danger, #dc2626) 45%, transparent);
    color: var(--color-danger, #dc2626);
}

/* Avatares y chips: pop muy leve al hover */
.color-swatch-preview,
.product-avatar,
.socio-pct-chip {
    transition: transform 180ms var(--ease-overshoot), box-shadow var(--t-fast) var(--ease);
}
.color-swatch-preview:hover,
.product-avatar:hover { transform: scale(1.06); }

/* ── Sección 4: Tabs (cross-fade + slide leve) ──────────────────────── */
.b2-tab-panel { transition: opacity var(--t-fast) var(--ease); }
.b2-tab-panel.is-active {
    animation: b2-tab-enter 320ms var(--ease-spring) both;
}
.b2-tab,
.b2-tab-btn {
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

/* ── Sección 5: Modales y sheets (refinar entry/exit) ────────────────── */
.b2-modal-backdrop { animation: b2-fade-in 240ms var(--ease-in-out) both; }
.b2-modal { animation: b2-scale-in 320ms var(--ease-spring) both; }
.b2-modal-backdrop.is-leaving { animation: b2-fade-out 200ms var(--ease-in-out) both; }
.b2-modal-backdrop.is-leaving .b2-modal { animation: b2-modal-out 200ms var(--ease-in-out) both; }

/* En mobile el sheet sale por abajo */
@media (max-width: 768px) {
    .b2-modal-backdrop.is-leaving .b2-modal,
    .gasto-modal-backdrop.is-leaving .gasto-modal-box {
        animation: b2-sheet-out 240ms var(--ease-spring) both;
    }
}

/* Gasto modal entry: spring */
.gasto-modal-box { animation: b2-scale-in 320ms var(--ease-spring) both; }

/* ── Sección 6: Toasts y alertas ────────────────────────────────────── */
.b2-toast,
#alertMsg,
.alert {
    transition: opacity var(--t-normal) var(--ease), transform 260ms var(--ease-spring);
}
.b2-toast.is-leaving,
#alertMsg.is-leaving { animation: b2-toast-out 240ms var(--ease-spring) both; }

/* ── Sección 7: Forms (focus glow + shake en error) ─────────────────── */
.form-control {
    transition:
        border-color var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease),
        background-color var(--t-fast) var(--ease);
}
.form-control:focus,
.form-control:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cognac) 18%, transparent);
    border-color: var(--cognac);
    outline: none;
}
.input-validation-error,
.form-control.is-invalid { animation: b2-shake 360ms var(--ease) both; }

/* Card-edit: el botón Editar entra con un pop al modo edición */
[data-card-edit] .btn-edit-card,
[data-card-edit] .btn-save-card-new,
[data-card-edit] .btn-cancel-card {
    transition: opacity var(--t-fast) var(--ease), transform 220ms var(--ease-spring);
}

/* ── Mobile motion: amplificado (sin hover, tap feedback obvio) ────── */
@media (max-width: 768px) {
    /* Keyframe con más viaje para que se note en pantallas chicas */
    @keyframes b2-pop-in-mobile {
        from { opacity: 0; transform: translateY(16px) scale(0.97); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    /* Mount: viaje más largo y stagger más perceptible */
    .page-mount > * {
        animation: b2-pop-in-mobile 520ms var(--ease-spring) both;
    }
    .page-mount > *:nth-child(1) { animation-delay: 0ms; }
    .page-mount > *:nth-child(2) { animation-delay: 80ms; }
    .page-mount > *:nth-child(3) { animation-delay: 160ms; }
    .page-mount > *:nth-child(4) { animation-delay: 230ms; }
    .page-mount > *:nth-child(5) { animation-delay: 290ms; }
    .page-mount > *:nth-child(n+6) { animation-delay: 340ms; }
    /* KPIs y métricas: stagger más visible */
    .metrics-grid > *,
    .b2-kpi-grid > * {
        animation: b2-pop-in-mobile 460ms var(--ease-spring) both;
    }
    .metrics-grid > *:nth-child(2),
    .b2-kpi-grid > *:nth-child(2) { animation-delay: 100ms; }
    .metrics-grid > *:nth-child(3),
    .b2-kpi-grid > *:nth-child(3) { animation-delay: 180ms; }
    .metrics-grid > *:nth-child(4),
    .b2-kpi-grid > *:nth-child(4) { animation-delay: 240ms; }

    /* Tap feedback en cards y rows interactivas (no hay hover en touch) */
    .b2-kpi:active,
    .card[data-async-card]:active,
    .b2-tab-section:active,
    .metric-card:active,
    tr.b2-rowlink:active,
    [data-href].b2-rowlink:active {
        transform: scale(0.985);
        transition: transform 100ms var(--ease-spring);
    }
    /* Press en botones: scale más pronunciado */
    .btn:active:not(:disabled),
    .b2-btn:active:not(:disabled) {
        transform: scale(0.94);
        transition-duration: 80ms;
    }
    /* Nav links: tap = ampliación (mismo efecto que hover) */
    .b2-nav-link:active {
        background: var(--bg-hover);
        transform: scale(1.04);
        transform-origin: left center;
        transition: transform 140ms var(--ease-spring), background-color 60ms var(--ease);
    }
    /* Tab buttons: bounce sutil */
    .b2-tab-btn:active {
        transform: scale(0.96);
        transition-duration: 80ms;
    }
}

/* ── Navigation feedback: progress bar + view transitions + tap pulse ─ */
/* Top progress bar (cubre el "tiempo muerto" entre click y respuesta) */
.nav-progress {
    position: fixed;
    /* Bajar de la safe-area: con viewport-fit=cover el top:0 queda bajo el notch
       (en PWA/mobile) y la barra no se veía. */
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    height: 3px;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--cognac) 18%,
        color-mix(in srgb, var(--cognac) 60%, white 40%) 50%,
        var(--cognac) 82%,
        transparent 100%);
    box-shadow: 0 0 10px color-mix(in srgb, var(--cognac) 55%, transparent),
                0 0 4px color-mix(in srgb, var(--cognac) 35%, transparent);
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    /* Opacity aparece instantanea para que se vea aunque el browser navegue rapido,
       transform sigue animando para el efecto de progreso. */
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}
.nav-progress.is-active { opacity: 1; }
.nav-progress.is-done {
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 320ms var(--ease-in-out) 60ms;
    opacity: 0;
}

/* View Transitions API desactivado: causaba un destello claro al navegar
   (el snapshot de la página nueva se tomaba antes de que data-theme se aplique). */
/* @view-transition { navigation: auto; } */

/* (Sin wash full-screen - el progress bar de arriba alcanza para indicar nav) */

/* ── Sección 8: prefers-reduced-motion - safety net ─────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    /* Mantener fades suaves cortos (no transforms) */
    .b2-modal-backdrop, .gasto-modal-backdrop, .b2-toast, #alertMsg, .alert {
        transition-duration: 120ms !important;
    }
    /* Progress bar igual debe funcionar - es informativo, no decorativo */
    .nav-progress { transition-duration: 200ms !important; }
}

/* ─── SIDEBAR RESIZE HANDLE + ESTADO COLAPSADO ──────────────────── */
.b2-sidebar-resize-handle {
    position: absolute;
    top: 0; right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 52;
    background: transparent;
    transition: background-color 0.18s ease;
    touch-action: none;
}
.b2-sidebar-resize-handle:hover,
.b2-sidebar-resize-handle:active {
    background: rgba(255,255,255,0.10);
}
@media (max-width: 1023px) {
    .b2-sidebar-resize-handle { display: none; }
}

/* Estado colapsado: solo iconos. font-size:0 oculta los nodos de texto
   sueltos dentro de los <a> (el icono SVG no se ve afectado). */
.b2-sidebar.is-collapsed .b2-sidebar-brand {
    padding: 18px 6px 14px;
    align-items: center;
}
.b2-sidebar.is-collapsed .b2-sidebar-brand-img {
    max-width: 40px;
}
.b2-sidebar.is-collapsed .b2-sidebar-brand-sub { display: none; }

.b2-sidebar.is-collapsed .b2-sidebar-section {
    font-size: 0;
    padding: 8px 0;
    text-align: center;
}
.b2-sidebar.is-collapsed .b2-sidebar-section::before {
    content: '';
    display: block;
    height: 1px;
    width: 28px;
    margin: 0 auto;
    background: rgba(255,255,255,0.10);
}

.b2-sidebar.is-collapsed .b2-nav-link {
    padding: 11px 0;
    justify-content: center;
    font-size: 0;
    gap: 0;
}
.b2-sidebar.is-collapsed .b2-nav-link > * {
    font-size: 0.875rem;
}
.b2-sidebar.is-collapsed .b2-nav-link .b2-nav-icon { margin: 0; }
.b2-sidebar.is-collapsed .b2-nav-link .b2-nav-dot {
    position: absolute;
    top: 6px; right: 12px;
    margin: 0;
}

.b2-sidebar.is-collapsed .b2-sidebar-footer {
    padding: 10px 6px 12px;
}
.b2-sidebar.is-collapsed .b2-sidebar-user {
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}
.b2-sidebar.is-collapsed .b2-sidebar-user-info { display: none; }
.b2-sidebar.is-collapsed .b2-sidebar-user-popup { display: none !important; }

/* Tooltip al hover en estado colapsado. Es un elemento global (en <body>)
   con position:fixed para escapar del overflow:hidden de .b2-sidebar-nav
   y del stacking context z-index:55 del sidebar. JS lo posiciona en
   sidebar-resize.js segun el link hovereado. Background y blur en linea
   con .b2-sidebar (liquid-glass) para que se vea como parte del menu. */
.b2-nav-tooltip {
    position: fixed;
    transform: translate(-6px, -50%);
    background: color-mix(in srgb, var(--bg-sidebar) 72%, transparent);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    color: var(--text-sidebar);
    border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    /* Visibility con delay = fade-out: opacity fade primero, despues visibility:hidden. */
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}
.b2-nav-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 0s;
}

/* ── Timeline de entregas: animación de línea + puntos (fun-anims.js) ── */
.delivery-timeline.tl-animate .timeline-item::after {
  transform-origin: top;
  animation: b2-tl-grow 0.45s ease-out backwards;
  animation-delay: var(--tl-delay, 0.1s);
}
@keyframes b2-tl-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .delivery-timeline.tl-animate .timeline-item::after { animation: none; }
}

/* ── Bloque "Lectura" de reportes (_LecturaReporte.cshtml) ─────────────── */
.lectura-block {
  background: var(--bg-hover);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lectura-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.lectura-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text);
}
.lectura-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
}
.lectura-item--ok .lectura-dot       { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }
.lectura-item--info .lectura-dot     { background: var(--text-muted); box-shadow: 0 0 0 3px rgba(120,113,108,0.15); }
.lectura-item--atencion .lectura-dot { background: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,0.15); }
.lectura-item--alerta .lectura-dot   { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.15); }
.lectura-item--alerta { font-weight: 500; }

/* ── Salud del Negocio ─────────────────────────────────────────────────── */
.salud-semaforo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}
.salud-semaforo .dot { width: 9px; height: 9px; border-radius: 50%; }
.salud-semaforo--ok       { background: rgba(22,163,74,0.1);  color: #16a34a; }
.salud-semaforo--ok .dot  { background: #16a34a; }
.salud-semaforo--atencion { background: rgba(217,119,6,0.1);  color: #d97706; }
.salud-semaforo--atencion .dot { background: #d97706; }
.salud-semaforo--alerta   { background: rgba(220,38,38,0.1);  color: #dc2626; }
.salud-semaforo--alerta .dot   { background: #dc2626; animation: salud-pulse 1.6s ease-in-out infinite; }
@keyframes salud-pulse { 50% { box-shadow: 0 0 0 5px rgba(220,38,38,0.15); } }

.salud-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .salud-grid { grid-template-columns: 1fr; } }

.salud-mini-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.salud-mini-kpi {
  background: var(--bg-hover);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 10px 13px;
}
.salud-mini-kpi .label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; margin-bottom: 3px; }
.salud-mini-kpi .value { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.salud-mini-kpi .delta { font-size: 0.72rem; font-weight: 600; margin-top: 2px; }

.salud-alerta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--bg-card, var(--bg-hover));
}
.salud-alerta + .salud-alerta { margin-top: 10px; }
.salud-alerta .icono {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.salud-alerta--info .icono     { background: rgba(120,113,108,0.12); color: var(--text-muted); }
.salud-alerta--atencion .icono { background: rgba(217,119,6,0.12);  color: #d97706; }
.salud-alerta--alerta .icono   { background: rgba(220,38,38,0.12);  color: #dc2626; }
.salud-alerta .titulo { font-weight: 600; font-size: 0.88rem; margin-bottom: 2px; }
.salud-alerta .detalle { font-size: 0.82rem; color: var(--text-muted); line-height: 1.4; }

/* ── B2Charts: gráficos artesanales (b2charts.js) ──────────────────────── */
.b2chart { width: 100%; }
.b2c { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.b2c-plot { position: relative; flex: 1; min-height: 0; }
.b2c-guides { position: absolute; inset: 0; pointer-events: none; }
.b2c-guide { position: absolute; left: 0; right: 0; display: flex; align-items: center; }
.b2c-guide-label {
  width: 52px;
  flex: 0 0 auto;
  text-align: right;
  padding-right: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6rem;
  color: var(--text-muted);
  opacity: 0.75;
  transform: translateY(-50%);
}
.b2c-guide-line { flex: 1; border-top: 1px dashed var(--border-light); opacity: 0.55; }
.b2c-guide-line.is-edge { border-top-style: solid; opacity: 0.9; }
.b2c-guide-line.is-zero { border-top: 1.5px solid var(--text-muted); opacity: 0.6; }
.b2c-area { position: absolute; top: 0; bottom: 0; left: 52px; right: 12px; }
.b2c-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.b2c-line-path { animation: b2cFadeIn 0.7s ease-out backwards; }
.b2c-crosshair { stroke: var(--cognac, #8B5A2B); stroke-opacity: 0.35; stroke-width: 1; }
@keyframes b2cFadeIn { from { opacity: 0; } to { opacity: 1; } }

.b2c-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: width 0.12s ease, height 0.12s ease;
  animation: b2cFadeIn 0.5s ease-out 0.2s backwards;
}
.b2c-dot.is-hover { width: 13px; height: 13px; }
.b2c-dot-scatter { pointer-events: auto; cursor: default; width: 11px; height: 11px; }
.b2c-dot-scatter.is-hover { width: 15px; height: 15px; }

.b2c-avg { position: absolute; left: 0; right: 0; display: flex; align-items: center; pointer-events: none; }
.b2c-avg-line { flex: 1; border-top: 1px dashed rgba(34, 160, 96, 0.65); }
.b2c-avg-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.55rem;
  color: #22a060;
  background: var(--bg-card);
  padding: 0 4px;
  border-radius: 3px;
  margin-left: 4px;
  transform: translateY(-50%);
  white-space: nowrap;
}

.b2c-hits { position: absolute; inset: 0; display: flex; }
.b2c-hit { flex: 1; height: 100%; }

.b2c-cols { position: absolute; inset: 0; display: flex; }
.b2c-cols .b2c-col { position: relative; flex: 1; min-width: 0; }
.b2c-bar {
  position: absolute;
  width: 56%;
  max-width: 34px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid;
  transition: height 0.5s cubic-bezier(0.22, 0.8, 0.26, 1);
  animation: b2cFadeIn 0.5s ease-out backwards;
}

.b2c-xlabels { display: flex; padding-left: 52px; padding-right: 12px; margin-top: 5px; }
.b2c-xlabel { flex: 1; min-width: 0; text-align: center; }
.b2c-xlabel span {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.56rem;
  color: var(--text-muted);
  opacity: 0.85;
  white-space: nowrap;
}
.b2c-xlabels-range { justify-content: space-between; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.6rem; color: var(--text-muted); }
.b2c-xaxis-title { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.55rem; }

.b2c-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; padding-left: 52px; }
.b2c-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; color: var(--text-muted); }
.b2c-legend-swatch { width: 9px; height: 9px; border-radius: 3px; }

.b2c-tooltip {
  position: absolute;
  z-index: 30;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.16);
  padding: 7px 10px;
  font-size: 0.72rem;
  white-space: nowrap;
  pointer-events: none;
}
.b2c-tip-title { font-weight: 600; margin-bottom: 3px; }
.b2c-tip-row { display: flex; align-items: center; gap: 6px; line-height: 1.5; }
.b2c-tip-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.b2c-tip-label { color: var(--text-muted); }
.b2c-tip-value { font-family: var(--font-mono, ui-monospace, monospace); margin-left: auto; padding-left: 10px; }

.b2c-quad { position: absolute; pointer-events: none; }
.b2c-quad-v { top: 0; bottom: 0; border-left: 1px dashed var(--text-muted); opacity: 0.35; }
.b2c-quad-h { left: 0; right: 0; border-top: 1px dashed var(--text-muted); opacity: 0.35; }

/* Breakdown: barras finitas horizontales (estilo proveedores) */
.b2c-breakdown { display: flex; flex-direction: column; gap: 11px; }
.b2c-bd-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; font-size: 0.84rem; }
.b2c-bd-left { min-width: 0; display: inline-flex; align-items: baseline; gap: 8px; }
.b2c-bd-label { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.b2c-bd-label:hover { color: var(--cognac, #8B5A2B); }
.b2c-bd-sub { font-size: 0.68rem; color: var(--text-muted); font-family: var(--font-mono, ui-monospace, monospace); white-space: nowrap; }
.b2c-bd-value { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.82rem; flex: 0 0 auto; }
.b2c-bd-pct { color: var(--text-muted); font-size: 0.68rem; }
.b2c-bd-track { height: 6px; background: var(--bg-hover); border-radius: 999px; overflow: hidden; }
.b2c-bd-fill { height: 100%; width: 0; border-radius: 999px; transition: width 0.6s cubic-bezier(0.22, 0.8, 0.26, 1); }
.b2c-empty { font-size: 0.84rem; color: var(--text-muted); font-style: italic; }

/* ── Reportes relacionados (_ReportesRelacionados.cshtml) ──────────────── */
.rep-rel { margin-top: 22px; }
.rep-rel-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
  animation: repRelIn 0.4s ease-out backwards;
}
/* Entrada escalonada: cada card llega con un pequeño delay (var --rri = índice). */
@keyframes repRelIn {
  from { opacity: 0; transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
  .rep-rel-title, .rep-rel-card { animation: none !important; }
}
.rep-rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.rep-rel-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  /* backwards + keyframe solo-from: al terminar deja de aplicar y el hover queda libre */
  animation: repRelIn 0.45s cubic-bezier(0.22, 0.8, 0.26, 1) backwards;
  animation-delay: calc(80ms + var(--rri, 0) * 55ms);
}
.rep-rel-card:hover {
  border-color: var(--cognac, #8B5A2B);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.rep-rel-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 90, 43, 0.1);
  color: var(--cognac, #8B5A2B);
}
.rep-rel-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.rep-rel-name { font-size: 0.84rem; font-weight: 600; line-height: 1.25; }
.rep-rel-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rep-rel-arrow { flex: 0 0 auto; color: var(--text-muted); opacity: 0.5; transition: opacity 0.15s ease, transform 0.15s ease; }
.rep-rel-card:hover .rep-rel-arrow { opacity: 1; transform: translateX(2px); color: var(--cognac, #8B5A2B); }

/* ── B2Num: input numérico con separadores grises (numeric-input.js) ────── */
.b2-num {
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: top;
  /* El fondo del campo lo lleva el wrapper (detrás del overlay): si lo dejáramos
     en el input, su fondo translúcido (form-control glass) taparía/lavaría los
     dígitos del overlay que está justo detrás, viéndose todo gris pálido. */
  border-radius: var(--radius-sm);
  /* Translúcido como el resto de los inputs (deja ver el panel glass detrás).
     El wrapper lleva el fondo; el input va transparente y el overlay adelante. */
  background: color-mix(in srgb, var(--bg-card) 46%, transparent);
}
.b2-num:focus-within { background: color-mix(in srgb, var(--bg-card) 82%, transparent); }
.b2-num .b2-num-input {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Fondo SIEMPRE transparente (gana sobre el form-control glass) para no velar el overlay. */
  background: transparent !important;
  /* El texto del input es transparente: lo que se ve es el overlay. El caret sí
     se ve (caret-color). Como input y overlay tienen el mismo texto, el caret
     cae siempre en el lugar correcto. */
  color: transparent;
  caret-color: var(--text, #1c1917);
  -webkit-text-fill-color: transparent;
}
/* Al seleccionar, el texto del input debe seguir transparente: si no, el render
   de la selección hace visible el texto transparente y se superpone al overlay
   (se ve doble y grisáceo). La banda de selección igual da feedback visual. */
.b2-num .b2-num-input::selection { background: rgba(139, 90, 43, 0.22); color: transparent; -webkit-text-fill-color: transparent; }
.b2-num .b2-num-input::-moz-selection { background: rgba(139, 90, 43, 0.22); color: transparent; }
.b2-num .b2-num-input::placeholder { color: var(--text-muted); -webkit-text-fill-color: var(--text-muted); }
.b2-num-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  white-space: pre;
  overflow: hidden;
  pointer-events: none;
  color: var(--text, #1c1917);
  border-radius: inherit;
}
/* Los separadores (miles y decimal) en gris más tenue */
.b2-num-sep { color: var(--text-muted); opacity: 0.7; }
/* Cuando el input está deshabilitado/readonly, el overlay toma el color tenue */
.b2-num .b2-num-input:disabled ~ .b2-num-overlay,
.b2-num .b2-num-input[readonly] ~ .b2-num-overlay { color: var(--text-muted); }

/* Caret alineado con el número: MISMO padding en input y overlay. El sync JS de
   numeric-input.js puede no correr en tabs cargadas async (queda el overlay en
   padding:0 y el número ~11px corrido respecto del caret); este CSS lo garantiza
   siempre y de paso da un toque más de padding. El borde transparente iguala el
   offset del borde del input para que el primer dígito arranque en el mismo x. */
.b2-num .b2-num-input {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.b2-num .b2-num-overlay {
  /* !important: syncOverlayStyle (JS) a veces deja un inline stale con padding:0
     (corre antes de que apliquen los estilos del input en tabs async). Con
     !important el overlay siempre alinea con el input pase lo que pase. */
  padding-left: 12px !important;
  padding-right: 12px !important;
  border: 1px solid transparent !important;
  box-sizing: border-box;
}

/* ── Command Palette (Ctrl+K) ─────────────────────────────────────────────── */
/* El trigger de la topbar es un b2-btn-icon común (mismo estilo que campana/juego). */

/* Overlay */
.cmdk { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding: 11vh 16px 16px; }
.cmdk[hidden] { display: none; }
html.cmdk-open { overflow: hidden; }
.cmdk-backdrop { position: absolute; inset: 0; background: rgba(26, 21, 18, .42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: cmdk-fade .16s ease; }

.cmdk-panel {
    position: relative; width: 100%; max-width: 640px;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 64px -16px rgba(26, 21, 18, .45), 0 2px 8px rgba(26, 21, 18, .12);
    overflow: hidden;
    backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
    animation: cmdk-pop .18s cubic-bezier(.2, .8, .2, 1);
}

.cmdk-input-row { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.cmdk-input-ico { width: 19px; height: 19px; color: var(--cognac); flex-shrink: 0; }
.cmdk-input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; color: var(--text); font-size: 1.02rem; font-family: inherit; padding: 0; }
.cmdk-input::placeholder { color: var(--text-muted); }
.cmdk-esc { font-family: inherit; font-size: .62rem; font-weight: 700; letter-spacing: .05em; color: var(--text-muted); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; }
.cmdk-close { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; flex-shrink: 0; border: none; background: transparent; color: var(--text-muted); border-radius: 9px; cursor: pointer; transition: background .15s, color .15s; }
.cmdk-close svg { width: 21px; height: 21px; }
.cmdk-close:hover { background: var(--bg-hover, rgba(0,0,0,.06)); color: var(--text); }

.cmdk-results { max-height: 54vh; overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.cmdk-group-title { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); padding: 10px 10px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--text); cursor: pointer; }
.cmdk-item:hover, .cmdk-item:focus { text-decoration: none; color: var(--text); }
.cmdk-item.active { background: color-mix(in srgb, var(--cognac) 14%, transparent); }
.cmdk-item-ico { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: color-mix(in srgb, var(--cognac) 10%, transparent); color: var(--cognac); }
.cmdk-item-ico svg { width: 17px; height: 17px; stroke-width: 2; }
.cmdk-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cmdk-item-label { font-size: .92rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item-detalle { font-size: .76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item-enter { width: 15px; height: 15px; color: var(--text-muted); opacity: 0; flex-shrink: 0; transition: opacity .12s; }
.cmdk-item.active .cmdk-item-enter { opacity: .8; }
.cmdk-empty { padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: .9rem; }

.cmdk-footer { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--border); font-size: .72rem; color: var(--text-muted); }
.cmdk-footer kbd { font-family: inherit; font-weight: 600; border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; margin-right: 3px; }

@keyframes cmdk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmdk-pop { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cmdk-panel, .cmdk-backdrop { animation: none; } }
@media (max-width: 640px) {
    .cmdk { padding: 0; align-items: stretch; }
    .cmdk-panel {
        max-width: none; border-radius: 0; border: none; height: 100%;
        display: flex; flex-direction: column;
        /* Respetar notch / barra de estado y home indicator (viewport-fit=cover) */
        padding-top: env(safe-area-inset-top, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
    .cmdk-results { max-height: none; flex: 1; }
    .cmdk-footer { padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px)); }
    .cmdk-esc { display: none; }
    .cmdk-close { display: flex; }
}