@import url('fonts-local.css');
/* ─── Scrollbars globales (modo claro) ──────────────
   Antes apenas se veian sobre fondo claro. Ahora un thumb gris-azulado
   sutil con una pequena sombra interior que le da volumen y se distingue
   del fondo sin afear. Firefox usa scrollbar-color; webkit el clasico. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 124, 152, 0.45) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(91, 124, 152, 0.45);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 4px rgba(11, 33, 54, 0.18);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(91, 124, 152, 0.65);
  background-clip: padding-box;
  box-shadow: inset 0 0 5px rgba(11, 33, 54, 0.28);
}
::-webkit-scrollbar-corner { background: transparent; }
/* En modo oscuro las scrollbars deben ser claras sobre fondo oscuro. */
html[data-theme="dark"] * { scrollbar-color: rgba(160, 180, 200, 0.35) transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(160, 180, 200, 0.30);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(160, 180, 200, 0.50);
}

/* ─── Design tokens PRESULINK (modo claro) ─────────
   Paleta unificada inspirada en SaaS premium (Linear/Stripe/Vercel):
   - Verde PRESULINK como acento principal en todo el sistema.
   - Fondos limpios, bordes muy sutiles, sombras minimalistas.
   - Tipografia Inter (UI) + Inter Tight (titulos) con font-smoothing
     para que se renderice consistente en todos los SO.
*/
:root {
  /* Layout */
  --sidebar-w:   252px;
  --panel-w:     300px;
  --float-gap:   16px;
  --panel-col:   332px;
  --sidebar-col: 268px;

  /* Alias semanticos: cuando el CSS legacy hace var(--accent, #14678b) o
     var(--brand-primary, ...) caia al azul JUMA por no estar definidos.
     Ahora apuntan al verde PRESULINK por defecto. El JS de Ajustes →
     Branding sigue pudiendo sobrescribir --brand-primary con un color
     custom del usuario. */
  --accent:         #16C784;
  --brand-primary:  #16C784;
  --brand-secondary:#0E8F68;

  /* Brand PRESULINK - sistema de 2 verdes:
       --brand-green       (#16C784) verde PRINCIPAL del logo. Usar para:
                                     btn-primary, sidebar primary, nav active,
                                     iconos de acento, valores destacados.
       --brand-green-dark  (#0E8F68) verde SECUNDARIO oscuro reciclado del
                                     logo. Usar para: tabs/toggles activos,
                                     botones secundarios solidos, badges
                                     de estado "operativo", chip de marca
                                     cuando se necesita contraste fuerte
                                     pero diferenciable del primary.
       --brand-green-2     (#1FA971) intermedio - usado SOLO en gradientes
                                     del btn-primary (transicion suave entre
                                     primary y dark).
       --brand-turquoise   (#1FB6A6) acento turquesa - reservado para
                                     diferenciaciones puntuales (charts,
                                     overlays especiales). */
  --brand-green:        #16C784;
  --brand-green-2:      #1FA971;
  --brand-green-dark:   #0E8F68;
  --brand-turquoise:    #1FB6A6;

  /* Fondos modo claro */
  --bg:          #F4F6FA;     /* fondo gris ultra suave */
  --card:        #FFFFFF;     /* superficie */
  --surface-2:   #FAFBFD;     /* superficie subordinada (hover/listado) */
  --border:      #E5EAF2;     /* borde sutil */
  --border-soft: #EEF1F6;     /* borde aun mas sutil */

  /* Texto */
  --text:        #0F172A;
  --muted:       #6B7280;
  --light:       #9CA3AF;

  /* Estados (paleta unificada con tonos suaves) */
  --green:       #16C784;     /* alias del brand para mantener compat */
  --green-bg:    #E8F8F0;
  --orange:      #F59E0B;
  --orange-bg:   #FEF8E7;
  --red:         #EF4444;
  --red-bg:      #FDECEC;
  --blue:        #3B82F6;
  --blue-bg:     #EAF2FE;

  /* Tipografia */
  --font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radios */
  --radius-sm:    8px;
  --radius:       12px;
  --radius-lg:    14px;
  --radius-xl:    18px;
  --float-radius: 16px;

  /* Sombras (muy suaves, premium) */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow:    0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --float-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 6px 20px rgba(15, 23, 42, 0.07);

  /* Transiciones */
  --t-fast: .12s cubic-bezier(.4, 0, .2, 1);
  --t:      .18s cubic-bezier(.4, 0, .2, 1);
  --t-slow: .28s cubic-bezier(.4, 0, .2, 1);
}

/* ─── Modo oscuro PRESULINK (azul tinta premium, NO negro puro) ─── */
html[data-theme="dark"] {
  --bg:          #0B1020;     /* fondo base oscuro */
  --card:        #151B2D;     /* superficie principal */
  --surface-2:   #1B2236;     /* superficie elevada */
  --border:      #232B3E;
  --border-soft: #1E263A;

  --text:        #E5E7EB;
  --muted:       #9CA3AF;
  --light:       #6B7280;

  --green-bg:    rgba(22, 199, 132, 0.12);
  --orange-bg:   rgba(245, 158, 11, 0.12);
  --red-bg:      rgba(239, 68, 68, 0.14);
  --blue-bg:     rgba(59, 130, 246, 0.14);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.16);
  --shadow:    0 2px 6px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.20);
  --float-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* --primary global apuntando al verde PRESULINK en todo el shell SaaS
   y el sidebar. Antes era #10b981 en dos sitios diferentes - unificado. */
.saas-layout,
.sidebar {
  --primary:    #16C784;
  --primary-h:  #1FA971;
  --primary-bg: rgba(22, 199, 132, 0.10);
  --primary-lt: rgba(22, 199, 132, 0.20);
}
html[data-theme="dark"] .saas-layout,
html[data-theme="dark"] .sidebar {
  --primary-bg: rgba(22, 199, 132, 0.14);
  --primary-lt: rgba(22, 199, 132, 0.24);
}

/* ─── Reset + Render premium ─────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
  /* Antialiasing premium para que Inter renderice nitida en todos los SO */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  letter-spacing: -0.005em;
}
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; -webkit-font-smoothing: antialiased; }
input, select, textarea { font-family: inherit; -webkit-font-smoothing: antialiased; }

/* Focus ring premium verde PRESULINK (global, modo claro) */
.saas-layout input:focus,
.saas-layout select:focus,
.saas-layout textarea:focus,
.saas-wrapper input:focus,
.saas-wrapper select:focus,
.saas-wrapper textarea:focus {
  outline: none;
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px rgba(22, 199, 132, 0.15);
}

/* Headings con tipo display (Inter Tight) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* ─── Shell layout ───────────────────────────────── */
.saas-layout {
  display: grid;
  grid-template-columns: var(--sidebar-col) 1fr var(--panel-col);
  grid-template-rows: 100vh;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  /* Permite que la primera columna se anime al colapsar el sidebar
     (Chrome 126+/Edge animan grid-template-columns con valores numéricos). */
  transition: grid-template-columns .28s cubic-bezier(.4,0,.2,1);
}
.saas-layout.no-panel {
  grid-template-columns: var(--sidebar-col) 1fr;
}
/* Sidebar replegado: la columna del grid colapsa a un carril estrecho (52px)
   para que el botón flotante de "abrir menú" tenga su sitio sin tapar títulos
   ni contenido del main-area. Misma curva que el sidebar propio. */
body.sb-closed .saas-layout {
  grid-template-columns: 52px 1fr var(--panel-col);
}
body.sb-closed .saas-layout.no-panel {
  grid-template-columns: 52px 1fr;
}

/* ─── Sidebar — panel flotante tipo card ───────────
   --primary se define globalmente arriba (verde PRESULINK #16C784).
   No se redefine localmente para mantener la paleta unificada en todo
   el SaaS.

   ANIMACION DE COLAPSO/EXPANSION (estilo "macOS genie minimize"):
   Combina transform-origin bottom-left + scale + translateX + skewY +
   opacity + blur con cubic-bezier dramatico para que la sidebar parezca
   "doblarse" hacia el boton reveal del corner inferior izquierdo. */
.sidebar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--float-radius);
  box-shadow: var(--float-shadow);
  display: flex;
  flex-direction: column;
  height: calc(100vh - calc(var(--float-gap) * 2));
  margin: var(--float-gap) 0 var(--float-gap) var(--float-gap);
  overflow: hidden;
  z-index: 100;
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  flex-shrink: 0;
  transform-origin: bottom left;
  will-change: transform, opacity, filter;
  /* Curva dramatica al cerrar (entrada brusca, salida suave: efecto
     "succion" hacia el corner). 380ms da peso pero no es lenta. */
  transition: width .42s cubic-bezier(.7, 0, .3, 1),
              min-width .42s cubic-bezier(.7, 0, .3, 1),
              margin .42s cubic-bezier(.7, 0, .3, 1),
              transform .42s cubic-bezier(.7, 0, .3, 1),
              opacity .32s cubic-bezier(.4, 0, .6, 1),
              filter .32s cubic-bezier(.4, 0, .2, 1),
              border-color .3s, box-shadow .3s;
}
.sidebar.sb-closed {
  width: 0;
  min-width: 0;
  margin-left: 0;
  border-color: transparent;
  box-shadow: none;
  /* "Genie": el sidebar se contrae diagonalmente hacia su esquina
     inferior-izquierda (donde aparece el boton reveal). Combina
     escala asimetrica (X mas que Y) + skewY suave + translacion +
     desvanecido + blur. */
  transform: scaleX(.4) scaleY(.85) translateX(-30%) skewY(-4deg);
  opacity: 0;
  filter: blur(2px);
  pointer-events: none;
}
.sidebar-header {
  position: relative;
  padding: 14px 12px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  flex-shrink: 0;
  border-bottom: 1px solid #f0f2f5;
}
.sidebar-logo {
  /* Llenar el ancho del header para que los 2 PNGs (light/dark) se vean al
     mismo tamaño aunque tengan dimensiones de canvas distintas. height:auto
     respeta el aspect ratio de cada uno. */
  width: 100%;
  max-height: 240px;
  height: auto;
  object-fit: contain;
}
/* Toggle light/dark: muestra el logo correcto segun modo. Por defecto
   modo claro; con html[data-theme=dark] cambia. */
.sidebar-logo-dark { display: none; }
html[data-theme="dark"] .sidebar-logo-light { display: none; }
html[data-theme="dark"] .sidebar-logo-dark { display: block; }
/* El PNG del logo dark tiene más espacio transparente alrededor del "PRESU"
   que el del light, así que sale visualmente más chico aunque el canvas sea
   del mismo tamaño. Lo escalamos al ojo para que parezcan iguales. */
.sidebar-logo-dark { transform: scale(1.25); transform-origin: center; }
.hamburger-btn {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 7px;
  border-radius: 9px;
  color: var(--text);
  line-height: 1;
  z-index: 2;
  flex-shrink: 0;
  transition: background .15s, transform .22s cubic-bezier(.4,0,.2,1);
  display: flex; align-items: center; justify-content: center;
}
.hamburger-btn:hover { background: var(--bg); }
.hamburger-btn svg { display: block; }
.hamburger-btn svg line {
  transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .18s;
  transform-box: fill-box;
  transform-origin: center;
}

/* ─── Sidebar reveal button (fixed, visible when closed) ──
   Animacion "suplantacion": el boton siempre esta renderizado pero
   escondido con transform + opacity. Cuando el sidebar se colapsa,
   un transition-delay de .26s (70% del genie collapse) hace que el
   reveal emerja JUSTO cuando el sidebar ya casi se ha ido - dando
   sensacion de que el hamburguesa se "transfiere" al reveal externo.
   Al reabrir, el reveal se oculta SIN delay (instant) y el sidebar
   se expande con su genie inverso. */
.sidebar-reveal-btn {
  position: fixed;
  top: var(--float-gap);
  left: var(--float-gap);
  z-index: 600;
  width: 36px;
  height: 36px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  color: var(--text);
  /* Estado oculto por defecto (sidebar abierto). Rotacion -90 y scale .6
     dan la sensacion de "rebobinado" cuando se reabre. */
  opacity: 0;
  pointer-events: none;
  transform: scale(.6) translateX(-12px) rotate(-90deg);
  transform-origin: top left;
  will-change: transform, opacity;
  transition: opacity .26s cubic-bezier(.4, 0, .2, 1) 0s,
              transform .28s cubic-bezier(.5, 0, .3, 1) 0s,
              background .15s,
              box-shadow .15s;
}
.sidebar-reveal-btn:hover {
  background: var(--surface-2);
  /* En hover congelamos la animacion aura para que el usuario vea claro
     que el boton es interactivo. */
  animation-play-state: paused;
}
body.sb-closed .sidebar-reveal-btn {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateX(0) rotate(0deg);
  /* Delay de .26s = ~62% del genie (.42s) - el sidebar ya esta casi
     desaparecido cuando el reveal aterriza. Curva con leve back-out
     para que "encaje" en su posicion final. */
  transition: opacity .26s cubic-bezier(.4, 0, .2, 1) .26s,
              transform .34s cubic-bezier(.34, 1.4, .55, 1) .26s,
              background .15s,
              box-shadow .15s;
  animation: sidebar-reveal-aura 6s ease-in-out 1.2s infinite;
}
/* Aura tipo neón sutil que pasa por azul → verde → morado → naranja
   y vuelve. 6 segundos por ciclo: visible pero no mareante. */
@keyframes sidebar-reveal-aura {
  0%   { box-shadow: 0 2px 10px rgba(0,0,0,.10),
                     0 0 0 2px rgba(20,103,139,.32),
                     0 0 18px 2px rgba(20,103,139,.55); }
  25%  { box-shadow: 0 2px 10px rgba(0,0,0,.10),
                     0 0 0 2px rgba(25,166,119,.32),
                     0 0 18px 2px rgba(25,166,119,.55); }
  50%  { box-shadow: 0 2px 10px rgba(0,0,0,.10),
                     0 0 0 2px rgba(155,89,182,.32),
                     0 0 18px 2px rgba(155,89,182,.55); }
  75%  { box-shadow: 0 2px 10px rgba(0,0,0,.10),
                     0 0 0 2px rgba(245,158,11,.32),
                     0 0 18px 2px rgba(245,158,11,.55); }
  100% { box-shadow: 0 2px 10px rgba(0,0,0,.10),
                     0 0 0 2px rgba(20,103,139,.32),
                     0 0 18px 2px rgba(20,103,139,.55); }
}
@media (prefers-reduced-motion: reduce) {
  body.sb-closed .sidebar-reveal-btn { animation: none; }
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
  margin-bottom: 2px;
  white-space: nowrap;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  letter-spacing: -0.005em;
  position: relative;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active {
  background: var(--primary-bg);
  color: var(--primary);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--primary-lt) inset;
}
/* El ::before "barrita verde" del item activo se reemplaza por
   .nav-indicator (un unico elemento que se desliza entre items). */
.nav-item svg, .nav-item .nav-icon { flex-shrink: 0; }

/* ─── Indicador activo deslizante (cubic-bezier premium) ─── */
.sidebar-nav { position: relative; }
.nav-indicator {
  position: absolute;
  left: 0;
  width: 3px;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px rgba(22, 199, 132, 0.45);
  pointer-events: none;
  top: 0;
  height: 0;
  opacity: 0;
  transform: translateZ(0);  /* GPU layer */
  /* Cubic-bezier "ease-out-back" muy sutil: salida elastica satisfactoria
     pero sin overshoot exagerado. 280ms es el sweet spot - se siente
     instantaneo pero la mirada lo registra. */
  transition: top .32s cubic-bezier(.34, 1.4, .5, 1),
              height .32s cubic-bezier(.34, 1.4, .5, 1),
              opacity .2s ease-out;
}
.nav-indicator.visible { opacity: 1; }

/* ─── Grupos desplegables del sidebar (Presupuestos / Documentos / Ajustes) ───
   Estructura:
     .nav-group[data-expanded] > .nav-group-header (botón) + .nav-group-items (sub)
   El header es un nav-item normal con chevron a la derecha. Los sub-items
   se ven como nav-items con indent y un guía vertical sutil tipo árbol
   a su izquierda para jerarquía visual ligera (sin recargar). */
.nav-group { margin-bottom: 2px; }
.nav-group-header {
  width: 100%;
  cursor: pointer;
}
.nav-group-header .nav-label { flex: 1; }
.nav-group-header .nav-chevron {
  margin-left: auto;
  opacity: .5;
  transition: transform .24s cubic-bezier(.22, 1, .36, 1), opacity var(--t-fast);
}
.nav-group:hover .nav-group-header .nav-chevron { opacity: .85; }
.nav-group[data-expanded="true"] .nav-group-header .nav-chevron {
  transform: rotate(90deg);
}

/* Contenedor de sub-items: colapsado por defecto. La transición se habilita
   tras el primer paint añadiendo .nav-group-ready (evita flash de unfold
   al cargar). Sin translateY: solo max-height + opacity para una entrada
   limpia, sin "rebote" innecesario en una nav lateral. */
.nav-group-items {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  /* Indent vertical sutil tipo árbol: una línea fina a la izquierda del
     bloque para enganchar visualmente los sub-items con su header. */
  position: relative;
  padding-left: 4px;
}
.nav-group-items::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--border-soft, var(--border));
  opacity: 0;
  transition: opacity .18s ease-out;
}
.nav-group-ready .nav-group-items {
  transition: max-height .26s cubic-bezier(.22, 1, .36, 1),
              opacity .2s ease-out;
}
.nav-group[data-expanded="true"] .nav-group-items {
  max-height: 320px;
  opacity: 1;
}
.nav-group[data-expanded="true"] .nav-group-items::before {
  opacity: 1;
}

/* Sub-items: como un nav-item normal pero indentados y un punto más
   pequeños. Sin bullets — la jerarquía la marca el indent + la guía
   vertical del bloque. */
.nav-sub-item {
  padding-left: 32px !important;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 1px;
}
.nav-sub-item.active {
  /* El sub-item activo no necesita el inset shadow del top-level — basta
     con el background tintado + el color verde para mantener la jerarquía
     visual (el sub se ve "más ligero" que el top-level activo). */
  box-shadow: none;
}

.sidebar-footer {
  padding: 8px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.project-badge {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.project-badge-icon {
  width: 28px; height: 28px;
  background: var(--primary-bg);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.project-badge-text { line-height: 1.3; }
.project-badge-label { color: var(--light); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
.project-badge-name { font-weight: 600; color: var(--text); font-size: 12px; }
.project-badge-sub { color: var(--muted); font-size: 11px; }

/* ─── Tarjeta de tarifa activa (sidebar-footer) ────
   Usa el gradient verde JUMA estándar (azul-verdoso → verde) para
   mantener coherencia visual con btn-primary y otras superficies. */
/* Mini-card "Mi plan" — encima de la tariff-card del footer.
   Discreta, una línea. FREE = gris sobrio; PRO = gradient premium azul→verde
   con corona dorada para hacer evidente el upgrade. */
.plan-mini {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 11px;
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  font-family: inherit;
  text-decoration: none;
  transition: transform var(--t), box-shadow var(--t), filter var(--t);
  border: 1px solid transparent;
  cursor: pointer;
}
.plan-mini:hover { transform: translateY(-1px); filter: brightness(1.04); }
.plan-mini-label {
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  opacity: .85;
}
.plan-mini-value {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .4px;
  padding: 2px 9px;
  border-radius: 10px;
}
/* FREE — fondo neutro que respeta el tema (claro / oscuro) gracias a las
 *  variables. El badge usa --muted invertido para contraste suave. */
.plan-mini-free {
  background: var(--soft, rgba(0,0,0,0.04));
  border-color: var(--border);
  color: var(--muted);
}
.plan-mini-free .plan-mini-value {
  background: var(--text);
  color: var(--card);
  opacity: .82;
}
.plan-mini-free:hover {
  background: var(--border);
  color: var(--text);
}
/* PRO — gradient premium azul→verde como acento. La franja dorada del borde y
 *  la estrella se mantienen iguales en ambos temas porque el gradient ya
 *  proporciona contraste sobre cualquier fondo. */
.plan-mini-pro {
  background: linear-gradient(135deg, rgba(20,103,139,0.10) 0%, rgba(13,150,104,0.10) 100%);
  border-color: rgba(255, 216, 58, 0.45);
  color: var(--text);
  box-shadow: 0 2px 10px -4px rgba(13, 150, 104, 0.32);
}
.plan-mini-pro .plan-mini-value {
  background: linear-gradient(135deg, #14678b 0%, #0d9668 100%);
  color: #fff;
  box-shadow: 0 1px 4px rgba(13, 150, 104, 0.45);
}
.plan-mini-pro .plan-mini-value svg { color: #ffd83a; }
.plan-mini-pro:hover {
  border-color: rgba(255, 216, 58, 0.7);
  box-shadow: 0 4px 14px -4px rgba(13, 150, 104, 0.5);
}

.tariff-card {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(140deg, var(--brand-green) 0%, var(--brand-green-dark) 100%);
  color: #fff;
  cursor: pointer;
  transition: background var(--t), box-shadow var(--t), transform var(--t);
  margin-bottom: 4px;
  box-shadow: 0 1px 3px rgba(11,69,100,.18);
  text-decoration: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.tariff-card:hover {
  background: linear-gradient(140deg, #0f5777 0%, #14956a 100%);
  box-shadow: 0 5px 14px rgba(11,69,100,.28);
  transform: translateY(-1px);
}
.tariff-card-head {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 3px;
}
.tariff-card-head svg { color: #fff; opacity: .9; }
.tariff-card-label {
  color: rgba(255,255,255,.92);
  font-size: 9px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.tariff-card-name {
  font-size: 13px; font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .18s ease;
}
.tariff-card-name.refreshing { opacity: .55; }
.tariff-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px;
  gap: 6px;
}
.tariff-card-status {
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tariff-card-cta {
  color: #fff; font-weight: 700;
  flex-shrink: 0;
}

.user-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px;
  background: none; border: none; width: 100%;
  cursor: pointer; transition: background .15s;
  text-align: left;
}
.user-btn:hover { background: var(--bg); }
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 14px; flex-shrink: 0;
}
.user-info { flex: 1; line-height: 1.3; }
.user-name { font-size: 13px; font-weight: 600; color: var(--text); }
.user-role { font-size: 11px; color: var(--muted); }
.user-chevron { color: var(--light); font-size: 12px; }

.dark-mode-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; font-size: 13px; color: var(--muted);
}
.dark-mode-row svg { flex-shrink: 0; }
.toggle-track {
  margin-left: auto;
  width: 36px; height: 20px; border-radius: 10px;
  background: #c8cdd6; cursor: pointer;
  position: relative; flex-shrink: 0;
  border: none;
  transition: background .2s;
}
.toggle-track.on { background: var(--primary); }
.toggle-track::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  transition: transform .2s;
}
.toggle-track.on::after { transform: translateX(16px); }
/* Estado inicial síncrono basado en html[data-theme] (lo setea un
   <script> en <head> antes del primer paint). Esto evita el slide
   visible de 200ms cuando navegas a una página con full reload: la
   bolita ya nace en la posición correcta. La clase .on que añade JS
   después coincide con esta posición, así que no hay animación. */
html[data-theme="light"] .toggle-track { background: var(--primary); }
html[data-theme="light"] .toggle-track::after { transform: translateX(16px); }

/* ─── Main content area ──────────────────────────── */
.main-area {
  overflow-y: auto;
  height: 100vh;
  background: transparent;
}
.main-area::-webkit-scrollbar { width: 6px; }
.main-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.section-view { display: none; min-height: 100vh; }
.section-view.active { display: block; }

/* ─── Page header ────────────────────────────────── */
.page-header {
  position: relative; z-index: 10;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 28px 28px 20px;
  gap: 16px;
}
.page-header-left h1 { font-size: 22px; font-weight: 700; color: var(--text); }
.page-header-left p { font-size: 14px; color: var(--muted); margin-top: 2px; }
.page-header-right {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}

/* ─── Stat cards row ─────────────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  padding: 0 28px 20px;
}
.stat-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between;
}
.stat-card-left .stat-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.stat-card-left .stat-value { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1; }
.stat-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ─── Content area ───────────────────────────────── */
.content-body { padding: 0 28px 28px; }

/* ─── Search + filter bar ────────────────────────── */
.toolbar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.search-box {
  position: relative; flex: 1; max-width: 300px;
}
.search-box input {
  width: 100%; padding: 9px 12px 9px 36px;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 14px; background: var(--card); color: var(--text);
  outline: none; transition: border .15s;
}
.search-box input:focus { border-color: var(--primary); }
.search-box svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--light);
}

/* ─── Buttons PRESULINK (scoped al SaaS shell, no pisar el wizard) ── */
.saas-layout .btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--radius);
  font-size: 14px; font-weight: 600; border: none;
  cursor: pointer; transition: all var(--t); white-space: nowrap;
  letter-spacing: -0.005em;
}
/* Primary: gradiente MUY sutil verde PRESULINK con sombra premium */
.saas-layout .btn-primary {
  background: linear-gradient(180deg, var(--brand-green) 0%, var(--brand-green-2) 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset,
              0 1px 2px rgba(14, 143, 104, 0.20),
              0 0 0 1px rgba(14, 143, 104, 0.15);
}
.saas-layout .btn-primary:hover {
  background: linear-gradient(180deg, #1FCB89 0%, var(--brand-green-2) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset,
              0 4px 10px rgba(14, 143, 104, 0.22),
              0 0 0 1px rgba(14, 143, 104, 0.18);
  transform: translateY(-1px);
}
.saas-layout .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(14, 143, 104, 0.20),
              0 0 0 1px rgba(14, 143, 104, 0.15);
}
.saas-layout .btn-ghost {
  background: var(--card); color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.saas-layout .btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--muted);
  color: var(--text);
}
.saas-layout .btn-sm { padding: 6px 12px; font-size: 13px; border-radius: var(--radius-sm); }
.saas-layout .btn-icon { padding: 8px; width: 36px; height: 36px; justify-content: center; }

/* Botón "Vaciar" del Presupuesto libre: rojo suave (acción destructiva
   pero no aterrador como un btn-danger pleno). */
.saas-layout .nm-btn-clear {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, 0.30);
}
.saas-layout .nm-btn-clear:hover {
  background: rgba(220, 38, 38, 0.16);
  border-color: rgba(220, 38, 38, 0.55);
  color: #991b1b;
}
html[data-theme="dark"] .saas-layout .nm-btn-clear {
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.35);
}
html[data-theme="dark"] .saas-layout .nm-btn-clear:hover {
  background: rgba(248, 113, 113, 0.22);
  border-color: rgba(248, 113, 113, 0.55);
  color: #fecaca;
}

/* ─── Tables PRESULINK (estilo Linear/Stripe) ──────── */
.data-table-wrap {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.data-table {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
}
.data-table thead th {
  padding: 12px 16px; text-align: left;
  font-size: 10.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .6px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.data-table thead th:first-child { padding-left: 20px; }
.data-table tbody tr {
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--t-fast); cursor: pointer;
}
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr { transition: background .15s ease, transform .18s ease, box-shadow .18s ease; }
.data-table tbody tr:hover { background: var(--surface-2); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11,49,77,.10); position: relative; z-index: 1; }
.data-table tbody tr.selected { background: var(--primary-bg); }
.data-table tbody td { padding: 13px 16px; vertical-align: middle; }
.data-table tbody td:first-child { padding-left: 20px; }
.data-table input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--primary); }

/* Client/entity name in table */
.entity-cell { display: flex; align-items: center; gap: 10px; }
.entity-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #fff; flex-shrink: 0;
}
/* Variante con imagen: el <img> rellena el círculo. Misma caja que la
   variante de letra, así los tamaños inline (44px en paneles) siguen valiendo. */
.entity-avatar-img {
  background: var(--surface-2, #eef0f5) !important;
  padding: 0; overflow: hidden;
}
.entity-avatar-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.entity-name { font-weight: 600; font-size: 13.5px; color: var(--text); }
.entity-sub  { font-size: 12px; color: var(--muted); }

/* ─── Status badges ──────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.badge-green  { background: var(--green-bg);  color: var(--green); }
.badge-orange { background: var(--orange-bg); color: var(--orange); }
.badge-red    { background: var(--red-bg);    color: var(--red); }
.badge-blue   { background: var(--blue-bg);   color: var(--blue); }
.badge-gray   { background: var(--bg);        color: var(--muted); }
.badge-purple { background: var(--primary-bg); color: var(--primary); }

/* Inline category badge (with color dot) */
.cat-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 8px; font-size: 12px; font-weight: 500;
}

/* ─── Pagination ─────────────────────────────────── */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--muted);
  gap: 12px; flex-wrap: wrap;
}
.pagination-info { font-size: 12.5px; color: var(--muted); }
/* host envuelve los controles fuera del data-table-wrap; sin contenido es invisible */
.pagination-host:empty { display: none; }
.pagination-host .pagination {
  background: var(--card); border: 1px solid var(--border); border-top: 1px solid var(--border);
  border-radius: 12px; margin-top: 10px;
}
.page-controls { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.page-btn {
  min-width: 32px; height: 32px; padding: 0 8px;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all .15s;
}
.page-btn:hover:not(:disabled) { background: var(--bg); }
.page-btn:disabled { opacity: .45; cursor: not-allowed; }
.page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.page-ellipsis {
  min-width: 24px; text-align: center; color: var(--light); font-size: 13px;
  user-select: none;
}
.per-page-select {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; color: var(--text); background: var(--card); margin-left: 8px;
}

/* ─── Tabs ───────────────────────────────────────── */
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 0; }
.tab-btn {
  padding: 10px 16px; font-size: 13.5px; font-weight: 500;
  color: var(--muted); border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.tab-content { display: none; padding: 16px 0; }
.tab-content.active { display: block; }

/* ─── Right detail panel — panel flotante tipo card ─ */
.detail-panel {
  background: var(--card);
  border: 1px solid #dde1e7;
  border-radius: var(--float-radius);
  box-shadow: var(--float-shadow);
  height: calc(100vh - calc(var(--float-gap) * 2));
  margin: var(--float-gap) var(--float-gap) var(--float-gap) 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.detail-panel::-webkit-scrollbar { width: 4px; }
.detail-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.detail-panel.hidden { display: none; }

.panel-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.panel-header-top {
  display: flex; align-items: flex-start; justify-content: space-between;
}
.panel-close-btn {
  background: none; border: none; color: var(--light);
  font-size: 18px; cursor: pointer; padding: 0; line-height: 1;
}
.panel-icon-row {
  display: flex; align-items: center; gap: 12px;
}
.panel-big-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--primary-bg); display: flex; align-items: center; justify-content: center;
}
.panel-title { font-size: 16px; font-weight: 700; color: var(--text); }
.panel-subtitle { font-size: 12px; color: var(--muted); margin-top: 2px; }
.panel-amount { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.1; }
.panel-date { font-size: 12px; color: var(--muted); margin-top: 4px; }

.panel-tabs { padding: 0 20px; border-bottom: 1px solid var(--border); }
.panel-body { padding: 16px 20px; flex: 1; }

.panel-section { margin-bottom: 20px; }
.panel-section-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between;
}
.panel-edit-link {
  font-size: 12px; color: var(--primary); font-weight: 500; cursor: pointer;
  display: flex; align-items: center; gap: 4px; border: none; background: none;
}
.panel-row {
  display: flex; flex-direction: column; margin-bottom: 10px;
}
.panel-row label { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.panel-row span  { font-size: 13.5px; color: var(--text); font-weight: 500; }
.panel-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}

.panel-footer {
  padding: 14px 20px; border-top: 1px solid var(--border);
  display: flex; gap: 8px;
}
.panel-footer .btn { flex: 1; justify-content: center; }

/* Avatar colours */
.av-violet  { background: #7c3aed; }
.av-teal    { background: #0d9488; }
.av-blue    { background: #2563eb; }
.av-indigo  { background: #4f46e5; }
.av-pink    { background: #db2777; }
.av-green   { background: #16a34a; }
.av-orange  { background: #ea580c; }
.av-red     { background: #dc2626; }
.av-sky     { background: #0284c7; }
.av-amber   { background: #d97706; }

/* ─── Category filter tabs ───────────────────────── */
.cat-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.cat-tab-btn {
  padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500;
  background: var(--card); border: 1px solid var(--border); color: var(--muted);
  cursor: pointer; transition: all .15s;
}
.cat-tab-btn:hover { background: var(--bg); color: var(--text); }
.cat-tab-btn.active {
  background: var(--primary-bg); border-color: var(--primary-bg); color: var(--primary);
}

/* ─── Reports section ────────────────────────────── */
.charts-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;
}
.chart-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px;
}
.chart-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.chart-card .chart-meta {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
}
.chart-legend { display: flex; gap: 12px; font-size: 12px; color: var(--muted); }
.legend-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 4px;
}
.chart-period-select {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 12px; color: var(--muted); background: var(--card);
}
canvas.chart { width: 100%; height: 160px; display: block; }

.charts-bottom {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px;
}
.donut-label {
  font-size: 14px; font-weight: 700; text-anchor: middle;
  dominant-baseline: middle;
}

/* ─── Reports right panel ────────────────────────── */
.report-panel {
  padding: 20px; background: var(--card); border-left: 1px solid var(--border);
  height: 100vh; overflow-y: auto;
}
.report-panel h2 { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.filter-group { margin-bottom: 16px; }
.filter-group label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.filter-group select, .filter-group input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; color: var(--text);
  background: var(--card); outline: none;
}
.filter-group select:focus, .filter-group input:focus { border-color: var(--primary); }
.quick-stat-row {
  display: flex; justify-content: space-between;
  font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border);
}
.quick-stat-row:last-child { border-bottom: none; }
.cashflow-row {
  display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0;
}
.cashflow-row.final {
  border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px;
  font-weight: 700; color: var(--primary);
}
.export-link {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text); padding: 8px 0;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.export-link:last-child { border-bottom: none; }
.export-link:hover { color: var(--primary); }

/* ─── Config tabs layout ─────────────────────────── */
.config-tabs-header {
  display: flex; gap: 0; border-bottom: 2px solid var(--border);
  padding: 0 28px; overflow-x: auto; background: var(--card);
}
.config-tab-btn {
  padding: 14px 16px; font-size: 14px; font-weight: 500;
  color: var(--muted); border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.config-tab-btn:hover { color: var(--text); }
.config-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

.config-body { padding: 28px; }
.config-section {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px; margin-bottom: 20px;
}
.config-section h2 { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.config-row {
  display: flex; align-items: center; padding: 14px 0;
  border-bottom: 1px solid var(--border); gap: 12px;
}
.config-row:last-child { border-bottom: none; }
.config-row-icon {
  width: 36px; height: 36px; border-radius: 10px; background: var(--primary-bg);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--primary);
}
.config-row-text { flex: 1; }
.config-row-text strong { font-size: 14px; font-weight: 600; display: block; }
.config-row-text small  { font-size: 12px; color: var(--muted); }
.config-row-control { flex-shrink: 0; }
.config-select {
  padding: 8px 28px 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; color: var(--text);
  background: var(--card); appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  min-width: 160px;
}
.color-dots { display: flex; gap: 6px; }
.color-dot {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: border-color .15s;
}
.color-dot.selected { border-color: var(--text); }
.toggle-switch {
  width: 42px; height: 24px; border-radius: 12px; border: none; cursor: pointer;
  position: relative; transition: background .2s; background: var(--border);
}
.toggle-switch.on { background: var(--primary); }
.toggle-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transition: transform .2s;
}
.toggle-switch.on::after { transform: translateX(18px); }

/* ─── Account / Mi cuenta ────────────────────────── */
.account-layout {
  display: grid; grid-template-columns: 1fr 300px; gap: 20px;
  padding: 28px;
}
/* Nuevo layout 2-columnas para las tarjetas de "Mi cuenta" */
.acc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 0 28px 28px;
}
.acc-card { margin-bottom: 0; }
.acc-card-wide { grid-column: 1 / -1; }
/* Columna apilada (Perfil + Sesión) — su alto total iguala el de Mi plan al
 *  lado, eliminando el hueco vacío que dejaba Perfil sola. */
.acc-col-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.acc-col-stack > .acc-card { flex: 1 1 auto; }
@media (max-width: 820px) {
  .acc-grid { grid-template-columns: 1fr; }
}
.acc-profile-row { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.acc-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.acc-profile-meta { min-width: 0; }
.acc-profile-name { font-weight: 700; font-size: 16px; }
.acc-profile-email { font-size: 13px; color: var(--muted); word-break: break-all; }
.acc-profile-since { font-size: 12px; color: var(--primary); margin-top: 4px; font-weight: 600; }
.acc-hint { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0; }
/* Lista descriptiva — dl/dt/dd como tabla de 2 columnas */
.acc-info { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; font-size: 13px; }
.acc-info dt { color: var(--muted); font-weight: 600; }
.acc-info dd { margin: 0; color: var(--text); word-break: break-word; }
/* Barras de progreso de uso vs cap */
.acc-usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.acc-usage-item { background: var(--soft, #f6fafc); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.acc-usage-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.acc-usage-numbers { font-size: 18px; font-weight: 700; color: var(--text); margin: 4px 0 8px; }
.acc-usage-numbers .total { font-size: 13px; color: var(--muted); font-weight: 600; }
.acc-usage-weekly {
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border);
}
.acc-usage-weekly-row {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 11.5px; margin-bottom: 4px;
}
.acc-usage-weekly-label { color: var(--muted); font-weight: 600; }
.acc-usage-weekly-num { color: var(--text); font-weight: 700; font-size: 13px; }
.acc-usage-weekly-num .total { color: var(--muted); font-weight: 600; font-size: 11.5px; }
.acc-bar-mini { height: 4px; }
.acc-bar { width: 100%; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.acc-bar > i { display: block; height: 100%; background: var(--primary); border-radius: 3px; transition: width .3s ease; }
.acc-bar.is-warn > i { background: #f59e0b; }
.acc-bar.is-full > i { background: var(--red); }

/* ── Barra de tiempo del plan (Mi cuenta + Ajustes PRO) ────────────────
   Gradient azul→verde→dorado fijo. Dentro fluye un overlay suave
   (planBarFlow) que simula corriente líquida. En la punta derecha un
   glow consumiéndose con chispas que se evaporan (planBarConsume). */
.acc-bar-plan {
  height: 16px;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  overflow: visible;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
}
.acc-bar-plan > i {
  position: relative;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #14678b 0%,
    #0d9668 50%,
    #2bbf80 80%,
    #d4a017 100%
  );
  box-shadow: 0 0 10px rgba(13, 150, 104, 0.4);
  overflow: visible;
  transition: width .3s ease;
}
/* Fluido interior — overlay claro semitransparente que ondula lento de
 *  izquierda a derecha. Clipado al redondeo de la barra para que no se
 *  escape por la punta (esa zona la usa el ::after del consumo). */
.acc-bar-plan > i::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  clip-path: inset(0 round 999px);
  background:
    linear-gradient(115deg,
      transparent 0%,
      rgba(255,255,255,0.10) 22%,
      rgba(255,255,255,0.28) 38%,
      rgba(255,255,255,0.10) 54%,
      transparent 70%,
      rgba(255,255,255,0.18) 86%,
      transparent 100%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  filter: blur(1.5px);
  mix-blend-mode: screen;
  animation: planBarFlow 6.5s linear infinite;
  pointer-events: none;
}
@keyframes planBarFlow {
  0%   { background-position: -60% 0; }
  100% { background-position: 160% 0; }
}
/* Consumo de la punta — núcleo brillante + halo cálido + 3 chispas que
 *  se evaporan a la derecha. El glow pulsa más rápido para dar sensación
 *  de combustión activa. */
.acc-bar-plan > i::after {
  content: "";
  position: absolute;
  top: 50%; right: -6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.95) 0%,
    rgba(255,236,180,0.55) 35%,
    rgba(255,200,90,0.18) 65%,
    transparent 80%);
  filter: blur(0.6px);
  transform: translateY(-50%);
  box-shadow:
    0 0  6px rgba(255,255,255,0.55),
    0 0 14px rgba(255,210,120,0.45);
  animation: planBarConsume 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes planBarConsume {
  0%, 100% {
    opacity: 0.65;
    transform: translateY(-50%) scale(0.85);
    box-shadow:
      0 0  4px rgba(255,255,255,0.4),
      0 0 10px rgba(255,210,120,0.35),
      6px -1px 0 -3px rgba(255,236,180,0.55),
      11px 1px 0 -4px rgba(255,210,120,0.4),
      16px 0px 0 -5px rgba(255,210,120,0.25);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1.18);
    box-shadow:
      0 0  8px rgba(255,255,255,0.75),
      0 0 18px rgba(255,210,120,0.6),
      9px 0px 0 -3px rgba(255,236,180,0.0),
      15px -1px 0 -4px rgba(255,210,120,0.0),
      22px 1px 0 -5px rgba(255,210,120,0.0);
  }
}
/* Variantes warn/full — cambian color del gradient base, del glow de la
 *  punta y de las chispas para mantener coherencia cromática. */
.acc-bar-plan.is-warn > i {
  background: linear-gradient(90deg, #d97706 0%, #f59e0b 60%, #fbbf24 100%);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}
.acc-bar-plan.is-full > i {
  background: linear-gradient(90deg, #b91c1c 0%, #ef4444 60%, #fca5a5 100%);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .acc-bar-plan > i::before,
  .acc-bar-plan > i::after { animation: none; }
}

/* ── Hero card "Pasar a PRO" en Mi cuenta → Mi plan (sólo users FREE) ── */
.acc-plan-hero {
  position: relative; overflow: hidden;
  margin: -6px -4px -4px;        /* compensa el padding propio de la <section> */
  padding: 18px 22px 18px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 200, 80, 0.22), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(13, 150, 104, 0.08), transparent 60%);
}
.acc-plan-hero-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.acc-plan-hero-badge {
  font-weight: 700; font-size: 12px; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 10px;
}
.acc-plan-hero-badge-free { background: #5e768d; color: #fff; }
.acc-plan-hero-src { color: var(--muted); font-size: 12.5px; }
.acc-plan-hero-title {
  margin: 0 0 6px; font-size: 19px; font-weight: 800;
  color: var(--text); letter-spacing: -0.01em;
}
.acc-plan-hero-sub { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.acc-plan-hero-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.acc-plan-hero-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--text); }
.acc-plan-hero-list li > svg { flex: none; margin-top: 2px; color: #0d9668; }
.acc-plan-hero-cta { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.acc-plan-hero-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 360px; padding: 12px 18px !important;
  font-size: 15px !important; font-weight: 700 !important;
  background: linear-gradient(135deg, var(--primary, #14678b) 0%, #0d9668 100%) !important;
  color: #fff !important; border: none !important;
  box-shadow: 0 8px 18px -8px rgba(13, 150, 104, 0.55);
  transition: transform .12s ease, box-shadow .12s ease;
}
.acc-plan-hero-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(13, 150, 104, 0.65); }
.acc-plan-hero-btn:active { transform: translateY(0); }
.acc-plan-hero-btn svg { color: #ffd83a; }
.acc-plan-hero-btn strong { margin-left: auto; font-size: 14px; opacity: .95; }
.acc-plan-hero-btn-alt {
  width: fit-content; padding: 6px 14px !important; font-size: 12.5px !important;
  color: var(--muted) !important; background: transparent !important;
}
.acc-plan-hero-btn-alt:hover { color: var(--text) !important; background: rgba(0,0,0,0.04) !important; }
.acc-plan-hero-link {
  display: inline-block; margin-top: 14px; font-size: 13px; color: var(--primary);
  text-decoration: none; font-weight: 600;
}
.acc-plan-hero-link:hover { text-decoration: underline; }
.acc-input {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13.5px; font-family: inherit; color: var(--text); background: var(--card);
}
.acc-status { font-size: 12.5px; margin-top: 8px; padding: 6px 10px; border-radius: 6px; }
.acc-status.is-ok  { background: #ecfdf5; color: #0d9668; }
.acc-status.is-err { background: #fef2f2; color: var(--red); }

/* ─── Plan & facturación (Ajustes) ────────────────── */
.plans-grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 22px;
  margin: 6px 0 28px;
}
@media (max-width: 820px) { .plans-grid { grid-template-columns: 1fr; } }

.plan-card {
  position: relative;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 26px 24px 20px;
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 2px 10px -6px rgba(20, 103, 139, 0.10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.plan-card-free { color: var(--text); }

/* PRO card — destacada con gradient sutil y ring del color primario */
.plan-card-featured {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--card, #fff), var(--card, #fff)) padding-box,
    linear-gradient(135deg, var(--primary, #14678b) 0%, #0d9668 50%, #d4a017 100%) border-box;
  box-shadow: 0 14px 40px -18px rgba(13, 150, 104, 0.35), 0 4px 14px -8px rgba(20, 103, 139, 0.18);
  transform: translateY(-6px);
}
.plan-card-featured::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 16px; pointer-events: none;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 200, 80, 0.14), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(13, 150, 104, 0.08), transparent 55%);
}
.plan-card-featured > * { position: relative; z-index: 1; }

.plan-card-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, #14678b 0%, #0d9668 100%); color: #fff;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  padding: 5px 14px; border-radius: 11px;
  box-shadow: 0 6px 14px -4px rgba(13, 150, 104, 0.55);
}
.plan-card-badge svg { color: #ffd83a; }

/* Card-current marker — cuando es Tu plan actual */
.plan-card-current { outline: 2px solid #0d9668; outline-offset: -2px; }

/* HEAD */
.plan-card-head {
  text-align: left;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.plan-name {
  font-size: 13px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1.2px;
}
.plan-name-pro {
  background: linear-gradient(135deg, var(--primary, #14678b) 0%, #0d9668 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.plan-price-row {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin: 8px 0 6px;
}
.plan-price {
  font-size: 42px; font-weight: 800; color: var(--text);
  line-height: 1; letter-spacing: -0.02em;
}
.plan-price-sub { font-size: 15px; color: var(--muted); font-weight: 600; margin-left: 4px; }
.plan-price-aside {
  display: flex; flex-direction: column; gap: 1px;
  padding: 4px 10px; border-radius: 8px;
  background: rgba(13, 150, 104, 0.08);
  border: 1px solid rgba(13, 150, 104, 0.18);
}
.plan-price-yearly { font-size: 12.5px; color: var(--text); font-weight: 700; }
.plan-price-save { font-size: 10.5px; color: #0d9668; font-weight: 700; letter-spacing: .2px; }
.plan-tagline { font-size: 13px; color: var(--muted); margin-top: 4px; }
.plan-tagline-pro { color: var(--text); font-weight: 600; font-size: 13.5px; }

/* FEATURES */
.plan-features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.plan-features li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.45; color: var(--text);
}
.plan-features li strong { font-weight: 700; }
.plan-feat-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
  font-size: 13px; font-weight: 700;
}
.plan-feat-ok { background: rgba(13, 150, 104, 0.14); color: #0d9668; }
.plan-feat-no { background: rgba(0,0,0,0.04); color: var(--muted); }
.plan-feat-mini { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.plan-features .plan-feature-no { color: var(--muted); }
.plan-features .plan-feature-no strong { color: var(--muted); }

/* FOOT */
.plan-card-foot {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 4px;
}
.plan-card-foot .btn { width: 100%; justify-content: center; }
.plan-btn-current {
  opacity: .85; cursor: default;
  background: rgba(13, 150, 104, 0.10) !important;
  color: #0d9668 !important; border-color: transparent !important;
  font-weight: 700 !important;
}

/* CTA primario PRO — botón gigante con gradient, sombra, hover lift */
.plan-btn-primary {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  font-size: 15.5px !important; font-weight: 700 !important; letter-spacing: 0.01em;
  background: linear-gradient(135deg, var(--primary, #14678b) 0%, #0d9668 100%) !important;
  color: #fff !important; border: none !important;
  box-shadow: 0 10px 22px -10px rgba(13, 150, 104, 0.65), inset 0 -2px 0 rgba(0,0,0,0.08);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.plan-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(13, 150, 104, 0.75), inset 0 -2px 0 rgba(0,0,0,0.08);
  filter: brightness(1.04);
}
.plan-btn-primary:active { transform: translateY(0); }
.plan-btn-primary svg { color: #ffd83a; flex: none; }
.plan-btn-primary .plan-btn-price {
  margin-left: auto; font-size: 14.5px; font-weight: 700; opacity: .96;
  padding-left: 10px; border-left: 1px solid rgba(255,255,255,.25);
}
.plan-btn-secondary {
  font-size: 12.5px !important; font-weight: 600 !important;
  color: var(--text) !important; padding: 8px 14px !important;
}
.plan-btn-secondary:hover { background: rgba(0,0,0,0.04) !important; }

.plan-trust {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  justify-content: center; margin-top: 10px;
  padding-top: 12px; border-top: 1px dashed var(--border);
  font-size: 11.5px; color: var(--muted);
}
.plan-trust-item { display: inline-flex; align-items: center; gap: 5px; }
.plan-trust-item svg { opacity: .75; }

/* ─── Vista PRO de Ajustes → Plan & facturación ────────────────────── */
.plan-pro-hero {
  position: relative; overflow: hidden;
  padding: 26px 28px 22px;
  border-radius: 16px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg, var(--primary, #14678b) 0%, #0d9668 50%, #d4a017 100%) border-box;
  box-shadow: 0 14px 40px -18px rgba(13, 150, 104, 0.35);
  margin-bottom: 22px;
}
.plan-pro-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 200, 80, 0.16), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(13, 150, 104, 0.10), transparent 55%);
}
.plan-pro-hero > * { position: relative; z-index: 1; }
.plan-pro-hero-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.plan-pro-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, var(--primary, #14678b) 0%, #0d9668 100%);
  color: #fff; padding: 4px 12px; border-radius: 11px;
  font-size: 12px; font-weight: 800; letter-spacing: .6px;
  box-shadow: 0 6px 14px -4px rgba(13, 150, 104, 0.55);
}
.plan-pro-badge svg { color: #ffd83a; }
.plan-pro-source { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.plan-pro-title {
  margin: 0 0 6px; font-size: 21px; font-weight: 800;
  color: var(--text); letter-spacing: -0.01em;
}
.plan-pro-sub { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.plan-pro-sub strong { color: var(--text); }
.plan-pro-bar-labels {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted); font-weight: 600; margin-bottom: 4px;
}
.plan-pro-hero .acc-bar { margin-bottom: 18px; }
.plan-pro-cta-block { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.plan-pro-cta {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 10px !important; padding: 11px 22px !important;
  width: auto !important; max-width: 100%;
  font-size: 14px !important; font-weight: 700 !important;
  background: linear-gradient(135deg, var(--primary, #14678b) 0%, #0d9668 100%) !important;
  color: #fff !important; border: none !important;
  box-shadow: 0 8px 18px -10px rgba(13, 150, 104, 0.6), inset 0 -2px 0 rgba(0,0,0,0.08);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.plan-pro-cta:hover { transform: translateY(-1px); filter: brightness(1.04); }
.plan-pro-cta svg { color: #ffd83a; flex: none; }
.plan-pro-cta-sub { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 6px; }

/* ── Trial / Grant: pricing-cards mensual vs anual ────────────────── */
.plan-pro-pricing {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  width: 100%; max-width: 460px; margin: 0 auto;
}
@media (max-width: 560px) { .plan-pro-pricing { grid-template-columns: 1fr; max-width: 320px; } }
.plan-pro-pick {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 14px 12px;
  border-radius: 12px;
  background: var(--card);
  border: 1.5px solid var(--border);
  cursor: pointer; font-family: inherit; text-align: left;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, filter .14s ease;
}
.plan-pro-pick:hover {
  transform: translateY(-2px);
  border-color: rgba(13, 150, 104, 0.55);
  box-shadow: 0 10px 22px -10px rgba(13, 150, 104, 0.4);
}
.plan-pro-pick-period {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .6px;
}
.plan-pro-pick-price {
  font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.05;
  letter-spacing: -0.02em; margin-top: 2px;
}
.plan-pro-pick-per { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 3px; }
.plan-pro-pick-cta {
  font-size: 11.5px; font-weight: 700; color: var(--primary, #14678b);
  margin-top: 6px;
}
.plan-pro-pick-featured {
  border-color: transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg, var(--primary, #14678b) 0%, #0d9668 60%, #d4a017 100%) border-box;
  box-shadow: 0 8px 22px -10px rgba(13, 150, 104, 0.45);
}
.plan-pro-pick-featured .plan-pro-pick-cta { color: #0d9668; }
.plan-pro-pick-badge {
  position: absolute; top: -10px; right: 12px;
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #14678b 0%, #0d9668 100%);
  color: #fff; padding: 3px 10px; border-radius: 10px;
  font-size: 10px; font-weight: 800; letter-spacing: .4px;
  box-shadow: 0 4px 10px -3px rgba(13, 150, 104, 0.55);
}
.plan-pro-pick-badge svg { color: #ffd83a; }
.plan-pro-upsell {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 12px 14px; border-radius: 10px;
  background: rgba(255, 200, 80, 0.10);
  border: 1px solid rgba(255, 200, 80, 0.45);
  font-size: 13px; color: var(--text); line-height: 1.45;
}
.plan-pro-upsell-icon { font-size: 18px; flex: none; }

/* ── Beneficios PRO — 5 secciones temáticas con "marketing extremo" ── */
.plan-pro-benefits { margin-bottom: 22px; }
.plan-pro-benefits-head { margin-bottom: 16px; text-align: center; }
.plan-pro-benefits-head h3 {
  margin: 0 0 4px; font-size: 19px; font-weight: 800; color: var(--text);
  letter-spacing: -0.01em;
}
.plan-pro-benefits-head h3::before {
  content: "⭐"; margin-right: 8px;
}
.plan-pro-benefits-head p { margin: 0; font-size: 13px; color: var(--muted); }
.plan-pro-benefits-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 820px) { .plan-pro-benefits-grid { grid-template-columns: 1fr; } }
.plan-pro-bsec {
  padding: 18px 20px; border-radius: 12px;
  background: var(--soft, #f6fafc); border: 1px solid var(--border);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.plan-pro-bsec:hover {
  transform: translateY(-1px);
  border-color: rgba(13, 150, 104, 0.4);
  box-shadow: 0 6px 18px -10px rgba(13, 150, 104, 0.35);
}
.plan-pro-bsec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.plan-pro-bsec-icon { font-size: 22px; line-height: 1; }
.plan-pro-bsec-title {
  font-size: 14.5px; font-weight: 800; color: var(--text);
  letter-spacing: -0.01em;
}
.plan-pro-bsec-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.plan-pro-bsec-list li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; line-height: 1.45; color: var(--text);
}
.plan-pro-bsec-list li strong { font-weight: 700; }
.plan-pro-bsec-check {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  background: rgba(13, 150, 104, 0.14); color: #0d9668;
}

/* ── "¿Qué pasa si cancelas?" — collapsible con aversión a la pérdida ── */
.plan-pro-cancel {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); padding: 0;
}
.plan-pro-cancel > summary {
  list-style: none; cursor: pointer;
  padding: 14px 18px; font-size: 13.5px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; justify-content: space-between;
}
.plan-pro-cancel > summary::-webkit-details-marker { display: none; }
.plan-pro-cancel > summary::after {
  content: "▾"; color: var(--muted); font-size: 12px;
  transition: transform .2s ease;
}
.plan-pro-cancel[open] > summary::after { transform: rotate(180deg); }
.plan-pro-cancel-body { padding: 0 20px 18px; font-size: 13px; color: var(--text); line-height: 1.55; }
.plan-pro-cancel-body p { margin: 0 0 10px; color: var(--muted); }
.plan-pro-cancel-body p strong { color: var(--text); }
.plan-pro-cancel-body ul { margin: 0 0 10px; padding-left: 22px; }
.plan-pro-cancel-body li { margin-bottom: 6px; color: var(--text); }
.plan-pro-cancel-rea {
  margin-top: 10px !important; padding: 10px 12px;
  background: rgba(13, 150, 104, 0.08); border-radius: 8px;
  color: var(--text) !important;
}

/* FAQ */
.plans-faq {
  background: var(--soft, #f6fafc); border: 1px solid var(--border);
  border-radius: 14px; padding: 22px 24px;
}
.plans-faq h3 {
  margin: 0 0 16px; font-size: 15px; font-weight: 700; color: var(--text);
}
.plans-faq-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px;
}
@media (max-width: 720px) { .plans-faq-grid { grid-template-columns: 1fr; } }
.plans-faq-q {
  font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 4px;
}
.plans-faq-a { font-size: 13px; color: var(--muted); line-height: 1.55; }
.plans-faq-a strong { color: var(--text); }
.form-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-xs);
}
.form-card h2 {
  font-size: 15.5px; font-weight: 700; margin-bottom: 16px;
  color: var(--text); letter-spacing: -0.01em;
}

/* ── Variante colapsable: el <summary> es la "tarjeta cerrada" (título +
   resumen + lápiz). El contenido cae debajo cuando se abre. */
details.form-card-collapsible { padding: 0; }
details.form-card-collapsible > summary.form-card-summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  user-select: none;
  border-radius: var(--radius-lg);
  transition: background .12s;
}
details.form-card-collapsible > summary.form-card-summary::-webkit-details-marker { display: none; }
details.form-card-collapsible > summary.form-card-summary:hover {
  background: rgba(20,103,139,.04);
}
details.form-card-collapsible[open] > summary.form-card-summary {
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-bottom: 0;
}
/* Despliegue: el contenido (form-grid / hint / textarea) hace slide+fade
   al abrirse. Reusa la misma curva spring que nm-details-unfold del
   catálogo para coherencia. */
details.form-card-collapsible[open] > .form-grid,
details.form-card-collapsible[open] > .form-card-hint,
details.form-card-collapsible[open] > .form-card-textarea {
  animation: form-card-unfold .3s cubic-bezier(.34, 1.4, .55, 1);
  transform-origin: top center;
}
@keyframes form-card-unfold {
  0%   { opacity: 0; transform: translateY(-8px) scaleY(.96); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}
/* El chevron del lápiz también rota suavemente. */
details.form-card-collapsible > summary.form-card-summary .fcs-edit-icon {
  transition: background .15s, transform .2s cubic-bezier(.34, 1.4, .55, 1), color .15s;
}
details.form-card-collapsible[open] > summary.form-card-summary .fcs-edit-icon {
  transform: rotate(12deg);
}
.fcs-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fcs-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.fcs-preview {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fcs-preview.is-empty {
  font-style: italic;
  opacity: .75;
}
.fcs-edit-icon {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(20,103,139,.08);
  color: var(--accent, #14678b);
  transition: background .12s, transform .12s;
}
details.form-card-collapsible > summary.form-card-summary:hover .fcs-edit-icon {
  background: rgba(20,103,139,.16);
  transform: scale(1.05);
}
details.form-card-collapsible[open] > summary.form-card-summary .fcs-edit-icon {
  background: var(--accent, #14678b);
  color: #fff;
}
/* Contenedor del contenido editable (form-grid o textarea). */
details.form-card-collapsible > .form-grid,
details.form-card-collapsible > .form-card-hint,
details.form-card-collapsible > .form-card-textarea {
  margin: 16px 22px 22px;
}
details.form-card-collapsible > .form-card-hint + .form-grid,
details.form-card-collapsible > .form-card-hint + .form-card-textarea {
  margin-top: 0;
}
.form-card-textarea {
  width: calc(100% - 44px);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px; color: var(--text); background: var(--card);
  font-family: inherit;
  outline: none;
  resize: vertical;
  min-height: 90px;
  box-sizing: border-box;
}
.form-card-textarea:focus { border-color: var(--accent, #14678b); }
.avatar-upload { text-align: center; margin-bottom: 24px; position: relative; display: inline-block; }
.avatar-big {
  width: 80px; height: 80px; border-radius: 50%; background: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700; color: #fff;
}
.avatar-cam-btn {
  position: absolute; bottom: 0; right: 0;
  width: 26px; height: 26px; border-radius: 50%; background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 2px solid #fff;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-field label { font-size: 12px; font-weight: 500; color: var(--muted); }
.form-field input, .form-field select {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; color: var(--text); background: var(--card); outline: none;
  transition: border .15s;
}
.form-field input:focus, .form-field select:focus { border-color: var(--primary); }
.session-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.session-item:last-child { border-bottom: none; }
.session-icon {
  width: 40px; height: 40px; border-radius: 10px; background: var(--bg);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.session-info { flex: 1; }
.session-info strong { font-size: 13.5px; display: block; }
.session-info small  { font-size: 12px; color: var(--muted); }
.session-time { font-size: 12px; color: var(--muted); }

.account-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px; margin-bottom: 16px;
}
.account-card h3 { font-size: 13px; font-weight: 700; margin-bottom: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.account-switch-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--border); margin-bottom: 8px;
  cursor: pointer; transition: border-color .15s;
}
.account-switch-item.current { border-color: var(--primary); background: var(--primary-lt); }
.account-switch-item:hover:not(.current) { border-color: var(--muted); }
.account-action-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.account-action-item:last-child { border-bottom: none; }
.account-action-item:hover .account-action-text { color: var(--primary); }
.account-action-icon {
  width: 36px; height: 36px; border-radius: 10px; background: var(--bg);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.account-action-icon.danger { background: var(--red-bg); color: var(--red); }
.account-action-text { flex: 1; }
.account-action-text strong { font-size: 13.5px; display: block; }
.account-action-text small  { font-size: 12px; color: var(--muted); }

/* ─── Activity timeline ──────────────────────────── */
.activity-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.activity-item:last-child { border-bottom: none; }
.activity-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.activity-body { flex: 1; }
.activity-body strong { display: block; font-size: 13px; font-weight: 600; }
.activity-body small { font-size: 12px; color: var(--muted); }
.activity-date { font-size: 11px; color: var(--light); white-space: nowrap; }

/* ─── Material category image ────────────────────── */
.mat-img {
  width: 36px; height: 36px; border-radius: 8px; object-fit: cover;
  background: var(--bg); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}

/* ─── Animations ─────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.section-view.active { animation: fadeIn .2s ease; }
.detail-panel { transition: opacity .2s ease; }

/* ─── Overflow fix for config ────────────────────── */
#sec-configuracion .config-body, #sec-micuenta .account-layout { overflow-y: auto; }

/* ─── Scrollbar global ───────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ═══════════════════════════════════════════════════
   MODO OSCURO PRESULINK — azul tinta premium (NO negro puro)
   Los tokens base ya estan definidos arriba en html[data-theme="dark"].
   Esta seccion afina elementos especificos para el modo dark.
   ═══════════════════════════════════════════════════ */

/* Body/fondo oscuro */
html[data-theme="dark"] body {
  background: var(--bg);
}

/* Layout oscuro */
html[data-theme="dark"] .saas-layout,
html[data-theme="dark"] .saas-wrapper {
  background: var(--bg);
}

/* Sidebar flotante oscuro */
html[data-theme="dark"] .sidebar {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 6px 22px rgba(0,0,0,.4);
}
html[data-theme="dark"] .sidebar-header {
  border-bottom-color: #232638;
}
html[data-theme="dark"] .sidebar-footer {
  border-top-color: #232638;
}

/* Nav items oscuros (verde PRESULINK unificado) */
html[data-theme="dark"] .nav-item { color: var(--muted); }
html[data-theme="dark"] .nav-item:hover { background: var(--surface-2); color: var(--text); }
html[data-theme="dark"] .nav-item.active {
  background: var(--primary-bg);
  color: var(--brand-green);
}

/* Project badge oscuro */
html[data-theme="dark"] .project-badge { background: var(--surface-2); }
html[data-theme="dark"] .user-btn:hover { background: var(--surface-2); }

/* Panel derecho oscuro (app.html) */
html[data-theme="dark"] .detail-panel {
  background: var(--card);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}

/* Tablas y cards oscuras */
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .data-table-wrap,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .account-card {
  background: var(--card); border-color: var(--border);
}
html[data-theme="dark"] .data-table thead th {
  background: var(--surface-2); color: var(--muted);
  border-bottom-color: var(--border);
}
html[data-theme="dark"] .data-table tbody tr { border-bottom-color: var(--border-soft); }
html[data-theme="dark"] .data-table tbody tr:hover { background: var(--surface-2); }
html[data-theme="dark"] .data-table tbody tr.selected { background: var(--primary-bg); }

/* Inputs oscuros */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--surface-2); border-color: var(--border); color: var(--text);
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px rgba(22, 199, 132, 0.15);
  outline: none;
}
html[data-theme="dark"] .search-box { background: #24283a; border-color: var(--border); }
html[data-theme="dark"] .search-box input { background: transparent; }

/* Botones oscuros */
html[data-theme="dark"] .saas-layout .btn-ghost,
html[data-theme="dark"] .saas-wrapper .btn-ghost {
  background: #24283a; border-color: var(--border); color: var(--text);
}
html[data-theme="dark"] .saas-layout .btn-ghost:hover { background: #2c3044; }

/* Tabs y config oscuros */
html[data-theme="dark"] .cat-tabs { background: #24283a; }
html[data-theme="dark"] .cat-tab.active { background: var(--card); }
html[data-theme="dark"] .tabs { border-bottom-color: var(--border); }
html[data-theme="dark"] .config-section { border-color: var(--border); }
html[data-theme="dark"] .session-item { background: #24283a; }

/* Sidebar reveal button oscuro */
html[data-theme="dark"] .sidebar-reveal-btn {
  background: var(--card); border-color: var(--border); color: var(--text);
}


/* Wizard scroll area en oscuro */
html[data-theme="dark"] .wizard-scroll-area { background: #0d0f18; }
html[data-theme="dark"] .main-area { background: transparent; }

/* ═══════════════════════════════════════════════════
   WIZARD DARK MODE — presupuesto.html
   ═══════════════════════════════════════════════════ */

/* Variables del wizard en dark */
html[data-theme="dark"] {
  --line: #2c3044;
  --soft: #191c2a;
}
html[data-theme="dark"] .wizard-panel,
html[data-theme="dark"] .wizard-scroll-area {
  --primary:        #3fb3cf;
  --primary-strong: #2d9ab5;
  --accent:         #1ecf8a;
}

/* Fondo base */
html[data-theme="dark"] body { background: #11131c; color: #e2e6f0; }

/* Cards del wizard */
html[data-theme="dark"] .wizard-panel .card,
html[data-theme="dark"] .app-shell .card {
  background: #1c1f2d;
  border-color: #2c3044;
}

/* Hero tag (REFORMA JUMA…) */
html[data-theme="dark"] .hero .tag {
  background: #162535;
  border-color: #2a4a63;
  color: #3fb3cf;
}

/* Datetime badge */
html[data-theme="dark"] .datetime-badge {
  background: #1c1f2d;
  border-color: #2c3044;
  color: #8892a8;
}

/* Stepper */
html[data-theme="dark"] .stepper li {
  background: #191c2a;
  border-color: #2c3044;
  color: #8892a8;
}
html[data-theme="dark"] .stepper li .step-num {
  background: #24283a;
  color: #8892a8;
}
html[data-theme="dark"] .stepper li.active {
  background: #162535;
  border-color: #2a4a63;
  color: #3fb3cf;
}
html[data-theme="dark"] .stepper li.active .step-num {
  background: #3fb3cf;
  color: #0d1a22;
}
html[data-theme="dark"] .stepper li.done {
  background: #0d2218;
  border-color: #1a4535;
  color: #1ecf8a;
}
html[data-theme="dark"] .stepper li.done .step-num {
  background: #1ecf8a;
  color: #071510;
}

/* Option cards (selección de zona, tipo, acción…) */
html[data-theme="dark"] .option-card {
  background: #1c1f2d;
  border-color: #2c3044;
}
html[data-theme="dark"] .option-card:hover {
  background: #222638;
  border-color: #3a4a60;
}
html[data-theme="dark"] .option-card.selected {
  background: #162535;
  border-color: #2a4a63;
}
html[data-theme="dark"] .option-card.selected small { color: #7aacbf; }

/* Field group (grupo de medidas) */
html[data-theme="dark"] .field-group {
  background: #191c2a;
  border-color: #2c3044;
}
html[data-theme="dark"] .field-group h3 { color: #c8d4e0; }
html[data-theme="dark"] .field label { color: #8892a8; }

/* Checkbox inline (condiciones) */
html[data-theme="dark"] .checkbox-inline {
  background: #191c2a;
  border-color: #2c3044;
  color: #c8d4e0;
}
html[data-theme="dark"] .checkbox-inline.selected {
  background: #162535;
  border-color: #2a4a63;
}

/* Inputs number y select del wizard */
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] select {
  background: #191c2a;
  border-color: #2c3044;
  color: #e2e6f0;
}

/* Zone autofill */
html[data-theme="dark"] .zone-autofill {
  background: #162535;
  border-color: #2a4a63;
  color: #8ab8cc;
}

/* Flow map (presupuesto detallado m²) */
html[data-theme="dark"] .m2-window .flow-map { background: #162535; }

/* Ghost button wizard */
html[data-theme="dark"] .btn-ghost {
  background: #24283a;
  color: #c8d4e0;
}

/* KPI grid del panel derecho */
html[data-theme="dark"] .kpi-grid article {
  background: #191c2a;
  border-color: #2c3044;
}

/* Info chip */
html[data-theme="dark"] .info-chip {
  background: #162535;
  border-color: #2a4a63;
}
html[data-theme="dark"] .info-chip::after {
  background: #1c1f2d;
  border-color: #2c3044;
  color: #e2e6f0;
}

/* Conditions grid labels */
html[data-theme="dark"] .conditions-grid label {
  background: #191c2a;
  border-color: #2c3044;
  color: #c8d4e0;
}
html[data-theme="dark"] .conditions-grid label.selected {
  background: #162535;
  border-color: #2a4a63;
}

/* Side panel flotante (Resumen en vivo) */
html[data-theme="dark"] .side-panel {
  background: #1c1f2d !important;
  border-color: #2c3044 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.4), 0 6px 22px rgba(0,0,0,.5) !important;
}
html[data-theme="dark"] .side-panel > .card,
html[data-theme="dark"] .side-panel > section.card,
html[data-theme="dark"] .side-panel > .sticky,
html[data-theme="dark"] .side-panel > .time-card {
  background: transparent !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .side-panel > .time-card {
  border-top-color: #2c3044 !important;
}

/* Tabla del resultado */
html[data-theme="dark"] .table { border-color: #2c3044; }
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td { border-bottom-color: #2c3044; color: #c8d4e0; }
html[data-theme="dark"] .table th { background: #24283a; color: #8892a8; }

/* Breakdown */
html[data-theme="dark"] .breakdown { border-color: #2c3044; }
html[data-theme="dark"] .breakdown div { border-bottom-color: #2c3044; color: #c8d4e0; }

/* Scope sheet (alcance de obra) */
html[data-theme="dark"] .scope-sheet {
  background: #191c2a;
  border-color: #2c3044;
}
html[data-theme="dark"] .scope-card {
  background: linear-gradient(180deg, #1c1f2d 0%, #1a1e2d 100%);
  border-color: #2c3044;
}
html[data-theme="dark"] .scope-metrics {
  background: #151825;
  border-top-color: #2c3044;
}
html[data-theme="dark"] .scope-metric-row { border-bottom-color: #2c3044; }
html[data-theme="dark"] .scope-metric-label,
html[data-theme="dark"] .scope-metrics span { color: #8892a8; }
html[data-theme="dark"] .scope-metric-value,
html[data-theme="dark"] .scope-metrics strong { color: #3fb3cf; }

/* Selección de modo (Presupuesto Rápido / Detallado) */
html[data-theme="dark"] .mode-card,
html[data-theme="dark"] [class*="mode-"] .card {
  background: #1c1f2d;
  border-color: #2c3044;
}

/* ─── Tabla en modo "tarjetas" (sección Presupuestos) ───
   Estandarizado al verde JUMA usado en el wizard "Nuevo presupuesto":
   - hover:    elevación + sombra fría tenue
   - selected: relleno verde claro + borde verde + sombra verde
   - active:   pequeño scale-down (efecto "click sólido")
*/
:root {
  --juma-accent: #15986c;
  --juma-accent-soft: #d4f5e7;
  --juma-accent-border: rgba(25, 166, 119, 0.72);
}

/* ─── Filtro por tipo (Presupuestos guardados y LINKS presupuesto) ─── */
.budget-type-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 28px;          /* alinea con .stats-row y .content-body */
  margin: 0 0 16px;
}
.btf-btn {
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card); color: var(--muted);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform .08s;
}
.btf-btn:hover { background: var(--surface-2); color: var(--text); }
.btf-btn:active { transform: scale(.97); }
.btf-btn.btf-active {
  background: var(--brand-green-dark, #0e8f68);
  border-color: var(--brand-green-dark, #0e8f68);
  color: #fff;
}
html[data-theme="dark"] .btf-btn { background: #24283a; }
html[data-theme="dark"] .btf-btn:hover { background: #2c3044; }

.data-table-cards {
  border-collapse: separate;
  border-spacing: 0 10px;
}
.data-table-cards thead th {
  border-bottom: none;
  padding-bottom: 4px;
}
.data-table-cards tbody tr {
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 6px 12px rgba(11, 42, 67, 0.06);
  transition: transform .22s ease, box-shadow .28s ease, background .28s ease;
  cursor: pointer;
}
.data-table-cards tbody tr td {
  border-top: 1px solid rgba(169, 190, 210, 0.45);
  border-bottom: 1px solid rgba(169, 190, 210, 0.45);
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(245,249,255,0.93) 100%);
  transition: background .28s ease, border-color .28s ease;
}
.data-table-cards tbody tr td:first-child {
  border-left: 1px solid rgba(169, 190, 210, 0.45);
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  padding-left: 18px;
}
.data-table-cards tbody tr td:last-child {
  border-right: 1px solid rgba(169, 190, 210, 0.45);
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  padding-right: 18px;
}
.data-table-cards tbody tr:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(11, 49, 77, 0.13), 0 4px 10px rgba(11, 49, 77, 0.07);
}
.data-table-cards tbody tr:hover td {
  border-color: rgba(98, 136, 164, 0.58);
}
.data-table-cards tbody tr:active,
.data-table-cards tbody tr.is-pressed {
  transform: scale(0.985) !important;
  box-shadow: 0 1px 4px rgba(11, 49, 77, 0.10) !important;
  transition: transform .11s cubic-bezier(.4, 0, .2, 1),
              box-shadow .11s cubic-bezier(.4, 0, .2, 1) !important;
}

/* ─── Press / pulsación táctil global ─────────────────────────
   Una sola regla para todas las tarjetas clicables del dashboard.
   La clase .is-pressed la añade un helper JS en mousedown durante
   ~220ms — garantiza que el efecto se ve incluso en clicks rápidos
   donde :active del navegador apenas pinta un frame.
   La curva cubic-bezier(.4, 0, .2, 1) es Material standard easing —
   más fluida que ease-out clásico, sin parecer mecánica. */
.tariff-card:active,
.tariff-card.is-pressed,
.bp-card:active,
.bp-card.is-pressed,
.cs-card:active,
.cs-card.is-pressed,
.option-card.is-pressed {
  transform: scale(0.97) !important;
  box-shadow: 0 1px 4px rgba(11, 49, 77, 0.10) !important;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1),
              box-shadow .22s cubic-bezier(.4, 0, .2, 1) !important;
}
.data-table-cards tbody tr.selected {
  box-shadow: 0 16px 30px rgba(16, 117, 90, 0.18);
}
.data-table-cards tbody tr.selected td {
  background: var(--juma-accent-soft);
  border-color: var(--juma-accent-border);
}
.data-table-cards tbody tr { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════════
   LISTADO DE CLIENTES — tarjetas propias (no la tabla compartida)
   Avatar a la izquierda · columna de datos (nombre / contacto /
   píldoras / fila de botones). Todo redondeado, espaciado holgado.
   ═══════════════════════════════════════════════════════════════ */
.cust-cards { display: flex; flex-direction: column; gap: 10px; }
.cust-cards-msg {
  text-align: center; color: var(--muted);
  padding: 40px; font-size: 13.5px;
}
.cust-card {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(245,249,255,0.93) 100%);
  border: 1px solid rgba(169, 190, 210, 0.45);
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(11, 42, 67, 0.05);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .26s ease, border-color .26s ease, background .26s ease;
}
.cust-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(11, 49, 77, 0.12), 0 3px 8px rgba(11, 49, 77, 0.06);
  border-color: rgba(98, 136, 164, 0.58);
}
.cust-card:active,
.cust-card.is-pressed {
  transform: scale(0.99);
  box-shadow: 0 1px 4px rgba(11, 49, 77, 0.10);
  transition: transform .11s cubic-bezier(.4,0,.2,1), box-shadow .11s cubic-bezier(.4,0,.2,1);
}
.cust-card.selected {
  background: var(--juma-accent-soft);
  border-color: var(--juma-accent-border);
  box-shadow: 0 12px 24px rgba(16, 117, 90, 0.16);
}
.cust-card-avatar {
  width: 60px; height: 60px;
  flex-shrink: 0; align-self: flex-start; margin-top: 2px;
}
.cust-card-avatar .entity-avatar { font-size: 24px; }   /* fallback de letra */
/* Columna de datos — ocupa todo el ancho libre, filas con aire */
.cust-card-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.cust-card-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cust-card-name {
  font-size: 15.5px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
/* Etiqueta de tipo — píldora totalmente redondeada */
.cust-tag {
  flex-shrink: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .2px;
  padding: 2px 10px; border-radius: 999px;
  text-transform: uppercase;
}
.cust-tag-particular { background: #eff6ff; color: #2563eb; }
.cust-tag-empresa    { background: #fffbeb; color: #b45309; }
/* Origen del cliente: captado de un lead vs creado a mano */
.cust-tag-lead   { background: rgba(22, 199, 132, 0.13); color: var(--brand-green-dark, #0e8f68); }
.cust-tag-manual { background: rgba(120, 145, 170, 0.13); color: var(--muted); }
.cust-card-meta {
  font-size: 11.5px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: auto;   /* fechas alineadas a la derecha de la línea del nombre */
}
/* Línea de contacto */
.cust-card-contact {
  font-size: 13px; color: var(--muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  line-height: 1.35;
}
.cust-card-dot { color: var(--border); margin: 0 2px; }
.cust-card-nodata { font-style: italic; }
/* Píldoras de contadores — redondeadas, sin cuadrícula */
.cust-card-pills {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
}
.cust-pill {
  font-size: 11.5px; color: var(--muted);
  padding: 4px 12px; border-radius: 999px;
  background: rgba(120, 145, 170, 0.11);
  white-space: nowrap;
}
.cust-pill b { color: var(--text); font-weight: 800; font-size: 13px; }
.cust-pill-money { background: rgba(22, 199, 132, 0.11); }
.cust-pill-money b { color: var(--brand-green-dark, #0e8f68); }
/* Fila de botones — horizontal, agrupada a la derecha de la tarjeta */
.cust-card-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 3px;
  justify-content: flex-end;
}
@media (max-width: 600px) {
  .cust-card { padding: 14px 16px; gap: 12px; }
  .cust-card-actions { justify-content: flex-start; }
  .cust-card-meta { margin-left: 0; }
}
html[data-theme="dark"] .cust-card {
  background: linear-gradient(180deg, rgba(28,31,45,0.96) 0%, rgba(36,40,58,0.94) 100%);
  border-color: var(--border, #2c3044);
}
html[data-theme="dark"] .cust-card:hover { border-color: #3a4060; }
html[data-theme="dark"] .cust-card.selected {
  background: linear-gradient(180deg, rgba(13,34,24,0.96) 0%, rgba(26,69,53,0.94) 100%);
  border-color: #1a4535;
}
html[data-theme="dark"] .cust-pill { background: rgba(255,255,255,0.07); }
html[data-theme="dark"] .cust-pill-money { background: rgba(22,199,132,0.13); }
html[data-theme="dark"] .cust-tag-particular { background: #1e293b; color: #93c5fd; }
html[data-theme="dark"] .cust-tag-empresa    { background: #2c2410; color: #fcd34d; }
html[data-theme="dark"] .cust-tag-lead   { background: rgba(22,199,132,0.18); color: #4ade80; }
html[data-theme="dark"] .cust-tag-manual { background: rgba(255,255,255,0.08); color: var(--muted); }

/* ─── Animación de entrada al cambiar de sección (mismo timing que el wizard) ─── */
.section-view.active.section-fade-in {
  animation: secFadeIn .34s ease both;
}
.section-view.active.section-fade-in > * {
  animation: secFadeInItem .42s ease both;
}
.section-view.active.section-fade-in > *:nth-child(1) { animation-delay: 0ms; }
.section-view.active.section-fade-in > *:nth-child(2) { animation-delay: 60ms; }
.section-view.active.section-fade-in > *:nth-child(3) { animation-delay: 120ms; }
.section-view.active.section-fade-in > *:nth-child(4) { animation-delay: 180ms; }

@keyframes secFadeIn {
  0%   { opacity: 0; transform: translateY(16px) scale(0.994); }
  100% { opacity: 1; transform: translateY(0)    scale(1);     }
}
@keyframes secFadeInItem {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0);    }
}

/* ─── Filtros: popover y badge contador ─── */
.filter-wrap { position: relative; display: inline-flex; }
.filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 5px; margin-left: 6px;
  background: var(--primary); color: #fff;
  border-radius: 999px;
  font-size: 10px; font-weight: 700; line-height: 1;
}
.filter-popover {
  position: absolute; top: calc(100% + 6px); right: 0;
  z-index: 20;
  width: 260px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(11,33,54,.15), 0 2px 6px rgba(11,33,54,.06);
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  animation: fpIn .15s ease-out;
}
.filter-popover[hidden] { display: none; }
@keyframes fpIn {
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}
.filter-pop-row { display: flex; flex-direction: column; gap: 4px; }
.filter-pop-row label {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px; font-weight: 600;
}
.filter-pop-row input {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px; font-family: inherit;
  background: var(--card); color: var(--text);
}
.filter-pop-row input:focus { outline: none; border-color: var(--primary); }
.filter-pop-actions {
  display: flex; gap: 6px; margin-top: 4px;
}
.filter-pop-actions .btn { flex: 1; justify-content: center; }

/* ─── Budget preview card (panel derecho al click en presupuesto) ─── */
.detail-panel:has(.bp-card) { overflow: hidden; }

.bp-card {
  display: flex; flex-direction: column;
  height: 100%;
  padding: 16px 16px 14px;
  gap: 12px;
  font-size: 13px;
  animation: bpIn .25s ease-out;
}
@keyframes bpIn {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

.bp-card.bp-loading {
  align-items: center; justify-content: center;
}
.bp-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: bpSpin .8s linear infinite;
}
@keyframes bpSpin { to { transform: rotate(360deg); } }

.bp-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px;
}
.bp-head-text { min-width: 0; }
.bp-title {
  font-size: 15px; font-weight: 700; color: var(--text);
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bp-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.bp-badges {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.bp-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  font-size: 11px; font-weight: 600;
  background: var(--bg); color: var(--muted);
  border-radius: 999px;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bp-badge-primary {
  background: var(--primary-bg); color: var(--primary);
}

/* Acciones (movidas arriba) — flex-wrap: wrap impide que botones largos
   creen scroll horizontal en el panel (300px puede no albergar 3 botones
   con texto en una sola fila). */
.bp-actions {
  display: flex; gap: 6px;
  margin-top: -2px;
  flex-wrap: wrap;
}
.bp-actions .btn {
  flex: 1 1 auto; min-width: 0;
  justify-content: center; padding: 7px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bp-actions .bp-delete-btn {
  flex: 0 0 auto; padding: 7px 10px;
  color: var(--red); border-color: var(--red);
}
.bp-actions .bp-delete-btn:hover { background: var(--red-bg); }

/* Mini PDF preview */
.bp-thumb {
  position: relative;
  flex: 1 1 0; min-height: 260px;
  display: block;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #f6f7fa;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.bp-thumb:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(16,185,129,.18);
}
.bp-thumb iframe {
  position: absolute; top: 0; left: 0;
  width: 250%;          /* 1 / 0.40 */
  height: 250%;
  border: 0;
  transform: scale(0.40);
  transform-origin: top left;
  pointer-events: none;
  background: #fff;
}
.bp-thumb-overlay {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(17,24,39,.78); color: #fff;
  font-size: 10.5px; font-weight: 600;
  padding: 4px 8px; border-radius: 6px;
  opacity: 0; transition: opacity .15s;
}
.bp-thumb:hover .bp-thumb-overlay { opacity: 1; }

/* Importe total — fila destacada (no clicable, mint suave) */
.bp-amount-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 10px 14px;
  background: var(--primary-bg);
  border-radius: 10px;
}
.bp-amount-row label {
  font-size: 10.5px; color: var(--primary);
  text-transform: uppercase; letter-spacing: .5px; font-weight: 700;
}
.bp-amount-row strong {
  font-size: 18px; color: var(--primary); font-weight: 800;
  letter-spacing: -.2px;
}

/* Pie 3D + leyenda */
.bp-chart-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px 6px;
}
.bp-chart-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 4px; padding: 0 2px;
}
.bp-chart-subtotal {
  text-transform: none; letter-spacing: 0;
  font-size: 11.5px; color: var(--primary); font-weight: 700;
}
.bp-chart-body {
  display: grid; grid-template-columns: 130px 1fr; gap: 10px;
  align-items: center;
}
.bp-chart-body canvas {
  width: 100%; height: auto; max-width: 130px;
}
.bp-legend {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.bp-leg-item {
  display: grid; grid-template-columns: 8px 1fr auto; gap: 6px;
  align-items: center;
  font-size: 11px;
}
.bp-leg-item i {
  width: 8px; height: 8px; border-radius: 2px; display: block;
}
.bp-leg-label {
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.bp-leg-item b { color: var(--muted); font-weight: 600; font-size: 10.5px; }
.bp-leg-empty { color: var(--muted); font-size: 11px; padding: 6px; }

/* ─── Resumen cliente / autopresupuesto (panel derecho) ─── */
.cs-card {
  gap: 8px;
  overflow-y: auto;
}
.cs-card::-webkit-scrollbar { width: 4px; }
.cs-card::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.cs-kpis {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.cs-kpi {
  background: var(--bg);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
  border: none;
  text-align: left;
  font-family: inherit;
}
.cs-kpi label {
  font-size: 10.5px; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px;
}
.cs-kpi strong {
  font-size: 16px; color: var(--text); font-weight: 700;
}
.cs-kpi-action {
  cursor: pointer;
  background: linear-gradient(140deg, var(--brand-green) 0%, var(--brand-green-dark) 100%);
  border: 1px solid rgba(14, 143, 104, 0.30);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.cs-kpi-action label,
.cs-kpi-action strong { color: #fff !important; }
.cs-kpi-action label { opacity: .85; }
.cs-kpi-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(12, 81, 97, 0.25);
}

/* Lista de presupuestos recientes */
.cs-section-budgets {
  flex: 1 1 0;
  min-height: 120px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cs-budgets-list {
  flex: 1 1 0;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 2px;
}
.cs-budgets-list::-webkit-scrollbar { width: 4px; }
.cs-budgets-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.cs-budget-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color .12s, box-shadow .12s;
}
.cs-budget-item:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(16,185,129,.12);
}
.cs-bi-text { min-width: 0; flex: 1; }
.cs-bi-title {
  font-size: 12.5px; color: var(--text); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-bi-date { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.cs-bi-total {
  font-size: 13px; font-weight: 700; color: var(--primary); white-space: nowrap;
}
.cs-empty-block {
  padding: 14px 10px;
  text-align: center;
  font-size: 12px; color: var(--muted);
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 8px;
}

/* Acciones de fila (clientes y otros): apretadas */
.row-actions .btn-icon { padding: 4px 6px; }
.row-actions .btn-icon + .btn-icon { margin-left: 2px; }

/* ─── Status badges autopresupuesto ─── */
.ab-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
}
.ab-status-pending        { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.ab-status-opened         { background: #e0f2fe; color: #075985; border: 1px solid #7dd3fc; }
.ab-status-lead_captured  { background: #f3eefe; color: #6d28d9; border: 1px solid #ddd6fe; }
.ab-status-completed      { background: rgba(22, 199, 132, 0.10); color: var(--brand-green-dark); border: 1px solid rgba(22, 199, 132, 0.30); }
.ab-status-expired        { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* ─── Tarjeta del lead en el panel de autopresupuestos ───
   Muestra nombre + teléfono clicable + email + acciones rápidas
   (WhatsApp / Crear cliente). Diseñada para que el dueño pueda contactar
   al lead en uno o dos clics sin tener que copiar el teléfono. */
.cs-lead-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(22, 199, 132, 0.08) 0%, var(--surface-2) 100%);
  border: 1px solid rgba(22, 199, 132, 0.20);
  border-radius: var(--radius);
}
.cs-lead-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 17px;
  flex-shrink: 0;
}
.cs-lead-body { flex: 1; min-width: 0; }
.cs-lead-name {
  font-size: 14.5px; font-weight: 700; color: var(--text);
  line-height: 1.2; margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-lead-contact { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.cs-lead-line {
  font-size: 12.5px; color: var(--accent); font-weight: 600;
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-lead-line:hover { text-decoration: underline; }
.cs-lead-line.cs-lead-mute {
  color: var(--muted); font-weight: 400; font-size: 11px; margin-top: 2px;
}
.cs-lead-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cs-lead-actions .btn { flex: 1 1 auto; min-width: 0; padding: 6px 8px; font-size: 12px; }
.cs-lead-empty {
  padding: 14px; border: 1px dashed var(--border); border-radius: 10px;
  text-align: center; font-size: 12.5px; color: var(--muted); line-height: 1.45;
}

/* URL display + acciones */
.ab-url-section { background: var(--bg); }
.ab-url-display {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 11.5px;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
}
.ab-url-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.ab-url-actions .btn { flex: 1; min-width: 90px; justify-content: center; }

/* Selector tipo de link en modal generación */
.ab-kind-picker {
  display: grid; gap: 8px; margin-bottom: 14px;
}
.ab-kind-option {
  display: flex; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  align-items: flex-start;
}
.ab-kind-option:hover { background: var(--bg); }
.ab-kind-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-bg);
}
.ab-kind-option input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--primary);
  flex-shrink: 0;
}
.ab-kind-content { display: flex; flex-direction: column; gap: 2px; }
.ab-kind-content strong { font-size: 13.5px; color: var(--text); }
.ab-kind-content small { font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* Badge inline para kind en filas */
.ab-kind-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; margin-left: 6px;
  border-radius: 999px;
  text-transform: uppercase; letter-spacing: .3px;
}
.ab-kind-public { background: rgba(22, 199, 132, 0.10); color: var(--brand-green-dark); border: 1px solid rgba(22, 199, 132, 0.30); }
.ab-kind-child  { background: #f3f4f6; color: var(--muted); border: 1px solid var(--border); }
.ab-kind-detallado { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* Modal de confirmación */
.modal-confirm {
  max-width: 400px;
  text-align: center;
  padding: 22px 22px 16px;
}
.modal-confirm-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.modal-confirm-icon.danger {
  background: var(--red-bg);
  color: var(--red);
}
.modal-confirm-title {
  font-size: 17px; font-weight: 700; color: var(--text);
  margin-bottom: 6px;
}
.modal-confirm-msg {
  font-size: 13.5px; color: var(--muted);
  line-height: 1.5;
  margin-bottom: 18px;
}
.modal-confirm-actions {
  display: flex; gap: 10px; justify-content: center;
}
.modal-confirm-actions .btn {
  flex: 1; max-width: 180px;
  justify-content: center;
  padding: 11px 18px !important;
  font-size: 14px !important;
  font-weight: 600;
  border-radius: 12px !important;
}

.btn-danger {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* Toast notification */
.app-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #111827;
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 13.5px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  z-index: 10000;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  max-width: 90vw;
}
.app-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Variante centrada de pantalla (flash de confirmación grande). */
.app-toast.app-toast-center {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%) scale(.94);
  padding: 18px 28px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.app-toast.app-toast-center.visible {
  transform: translate(-50%, -50%) scale(1);
}
.cs-body {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 6px;
}
.cs-body::-webkit-scrollbar { width: 4px; }
.cs-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.cs-section {
  background: var(--bg);
  border-radius: 8px;
  padding: 7px 10px 4px;
}
.cs-section-title {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .6px;
  margin-bottom: 2px;
}

.cs-row {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 6px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
  align-items: baseline;
}
.cs-section .cs-row:last-child { border-bottom: none; }
.cs-row label {
  font-size: 10.5px; color: var(--muted); font-weight: 600;
}
.cs-row > span {
  font-size: 12.5px; color: var(--text); font-weight: 500;
  word-break: break-word; min-width: 0;
}
.cs-empty { color: var(--light); font-weight: 400; }
.cs-link { color: var(--primary); text-decoration: none; font-weight: 600; }
.cs-link:hover { text-decoration: underline; }
.cs-pre { white-space: pre-wrap; }

/* ─── Modal genérico ─── */
.modal-overlay {
  position: fixed; inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: modalFade .15s ease-out;
}
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  width: 100%; max-width: 540px;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: modalIn .2s ease-out;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.modal-title { font-size: 17px; font-weight: 700; color: var(--text); }
.modal-sub   { font-size: 12px; color: var(--muted); margin-top: 2px; }
.modal-close {
  background: none; border: none; cursor: pointer;
  font-size: 22px; color: var(--light); line-height: 1;
  padding: 0; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.modal-close:hover { background: var(--bg); color: var(--text); }
.modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end;
}
.modal-footer .btn { padding: 8px 16px; }
.modal-footer .bp-delete-btn { margin-right: auto; color: var(--red); border-color: var(--red); }
.modal-footer .bp-delete-btn:hover { background: var(--red-bg); }

/* ─── Formulario cliente (modal) ─── */
.cust-form {
  gap: 10px;
}
.cust-form-body {
  display: flex; flex-direction: column; gap: 10px;
}
.cust-form-body::-webkit-scrollbar { width: 4px; }
.cust-form-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.cust-field {
  display: flex; flex-direction: column; gap: 4px;
}
.cust-field span {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px; font-weight: 600;
}
.cust-field span em {
  color: var(--red); font-style: normal; margin-left: 2px;
}
.cust-field input,
.cust-field select,
.cust-field textarea {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px; font-family: inherit;
  background: var(--card); color: var(--text);
  width: 100%;
}
.cust-field input:focus,
.cust-field select:focus,
.cust-field textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}
.cust-field textarea { resize: vertical; min-height: 50px; font-family: inherit; }
.cust-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.cust-row.cust-row-3 {
  grid-template-columns: 70px 1fr 1fr;
}
.cust-form-actions { margin-top: 4px; }

/* ─── Selector de avatar del modal de cliente ─── */
.cust-avatar-block { display: flex; flex-direction: column; gap: 8px; }
.cust-avatar-head { display: flex; align-items: center; gap: 12px; }
.cust-avatar-current {
  box-shadow: 0 0 0 2px var(--primary, #14678b);
  flex-shrink: 0;
}
.cust-avatar-headtext { display: flex; flex-direction: column; gap: 5px; }
.cust-avatar-label {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px; font-weight: 600;
}
.cust-avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
  max-height: 184px; overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2, #f6fafc);
}
.cust-avatar-grid::-webkit-scrollbar { width: 5px; }
.cust-avatar-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.cust-avatar-opt {
  padding: 0; aspect-ratio: 1;
  border: 2px solid transparent; border-radius: 50%;
  background: none; cursor: pointer; overflow: hidden;
  transition: border-color .12s, transform .1s;
}
.cust-avatar-opt img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%;
}
.cust-avatar-opt:hover { transform: scale(1.09); }
.cust-avatar-opt.selected { border-color: var(--primary, #14678b); }
.cust-form-error {
  background: var(--red-bg); color: var(--red);
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
}

/* Pantallas bajitas: ajustar tamaños */
@media (max-height: 900px) {
  .bp-thumb { min-height: 200px; }
  .bp-chart-body { grid-template-columns: 110px 1fr; }
  .bp-chart-body canvas { max-width: 110px; }
}
@media (max-height: 800px) {
  .bp-thumb { min-height: 150px; }
  .bp-chart-body { grid-template-columns: 92px 1fr; gap: 8px; }
  .bp-chart-body canvas { max-width: 92px; }
}
@media (max-height: 720px) {
  .bp-card { padding: 12px 14px 12px; gap: 8px; }
  .bp-thumb { min-height: 110px; }
  .bp-amount-row { padding: 8px 12px; }
  .bp-amount-row strong { font-size: 16px; }
  .bp-chart-card { padding: 6px 8px 4px; }
  .bp-chart-body { grid-template-columns: 80px 1fr; }
  .bp-chart-body canvas { max-width: 80px; }
  .bp-leg-item { font-size: 10.5px; }
}

/* ─── Inicio (Dashboard) ─────────────────────────── */
.dash-period { display: inline-flex; gap: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.dash-period-btn {
  padding: 6px 12px;
  border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--muted); border-radius: 6px;
  transition: background .15s ease, color .15s ease;
}
.dash-period-btn:hover { color: var(--text); }
.dash-period-btn.dash-period-active {
  background: var(--primary); color: #fff;
}

.dash-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 12px 24px 0;
}
.dash-chart-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.dash-chart-title {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.dash-chart-subtotal { font-size: 12px; color: var(--muted); font-weight: 500; }
.dash-chart-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  align-items: center;
}
.dash-chart-body canvas { max-width: 200px; height: auto; }

@media (max-width: 980px) {
  .dash-charts { grid-template-columns: 1fr; }
  .dash-chart-body { grid-template-columns: 160px 1fr; }
  .dash-chart-body canvas { max-width: 160px; }
}

.dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 0 24px 8px;
}
.dash-kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.dash-kpi-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.dash-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
  color: var(--muted);
}
.dash-kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.dash-kpi-foot {
  font-size: 12px;
  color: var(--muted);
  min-height: 16px;
}

.dash-block-title {
  margin: 18px 24px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.dash-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 0 24px 24px;
}
.dash-action {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  text-decoration: none;
  transition: all .15s ease;
}
.dash-action:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(16,185,129,.08);
  transform: translateY(-1px);
}
.dash-action-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: rgba(16,185,129,.1);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dash-action-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-action-title { font-size: 14px; font-weight: 600; color: var(--text); }
.dash-action-sub { font-size: 12px; color: var(--muted); }

.dash-shortcuts {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 0 24px 4px;
}
.dash-shortcut {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: #fff8eb;
  border: 1px solid #f5d77a;
  border-radius: 999px;
  font-size: 13px; color: #7a5c00;
  cursor: pointer; font: inherit;
  transition: background .15s ease;
}
.dash-shortcut:hover { background: #ffeec5; }
.dash-shortcut .dash-shortcut-num {
  font-weight: 700; color: #b07b00;
  background: #ffe39a; padding: 1px 8px; border-radius: 999px;
  font-size: 12px;
}

.dash-recent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 0 24px 24px;
}
.dash-recent-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.dash-recent-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.dash-recent-link {
  background: none; border: none; cursor: pointer;
  font: inherit; color: var(--primary); font-size: 12px;
  padding: 0;
}
.dash-recent-link:hover { text-decoration: underline; }
.dash-recent-body { display: flex; flex-direction: column; }
.dash-recent-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s ease;
}
.dash-recent-row:last-child { border-bottom: 0; }
.dash-recent-row:hover { background: rgba(16,185,129,.04); }
.dash-recent-text { flex: 1; min-width: 0; }
.dash-recent-title {
  font-size: 13px; color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-recent-meta {
  font-size: 11.5px; color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-recent-amount {
  font-size: 13px; font-weight: 700; color: var(--primary);
  white-space: nowrap;
}
.dash-recent-empty {
  padding: 28px 16px;
  text-align: center;
  font-size: 12.5px; color: var(--muted);
}

@media (max-width: 980px) {
  .dash-kpis, .dash-actions { grid-template-columns: repeat(2, 1fr); }
  .dash-recent { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dash-kpis, .dash-actions { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   INICIO v2 — Dashboard CRM (maqueta estática, prefijo .hub-)
   Layout pensado para entrar sin scroll en pantallas ≥ 980px alto
   ═══════════════════════════════════════════════════════════════ */

#sec-inicio { --hub-violet: #a78bfa; --hub-violet-bg: #f3eefe; --hub-green: #16C784; --hub-green-bg: rgba(22, 199, 132, 0.10); --hub-orange: #f59e0b; --hub-orange-bg: #fff7ed; --hub-blue: #3b82f6; --hub-blue-bg: #eff6ff; --hub-red: #ef4444; min-height: 0 !important; padding-bottom: 14px; }
#sec-inicio .page-header { padding: 14px 28px 10px; }
#sec-inicio .page-header-left h1 { font-size: 19px; }
#sec-inicio .page-header-left p { font-size: 12.5px; margin-top: 1px; }
#sec-inicio > .hub-grid,
#sec-inicio > .hub-card,
#sec-inicio > .hub-charts { margin-left: 28px; margin-right: 28px; }
#sec-inicio > .hub-grid:last-child,
#sec-inicio > .hub-card:last-child,
#sec-inicio > .hub-charts:last-child { margin-bottom: 0; }

/* Periodo */
.hub-period { display: inline-flex; gap: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
.hub-period-btn { background: transparent; border: 0; padding: 6px 14px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; transition: all .15s; font-family: inherit; }
.hub-period-btn:hover { color: var(--text); }
.hub-period-active { background: var(--hub-green); color: #fff; }
.hub-period-active:hover { color: #fff; }

/* Card base — paddings reducidos para densidad */
.hub-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.hub-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hub-h2 { font-size: 13.5px; font-weight: 700; color: var(--text); }
.hub-h3 { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.hub-card-link { font-size: 12px; font-weight: 600; color: var(--hub-green); }
.hub-card-link:hover { text-decoration: underline; }

/* Grids principales */
.hub-grid { display: grid; gap: 10px; margin-bottom: 10px; }
.hub-grid-top    { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); }
.hub-grid-top .hub-summary { order: 2; }
.hub-grid-top .hub-agenda  { order: 1; }
.hub-grid-bottom { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

/* ── Resumen / KPIs (5 cards) ───────────────────────────── */
.hub-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.hub-kpi { padding: 9px 9px; border: 1px solid var(--border); border-radius: 11px; background: #fbfcfe; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.hub-kpi-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 1px; }
.hub-kpi-num { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.1; }
.hub-kpi-lbl { font-size: 10.5px; color: var(--muted); font-weight: 500; line-height: 1.25; }

/* "bump" al actualizar una cifra (acompaña al count-up del Inicio) */
@keyframes kpiBump { 0% { transform: scale(1); } 35% { transform: scale(1.13); } 100% { transform: scale(1); } }
.kpi-bump { display: inline-block; animation: kpiBump .45s cubic-bezier(.34,1.56,.64,1); transform-origin: left center; }

/* transición suave de colores al cambiar de tema (solo durante el toggle) */
html.theme-anim, html.theme-anim * {
  transition: background-color .4s ease, border-color .4s ease, color .4s ease, fill .4s ease, box-shadow .4s ease !important;
}
@media (prefers-reduced-motion: reduce) { .kpi-bump { animation: none; } }

/* La cifra estrella (presupuestado este mes) en verde de marca, como el héroe del móvil */
#hubKpiAmount { color: var(--hub-green, #16C784); font-weight: 800; }
.hub-icon-violet { background: var(--hub-violet-bg); color: var(--hub-violet); }
.hub-icon-green  { background: var(--hub-green-bg);  color: var(--hub-green); }
.hub-icon-orange { background: var(--hub-orange-bg); color: var(--hub-orange); }
.hub-icon-blue   { background: var(--hub-blue-bg);   color: var(--hub-blue); }

/* ── Agenda comercial ───────────────────────────── */
.hub-nav-arrows { display: flex; gap: 4px; }
.hub-arrow-btn { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; }
.hub-arrow-btn:hover { background: var(--bg); color: var(--text); }
.hub-agenda-list { list-style: none; display: flex; flex-direction: column; }
.hub-agenda-item { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 12px; padding: 7px 4px; border-bottom: 1px solid var(--border); }
.hub-agenda-item:last-child { border-bottom: 0; padding-bottom: 0; }
.hub-agenda-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(0,0,0,.04); }
.hub-dot-orange { background: var(--hub-orange); }
.hub-dot-violet { background: var(--hub-violet); }
.hub-dot-green  { background: var(--hub-green); }
.hub-dot-blue   { background: var(--hub-blue); }
.hub-agenda-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
.hub-agenda-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.hub-agenda-time { font-size: 11px; font-weight: 700; color: var(--text); background: var(--bg); padding: 3px 9px; border-radius: 999px; }

/* ── Acciones rápidas (3) ───────────────────────────── */
.hub-actions { margin-bottom: 10px; padding: 10px 12px; }
.hub-actions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hub-action { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--card); cursor: pointer; transition: all .15s; font-family: inherit; text-align: left; }
.hub-action:hover { border-color: var(--hub-green); box-shadow: 0 4px 14px rgba(16,185,129,.10); transform: translateY(-1px); }
.hub-action-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hub-action-title { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.25; }
.hub-iconbg-green  { background: var(--hub-green-bg);  color: var(--hub-green); }
.hub-iconbg-violet { background: var(--hub-violet-bg); color: var(--hub-violet); }
.hub-iconbg-orange { background: var(--hub-orange-bg); color: var(--hub-orange); }
.hub-iconbg-blue   { background: var(--hub-blue-bg);   color: var(--hub-blue); }

/* ── Charts row (4 ruedas 3D iguales) ───── */
.hub-charts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.hub-chart { padding: 12px 14px 14px; display: flex; flex-direction: column;
  transition: transform .38s cubic-bezier(.4, 0, .2, 1), box-shadow .38s cubic-bezier(.4, 0, .2, 1);
  transform-origin: center;
}
.hub-chart:hover { transform: scale(1.025); box-shadow: 0 14px 30px rgba(11, 49, 77, 0.13), 0 4px 10px rgba(11, 49, 77, 0.07); }
.hub-chart .hub-h3 { margin-bottom: 0; }
.hub-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.hub-chart-subtotal { font-size: 11px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.hub-chart-subtotal strong { color: var(--text); font-weight: 700; font-size: 12.5px; }

/* Pie 3D canvas */
.hub-pie-wrap { display: flex; justify-content: center; flex-shrink: 0; margin: 2px 0 6px; }
.hub-pie-canvas { width: 100%; max-width: 200px; aspect-ratio: 200 / 150; height: auto; }

.hub-legend { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.hub-legend li { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text); font-weight: 500; }
.hub-legend li strong { margin-left: auto; font-weight: 700; color: var(--text); }
.hub-legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; }
.hub-leg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Tabla "Últimos presupuestos" — mismo formato data-table-cards, compacto ── */
.hub-budgets-tablewrap { width: 100%; }
.hub-budgets-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.hub-budgets-table thead th { padding: 4px 12px 6px; font-size: 10px; }
.hub-budgets-table tbody td { padding: 8px 12px; font-size: 12.5px; }
.hub-budgets-table tbody td:first-child { padding-left: 14px; }
.hub-budgets-table tbody td:last-child  { padding-right: 14px; }
.hub-budgets-table .entity-avatar { width: 28px; height: 28px; font-size: 12px; }
.hub-budgets-table .entity-name   { font-size: 12.5px; }
.hub-budgets-table .bp-badge      { font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 600; }

/* Animación de entrada (stagger) */
@keyframes hubRowEnter {
  0%   { opacity: 0; transform: translateY(8px) scale(.985); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}
.hub-budgets-table tbody tr {
  animation: hubRowEnter .42s cubic-bezier(.16, 1, .3, 1) both;
}
.hub-budgets-table tbody tr:nth-child(1) { animation-delay:  40ms; }
.hub-budgets-table tbody tr:nth-child(2) { animation-delay: 100ms; }
.hub-budgets-table tbody tr:nth-child(3) { animation-delay: 160ms; }
.hub-budgets-table tbody tr:nth-child(4) { animation-delay: 220ms; }
.hub-budgets-table tbody tr:nth-child(5) { animation-delay: 280ms; }

/* Tags genéricos del Inicio (para Hoy, leyendas) */
.hub-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.tag-violet { background: var(--hub-violet-bg); color: #6d28d9; }
.tag-green  { background: var(--hub-green-bg);  color: var(--brand-green-dark); }
.tag-orange { background: var(--hub-orange-bg); color: #b45309; }
.tag-blue   { background: var(--hub-blue-bg);   color: #1d4ed8; }
.tag-gray   { background: #f1f5f9;              color: #475569; }

/* ── Actividad autopresupuestos — cards estilo data-table-cards ─── */
.hub-activity-cards { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.hub-activity-card {
  display: grid; grid-template-columns: 11px 1fr; gap: 10px; align-items: flex-start;
  padding: 9px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(245,249,255,0.93) 100%);
  border: 1px solid rgba(169, 190, 210, 0.45);
  border-radius: 14px;
  box-shadow: 0 6px 12px rgba(11, 42, 67, 0.06);
  transition: transform .22s ease, box-shadow .28s ease, border-color .28s ease;
  cursor: pointer;
}
.hub-activity-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(11, 49, 77, .13), 0 4px 10px rgba(11, 49, 77, .07);
  border-color: rgba(98, 136, 164, 0.58);
}
.hub-activity-card:active,
.hub-activity-card.is-pressed {
  transform: scale(0.985) !important;
  box-shadow: 0 1px 4px rgba(11, 49, 77, 0.10) !important;
  transition: transform .11s cubic-bezier(.4, 0, .2, 1),
              box-shadow .11s cubic-bezier(.4, 0, .2, 1) !important;
}
.hub-act-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; box-shadow: 0 0 0 3px rgba(0,0,0,.04); }
.hub-act-title { font-size: 12px; font-weight: 600; color: var(--text); }
.hub-act-sub { font-size: 10.5px; color: var(--muted); margin-top: 1px; }

/* Animación de entrada (stagger) — coherente con la tabla de Últimos presupuestos */
.hub-activity-cards .hub-activity-card {
  animation: hubRowEnter .42s cubic-bezier(.16, 1, .3, 1) both;
}
.hub-activity-cards .hub-activity-card:nth-child(1) { animation-delay:  40ms; }
.hub-activity-cards .hub-activity-card:nth-child(2) { animation-delay: 100ms; }
.hub-activity-cards .hub-activity-card:nth-child(3) { animation-delay: 160ms; }
.hub-activity-cards .hub-activity-card:nth-child(4) { animation-delay: 220ms; }
.hub-activity-cards .hub-activity-card:nth-child(5) { animation-delay: 280ms; }
.hub-activity-cards .hub-activity-card:nth-child(6) { animation-delay: 340ms; }

/* Responsive */
@media (max-width: 1280px) {
  .hub-kpis { grid-template-columns: repeat(5, 1fr); }
  .hub-charts { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .hub-grid-top, .hub-grid-bottom { grid-template-columns: 1fr; }
  .hub-charts { grid-template-columns: 1fr; }
  .hub-actions-grid { grid-template-columns: repeat(3, 1fr); }
  .hub-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .hub-actions-grid { grid-template-columns: 1fr; }
  .hub-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Cursor pointer en cards de tarta (dan idea de clicable) ─── */
#sec-inicio .hub-chart { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   INICIO v5 — Hero (logo + saludo + CTAs) + KPIs grandes
   + Oportunidades + Próximas citas + Funnel + Timeline
   ═══════════════════════════════════════════════════════════════ */
#sec-inicio > .hub-hero {
  padding: 22px 28px 10px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hub-hero-greet { min-width: 0; flex: 0 1 auto; }

/* Tarjeta "Tu empresa": logo + nombre comercial. Mismo lenguaje que el
 * resto de cards. Tamaño un punto más grande para reafirmar marca. */
.hub-brand-card {
  display: flex; align-items: center; gap: 16px;
  margin-left: auto;          /* separa la marca del saludo, hacia la derecha */
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.hub-brand-logo {
  width: 88px; height: 88px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* Logo de empresa: llena la caja (sin recortar) y sin fondo de color. */
.hub-brand-logo-img {
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}
/* Foto de perfil (Google): sí rellena un círculo. */
.hub-brand-logo-avatar {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--card), 0 2px 8px rgba(11,49,77,.10);
}
/* Solo el fallback de iniciales lleva recuadro de color. */
.hub-brand-logo-initials {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 20px;
  font-size: 36px; font-weight: 800;
  color: var(--hub-green);
  background: var(--hub-green-bg);
}
.hub-brand-text { min-width: 0; }
.hub-brand-name {
  font-size: 22px; font-weight: 800;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 300px;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.hub-hero-actions {
  margin-left: auto;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.hub-hero-actions .btn { white-space: nowrap; }
.hub-hero-actions .hub-period { flex-shrink: 0; }

.hub-hello {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
  line-height: 1.15;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hub-hello-name { color: var(--hub-green); }
.hub-hello-wave {
  display: inline-block;
  font-size: 28px;
  transform-origin: 70% 70%;
  animation: hubWave 2.6s ease-in-out infinite;
}
@keyframes hubWave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
}
.hub-hello-sub {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 500;
  text-transform: capitalize;
}

#sec-inicio > .hub-today {
  margin: 16px 28px 14px;
  padding: 18px 20px 16px;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    var(--card) 0%,
    rgba(22, 199, 132, 0.05) 100%);
  border: 1px solid var(--border);
  box-shadow: 0 4px 18px rgba(11, 49, 77, 0.04);
}
.hub-today-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.hub-today-badge {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--hub-green);
  color: #fff;
}
.hub-today-title {
  font-size: 14px; font-weight: 700; color: var(--text);
  margin: 0;
}

.hub-today-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.hub-today-stat {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.hub-today-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(11, 49, 77, 0.08);
  border-color: var(--hub-green);
}
.hub-today-stat-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hub-today-stat-num {
  font-size: 22px; font-weight: 800;
  color: var(--text); line-height: 1;
  margin-left: auto;
}
.hub-today-stat-lbl {
  font-size: 11.5px; color: var(--muted); font-weight: 600;
  position: absolute;
}
/* La label va debajo del número; rehago con grid para que respire */
.hub-today-stat {
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 11px;
}
.hub-today-stat-icon { grid-row: 1 / span 2; }
.hub-today-stat-num { grid-column: 2; grid-row: 1; margin-left: 0; }
.hub-today-stat-lbl { grid-column: 2; grid-row: 2; position: static; margin-top: 2px; }

.hub-today-stat-citas     .hub-today-stat-icon { background: var(--hub-blue-bg);   color: var(--hub-blue); }
.hub-today-stat-completed .hub-today-stat-icon { background: var(--hub-green-bg);  color: var(--hub-green); }
.hub-today-stat-leads     .hub-today-stat-icon { background: var(--hub-violet-bg); color: var(--hub-violet); }
.hub-today-stat-budgets   .hub-today-stat-icon { background: var(--hub-orange-bg); color: var(--hub-orange); }

.hub-today-next {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--hub-green-bg);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text);
}
.hub-today-next:empty { display: none; }
.hub-today-next-icon { color: var(--hub-green); display: flex; align-items: center; }
.hub-today-next-label { color: var(--muted); font-size: 12px; font-weight: 600; }
.hub-today-next strong { color: var(--text); font-weight: 700; }

.hub-today-events { list-style: none; display: flex; flex-direction: column; gap: 0; }
.hub-today-event {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
}
.hub-today-event:last-child { border-bottom: 0; }
.hub-today-event-dot { width: 9px; height: 9px; border-radius: 50%; }
.hub-today-event-title { color: var(--text); font-weight: 600; }
.hub-today-event-time { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.hub-today-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 14px 4px;
  text-align: center;
  font-style: italic;
}

/* Responsive — el grid de 4 stats colapsa a 2 columnas en pantallas
 * pequeñas. Hero saludo y card HOY se mantienen, solo se reagrupan. */
@media (max-width: 900px) {
  .hub-today-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .hub-today-stats { grid-template-columns: 1fr; }
  .hub-hello { font-size: 22px; }
}

/* ── KPI row v5: 4 cards grandes con icono+label+num lado a lado ── */
#sec-inicio > .hub-kpi-row {
  margin: 8px 28px 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.hub-kpi-card {
  display: flex; align-items: center; gap: 13px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.hub-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(11, 49, 77, 0.08);
  border-color: var(--hub-green);
}
.hub-kpi-card .hub-kpi-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hub-kpi-card .hub-kpi-body { min-width: 0; flex: 1; }
.hub-kpi-card .hub-kpi-lbl {
  font-size: 11.5px; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.hub-kpi-card .hub-kpi-num {
  font-size: 24px; font-weight: 800; color: var(--text);
  line-height: 1.05; margin-top: 4px;
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hub-kpi-blue   .hub-kpi-icon { background: var(--hub-blue-bg);   color: var(--hub-blue); }
.hub-kpi-violet .hub-kpi-icon { background: var(--hub-violet-bg); color: var(--hub-violet); }
.hub-kpi-orange .hub-kpi-icon { background: var(--hub-orange-bg); color: var(--hub-orange); }
.hub-kpi-green  .hub-kpi-icon { background: var(--hub-green-bg);  color: var(--hub-green); }

/* ── Row de 2 columnas (Opps+Agenda, Funnel+Timeline) ─────────── */
.hub-row {
  margin: 0 28px 14px;
  display: grid; gap: 12px;
}
.hub-row-2 {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

/* ── Oportunidades calientes ──────────────────────────────────── */
.hub-card-opps { padding: 14px 16px 12px; }
.hub-opps-tablewrap { overflow-x: auto; }
.hub-opps-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.hub-opps-table thead th { padding: 4px 12px 6px; font-size: 10px; }
.hub-opps-table tbody td { padding: 9px 12px; font-size: 12.5px; vertical-align: middle; }
.hub-opps-table tbody td:first-child { padding-left: 14px; }
.hub-opps-table tbody td:last-child  { padding-right: 14px; }
.hub-opps-table .entity-avatar { width: 32px; height: 32px; font-size: 13px; }
.hub-opps-table .entity-name { font-size: 13px; font-weight: 600; }
.hub-opps-table .entity-sub { font-size: 11px; color: var(--muted); }
.hub-opps-actions { text-align: right; white-space: nowrap; }
.hub-opps-table tbody tr {
  animation: hubRowEnter .42s cubic-bezier(.16,1,.3,1) both;
}
.hub-opps-table tbody tr:nth-child(1) { animation-delay:  40ms; }
.hub-opps-table tbody tr:nth-child(2) { animation-delay:  90ms; }
.hub-opps-table tbody tr:nth-child(3) { animation-delay: 140ms; }
.hub-opps-table tbody tr:nth-child(4) { animation-delay: 190ms; }
.hub-opps-table tbody tr:nth-child(5) { animation-delay: 240ms; }

/* ── Próximas citas (sustituye la versión vieja .hub-agenda-list) ─ */
#sec-inicio .hub-agenda-list {
  list-style: none;
  display: flex; flex-direction: column;
  margin: 0; padding: 0;
}
#sec-inicio .hub-agenda-item {
  display: block;
  padding: 10px 6px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background-color .15s;
  grid-template-columns: none;
}
#sec-inicio .hub-agenda-item:last-child { border-bottom: 0; }
#sec-inicio .hub-agenda-item:hover { background: var(--bg); }
.hub-agenda-when {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11.5px; font-weight: 700;
  color: var(--hub-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hub-agenda-eta {
  flex: 0 0 auto;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.02em; text-transform: none;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
/* Cita inminente (≤ 3 h): píldora resaltada en verde de marca */
.hub-agenda-eta.is-soon {
  color: #fff;
  background: var(--hub-green);
  border-color: var(--hub-green);
}

/* ── Fila enriquecida de "Próximas citas" (avatar + estado + tel) ── */
#sec-inicio .hub-agenda-item.hub-agenda-rich {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 6px;
}
#sec-inicio .hub-agenda-rich .entity-avatar {
  box-shadow: 0 1px 3px rgba(15,23,42,.20);
}
.hub-ag-main { min-width: 0; }
.hub-ag-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.hub-ag-name {
  font-size: 13.5px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hub-ag-meta {
  display: flex; align-items: center; gap: 5px;
  margin-top: 2px;
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden;
}
.hub-ag-when {
  font-size: 10.5px; font-weight: 700; color: var(--hub-blue);
  text-transform: uppercase; letter-spacing: .03em;
}
.hub-ag-sep { opacity: .45; }
.hub-ag-src { display: inline-flex; align-items: center; color: var(--muted); }
.hub-ag-src svg, .hub-ag-status svg { display: block; }
.hub-ag-status {
  display: inline-flex; align-items: center; gap: 3px;
  font-weight: 700; font-size: 10.5px;
}
.hub-ag-status.is-confirmed { color: var(--hub-green); }
.hub-ag-status.is-pending   { color: var(--hub-orange); }
.hub-ag-wa {
  flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #25d366; background: var(--bg);
  border: 1px solid var(--border);
  transition: background .15s, color .15s, transform .1s, border-color .15s;
}
.hub-ag-wa:hover { background: #25d366; color: #fff; border-color: #25d366; transform: scale(1.08); }
.hub-ag-wa-off { color: var(--muted); opacity: .4; cursor: default; }
.hub-ag-wa-off:hover { background: var(--bg); color: var(--muted); border-color: var(--border); transform: none; }
.hub-agenda-who {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 3px;
}
.hub-agenda-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hub-agenda-empty {
  color: var(--muted);
  font-size: 12.5px;
  padding: 18px 6px;
  text-align: center;
}

/* ── Rendimiento de captación · barras full-width con fill proporcional ──
 *  Cada fila ocupa todo el ancho de la tarjeta (rail gris). Dentro vive
 *  un fill de color cuya anchura es proporcional al máximo (Enviados=100%).
 *  El icono + label + número viven SIEMPRE sobre el fill (que garantiza
 *  un ancho mínimo para que el texto quepa). El % vs envío vive a la
 *  derecha sobre el tramo gris del rail. */
.hub-funnel-vis {
  list-style: none;
  margin: 14px 0 4px;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.hub-funnel-band {
  position: relative;
  width: 100%;
  height: 50px;
  background: var(--bg);
  border-radius: 10px;
  overflow: hidden;
  display: flex; align-items: center;
}
.hub-funnel-band-fill {
  display: flex; align-items: center;
  gap: 12px;
  height: 100%;
  width: 0;
  min-width: 220px;
  padding: 0 18px;
  border-radius: 10px;
  color: #fff;
  transition: width .7s cubic-bezier(.16,1,.3,1);
}
.hub-funnel-band-icon {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 7px;
  background: rgba(255,255,255,0.22);
  flex-shrink: 0;
}
.hub-funnel-band-lbl {
  font-size: 13px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  white-space: nowrap;
}
.hub-funnel-band-num {
  font-size: 22px; font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  margin-left: auto;
}
/* El % vs envío vive en el tramo gris del rail (a la derecha del fill).
 *  Posicionado absoluto al borde derecho de la banda. */
.hub-funnel-band-pct {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px; font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.hub-funnel-band-pct:empty { display: none; }

.hub-funnel-band-blue   .hub-funnel-band-fill { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.hub-funnel-band-violet .hub-funnel-band-fill { background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%); }
.hub-funnel-band-orange .hub-funnel-band-fill { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.hub-funnel-band-green  .hub-funnel-band-fill { background: linear-gradient(135deg, #16C784 0%, #059669 100%); }

/* Conversión global · pill en el head */
.hub-funnel-global {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px;
  background: var(--hub-green-bg);
  border-radius: 999px;
}
.hub-funnel-global span {
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hub-funnel-global strong {
  font-size: 14px; font-weight: 800;
  color: var(--hub-green);
}

/* Igualar alturas de las dos cards de cada fila para que no queden
 * huecos entre tarjetas adyacentes. Cada card distribuye su contenido
 * por columna y rellena el espacio sobrante. */
.hub-row-2 { align-items: stretch; }
.hub-card-funnel,
.hub-card-opps,
.hub-card-agenda,
.hub-timeline-card {
  display: flex;
  flex-direction: column;
}
/* Embudo: las 4 bandas se centran verticalmente cuando sobra altura
 * (porque la card del lado es más alta). Sin estirar las bandas en sí. */
.hub-card-funnel .hub-funnel-vis {
  flex: 1;
  justify-content: center;
}
/* Tabla de oportunidades + lista de agenda + timeline: rellenan altura. */
.hub-card-opps .hub-opps-tablewrap,
.hub-card-agenda .hub-agenda-list,
.hub-timeline-card .hub-timeline {
  flex: 1;
}
.hub-card-funnel { padding: 14px 16px 16px; }

/* Responsive del v5 */
@media (max-width: 1100px) {
  #sec-inicio > .hub-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .hub-row-2 { grid-template-columns: 1fr; }
  .hub-funnel-stats { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .hub-funnel-arrow { display: none; }
}
@media (max-width: 640px) {
  #sec-inicio > .hub-kpi-row { grid-template-columns: 1fr; }
  .hub-funnel-stats { grid-template-columns: 1fr 1fr; }
  .hub-hero { flex-direction: column; align-items: flex-start; }
  .hub-hero-actions { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   INICIO v3 — Strip superior (4 cards "qué pasa ahora")
   Cards uniformes y compactas, clicables (botones), con icono +
   número grande + label corta. Cada una lleva a su sección.
   ═══════════════════════════════════════════════════════════════ */
#sec-inicio > .hub-strip {
  margin: 0 28px 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.hub-strip-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform .18s cubic-bezier(.4,0,.2,1),
              box-shadow .18s cubic-bezier(.4,0,.2,1),
              border-color .18s;
}
.hub-strip-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(11, 49, 77, 0.10);
  border-color: var(--hub-green);
}
.hub-strip-card:active { transform: translateY(0); }
.hub-strip-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hub-strip-body { min-width: 0; flex: 1; }
.hub-strip-num {
  font-size: 22px; font-weight: 800; color: var(--text);
  line-height: 1.05; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hub-strip-lbl {
  font-size: 11.5px; color: var(--muted); font-weight: 600;
  margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hub-strip-agenda  .hub-strip-icon { background: var(--hub-blue-bg);   color: var(--hub-blue); }
.hub-strip-next    .hub-strip-icon { background: var(--hub-green-bg);  color: var(--hub-green); }
.hub-strip-pending .hub-strip-icon { background: var(--hub-violet-bg); color: var(--hub-violet); }
.hub-strip-leads   .hub-strip-icon { background: var(--hub-orange-bg); color: var(--hub-orange); }
/* "Próxima cita" suele tener texto más largo en el número (fecha + hora);
 *  bajamos un punto el tamaño para que respire. */
.hub-strip-next .hub-strip-num { font-size: 18px; }

/* KPIs compactos sin iconos enormes (rediseño v3) */
.hub-summary-compact .hub-card-head { margin-bottom: 8px; }
.hub-kpis-compact .hub-kpi {
  padding: 8px 10px;
  background: transparent;
  border: 1px solid var(--border);
}
.hub-kpis-compact .hub-kpi-num { font-size: 18px; }
.hub-kpis-compact .hub-kpi-lbl { font-size: 10.5px; }

/* Grid medio: 2 pies a la izquierda + timeline a la derecha */
.hub-grid-mid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px;
  margin: 0 28px 14px;
}
.hub-charts-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   INICIO v3 — Timeline unificada (Actividad reciente)
   Eventos mezclados: citas reservadas + autopres completados +
   leads capturados. Cada item es clicable.
   ═══════════════════════════════════════════════════════════════ */
.hub-timeline-card { display: flex; flex-direction: column; }
.hub-timeline {
  list-style: none;
  display: flex; flex-direction: column;
  margin: 0; padding: 0;
  max-height: 360px;
  overflow-y: auto;
}
.hub-timeline-empty {
  color: var(--muted);
  font-size: 12.5px;
  padding: 18px 6px;
  text-align: center;
  line-height: 1.5;
}
.hub-timeline-item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 6px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background-color .15s;
}
.hub-timeline-item:last-child { border-bottom: 0; }
.hub-timeline-item:hover { background: var(--bg); }
.hub-timeline-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(0,0,0,.04);
}
.hub-timeline-body { min-width: 0; }
.hub-timeline-title {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hub-timeline-sub {
  font-size: 11px; color: var(--muted);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hub-timeline-when {
  font-size: 10.5px; font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg);
}

/* Entrada con stagger igual que la tabla */
.hub-timeline-item { animation: hubRowEnter .42s cubic-bezier(.16,1,.3,1) both; }
.hub-timeline-item:nth-child(1) { animation-delay:  40ms; }
.hub-timeline-item:nth-child(2) { animation-delay:  90ms; }
.hub-timeline-item:nth-child(3) { animation-delay: 140ms; }
.hub-timeline-item:nth-child(4) { animation-delay: 190ms; }
.hub-timeline-item:nth-child(5) { animation-delay: 240ms; }
.hub-timeline-item:nth-child(6) { animation-delay: 290ms; }

/* Responsive del strip y grid-mid */
@media (max-width: 1100px) {
  #sec-inicio > .hub-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-grid-mid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  #sec-inicio > .hub-strip { grid-template-columns: 1fr; }
  .hub-charts-2 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   INICIO — Tarta expandida (vista 2D cenital, análisis técnico)
   Click en una .hub-chart abre un modal grande con el pie cenital
   y leyenda con valor + porcentaje por slice.
   ═══════════════════════════════════════════════════════════════ */
.hub-expanded-backdrop {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(11, 33, 54, 0.62);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .28s ease;
}
.hub-expanded-backdrop.is-shown { opacity: 1; }
.hub-expanded-modal {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 26px 30px 28px;
  max-width: 560px; width: 100%;
  max-height: calc(100vh - 48px); overflow: auto;
  box-shadow: 0 30px 80px rgba(11, 33, 54, .35), 0 8px 16px rgba(11, 33, 54, .15);
  transform: scale(.9);
  opacity: 0;
  transition: transform .42s cubic-bezier(.16, 1, .3, 1), opacity .28s ease;
}
.hub-expanded-backdrop.is-shown .hub-expanded-modal {
  transform: scale(1);
  opacity: 1;
}
.hub-expanded-close {
  position: absolute; top: 14px; right: 16px;
  width: 36px; height: 36px;
  border: 0; background: transparent;
  font-size: 22px; line-height: 1;
  color: #6b7280; cursor: pointer;
  border-radius: 10px;
  transition: background .15s, color .15s;
}
.hub-expanded-close:hover { background: #f3f4f6; color: #111827; }
.hub-expanded-title {
  margin: 0 0 4px;
  font-size: 18px; font-weight: 700; color: #17334c;
}
.hub-expanded-subtotal { margin: 0 0 18px; font-size: 12.5px; color: #6b7280; }
.hub-expanded-subtotal strong { color: #111827; font-weight: 700; }
.hub-expanded-canvas-wrap {
  display: flex; justify-content: center;
  margin: 6px 0 22px;
  animation: hub-exp-canvas-in .55s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes hub-exp-canvas-in {
  0%   { opacity: 0; transform: scale(.85); }
  100% { opacity: 1; transform: scale(1); }
}
.hub-expanded-canvas { width: 100%; max-width: 320px; aspect-ratio: 1 / 1; height: auto; }
.hub-expanded-legend {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  list-style: none;
}
.hub-expanded-legend li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #111827; font-weight: 500;
  padding: 9px 12px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  animation: hub-exp-leg-in .4s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes hub-exp-leg-in {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.hub-expanded-legend li:nth-child(1) { animation-delay: 200ms; }
.hub-expanded-legend li:nth-child(2) { animation-delay: 260ms; }
.hub-expanded-legend li:nth-child(3) { animation-delay: 320ms; }
.hub-expanded-legend li:nth-child(4) { animation-delay: 380ms; }
.hub-expanded-legend li:nth-child(5) { animation-delay: 440ms; }
.hub-expanded-legend li:nth-child(6) { animation-delay: 500ms; }
.hub-expanded-legend li:nth-child(7) { animation-delay: 560ms; }
.hub-expanded-legend li:nth-child(8) { animation-delay: 620ms; }
.hub-expanded-legend .leg-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.hub-expanded-legend .leg-label { flex: 1; min-width: 0; }
.hub-expanded-legend .leg-val { font-weight: 700; color: #111827; }
.hub-expanded-legend .leg-pct { font-size: 11.5px; color: #6b7280; min-width: 38px; text-align: right; }

@media (max-width: 600px) {
  .hub-expanded-modal { padding: 22px 20px 24px; }
  .hub-expanded-canvas { max-width: 240px; }
  .hub-expanded-legend { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   MODO OSCURO — overrides para componentes nuevos
   (Inicio v2 · Catálogos del editor · Modales del Inicio y wizard)
   Colores base ya definidos arriba en :root[data-theme=dark]:
     --card #1c1f2d  --border #2c3044  --text #e2e6f0  --muted #8892a8
   ═══════════════════════════════════════════════════════════════ */

/* ─── Inicio v2 ─── */
html[data-theme="dark"] .hub-card { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] .hub-period { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] .hub-period-btn { color: var(--muted); }
html[data-theme="dark"] .hub-period-btn:hover { color: var(--text); }
html[data-theme="dark"] .hub-period-active,
html[data-theme="dark"] .hub-period-active:hover { color: #fff; background: var(--hub-green); }
html[data-theme="dark"] .hub-h2,
html[data-theme="dark"] .hub-h3,
html[data-theme="dark"] .hub-kpi-num,
html[data-theme="dark"] .hub-action-title,
html[data-theme="dark"] .hub-agenda-title,
html[data-theme="dark"] .hub-act-title,
html[data-theme="dark"] .hub-cli-name,
html[data-theme="dark"] .hub-fnl-num,
html[data-theme="dark"] .hub-donut-num { color: var(--text); }
html[data-theme="dark"] .hub-kpi-lbl,
html[data-theme="dark"] .hub-agenda-sub,
html[data-theme="dark"] .hub-act-sub,
html[data-theme="dark"] .hub-cli-sub,
html[data-theme="dark"] .hub-fnl-lbl,
html[data-theme="dark"] .hub-donut-sub,
html[data-theme="dark"] .hub-chart-subtotal { color: var(--muted); }
html[data-theme="dark"] .hub-chart-subtotal strong { color: var(--text); }
html[data-theme="dark"] .hub-card-link { color: var(--hub-green); }
html[data-theme="dark"] .hub-kpi { background: #232638; border-color: var(--border); }
html[data-theme="dark"] .hub-kpi-icon { /* iconos: el bg sigue siendo de la paleta hub-icon-* en claro; en oscuro aclaramos */ }
html[data-theme="dark"] .hub-icon-violet { background: #2a1f4a; color: #c4b5fd; }
html[data-theme="dark"] .hub-icon-green  { background: #0d2218; color: #6ee7b7; }
html[data-theme="dark"] .hub-icon-orange { background: #2a1d0a; color: #fcd34d; }
html[data-theme="dark"] .hub-icon-blue   { background: #0e1a2e; color: #93c5fd; }
html[data-theme="dark"] .hub-arrow-btn { background: var(--card); border-color: var(--border); color: var(--muted); }
html[data-theme="dark"] .hub-arrow-btn:hover { background: #232638; color: var(--text); }
html[data-theme="dark"] .hub-agenda-item,
html[data-theme="dark"] .hub-activity-item { border-bottom-color: var(--border); }
html[data-theme="dark"] .hub-agenda-time { background: #232638; color: var(--text); }
html[data-theme="dark"] .hub-action { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] .hub-action:hover { border-color: var(--hub-green); box-shadow: 0 4px 14px rgba(16, 185, 129, .18); }
html[data-theme="dark"] .hub-iconbg-green  { background: #0d2218; color: #6ee7b7; }
html[data-theme="dark"] .hub-iconbg-violet { background: #2a1f4a; color: #c4b5fd; }
html[data-theme="dark"] .hub-iconbg-orange { background: #2a1d0a; color: #fcd34d; }
html[data-theme="dark"] .hub-iconbg-blue   { background: #0e1a2e; color: #93c5fd; }
html[data-theme="dark"] .hub-fnl-bar { background: #2c3044; }
html[data-theme="dark"] .hub-donut::before { background: var(--card); }
html[data-theme="dark"] .hub-legend li { color: var(--text); }
html[data-theme="dark"] .hub-legend li strong { color: var(--text); }

/* Tabla últimos presupuestos (data-table-cards en oscuro): override del fondo
   y borde ya gestionado por las reglas globales de .data-table-cards arriba.
   Aquí solo el específico de hub-budgets. */
html[data-theme="dark"] .hub-budgets-table tbody tr {
  background: var(--card);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .hub-budgets-table tbody tr td {
  background: linear-gradient(180deg, rgba(28, 31, 45, .96) 0%, rgba(36, 40, 58, .94) 100%);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .hub-budgets-table tbody tr:hover td { border-color: #3a4060; }
html[data-theme="dark"] .hub-budgets-table thead th { color: var(--muted); border-bottom-color: var(--border); }
html[data-theme="dark"] .hub-budgets-table tbody tr:hover { box-shadow: 0 14px 28px rgba(0, 0, 0, .45); }

/* Activity cards laterales en oscuro */
html[data-theme="dark"] .hub-activity-card {
  background: linear-gradient(180deg, rgba(28, 31, 45, .96) 0%, rgba(36, 40, 58, .94) 100%);
  border-color: var(--border);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .hub-activity-card:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, .45);
  border-color: #3a4060;
}

/* Tags del Inicio (los pinta-bg claros se ven horribles en dark) */
html[data-theme="dark"] .tag-violet { background: #2a1f4a; color: #c4b5fd; }
html[data-theme="dark"] .tag-green  { background: #0d2218; color: #6ee7b7; }
html[data-theme="dark"] .tag-orange { background: #2a1d0a; color: #fcd34d; }
html[data-theme="dark"] .tag-blue   { background: #0e1a2e; color: #93c5fd; }
html[data-theme="dark"] .tag-gray   { background: #232638; color: #a3a8b8; }

/* Avatars: los colores pastel claros chocan; los oscurecemos manteniendo distinción */
html[data-theme="dark"] .hub-avatar { filter: brightness(.78) saturate(1.1); }

/* ─── Modal "Tarta expandida" del Inicio ─── */
html[data-theme="dark"] .hub-expanded-backdrop { background: rgba(0, 0, 0, .72); }
html[data-theme="dark"] .hub-expanded-modal { background: var(--card); box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 8px 16px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .hub-expanded-close { color: var(--muted); }
html[data-theme="dark"] .hub-expanded-close:hover { background: #232638; color: var(--text); }
html[data-theme="dark"] .hub-expanded-title { color: var(--text); }
html[data-theme="dark"] .hub-expanded-subtotal { color: var(--muted); }
html[data-theme="dark"] .hub-expanded-subtotal strong { color: var(--text); }
html[data-theme="dark"] .hub-expanded-legend li { background: #232638; border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .hub-expanded-legend .leg-val { color: var(--text); }
html[data-theme="dark"] .hub-expanded-legend .leg-pct { color: var(--muted); }

/* ─── ab-status badges (sección autopresupuestos) — oscurecemos los bg pastel ─── */
html[data-theme="dark"] .ab-status-pending       { background: #232638; color: #a3a8b8; border-color: #3a4060; }
html[data-theme="dark"] .ab-status-opened        { background: #0e1a2e; color: #93c5fd; border-color: #1d3055; }
html[data-theme="dark"] .ab-status-lead_captured { background: #2a1f4a; color: #c4b5fd; border-color: #3d2e6e; }
html[data-theme="dark"] .ab-status-completed    { background: #0d2218; color: #6ee7b7; border-color: #1a4535; }
html[data-theme="dark"] .ab-status-expired      { background: #2a1010; color: #fca5a5; border-color: #5a1f1f; }

/* ═══════════════════════════════════════════════════════════════
   MODO OSCURO — listados globales (data-table-cards)
   Aplica a: presupuestos, autopresupuestos, clientes, proformas,
             contratos, recibos, etc. Cualquier tabla del shell SaaS.
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .data-table-cards tbody tr {
  background: var(--card);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .data-table-cards tbody tr td {
  background: linear-gradient(180deg, rgba(28, 31, 45, 0.96) 0%, rgba(36, 40, 58, 0.94) 100%);
  border-color: var(--border, #2c3044);
  color: var(--text);
}
html[data-theme="dark"] .data-table-cards tbody tr:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .data-table-cards tbody tr:hover td {
  border-color: #3a4060;
}
html[data-theme="dark"] .data-table-cards tbody tr.selected td {
  background: linear-gradient(180deg, rgba(13, 34, 24, 0.96) 0%, rgba(26, 69, 53, 0.94) 100%);
  border-color: #1a4535;
}
html[data-theme="dark"] .data-table-cards thead th {
  background: transparent;
  color: var(--muted);
  border-bottom-color: var(--border);
}
html[data-theme="dark"] .entity-name { color: var(--text); }
html[data-theme="dark"] .data-table-cards tbody td small,
html[data-theme="dark"] .data-table-cards tbody td .entity-name + small { color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   MODO OSCURO — Editor: Mis tarifas (tariff-card) y panel detalle (bp-card)
   ═══════════════════════════════════════════════════════════════ */

/* Las tariff-cards del sidebar en oscuro: verde profundo (como antes)
   con borde verde JUMA marcado, igual que la card "TARIFA EN EDICIÓN"
   del panel del editor. */
html[data-theme="dark"] .tariff-card {
  background: linear-gradient(135deg, #0d2218 0%, #11302a 60%, #0a1c14 100%);
  border: 2px solid #15986c;
  color: #e2e6f0;
  box-shadow: 0 0 0 0 rgba(21, 152, 108, 0);
}
html[data-theme="dark"] .tariff-card:hover {
  box-shadow: 0 4px 14px rgba(21, 152, 108, .35);
  transform: translateY(-1px);
  background: linear-gradient(135deg, #11302a 0%, #144237 60%, #0d2820 100%);
}
html[data-theme="dark"] .tariff-card-name { color: #e2e6f0; }
html[data-theme="dark"] .tariff-card-label { color: #6ee7b7; }
html[data-theme="dark"] .tariff-card-foot { color: #8892a8; }
html[data-theme="dark"] .tariff-card-status { color: #6ee7b7; }
html[data-theme="dark"] .tariff-card-cta { color: #6ee7b7; }

/* Panel lateral del dashboard (bp-card). Cuando está como cs-card también */
html[data-theme="dark"] .bp-card {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .bp-head { color: var(--text); }
html[data-theme="dark"] .bp-head-text small,
html[data-theme="dark"] .bp-card .bp-meta,
html[data-theme="dark"] .bp-card .bp-amount-foot { color: var(--muted); }
html[data-theme="dark"] .bp-amount,
html[data-theme="dark"] .bp-amount-value { color: var(--text); }

/* Form-cards genéricas y account-cards */
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .account-card {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}

/* Inputs y textareas dentro de cards (asegurar contraste en cualquier sitio) */
html[data-theme="dark"] .form-card input,
html[data-theme="dark"] .form-card select,
html[data-theme="dark"] .form-card textarea,
html[data-theme="dark"] .account-card input,
html[data-theme="dark"] .account-card select,
html[data-theme="dark"] .account-card textarea,
html[data-theme="dark"] .bp-card input,
html[data-theme="dark"] .bp-card select,
html[data-theme="dark"] .bp-card textarea {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

/* Page header y subtitles dentro del shell SaaS */
html[data-theme="dark"] .page-header-left h1 { color: var(--text); }
html[data-theme="dark"] .page-header-left p { color: var(--muted); }

/* Stat-row (cabeceras de "Total presupuestos", "Importe", etc.) */
html[data-theme="dark"] .stat-card { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] .stat-card .stat-label { color: var(--muted); }
html[data-theme="dark"] .stat-card .stat-value { color: var(--text); }

/* Pagination */
html[data-theme="dark"] .page-btn {
  background: var(--card); border-color: var(--border); color: var(--text);
}
html[data-theme="dark"] .page-btn:hover:not(:disabled) { background: #232638; }
html[data-theme="dark"] .page-info { color: var(--muted); }

/* Filter popover */
html[data-theme="dark"] .filter-popover {
  background: var(--card); border-color: var(--border); color: var(--text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .filter-pop-row label { color: var(--muted); }

/* Buttons primary/ghost coherencia */
html[data-theme="dark"] .saas-layout .btn-primary,
html[data-theme="dark"] .saas-wrapper .btn-primary {
  color: #0d1a22;
}

/* ═════════════════════════════════════════════════════
   AGENDA
   KPIs · Calendario semana · Sidebar detalle · Tabla
   ═════════════════════════════════════════════════════ */
#sec-agenda {
  --ag-pending:    #f59e0b;
  --ag-pending-bg: #fff7e6;
  --ag-confirmed:    var(--brand-green-dark);
  --ag-confirmed-bg: rgba(22, 199, 132, 0.10);
  --ag-blocked:    #94a3b8;
  --ag-blocked-bg: #f1f5f9;
  --ag-avail:      #d1fae5;
  --ag-avail-fg:   #047857;
  --ag-empty:      #ffffff;
  --ag-grid-line:  #eef0f4;
}
#sec-agenda .page-header { padding: 24px 28px 8px; }
#sec-agenda .page-header-right { display: flex; gap: 8px; }
.ag-btn-clear { color: var(--red); }
.ag-btn-clear:hover { background: var(--red-bg); border-color: var(--red); }

.agenda-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 8px 28px 16px;
}
.agenda-stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; align-items: flex-start; gap: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.agenda-stat-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 36px;
}
.ag-ic-violet { background: #eef2ff; color: #5b4cf5; }
.ag-ic-blue   { background: var(--blue-bg); color: var(--blue); }
.ag-ic-orange { background: var(--orange-bg); color: var(--orange); }
.ag-ic-green  { background: var(--green-bg); color: var(--green); }
.agenda-stat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agenda-stat-num { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.1; }
.agenda-stat-lbl { font-size: 12px; font-weight: 600; color: var(--text); }
.agenda-stat-sub { font-size: 11px; color: var(--muted); }

.agenda-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 14px;
  padding: 0 28px 18px;
  align-items: start;
}

.agenda-cal-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.agenda-cal-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.agenda-cal-title {
  font-size: 15px; font-weight: 700; color: var(--text);
}
.agenda-cal-nav {
  display: flex; align-items: center; gap: 6px; justify-self: center;
}
.ag-nav-btn {
  background: var(--card); border: 1px solid var(--border);
  width: 32px; height: 32px; border-radius: 8px;
  font-size: 16px; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.ag-nav-btn:hover { background: var(--bg); }
.ag-nav-today { width: auto; padding: 0 12px; font-size: 13px; font-weight: 600; }

.agenda-cal-legend {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-self: end; font-size: 11px; color: var(--muted);
}
.ag-leg { display: inline-flex; align-items: center; gap: 4px; }
.ag-leg i {
  width: 10px; height: 10px; border-radius: 3px; display: inline-block;
}
.ag-leg-avail i     { background: var(--ag-avail); border: 1px solid #6ee7b7; }
.ag-leg-pending i   { background: linear-gradient(135deg, #fb923c 0%, #f59e0b 100%); border: 1px solid #c2410c; }
.ag-leg-confirmed i { background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 100%); border: 1px solid var(--brand-green-dark); }
.ag-leg-blocked i   { background: var(--ag-blocked-bg); border: 1px solid var(--ag-blocked); }

.agenda-cal-body {
  display: grid;
  grid-template-columns: 64px 1fr;
}
.agenda-cal-hours {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--ag-grid-line);
}
.ag-hours-spacer {
  height: 48px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 48px;
}
.ag-hour-cell {
  height: 44px;
  flex: 0 0 44px;
  font-size: 11px; color: var(--muted);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 4px;
  border-bottom: 1px dashed var(--ag-grid-line);
}
.agenda-cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.ag-day-col { display: flex; flex-direction: column; border-right: 1px solid var(--ag-grid-line); }
.ag-day-col:last-child { border-right: none; }
.ag-day-head {
  padding: 4px 6px; height: 48px;
  flex: 0 0 48px;
  text-align: center; font-size: 12px; font-weight: 600;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15;
  gap: 1px;
}
.ag-day-head.ag-today {
  background: var(--ag-confirmed-bg);
  color: var(--ag-confirmed);
}
.ag-day-head .ag-day-num { font-size: 14px; font-weight: 700; }
.ag-day-head .ag-day-name { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.ag-day-head.ag-today .ag-day-name { color: var(--ag-confirmed); }
.ag-day-body {
  position: relative;
  display: flex; flex-direction: column;
}
.ag-empty-cell {
  height: 44px;
  flex: 0 0 44px;
  border-bottom: 1px dashed var(--ag-grid-line);
  cursor: pointer;
  transition: background .12s ease;
  position: relative;
}
.ag-empty-cell:hover { background: #f8fafc; }

/* Acciones por cuadrante (solo en hover): + nueva cita / ✕ quitar hueco */
.ag-cell-actions, .ag-ev-actions {
  position: absolute;
  top: 2px; right: 3px;
  display: flex; gap: 3px;
  opacity: 0; transform: translateY(-3px);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
  z-index: 6;
}
.ag-empty-cell:hover .ag-cell-actions,
.ag-event:hover .ag-ev-actions {
  opacity: 1; transform: none; pointer-events: auto;
}
.ag-cell-act {
  width: 19px; height: 19px; padding: 0;
  border: none; border-radius: 50%;
  cursor: pointer; color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(15,23,42,.28);
  transition: transform .1s ease;
}
.ag-cell-act:hover { transform: scale(1.18); }
.ag-act-add { background: var(--brand-green, #16a34a); }
.ag-act-del { background: #ef4444; }
/* En cuadrantes pasados no se ofrecen acciones */
.ag-empty-cell.ag-past .ag-cell-actions { display: none; }
.ag-event {
  position: absolute;
  left: 1px; right: 1px;
  z-index: 2;
  cursor: pointer;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  line-height: 1.2;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.ag-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(15,23,42,.14);
  z-index: 3;
}
.ag-event.ag-event-compact {
  padding: 2px 6px;
  font-size: 10px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.ag-event-inline {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 600;
}
.ag-event-meta {
  font-size: 10px; font-weight: 500; opacity: .82;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ag-event.ag-available {
  background: var(--ag-avail);
  color: var(--ag-avail-fg);
  font-weight: 600;
}
.ag-event.ag-blocked {
  background: var(--ag-blocked-bg);
  color: var(--ag-blocked);
  font-weight: 600;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(148,163,184,.18) 5px, rgba(148,163,184,.18) 10px);
}
.ag-event.ag-pending {
  background: linear-gradient(135deg, #fb923c 0%, #f59e0b 100%);
  border-left: 4px solid #c2410c;
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
  box-shadow: 0 2px 6px rgba(245,158,11,.35);
}
.ag-event.ag-confirmed {
  background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 100%);
  border-left: 4px solid var(--brand-green-dark);
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
  box-shadow: 0 2px 6px rgba(14, 143, 104, 0.35);
}
.ag-event.ag-pending:hover {
  box-shadow: 0 6px 16px rgba(245,158,11,.45);
}
.ag-event.ag-confirmed:hover {
  box-shadow: 0 6px 16px rgba(13,150,104,.45);
}
.ag-event.ag-pending .ag-event-meta,
.ag-event.ag-confirmed .ag-event-meta { opacity: .92; }
.ag-event.ag-selected {
  outline: 2px solid var(--ag-confirmed);
  outline-offset: -2px;
  z-index: 4;
}
/* Slots cuya hora ya pasó: rojo claro solido, tachados, atenuados.
   Solo aplica a BOOKED y BLOCKED — los AVAILABLE pasados se ocultan en JS
   y luego los borra el cron AgendaCleaner. */
.ag-event.ag-past {
  opacity: .60;
  text-decoration: line-through;
  background: #fee2e2 !important;
  border-left: 4px solid #ef4444 !important;
  color: #7f1d1d !important;
  box-shadow: none !important;
}
.ag-event.ag-past:hover { box-shadow: 0 2px 6px rgba(185,28,28,.20) !important; }
html[data-theme="dark"] .ag-event.ag-past {
  background: rgba(239,68,68,.18) !important;
  color: #fca5a5 !important;
  border-left-color: #ef4444 !important;
}

/* Celdas vacias (sin slot) cuya hora ya paso: rojo claro solido + cruz centrada. */
.ag-empty-cell.ag-past {
  background: #fee2e2;
  cursor: not-allowed;
  position: relative;
}
.ag-empty-cell.ag-past::after {
  content: '✕';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(185,28,28,.40);
  font-size: 16px;
  font-weight: 600;
  pointer-events: none;
  line-height: 1;
}
.ag-empty-cell.ag-past:hover { background: #fecaca; }

/* Cabecera de dias pasados: nombre/numero atenuado en rojo, sin tachado
   global (el dia tachado en cabecera puede leerse mal). */
.ag-day-head.ag-past {
  background: #fee2e2;
}
.ag-day-head.ag-past .ag-day-name,
.ag-day-head.ag-past .ag-day-num {
  color: #b91c1c;
  opacity: .65;
}

html[data-theme="dark"] .ag-empty-cell.ag-past {
  background: rgba(239,68,68,.12);
}
html[data-theme="dark"] .ag-empty-cell.ag-past::after {
  color: rgba(248,113,113,.55);
}
html[data-theme="dark"] .ag-empty-cell.ag-past:hover {
  background: rgba(239,68,68,.20);
}
html[data-theme="dark"] .ag-day-head.ag-past {
  background: rgba(239,68,68,.12);
}
html[data-theme="dark"] .ag-day-head.ag-past .ag-day-name,
html[data-theme="dark"] .ag-day-head.ag-past .ag-day-num {
  color: #fca5a5;
}
.ag-slot-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 700; font-size: 11.5px;
}
.agenda-cal-foot {
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--muted);
}

.agenda-detail {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  position: sticky; top: 16px;
  min-height: 280px;
}
.agenda-detail-empty {
  text-align: center;
  padding: 36px 8px;
  color: var(--muted);
  font-size: 13px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ag-det-head { display: flex; flex-direction: column; gap: 4px; }
.ag-det-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 3px 8px; border-radius: 999px;
  width: max-content;
}
.ag-det-status.ag-pending {
  background: linear-gradient(135deg, #fb923c 0%, #f59e0b 100%);
  color: #fff;
  box-shadow: 0 1px 3px rgba(245,158,11,.35);
}
.ag-det-status.ag-confirmed {
  background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 100%);
  color: #fff;
  box-shadow: 0 1px 3px rgba(13,150,104,.35);
}
.ag-det-name { font-size: 18px; font-weight: 700; color: var(--text); }
.ag-det-when { font-size: 13px; color: var(--muted); }
.ag-det-rows { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.ag-det-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.ag-det-row svg { color: var(--muted); flex: 0 0 16px; }
.ag-det-row a { color: var(--green); text-decoration: none; }
.ag-det-row a:hover { text-decoration: underline; }
.ag-det-notes {
  margin-top: 12px;
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px; color: var(--text);
  white-space: pre-wrap;
}
.ag-det-actions {
  margin-top: 16px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.ag-det-actions .btn { padding: 7px 12px; font-size: 12px; flex: 1; min-width: 110px; }
.ag-det-cancel { color: var(--red); border-color: var(--red); }
.ag-det-cancel:hover { background: var(--red-bg); }
/* "Cancelar" compacto: solo ocupa lo que necesita su texto, sin estirarse. */
.ag-det-actions .ag-det-cancel { flex: 0 0 auto; min-width: 0; padding: 7px 12px; }
/* WhatsApp crece para llenar el resto de la fila → siempre cabe el texto. */
.ag-det-wa-confirm {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: 1 1 auto; box-sizing: border-box;
  padding: 7px 12px; font-size: 12px; line-height: 1.3; white-space: nowrap;
  background: #25d366; border: 1px solid #25d366; color: #fff;
  text-decoration: none; border-radius: 8px;
}
.ag-det-wa-confirm svg { flex: 0 0 auto; width: 15px; height: 15px; }
.ag-det-wa-confirm:hover { background: #1ebe5d; border-color: #1ebe5d; }
/* Cita ya confirmada → "Recordar" en verde PRESULINK para diferenciarlo. */
.ag-det-wa-remind { background: var(--brand-green); border-color: var(--brand-green); }
.ag-det-wa-remind:hover { background: var(--brand-green-dark); border-color: var(--brand-green-dark); }
.ag-det-source {
  margin-top: 14px;
  font-size: 11px; color: var(--muted);
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}

.agenda-upcoming {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 0 28px 28px;
  overflow: hidden;
}
.agenda-upcoming-head {
  padding: 14px 18px; display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--border);
}
.agenda-upcoming-head h3 { font-size: 15px; font-weight: 700; color: var(--text); }
.agenda-upcoming-filter { display: flex; gap: 6px; margin-left: auto; }
.agenda-upcoming .data-table-wrap { border: none; }
.agenda-upcoming tr.ag-row-selected td { background: var(--ag-confirmed-bg) !important; }
.agenda-upcoming .ag-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
}
.agenda-upcoming .ag-pill.ag-pending {
  background: linear-gradient(135deg, #fb923c 0%, #f59e0b 100%);
  color: #fff;
  box-shadow: 0 1px 3px rgba(245,158,11,.35);
}
.agenda-upcoming .ag-pill.ag-confirmed {
  background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 100%);
  color: #fff;
  box-shadow: 0 1px 3px rgba(13,150,104,.35);
}
.agenda-upcoming td .agenda-row-actions { display: flex; gap: 6px; }
.agenda-upcoming td .agenda-row-actions button {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 8px; font-size: 11px;
}
.agenda-upcoming td .agenda-row-actions button.primary { color: var(--green); border-color: var(--green); }
.agenda-upcoming td .agenda-row-actions button.danger  { color: var(--red); border-color: var(--red); }
.agenda-upcoming td .agenda-empty-row {
  padding: 32px; text-align: center; color: var(--muted); font-size: 13px;
}

/* Modal: configurar disponibilidad / nueva cita */
.agm-row { display: flex; gap: 10px; }
.agm-row .agm-field { flex: 1; }
.agm-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.agm-field > span {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px; font-weight: 600;
}
.agm-field input[type="time"],
.agm-field input[type="date"],
.agm-field input[type="text"],
.agm-field input[type="tel"],
.agm-field input[type="email"],
.agm-field select,
.agm-field textarea {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 12px; font-size: 13px;
  background: var(--card); color: var(--text);
}
.agm-field textarea { resize: vertical; min-height: 64px; font-family: inherit; }
.agm-weekdays {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.agm-weekdays label {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer;
  user-select: none;
}
.agm-weekdays label:has(input:checked) {
  background: var(--ag-confirmed-bg); border-color: var(--ag-confirmed); color: var(--ag-confirmed);
  font-weight: 600;
}
.agm-weeks { display: flex; flex-direction: column; gap: 5px; }
.agm-weeks label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.agm-info {
  font-size: 12px; color: var(--muted);
  background: var(--bg); border-radius: 8px; padding: 9px 12px;
}
.agm-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text); cursor: pointer;
  margin-top: 4px;
}

/* Responsive: mobile stacking */
@media (max-width: 1100px) {
  .agenda-stats { grid-template-columns: repeat(2, 1fr); }
  .agenda-grid { grid-template-columns: 1fr; }
  .agenda-detail { position: static; }
}
@media (max-width: 760px) {
  .agenda-cal-head {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .agenda-cal-legend { justify-self: start; }
  .agenda-cal-body { grid-template-columns: 44px 1fr; }
  .ag-event { padding: 3px 4px; font-size: 10px; }
  .ag-event-time { font-size: 9px; }
  .agm-row { flex-direction: column; }
}

/* ─── Dark mode ─── */
html[data-theme="dark"] #sec-agenda {
  --ag-pending:      #fbbf24;
  --ag-pending-bg:   #2a2418;
  --ag-confirmed:    #34d399;
  --ag-confirmed-bg: #102a22;
  --ag-blocked:      #64748b;
  --ag-blocked-bg:   #1f2530;
  --ag-avail:        #133b2c;
  --ag-avail-fg:     #6ee7b7;
  --ag-empty:        #131a23;
  --ag-grid-line:    #20283a;
}
html[data-theme="dark"] .agenda-stat,
html[data-theme="dark"] .agenda-cal-card,
html[data-theme="dark"] .agenda-detail,
html[data-theme="dark"] .agenda-upcoming { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] .ag-event.ag-pending {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  border-left-color: #7c2d12;
  color: #fff;
}
html[data-theme="dark"] .ag-event.ag-confirmed {
  background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 100%);
  border-left-color: rgba(14, 143, 104, 0.6);
  color: #fff;
}
html[data-theme="dark"] .ag-empty-cell:hover { background: rgba(148,163,184,.08); }
html[data-theme="dark"] .ag-event.ag-blocked {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(148,163,184,.10) 5px, rgba(148,163,184,.10) 10px);
}
html[data-theme="dark"] .ag-day-head.ag-today { background: rgba(52,211,153,.12); }
html[data-theme="dark"] .ag-nav-btn { background: var(--card); }
html[data-theme="dark"] .ag-nav-btn:hover { background: rgba(148,163,184,.10); }
html[data-theme="dark"] .ag-det-notes { background: rgba(148,163,184,.08); }
html[data-theme="dark"] .agm-info { background: rgba(148,163,184,.08); }
html[data-theme="dark"] .agm-weekdays label { background: rgba(148,163,184,.08); }
html[data-theme="dark"] .agm-weekdays label:has(input:checked) {
  background: rgba(52,211,153,.16); border-color: var(--ag-confirmed); color: var(--ag-confirmed);
}
html[data-theme="dark"] .ag-ic-violet { background: rgba(91,76,245,.16); color: #a8a0ff; }
html[data-theme="dark"] .ag-ic-blue   { background: rgba(59,130,246,.16); color: #93c5fd; }
html[data-theme="dark"] .ag-ic-orange { background: rgba(245,158,11,.16); color: #fbbf24; }
html[data-theme="dark"] .ag-ic-green  { background: rgba(16,185,129,.16); color: #6ee7b7; }

/* ═══════════════════════════════════════════════════════════════════════
   AJUSTES — sección dashboard
   ═══════════════════════════════════════════════════════════════════════ */
#sec-ajustes { padding: 24px 28px 40px; overflow-y: auto; }
.ajustes-tabs {
  display: flex; gap: 4px; margin: 8px 0 20px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.ajustes-tab-btn {
  background: transparent; border: 0;
  padding: 10px 16px; font-size: 13px; font-weight: 600;
  color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.ajustes-tab-btn:hover { color: var(--text); }
.ajustes-tab-btn.active {
  color: var(--accent, #14678b);
  border-bottom-color: var(--accent, #14678b);
}
.ajustes-pane { display: none; }
.ajustes-pane.active { display: block; animation: ajustes-fade .25s ease-out; }
@keyframes ajustes-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ajustes-intro {
  font-size: 13px; color: var(--muted); margin-bottom: 18px; max-width: 720px;
}
.form-card-hint {
  font-size: 12.5px; color: var(--muted); margin: -10px 0 14px; line-height: 1.45;
}
.form-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px;
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field > span {
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
}
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 12px;
  font-size: 14px; color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 0;
  border-color: var(--accent, #14678b);
  box-shadow: 0 0 0 3px rgba(20,103,139,.15);
}
.form-field-wide { grid-column: 1 / -1; }
.form-actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px;
}
.form-actions-row { justify-content: flex-start; align-items: center; flex-wrap: wrap; }

.ajustes-empty {
  text-align: center; padding: 40px 24px;
}
.ajustes-empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(22, 199, 132, 0.09); color: var(--accent, #14678b);
  margin-bottom: 16px;
}
.ajustes-empty h2 {
  font-size: 17px; margin-bottom: 8px;
}
.ajustes-empty p {
  font-size: 13.5px; color: var(--muted); line-height: 1.55; max-width: 480px; margin: 0 auto;
}

.account-row {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
}
.account-avatar, .account-avatar-letter {
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--orange, #f59e0b); color: #fff;
  font-size: 22px; font-weight: 700;
  object-fit: cover;
}
.account-text { display: flex; flex-direction: column; gap: 2px; }
.account-name { font-weight: 700; font-size: 15px; }
.account-email { font-size: 13px; color: var(--muted); }

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  #sec-ajustes { padding: 20px 16px 32px; }
}

/* Dark mode tweaks */
html[data-theme="dark"] .ajustes-empty-icon {
  background: rgba(20,103,139,.18);
  color: #38b6e0;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONSTRUCTOR DE PRESUPUESTO (F3) — split-screen panel interno
   ═══════════════════════════════════════════════════════════════════════ */
/* La sección base hereda display:none de .section-view; solo cuando está
   .active aplicamos el layout flex en columna. Sin esto el constructor
   aparecía debajo del editor al hacer scroll. */
#sec-nuevo-mixto.active { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
#sec-nuevo-mixto .page-header { flex-shrink: 0; }

/* ─── F6.3.1: picker partidas m² del catálogo ─── */
.wy-dm2-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000; padding: 20px;
  animation: wy-dm2-fade .15s ease-out;
}
@keyframes wy-dm2-fade { from { opacity: 0; } to { opacity: 1; } }
.wy-dm2-dialog {
  background: var(--card); border-radius: 14px;
  max-width: 720px; width: 100%; max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
.wy-dm2-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
}
.wy-dm2-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.wy-dm2-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.wy-dm2-close {
  background: transparent; border: 0; cursor: pointer;
  width: 32px; height: 32px; border-radius: 8px;
  font-size: 16px; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.wy-dm2-close:hover { background: var(--bg, #eef0f5); color: var(--text); }
.wy-dm2-toolbar {
  display: flex; gap: 10px; align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--soft, #f6fafc);
}
.wy-dm2-search {
  flex: 1; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 13.5px; background: var(--card); color: var(--text);
}
.wy-dm2-search:focus {
  outline: 2px solid var(--accent, #14678b); outline-offset: -1px;
  border-color: var(--accent, #14678b);
}
.wy-dm2-body {
  flex: 1; overflow-y: auto; padding: 14px 22px;
}
.wy-dm2-group {
  border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 10px; background: var(--card);
  transition: border-color .15s;
}
.wy-dm2-group[open] { border-color: var(--accent, #14678b); }
.wy-dm2-summary {
  list-style: none; cursor: pointer;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 14px;
  border-radius: 10px;
  user-select: none;
}
.wy-dm2-summary::-webkit-details-marker { display: none; }
.wy-dm2-summary:hover { background: var(--soft, #f6fafc); }
.wy-dm2-summary-label { flex: 1; }
.wy-dm2-summary-count {
  background: rgba(22, 199, 132, 0.12); color: var(--accent, #14678b);
  padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 700;
}
.wy-dm2-chev {
  color: var(--muted); transition: transform .2s;
}
.wy-dm2-group[open] .wy-dm2-chev { transform: rotate(180deg); }
.wy-dm2-group-body { padding: 4px 16px 14px; }
.wy-dm2-section-label {
  font-size: 10.5px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .6px;
  margin: 12px 0 6px;
}
.wy-dm2-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.wy-dm2-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .15s, transform .1s, box-shadow .15s;
}
.wy-dm2-card:hover {
  border-color: var(--accent, #14678b);
  box-shadow: 0 3px 10px rgba(22, 199, 132, 0.12);
  transform: translateY(-1px);
}
.wy-dm2-card:focus { outline: 2px solid var(--accent, #14678b); outline-offset: 1px; }
.wy-dm2-card-label {
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wy-dm2-card-price {
  font-size: 12.5px; font-weight: 700;
  color: var(--accent, #14678b);
}
.wy-dm2-empty {
  text-align: center; padding: 40px 20px;
  font-size: 13.5px; color: var(--muted); line-height: 1.55;
}
.wy-dm2-foot {
  padding: 14px 22px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
  background: var(--soft, #f6fafc);
}

/* Form de "nueva partida" (sub-modal) */
.wy-dm2-form { display: flex; flex-direction: column; gap: 14px; }
.wy-dm2-form > label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; color: var(--muted); font-weight: 600;
}
.wy-dm2-form > label > span {
  text-transform: uppercase; letter-spacing: .4px; font-size: 11px;
}
.wy-dm2-form input, .wy-dm2-form select {
  padding: 9px 12px; font-size: 14px; color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; background: var(--card);
}
.wy-dm2-form input:focus, .wy-dm2-form select:focus {
  outline: 2px solid var(--accent, #14678b); outline-offset: -1px;
}
.wy-dm2-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wy-dm2-form-row label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: var(--muted); font-weight: 600; }
.wy-dm2-form-row label > span { text-transform: uppercase; letter-spacing: .4px; }

/* Dark mode */
html[data-theme="dark"] .wy-dm2-overlay { background: rgba(0,0,0,.7); }
html[data-theme="dark"] .wy-dm2-summary-count {
  background: rgba(56,182,224,.18); color: #38b6e0;
}

/* Constructor — 3 zonas: Añadir trabajos | Presupuesto actual | Vista previa
   PDF. Anchos ajustables via variables CSS, las setea nmInitResizers() al
   iniciar y al arrastrar los handles. */
.nm-shell {
  --nm-col-add: 290px;
  --nm-col-preview: 520px;
  display: grid;
  grid-template-columns:
      var(--nm-col-add) 6px minmax(0, 1fr) 6px var(--nm-col-preview);
  gap: 0;
  padding: 0 24px 28px;
  flex: 1;
  min-height: 0;
}
.nm-shell > .nm-catalog,
.nm-shell > .nm-canvas,
.nm-shell > .nm-preview { margin-right: 6px; margin-left: 0; }
.nm-shell > .nm-preview { margin-right: 0; }
.nm-shell > .nm-catalog:first-of-type { margin-left: 0; }

/* Modo "Constructor" — esconde columna PDF + handle. */
.nm-shell[data-view-mode="constructor"] {
  grid-template-columns: var(--nm-col-add) 6px minmax(0, 1fr);
}
.nm-shell[data-view-mode="constructor"] > .nm-resize-handle[data-resize="preview"],
.nm-shell[data-view-mode="constructor"] > .nm-preview { display: none; }

/* Modo "PDF grande" — solo PDF, ocupando todo el ancho. */
.nm-shell[data-view-mode="pdf-grande"] {
  grid-template-columns: minmax(0, 1fr);
}
.nm-shell[data-view-mode="pdf-grande"] > .nm-catalog,
.nm-shell[data-view-mode="pdf-grande"] > .nm-canvas,
.nm-shell[data-view-mode="pdf-grande"] > .nm-resize-handle { display: none; }
.nm-shell[data-view-mode="pdf-grande"] > .nm-preview { margin-right: 0; }

/* Selector de modo de vista — pestañas tipo segmented control sobre el shell. */
/* Aviso de modo edición — se muestra al editar un presupuesto guardado
   desde el Constructor. Ámbar suave para que se note sin alarmar. */
.nm-edit-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 24px 12px;
  padding: 9px 14px;
  border: 1px solid #f3c969;
  background: #fef7e6;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #7a5b15;
}
.nm-edit-banner-text { flex: 1; min-width: 200px; }
.nm-edit-banner-text strong { color: #6a4e10; }
.nm-edit-banner-cancel {
  padding: 5px 12px;
  border: 1px solid #d9b24a;
  background: #fff;
  color: #7a5b15;
  border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.nm-edit-banner-cancel:hover { background: #fdeecb; border-color: #c79a30; }
html[data-theme="dark"] .nm-edit-banner {
  border-color: #6b551f;
  background: #2c2410;
  color: #e8cf8d;
}
html[data-theme="dark"] .nm-edit-banner-text strong { color: #f0dca0; }
html[data-theme="dark"] .nm-edit-banner-cancel {
  background: #1f1a0c; border-color: #6b551f; color: #e8cf8d;
}
html[data-theme="dark"] .nm-edit-banner-cancel:hover { background: #322914; }

.nm-view-mode {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.nm-view-mode-btn {
  padding: 7px 14px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform .08s;
}
.nm-view-mode-btn:hover {
  background: var(--surface-2);
  border-color: var(--brand-green-dark);
  color: var(--text);
}
.nm-view-mode-btn:active { transform: scale(.97); }
/* Botón activo: verde PRESULINK profundo (#0E8F68 = brand-green-dark).
   Es el verde oscuro reciclado del logo - se diferencia claramente del
   verde principal #16C784 (usado en sidebar/btn-primary) pero pertenece
   al mismo sistema. Color fijo (no usa --primary) para garantizar contraste
   con texto blanco. */
.nm-view-mode-btn.nm-view-mode-active {
  background: var(--brand-green-dark);
  border-color: var(--brand-green-dark);
  color: #fff;
}
.nm-view-mode-btn.nm-view-mode-active:hover {
  background: #0a7355;
  border-color: #0a7355;
  color: #fff;
}

/* Total presupuesto — bloque destacado en la cabecera del Constructor. */
.nm-header-total {
  display: inline-flex; flex-direction: column;
  padding: 4px 14px;
  border-radius: 10px;
  background: rgba(22, 199, 132, 0.09);
  border: 1px solid rgba(20,103,139,.20);
  line-height: 1.1;
  min-width: 130px;
}
.nm-header-total-label {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent, #14678b);
}
.nm-header-total-amount {
  font-size: 17px; font-weight: 700;
  color: var(--accent, #14678b);
  font-variant-numeric: tabular-nums;
}

/* Pestañas dentro del panel "Añadir al presupuesto". */
.nm-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  background: var(--bg, #eef0f5);
  padding: 3px;
  border-radius: 8px;
}
/* Variantes con 3/4 pestañas — padding y font más compactos para que quepan. */
.nm-tabs-3 .nm-tab,
.nm-tabs-4 .nm-tab { padding: 6px 6px; font-size: 11.5px; gap: 4px; }
.nm-tabs-4 .nm-tab .nm-catalog-counter { display: none; }
.nm-tab {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background .12s, color .12s;
  position: relative;
}
.nm-tab:hover { color: var(--text); }
.nm-tab.nm-tab-active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.nm-tab .nm-catalog-counter { font-size: 10px; padding: 1px 6px; }
.nm-tab .nm-edit-btn {
  margin-left: 2px; padding: 2px 5px; font-size: 0;
}
.nm-tab .nm-edit-btn svg { display: block; }

/* Paneles de cada pestaña — solo el activo se muestra. */
.nm-tab-panel { display: none; }
.nm-tab-panel.nm-tab-panel-active { display: block; }

/* Cuando el panel está unificado (con pestañas), el catálogo flex-mantiene
   las secciones de body y solo enseña la activa. */
.nm-catalog-unified .nm-catalog-head { border-top: 3px solid var(--accent, #14678b); }
.nm-catalog-unified .nm-tab[data-tab="m2"].nm-tab-active ~ .nm-catalog-head,
.nm-catalog-unified[data-active-tab="m2"] .nm-catalog-head { border-top-color: var(--brand-green-dark); }

/* Footer del panel "Añadir al presupuesto" — solo enlace al editor del
   catálogo global. Crear partidas personalizadas se hace desde el canvas. */
.nm-catalog-foot {
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  display: flex; justify-content: center;
  background: var(--card);
}
.nm-foot-link {
  font-size: 11.5px; font-weight: 600;
  color: var(--muted);
  text-align: center;
  text-decoration: none;
  padding: 4px;
  border-radius: 4px;
  transition: color .12s, background .12s;
}
.nm-foot-link:hover { color: var(--accent); background: rgba(22, 199, 132, 0.07); }

/* Cards "pack" (Reformas rápidas / Oficios completos) — layout compacto al
   estilo "Por estancia": icono cuadrado verde-suave + texto + precio "Desde"
   + botón + circular a la derecha. */
.nm-cat-card.nm-cat-card-pack {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.nm-cat-card.nm-cat-card-pack:hover {
  background: var(--soft, #f6fafc);
  border-color: rgba(20,103,139,.45);
  box-shadow: 0 2px 8px rgba(22, 199, 132, 0.09);
}
.nm-cat-card-pack-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(22, 199, 132, 0.10);
  color: var(--accent);
  border-radius: 8px;
}
.nm-cat-card-pack-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.nm-cat-card-pack-text strong {
  font-size: 12.5px; color: var(--text); font-weight: 700;
  line-height: 1.25;
}
.nm-cat-card-pack-desc {
  font-size: 11px; color: var(--muted); line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nm-cat-card-pack-price {
  font-size: 11.5px; font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.nm-cat-card-from {
  font-size: 10px; font-weight: 500;
  color: var(--muted); text-transform: lowercase;
}
.nm-cat-card-pack-add {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: 16px; font-weight: 700; line-height: 1;
  transition: background .12s, transform .08s;
}
.nm-cat-card.nm-cat-card-pack:hover .nm-cat-card-pack-add {
  background: #0f4f6c;
}
.nm-cat-card.nm-cat-card-pack:active .nm-cat-card-pack-add {
  transform: scale(.92);
}

/* Selector de panel móvil — oculto en desktop, visible en tablet/móvil. */
.nm-mobile-tabs {
  display: none;
  gap: 4px;
  padding: 0 24px;
  margin-bottom: 12px;
}
.nm-mobile-tab {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 8px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.nm-mobile-tab:hover {
  background: var(--soft, #f6fafc);
  border-color: var(--accent);
}
.nm-mobile-tab.nm-mobile-tab-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Responsive: tablet/portátil estrecho ≤1024px ─────────────────────
   Las 3 columnas no caben cómodas; pasamos a UNA columna a la vez,
   seleccionable con el nm-mobile-tabs. Ocultamos el selector desktop
   (Constructor / Constructor+PDF / PDF grande) y los handles de resize. */
@media (max-width: 1024px) {
  .nm-view-mode { display: none; }
  .nm-mobile-tabs { display: flex; }
  .nm-shell {
    display: block;
    grid-template-columns: none;
    padding: 0 16px 20px;
  }
  .nm-shell > .nm-resize-handle { display: none; }
  .nm-shell > .nm-catalog,
  .nm-shell > .nm-canvas,
  .nm-shell > .nm-preview {
    display: none;
    height: calc(100vh - 240px);
    margin: 0;
    width: 100%;
  }
  .nm-shell[data-mobile-panel="add"]    > .nm-catalog,
  .nm-shell[data-mobile-panel="canvas"] > .nm-canvas,
  .nm-shell[data-mobile-panel="pdf"]    > .nm-preview { display: flex; }
  /* En tablet la cabecera del Constructor también ocupa más estrecho. */
  .nm-header-total { min-width: 0; padding: 4px 10px; }
  .nm-header-total-amount { font-size: 15px; }
}

/* ── Responsive: móvil estrecho ≤640px ────────────────────────────────
   Cabecera apilada vertical, total y botones envolventes. */
@media (max-width: 640px) {
  .nm-mobile-tabs { padding: 0 12px; }
  .nm-mobile-tab {
    padding: 8px 4px;
    font-size: 12px;
  }
  .nm-mobile-tab svg { display: none; }
  .nm-shell { padding: 0 10px 16px; }
  .nm-shell > .nm-catalog,
  .nm-shell > .nm-canvas,
  .nm-shell > .nm-preview {
    height: calc(100vh - 280px);
    border-radius: 8px;
  }
}
/* Handle entre paneles — barra fina que cambia a azul al hover/drag. */
.nm-resize-handle {
  /* Cursor SVG custom (flechas ⇔ con borde azul) — el col-resize del SO en
     Windows modo claro es blanco con borde fino, apenas visible. */
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='20' viewBox='0 0 28 20' fill='white' stroke='%2314678b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 4 2 10 6 16'/><polyline points='22 4 26 10 22 16'/><line x1='2' y1='10' x2='26' y2='10'/></svg>") 14 10, col-resize;
  background: transparent;
  position: relative;
  transition: background .15s;
  z-index: 2;
}
.nm-resize-handle::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 4px; height: 32px; transform: translate(-50%, -50%);
  /* Patrón de puntitos verticales — visible siempre, indica que es asible. */
  background-image: radial-gradient(circle, var(--accent) 1.1px, transparent 1.5px);
  background-size: 4px 6px;
  background-repeat: repeat-y;
  background-position: center;
  opacity: .45;
  transition: opacity .15s, height .15s;
}
.nm-resize-handle:hover::before,
.nm-resize-handle.nm-dragging-handle::before {
  opacity: 1;
  height: 56px;
}
body.nm-resizing,
body.nm-resizing * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='20' viewBox='0 0 28 20' fill='white' stroke='%2314678b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 4 2 10 6 16'/><polyline points='22 4 26 10 22 16'/><line x1='2' y1='10' x2='26' y2='10'/></svg>") 14 10, col-resize !important;
  user-select: none !important;
}

/* Botón hamburguesa del Constructor — mismo estilo que el reveal */
.nm-burger {
  margin-top: 4px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text);
  cursor: pointer; flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.nm-burger:hover { background: var(--soft, #f6fafc); border-color: var(--accent, #14678b); }

/* ─── DRAG & DROP del Constructor: animaciones premium ───
   3 estados visuales coordinados:
   1. .nm-cat-card[draggable] siendo arrastrada -> "lifted" con scale + rotate + shadow
   2. .nm-drop-target (canvas activo) -> halo verde pulsante
   3. .nm-group.nm-drop-over -> resaltado tactil con scale + glow */
.nm-cat-card[draggable="true"] { cursor: grab; }
.nm-cat-card[draggable="true"]:active { cursor: grabbing; }

/* Card de ORIGEN durante el drag: queda como hueco sutil en su sitio para que
   se vea de dónde se cogió, mientras el ghost custom (.nm-drag-ghost) hace de
   imagen sólida que sigue al cursor. */
.nm-cat-card.nm-dragging {
  opacity: .38;
  transform: scale(.97);
  filter: grayscale(.2);
  transition: opacity .15s ease-out,
              transform .15s ease-out,
              filter .15s ease-out;
}

/* Ghost del cursor: clone sólido 100% opaco que el JS posiciona en cada
   dragover. El browser SIEMPRE aplica ~50% opacity a su propio drag image;
   anulándolo con una GIF 1×1 transparente y pintando este clon manualmente
   conseguimos un ghost visible al 100%. */
.nm-drag-ghost {
  position: fixed !important;
  pointer-events: none !important;
  background: var(--card, #ffffff) !important;
  color: var(--text, #0f172a) !important;
  border: 2px solid var(--brand-green, #16C784) !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.32),
              0 8px 20px rgba(22, 199, 132, 0.45),
              0 0 0 3px rgba(22, 199, 132, 0.18) !important;
  transform: rotate(-1.5deg) scale(1.02) !important;
  opacity: 1 !important;
  z-index: 9999 !important;
  margin: 0 !important;
  /* Top/left vienen del JS — siguen al cursor. */
}

/* Canvas activo (recibe el drop): pulso elegante verde PRESULINK */
.nm-canvas.nm-drop-target,
.nm-drop-target {
  animation: nm-drop-pulse 1.4s ease-in-out infinite;
  border-color: var(--brand-green) !important;
}
@keyframes nm-drop-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(22, 199, 132, 0.30),
                inset 0 0 0 1.5px rgba(22, 199, 132, 0.35);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(22, 199, 132, 0.06),
                inset 0 0 0 2px rgba(22, 199, 132, 0.55);
  }
}

/* Grupo concreto bajo el cursor: lift tactil mas marcado */
.nm-group.nm-drop-over {
  transform: scale(1.012);
  box-shadow: 0 0 0 2px var(--brand-green),
              0 8px 22px rgba(22, 199, 132, 0.22);
  transition: transform .2s cubic-bezier(.34, 1.5, .65, 1),
              box-shadow .2s ease-out;
}

/* ─── Reordenar capítulos arrastrando (plegados o desplegados) ─── */
/* Cursor-mano idéntico al de las tarjetas del catálogo (claro y oscuro). */
.nm-group-head {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='white' stroke='%2314678b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M22 14a8 8 0 0 1-8 8'/><path d='M18 11v-1a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0'/><path d='M14 10V9a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v1'/><path d='M10 9.5V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v10'/><path d='M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/></svg>") 9 3, pointer;
}
.nm-group-head:active {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='white' stroke='%2314678b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M18 11V8a2 2 0 0 0-4 0v3'/><path d='M14 10V6a2 2 0 0 0-4 0v5'/><path d='M10 10.5V8a2 2 0 0 0-4 0v6'/><path d='M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/></svg>") 14 14, grabbing;
}
/* Capítulo en origen mientras se arrastra: se atenúa para ver de dónde sale. */
.nm-group.nm-group-dragging { opacity: .45; }
/* Indicador de inserción antes/después del capítulo destino. Usa el verde de
   marca como una línea-guía; funciona igual en claro y oscuro. */
.nm-group.nm-group-drop-before,
.nm-group.nm-group-drop-after { position: relative; }
.nm-group.nm-group-drop-before::before,
.nm-group.nm-group-drop-after::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: var(--brand-green, #16C784);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(22, 199, 132, .35);
  z-index: 2;
}
.nm-group.nm-group-drop-before::before { top: -2px; }
.nm-group.nm-group-drop-after::after  { bottom: -2px; }
/* El ghost que sigue al cursor reutiliza .nm-drag-ghost (mismo look que las
   tarjetas del catálogo). */

/* ─── Aterrizaje de lineas: pop satisfactorio con stagger ───
   Cuando una card se suelta, las nuevas lineas aparecen con un pop
   elastico (cubic-bezier con overshoot). Para capitulos grandes
   (packs con varias lineas), el stagger se aplica via animation-delay
   inline desde JS. */
@keyframes nm-line-pop {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(.94);
  }
  60% {
    opacity: 1;
    transform: translateY(2px) scale(1.015);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.nm-line.nm-line-fresh,
.nm-group.nm-group-fresh > .nm-group-head {
  animation: nm-line-pop .5s cubic-bezier(.34, 1.5, .65, 1) both;
  /* will-change para que el browser haga GPU layer */
  will-change: transform, opacity;
}

/* Despliegue del grupo completo cuando aterriza un capitulo grande */
@keyframes nm-group-unfold {
  0% {
    opacity: 0;
    transform: scaleY(.85) translateY(-8px);
    max-height: 0;
  }
  60% {
    opacity: 1;
    transform: scaleY(1.02) translateY(2px);
  }
  100% {
    opacity: 1;
    transform: scaleY(1) translateY(0);
    max-height: 2000px;
  }
}
.nm-group.nm-group-fresh {
  transform-origin: top center;
  animation: nm-group-unfold .55s cubic-bezier(.34, 1.4, .55, 1) both;
}

/* ─── Cambio de pestaña del catálogo (reformas / oficios / m²)
   El panel activado entra con un slide lateral sutil + fade.
   Como los panels inactivos viven en display:none, basta con disparar la
   animación al pasar a display:block (la regla .nm-tab-panel-active). */
@keyframes nm-tab-slide-in {
  0%   { opacity: 0; transform: translateX(14px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}
.nm-tab-panel.nm-tab-panel-active {
  animation: nm-tab-slide-in .28s cubic-bezier(.34, 1.4, .55, 1) both;
  will-change: transform, opacity;
}

/* Indicador inferior de la pestaña activa se mueve suave entre tabs */
.nm-tab {
  transition: color .2s ease,
              background-color .2s ease,
              border-color .2s ease;
}

/* ─── Desplegables del catálogo (<details class="nm-catalog-group">)
   Cuando el usuario abre un grupo ("Trabajos completos 12", "Albañilería"...)
   las tarjetas internas aparecen con slide-down + fade muy ligero. Aplica
   también a la primera carga del panel — es coherente y refuerza la entrada. */
@keyframes nm-details-unfold {
  0%   { opacity: 0; transform: translateY(-8px) scaleY(.96); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}
details.nm-catalog-group[open] > .nm-catalog-cards {
  animation: nm-details-unfold .3s cubic-bezier(.34, 1.4, .55, 1);
  transform-origin: top center;
}

.nm-burger:active { transform: scale(.94); }
.nm-catalog, .nm-canvas, .nm-preview {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* Firefox: scrollbar fino tintado azul JUMA. */
  scrollbar-width: thin;
  scrollbar-color: rgba(20, 103, 139, 0.35) transparent;
}
/* WebKit / Blink (Chrome, Edge, Safari): thumb redondeado azul JUMA. */
.nm-catalog::-webkit-scrollbar,
.nm-canvas::-webkit-scrollbar,
.nm-preview::-webkit-scrollbar,
.nm-catalog-body::-webkit-scrollbar,
.nm-tab-panel::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.nm-catalog::-webkit-scrollbar-track,
.nm-canvas::-webkit-scrollbar-track,
.nm-preview::-webkit-scrollbar-track,
.nm-catalog-body::-webkit-scrollbar-track,
.nm-tab-panel::-webkit-scrollbar-track {
  background: transparent;
}
.nm-catalog::-webkit-scrollbar-thumb,
.nm-canvas::-webkit-scrollbar-thumb,
.nm-preview::-webkit-scrollbar-thumb,
.nm-catalog-body::-webkit-scrollbar-thumb,
.nm-tab-panel::-webkit-scrollbar-thumb {
  background: rgba(20, 103, 139, 0.30);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 99px;
  transition: background-color .15s;
}
.nm-catalog::-webkit-scrollbar-thumb:hover,
.nm-canvas::-webkit-scrollbar-thumb:hover,
.nm-preview::-webkit-scrollbar-thumb:hover,
.nm-catalog-body::-webkit-scrollbar-thumb:hover,
.nm-tab-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(20, 103, 139, 0.65);
  background-clip: padding-box;
}
/* Estética unificada azul JUMA en todo el sidebar del Constructor —
   tanto el panel rápido (Reformas/Oficios/Estancias) como m² (Trabajos sueltos)
   comparten paleta para que cualquier pestaña futura encaje sin retoques. */
.nm-catalog-rapido .nm-catalog-head { border-top: 3px solid var(--accent, #14678b); }
.nm-catalog-m2     .nm-catalog-head { border-top: 3px solid var(--accent, #14678b); }
.nm-catalog-m2 .nm-catalog-search:focus,
.nm-catalog-m2 .nm-cat-card:hover { border-color: var(--accent, #14678b); }
.nm-catalog-m2 .nm-cat-card:hover { box-shadow: 0 2px 8px rgba(22, 199, 132, 0.10); }
.nm-catalog-m2 .nm-cat-card-add { background: var(--accent, #14678b); }
.nm-catalog-m2 .nm-cat-count { background: rgba(22, 199, 132, 0.10); color: var(--accent, #14678b); }

/* Catalog (left) */
.nm-catalog-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--card);
  z-index: 1;
}
.nm-catalog-head h2 {
  font-size: 14px; margin: 0 0 8px;
  display: flex; align-items: center; gap: 8px;
}
.nm-catalog-counter {
  font-size: 11px; font-weight: 600; color: var(--muted);
  padding: 2px 8px; border-radius: 99px;
  background: var(--bg, #eef0f5);
}
.nm-catalog-rapido .nm-catalog-counter { background: rgba(22, 199, 132, 0.10); color: var(--accent, #14678b); }
.nm-catalog-m2 .nm-catalog-counter     { background: rgba(22, 199, 132, 0.10); color: var(--accent, #14678b); }
.nm-catalog-search {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; background: var(--card); color: var(--text);
}
/* Fila search + lapicito: el lapicito vivía dentro de la pestaña m2; ahora
   es global y vale para las 4 pestañas (afecta a la activa). */
.nm-catalog-search-row {
  display: flex; align-items: center; gap: 6px;
}
.nm-catalog-search-row .nm-catalog-search { flex: 1; }
.nm-catalog-search-row .nm-edit-btn { margin-left: 0; padding: 6px 9px; }

/* === Modal "Crear pack" =================================================== */
/* Body más espacioso que el modal normal porque tiene mucha jerarquía. */
.nm-pack-modal .modal-body.nm-pack-body {
  padding: 16px 20px; max-height: calc(100vh - 220px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.nm-pack-grid-top {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start;
}
.nm-pack-grid-top .cust-field { margin: 0; }

.nm-pack-chapters {
  display: flex; flex-direction: column; gap: 10px;
}
.nm-pack-chapter {
  border: 1px solid var(--border); border-radius: 8px; padding: 12px;
  background: color-mix(in srgb, var(--card) 96%, var(--text) 4%);
}
.nm-pack-chapter-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.nm-pack-chapter-label {
  flex: 1; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--text); font-weight: 600; font-size: 13.5px;
}
.nm-pack-items {
  display: flex; flex-direction: column; gap: 6px;
}
.nm-pack-item {
  display: grid; grid-template-columns: 1fr 110px 24px; gap: 6px; align-items: center;
}
.nm-pack-item-label, .nm-pack-item-price {
  padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--text); font-size: 12.5px; width: 100%;
}
.nm-pack-item-price-wrap {
  position: relative; display: flex; align-items: center;
}
.nm-pack-item-price-wrap input { padding-right: 22px; text-align: right; }
.nm-pack-item-price-suffix {
  position: absolute; right: 8px; pointer-events: none; color: var(--text-soft);
  font-size: 11.5px;
}
.nm-pack-x {
  width: 24px; height: 24px; border: 0; background: transparent;
  color: var(--text-soft); border-radius: 6px; font-size: 17px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.nm-pack-x:hover { background: rgba(192,57,43,.10); color: #c0392b; }
.nm-pack-x-placeholder { width: 24px; height: 24px; }
.nm-pack-add-item, .nm-pack-add-chapter {
  align-self: flex-start; margin-top: 4px; padding: 6px 10px;
  border: 1px dashed var(--border); border-radius: 6px; background: transparent;
  color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer;
}
.nm-pack-add-item:hover, .nm-pack-add-chapter:hover {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.nm-pack-add-chapter { align-self: stretch; text-align: center; padding: 8px 12px; }

.nm-pack-total-row {
  display: flex; justify-content: flex-end; align-items: baseline; gap: 8px;
  padding: 10px 0 0; border-top: 1px solid var(--border);
}
.nm-pack-total-label { color: var(--text-soft); font-size: 12px; }
.nm-pack-total-value { font-weight: 700; font-size: 16px; color: var(--accent); }

/* === Icon picker (grid de iconos Lucide) ================================ */
.nm-icon-picker {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
  padding: 6px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); width: 320px; max-width: 100%;
}
.nm-icon-picker-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: var(--text); cursor: pointer; padding: 0;
  transition: background .12s, border-color .12s, color .12s;
}
.nm-icon-picker-btn:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
}
.nm-icon-picker-btn.nm-icon-picker-sel {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

/* === Estancia personalizada (badge + borrado) =========================== */
.nm-cat-card-x-delete {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border: 0; background: rgba(192,57,43,.10);
  color: #c0392b; border-radius: 6px; font-size: 15px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
}
.nm-cat-card-x-delete:hover { background: rgba(192,57,43,.20); }

.nm-catalog-empty { padding: 16px; }
.nm-demo-buttons { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.nm-demo-btn { justify-content: flex-start; font-size: 12px; }
.nm-catalog-body { padding: 8px 10px 16px; flex: 1; overflow-y: auto; }

/* Botón "Editar" rojo en la cabecera del panel "Partidas". */
.nm-edit-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid rgba(220,38,38,.30);
  background: rgba(220,38,38,.08);
  color: #dc2626;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
}
.nm-edit-btn:hover { background: rgba(220,38,38,.14); border-color: rgba(220,38,38,.55); }
.nm-edit-btn.nm-edit-active {
  background: #dc2626; color: #fff; border-color: #dc2626;
  box-shadow: 0 1px 4px rgba(220,38,38,.30);
}
.nm-edit-btn:active { transform: translateY(1px); }
html[data-theme="dark"] .nm-edit-btn { background: rgba(248,113,113,.10); color: #f87171; border-color: rgba(248,113,113,.30); }
html[data-theme="dark"] .nm-edit-btn:hover { background: rgba(248,113,113,.18); border-color: rgba(248,113,113,.50); }
html[data-theme="dark"] .nm-edit-btn.nm-edit-active { background: #ef4444; color: #fff; border-color: #ef4444; }

/* Cards en modo edición — borde, [×] y grip. */
.nm-cat-card-editing {
  position: relative;
  cursor: grab;
  border-color: rgba(220,38,38,.20);
}
.nm-cat-card-editing:active { cursor: grabbing; }
.nm-cat-card-editing.nm-cat-card-hidden {
  opacity: .45;
  border-style: dashed;
}
.nm-cat-card-x {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none; background: rgba(220,38,38,.10); color: #dc2626;
  font-size: 14px; line-height: 1; font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: background .1s, transform .08s;
}
.nm-cat-card-x:hover { background: rgba(220,38,38,.20); transform: scale(1.08); }
.nm-cat-card-hidden .nm-cat-card-x {
  background: rgba(22, 199, 132, 0.12); color: var(--accent, #14678b);
}
.nm-cat-card-hidden .nm-cat-card-x:hover { background: rgba(20,103,139,.22); }
.nm-cat-card-grip {
  display: inline-flex; align-items: center;
  color: var(--muted); opacity: .55;
  cursor: grab;
}
.nm-cat-card-editing.nm-dragging { opacity: .35; }
.nm-cat-card-drop-before {
  border-top: 3px solid var(--accent, #14678b) !important;
  margin-top: -2px;
}
.nm-catalog-m2.nm-editing .nm-catalog-cards { padding-top: 6px; }

/* Botón [×] / [✓] sobre el header de una familia, en modo edición. */
.nm-cat-group-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  margin-left: 4px;
  border-radius: 50%;
  border: none; background: rgba(220,38,38,.10); color: #dc2626;
  font-size: 14px; line-height: 1; font-weight: 700;
  cursor: pointer;
  transition: background .1s, transform .08s;
}
.nm-cat-group-x:hover { background: rgba(220,38,38,.20); transform: scale(1.08); }
.nm-catalog-group-hidden > summary > .nm-cat-group-x {
  background: rgba(22, 199, 132, 0.12); color: var(--accent, #14678b);
}
.nm-catalog-group-hidden > summary > .nm-cat-group-x:hover { background: rgba(20,103,139,.22); }
.nm-catalog-group-hidden { opacity: .50; }
.nm-catalog-group-hidden > summary {
  background: repeating-linear-gradient(45deg,
    rgba(220,38,38,.04), rgba(220,38,38,.04) 6px,
    transparent 6px, transparent 12px);
}
html[data-theme="dark"] .nm-catalog-group-hidden > summary {
  background: repeating-linear-gradient(45deg,
    rgba(248,113,113,.06), rgba(248,113,113,.06) 6px,
    transparent 6px, transparent 12px);
}

/* Placeholder de capítulo vacío dentro del grupo (panel "Partidas"). */
.nm-cat-empty-section {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px dashed rgba(22, 199, 132, 0.30);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.nm-cat-empty-section:hover { background: rgba(22, 199, 132, 0.06); border-color: var(--accent, #14678b); border-style: solid; }
.nm-cat-empty-section-head { display: flex; align-items: center; gap: 8px; }
.nm-cat-empty-pill {
  font-size: 9px; font-weight: 700; padding: 2px 6px;
  border-radius: 999px; background: rgba(22, 199, 132, 0.10);
  color: var(--accent, #14678b); text-transform: uppercase; letter-spacing: .5px;
}
.nm-cat-empty-section-foot {
  display: flex; align-items: center; justify-content: space-between;
}
.nm-cat-empty-section-msg { font-size: 11px; color: var(--muted); }
.nm-empty-group-msg {
  margin: 6px 4px;
  padding: 10px 12px;
  font-size: 12px; color: var(--muted); line-height: 1.4;
  background: rgba(20,103,139,.04);
  border-radius: 6px;
}
html[data-theme="dark"] .nm-cat-empty-section { border-color: rgba(121,194,224,.25); }
html[data-theme="dark"] .nm-cat-empty-section:hover { background: rgba(121,194,224,.06); border-color: #79c2e0; }
html[data-theme="dark"] .nm-cat-empty-pill { background: rgba(121,194,224,.18); color: #79c2e0; }
html[data-theme="dark"] .nm-empty-group-msg { background: rgba(255,255,255,.04); }

/* Fila con las dos tarjetas "+ Crear capítulo" / "+ Crear partida". */
.nm-create-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 10px;
}
.nm-create-row > .nm-create-partida { flex: 1 1 200px; margin-top: 0; }

/* Tabs del modal "Crear nuevo" — Familia / Capítulo / Partida. */
.nm-create-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-bottom: 14px;
}
.nm-create-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .08s;
  text-align: center;
}
.nm-create-tab:hover { border-color: rgba(20,103,139,.45); background: rgba(20,103,139,.04); }
.nm-create-tab.active {
  border-color: var(--accent, #14678b);
  background: rgba(22, 199, 132, 0.09);
  box-shadow: inset 0 0 0 1px var(--accent, #14678b);
}
.nm-create-tab-icon { font-size: 22px; line-height: 1; margin-bottom: 2px; }
.nm-create-tab-label { font-size: 13px; font-weight: 700; }
.nm-create-tab-sub { font-size: 10px; color: var(--muted); line-height: 1.2; }
.nm-create-help {
  margin: 4px 0 0; padding: 8px 10px;
  background: rgba(20,103,139,.04); border-radius: 6px;
  font-size: 11px; color: var(--muted); line-height: 1.4;
}
html[data-theme="dark"] .nm-create-tab.active { background: rgba(121,194,224,.10); border-color: #79c2e0; box-shadow: inset 0 0 0 1px #79c2e0; }
html[data-theme="dark"] .nm-create-help { background: rgba(255,255,255,.04); }

/* Tarjeta "+ Crear partida personalizada" al final del panel "Partidas". */
.nm-create-partida {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 16px;
  margin-top: 10px;
  border: 2px dashed rgba(22, 199, 132, 0.30);
  border-radius: 12px;
  background: transparent;
  color: var(--accent, #14678b);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
}
/* "Crear capítulo" — misma paleta azul JUMA que el resto del sidebar. */
.nm-create-section { color: var(--accent, #14678b); border-color: rgba(22, 199, 132, 0.30); }
.nm-create-section:hover { background: rgba(22, 199, 132, 0.07); border-color: var(--accent, #14678b); border-style: solid; }
.nm-create-section .nm-create-plus { background: rgba(22, 199, 132, 0.12); color: var(--accent, #14678b); }
.nm-create-partida:hover {
  background: rgba(22, 199, 132, 0.07);
  border-color: var(--accent, #14678b);
  border-style: solid;
}
.nm-create-partida:active { transform: scale(.99); }
.nm-create-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(22, 199, 132, 0.12); color: var(--accent, #14678b);
  font-size: 16px; font-weight: 700; line-height: 1;
}
html[data-theme="dark"] .nm-create-partida {
  border-color: rgba(248,113,113,.20); color: #79c2e0;
}
html[data-theme="dark"] .nm-create-partida:hover {
  background: rgba(121,194,224,.08); border-color: #79c2e0;
}
html[data-theme="dark"] .nm-create-plus {
  background: rgba(121,194,224,.18); color: #79c2e0;
}

/* Sub-secciones dentro del panel "Partidas" (Capítulos m² + Capítulos individuales). */
.nm-subcat { margin-bottom: 18px; }
.nm-subcat:last-child { margin-bottom: 0; }
.nm-subcat-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--muted);
  margin: 4px 2px 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.nm-subcat-counter {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px; padding: 0 6px;
  background: rgba(22, 199, 132, 0.10); color: var(--accent, #14678b);
  border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0;
}
.nm-subcat[data-sub="indiv"] .nm-subcat-counter {
  background: rgba(22, 199, 132, 0.10); color: var(--accent, #14678b);
}
.nm-subcat-body { display: flex; flex-direction: column; gap: 0; }
.nm-catalog-loading {
  padding: 20px 16px; text-align: center; font-size: 13px; color: var(--muted); line-height: 1.5;
}
.nm-catalog-group { margin-bottom: 14px; }
details.nm-catalog-group {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 8px;
  transition: border-color .15s;
}
details.nm-catalog-group[open] { border-color: var(--accent, #14678b); }
.nm-catalog-rapido details.nm-catalog-group[open] { border-color: var(--accent, #14678b); }
.nm-catalog-m2     details.nm-catalog-group[open] { border-color: var(--accent, #14678b); }
details.nm-catalog-group > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 9px 12px;
  border-radius: 10px;
}
details.nm-catalog-group > summary::-webkit-details-marker { display: none; }
details.nm-catalog-group > summary:hover { background: var(--soft, #f6fafc); }
details.nm-catalog-group[open] > summary { border-radius: 10px 10px 0 0; }
.nm-catalog-group-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted);
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
}
.nm-cat-chev {
  color: var(--muted);
  transition: transform .28s cubic-bezier(.34, 1.4, .55, 1);
  flex-shrink: 0;
}
details.nm-catalog-group[open] .nm-cat-chev { transform: rotate(180deg); }
details.nm-catalog-group .nm-catalog-cards { padding: 4px 10px 10px; }

/* Grupo "Zonas completas" — el más prominente (siempre abierto, marco fuerte) */
details.nm-catalog-group.nm-catalog-group-prime {
  border-color: var(--accent, #14678b);
  background: linear-gradient(180deg, rgba(22, 199, 132, 0.06) 0%, transparent 60%);
}
details.nm-catalog-group.nm-catalog-group-prime > summary { padding: 11px 14px; }
.nm-catalog-group-prime .nm-catalog-group-head { color: var(--accent, #14678b); }

.nm-cat-count {
  background: var(--bg, #eef0f5); color: var(--muted);
  padding: 1px 7px; border-radius: 99px; font-size: 10px; font-weight: 600;
}
.nm-catalog-cards { display: flex; flex-direction: column; gap: 6px; }
.nm-cat-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; cursor: pointer; position: relative;
  transition: border-color .15s, transform .1s, box-shadow .15s;
  display: flex; flex-direction: column; gap: 4px;
}
/* Motor CRUD: toolbar editar/borrar al hover (esquina superior derecha) */
.nm-cat-tools { position: absolute; top: 5px; right: 5px; display: flex; gap: 4px; opacity: 0; transition: opacity .14s; z-index: 4; }
.nm-cat-card:hover .nm-cat-tools, .nm-cat-card:focus-within .nm-cat-tools { opacity: 1; }
.nm-cat-tools button { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--border); background: var(--card); color: var(--muted); cursor: pointer; box-shadow: 0 1px 3px rgba(11,33,54,.10); }
.nm-cat-edit:hover { color: var(--accent, #14678b); border-color: var(--accent, #14678b); }
.nm-cat-del:hover { color: #e03131; border-color: #e03131; }
.nm-cat-card:hover {
  border-color: var(--accent, #14678b);
  box-shadow: 0 2px 8px rgba(22, 199, 132, 0.09);
  transform: translateY(-1px);
}
.nm-cat-card:focus { outline: 2px solid var(--accent, #14678b); outline-offset: 1px; }
.nm-cat-card-head {
  display: flex; align-items: center; gap: 6px;
}
.nm-cat-card-head strong {
  flex: 1; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nm-cat-card-desc {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nm-cat-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px;
}
.nm-cat-card-price { font-weight: 700; color: var(--text); }
.nm-cat-card-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent, #14678b); color: #fff;
  font-size: 14px; font-weight: 700;
  opacity: 0; transition: opacity .15s;
}
.nm-cat-card:hover .nm-cat-card-add { opacity: 1; }

/* Drag & drop visuales — cursor SVG custom (mano apuntadora con borde azul)
   para que no se vea la mano sin bordes del sistema en Windows. */
.nm-cat-card,
.nm-cat-card[draggable="true"] {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='white' stroke='%2314678b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M22 14a8 8 0 0 1-8 8'/><path d='M18 11v-1a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0'/><path d='M14 10V9a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v1'/><path d='M10 9.5V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v10'/><path d='M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/></svg>") 9 3, pointer;
}
.nm-cat-card[draggable="true"]:active {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='white' stroke='%2314678b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M18 11V8a2 2 0 0 0-4 0v3'/><path d='M14 10V6a2 2 0 0 0-4 0v5'/><path d='M10 10.5V8a2 2 0 0 0-4 0v6'/><path d='M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/></svg>") 14 14, grabbing;
}
/* (Sustituido por la regla "lifted" arriba — la card se ve sólida con halo
   verde y leve rotación al arrastrar, ya no semitransparente.) */

/* Cards ZONE_PRESET — prominentes con gradient corporativo.
   Selector con tres clases (0,3,0) + !important para ganar a todo. */
.nm-catalog-rapido .nm-catalog-cards .nm-cat-card.nm-zone-preset,
.nm-catalog-rapido .nm-cat-card.nm-zone-preset,
.nm-cat-card.nm-zone-preset {
  background-color: var(--brand-green) !important;
  background-image: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 100%) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(14, 143, 104, 0.22);
}
.nm-cat-card.nm-zone-preset:hover {
  box-shadow: 0 6px 18px rgba(22, 199, 132, 0.30);
  transform: translateY(-2px);
  border-color: transparent !important;
}
.nm-cat-card.nm-zone-preset .nm-cat-card-head strong { color: #fff !important; font-size: 13.5px; }
.nm-cat-card.nm-zone-preset .nm-cat-card-desc { color: rgba(255,255,255,.88) !important; font-size: 11.5px; }
.nm-cat-card.nm-zone-preset .nm-cat-card-foot { font-size: 12px; }
.nm-cat-card.nm-zone-preset .nm-cat-card-price { color: #fff !important; font-weight: 800; }
.nm-cat-card.nm-zone-preset .nm-cat-card-add {
  background: rgba(255,255,255,.95) !important; color: var(--brand-green-dark) !important; opacity: 1;
}
.nm-cat-card.nm-zone-preset .nm-line-mode-pill {
  background: rgba(255,255,255,.22) !important; color: #fff !important; border-color: transparent;
}
.nm-canvas.nm-drop-target {
  border: 2px dashed var(--accent, #14678b);
  background: rgba(20,103,139,.04);
}
.nm-catalog-m2 ~ .nm-canvas.nm-drop-target,
.nm-canvas.nm-drop-target.from-m2 {
  border-color: var(--accent, #14678b);
  background: rgba(20,103,139,.04);
}
@keyframes nm-line-drop {
  from { opacity: 0; transform: translateY(-12px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}
.nm-line.nm-line-just-added {
  animation: nm-line-drop .28s ease-out;
}

/* Canvas (center) */
.nm-canvas { padding: 0; transition: border-color .15s, background .15s; }
.nm-canvas .nm-lines { padding: 16px; }
/* Tarjeta drop-zone que aparece cuando el canvas está vacío.
   Sirve de placeholder visual para indicar "suelta aquí". */
.nm-empty-dropzone {
  background: var(--card);
  border: 2px dashed rgba(20,103,139,.35);
  border-radius: 12px;
  padding: 28px 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; color: var(--muted);
  transition: border-color .15s, background .15s, transform .1s;
}
.nm-empty-dropzone svg { color: rgba(20,103,139,.55); margin-bottom: 4px; }
.nm-empty-dropzone strong {
  font-size: 14px; font-weight: 700; color: var(--accent, #14678b);
  text-transform: uppercase; letter-spacing: .8px;
}
.nm-empty-dropzone span { font-size: 12px; line-height: 1.5; max-width: 320px; }
/* Cuando el usuario está arrastrando una card sobre el canvas, este placeholder
   se ilumina al unísono con el canvas drop-target. */
.nm-canvas.nm-drop-target .nm-empty-dropzone {
  border-color: var(--accent, #14678b);
  background: rgba(22, 199, 132, 0.07);
  transform: scale(1.01);
}
/* Cabecera del canvas: dos tarjetas (IVA a la izquierda, Cliente a la derecha)
   encima del área de drop. Layout flex que permite envolver en pantallas estrechas. */
.nm-canvas-head {
  display: flex; align-items: stretch; gap: 10px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.nm-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--border);
  min-height: 40px; font-size: 13px;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.nm-pill:hover { border-color: rgba(20,103,139,.35); }
.nm-pill-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .6px; color: var(--muted);
}
.nm-pill-label svg { opacity: .8; }
.nm-pill-vat { flex: 0 0 auto; min-width: 180px; }
.nm-pill-customer { flex: 0 1 auto; min-width: 220px; max-width: 360px; }
.nm-pill-select {
  flex: 1; padding: 5px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text); font-size: 13px; cursor: pointer;
}
.nm-pill-select:focus { outline: none; border-color: var(--accent, #14678b); }
.nm-pill-action {
  padding: 5px 10px; border-radius: 6px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text); font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.nm-pill-action:hover { background: rgba(22, 199, 132, 0.07); border-color: rgba(20,103,139,.35); }
.nm-pill-action-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent);
  font-weight: 600;
}
.nm-pill-action-primary:hover {
  background: #0f5471 !important;
  border-color: #0f5471;
  color: #fff !important;
}
html[data-theme="dark"] .nm-pill-action-primary {
  background: #79c2e0 !important; color: #0a2233 !important; border-color: #79c2e0;
}
html[data-theme="dark"] .nm-pill-action-primary:hover {
  background: #5db1d4 !important; border-color: #5db1d4;
}
.nm-pill-customer-filled { border-color: rgba(20,103,139,.35); background: rgba(20,103,139,.04); }
.nm-customer-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nm-customer-name { font-weight: 600; color: var(--text); font-size: 13px; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-customer-sub { font-size: 11px; color: var(--muted); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-pill-x {
  width: 22px; height: 22px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.06); color: var(--muted);
  font-size: 16px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nm-pill-x:hover { background: rgba(220,38,38,.12); color: #dc2626; }

/* Picker de cliente — overlay con buscador + lista. */
.nm-customer-search-input {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg);
  font-size: 13px; color: var(--text);
}
.nm-customer-search-input:focus { outline: none; border-color: var(--accent, #14678b); }
.nm-customer-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  border: none; border-radius: 8px; background: transparent;
  text-align: left; cursor: pointer; color: var(--text);
  transition: background .1s;
}
.nm-customer-row:hover { background: rgba(22, 199, 132, 0.09); }
.nm-customer-row-main { flex: 1; min-width: 0; }
.nm-customer-row-name { font-weight: 600; font-size: 13px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-customer-row-sub { font-size: 11px; color: var(--muted); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-customer-row-vat {
  font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
  background: rgba(22, 199, 132, 0.10); color: var(--accent, #14678b);
  text-transform: uppercase; letter-spacing: .5px; flex-shrink: 0;
}

html[data-theme="dark"] .nm-pill-x { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .nm-pill-x:hover { background: rgba(248,113,113,.18); color: #f87171; }
html[data-theme="dark"] .nm-customer-row:hover { background: rgba(255,255,255,.05); }

.nm-lines { display: flex; flex-direction: column; gap: 14px; }
/* Capítulo en el canvas (agrupador por zona) — caja claramente visible
   alrededor de las líneas para que el ojo separe los bloques de un vistazo. */
.nm-group {
  background: linear-gradient(180deg, rgba(20,103,139,.07) 0%, rgba(20,103,139,.02) 100%);
  border: 2px solid rgba(22, 199, 132, 0.30);
  border-radius: 12px;
  padding: 8px 10px 12px;
  box-shadow: 0 1px 3px rgba(22, 199, 132, 0.06);
  transition: border-color .15s, box-shadow .15s, background .15s;
  position: relative;
}
.nm-group:hover { border-color: rgba(20,103,139,.55); }
.nm-group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px 10px 6px;
  margin-bottom: 4px;
  border-bottom: 1px dashed rgba(20,103,139,.25);
  font-size: 12.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .9px; color: var(--accent, #14678b);
  cursor: pointer;
  user-select: none;
}
.nm-group-head:hover .nm-group-chevron { background: rgba(22, 199, 132, 0.10); }
.nm-group-chevron {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: transparent; border: 0; border-radius: 4px;
  color: var(--accent, #14678b);
  cursor: pointer;
  transition: background .12s, transform .18s;
}
.nm-group-collapsed .nm-group-chevron { transform: rotate(-90deg); }
.nm-group-label { flex: 1; }
.nm-group-count {
  font-size: 10.5px; font-weight: 600;
  color: var(--muted); text-transform: none; letter-spacing: 0;
  padding: 2px 7px; border-radius: 99px;
  background: rgba(20,103,139,.07);
}
.nm-group-sub {
  font-size: 13px; font-weight: 700;
  color: var(--text); text-transform: none; letter-spacing: 0;
  background: var(--card); padding: 3px 9px; border-radius: 99px;
  border: 1px solid var(--border);
}
/* Cuando el capítulo está plegado: solo se muestra el head con el subtotal,
   el body (líneas + botón "Añadir trabajo personalizado") queda oculto. */
.nm-group-collapsed .nm-group-body { display: none; }
.nm-group-collapsed .nm-group-head {
  border-bottom-color: transparent;
  margin-bottom: 0;
  padding-bottom: 6px;
}
.nm-group-collapsed { padding-bottom: 8px; }

/* Header del canvas — título "Presupuesto actual" + botón "Colapsar todo". */
.nm-canvas-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--card);
  z-index: 1;
}
.nm-canvas-head h2 {
  font-size: 14px; margin: 0;
  font-weight: 700;
}
.nm-canvas-collapse-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.nm-canvas-collapse-btn:hover {
  background: var(--soft, #f6fafc);
  border-color: var(--accent, #14678b);
  color: var(--accent, #14678b);
}
.nm-canvas-collapse-btn svg { transition: transform .18s; }
.nm-canvas-collapse-btn-expanded svg { transform: rotate(-90deg); }
/* Estado drop-over: el grupo donde se soltará la card se ilumina */
.nm-group.nm-drop-over {
  border-color: var(--accent, #14678b);
  border-style: dashed;
  background: linear-gradient(180deg, rgba(20,103,139,.18) 0%, rgba(22, 199, 132, 0.07) 100%);
  box-shadow: 0 0 0 3px rgba(20,103,139,.18), 0 4px 12px rgba(20,103,139,.18);
  transform: translateY(-1px);
}
.nm-group.nm-drop-over .nm-group-head { color: var(--accent, #14678b); }

/* Fila "+ Añadir trabajo personalizado" al final de cada capítulo. Más sutil
   que la card "+ Añadir" global porque está dentro del bloque. */
.nm-add-row {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 12px; margin-top: 4px;
  background: rgba(255,255,255,.4);
  border: 1px dashed rgba(20,103,139,.40);
  border-radius: 8px;
  color: var(--accent, #14678b);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.nm-add-row:hover {
  background: rgba(22, 199, 132, 0.09);
  border-color: var(--accent, #14678b);
  border-style: solid;
}
.nm-add-row-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(22, 199, 132, 0.14); color: var(--accent, #14678b);
  font-size: 14px; font-weight: 700; line-height: 1;
}
.nm-add-row:hover .nm-add-row-icon {
  background: var(--accent, #14678b); color: #fff;
}
.nm-add-row-menu {
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.06);
  display: none; flex-direction: column;
  min-width: 240px; z-index: 50; padding: 6px;
}
.nm-add-row-menu.open { display: flex; }
.nm-group-rename {
  background: transparent; border: 0; cursor: pointer;
  width: 22px; height: 22px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12px;
}
.nm-group-rename:hover { background: var(--card); color: var(--accent, #14678b); }
/* X roja para borrar el capítulo entero — distinta de la X de línea
   individual: arranca con tono rojo visible para que el usuario sepa que
   es una acción destructiva mayor que requiere confirmación. */
.nm-group-delete {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(220,38,38,.35);
  cursor: pointer;
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #dc2626; font-size: 12px; font-weight: 700; line-height: 1;
  transition: background .12s, border-color .12s, transform .08s;
  margin-left: 4px;
}
.nm-group-delete:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
  transform: scale(1.08);
}
.nm-group-delete:active { transform: scale(.94); }
.nm-group-body { display: flex; flex-direction: column; gap: 8px; }
/* Selector de zona en cada linea */
.nm-line-zone {
  font-size: 11.5px; padding: 4px 6px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--muted);
  cursor: pointer; max-width: 140px;
}
.nm-line-zone:hover { border-color: var(--accent, #14678b); color: var(--text); }
.nm-line-zone:focus { outline: 2px solid var(--accent, #14678b); outline-offset: -1px; }
/* Inputs editables (label y precio) */
.nm-line-label-input {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 600;
  color: var(--text); background: transparent;
  border: 1px solid transparent; border-radius: 6px;
  padding: 5px 8px;
  resize: none; overflow: hidden;
  font-family: inherit; line-height: 1.4;
  transition: background .12s, border-color .12s;
}
.nm-line-label-input:hover { background: var(--soft, #f6fafc); }
.nm-line-label-input:focus {
  outline: 0; background: var(--card);
  border-color: var(--accent, #14678b);
  box-shadow: 0 0 0 2px rgba(22, 199, 132, 0.12);
}
.nm-line-price-input {
  width: 82px; padding: 4px 8px;
  /* Caja siempre visible para que se vea que es editable (antes era
     transparente y parecía texto plano). */
  border: 1px solid var(--border, #d4dde6); border-radius: 6px;
  background: var(--card, #fff); text-align: right;
  font-size: 13px; font-weight: 600; color: var(--text);
  -moz-appearance: textfield;
}
.nm-line-price-input::-webkit-outer-spin-button,
.nm-line-price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nm-line-price-input:hover { background: var(--soft, #f6fafc); }
.nm-line-price-input:focus {
  outline: 0; background: var(--card);
  border-color: var(--accent, #14678b);
  box-shadow: 0 0 0 2px rgba(22, 199, 132, 0.12);
}

/* Línea NOTA: fila de texto explicativo, sin precio ni cantidad. */
.nm-line-note { background: #fafbfc; border-style: dashed; }
.nm-line-note:hover { border-color: var(--accent, #14678b); }
.nm-note-pill {
  font-size: 10px; font-weight: 700; padding: 3px 8px;
  border-radius: 99px; text-transform: uppercase; letter-spacing: .6px;
  background: rgba(22, 199, 132, 0.10); color: var(--accent, #14678b);
  flex-shrink: 0;
}
.nm-line-note-input {
  flex: 1; min-width: 0; font-size: 13px;
  color: var(--text); background: var(--card);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; line-height: 1.5;
  resize: none; overflow: hidden;
  font-family: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.nm-line-note-input:focus {
  outline: 0; border-color: var(--accent, #14678b);
  box-shadow: 0 0 0 2px rgba(22, 199, 132, 0.12);
}

/* Card "+" al final del canvas con menú emergente. */
.nm-add-card {
  position: relative;
  background: var(--card);
  border: 2px dashed var(--border); border-radius: 12px;
  padding: 18px 16px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--muted);
  transition: border-color .15s, background .15s, color .15s, transform .1s;
}
.nm-add-card:hover {
  border-color: var(--accent, #14678b);
  background: rgba(20,103,139,.04);
  color: var(--accent, #14678b);
  transform: translateY(-1px);
  /* El transform del lift crea un stacking context: sin z-index el menú
     emergente (abre hacia arriba) quedaba atrapado debajo del capítulo de
     arriba y su borde lo recortaba. Lo subimos para que esté siempre encima. */
  z-index: 60;
}
/* Aunque no se esté pasando el ratón, mientras el menú esté abierto la card va
   por encima del resto para que el menú no se recorte. */
.nm-add-card:has(.nm-add-menu.open) { z-index: 60; }
.nm-add-card-icon {
  font-size: 22px; font-weight: 700; line-height: 1;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg, #eef0f5);
  transition: background .15s;
}
.nm-add-card:hover .nm-add-card-icon {
  background: var(--accent, #14678b); color: #fff;
}
.nm-add-card-label { font-size: 13px; font-weight: 600; }
.nm-add-menu {
  position: absolute;
  bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.06);
  display: none; flex-direction: column;
  min-width: 260px; z-index: 50;
  padding: 6px;
}
.nm-add-menu.open { display: flex; }
.nm-add-menu-item {
  background: transparent; border: 0;
  text-align: left; padding: 10px 12px;
  border-radius: 8px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  transition: background .12s;
}
.nm-add-menu-item:hover { background: var(--bg, #eef0f5); }
.nm-add-menu-item strong { font-size: 13.5px; color: var(--text); }
.nm-add-menu-item span { font-size: 11.5px; color: var(--muted); }
.nm-line {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.nm-line:hover { border-color: var(--accent, #14678b); box-shadow: 0 2px 8px rgba(22, 199, 132, 0.09); }
.nm-line-head {
  display: flex; align-items: center; gap: 10px;
}
.nm-line-mode-pill {
  font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 99px;
  text-transform: uppercase; letter-spacing: .5px;
}
.nm-mode-fixed       { background: rgba(22, 199, 132, 0.12); color: var(--accent); }
.nm-mode-per_unit    { background: rgba(245,158,11,.14); color: #b45309; }
.nm-mode-zone_action { background: rgba(22, 199, 132, 0.14); color: var(--brand-green-dark); }
.nm-line-head strong {
  flex: 1; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nm-line-del {
  background: transparent; border: 0; cursor: pointer;
  width: 26px; height: 26px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 14px;
}
.nm-line-del:hover { background: var(--red-bg, #fef2f2); color: var(--red, #b91c1c); }
.nm-line-body {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted); flex-wrap: wrap;
}
.nm-line-qty {
  display: inline-flex; align-items: center; gap: 0;
  background: var(--bg, #eef0f5); border-radius: 8px; padding: 2px;
}
.nm-qty-btn {
  background: transparent; border: 0; cursor: pointer;
  width: 26px; height: 26px; border-radius: 6px;
  font-size: 16px; font-weight: 700; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.nm-qty-btn:hover { background: var(--card); }
.nm-qty-btn:active { background: var(--accent, #14678b); color: #fff; }
.nm-qty-input {
  width: 60px; padding: 4px 6px; border: 0; background: transparent;
  text-align: center; font-size: 13px; font-weight: 600; color: var(--text);
  -moz-appearance: textfield;
}
.nm-qty-input::-webkit-outer-spin-button,
.nm-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nm-qty-input:focus { outline: 2px solid var(--accent, #14678b); outline-offset: -2px; border-radius: 4px; }
.nm-qty-unit {
  font-size: 11px; color: var(--muted); padding-right: 6px; min-width: 14px;
}
.nm-line-times, .nm-line-equals { color: var(--muted); font-weight: 600; }
.nm-line-price { color: var(--text); }
.nm-line-subtotal {
  margin-left: auto;
  color: var(--text); font-weight: 700; font-size: 14px;
  white-space: nowrap;
}

/* Preview (right) */
.nm-preview { padding: 12px; }
.nm-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}
.nm-preview h2 { font-size: 14px; margin: 0; display: flex; align-items: center; gap: 8px; }

/* Botones de acción del PDF — descargar / abrir en grande / ocultar. */
.nm-preview-actions {
  display: inline-flex; gap: 4px;
}
.nm-preview-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.nm-preview-action:hover {
  background: var(--soft, #f6fafc);
  border-color: var(--accent);
  color: var(--accent);
}
.nm-preview-action:active { transform: scale(.94); }
.nm-preview-tag {
  font-size: 9.5px; font-weight: 700; padding: 2px 8px;
  border-radius: 99px; letter-spacing: .5px;
  background: rgba(22, 199, 132, 0.12); color: var(--accent, #14678b);
}
.nm-preview-frame-wrap {
  position: relative; flex: 1; min-height: 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: #eef0f5; overflow: hidden;
}
.nm-preview-frame {
  width: 100%; height: 100%; border: 0; background: #fff;
  display: block;
}
.nm-preview-empty-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(2px);
  font-size: 13px; color: var(--muted); line-height: 1.5;
}
.nm-preview-empty-overlay.nm-hidden { display: none; }
.nm-preview-body { flex: 1; overflow-y: auto; }
.nm-preview-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 20px 0; }
.nm-prev-line {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13px;
}
.nm-prev-line:last-child { border-bottom: 0; }
.nm-prev-line span:first-child {
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--muted);
}
.nm-prev-line strong { color: var(--text); white-space: nowrap; }
.nm-preview-totals {
  margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--border);
}
.nm-prev-row {
  display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px;
}
.nm-prev-row span:first-child { color: var(--muted); }
.nm-prev-row.nm-prev-total {
  font-size: 16px; font-weight: 700; color: var(--text);
  margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border);
}
.nm-prev-row.nm-prev-total span:first-child { color: var(--text); }

/* Conditions panel (collapsable details) */
.nm-conditions {
  margin-top: 14px; padding: 10px 0;
  border-top: 1px solid var(--border);
}
.nm-conditions summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted);
}
.nm-conditions summary::-webkit-details-marker { display: none; }
.nm-cond-toggle-icon { transition: transform .2s; font-size: 11px; }
.nm-conditions[open] .nm-cond-toggle-icon { transform: rotate(180deg); }
.nm-cond-body { padding: 10px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.nm-cond-field {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 12.5px; color: var(--muted);
}
.nm-cond-field > span { font-weight: 500; flex: 1; }
.nm-cond-field input, .nm-cond-field select {
  width: 110px; padding: 5px 8px;
  background: var(--card); border: 1px solid var(--border); border-radius: 6px;
  font-size: 12.5px; color: var(--text);
}
.nm-cond-field select { width: 130px; }
.nm-cond-field input:focus, .nm-cond-field select:focus {
  outline: 2px solid var(--accent, #14678b); outline-offset: -1px;
}
.nm-cond-toggles {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border);
}
.nm-cond-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text); cursor: pointer;
  padding: 3px 0;
}
.nm-cond-toggle input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: var(--accent, #14678b);
}

/* Mobile / tablet */
@media (max-width: 1280px) {
  .nm-shell {
    grid-template-columns: 220px 6px minmax(0, 1fr) 6px var(--nm-col-preview, 380px);
  }
  .nm-shell > .nm-catalog-m2,
  .nm-shell > .nm-resize-handle[data-resize="m2"] { display: none; }
}
@media (max-width: 1024px) {
  .nm-shell { grid-template-columns: 1fr; gap: 12px; }
  .nm-shell > .nm-resize-handle { display: none; }
  #sec-nuevo-mixto { height: auto; overflow: visible; }
  .nm-catalog, .nm-canvas, .nm-preview { max-height: none; }
  .nm-catalog-m2 { display: flex; }
}

/* ─── Branding tab ─── */
.form-card-h2-aux { font-size: 12.5px; color: var(--muted); font-weight: 400; }

/* Selector de modo del logo (custom / preset / none). 3 tarjetas grandes
   tipo radio, con borde verde cuando están activas. */
.logo-mode-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 6px 0 18px;
}
.logo-mode-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px 14px 12px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg, #fff);
  cursor: pointer;
  text-align: left;
  transition: border-color .12s, box-shadow .12s, transform .08s;
}
.logo-mode-card:hover {
  border-color: rgba(21, 152, 108, .45);
  box-shadow: 0 6px 16px rgba(11, 33, 54, .07);
}
.logo-mode-card.is-active {
  border-color: var(--brand-green, #15986c);
  box-shadow: 0 0 0 3px rgba(21, 152, 108, .14);
}
.logo-mode-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 9px;
  background: rgba(20, 103, 139, .10);
  color: var(--brand-primary, #14678b);
  margin-bottom: 6px;
}
.logo-mode-card.is-active .logo-mode-icon {
  background: rgba(21, 152, 108, .14);
  color: var(--brand-green, #15986c);
}
.logo-mode-title { font-size: 14px; font-weight: 700; color: #132d46; }
.logo-mode-sub   { font-size: 12px; color: var(--muted); }
@media (max-width: 720px) {
  .logo-mode-selector { grid-template-columns: 1fr; }
}

/* Vista previa compacta del logo activo, debajo del selector. */
.brand-logo-preview-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 6px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: rgba(20, 103, 139, .04);
}
.brand-logo-preview-label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px;
}
.brand-logo-preview-canvas {
  width: 220px; height: 90px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.brand-logo-preview-canvas img { max-width: 80%; max-height: 80%; object-fit: contain; }
.brand-logo-preview-empty { font-size: 12px; color: var(--muted); }
/* CTA contextual en la vista previa (Subir/Seleccionar logo): ocupa toda la
   caja del canvas para que se pulse de un vistazo. */
.brand-logo-preview-canvas { position: relative; }
.brand-preview-cta {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: none; background: transparent; cursor: pointer;
  color: #14678b; font-weight: 700; font-size: 13px; border-radius: 10px;
  transition: background .15s ease;
}
.brand-preview-cta:hover { background: rgba(20, 103, 139, .06); }
html[data-theme="dark"] .brand-preview-cta { color: #5fb0d6; }
html[data-theme="dark"] .brand-preview-cta:hover { background: rgba(255, 255, 255, .05); }
.brand-logo-preview-help { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }

/* Subpaneles: solo se muestra el activo (los demás llevan hidden). */
.logo-mode-panel[hidden] { display: none !important; }

/* Galería de logos predefinidos (preset). */
.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.preset-card {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 10px 8px;
  border: 1.5px solid var(--border);
  border-radius: 11px;
  background: var(--card-bg, #fff);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .08s;
}
.preset-card:hover {
  border-color: rgba(21, 152, 108, .45);
  box-shadow: 0 6px 16px rgba(11, 33, 54, .07);
}
.preset-card.is-active {
  border-color: var(--brand-green, #15986c);
  box-shadow: 0 0 0 3px rgba(21, 152, 108, .14);
}
.preset-card-thumb {
  width: 100%; aspect-ratio: 1 / 1;
  background: #fff;
  background-image:
    linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.preset-card-thumb img { max-width: 80%; max-height: 80%; object-fit: contain; }
/* Fondo oscuro para previsualizar los logos oscuros sobre un canvas que
   simula la pagina en modo oscuro. */
.preset-card-thumb-dark {
  background: #1a2332;
  background-image:
    linear-gradient(45deg, #25323f 25%, transparent 25%),
    linear-gradient(-45deg, #25323f 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #25323f 75%),
    linear-gradient(-45deg, transparent 75%, #25323f 75%);
}
.preset-card-name { font-size: 12.5px; font-weight: 600; color: #132d46; text-align: center; }
.preset-card-check {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-green, #15986c);
  color: #fff;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(21, 152, 108, .35);
}
.preset-card.is-active .preset-card-check { display: inline-flex; }

/* Resumen del preset elegido (siempre visible aunque el catalogo este cerrado) */
.preset-current-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 4px 12px;
}
.preset-current-thumb {
  width: 80px; height: 80px;
  border-radius: 10px;
  background: #fff;
  background-image:
    linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.preset-current-thumb img { max-width: 80%; max-height: 80%; object-fit: contain; }
.preset-current-empty { font-size: 11px; color: var(--muted); text-align: center; padding: 0 6px; }
.preset-current-info { display: flex; flex-direction: column; gap: 6px; }
.preset-current-name { font-size: 13.5px; font-weight: 600; color: #132d46; }

/* Catalogo colapsable (despliega al pulsar el boton) */
.preset-catalog {
  margin-top: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(20, 103, 139, .03);
}
.preset-catalog[hidden] { display: none !important; }
.preset-catalog-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.preset-catalog-header strong {
  font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px;
}
.preset-catalog-counter {
  flex: 1;
  font-size: 12px; color: var(--muted);
}
.preset-catalog-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg, #fff);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.preset-catalog-close:hover { border-color: var(--red, #b91c1c); color: var(--red, #b91c1c); }

.preset-pager {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.preset-pager-btn {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg, #fff);
  font-size: 13px; font-weight: 600;
  color: #132d46;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.preset-pager-btn:hover:not(:disabled) {
  border-color: var(--brand-green, #15986c);
  color: var(--brand-green, #15986c);
}
.preset-pager-btn:disabled { opacity: .45; cursor: not-allowed; }
.preset-pager-info {
  font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
  min-width: 60px; text-align: center;
}

html[data-theme="dark"] .preset-current-thumb {
  background: var(--surface-2);
  background-image:
    linear-gradient(45deg, #25323f 25%, transparent 25%),
    linear-gradient(-45deg, #25323f 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #25323f 75%),
    linear-gradient(-45deg, transparent 75%, #25323f 75%);
  border-color: var(--border);
}
html[data-theme="dark"] .preset-current-name { color: var(--text); }
html[data-theme="dark"] .preset-catalog {
  background: rgba(255,255,255,.03);
  border-color: var(--border);
}
html[data-theme="dark"] .preset-catalog-close,
html[data-theme="dark"] .preset-pager-btn {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}

/* Estado vacío de la galería de presets — elegante, no roto. */
.preset-empty {
  padding: 32px 18px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: rgba(20, 103, 139, .03);
}
.preset-empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(20, 103, 139, .08);
  color: var(--brand-primary, #14678b);
  margin-bottom: 10px;
}
.preset-empty-title { margin: 0 0 4px; font-size: 14.5px; font-weight: 700; color: #132d46; }
.preset-empty-help  { margin: 0; font-size: 13px; color: var(--muted); }

/* ── Mini-editor de marca: layout + tipografia ─────────────────── */
.brand-section-label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px;
  margin: 6px 0 8px;
}
.layout-selector {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.layout-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px 10px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg, #fff);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.layout-card:hover { border-color: rgba(21, 152, 108, .45); }
.layout-card.is-active {
  border-color: var(--brand-green, #15986c);
  box-shadow: 0 0 0 3px rgba(21, 152, 108, .14);
}
.layout-card-label { font-size: 12.5px; font-weight: 600; color: #132d46; }

/* Mock visual dentro de cada layout-card */
.layout-preview {
  width: 100%; height: 50px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(20, 103, 139, .06);
  border-radius: 8px;
}
.layout-preview-below { flex-direction: column; gap: 3px; }
.layout-logo-mock {
  display: inline-block; width: 22px; height: 22px;
  border-radius: 4px;
  background: var(--brand-primary, #14678b);
}
.layout-name-mock {
  display: inline-block; width: 46px; height: 8px;
  border-radius: 3px;
  background: rgba(20, 103, 139, .55);
}
.layout-preview-below .layout-name-mock { width: 34px; height: 6px; }
.layout-preview-hidden .layout-logo-mock { width: 26px; height: 26px; }

.font-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px;
}
.font-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg, #fff);
  color: #132d46;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.1;
  transition: border-color .12s, box-shadow .12s;
}
.font-card small {
  display: block;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0 !important;
  margin-top: 4px;
}
.font-card:hover { border-color: rgba(21, 152, 108, .45); }
.font-card.is-active {
  border-color: var(--brand-green, #15986c);
  box-shadow: 0 0 0 3px rgba(21, 152, 108, .14);
}

/* Preview de marca completa (logo + nombre con layout/font aplicados). */
.brand-mark-preview-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 16px;
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: rgba(20, 103, 139, .04);
}
.brand-mark-preview {
  display: flex; align-items: center; gap: 14px;
  min-height: 70px;
  padding: 8px 12px;
}
.brand-mark-preview[data-layout="below"] {
  flex-direction: column; gap: 8px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.brand-mark-preview[data-layout="below"] .brand-mark-logo,
.brand-mark-preview[data-layout="below"] .brand-mark-name {
  align-self: center;
  text-align: center;
  margin: 0 auto;
}
.brand-mark-preview[data-layout="hidden"] .brand-mark-name { display: none; }
.brand-mark-preview[data-layout="hidden"] {
  justify-content: center;
}
.brand-mark-logo {
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.brand-mark-preview[data-layout="below"] .brand-mark-logo {
  width: 70px; height: 70px;
}
.brand-mark-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-mark-logo-empty {
  font-size: 11px; color: var(--muted);
}
.brand-mark-name {
  font-size: 26px;
  font-weight: 700;
  color: #132d46;
  letter-spacing: -0.3px;
  line-height: 1.1;
}
/* Cuando la font es Bebas, neutralizamos algunos defaults heredados */
.brand-mark-name[data-font="bebas"] { letter-spacing: 1px; }

html[data-theme="dark"] .layout-card,
html[data-theme="dark"] .font-card {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .layout-card.is-active,
html[data-theme="dark"] .font-card.is-active {
  border-color: var(--brand-green, #15986c);
}
html[data-theme="dark"] .layout-card-label { color: var(--text); }
html[data-theme="dark"] .brand-mark-preview-wrap {
  background: rgba(255,255,255,.03);
  border-color: var(--border);
}
html[data-theme="dark"] .brand-mark-name { color: var(--text); }

/* ── Modo oscuro: selector de modo + preview + galeria ───────── */
html[data-theme="dark"] .logo-mode-card {
  background: var(--card);
  border-color: var(--border);
}
html[data-theme="dark"] .logo-mode-card:hover {
  border-color: rgba(21, 152, 108, .55);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}
html[data-theme="dark"] .logo-mode-card.is-active {
  border-color: var(--brand-green, #15986c);
}
html[data-theme="dark"] .logo-mode-title { color: var(--text); }
html[data-theme="dark"] .logo-mode-sub   { color: var(--muted); }
html[data-theme="dark"] .logo-mode-icon {
  background: rgba(21, 152, 108, .14);
  color: var(--brand-green, #15986c);
}

html[data-theme="dark"] .brand-logo-preview-wrap {
  background: rgba(255, 255, 255, .03);
  border-color: var(--border);
}
html[data-theme="dark"] .brand-logo-preview-label { color: var(--muted); }
html[data-theme="dark"] .brand-logo-preview-help  { color: var(--muted); }
html[data-theme="dark"] .brand-logo-preview-canvas {
  background: var(--surface-2);
  border-color: var(--border);
}
html[data-theme="dark"] .brand-logo-preview-empty { color: var(--muted); }

html[data-theme="dark"] .preset-card {
  background: var(--card);
  border-color: var(--border);
}
html[data-theme="dark"] .preset-card:hover {
  border-color: rgba(21, 152, 108, .55);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}
html[data-theme="dark"] .preset-card.is-active {
  border-color: var(--brand-green, #15986c);
}
html[data-theme="dark"] .preset-card-name { color: var(--text); }

html[data-theme="dark"] .preset-empty {
  background: rgba(255, 255, 255, .03);
  border-color: var(--border);
}
html[data-theme="dark"] .preset-empty-icon {
  background: rgba(20, 103, 139, .18);
  color: var(--brand-primary, #14678b);
}
html[data-theme="dark"] .preset-empty-title { color: var(--text); }
html[data-theme="dark"] .preset-empty-help  { color: var(--muted); }

/* Las previews del logo claro (con fondo blanco a cuadros) tambien deben
   ajustarse en modo oscuro. */
html[data-theme="dark"] .logo-preview {
  background-color: var(--surface-2);
  background-image:
    linear-gradient(45deg, #25323f 25%, transparent 25%),
    linear-gradient(-45deg, #25323f 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #25323f 75%),
    linear-gradient(-45deg, transparent 75%, #25323f 75%);
  border-color: var(--border);
}

.logo-upload-row {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.logo-preview {
  width: 180px; height: 110px;
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  border: 1px solid var(--border); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.logo-preview img {
  max-width: 88%; max-height: 88%; object-fit: contain;
}
.logo-preview-dark {
  background-color: #1f2937;
  background-image:
    linear-gradient(45deg, #374151 25%, transparent 25%),
    linear-gradient(-45deg, #374151 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #374151 75%),
    linear-gradient(-45deg, transparent 75%, #374151 75%);
}
.logo-empty {
  font-size: 12px; color: var(--muted);
}
.logo-actions {
  display: flex; flex-direction: column; gap: 8px;
}
.logo-delete-btn {
  color: var(--red, #b91c1c) !important; border-color: var(--red, #b91c1c) !important;
}

/* Color pickers */
.brand-colors {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
.color-field { display: flex; flex-direction: column; gap: 6px; }
.color-field > span {
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
}
.color-input-row { display: flex; gap: 10px; align-items: center; }
.color-input-row input[type="color"] {
  width: 56px; height: 40px; border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; padding: 2px; background: var(--card);
}
.color-input-row input[type="text"] {
  flex: 1; padding: 9px 12px; font-family: monospace;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text); font-size: 13px;
  text-transform: lowercase;
}
.brand-color-preview {
  display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap;
}
.brand-pill {
  padding: 9px 18px; border: 0; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: default; color: #fff;
}
.brand-pill-primary { background: var(--brand-primary, #14678b); }
.brand-pill-secondary { background: var(--brand-secondary, #19a677); }

/* Plantilla cards: auto-fit para 2 en mobile/tablet, 4 en desktop. */
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.template-card {
  border: 2px solid var(--border); border-radius: 12px;
  padding: 14px; cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  position: relative; background: var(--card);
}
.template-card:hover { border-color: var(--accent, #14678b); transform: translateY(-2px); }
/* Estilos PRO bloqueados para FREE: atenuados + badge PRO. */
.template-card.tpl-locked { opacity: .6; cursor: not-allowed; }
.template-card.tpl-locked:hover { border-color: var(--border); transform: none; box-shadow: none; }
.tpl-pro-badge {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  background: linear-gradient(135deg, #f0b429, #de911d); color: #3a2a00;
  font-size: 10px; font-weight: 800; letter-spacing: .3px;
  padding: 2px 7px; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.template-card input[type="radio"] {
  position: absolute; top: 12px; right: 12px;
  width: 18px; height: 18px; accent-color: var(--accent, #14678b);
  z-index: 2;
}
.template-card:has(input[type="radio"]:checked) {
  border-color: var(--accent, #14678b);
  box-shadow: 0 4px 14px rgba(20,103,139,.18);
}
/* Thumb = vista previa del estilo.
   Estructura: .template-thumb contiene .tp-mock (CSS fallback) + .tp-img
   (imagen real). Si la imagen carga, queda encima del mock; si no, onerror
   la elimina y queda visible el mock. Cero "icono roto". */
.template-thumb {
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  height: 200px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.02);
}
.tp-mock {
  position: absolute; inset: 0;
  padding: 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.tp-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #ffffff;
}

/* ============ CLASICA ============ */
.tp-cl-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  border-bottom: 1.5px solid #14678b;
  padding-bottom: 4px;
  margin-bottom: 4px;
}
.tp-cl-logo {
  display: inline-block;
  width: 28px; height: 12px;
  background: #d7e1ea;
  border-radius: 2px;
}
.tp-cl-num {
  font-size: 8px; font-weight: 700;
  color: var(--accent); letter-spacing: 0.3px;
}
.tp-cl-cols {
  height: 5px;
  background: linear-gradient(to right, #cfdde6 0%, #cfdde6 52%, #9bb8c9 52%, #9bb8c9 70%, #4f86a4 70%, #4f86a4 84%, #14678b 84%, #14678b 100%);
  margin-bottom: 3px;
  border-radius: 1px;
}
.tp-cl-row {
  height: 3px;
  background: #eef4f8;
  border-radius: 1px;
}
.tp-cl-fade {
  height: 5px;
  background: linear-gradient(to right, #cfdde6 0%, #cfdde6 52%, #9bb8c9 52%, #9bb8c9 70%, #4f86a4 70%, #4f86a4 84%, #14678b 84%, #14678b 100%);
  border-radius: 1px;
  margin-top: 1px; margin-bottom: 1px;
}

/* ============ MODERNA ============ */
.tp-md-header {
  display: flex; align-items: center; justify-content: space-between;
  background: #ffffff;
  border: 1px solid #d7e1ea;
  border-radius: 5px;
  padding: 4px 6px;
  margin-bottom: 4px;
  box-shadow: 0 2px 4px rgba(11, 33, 54, 0.04);
}
.tp-md-logo {
  display: inline-block;
  width: 26px; height: 10px;
  background: #d7e1ea; border-radius: 2px;
}
.tp-md-num {
  font-size: 11px; font-weight: 800;
  color: #15986c; letter-spacing: -0.2px;
}
.tp-md-total {
  display: flex; align-items: center; justify-content: space-between;
  background: #ffffff;
  border: 1px solid #d7e1ea;
  border-left: 4px solid #15986c;
  border-radius: 5px;
  padding: 5px 7px;
  margin-bottom: 5px;
  box-shadow: 0 2px 4px rgba(11, 33, 54, 0.04);
}
.tp-md-total-label {
  font-size: 7px; font-weight: 700; color: #617487;
  text-transform: uppercase; letter-spacing: 0.7px;
}
.tp-md-total-val {
  font-size: 12px; font-weight: 800; color: #15986c;
  letter-spacing: -0.3px;
}
.tp-md-card {
  background: #ffffff;
  border: 1px solid #d9e3ec;
  border-left: 3px solid #0b5f7f;
  border-radius: 4px;
  height: 24px;
  margin-bottom: 3px;
}
.tp-md-card-accent { border-left-color: #15986c; }
.tp-md-card-primary { border-left-color: #0b5f7f; }

/* ============ ACERO (industrial premium) ============ */
.template-thumb-acero {
  background: #fafafa;
}
.template-thumb-acero .tp-mock {
  padding: 8px 10px;
  gap: 0;
}
.tp-ac-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.tp-ac-logo {
  display: inline-block;
  width: 26px; height: 12px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 1px;
}
.tp-ac-doctype {
  width: 38%; height: 8px;
  background: #2a3744;
  border-radius: 0;
}
.tp-ac-bar {
  height: 3px;
  background: #2a3744;
  margin: 0 0 5px;
}
.tp-ac-parties {
  display: flex; gap: 6px;
  margin: 0 0 6px;
}
.tp-ac-party {
  flex: 1;
  height: 14px;
  background: linear-gradient(to bottom,
      transparent 0%, transparent 18%,
      #536270 18%, #536270 28%, transparent 28%, transparent 48%,
      #d1d5db 48%, #d1d5db 56%, transparent 56%, transparent 78%,
      #d1d5db 78%, #d1d5db 86%, transparent 86%, transparent 100%);
}
.tp-ac-ch-head {
  height: 9px;
  background: #2a3744;
  margin: 4px 0 0;
}
.tp-ac-line {
  height: 3px;
  background: #ffffff;
  border-bottom: 0.5px solid #d1d5db;
  margin: 0;
}
.tp-ac-ch-sub {
  height: 7px;
  background: #f0f2f4;
  border-left: 3px solid #2a3744;
  margin: 0 0 4px;
}
.tp-ac-total {
  height: 14px;
  background: #2a3744;
  margin: 4px 0 0;
}

/* ============ ROMANA (Editorial Monocromo + cobre) ============ */
.template-thumb-romana {
  background: #fafaf8;
}
.template-thumb-romana .tp-mock {
  padding: 9px 12px;
  gap: 0;
  align-items: center;
  text-align: center;
}
.tp-pr-logo {
  width: 28px; height: 10px;
  background: #1a1a1a;
  margin: 2px auto 6px;
  align-self: center;
}
.tp-pr-eyebrow {
  height: 3px; width: 36px;
  background: #a87355;
  margin: 0 auto 4px;
  align-self: center;
}
.tp-pr-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  font-weight: normal;
  color: #0a0a0a;
  letter-spacing: 2.5px;
  text-align: center;
  margin-bottom: 4px;
}
.tp-pr-rule {
  width: 18px; height: 1px;
  background: #a87355;
  margin: 0 auto 6px;
  align-self: center;
}
.tp-pr-parties {
  display: flex; gap: 6px;
  width: 100%;
  margin-bottom: 5px;
}
.tp-pr-party {
  flex: 1;
  height: 14px;
  border-left: 0.5px solid #d4d4d4;
  padding-left: 4px;
  background: linear-gradient(to bottom,
      transparent 0%, transparent 25%,
      #d4d4d4 25%, #d4d4d4 35%, transparent 35%, transparent 60%,
      #d4d4d4 60%, #d4d4d4 70%, transparent 70%, transparent 100%);
}
.tp-pr-party:first-child { border-left: 0; padding-left: 0; }
.tp-pr-sep {
  width: 14px; height: 1.5px;
  background: #a87355;
  margin: 4px 0 5px;
  align-self: flex-start;
}
.tp-pr-ch {
  align-self: stretch;
  display: flex;
  align-items: center;
  margin-top: 3px;
  margin-bottom: 2px;
}
.tp-pr-rom {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 11px;
  color: #a87355;
  margin-right: 6px;
}
.tp-pr-name {
  flex: 1;
  height: 4px;
  background: #1a1a1a;
}
.tp-pr-line {
  align-self: stretch;
  height: 2px;
  background: #d4d4d4;
  margin: 1px 0;
}
.tp-pr-line-short { width: 70%; align-self: flex-start; margin-left: 14px; }
.tp-pr-grand {
  margin-top: 6px;
  width: 100%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 8px;
  letter-spacing: 2.5px;
  text-align: center;
  color: #0a0a0a;
  border-top: 0.5px solid #a87355;
  border-bottom: 0.5px solid #a87355;
  padding: 4px 0;
  font-weight: normal;
}
.template-name {
  font-weight: 700; font-size: 14px;
  display: flex; align-items: center; gap: 8px;
}
.template-badge {
  display: none;  /* visible solo en la card cuyo radio esta checked */
  font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 99px;
  background: rgba(22, 199, 132, 0.12); color: var(--accent, #14678b);
  text-transform: uppercase; letter-spacing: .4px;
}
.template-card:has(input[type="radio"]:checked) .template-badge {
  display: inline-block;
}
.template-desc {
  font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 4px;
}

/* Toggle row simple */
.toggle-row {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
}
.toggle-row input[type="checkbox"] {
  margin-top: 4px;
  width: 18px; height: 18px; accent-color: var(--accent, #14678b);
}
.toggle-row-text { display: flex; flex-direction: column; gap: 4px; }
.toggle-row-text strong { font-size: 14px; }
.toggle-row-text small { font-size: 12px; color: var(--muted); }

/* Editor de "Condiciones generales" (textarea + acciones) */
.legal-note-details {
  margin-top: 14px;
  border-top: 1px solid var(--border, #d7e1ea);
  padding-top: 12px;
}
.legal-note-summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #14678b);
  padding: 6px 4px;
  list-style: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legal-note-summary::-webkit-details-marker { display: none; }
.legal-note-summary::before {
  content: '▸';
  font-size: 10px;
  transition: transform .15s;
  display: inline-block;
}
.legal-note-details[open] > .legal-note-summary::before { transform: rotate(90deg); }
.legal-note-editor {
  margin-top: 10px;
}
.legal-note-editor-hint {
  font-size: 12px;
  color: var(--muted, #617487);
  margin: 0 0 8px;
  line-height: 1.45;
}
.legal-note-editor-textarea {
  width: 100%;
  min-height: 220px;
  padding: 10px 12px;
  border: 1px solid var(--border, #d7e1ea);
  border-radius: 8px;
  background: var(--card, #ffffff);
  color: var(--text, #17334c);
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  resize: vertical;
  box-sizing: border-box;
}
.legal-note-editor-textarea:focus {
  outline: none;
  border-color: var(--accent, #14678b);
  box-shadow: 0 0 0 3px rgba(22, 199, 132, 0.12);
}
.legal-note-editor-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .brand-colors, .template-grid { grid-template-columns: 1fr; }
  .logo-upload-row { flex-direction: column; align-items: stretch; }
  .logo-preview { width: 100%; }
  .logo-actions { flex-direction: row; }
}

/* ─── Bg removal modal ─── */
.bg-remover-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 20px;
}
.bg-remover-dialog {
  background: var(--card); border-radius: 14px;
  max-width: 720px; width: 100%; max-height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.bg-remover-head {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.bg-remover-head h2 { font-size: 16px; margin: 0; }
.bg-remover-body { padding: 18px 20px; overflow: auto; }
.bg-remover-instr {
  font-size: 13px; color: var(--muted); margin-bottom: 14px; line-height: 1.5;
}
.bg-remover-canvas-wrap {
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  border: 1px solid var(--border); border-radius: 10px;
  text-align: center; padding: 12px;
  cursor: crosshair;
}
.bg-remover-canvas-wrap canvas { max-width: 100%; height: auto; }
.bg-remover-controls {
  display: flex; align-items: center; gap: 14px; margin-top: 14px;
  flex-wrap: wrap;
}
.bg-remover-tolerance {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 220px;
}
.bg-remover-tolerance input[type="range"] { flex: 1; }
.bg-remover-foot {
  padding: 14px 20px; border-top: 1px solid var(--border);
  display: flex; gap: 10px; justify-content: flex-end;
}

/* === Panel admin (sec-admin) ============================================ */
.admin-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.admin-card {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 10px; padding: 14px 16px;
}
.admin-card-label { font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.admin-card-value {
  font-size: 22px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; margin-top: 4px;
}
.admin-card-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.admin-table {
  width: 100%; border-collapse: collapse; margin-top: 12px;
  font-size: 12.5px;
}
.admin-table th, .admin-table td {
  padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left;
}
.admin-table th { background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--muted); font-weight: 600; }
.admin-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table-users { font-size: 11.5px; }
.admin-meta { margin-top: 12px; font-size: 11px; color: var(--muted); text-align: right; }

/* ─── Editor de tarifas en MÓVIL (pantalla completa, solo sección editor) ───
   El shell de /app es un grid de 3 columnas (sidebar·main·panel) de escritorio;
   en móvil el main quedaba a 0. Aquí, SOLO en el editor (body[data-section=editor]),
   pasamos a 1 columna a todo el ancho y sacamos sidebar y panel como overlays.
   El resto de /app no se toca (su experiencia móvil es /m). */
@media (max-width: 820px) {
  body[data-section="editor"] .saas-layout,
  body[data-section="editor"] .saas-layout.no-panel,
  body[data-section="editor"].sb-closed .saas-layout,
  body[data-section="editor"].sb-closed .saas-layout.no-panel {
    grid-template-columns: 1fr !important;
  }
  /* Sidebar como cajón deslizante; oculto por defecto (sb-closed al entrar). */
  body[data-section="editor"] .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 270px; max-width: 84vw;
    z-index: 80; transform: translateX(-115%); transition: transform .25s ease;
    border-radius: 0; margin: 0;
  }
  body[data-section="editor"]:not(.sb-closed) .sidebar {
    transform: translateX(0); box-shadow: 0 0 50px rgba(0,0,0,.45);
  }
  body[data-section="editor"] #mainArea { width: 100%; }
  /* Panel de crear/editar → hoja inferior overlay, SOLO cuando hay form abierto
     (#dynamicPanelContent contiene .wy-edit-pane). Si no, oculto. */
  body[data-section="editor"] #detailPanel { display: none; }
  body[data-section="editor"] #detailPanel:has(.wy-edit-pane) {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; max-width: 100%; max-height: 90vh; z-index: 78; overflow: auto;
    border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.32);
  }
  /* Footer (Cancelar/Guardar) SIEMPRE visible al pie de la hoja: en formularios
     altos (precio+días+multiplicador+incompatibilidades) Guardar quedaba bajo el
     fondo y había que hacer scroll. Sticky → siempre alcanzable. */
  body[data-section="editor"] #detailPanel .wy-edit-foot {
    position: sticky; bottom: 0; margin-top: 12px; padding: 12px 0 4px;
    background: var(--card, #fff); border-top: 1px solid var(--border, #e2e8f0);
    z-index: 2;
  }
  html[data-theme="dark"] body[data-section="editor"] #detailPanel .wy-edit-foot {
    background: #151b2d;
  }
  /* El lienzo del editor a todo el ancho y con scroll propio. */
  body[data-section="editor"] .editor-main { overflow: auto; }
}