/* ═══════════════════════════════════════════════════════════════
   PresupuestasPro — Design System
   Mobile-first, gremios-focused
═══════════════════════════════════════════════════════════════ */

/* ── A11y utilities ── */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: 8px;
  background: #1a3562; color: #fff; padding: 10px 16px;
  border-radius: 0 0 8px 8px; font-weight: 700; font-size: .85rem;
  z-index: 100000; text-decoration: none;
  transition: top .15s ease;
  min-height: 44px; display: inline-flex; align-items: center;
}
.skip-link:focus { top: 0; outline: 3px solid #f59e0b; }

/* ── Footer ── */
.app-footer {
  padding: 18px 16px calc(env(safe-area-inset-bottom,0px) + 18px);
  text-align: center; font-size: .78rem; color: #6b7280;
  background: #f9fafb; border-top: 1px solid #e5e7eb;
}
.app-footer p { margin: 0; }
.app-footer a { color: #1d4ed8; text-decoration: none; }
.app-footer a:hover { text-decoration: underline; }
@media (min-width: 1024px) {
  .app-footer { padding-bottom: 24px; }
}

:root {
  --blue:     #1e40af;
  --blue-l:   #3b82f6;
  --blue-xl:  #dbeafe;
  --orange:   #f97316;
  --orange-l: #fed7aa;
  --green:    #16a34a;
  --green-l:  #dcfce7;
  --red:      #dc2626;
  --red-l:    #fee2e2;
  --yellow:   #d97706;
  --yellow-l: #fef3c7;
  --gray-0:   #f8fafc;
  --gray-1:   #f1f5f9;
  --gray-2:   #e2e8f0;
  --gray-3:   #cbd5e1;
  --gray-4:   #94a3b8;
  --gray-5:   #64748b;
  --gray-6:   #475569;
  --gray-7:   #334155;
  --gray-8:   #1e293b;
  --gray-9:   #0f172a;
  --white:    #ffffff;

  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.16);

  --nav-h: 64px;
  /* BANNER-BAJO-LA-CABECERA-2026-09-03: `--header-base-h` es lo que mide la CABECERA;
     `--header-h` es lo que OCUPA el cromo fijo de arriba (cabecera + barra de verificacion, si la
     hay). Todo calc() de este fichero quiere lo segundo, y solo `.app-header` quiere lo primero.
     Un dato, un dueño: `body.pp-verify-bar` mueve `--header-h` y todo lo demas se recoloca solo. */
  --header-base-h: 56px;
  --header-h: var(--header-base-h);  /* Redesign v5: header compacto (antes 143px con logo gigante) */
  --verify-bar-h: 34px;
  --transition: .18s cubic-bezier(.4,0,.2,1);
  --sat: env(safe-area-inset-top, 0px);
  /* ── Los botones flotantes (FAB), en UN sitio ──────────────────────────────────────────
     Su posicion vivia repetida en el `style=` de cada boton en app.html, y la holgura que
     hay que dejar por debajo para que no tapen nada era OTRO numero suelto en otra regla.
     Dos numeros que tienen que cuadrar = un gemelo esperando. Ahora quien reserva hueco lee
     --fab-alcance: si el FAB sube, la holgura sube con el. */
  --fab-size: 52px;
  --fab-soporte-bottom: 90px;
  --fab-voz-bottom: 150px;
  --fab-alcance: calc(var(--fab-voz-bottom) + var(--fab-size));   /* 202px sobre el borde */
  --sab: env(safe-area-inset-bottom, 0px);

  /* ── Redesign v4 — Sistema tricolor metalizado ── */
  --g-orange: linear-gradient(135deg, #ffb06b 0%, #ff8c42 28%, #e35d1f 58%, #6b2408 85%, #1a0a04 100%);
  --g-orange-soft: linear-gradient(135deg, #ffb06b 0%, #e35d1f 100%);
  --g-orange-dark: linear-gradient(135deg, #e35d1f 0%, #8a3710 50%, #1a0a04 100%);
  --g-rose: linear-gradient(135deg, #f9d4c4 0%, #e6a89b 28%, #c9857b 55%, #5a3a35 85%, #1a0d0a 100%);
  --g-rose-soft: linear-gradient(135deg, #f9d4c4 0%, #c9857b 100%);
  --g-rose-dark: linear-gradient(135deg, #c9857b 0%, #6b443e 50%, #1a0d0a 100%);
  --g-blue: linear-gradient(135deg, #6ea0e8 0%, #3b6cc2 32%, #1a3562 62%, #0a1733 88%, #050914 100%);
  --g-blue-soft: linear-gradient(135deg, #3b6cc2 0%, #1a3562 100%);
  --g-blue-dark: linear-gradient(135deg, #1a3562 0%, #0a1733 50%, #050914 100%);
  --c-orange: #e35d1f;
  --c-rose:   #c9857b;
  --c-blue:   #1a3562;
  --tint-orange: linear-gradient(135deg,#fff7ed,#fed7aa);
  --tint-rose:   linear-gradient(135deg,#fdf5f2,#f9d4c4);
  --tint-blue:   linear-gradient(135deg,#eff6ff,#c7d7f0);
  --glow-orange: 0 8px 20px rgba(227,93,31,.35), 0 3px 8px rgba(227,93,31,.2), inset 0 1px 0 rgba(255,255,255,0.4);
  --glow-rose:   0 8px 20px rgba(201,133,123,.4), 0 3px 8px rgba(201,133,123,.25), inset 0 1px 0 rgba(255,255,255,0.5);
  --glow-blue:   0 8px 20px rgba(26,53,98,.5), 0 3px 8px rgba(26,53,98,.3), inset 0 1px 0 rgba(255,255,255,0.25);

  /* Theme tokens (mapped per theme) */
  --bg:           #ffffff;
  --bg-elev:      #ffffff;
  --bg-card:      #ffffff;
  --brand-wordmark: #1a3562;   /* MARCA-OSCURO-2026-08-26: el «Presupuest» del logotipo escrito */
  --bg-input:     #ffffff;
  --fg:           #0f172a;
  --fg-muted:     #475569;
  --border:       #e2e8f0;
  --accent:       #1e40af;
  --accent-soft:  #dbeafe;
  --metallic-1:   linear-gradient(135deg,#1e40af,#3b82f6);
  --metallic-2:   linear-gradient(135deg,#0f172a,#1e3a8a 45%,#3b82f6);

  /* ── Redesign v5 — Tokens del handoff (alias semánticos para evitar duplicación) ── */
  --grad-orange:  var(--g-orange);
  --grad-rose:    var(--g-rose);
  --grad-blue:    var(--g-blue);
  --grad-gold:    linear-gradient(135deg, #fde68a 0%, #fbbf24 40%, #d97706 100%);

  /* Estados semánticos para chips de presupuesto */
  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-error:   #dc2626;
  --color-info:    #1d4ed8;

  --status-draft-fg:    #475569; --status-draft-bg:    #f1f5f9; --status-draft-bar:    #94a3b8;
  --status-sent-fg:     #92400e; --status-sent-bg:     #fef3c7; --status-sent-bar:     #f59e0b;
  --status-accepted-fg: #166534; --status-accepted-bg: #dcfce7; --status-accepted-bar: #16a34a;
  --status-rejected-fg: #991b1b; --status-rejected-bg: #fee2e2; --status-rejected-bar: #dc2626;

  /* Radios semánticos */
  --radius-sm: 9px;
  --radius-md: 13px;
  --radius-lg: 18px;

  /* Tipografía base + spacing del header compacto */
  --header-bg:    #ffffff;
  --header-bg-dark: var(--g-blue-dark);
  --header-fg:    #0f172a;
  --header-fg-dark: #ffffff;
  --kicker-fg:    #64748b;     /* "PRESUPUESTOS"  uppercase */
  --kicker-tracking: 1.2px;
}

/* ═══ DARK THEME — Premium metallic ═══ */
/* TEMA-OSCURO-CALIDO-2026-08-24 — paleta del handoff de rediseño, con el azul de la marca.
   El fondo deja de ser azul marino y pasa a un negro CALIDO (#12100e): de noche, en la furgoneta,
   un negro puro deslumbra. Las superficies suben en marron oscuro en vez de en azul, y el acento
   deja de ser dorado y pasa al azul claro `#8fb2e8` — el `steel` del handoff, dimensionado para
   este fondo. (El naranja del handoff cambiaria la marca; decision del dueño: se queda el azul.) */
body.dark {
  --bg:           #12100e;
  --bg-elev:      #1e1a17;
  --bg-card:      #1e1a17;
  --brand-wordmark: #f6f1ea;   /* en oscuro, blanco: el azul marino no se lee sobre casi negro */
  --bg-input:     #262119;
  --fg:           #f6f1ea;
  --fg-muted:     #948a81;
  --border:       #3a332c;
  --accent:       #8fb2e8;       /* azul de marca, legible sobre fondo cálido */
  --accent-soft:  rgba(143,178,232,.15);

  --blue:    #8fb2e8;
  --blue-l:  #2b3f5c;
  --blue-xl: #1c2733;
  --green:   #5cd699;
  --green-l: #14251a;
  --orange:  #ffc46b;
  --orange-l:#26200f;
  --red:     #ff8b83;
  --red-l:   #2a1615;

  --gray-0: #17130f;
  --gray-1: #1e1a17;
  --gray-2: #3a332c;
  --gray-3: #574d44;
  --gray-4: #7b706a;
  --gray-5: #948a81;
  --gray-6: #c3b8ae;
  --gray-7: #ddd3c9;
  --gray-8: #efe8e0;
  --gray-9: #f6f1ea;
  --white:  #1e1a17;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.35);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.6), 0 4px 8px rgba(0,0,0,.4);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.7);

  --metallic-1: linear-gradient(135deg,#8fb2e8 0%,#d6e4fa 35%,#8fb2e8 70%,#3f5f8f 100%);
  --metallic-2: linear-gradient(135deg,#262119 0%,#3a332c 40%,#574d44 70%,#262119 100%);
  --metallic-3: linear-gradient(135deg,#574d44 0%,#c3b8ae 50%,#574d44 100%);

  background: radial-gradient(circle at 20% 0%, #241e19 0%, #12100e 60%) fixed;
  color: var(--fg);
}
body.dark .app-header {
  background: linear-gradient(180deg,#1e1a17 0%,#12100e 100%);
  border-bottom: 1px solid #262119;
  color: var(--fg);
}
body.dark .app-header h1, body.dark #headerText { color: var(--fg); }
body.dark .btn-icon { color: #c3b8ae; }
body.dark .btn-icon:hover { background: rgba(143,178,232,.1); }
body.dark .bottom-nav {
  background: linear-gradient(180deg,#1e1a17 0%,#12100e 100%);
  border-top: 1px solid #262119;
  box-shadow: 0 -4px 20px rgba(0,0,0,.5);
}
body.dark .nav-item { color: #948a81; }
body.dark .nav-item.active { color: #8fb2e8; }
body.dark .nav-fab .nav-icon-wrap {
  background: linear-gradient(135deg,#8fb2e8 0%,#d6e4fa 50%,#5b7fb8 100%);
  box-shadow: 0 4px 18px rgba(143,178,232,.45), inset 0 1px 0 rgba(255,255,255,.5);
}
body.dark .card,
body.dark .budget-card,
body.dark .pro-card,
body.dark .settings-item,
body.dark .quick-tile,
body.dark .extra-cond-item,
body.dark .doc-type-btn,
body.dark .budget-type-option {
  background: var(--bg-card);
  color: var(--fg);
  border-color: var(--border);
}
body.dark .card:hover,
body.dark .budget-card-v3:hover,
body.dark .budget-card:hover,
body.dark .pro-card:hover,
body.dark .settings-item:hover { background: #262119; border-color: #574d44; }
body.dark .form-input,
body.dark .form-select,
body.dark .form-textarea {
  background: var(--bg-input);
  color: var(--fg);
  border-color: var(--border);
}
body.dark .form-input:focus,
body.dark .form-select:focus,
body.dark .form-textarea:focus { border-color: #8fb2e8; box-shadow: 0 0 0 3px rgba(143,178,232,.18); }
body.dark .form-input::placeholder,
body.dark .form-textarea::placeholder { color: #5b6982; }
body.dark .form-label { color: #c3b8ae; }
body.dark .modal {
  background: linear-gradient(180deg,#1e1a17 0%,#0e1428 100%);
  color: var(--fg);
  border: 1px solid #3a332c;
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
body.dark .modal-overlay { background: rgba(0,0,0,.7); }
body.dark .modal-handle { background: #574d44; }
body.dark .modal-header,
body.dark .modal-title { color: var(--fg); border-color: #3a332c; }
body.dark .drawer { background: linear-gradient(180deg,#1e1a17 0%,#12100e 100%); color: var(--fg); }
body.dark .drawer-item { color: #c3b8ae; }
body.dark .drawer-group-label { color: #4b6080; }
body.dark .drawer-item:hover { background: rgba(143,178,232,.08); color: #8fb2e8; }
body.dark .drawer-name { color: #f3e9c7; }
body.dark .drawer-email { color: #948a81; }
body.dark .drawer-avatar {
  background: linear-gradient(135deg,#8fb2e8 0%,#d6e4fa 50%,#5b7fb8 100%);
  box-shadow: 0 0 14px rgba(143,178,232,.4);
}
body.dark .drawer-sep { background: #3a332c; }
body.dark .btn-primary {
  background: linear-gradient(135deg,#8fb2e8 0%,#8fb2e8 50%,#8fb2e8 100%);
  color: #fff;
  border: 1px solid #2c4ed8;
  box-shadow: 0 4px 14px rgba(59,130,246,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
body.dark .btn-success { background: linear-gradient(135deg,#15803d 0%,#5cd699 100%); border-color:#5cd699; }
body.dark .btn-orange  { background: linear-gradient(135deg,#b45309 0%,#ffc46b 50%,#b45309 100%); border-color:#92400e; }
body.dark .btn-ghost { color: #c3b8ae; }
body.dark .btn-ghost:hover { background: rgba(143,178,232,.08); color: #8fb2e8; }
body.dark .btn-outline { color: #c3b8ae; border-color: #574d44; background: transparent; }
body.dark .btn-outline:hover { border-color: #8fb2e8; color: #8fb2e8; }
body.dark .filter-tab { color: #948a81; }
body.dark .filter-tab.active { color: #8fb2e8; border-color: #8fb2e8; }
body.dark .search-bar { background: var(--bg-input); border-color: var(--border); }
body.dark .search-bar input { color: var(--fg); }
body.dark .search-icon { color: #948a81; }
body.dark .badge-draft    { background:#3a3022;color:#ffc46b; }
body.dark .badge-sent     { background:#1e2a4d;color:#7cabff; }
body.dark .badge-accepted { background:#13301f;color:#4ade80; }
body.dark .badge-rejected { background:#3a1818;color:#fca5a5; }
body.dark .badge-invoiced { background:#221a3a;color:#c4b5fd; }
body.dark .section-title { color: #efe8e0; }
body.dark .premium-banner {
  background: linear-gradient(135deg,#12100e 0%,#262119 50%,#12100e 100%);
  border: 1px solid #8fb2e8;
  box-shadow: 0 8px 28px rgba(143,178,232,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
body.dark .premium-banner h3 { color: #8fb2e8; }
body.dark .quick-tile-ico { box-shadow: 0 4px 12px rgba(0,0,0,.5); }
body.dark .empty-state { color: #948a81; }
body.dark .empty-icon { opacity: .85; }
body.dark hr, body.dark .divider { border-color: #3a332c; }
body.dark code, body.dark pre { background: #12100e; color: #8fb2e8; }
body.dark .toast { background:#262119;color:#efe8e0;border:1px solid #3a332c; }
body.dark .toast-success { border-color:#5cd699; }
body.dark .toast-error   { border-color:#ff8b83; }
body.dark .toast-info    { border-color:#8fb2e8; }
body.dark .totals-row { color: var(--fg); }
body.dark .totals-row.total-final { color: #8fb2e8; }
body.dark .filter-tabs { background: transparent; }
body.dark a { color: #ffc46b; }
body.dark .hero-redpro { background: var(--g-blue); }
body.dark #updateBanner { background: linear-gradient(135deg,#262119,#3a332c); }
body.dark #guideSnackbar { background: linear-gradient(135deg,#1e1a17,#262119); border:1px solid #3a332c; }
body.dark .input-unit { background: var(--bg-input); }
body.dark .unit-label { color: #948a81; background: transparent; }
body.dark img.logo, body.dark #headerLogo { filter: brightness(0) invert(0.92); }

/* ── Redesign v4 — Hero / banners / FAB ── */
.hero-blue {
  background: var(--g-blue);
  color: #fff;
  border-radius: 16px;
  padding: 18px 16px;
  box-shadow: var(--glow-blue);
  position: relative;
  overflow: hidden;
}
.hero-blue h1, .hero-blue h2, .hero-blue h3 { color: #fff; }

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* NO ponemos overflow-x: hidden aquí porque la spec CSS computa overflow-y a
     auto cuando overflow-x es hidden, convirtiendo html en scroll-container
     interno que rompe el scroll natural del viewport en algunos layouts.
     Mantenemos overflow-x: hidden solo en body — suficiente para evitar scroll
     lateral por componentes desbordados. */
  width: 100%;
}
/* Solo override defensivo: si algo (modal, lib) intenta forzar overflow:hidden inline en body, lo neutralizamos. NO tocamos height — la altura natural del navegador ("auto" implícita en html) es la que permite el scroll del viewport. */
body[style*="overflow: hidden"], body[style*="overflow:hidden"] { overflow-y: auto !important; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--gray-0);
  color: var(--gray-8);
  line-height: 1.5;
  min-height: 100vh;
  padding-top: calc(var(--header-h) + var(--sat));
  padding-bottom: calc(120px + max(var(--sab), 16px)); /* U-04: contenido scrollable bajo voiceFab (bottom:150px+sab -> 92px sobre nav; 120px = 28px buffer) */
  overscroll-behavior: none;
  /* overflow-x: hidden hacía que el navegador computara overflow-y a 'auto'
     (spec CSS), convirtiendo body en scroll-container falso. Como su contenido
     es exactamente del tamaño de body, no hay overflow real, y los eventos de
     wheel se consumían sin scrollear nada — bug crítico que rompía el scroll
     en pantallas como plantillas/ajustes. overflow-x: clip recorta visualmente
     pero NO crea scroll-container, así el wheel pasa a html que sí scrollea. */
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
}
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ── Scrollbar (desktop) ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-3); border-radius: var(--r-full); }

/* ════════════════════════════════════
   LAYOUT
════════════════════════════════════ */
#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
}

/* ── Header ── */
/* ── Header compacto v5 (56px sin notch, +safe-area-top en iPhone) ── */
.app-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 100;
  height: calc(var(--header-base-h) + var(--sat));  /* la cabecera mide LA CABECERA, no el cromo */
  padding-top: var(--sat);
  background: var(--header-bg);
  color: var(--header-fg);
  display: flex;
  align-items: center;
  padding-left: 8px;
  padding-right: 8px;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  border-bottom: 1px solid var(--border);
}
/* Variante dark — gradiente azul metalizado para pantallas con hero (Home, Empresa) */
.app-header.dark {
  background: var(--header-bg-dark);
  color: var(--header-fg-dark);
  border-bottom-color: rgba(255,255,255,0.08);
}
.app-header.dark h1, .app-header.dark #headerText { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.app-header.dark .header-kicker { color: rgba(255,255,255,.65); }
.app-header.dark .btn-icon { color: #fff; }

/* El title central — kicker (uppercase pequeño) + título principal */
/* BRANDING 2026-08-06: centrado. La cabecera pasa a mostrar "PresupuestAPP" con la pantalla
   actual encima en versalitas, en vez de solo el nombre de la pantalla alineado a la izquierda. */
#headerTitle {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  min-width: 0;
  gap: 2px;
  padding: 0 4px;
}
.header-kicker {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: var(--kicker-tracking);
  text-transform: uppercase;
  color: var(--kicker-fg);
  line-height: 1;
  /* CABECERA-QUE-CABE-2026-09-03: el rotulo NO tenia control de desbordamiento. `#headerTitle`
     encoge (flex:1, min-width:0) pero un hijo sin recorte estira la caja por encima de los
     botones: medido a 390 px, «NUEVO PRESUPUESTO» ocupaba x 73-155 y pisaba el «‹» (58-102).
     El titulo de debajo ya se recortaba con elipsis desde siempre; este no. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.app-header h1, #headerText {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -.3px;
  color: var(--c-blue) !important;
  background: linear-gradient(135deg, #1a3562 0%, #3b6cc2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: left;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Logo gigante deshabilitado en el header — el espacio se reserva para el título */
#headerLogo { display: none !important; }
.btn-icon.active {
  background: var(--tint-blue);
  color: var(--c-blue);
}
.btn-icon.active::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 2px;
  background: var(--c-orange);
  border-radius: 2px;
}
.btn-icon { position: relative; }
.app-header .header-actions {
  display: flex;
  gap: 4px;
}
.header-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-auto-rows: 36px;
  gap: 4px;
  padding-right: 4px;
  flex-shrink: 0;
}
.header-actions-grid .btn-icon {
  width: 36px;
  height: 36px;
  font-size: 1.05rem;
  min-width: 44px;
  min-height: 44px;
}
.btn-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: background var(--transition);
  color: #1a3562;
}
.btn-icon:hover, .btn-icon:active { background: rgba(26,53,98,.08); }
.btn-back {
  font-size: 1.5rem;
  color: #1a3562;
  line-height: 1;
  font-weight: 700;
}

/* ── Bottom Nav v3 (7 tabs + FAB calc oro rosa) ── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: calc(58px + var(--sab));
  padding: 0 4px;
  padding-bottom: var(--sab);
  background: var(--white);
  border: none;
  border-top: 1px solid var(--gray-2);
  border-radius: 0;
  display: flex;
  align-items: stretch;
  z-index: 200;
  box-shadow: 0 -4px 18px rgba(15,23,42,.08);
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 4px 1px 6px;
  min-width: 44px;
  min-height: 44px;
  color: var(--gray-4);
  font-size: .68rem !important;
  font-weight: 600;
  letter-spacing: -0.1px;
  transition: color var(--transition);
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-item .nav-svg { width: 22px; height: 22px; line-height: 1; flex-shrink: 0; }
.nav-item .nav-icon { font-size: 1.15rem; line-height: 1; }
.nav-item span:not(.nav-icon-wrap):not(.nav-icon) { font-size: .68rem; line-height: 1; }
.nav-item.active { color: var(--c-blue); }
.nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  background: var(--g-blue-soft);
  border-radius: 0 0 var(--r-full) var(--r-full);
}
.nav-item.nav-fab {
  color: var(--white);
  position: relative;
  overflow: visible;
}
.nav-item.nav-fab .nav-icon-wrap {
  width: 56px;
  height: 56px;
  background: var(--g-rose-soft);
  border: 3px solid #fff;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: var(--glow-rose);
  transition: transform var(--transition), box-shadow var(--transition);
  transform: translateY(-22px);
  position: relative;
  overflow: hidden;
}
.nav-item.nav-fab:active .nav-icon-wrap {
  transform: translateY(-22px) scale(.93);
  box-shadow: 0 2px 8px rgba(201,133,123,.4);
}
.nav-item.nav-fab.active::before { display: none; }

/* ── Screens ── */
.screen {
  display: none;
  padding: 24px 16px 32px;
  animation: fadeInUp .22s ease;
}

/* Margen inferior para que el contenido no quede tapado por la barra de navegación
   en modo standalone (PWA/APK) y en navegador móvil.
   Usa --nav-h (64px) + --sab (safe-area-inset-bottom, para Android gesture nav). */
@media (max-width: 1023px) {
  .screen.active {
    padding-bottom: calc(var(--nav-h, 64px) + var(--sab, 0px) + 16px);
  }
}
.screen.active { display: block; }
/* N16-1: las pantallas no activas no se renderizan (corta layout y paint).
   Reduce coste de los 16 paneles ocultos sin refactor SPA completo.
   Cuando .active se anade, la regla deja de aplicar y vuelve a renderizar. */
.screen:not(.active) { content-visibility: hidden; contain-intrinsic-size: 0 800px; pointer-events: none !important; }
.screen:not(.active) * { transition: none !important; animation: none !important; }
.screen.full-screen {
  padding: 0;
  display: none;
  flex-direction: column;
  height: calc(100dvh - var(--header-h) - var(--nav-h) - var(--sat));
  overflow: hidden;
}
.screen.full-screen.active {
  display: flex;
}
/* FIX-WIZARD-MARGIN: full-screen wizard no hereda el padding-bottom !important del media browser */
.screen.full-screen.active {
  padding: 0 !important; /* overrides @media browser !important */
}
.screen.full-screen .wizard-content-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* FAB-A-CABECERA-2026-08-23: aqui se reservaban ~88px para que el contenido no acabase
     debajo de los dos botones flotantes. Ya no flotan --estan en la cabecera-- asi que ese
     hueco era pantalla en blanco al final del asistente: se queda la holgura normal.
     Ojo: la reserva NUNCA protegio a la barra de acciones, que es FIJA y no scrollea con el
     contenido. Por eso los circulos la tapaban igual con los 88px puestos.
     Si alguien vuelve a poner un flotante anclado abajo, hay que devolver la reserva: lo
     vigila test_fab_no_tapa_acciones.js, que exige que las dos cosas vayan juntas. */
  padding-bottom: calc(16px + var(--sab));
}

/* M-02 2026-06-30: entrada de pantalla SOLO deslizamiento (sin opacity:0). Antes, si el primer paint
   de una pantalla grande coincidía con jank del hilo, los frames perdidos dejaban la pantalla en
   opacity 0 = BLANCA (render en blanco al abrir detalle desde Recientes). Sin opacity nunca es invisible. */
@keyframes fadeInUp {
  from { transform: translateY(8px); }
  to   { transform: translateY(0); }
}

/* ════════════════════════════════════
   COMPONENTS
════════════════════════════════════ */

/* ── Cards ── */
.card {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-2);
  overflow: hidden;
}
.card-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--gray-1);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray-5);
}
.card-body { padding: 14px 16px; }

/* ── Budget Cards ── */
.budget-card {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-2);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow var(--transition), transform var(--transition);
  cursor: pointer;
  position: relative;
}
.budget-card:hover { box-shadow: var(--shadow-md); border-color: #c7d2fe; }
.budget-card:active {
  transform: scale(.98);
  box-shadow: var(--shadow-md);
}
.budget-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.budget-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--gray-1);
}

/* ── Status Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-draft    { background: var(--gray-1);    color: var(--gray-6); }
.badge-sent     { background: var(--blue-xl);   color: var(--blue); }
.badge-accepted { background: var(--green-l);   color: var(--green); }
.badge-rejected { background: var(--red-l);     color: var(--red); }
.badge-invoiced { background: var(--yellow-l);  color: var(--yellow); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 20px;
  min-height: 44px;
  border-radius: var(--r-md);
  font-size: .9rem;
  font-weight: 600;
  transition: transform, opacity, background-color, color, border-color, box-shadow var(--transition);
  white-space: nowrap;
  line-height: 1;
}
.btn:active { transform: scale(.96); }
.btn-primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(30,64,175,.3);
}
.btn-primary:hover { background: #1d3a9e; }
.btn-orange {
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(249,115,22,.3);
}
.btn-orange:hover { background: #ea6c0a; }
.btn-success {
  background: var(--green);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(22,163,74,.25);
}
.btn-outline {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--blue);
}
.btn-ghost {
  background: var(--gray-1);
  color: var(--gray-7);
}
.btn-secondary {
  background: #f3f4f6;
  color: #374151;
  border: 1.5px solid #d1d5db;
}
.btn-ghost:hover { background: var(--gray-2); }
.btn-danger {
  background: var(--red);
  color: var(--white);
}
.btn-sm {
  padding: 7px 13px;
  font-size: .8rem;
  border-radius: var(--r-sm);
  min-height: 24px;
  min-width: 24px;
}
/* I4 WCAG 2.5.5: safety net touch target 24×24 mínimo en cualquier button */
button:not(.no-min-size) { min-width: 24px; min-height: 24px; }
/* BUG-16: nav-item buttons need 44px; button.nav-item (0-1-1) beats button:not(.no-min-size) (0-1-1) by source order */
button.nav-item { min-height: 44px; }

/* WCAG 2.5.5: en dispositivos táctiles, btn-sm mínimo 44×44 px */
@media (pointer: coarse) {
  .btn-sm {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  button:not(.no-min-size) { min-height: 44px; min-width: 44px; }
}
.btn-full { width: 100%; }
.btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-group .btn { flex: 1; }
#step4BtnGroup { flex-wrap: wrap; }
#step4BtnGroup .btn-success { flex: 1 1 100%; }

/* ── Form Elements ── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--gray-6);
  display: flex;
  align-items: center;
  gap: 5px;
}
.form-label .required { color: var(--red); }
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--gray-2);
  border-radius: var(--r-md);
  font-size: 1rem;
  color: var(--gray-8);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--blue-l);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.form-input::placeholder { color: var(--gray-3); }
.form-input[type="number"]::-webkit-inner-spin-button,
.form-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.form-input[type="number"] { -moz-appearance: textfield; }
.form-textarea { resize: vertical; min-height: 80px; }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2394a3b8' d='M7 7l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
  padding-right: 36px;
}
.form-row {
  display: grid;
  gap: 10px;
}
.form-row-2 { grid-template-columns: 1fr 1fr; }
.form-hint {
  font-size: .75rem;
  color: var(--gray-4);
}
.input-unit {
  display: flex;
  align-items: center;
}
.input-unit .unit-label {
  padding: 11px 12px;
  background: var(--gray-1);
  border: 1.5px solid var(--gray-2);
  border-left: none;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: .82rem;
  color: var(--gray-5);
  font-weight: 600;
  white-space: nowrap;
}
.input-unit .form-input {
  border-radius: var(--r-md) 0 0 var(--r-md);
}

/* Toggle switch */
.toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--gray-0);
  border-radius: var(--r-md);
  border: 1.5px solid var(--gray-2);
}
.toggle-label { font-size: .9rem; font-weight: 600; }
.toggle-desc { font-size: .77rem; color: var(--gray-5); }
.toggle {
  position: relative;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--gray-3);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background var(--transition);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  background: var(--white);
  border-radius: 50%;
  transition: transform var(--transition);
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.toggle input:checked + .toggle-slider { background: var(--blue); }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }

/* IVA toggle: explicit ON/OFF colour states (orange = excludes / green = includes) */
.toggle.toggle-iva { width: 56px; height: 30px; }
.toggle.toggle-iva .toggle-slider {
  background: #f97316; /* orange-500 — clearly OFF */
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.05);
}
.toggle.toggle-iva .toggle-slider::before {
  width: 24px; height: 24px; left: 3px; top: 3px;
}
.toggle.toggle-iva .toggle-slider::after {
  content: 'OFF';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .75rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: .3px;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.toggle.toggle-iva input:checked + .toggle-slider {
  background: #16a34a; /* green-600 — clearly ON */
}
.toggle.toggle-iva input:checked + .toggle-slider::before {
  transform: translateX(26px);
}
.toggle.toggle-iva input:checked + .toggle-slider::after {
  content: 'ON';
  right: auto;
  left: 8px;
}

/* ── Stats ── */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.stat-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 14px;
  border: 1px solid var(--gray-2);
  box-shadow: var(--shadow-sm);
}
.stat-label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gray-4);
  margin-bottom: 6px;
}
.stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gray-8);
  line-height: 1;
}
.stat-sub { font-size: .75rem; color: var(--gray-4); margin-top: 3px; }
.stat-card.accent {
  background: var(--g-blue);
  border-color: transparent;
  box-shadow: var(--glow-blue);
  color: #fff;
}
.stat-card.accent .stat-label,
.stat-card.accent .stat-value,
.stat-card.accent .stat-sub { color: rgba(255,255,255,.95); }
.stat-card.accent .stat-value { color: #fff; }

/* ── Section Headers ── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.section-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.2px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
  position: relative;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--g-blue-soft);
  box-shadow: 0 3px 10px rgba(26,53,98,.28), inset 0 1px 0 rgba(255,255,255,.22);
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
  margin-top: 4px;
}
.section-title::before {
  content: none;
}
.section-title .section-accent {
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--g-orange-soft);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(227,93,31,.55);
}
.section-header .btn-ghost {
  font-size: .78rem;
  font-weight: 700;
  color: var(--c-blue);
  padding: 6px 10px;
  border-radius: 8px;
  transition: background .15s;
}
.section-header .btn-ghost:hover, .section-header .btn-ghost:active {
  background: var(--tint-blue);
}

/* ── Line Items (materials/labor) ── */
/* ── Totals Block ── */
.totals-block {
  background: var(--white);
  border: 1px solid var(--gray-2);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 16px;
  font-size: .9rem;
  border-bottom: 1px solid var(--gray-1);
}
.totals-row:last-child { border-bottom: none; }
.totals-row.total-final {
  background: var(--blue);
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 800;
}

/* ── Wizard / Steps ── */
.wizard-steps {
  display: flex;
  align-items: flex-start;
  padding: 10px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-2);
  gap: 4px;
  overflow-x: auto;
  /* flex-start, no center: al permitir que las etiquetas largas pasen a dos lineas (ver
     .wizard-step-label) los pasos dejan de medir lo mismo, y con `center` los circulos
     quedarian a distintas alturas y la linea que los une (::after, top:14px) se torceria. */
  -ms-overflow-style: none;
  scrollbar-width: none;
  flex-shrink: 0;
  /* Sticky fallback: keeps the steps visible even if flex layout falls back */
  position: sticky;
  top: 0;
  z-index: 5;
}
#vwLaunchBar {
  position: sticky;
  top: 0;
  z-index: 6;
  flex-shrink: 0;
}
/* When voice bar exists, the steps stick below it */
#vwLaunchBar + .wizard-steps { top: 38px; }
.wizard-steps::-webkit-scrollbar { display: none; }
/* EDITOR-COMPACTO-2026-09-03: al bajar a escribir, las barras se apartan. El editor movil dejaba
   ~520 px utiles de 844 con cinco barras fijas; mientras se teclea, el selector de modo y los
   rotulos de los pasos no aportan nada y se llevan ~75 px. Vuelven al subir. */
#screen-new-budget.editor-compacto #editorModeToggle { display: none; }
#screen-new-budget.editor-compacto .wizard-steps { padding-top: 5px; padding-bottom: 5px; }
#screen-new-budget.editor-compacto .wizard-step-label { display: none; }
@media (prefers-reduced-motion: no-preference) {
  #screen-new-budget .wizard-steps { transition: padding .15s ease; }
}
.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 52px;
  position: relative;
}
.wizard-step::after {
  content: '';
  position: absolute;
  top: 14px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  background: var(--gray-2);
}
.wizard-step:last-child::after { display: none; }
.wizard-step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gray-2);
  color: var(--gray-4);
  font-size: .8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: transform, opacity, background-color, color, border-color, box-shadow var(--transition);
}
.wizard-step.done { cursor: pointer; }
.wizard-step.done .wizard-step-circle {
  background: var(--green);
  color: var(--white);
}
.wizard-step.done:hover .wizard-step-circle { background: #15803d; transform: scale(1.08); }
.wizard-step.active .wizard-step-circle {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 0 0 3px rgba(30,64,175,.2);
}
.wizard-step::after.done { background: var(--green); }
.wizard-step-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--gray-4);
  text-align: center;
  /* `nowrap` hacia que la etiqueta DESBORDARA su paso (flex:1, min-width:52px) y pisara a la
     de al lado. Medido a 390px: 5 de los 8 idiomas se pisaban -- fr +11px, de +5, pt +5,
     nl +11 ("Samenvatting"), pl +11 ("Podsumowanie") -- y 7 de 8 a 360px. En espanol solo
     ocurre a partir de 360 ("Materiales"). Ahora parte a dos lineas antes que pisar. */
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
  line-height: 1.15;
}
.wizard-step.active .wizard-step-label { color: var(--blue); }

/* EDITOR-MOVIL-2026-08-24 (auditoria de friccion, hallazgo 8) — medido a 390x844:
   «ObraMateriales y mano de ob raResumen». Con 4 pasos a 390 px cada rotulo tiene ~90 px, y el
   `overflow-wrap: anywhere` de arriba parte las palabras por donde sea: de ahi «ob/ra».
   Ese `anywhere` NO se revierte: arreglo un fallo real (los rotulos desbordaban su paso y pisaban
   al vecino en 5 de los 8 idiomas a 390 px). Se queda para pantallas anchas. En movil se enseña
   solo el rotulo del paso ACTIVO: cuatro circulos y un nombre. Nada que solapar ni que partir, y
   funciona igual en los 8 idiomas porque ya no compiten por el ancho. */
/* PASOS-CON-NOMBRE-2026-09-03 — los cuatro nombres vuelven a verse en movil.
   Lo de arriba (esconder todos menos el activo) se decidio el 24-ago con medidas y era correcto
   ENTONCES: el paso 2 se llamaba «Materiales y mano de obra», 25 caracteres en ~90 px. Lo que ha
   cambiado no es la decision sino el NOMBRE — desde el 3-sep ese paso abre con «Tus lineas» y se
   llama «Lineas». Con Cliente · Obra · Lineas · Resumen el rotulo mas largo de los 8 idiomas es
   «Podsumowanie» (12 caracteres, ~72 px de los ~90 que toca a cada paso): entran en una linea y ya
   no compiten por el ancho, que era la causa. El `overflow-wrap: anywhere` heredado se queda como
   red por si un idioma futuro trae una palabra imposible: parte, pero no pisa al vecino. */
@media (max-width: 430px) {
  .wizard-step-label { font-size: .68rem; }
}

/* El flotante de soporte se pintaba encima de «Omitir →/Continuar →», el boton primario del pie
   del editor. Ya desaparecia con un modal abierto; el editor es el otro momento en que el pie
   manda. Se esconde mientras se edita un documento. */
#screen-new-budget.active ~ .chat-fab,
body:has(#screen-new-budget.active) .chat-fab { display: none !important; }

.wizard-content {
  padding: 16px;
  display: none;
}
.wizard-content.active {
  display: block;
}

.wizard-footer {
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--gray-2);
  background: var(--white);
  display: flex;
  gap: 10px;
  position: sticky;
  bottom: 0;
}
body.demo-mode .wizard-footer {
  bottom: 48px;
  padding-bottom: 12px;
  z-index: 10;
}
/* C4: banner demo fijo en top:0 - empujar app-header y body debajo del banner */
body.demo-mode {
  padding-top: calc(var(--header-h) + var(--sat) + 38px);
}
body.demo-mode .app-header {
  top: 38px;
}
body.demo-mode #voiceFab,
body.demo-mode [id$="chatFab"],
body.demo-mode .chat-fab { display: none !important; }

/* BANNER-BAJO-LA-CABECERA-2026-09-03 ─────────────────────────────────────────
   El aviso «Verifica tu email» iba fijo en top:0 con z-index 900 y hasta 184 px de alto: se comia
   entera la cabecera y el menu ☰ no existia hasta cerrarlo. Ahora va DEBAJO de ella, una sola
   linea, con su mismo ancho y centrado. z-index 99 a proposito: POR DEBAJO de .app-header (100),
   asi no puede taparla ni por error. El hueco lo abre `--header-h` (ver arriba), no un
   style.paddingTop en linea —que se lo peleaba con el banner de actualizacion (app.js ~26877):
   el ultimo en escribir borraba el hueco del otro. */
body.pp-verify-bar { --header-h: calc(var(--header-base-h) + var(--verify-bar-h)); }
#emailVerifyBanner {
  position: fixed;
  top: calc(var(--header-base-h) + var(--sat));
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 99;
  height: var(--verify-bar-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 12px;
  background: #fef3c7;
  color: #92400e;
  border-bottom: 1px solid #fde68a;
  font-size: .78rem;
  font-weight: 600;
}
#emailVerifyBanner .vb-txt {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#emailVerifyBanner button { flex-shrink: 0; border: none; cursor: pointer; font-weight: 700; }
#emailVerifyBanner .vb-send {
  background: #92400e; color: #fff;
  padding: 4px 10px; border-radius: 6px; font-size: .72rem;
}
#emailVerifyBanner .vb-x {
  background: rgba(146,64,14,.12); color: #92400e;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: .9rem; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
body.dark #emailVerifyBanner { background: #78350f; color: #fde68a; border-bottom-color: #92400e; }
body.dark #emailVerifyBanner .vb-send { background: #fbbf24; color: #451a03; }
body.dark #emailVerifyBanner .vb-x { background: rgba(253,230,138,.16); color: #fde68a; }

/* ── Modals ── */
/* ── Creador de plantillas: la fila de una partida ──────────────────────────────────────
   Estaba en un `style=` dentro del JS con 5 columnas fijas (1fr 52px 46px 76px 28px). En un
   movil eso deja la DESCRIPCION --el campo mas importante de la fila-- en 114px: 15 de 42
   caracteres a 390px y 10 a 360, en un <input> de una sola linea sin auto-alto ni scroll.
   Se saca a CSS para poder darle a la descripcion su propia linea en pantalla estrecha,
   igual que hace la linea de material del editor, que si cabe. */
.tplcs-item-row {
  display: grid;
  grid-template-columns: 1fr 52px 46px 76px 28px;
  gap: 4px;
  align-items: center;
  margin-bottom: 4px;
}
/* Los rotulos de columna: MISMA rejilla que los datos, para que no se descuadren cuando la
   descripcion se lleva su propia linea. Solo cambian el tamano y el color. */
.tplcs-item-head { font-size: .68rem; font-weight: 600; color: #9ca3af; }

@media (max-width: 480px) {
  .tplcs-item-row { grid-template-columns: 52px 46px 1fr 28px; }
  .tplcs-item-row > :first-child { grid-column: 1 / -1; }   /* la descripcion, a todo el ancho */
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.66);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.modal-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity .22s ease, visibility 0s linear 0s;
}
.modal {
  background: var(--white);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  max-width: 480px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32,0,.67,0);
  padding-bottom: env(safe-area-inset-bottom, 16px);
}
.modal-overlay.open .modal {
  transform: translateY(0);
  transition: transform .28s cubic-bezier(.33,1,.68,1);
}/* MODAL-MARGEN-2026-08-26. `.modal` solo declara `padding-bottom`: el margen lateral lo aportan
   sus hijos `.modal-header` / `.modal-body`. Un modal que mete el contenido SUELTO salia con el
   titulo, los campos y los botones tocando los dos bordes — el dueno lo llamo «cortado» tres
   veces, y al medir eran SEIS de 48. Arreglarlos uno a uno deja al septimo esperando: aqui esta
   la regla. Un estilo `padding` en linea sigue ganando sobre esto, que es lo que se quiere.
   Si un navegador no entendiera `:has()`, ignora la regla entera y queda como estaba: la
   degradacion va hacia lo de siempre, nunca hacia un modal peor. */
.modal:not(:has(.modal-header)):not(:has(.modal-body)) {
  padding: 18px 18px 0;
}


.modal-handle {
  width: 40px;
  height: 4px;
  background: var(--gray-2);
  border-radius: var(--r-full);
  margin: 12px auto 0;
}
.modal-header {
  padding: 16px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--gray-1);
}
.modal-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.modal-body { padding: 16px 20px; }
.modal-footer {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--gray-1);
  display: flex;
  gap: 10px;
}

/* ── Empty State ── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
}
.empty-icon { font-size: 3rem; margin-bottom: 12px; line-height: 1; }

/* ── Dividers ── */
.divider {
  height: 1px;
  background: var(--gray-1);
  margin: 16px 0;
}
.divider-text {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gray-4);
  font-size: .78rem;
  font-weight: 600;
  margin: 16px 0;
}
.divider-text::before,
.divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-2);
}

/* ── Toast (top-anchored so it doesn't cover the form/CTA buttons) ── */
.toast-container {
  position: fixed;
  top: auto;
  bottom: 80px;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10050;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 90vw;
  max-width: 380px;
  pointer-events: none;
}
.toast {
  background: var(--gray-8);
  color: var(--white);
  padding: 12px 16px;
  border-radius: var(--r-lg);
  font-size: .88rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  animation: slideUp .22s ease, fadeOut .3s ease 2.7s forwards;
  pointer-events: all;
}
.toast.toast-success { background: var(--green); }
.toast.toast-error   { background: var(--red); }
.toast.toast-info    { background: #1d4ed8; color: var(--white); }
.toast.toast-warning { background: var(--yellow); color: var(--gray-9); }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
  to { opacity: 0; transform: translateY(8px); pointer-events: none; }
}

/* ── Premium Banner ── */
.premium-banner {
  background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
  color: var(--white);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.premium-banner h3 { font-size: 1rem; font-weight: 700; }
.premium-banner p { font-size: .85rem; opacity: .9; line-height: 1.5; }
.premium-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 4px;
}
.premium-feature {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .8rem;
  opacity: .95;
}


/* ── Notification button + dropdown ── */
.btn-notif { position: relative; }
.notif-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--red);
  color: #fff;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #fff;
}
.notif-dropdown {
  position: fixed;
  top: calc(var(--header-h) + var(--sat) - 6px);
  right: 10px;
  width: 320px;
  max-width: calc(100% - 20px);
  /* OSCURO-TARJETAS-2026-08-26: mismo literal, mismo fallo que .budget-card-v3. */
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, transparent);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(15,23,42,0.25);
  /* PASADA-8-2026-08-27: estaba en 250 y el aviso flotante de «Presupuesto sin
     finalizar» esta en 900, asi que el panel de la campana se abria DEBAJO (medido
     por el auditor con elementFromPoint). 950 lo deja encima de ese aviso y por
     DEBAJO de los modales (.modal-overlay, 1000), que es la capa que manda. */
  z-index: 950;
  max-height: calc(100dvh - var(--header-h) - var(--sat) - 40px);
  overflow: hidden;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
}
.notif-dropdown.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-2);
  font-size: .95rem; font-weight: 800; color: var(--c-blue);
}
.notif-list {
  flex: 1; overflow-y: auto;
  padding: 6px 8px 10px;
}
.notif-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  transition: background .15s;
  cursor: pointer;
}
.notif-item:hover { background: var(--gray-1); }
.notif-item-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title {
  font-size: .82rem; font-weight: 700; color: var(--gray-8);
  line-height: 1.25;
}
.notif-item-sub {
  font-size: .75rem; color: var(--gray-5); margin-top: 2px;
}
.notif-empty {
  padding: 30px 20px; text-align: center;
  color: var(--gray-5); font-size: .82rem;
}

/* ── Drawer ── */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 300;
  visibility: hidden;             /* C-01: garantiza no-interacción en estado cerrado */
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.drawer-overlay.open {
  visibility: visible;
  opacity: 1; pointer-events: auto;
  transition: opacity .22s ease, visibility 0s linear 0s;
}
.drawer {
  position: fixed;
  top: 0; left: 0;
  width: 290px; max-width: 85vw;
  height: 100%;
  background: #fff;
  z-index: 310;
  transform: translateX(-105%);
  transition: transform .26s ease;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.drawer.open { transform: translateX(0); pointer-events: auto; }
/* N-04: drawer cerrado o en plena animacion de salida NO intercepta clics
   (evita que el primer clic en la barra/contenido caiga en el drawer fuera de pantalla). */
.drawer:not(.open) { pointer-events: none; }
/* Hide duplicated navigation while drawer is open (drawer already has nav items) */
body.drawer-open .bottom-nav { visibility: hidden; }
/* ── Custom date picker (replaces native type="date" for portable dd/mm/yyyy) ── */
.date-wrap { position: relative; display: inline-flex; align-items: stretch; width: 100%; }
.date-wrap > .form-input { padding-right: 38px; }
.date-cal-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; color: var(--gray-5);
}
.date-cal-btn:hover { background: var(--gray-1); color: var(--blue); }
body.dark .date-cal-btn:hover { background: rgba(143,178,232,.12); color: #8fb2e8; }
.dp-popup {
  position: absolute;
  z-index: 3000;
  background: #fff;
  border: 1px solid var(--gray-2);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  display: none;
  user-select: none;
}
body.dark .dp-popup {
  background: #1e1a17;
  border-color: #3a332c;
  color: var(--fg);
}
.dp-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.dp-nav {
  background: transparent; border: none; cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px;
  font-size: 1.2rem; font-weight: 700; color: var(--blue);
}
.dp-nav:hover { background: var(--gray-1); }
body.dark .dp-nav { color: #8fb2e8; }
body.dark .dp-nav:hover { background: rgba(143,178,232,.12); }
.dp-title {
  font-weight: 700; font-size: .92rem; text-transform: capitalize;
  color: var(--gray-8);
}
body.dark .dp-title { color: var(--fg); }
.dp-wdays, .dp-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.dp-wdays > div {
  text-align: center; font-size: .75rem; font-weight: 700;
  color: var(--gray-5); padding: 4px 0; text-transform: uppercase;
}
.dp-day {
  text-align: center; padding: 7px 0; cursor: pointer;
  border-radius: 8px; font-size: .85rem; color: var(--gray-7);
  transition: background .12s;
}
.dp-day:hover { background: var(--blue-xl); color: var(--blue); }
.dp-day.selected {
  background: var(--blue); color: white; font-weight: 700;
}
.dp-day.today {
  outline: 2px solid var(--blue); outline-offset: -2px;
}
body.dark .dp-day { color: #c3b8ae; }
body.dark .dp-day:hover { background: rgba(143,178,232,.15); color: #8fb2e8; }
body.dark .dp-day.selected {
  background: linear-gradient(135deg,#8fb2e8,#5b7fb8); color: #12100e;
}
body.dark .dp-day.today { outline-color: #8fb2e8; }
.dp-actions {
  display: flex; gap: 6px; margin-top: 10px;
  border-top: 1px solid var(--gray-2); padding-top: 10px;
}
body.dark .dp-actions { border-top-color: #3a332c; }
.dp-actions button {
  flex: 1; padding: 7px; border-radius: 8px;
  border: 1px solid var(--gray-2); background: var(--gray-0);
  cursor: pointer; font-size: .8rem; font-weight: 600;
  color: var(--gray-7);
}
.dp-actions button:hover { background: var(--blue-xl); border-color: var(--blue); color: var(--blue); }
body.dark .dp-actions button { background: var(--bg-input); border-color: var(--border); color: var(--fg); }
body.dark .dp-actions button:hover { border-color: #8fb2e8; color: #8fb2e8; }
/* Desktop-only nav items (visible only when bottom-nav becomes a sidebar) */
.nav-item-desktop { display: none; }

/* NAV-V2-2026-08-24 — la barra reagrupada, y la forma de volver atras.
   Los DOS juegos de botones estan en el HTML; lo unico que decide cual se ve es la clase `nav-v2`
   en `body`. No hay estado intermedio posible: o esta la clase o no esta. Revertir es quitarla —
   desde Ajustes en el propio movil, o cambiando `NAV_V2_DEFAULT` para todos. */
.nav-v2-only { display: none; }
body.nav-v2 .nav-v1-only { display: none; }
body.nav-v2 .nav-v2-only { display: flex; }
@media (min-width: 1024px) {
  .nav-item-desktop { display: flex; }
}
.drawer-header {
  background: var(--g-blue-dark);
  color: #fff;
  padding: calc(var(--sat) + 18px) 16px 16px;
  display: flex; align-items: center; gap: 12px;
}
.drawer-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.drawer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.drawer-user { flex: 1; min-width: 0; }
.drawer-name {
  font-size: .95rem; font-weight: 800; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawer-email {
  font-size: .78rem; opacity: .8; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.drawer-nav {
  flex: 1; overflow-y: auto;
  padding: 10px 8px calc(var(--sab) + 14px);
  display: flex; flex-direction: column; gap: 2px;
}
.drawer-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 12px;
  min-height: 44px;
  border-radius: 10px;
  background: transparent;
  color: var(--gray-7);
  font-size: .88rem; font-weight: 600;
  text-align: left;
  transition: background .15s;
}
.drawer-item:hover, .drawer-item:active { background: var(--gray-1); }
/* Resaltado del item del drawer correspondiente al screen actual.
   Sin esta regla, el menú lateral nunca mostraba qué pestaña estaba activa. */
.drawer-item.active {
  /* FIX movil: --g-blue-soft fue redefinida como degradado OSCURO -> texto azul ilegible.
     El activo del drawer es pill SUAVE con texto azul (diseno original, ver fallback). */
  background: #eff6ff;
  color: var(--blue, #1e40af);
  font-weight: 800;
  position: relative;
}
.drawer-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%;
  background: var(--blue, #1e40af);
  border-radius: 0 3px 3px 0;
}
body.dark .drawer-item.active {
  background: rgba(143,178,232,.12);
  color: #8fb2e8;
}
body.dark .drawer-item.active::before {
  background: #8fb2e8;
}
.drawer-item > span:first-child {
  font-size: 1.1rem; width: 24px; text-align: center;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "EmojiOne Color", "Twemoji", sans-serif;
  font-variant-emoji: emoji;
}
.drawer-sep {
  height: 1px;
  background: var(--gray-2);
  margin: 8px 10px;
}
.drawer-group-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-4);
  padding: 6px 12px 2px;
  user-select: none;
}
.btn-menu { font-size: 1.3rem; font-weight: 700; color: var(--c-blue); }

/* ── Nav FAB highlight reflection ── */
.nav-item.nav-fab .nav-icon-wrap::before {
  content: '';
  position: absolute;
  top: 4px; left: 8px;
  width: 16px; height: 10px;
  background: rgba(255,255,255,.35);
  border-radius: 50%;
  filter: blur(4px);
  pointer-events: none;
}

/* ── Quick access tiles (home) ── */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.quick-tile {
  background: #f8fafc;
  border: none;
  border-radius: 14px;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--gray-6);
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: transform .12s, background .15s;
}
.quick-tile:hover { background: #eff6ff; color: var(--blue); }
.quick-tile:active { transform: scale(.96); background: #dbeafe; }
.quick-tile-ico {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* ── Hero greeting (home) ── */
.hero-greeting {
  background: var(--g-blue);
  color: #fff;
  border-radius: 16px;
  padding: 18px 16px;
  margin-bottom: 14px;
  box-shadow: var(--glow-blue);
}
.hero-greeting .greet {
  font-size: .82rem;
  font-weight: 600;
  opacity: .9;
  letter-spacing: .3px;
  display: flex; align-items: center; gap: 6px;
}
.hero-greeting .greet-name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.5px;
  margin-top: 2px;
  line-height: 1.1;
}
.hero-greeting .greet-sub {
  font-size: .78rem;
  opacity: .85;
  margin-top: 4px;
  font-weight: 500;
}

/* ── Logo upload area ── */
.logo-upload {
  border: 2px dashed var(--gray-2);
  border-radius: var(--r-lg);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  background: var(--gray-0);
}
.logo-upload:hover { border-color: var(--blue-l); background: var(--blue-xl); }
.logo-upload .logo-preview { max-height: 80px; max-width: 180px; border-radius: var(--r-sm); }
.logo-upload-hint { font-size: .8rem; color: var(--gray-4); margin-top: 6px; }

/* ── Filter tabs ── */
.filter-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 16px 0;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  background: var(--white);
  border-bottom: 1px solid var(--gray-2);
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
  padding: 7px 14px;
  border-radius: var(--r-full);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--gray-5);
  transition: transform, opacity, background-color, color, border-color, box-shadow var(--transition);
  border: 1.5px solid transparent;
}
.filter-tab.active {
  background: var(--blue);
  color: var(--white);
}
.filter-tab:hover:not(.active) {
  background: var(--gray-1);
}

/* ── Search ── */
.search-bar {
  position: relative;
  margin-bottom: 12px;
}
.search-bar input {
  width: 100%;
  padding: 10px 40px 10px 38px;
  border: 1.5px solid var(--gray-2);
  border-radius: var(--r-full);
  background: var(--white);
  font-size: .9rem;
}
.search-bar input:focus {
  outline: none;
  border-color: var(--blue-l);
  box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}
.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--gray-4);
  pointer-events: none;
}
.search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .9rem;
  color: var(--gray-4);
  padding: 4px;
}

/* ── Loading spinner ── */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Actions sheet ── */
.action-sheet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  cursor: pointer;
  transition: background var(--transition);
  border-radius: var(--r-md);
  /* HOJA-ACCIONES-MARGEN-2026-08-24: es un <button> y el navegador CENTRA el texto de los botones.
     El subtitulo (largo) fijaba el ancho y el titulo (corto) se centraba dentro, asi que cada fila
     empezaba en una x distinta mientras los subtitulos SI quedaban alineados. */
  text-align: left;
  width: 100%;
}
.action-sheet-item:hover, .action-sheet-item:active { background: var(--gray-1); }
.action-sheet-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  /* Sin esto el icono se encoge cuando el subtitulo es largo y la columna deja de ser una columna. */
  flex-shrink: 0;
}
.action-sheet-text { min-width: 0; }
.action-sheet-text strong { font-size: .92rem; display: block; }
.action-sheet-text span { font-size: .78rem; color: var(--gray-5); }
/* Cabecera de grupo. Solo se pinta si el grupo tiene filas: ver `grupo()` en openBudgetActions. */
.action-sheet-group {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gray-5);
  padding: 14px 20px 4px;
}
.action-sheet-group:first-child { padding-top: 2px; }

/* ── Highlight box ── */
.highlight-box {
  background: var(--blue-xl);
  border: 1px solid #bfdbfe;
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.highlight-box-icon { font-size: 1.2rem; flex-shrink: 0; }
.highlight-box p { font-size: .83rem; color: var(--blue); line-height: 1.5; }

/* ── Utility ── */
.gap-2  { gap: 2px; }
.gap-4  { gap: 4px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.flex   { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.text-sm   { font-size: .82rem; }
.text-xs   { font-size: .75rem; }
.text-muted { color: var(--gray-4); }
.text-bold  { font-weight: 700; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.hidden { display: none !important; }

/* ── Responsive ── */
@media (min-width: 480px) {
  body { background: var(--gray-2); padding-bottom: 0; }
  #app {
    border-radius: 24px;
    overflow: visible;
    box-shadow: var(--shadow-xl);
    margin: 20px auto;
    min-height: calc(100vh - 40px);
  }
  .bottom-nav {
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
    bottom: 0;
    top: auto;
    max-width: 480px;
    border-radius: 0 0 24px 24px;
    overflow: visible;
  }
  .nav-item.nav-fab .nav-icon-wrap { z-index: 2; }
  .app-header {
    border-radius: 24px 24px 0 0;
  }
  .modal-overlay { align-items: center; }
  .modal { border-radius: var(--r-xl); max-height: 80vh; }
  .toast-container { max-width: 460px; width: 90vw; }
  .notif-dropdown { right: max(10px, calc(50% - 230px)); }
}

/* ── Animations ── */
.fade-in { animation: fadeInUp .22s ease; }
.slide-in-right {
  animation: slideInRight .22s ease;
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes draftBannerIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Company field vis checkboxes ── */
.co-fh { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.co-vis { display:flex; gap:8px; flex-shrink:0; }
.co-vis-lbl { font-size:.75rem; display:flex; align-items:center; gap:3px; color:var(--gray-5); cursor:pointer; user-select:none; }
.co-vis-lbl input[type=checkbox] { width:14px; height:14px; accent-color:var(--blue); cursor:pointer; }

/* ── Professional card ── */
.pro-card { background:white; border-radius:var(--r-lg); padding:12px 14px; margin-bottom:10px; box-shadow:0 1px 3px rgba(0,0,0,.08); cursor:pointer; transition:box-shadow .15s; border:1px solid var(--gray-1); }
.pro-card:hover { box-shadow:0 3px 10px rgba(0,0,0,.12); }

/* ── Material total field ── */
input[id^="mt-"] { background: #f0fdf4 !important; border-color: #bbf7d0 !important; }
input[id^="mt-"]:focus { border-color: #22c55e !important; }

/* ── Material Autocomplete ── */
.mac-item {
  padding: 9px 14px;
  font-size: .85rem;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mac-item:hover { background: #f0f7ff; }
.mac-sub { padding-left: 24px; color: #374151; }
.mac-group {
  padding: 6px 14px 3px;
  font-size: .75rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  pointer-events: none;
}

/* ── Twemoji ── */
img.emoji {
  height: 1em !important;
  width: 1em !important;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
  display: inline-block !important;
  max-width: 1em !important;
  max-height: 1em !important;
}

/* ── Desktop two-column layout ── */
@media (min-width: 1024px) {
  :root { --sidebar-w: 200px; --nav-h: 0px; }

  body { padding-bottom: 32px; }

  #app { max-width: 960px; }
  .app-header { max-width: 960px; }

  /* Convert bottom-nav pill into a left sidebar */
  .bottom-nav {
    left: max(0px, calc(50vw - 480px));
    right: auto;
    top: calc(var(--header-h) + var(--sat) + 20px);
    bottom: 20px;
    width: var(--sidebar-w);
    max-width: var(--sidebar-w);
    height: auto;
    transform: none;
    border-radius: 0 0 0 22px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 16px 8px;
    gap: 2px;
    box-shadow: none;
    border: 1px solid #e5e7eb;
    border-top: none;
  }

  .nav-item {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 11px 12px;
    border-radius: 10px;
    height: auto;
    font-size: .85rem !important;
    gap: 10px;
  }

  .nav-item.active::before { display: none; }
  .nav-item.active { background: #eff6ff; border-radius: 10px; }
  .nav-item .nav-icon { font-size: 1.2rem !important; margin: 0; }

  .nav-item.nav-fab {
    background: var(--g-rose-soft);
    border-radius: 10px;
    margin: 4px 0;
    color: white;
  }
  .nav-item.nav-fab .nav-icon-wrap {
    width: 28px; height: 28px;
    border: none; border-radius: 6px;
    transform: none;
    box-shadow: none;
  }
  .nav-item.nav-fab:active .nav-icon-wrap { transform: scale(.95); }
  .bottom-nav .nav-item .nav-svg { width: 20px; height: 20px; }

  /* Push all screens to the right of the sidebar */
  .screen { margin-left: var(--sidebar-w); }

  /* Settings pinned to bottom of sidebar */
  .nav-spacer-bottom { display: block; flex: 1; min-height: 8px; pointer-events: none; }
  .nav-item-settings { border-top: 1px solid var(--gray-2); padding-top: 14px; margin-top: 0; }

  .screen.full-screen.active {
    height: calc(100dvh - var(--header-h) - var(--sat) - 40px);
  }
}

/* ── Print ── */
/* Cookie banner above bottom-nav on mobile */
@media (max-width: 1023px) {
  #ppCookieBanner { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}

@media print {
  body { background: white; padding: 0; }
  .bottom-nav, .app-header, .btn { display: none !important; }
  .screen { display: block !important; }
}

/* ============================================================ */
/* === Inline-extracted utilities ============================ */
/* Generated to allow removing 'unsafe-inline' from style-src.  */
/* ============================================================ */

/* Display */
.u-hidden { display: none; }
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-flex-center { display: flex; align-items: center; justify-content: center; }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; }
.u-items-center { display: flex; align-items: center; }
.u-items-start { display: flex; align-items: flex-start; }
.u-flex-wrap { flex-wrap: wrap; }
.u-flex-1 { flex: 1; }
.u-flex-1-min0 { flex: 1; min-width: 0; }
.u-flex-shrink-0 { flex-shrink: 0; }
.u-grid { display: grid; }
.u-relative { position: relative; }
.u-w-full { width: 100%; }
.u-overflow-hidden { overflow: hidden; }
.u-overflow-y-auto { overflow-y: auto; }

/* Gaps */
.u-gap-4 { gap: 4px; }
.u-gap-6 { gap: 6px; }
.u-gap-8 { gap: 8px; }
.u-gap-10 { gap: 10px; }
.u-gap-12 { gap: 12px; }

/* Margins */
.u-m-0 { margin: 0; }
.u-mt-2 { margin-top: 2px; }
.u-mt-4 { margin-top: 4px; }
.u-mt-6 { margin-top: 6px; }
.u-mt-8 { margin-top: 8px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-20 { margin-top: 20px; }
.u-mt-24 { margin-top: 24px; }
.u-mb-0 { margin-bottom: 0; }
.u-mb-8 { margin-bottom: 8px; }
.u-mb-12 { margin-bottom: 12px; }
.u-mb-14 { margin-bottom: 14px; }
.u-mb-16 { margin-bottom: 16px; }

/* Padding */
.u-p-10 { padding: 10px; }
.u-p-12 { padding: 12px; }
.u-p-16 { padding: 16px; }
.u-p-20 { padding: 20px; }
.u-p-24 { padding: 24px; }
.u-pb-80 { padding-bottom: 80px; }

/* Typography */
.u-text-xs { font-size: .72rem; }
.u-text-sm { font-size: .78rem; }
.u-text-base { font-size: .82rem; }
.u-text-md { font-size: .85rem; }
.u-text-lg { font-size: .88rem; }
.u-text-xl { font-size: .95rem; }
.u-text-2xl { font-size: 1rem; }
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }
.u-bold { font-weight: 700; }
.u-semibold { font-weight: 600; }
.u-medium { font-weight: 500; }

/* Colors */
.u-text-white { color: white; }
.u-text-muted { color: #9ca3af; }
.u-text-gray { color: #6b7280; }
.u-text-gray4 { color: var(--gray-4); }
.u-text-gray5 { color: var(--gray-5); }
.u-text-gray6 { color: var(--gray-6); }
.u-text-primary { color: #1a3562; }
.u-text-error { color: #dc2626; }
.u-text-success { color: #16a34a; }
.u-bg-white { background: white; }

/* MARCA-OSCURO-2026-08-26. El color va en una CLASE del propio <span>, no heredado: `.app-header.dark
   #headerText` fuerza `-webkit-text-fill-color:#fff !important` y esa propiedad SE HEREDA, pero una
   declaración en el PROPIO elemento gana siempre a la herencia, sin necesidad de !important. Antes
   se defendía de eso clavando el azul inline, y ese azul es justo el que no se lee en oscuro. */
.brand-wm     { color: var(--brand-wordmark, #1a3562); -webkit-text-fill-color: var(--brand-wordmark, #1a3562); }
.brand-wm-app { color: #e35d1f; -webkit-text-fill-color: #e35d1f; }
.u-bg-transparent { background: transparent; }
.u-bg-none { background: none; }

/* Borders / radius */
.u-bd-none { border: none; }
.u-rounded-8 { border-radius: 8px; }
.u-rounded-10 { border-radius: 10px; }
.u-rounded-md { border-radius: var(--r-md); }

/* Cursor */
.u-cursor-pointer { cursor: pointer; }
.u-outline-none { outline: none; }

/* === Auth screen specific === */
/* Defensiva: auth screen nunca debe producir scroll horizontal en móvil.
   Audit reportó inputs con width 1350px desbordando 360px viewport. */
#authScreen, .auth-screen-v5, #authScreen form, #authScreen .tab-content {
  max-width: 100%;
  overflow-x: clip; /* C1: clip no crea scroll-container (a diferencia de hidden) */
  box-sizing: border-box;
}
.auth-input {
  padding: 12px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 1rem;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s;
}
.auth-input:focus { border-color: #1a3562; }
.auth-input--password { padding: 12px 44px 12px 14px; }
.auth-input--select { background: white; color: #374151; }

.auth-submit {
  padding: 13px;
  background: #1a3562;
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: background .2s;
}
.auth-submit:hover { background: #1e40af; }

.auth-link-ghost {
  padding: 0;
  background: transparent;
  color: #9ca3af;
  border: none;
  font-size: .78rem;
  cursor: pointer;
  text-align: right;
  text-decoration: underline;
}

.auth-link-ghost-center {
  padding: 10px;
  background: transparent;
  color: #9ca3af;
  border: none;
  font-size: .82rem;
  cursor: pointer;
  text-decoration: underline;
}

.auth-tab {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  transition: transform, opacity, background-color, color, border-color, box-shadow .2s;
}
.auth-tab--active { background: #1a3562; color: white; }
.auth-tab--inactive { background: transparent; color: #6b7280; }

.auth-card {
  background: white;
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

/* ── Auth screen v5 — LoginFinal del handoff ──────────────────────── */
.auth-screen-v5 {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--g-blue-dark);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column;
  -webkit-tap-highlight-color: transparent;
}
.auth-screen-v5::-webkit-scrollbar { display: none; }
/* Glows decorativos del hero */
.auth-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(50px);
  z-index: 0;
}
.auth-glow-orange {
  top: -120px; right: -100px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(255,140,66,0.55), transparent 60%);
}
.auth-glow-rose {
  top: 60px; left: -120px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(201,133,123,0.4), transparent 60%);
}
/* Lang picker en la esquina superior derecha */
.auth-lang-row {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 20px 0;
}
/* Hero superior con logo + headline + chips */
.auth-hero {
  position: relative;
  z-index: 1;
  padding: 28px 28px 24px;
  text-align: center;
  color: #fff;
}
.auth-logo-card {
  width: 220px; height: auto;
  background: #ffffff;
  border-radius: 20px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.50),
    0 8px 20px rgba(30,64,175,0.40);
  padding: 12px;
  box-sizing: border-box;
  overflow: hidden;
}
.auth-logo-img {
  width: 100%; height: auto;
  display: block;
}
.auth-headline {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.5px;
  background: linear-gradient(180deg, #fff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.auth-subheadline {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin: 0 0 18px;
  font-weight: 500;
}
.auth-chips {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.auth-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.3px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Card blanca curvada que ocupa el resto */
.auth-card-wrap {
  position: relative;
  z-index: 1;
  flex: 1;
  background: #fff;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  margin-top: 12px;
  padding: 28px 24px 32px;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
}
.auth-screen-v5 .auth-card {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
/* CTA principal: gradiente naranja metalizado del logo */
.auth-screen-v5 .auth-submit {
  background: var(--g-orange);
  box-shadow: var(--glow-orange);
  border-radius: 14px;
  padding: 14px;
  font-size: 1rem;
  letter-spacing: -0.2px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.auth-screen-v5 .auth-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(227,93,31,.5), 0 4px 10px rgba(227,93,31,.3), inset 0 1px 0 rgba(255,255,255,0.5);
}
.auth-screen-v5 .auth-submit:active {
  transform: translateY(0);
}
/* Refinar tabs y inputs en el contexto del nuevo card */
.auth-screen-v5 .auth-input { border-radius: 12px; }
.auth-screen-v5 .auth-input:focus { box-shadow: 0 0 0 3px rgba(29,78,216,.15); }
@media (max-width: 360px) {
  .auth-logo-card { width: 180px; height: auto; border-radius: 18px; padding: 10px; }
  .auth-headline { font-size: 24px; }
  .auth-hero { padding: 22px 20px 20px; }
  .auth-card-wrap { padding: 22px 18px 28px; }
}
/* C1: En pantallas anchas (≥600px), centrar y limitar el auth form a 480px
   para que no se estire a todo el viewport (forma de card flotante). */
@media (min-width: 600px) {
  .auth-screen-v5 {
    align-items: center;
    justify-content: center;
    padding: 24px 16px 40px;
  }
  .auth-hero {
    max-width: 480px;
    width: 100%;
  }
  .auth-card-wrap {
    max-width: 480px;
    width: 100%;
    border-radius: 28px !important;
    flex: unset;
    box-shadow: 0 24px 70px rgba(0,0,0,.35);
    margin-top: 0;
  }
}
/* REGISTRO-A-LA-VISTA-2026-09-03 ────────────────────────────────────────────
   Medido: el hero ocupa 445 px antes de la primera pestaña (tarjeta del logo 220 px -> 186 de alto
   con el logo 418x346, titular de 28 px, subtitulo y tres chips). En un 390x844 el boton
   «Registrarse» queda sobre los 850 px: a pantalla y media de donde el usuario empieza a leer.
   Por ALTO y no por ancho, que es la medida que manda aqui: un movil apaisado o una ventana baja
   de escritorio tienen el mismo problema y no son «moviles». Va DESPUES del bloque de ≥600px para
   ganarle cuando las dos condiciones se cumplen (tablet en horizontal). En pantallas altas no
   cambia nada: ahi el hero cabe y es la carta de presentacion. */
@media (max-height: 800px) {
  .auth-lang-row { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); }
  .auth-hero { padding: 12px 24px 14px; }
  .auth-logo-card { width: 128px; padding: 8px; border-radius: 14px; margin-bottom: 10px; }
  .auth-headline { font-size: 21px; margin-bottom: 4px; }
  .auth-subheadline { font-size: 12.5px; margin-bottom: 0; }
  .auth-chips { display: none; }
  .auth-card-wrap { margin-top: 10px; padding: 18px 20px 24px; }
}

.auth-tabs-wrap {
  display: flex;
  background: #f3f4f6;
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 16px;
}

.auth-msg {
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: .85rem;
  display: none;
  font-weight: 500;
}

.auth-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-checkbox {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  min-width: 20px;
  accent-color: #1a3562;
  cursor: pointer;
  margin-top: 2px;
}

.auth-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  min-height: 44px;
  padding: 4px 0;
}

.auth-consent-wrap {
  display: none;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #9ca3af;
  font-size: .82rem;
}
.auth-divider-line {
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

.auth-google-wrap {
  display: flex;
  justify-content: center;
  min-height: 44px;
  width: 100%;
}

.auth-demo-btn {
  padding: 8px;
  background: rgba(245,158,11,.15);
  color: #92400e; /* H1: contraste 8:1 sobre bg amber — WCAG AA */
  border: 1px solid rgba(245,158,11,.6);
  border-radius: 8px;
  font-size: .82rem;
  cursor: pointer;
  font-weight: 600;
}

/* Common helper combos seen repeatedly */
.u-divider-line {
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

/* Underline links inline within text */
.u-link-primary { color: #1a3562; text-decoration: underline; }

/* Backgrounds (light tints) */
.u-bg-success-l { background: #dcfce7; }
.u-bg-error-l { background: #fee2e2; }
.u-bg-warn-l { background: #fef3c7; }
.u-bg-blue-l { background: #dbeafe; }
.u-bg-purple-l { background: #ede9fe; }

/* Misc utilities */
.u-opacity-70 { opacity: .7; }
.u-extrabold { font-weight: 800; }
.u-py-12 { padding: 12px 0; }
.u-text-icon-2 { font-size: 2rem; }
.u-text-gray4-400 { color: var(--gray-4); font-weight: 400; }
.u-text-gray5-base { color: var(--gray-5); font-size: .82rem; }

/* ════════════════════════════════════════════════════════════
   HOME v3 — Hero KPI azul + sparkline + stats + plan + quick + recent
   ════════════════════════════════════════════════════════════ */

/* Greeting */
.home-greet-v3 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px 14px;
}
.home-greet-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-greet-line { font-size: .82rem; color: var(--gray-5); font-weight: 600; }
.home-greet-name { font-size: 1.18rem; font-weight: 800; color: var(--gray-9); letter-spacing: -0.4px; line-height: 1.15; }
.home-greet-sub  { font-size: .78rem; color: var(--gray-5); font-weight: 500; }

/* Hero KPI */
.home-hero-v3 {
  position: relative;
  background: var(--g-blue);
  border-radius: 18px;
  padding: 16px 18px 14px;
  color: #fff;
  box-shadow: var(--glow-blue);
  margin-bottom: 14px;
  overflow: hidden;
}
.home-hero-v3::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 88% 18%, rgba(253,224,71,.18), transparent 55%);
  pointer-events: none;
}
.home-hero-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.6);
  margin-bottom: 6px;
}
.home-hero-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  justify-content: space-between;
}
.home-hero-amount {
  font-size: 36px;
  white-space: nowrap;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.home-hero-spark {
  width: 110px;
  height: 36px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(217,119,6,.35));
}
.home-hero-foot { margin-top: 10px; }
.home-hero-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2px;
  background: var(--grad-gold);
  color: #5a3a05;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 6px rgba(217,119,6,.3);
}
.home-hero-chip.neg {
  background: linear-gradient(135deg,#fecaca 0%,#f87171 60%,#b91c1c 100%);
  color: #fff;
}

/* 4 stats secundarios (2026-08-17: Enviados/Aceptados/Cobrados/Facturados, antes 3) */
.home-stats-grid-v3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.home-stat-v3 {
  background: #fff;
  border: 1px solid var(--gray-2);
  border-radius: 14px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  overflow: hidden;
}
.home-stat-v3::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--stat-color, var(--c-blue));
  border-radius: 14px 0 0 14px;
}
.home-stat-num {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--stat-color, var(--gray-9));
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.home-stat-lbl {
  font-size: .7rem;
  font-weight: 600;
  color: var(--gray-5);
  letter-spacing: .1px;
  line-height: 1.15;
}

/* Plan banner v3 */
.plan-banner-v3 {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 14px;
  font-size: .78rem;
  color: var(--gray-7);
}
.plan-badge-v3 {
  display: inline-flex;
  align-items: center;
  background: var(--g-orange-soft);
  color: #fff;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(227,93,31,.25), inset 0 1px 0 rgba(255,255,255,.4);
}
.plan-progress-v3 {
  flex: 1;
  height: 6px;
  background: #fef3c7;
  border-radius: 99px;
  overflow: hidden;
  min-width: 40px;
}
.plan-progress-fill-v3 {
  height: 100%;
  background: var(--g-orange-soft);
  border-radius: 99px;
  transition: width .25s ease;
}
.plan-count-v3 {
  font-weight: 700;
  font-size: .74rem;
  color: var(--gray-7);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.plan-cta-v3 {
  font-weight: 800;
  color: var(--c-orange);
  font-size: .76rem;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
}
.plan-cta-v3:hover { text-decoration: underline; }

/* Quick actions 2x2 */
.home-quick-grid-v3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
/* A19-A1: 5 ítems en grid 2-col — centrar el último si queda solo en su fila */
.home-quick-grid-v3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.home-quick-v3 {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--gray-2);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  transition: transform .15s ease, box-shadow .15s ease;
  min-height: 60px;
}
.home-quick-v3 { transition: box-shadow .18s, transform .18s, background .18s; }
.home-quick-v3:active { transform: scale(.97); }
.home-quick-v3:hover { box-shadow: 0 6px 18px rgba(15,23,42,.10); background: linear-gradient(135deg,#fff 0%,#f5f8ff 100%); transform: translateY(-2px); }
.home-quick-v3 .hq-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.home-quick-v3 .hq-ico-gold {
  background: var(--grad-gold);
  color: #5a3a05;
}
.home-quick-v3 .hq-lbl {
  font-size: .82rem;
  font-weight: 700;
  color: var(--gray-9);
  letter-spacing: -0.1px;
  line-height: 1.15;
}

/* Section head + recent list */
.home-section-head-v3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 10px;
}
.home-section-head-v3 > span {
  font-size: .92rem;
  font-weight: 800;
  color: var(--gray-9);
  letter-spacing: -0.2px;
}
.btn-link-v3 {
  background: none;
  border: none;
  color: var(--c-blue);
  font-weight: 700;
  font-size: .78rem;
  cursor: pointer;
  padding: 10px 6px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.btn-link-v3:hover { text-decoration: underline; }

.home-recent-list-v3 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.recent-row-v3 {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--gray-2);
  border-radius: 12px;
  padding: 10px 12px 10px 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: box-shadow .15s ease;
}
.recent-row-v3:hover { box-shadow: 0 3px 10px rgba(15,23,42,.08); }
.recent-bar-v3 {
  width: 4px;
  align-self: stretch;
  flex-shrink: 0;
  margin-right: 8px;
  border-radius: 0;
}
.recent-main-v3 { flex: 1; min-width: 0; }
.recent-client-v3 {
  font-size: .9rem;
  font-weight: 700;
  color: var(--gray-9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.1px;
}
.recent-meta-v3 {
  font-size: .72rem;
  color: var(--gray-5);
  font-weight: 500;
  margin-top: 1px;
}
.recent-right-v3 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.recent-amt-v3 {
  font-size: .9rem;
  font-weight: 800;
  color: var(--gray-9);
  font-variant-numeric: tabular-nums;
}
.recent-chip-v3 {
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  letter-spacing: .15px;
}

/* Dark theme adjustments */
body.dark .home-greet-name { color: var(--fg); }
body.dark .home-stat-v3,
body.dark .home-quick-v3,
body.dark .recent-row-v3 {
  background: var(--bg-card);
  border-color: var(--border);
}
body.dark .home-stat-num,
body.dark .recent-client-v3,
body.dark .recent-amt-v3,
body.dark .home-quick-v3 .hq-lbl { color: var(--fg); }
body.dark .plan-banner-v3 {
  background: var(--bg-card);
  border-color: #5a3a05;
  color: var(--fg-muted);
}
.u-text-gray5-py5 { color: var(--gray-5); padding: 5px 0; }
.u-text-gray7-700 { color: var(--gray-7); font-size: .85rem; font-weight: 700; }
.u-text-374-md-mb8 { color: #374151; font-size: .85rem; margin-bottom: 8px; }
.u-text-success-xxs-bold { color: #16a34a; font-size: .6rem; font-weight: 700; }
.u-hint-gray4 { color: var(--gray-4); font-size: .73rem; margin-top: 2px; }
.u-hint-gray5 { color: var(--gray-5); font-size: .72rem; margin-top: 2px; }

/* ────────────────────────────────────────────────────────────────
   Budgets Screen v3 (BudgetsScreenV3 — handoff §4)
   ──────────────────────────────────────────────────────────────── */
.budgets-v3-hero {
  padding: 14px 0 6px;
  margin-bottom: 8px;
}
.bv3-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bv3-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--gray-8, #0f172a);
  line-height: 1.1;
}
.bv3-subtitle {
  margin-top: 4px;
  font-size: .82rem;
  color: var(--gray-6, #475569);
}
.bv3-subtitle strong { color: var(--c-blue); font-weight: 700; }
.bv3-new-btn {
  border: none;
  cursor: pointer;
  background: var(--g-blue);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  padding: 9px 14px;
  min-height: 38px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(26,53,98,.25);
  transition: transform .12s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.bv3-new-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(26,53,98,.32); }
.bv3-new-btn:active { transform: translateY(0); }

/* Chip filters with counts (sustituyen el look de .filter-tab para esta pantalla) */
/* Backlog 2026-08-18 (dueno): "eliminar el scroll lateral" -- el scroll horizontal (con
   scrollbar visible en escritorio, anadido el 2026-08-17 para que no pareciera que faltaban
   pestanas) se sustituye por flex-wrap: las pestanas que no caben en una fila bajan a la
   siguiente, todas visibles siempre, sin necesidad de deslizar. */
.chip-filters-v3 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 16px 10px;
  margin: 6px -16px 4px;
  background: transparent;
  border-bottom: none;
}
.chip-filters-v3 .chip-filter {
  flex-shrink: 0;
  scroll-snap-align: start;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  background: var(--gray-1);
  color: var(--gray-6, #475569);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  min-height: 36px;
  line-height: 1;
}
.chip-filters-v3 .chip-filter[data-chip="all"]      { background: #dbeafe; color: var(--c-blue); }
.chip-filters-v3 .chip-filter[data-chip="draft"]    { background: var(--status-draft-bg);    color: var(--status-draft-fg); }
.chip-filters-v3 .chip-filter[data-chip="sent"]     { background: var(--status-sent-bg);     color: var(--status-sent-fg); }
.chip-filters-v3 .chip-filter[data-chip="accepted"] { background: var(--status-accepted-bg); color: var(--status-accepted-fg); }
.chip-filters-v3 .chip-filter[data-chip="rejected"] { background: var(--status-rejected-bg); color: var(--status-rejected-fg); }
.chip-filters-v3 .chip-filter.active {
  background: var(--c-blue) !important;
  color: #fff !important;
  border-color: var(--c-blue);
  box-shadow: 0 3px 10px rgba(26,53,98,.25);
}

/* Budget card v3 with lateral status bar 4px */
/* OSCURO-TARJETAS-2026-08-26: `background:#fff` estaba escrito a pelo y `body.dark` reescribe
   `.card`/`.budget-card`/`.pro-card` pero NO esta clase, que es la nueva -> en oscuro quedaba
   fondo blanco con texto casi blanco (`--gray-7/8` son claros en oscuro): ilegible. Se arregla con
   TOKENS y no anadiendo la clase a la lista de `body.dark`: una lista que hay que acordarse de
   ampliar es justo lo que fabrico este fallo. */
.budget-card-v3 {
  position: relative;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: var(--status-draft-bar);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  cursor: pointer;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.budget-card-v3:hover { background: var(--gray-1); box-shadow: 0 4px 12px rgba(15,23,42,.06); }
.budget-card-v3[data-state="draft"]    { border-left-color: var(--status-draft-bar); }
.budget-card-v3[data-state="sent"]     { border-left-color: var(--status-sent-bar); }
.budget-card-v3[data-state="accepted"] { border-left-color: var(--status-accepted-bar); }
.budget-card-v3[data-state="invoiced"] { border-left-color: var(--status-accepted-bar); }
.budget-card-v3[data-state="rejected"] { border-left-color: var(--status-rejected-bar); }

.budget-card-v3 .card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  margin-bottom: 4px;
}
.budget-card-v3 .card-head strong {
  font-size: .88rem;
  color: var(--gray-7, #334155);
  font-weight: 700;
}
.budget-card-v3 .card-client {
  font-weight: 700;
  font-size: .98rem;
  color: var(--gray-8, #0f172a);
  margin-bottom: 2px;
}
.budget-card-v3 .card-obra {
  font-size: .8rem;
  color: var(--gray-5, #64748b);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.budget-card-v3 .card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  font-size: .82rem;
  color: var(--gray-5, #64748b);
}
.budget-card-v3 .card-meta .amount {
  font-size: 1.02rem;
  color: var(--gray-8, #0f172a);
  font-weight: 800;
}
.budget-card-v3 .card-footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  font-size: .72rem;
  color: var(--gray-5, #64748b);
}

/* Status chip (small pill, font 11px) */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}
.status-chip.status-draft    { background: var(--status-draft-bg);    color: var(--status-draft-fg); }
.status-chip.status-sent     { background: var(--status-sent-bg);     color: var(--status-sent-fg); }
.status-chip.status-accepted { background: var(--status-accepted-bg); color: var(--status-accepted-fg); }
.status-chip.status-invoiced { background: var(--status-accepted-bg); color: var(--status-accepted-fg); }
.status-chip.status-rejected { background: var(--status-rejected-bg); color: var(--status-rejected-fg); }
.status-chip.status-invoice  { background: #ede9fe; color: #6d28d9; }

/* Followup alert with subtle pulse */
.alert-followup {
  color: var(--status-rejected-fg, #991b1b);
  font-weight: 700;
  animation: pp-followup-pulse 2.4s ease-in-out infinite;
}
@keyframes pp-followup-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* ────────────────────────────────────────────────────────────────
   Contacts Screen v3 (ContactsScreenV3 — handoff §6)
   ──────────────────────────────────────────────────────────────── */
.contact-letter-header {
  position: sticky;
  top: calc(var(--header-h) + var(--sat, 0px));
  background: var(--gray-0);
  padding: 6px 16px;
  font-weight: 800;
  color: var(--c-blue);
  font-size: 14px;
  letter-spacing: .5px;
  z-index: 1;
  margin: 0 -16px 2px;
  border-bottom: 1px solid var(--gray-1);
}
.contact-row-v3 {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  align-items: center;
  cursor: pointer;
  border-radius: 10px;
  transition: background .12s ease;
  position: relative;
}
.contact-row-v3:hover { background: var(--gray-1); }
.contact-row-v3 + .contact-row-v3 { border-top: 1px solid var(--gray-1); border-radius: 0; }

.contact-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  flex-shrink: 0;
  letter-spacing: .3px;
  box-shadow: 0 1px 2px rgba(15,23,42,.18);
}
.contact-row-v3 .contact-info { flex: 1; min-width: 0; }
.contact-row-v3 .contact-name {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--gray-8, #0f172a);
  line-height: 1.2;
}
.contact-row-v3 .contact-sub {
  font-size: .78rem;
  color: var(--gray-6, #475569);
  margin-top: 2px;
}
.contact-row-v3 .contact-sub strong { color: var(--c-blue); font-weight: 700; }
.contact-row-v3 .contact-meta {
  font-size: .72rem;
  color: var(--gray-5, #64748b);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-row-v3 .contact-actions { position: relative; }

.badge-vip {
  background: var(--grad-gold);
  color: #fff;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
  box-shadow: 0 1px 3px rgba(217,119,6,.35);
}

/* ═══════════════════════════════════════════════════════════════
   Mi Empresa v3 — CompanyScreenV3
═══════════════════════════════════════════════════════════════ */

.empresa-v3 {
  padding-bottom: 100px; /* asegura que no se corta al final */
}

/* Hero compacto azul */
.company-hero-v3 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  background: var(--g-blue-dark);
  border-radius: 16px;
  color: #fff;
  margin-bottom: 14px;
  box-shadow: var(--shadow-md);
}
.company-hero-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: contain;
  flex-shrink: 0;
}
.company-hero-logo-fallback {
  background: rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}
.company-hero-info { flex: 1; min-width: 0; }
.company-hero-titlerow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.company-hero-name {
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  letter-spacing: -0.3px;
}
.company-hero-subtitle {
  font-size: .82rem;
  opacity: .82;
  color: #e0e7ff;
}

/* Badges */
.company-badge {
  font-size: .68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: .02em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.company-badge-verified {
  background: linear-gradient(135deg, #34d399, #059669);
  color: #fff;
  box-shadow: 0 1px 4px rgba(16,185,129,.4);
}
.company-badge-rating {
  background: var(--grad-gold);
  color: #7c2d12;
  box-shadow: 0 1px 4px rgba(217,119,6,.35);
}

/* 3 stats horizontal */
.company-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.company-stat-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px 8px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-1);
}
.company-stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--c-blue);
  line-height: 1.15;
}
.company-stat-label {
  font-size: .7rem;
  color: var(--gray-5);
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
body.dark .company-stat-card { background: var(--bg-card); border-color: var(--border); }
body.dark .company-stat-value { color: var(--accent); }

/* Section card (datos fiscales / docs) */
.company-section-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-1);
  margin-bottom: 14px;
  overflow: hidden;
}
body.dark .company-section-card { background: var(--bg-card); border-color: var(--border); }

.company-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 6px;
  gap: 8px;
}
.company-section-title {
  font-size: .92rem;
  font-weight: 800;
  color: var(--gray-8);
  letter-spacing: -0.2px;
}
body.dark .company-section-title { color: var(--fg); }

.company-edit-btn {
  background: var(--gray-1);
  border: none;
  color: var(--c-blue);
  font-weight: 700;
  font-size: .8rem;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
}
.company-edit-btn:hover { background: var(--gray-2); }
body.dark .company-edit-btn { background: var(--gray-2); color: var(--accent); }

/* Datos fiscales rows */
.company-fiscal-list { padding: 6px 16px 16px; }
.company-fiscal-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-1);
}
.company-fiscal-row:last-child { border-bottom: 0; }
.company-fiscal-label {
  font-size: .78rem;
  color: var(--gray-5);
  font-weight: 600;
  flex-shrink: 0;
}
.company-fiscal-value {
  font-size: .88rem;
  color: var(--gray-8);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}
body.dark .company-fiscal-row { border-bottom-color: var(--border); }
body.dark .company-fiscal-value { color: var(--fg); }

/* Documentación */
.company-docs-list { padding: 4px 12px 12px; }
.company-doc-item {
  background: var(--gray-0);
  border: 1px solid var(--gray-1);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
}
.company-doc-item:last-child { margin-bottom: 0; }
body.dark .company-doc-item { background: var(--bg-elev); border-color: var(--border); }

.company-doc-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.company-doc-info { flex: 1; min-width: 0; }
.company-doc-name {
  font-weight: 700;
  font-size: .92rem;
  color: var(--gray-8);
  word-break: break-word;
}
body.dark .company-doc-name { color: var(--fg); }
.company-doc-type {
  font-size: .72rem;
  color: var(--gray-5);
  margin-top: 1px;
}
.company-doc-status {
  font-size: .7rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: .02em;
}
.doc-status-valid    { background: #dcfce7; color: #166534; }
.doc-status-soon     { background: #fef3c7; color: #92400e; }
.doc-status-expired  { background: #fee2e2; color: #991b1b; }
.doc-status-unknown  { background: var(--gray-1); color: var(--gray-6); }

.company-doc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: .8rem;
}
.company-doc-expiry { color: var(--gray-7); }
body.dark .company-doc-expiry { color: var(--fg-muted); }

.company-doc-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.company-doc-btn-replace,
.company-doc-btn-view,
.company-doc-btn-del {
  background: var(--white);
  border: 1px solid var(--gray-2);
  color: var(--gray-7);
  font-size: .76rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.company-doc-btn-replace:hover,
.company-doc-btn-view:hover { background: var(--gray-1); }
.company-doc-btn-del { color: var(--red); border-color: #fecaca; }
.company-doc-btn-del:hover { background: #fee2e2; }
body.dark .company-doc-btn-replace,
body.dark .company-doc-btn-view,
body.dark .company-doc-btn-del { background: var(--bg-card); border-color: var(--border); color: var(--fg); }

/* ═══════════════════════════════════════════════════════════════
   Ajustes v3 — SettingsScreenV3
═══════════════════════════════════════════════════════════════ */

.settings-v3 { padding-bottom: 100px; }

/* Card cuenta destacada */
.settings-account-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-1);
}
body.dark .settings-account-card {
  background: var(--bg-card);
  border-color: var(--border);
}
.settings-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--g-blue-soft);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: var(--glow-blue);
  letter-spacing: -0.5px;
}
.settings-account-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-account-info strong {
  font-size: 1rem;
  color: var(--gray-8);
  font-weight: 800;
  letter-spacing: -0.2px;
}
body.dark .settings-account-info strong { color: var(--fg); }
.settings-account-email {
  font-size: .82rem;
  color: var(--gray-5);
  word-break: break-all;
}

.plan-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.plan-pill {
  background: var(--gray-1);
  color: var(--gray-7);
  font-size: .7rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.plan-pill-pro {
  background: var(--grad-gold);
  color: #7c2d12;
  box-shadow: 0 1px 3px rgba(217,119,6,.3);
}
.btn-upgrade-pro {
  background: var(--g-orange);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: .76rem;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: .02em;
  box-shadow: var(--glow-orange);
  transition: transform .12s ease;
}
.btn-upgrade-pro:hover { transform: translateY(-1px); }
.btn-upgrade-pro:active { transform: translateY(0); }

/* Section header (kicker-style) */
.settings-section-header {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gray-5);
  padding: 14px 16px 6px;
}
body.dark .settings-section-header { color: var(--fg-muted); }

/* Group container */
.settings-group {
  background: #fff;
  border: 1px solid var(--gray-1);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}
body.dark .settings-group { background: var(--bg-card); border-color: var(--border); }

/* Row */
.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gray-1);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: var(--gray-8);
  min-height: 56px;
  transition: background .12s ease;
}
.settings-row:last-child { border-bottom: 0; }
.settings-row:hover { background: var(--gray-1); }
.settings-row:active { background: var(--gray-2); }
body.dark .settings-row { color: var(--fg); border-bottom-color: var(--border); }
body.dark .settings-row:hover { background: var(--bg-elev); }

.settings-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.settings-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.settings-row-label {
  font-size: .92rem;
  font-weight: 700;
  color: var(--gray-8);
  line-height: 1.25;
}
body.dark .settings-row-label { color: var(--fg); }
.settings-row-desc {
  font-size: .76rem;
  color: var(--gray-5);
  line-height: 1.3;
}
.settings-row-meta {
  font-size: .8rem;
  color: var(--gray-6);
  font-weight: 600;
  margin-left: auto;
  text-align: right;
  max-width: 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-row-arrow {
  color: var(--gray-4);
  margin-left: 6px;
  font-size: 1.2rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* Update banner */
.settings-update-banner {
  background: linear-gradient(135deg, #1a3562, #1d4ed8);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  box-shadow: var(--glow-blue);
}
.settings-update-icon {
  width: 38px; height: 38px; min-width: 38px;
  background: rgba(255,255,255,.15);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.settings-update-info { flex: 1; }
.settings-update-title { font-weight: 700; font-size: .9rem; }
.settings-update-desc { font-size: .78rem; color: rgba(255,255,255,.78); margin-top: 1px; }
.settings-update-arrow { color: rgba(255,255,255,.7); font-size: 1.2rem; }

/* Danger zone */
.danger-zone {
  border: 2px solid var(--red);
  background: #fff;
  border-radius: 14px;
  padding: 8px 8px 12px;
  margin-top: 24px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(220,38,38,.08);
}
body.dark .danger-zone { background: var(--bg-card); }
.danger-zone-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--red);
  padding: 6px 10px 8px;
}
.danger-zone .settings-row {
  border-bottom: 1px solid #fee2e2;
  border-radius: 10px;
}
.danger-zone .settings-row:last-child { border-bottom: 0; }
.danger-zone .settings-row:hover { background: #fef2f2; }
.danger-zone .settings-row-label { color: var(--red) !important; }
body.dark .danger-zone .settings-row { border-bottom-color: rgba(220,38,38,.25); }
body.dark .danger-zone .settings-row:hover { background: rgba(220,38,38,.08); }
.settings-row-danger .settings-icon {
  box-shadow: 0 1px 3px rgba(220,38,38,.25);
}

/* Footer */
.settings-footer {
  text-align: center;
  padding: 16px 0 8px;
  color: var(--gray-4);
  font-size: .75rem;
}

/* Bug #2 — vista previa en línea de IVA bajo input de precio (mat/lab) */
.iva-preview {
  display: block;
  font-size: .7rem;
  color: #94a3b8;
  margin-top: 2px;
  font-family: ui-monospace, monospace;
  line-height: 1.3;
  min-height: 0;
}
.iva-preview:empty { display: none; }
body.dark .iva-preview { color: #64748b; }

/* ── Red Profesional v3 ─────────────────────────────── */
.redpro-hero {
  background: var(--g-blue-dark);
  color: #fff;
  padding: 22px;
  border-radius: 16px;
  margin: 8px 8px 12px;
  box-shadow: var(--glow-blue);
  position: relative;
  overflow: hidden;
}
.redpro-hero::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at center, rgba(227,93,31,.18), transparent 70%);
  pointer-events: none;
}
.redpro-hero-kicker {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-orange);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  position: relative;
}
.redpro-hero-beta {
  background: rgba(255,255,255,.18);
  color: #fff;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: .65rem;
  letter-spacing: .8px;
}
.redpro-hero-title {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.5px;
  margin: 0 0 4px;
  line-height: 1.1;
  position: relative;
}
.redpro-hero-sub {
  font-size: .82rem;
  opacity: .85;
  margin: 0;
  line-height: 1.4;
  position: relative;
}
.redpro-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
  position: relative;
}
.redpro-hero-stats .hero-stat {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
}
.redpro-hero-stats .hero-stat strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1.1;
  color: #fff;
}
.redpro-hero-stats .hero-stat span {
  font-size: .68rem;
  opacity: .75;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Trade chips (gremios) */
.redpro-trade-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 12px 10px;
  margin: 0 0 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.15) transparent;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 12px;
}
.redpro-trade-chips::-webkit-scrollbar { height: 3px; }
.redpro-trade-chips::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 2px; }
.redpro-trade-chip {
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--gray-1);
  color: var(--gray-7, #475569);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background .15s, color .15s, transform .12s;
}
.redpro-trade-chip:active { transform: scale(.96); }
.redpro-trade-chip.active {
  background: var(--g-blue-soft);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(26,53,98,.25);
}
body.dark .redpro-trade-chip { background: #262119; color: #cbd5e1; }
body.dark .redpro-trade-chip.active { background: var(--g-blue-soft); color: #fff; }

/* Map pin overlay (HTML pins layer) */
.redpro-map { position: relative; }
.map-pin {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--c-blue);
  border: 2px solid #fff;
  cursor: pointer;
  transition: transform .2s, background .2s;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  z-index: 2;
}
.map-pin:hover { transform: scale(1.4); background: var(--c-orange); }
.map-pin.active {
  background: var(--c-orange);
  transform: scale(1.4);
  box-shadow: 0 0 0 3px rgba(227,93,31,.25), 0 2px 6px rgba(0,0,0,.3);
}

/* Pro card v3 */
.redpro-card {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 8px;
  cursor: pointer;
  transition: transform .12s, box-shadow .15s;
  border: 1px solid var(--gray-1);
}
.redpro-card:active { transform: scale(.99); }
.redpro-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--g-blue-soft);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.15rem;
  flex-shrink: 0;
  letter-spacing: -.5px;
}
.redpro-card-body { flex: 1; min-width: 0; }
.redpro-card-name {
  font-weight: 700;
  font-size: .92rem;
  color: var(--gray-8, #0f172a);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.redpro-card-trade {
  font-size: .75rem;
  color: var(--c-blue);
  font-weight: 600;
  margin-top: 1px;
}
.redpro-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  color: var(--gray-5, #64748b);
  margin-top: 2px;
}
.redpro-card-rating {
  color: #f59e0b;
  font-weight: 700;
}
.redpro-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.redpro-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 8px;
  border: none;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--gray-1);
  color: var(--gray-7, #475569);
  transition: transform .12s, background .15s;
}
.redpro-action-btn:active { transform: scale(.96); }
.redpro-action-wa { background: #dcfce7; color: #166534; }
.redpro-action-call { background: #dbeafe; color: #1e40af; }
.redpro-action-mail { background: #fef3c7; color: #92400e; }
.redpro-action-req {
  background: var(--g-blue-soft);
  color: #fff;
  margin-left: auto;
}
body.dark .redpro-card { background: #0f1730; border-color: #262119; }
body.dark .redpro-card-name { color: #e2e8f0; }
body.dark .redpro-action-btn { background: #262119; color: #cbd5e1; }
body.dark .redpro-action-wa { background: rgba(34,197,94,.15); color: #4ade80; }
body.dark .redpro-action-call { background: rgba(59,130,246,.15); color: #8fb2e8; }
body.dark .redpro-action-mail { background: rgba(245,158,11,.15); color: #ffc46b; }

.redpro-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--gray-5, #64748b);
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.redpro-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 8px;
  opacity: .5;
}
body.dark .redpro-empty { background: #0f1730; }

/* ── Empty state v3 (componente reusable) ─────────────────── */
.empty-state-v3 {
  text-align: center;
  padding: 48px 24px;
  color: var(--gray-6);
}
.empty-state-icon {
  font-size: 56px;
  margin-bottom: 14px;
  opacity: .8;
  line-height: 1;
}
.empty-state-v3 h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--gray-8);
  margin-bottom: 6px;
}
.empty-state-v3 p {
  font-size: 14px;
  color: var(--gray-5);
  margin-bottom: 20px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.45;
}
.btn-primary-orange {
  background: var(--g-orange);
  color: white;
  padding: 12px 24px;
  min-height: 44px;
  border: none;
  border-radius: 14px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: var(--glow-orange);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-primary-orange:hover { transform: translateY(-1px); }
.btn-primary-orange:active { transform: translateY(0); }
body.dark .empty-state-v3 { color: var(--gray-4); }
body.dark .empty-state-v3 h3 { color: var(--gray-1); }

/* ── Skeleton loader cards ────────────────────────────────── */
.skeleton-card {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: white;
  border-radius: 12px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  flex-shrink: 0;
}
.skeleton-content { flex: 1; min-width: 0; }
.skeleton-line {
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  margin-bottom: 8px;
}
.skeleton-line-title { width: 70%; height: 14px; }
.skeleton-line-meta { width: 50%; }
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
body.dark .skeleton-card { background: #1f2937; box-shadow: none; }
body.dark .skeleton-avatar,
body.dark .skeleton-line {
  background: linear-gradient(90deg, #2a3441 25%, #374151 50%, #2a3441 75%);
  background-size: 200% 100%;
}

/* ═══════════════ ONBOARDING 3 PASOS (post-register) ═══════════════ */
.onboarding-screen {
  position: fixed;
  inset: 0;
  z-index: 9800;  /* por encima de betaSnackbar (8000) y de la capa de modales (.modal-overlay, 1000). El emailVerifyBanner bajo a 900 el 22-ago: tapaba la unica salida de la Vista previa. Aqui ponia "modales (5000)" y NUNCA hubo capa 5000. */
  background: var(--g-blue-dark);
  color: white;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) 24px 24px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.onboarding-screen.u-hidden { display: none !important; }
/* Forzar pointer-events:auto y z-index alto en botones para descartar overlays invisibles */
.onb-actions { position: relative; z-index: 1; }
.onb-actions button { pointer-events: auto !important; touch-action: manipulation; }
.onb-progress { height: 4px; border-radius: 2px; background: rgba(255,255,255,.15); margin-bottom: 8px; overflow: hidden; }
.onb-progress-fill { height: 100%; background: var(--g-orange); transition: width .3s ease; border-radius: 2px; }
.onb-step-counter { font-size: 12px; opacity: .6; text-align: center; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 32px; }
.onb-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.onb-emoji { font-size: 64px; margin-bottom: 16px; }
.onb-step h1 { font-size: 28px; font-weight: 800; margin-bottom: 8px; letter-spacing: -.5px; color: #fff; }
.onb-step p { font-size: 14px; color: rgba(255,255,255,.7); margin-bottom: 28px; max-width: 320px; }
.onb-fields { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px; }
.onb-fields .auth-input { background: rgba(255,255,255,.08); color: white; border-color: rgba(255,255,255,.2); }
.onb-fields .auth-input::placeholder { color: rgba(255,255,255,.5); }
.onb-fields select.auth-input { color: white; }
.onb-fields select.auth-input option { color: #1a3562; background: #fff; }
.onb-fields select.auth-input option[value=""] { color: #6b7280; }
.onb-services-help { font-size: 12px; color: rgba(255,255,255,.6); margin: -16px 0 16px; max-width: 380px; line-height: 1.4; }
.onb-services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 380px; }
.onb-service-card { display: flex; align-items: center; gap: 8px; padding: 12px; background: rgba(255,255,255,.08); border-radius: 12px; cursor: pointer; font-size: 13px; font-weight: 600; }
.onb-service-card input { accent-color: var(--c-orange); }
.onb-actions { display: flex; gap: 10px; padding-top: 24px; max-width: 380px; margin: 0 auto; width: 100%; }
.onb-btn-primary { flex: 1; background: var(--g-orange); box-shadow: var(--glow-orange); border: none; color: white; padding: 14px; border-radius: 14px; font-weight: 700; font-size: 15px; cursor: pointer; }
.onb-btn-ghost, .onb-btn-skip { background: transparent; color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.2); padding: 14px 18px; border-radius: 14px; font-weight: 600; cursor: pointer; }
.onb-btn-skip { border: none; min-height: 44px; color: rgba(255,255,255,.92); text-decoration: underline; text-underline-offset: 3px; font-size: .87rem; }

/* ═══════════════════════════════════════════════════════════════
   VOICE ASSISTANT — modal + orb metalizado animado
═══════════════════════════════════════════════════════════════ */
.voice-modal { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: flex-end; }
/* Override del display:flex cuando la modal NO debe estar abierta (u-hidden tenía display:none pero el inline del .voice-modal lo pisaba) */
.voice-modal.u-hidden { display: none !important; }
/* FAB de voz NO debe verse en la pantalla de login ni demo */
body:has(#authScreen:not(.u-hidden)) #voiceFab { display: none !important; }
.voice-backdrop { position: absolute; inset: 0; background: rgba(8, 14, 30, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.voice-content {
  position: relative;
  z-index: 1;
  width: 100%; max-width: 480px; margin: 0 auto;
  background: var(--g-blue-dark);
  color: white;
  border-top-left-radius: 28px; border-top-right-radius: 28px;
  padding: 28px 24px calc(env(safe-area-inset-bottom, 0px) + 24px);
  text-align: center;
  animation: voice-slide-up .28s ease;
}
@keyframes voice-slide-up { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* QA 2026-08-06: z-index y pointer-events explicitos. El modal es una hoja inferior
   (align-items:flex-end) y ahi es facil que un elemento posterior solape la esquina superior
   derecha sin que se note; si eso pasa, el clic no llega nunca al boton de cerrar. */
.voice-close { position: absolute; right: 18px; top: 18px; background: rgba(255,255,255,.1); color: white; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 14px; z-index: 5; pointer-events: auto; }
.voice-orb-wrap { width: 160px; height: 160px; margin: 16px auto 24px; position: relative; cursor: pointer; }
.voice-orb { position: absolute; inset: 0; }
.voice-orb-inner {
  position: absolute; inset: 30px;
  background: var(--g-blue-soft);
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(59,108,194,0.6), inset 0 4px 20px rgba(255,255,255,0.2);
  transition: transform .3s;
}
.voice-orb.listening .voice-orb-inner { transform: scale(1.05); animation: voice-pulse 1.4s ease infinite; }
.voice-orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(59,108,194,0.4); opacity: 0; }
.voice-orb.listening .voice-orb-ring-1 { animation: voice-ring 2s ease infinite; }
.voice-orb.listening .voice-orb-ring-2 { animation: voice-ring 2s ease infinite .5s; }
.voice-orb.listening .voice-orb-ring-3 { animation: voice-ring 2s ease infinite 1s; }
@keyframes voice-pulse { 50% { transform: scale(1.1); } }
@keyframes voice-ring { 0% { opacity: 0.8; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1.4); } }
.voice-content h2 { font-size: 22px; font-weight: 800; margin-bottom: 12px; color: #fff; }
.voice-transcript { min-height: 60px; padding: 14px; background: rgba(255,255,255,0.06); border-radius: 14px; font-size: 14px; color: rgba(255,255,255,.95); margin-bottom: 18px; line-height: 1.5; text-align: left; max-height: 160px; overflow-y: auto; }
.voice-interim { color: rgba(255,255,255,.5); font-style: italic; }
.voice-actions { margin-bottom: 12px; }
.voice-btn-primary { background: var(--g-orange); color: white; padding: 14px 32px; border: none; border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: var(--glow-orange); }
.voice-hint { font-size: 12px; color: rgba(255,255,255,0.5); margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   MODO OBRA — pantalla 1-mano + voz (overlay full-screen)
═══════════════════════════════════════════════════════════════ */
#screen-field-mode { position: fixed; inset: 0; z-index: 9400; background: var(--g-blue-dark); color: white; min-height: 100vh; padding: 20px; padding-top: calc(env(safe-area-inset-top, 0px) + 14px + var(--update-banner-h, 0px)); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); overflow-y: auto; }
.field-mode-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.field-mode-title { font-size: 20px; font-weight: 800; letter-spacing: 2px; color: #fff; }
.field-tasks { background: rgba(255,255,255,.06); border-radius: 14px; padding: 14px; margin-bottom: 24px; min-height: 200px; max-height: 40vh; overflow-y: auto; }
.field-empty { text-align: center; color: rgba(255,255,255,.75); padding: 30px; font-size: 14px; }
.field-task { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); align-items: flex-start; }
.field-task:last-child { border-bottom: none; }
.field-task-time { font-size: 11px; color: rgba(255,255,255,.5); min-width: 40px; padding-top: 2px; }
.field-task-text { flex: 1; font-size: 14px; color: rgba(255,255,255,.95); word-break: break-word; }
.field-task-del { background: transparent; color: rgba(255,255,255,.4); border: none; cursor: pointer; font-size: 14px; padding: 0 6px; }
.field-big-mic { width: 100%; padding: 28px; background: var(--g-orange); color: white; border: none; border-radius: 20px; font-size: 22px; font-weight: 800; letter-spacing: 1.5px; cursor: pointer; box-shadow: var(--glow-orange); margin-bottom: 12px; line-height: 1.3; }
.field-secondary { width: 100%; padding: 14px; background: rgba(255,255,255,.1); color: white; border: none; border-radius: 14px; font-size: 14px; font-weight: 700; cursor: pointer; margin-bottom: 8px; }

/* ── UX polish: microinteracciones en botones primarios ────────── */
.btn-primary, .auth-submit, .btn-upgrade-pro, .nav-fab, .btn-primary-orange { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.btn-primary:hover, .auth-submit:hover, .btn-upgrade-pro:hover, .btn-primary-orange:hover { transform: translateY(-1px); }
.btn-primary:active, .auth-submit:active, .btn-upgrade-pro:active, .btn-primary-orange:active, .nav-fab:active { transform: translateY(0); }

/* ── UX polish: accesibilidad — focus visible (no anular outline globalmente) ── */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--c-blue, #1d4ed8); outline-offset: 2px; }


/* N16-1 perf: optimizaciones de pantallas inactivas (INERT_PERF) */
.screen:not(.active),
.modal-overlay:not(.open) {
  pointer-events: none; /* Garantia: cero interaccion con DOM oculto */
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* N17-1: 480px breakpoint (iPhone SE / Android pequeno) */
@media (max-width: 480px) {
  :root { --pad-x: 12px; }
  body { font-size: 15px; }
  .btn, .btn-primary, .btn-outline, .btn-ghost { min-height: 44px; padding: 10px 12px; font-size: .9rem; }
  .form-input, .form-select { font-size: 16px; padding: 10px 12px; }
  .card { padding: 12px; }
  .modal { max-width: 100%; border-radius: 12px 12px 0 0; }
  .home-stat-num { font-size: 1.4rem; }
  .home-stat-lbl { font-size: .7rem; }
  .badge { font-size: .7rem; padding: 3px 7px; }
  h1 { font-size: 1.25rem; }
  h2 { font-size: 1.05rem; }
  h3 { font-size: .95rem; }
}
@media (max-width: 360px) {
  body { font-size: 14px; }
  .btn { min-height: 44px; font-size: .85rem; padding: 9px 10px; }
  .home-stat-num { font-size: 1.2rem; }
  .home-quick-v3 { padding: 10px 8px; min-height: 64px; }
  .drawer { width: 88vw; }
  .modal { padding: 12px; }
}

/* N18-7: feedback visible para validacion HTML5 */
.input-invalid, input:invalid:not(:placeholder-shown), select:invalid:not(:focus) {
  border-color: var(--red, #dc2626) !important;
  box-shadow: 0 0 0 2px rgba(220,38,38,.15);
}
.input-invalid:focus { border-color: var(--red, #dc2626) !important; }

/* P3 perf: content-visibility en cards long-list (renderiza solo viewport) */
.budget-card-v3, .recent-row-v3, .contact-row, .client-row {
  content-visibility: auto;
  contain-intrinsic-size: 0 90px;
}


/* A-06: focus-visible — outline para navegación por teclado (WCAG 2.4.11) */
:focus-visible {
  outline: 2px solid #1a3562;
  outline-offset: 2px;
  border-radius: 3px;
}
/* Suprimir outline en interacción táctil/mouse (no keyboard) */
:focus:not(:focus-visible) { outline: none; }

/* redpro-landscape-fix */
/* Landscape móvil (alto < 520px): ocultar hero y chips para que el mapa ocupe pantalla */
@media (orientation: landscape) and (max-height: 520px) {
  #screen-profesionales .redpro-hero { display: none !important; }
  #screen-profesionales .redpro-trade-chips { display: none !important; }
  #screen-profesionales .redpro-map-wrap {
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 6px !important;
  }
  #spain-map-wrap { border-radius: 0 !important; }
}

/* nav-badge-dot */
.nav-icon-badge-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.nav-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 15px;
  height: 15px;
  background: #ef4444;
  color: #fff;
  font-size: .55rem;
  font-weight: 800;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  border: 1.5px solid #fff;
  pointer-events: none;
  z-index: 2;
}

/* redpro-req-badge */
.redpro-card--requested {
  border-left: 3px solid #10b981;
}
.redpro-req-badge {
  font-size: .62rem;
  margin-left: 5px;
  vertical-align: middle;
}

/* nav-mode-fix */
/* Bottom-nav: cada nav-item pertenece a un modo. data-ch = empresa/autonomo,
   data-co = cliente. Sin esto se mostraban los de AMBOS modos a la vez y los
   labels se solapaban (6+ botones + FAB descolocado en movil). */
body:not(.app-mode-client) .bottom-nav .nav-item[data-co] { display: none !important; }
body.app-mode-client .bottom-nav .nav-item[data-ch] { display: none !important; }
/* drawer por modo: data-ch=empresa, data-co=cliente */
body:not(.app-mode-client) #drawer .drawer-item[data-co] { display: none !important; }
body.app-mode-client #drawer .drawer-item[data-ch] { display: none !important; }
/* support chips por modo: data-ch=gremio, data-co=cliente */
body:not(.app-mode-client) #supportChips .support-chip[data-co] { display: none !important; }
body.app-mode-client #supportChips .support-chip[data-ch] { display: none !important; }
/* Fix 9: en modo cliente no hay creacion por voz (Celeste es para gremios) */
body.app-mode-client #voiceFab,
body.app-mode-client #btnWizardDictate,
body.app-mode-client #btnVoiceAgent,
body.app-mode-client .nav-item.nav-fab { display: none !important; }
/* Refuerzo: el label nunca debe partirse en 2 lineas ni solaparse */
.bottom-nav .nav-item span:not(.nav-icon-wrap):not(.nav-icon):not(.nav-badge) {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; display: block; text-align: center;
}

/* app-mode-client */
body.app-mode-client [data-nav="budgets"],
body.app-mode-client [data-nav="clients"],
body.app-mode-client [data-nav="templates"],
body.app-mode-client [data-nav="monthly"],
body.app-mode-client [data-nav="cash-flow"],
body.app-mode-client [data-nav="aeat"],
body.app-mode-client [data-nav="catalog"],
body.app-mode-client [data-nav="empresa"],
body.app-mode-client [data-nav="subcontracts"],
body.app-mode-client [data-nav="contactos"],
body.app-mode-client button[data-screen="budgets"],
body.app-mode-client .home-hero-v3,
body.app-mode-client .home-stats-grid-v3,
body.app-mode-client .home-voice-card,
body.app-mode-client .home-quick-grid-v3,
body.app-mode-client .plan-banner-v3 { display: none !important; }

/* n5-m1-drawer */
.drawer-nav .drawer-item { pointer-events: auto !important; }


/* ── FIX-MOBILE-CSS: mejoras para versión web en navegador móvil ────────────
   display-mode:browser es true en Chrome/Safari normal; false en standalone PWA ── */
@media (display-mode: browser) and (max-width: 640px) {
  /* Añadir padding extra al bottom-nav para que no quede tapado por la barra del navegador */
  .bottom-nav {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
    height: calc(58px + max(env(safe-area-inset-bottom, 0px), 8px));
  }
  /* El contenido activo necesita más margen inferior para no quedar bajo el nav */
  .screen.active {
    padding-bottom: calc(80px + max(env(safe-area-inset-bottom, 0px), 8px)) !important;
  }
  /* App header — el safe-area-inset-top en browser es 0; añadir padding mínimo */
  .app-header {
    padding-top: max(env(safe-area-inset-top, 0px), 8px);
  }
}

/* En navegador móvil: asegurar que el FAB no queda tapado */
@media (display-mode: browser) and (max-width: 640px) {
  .nav-item.nav-fab .nav-icon-wrap {
    transform: translateY(-18px); /* menos elevado que en standalone */
  }
}

/* B-32: en escritorio el snackbar de ayuda no debe tapar la sidebar izquierda */
@media (min-width:1024px){#guideSnackbar{left:50%!important;right:auto!important;transform:translateX(-50%);max-width:560px}}

/* H-13: ocultar tira Verifactu en móvil <480px para liberar espacio hero */
@media (max-width: 479px) {
  .urgency-strip { display: none !important; }
}

/* N-08: ocultar FABs (asistente de voz / chat) mientras hay un modal abierto. Antes
   asomaban POR ENCIMA del overlay (FAB z-index 9800 > overlay 1000) y se "atravesaban"
   con el modal de venta. :has() degrada con gracia en navegadores antiguos. */
/* FAB-A-CABECERA-2026-08-23: #voiceFab sale de esta lista. Ya no es un flotante que asome
   por encima del overlay: es un boton de la cabecera, y la cabecera se queda donde esta. */
body:has(.modal-overlay.open) [id$="chatFab"],
body:has(.modal-overlay.open) .chat-fab { display: none !important; }

/* FAB-A-CABECERA-2026-08-23: el z-index 2500 era para que un overlay de contenido no
   interceptara al flotante. En la cabecera no hace falta, y ademas lo sacaria de su capa. */

/* ════════════════════════════════════════════════════════════════
   UNIFICAR MENÚ — en escritorio (≥1024px) el menú lateral ES el drawer
   (mismo menú agrupado que la app). El rail antiguo (.bottom-nav) se oculta.
   ════════════════════════════════════════════════════════════════ */
.drawer-item-new { font-weight: 700; }
.drawer-item-new > span:first-child { filter: saturate(1.4); }

@media (min-width: 1024px) {
  :root { --sidebar-w: 230px; }
  /* El drawer pasa a ser el sidebar persistente; se oculta el rail viejo y la hamburguesa */
  .bottom-nav { display: none !important; }
  .drawer-overlay { display: none !important; }
  .btn-menu { display: none !important; }
  .drawer {
    transform: none !important;
    pointer-events: auto !important;
    transition: none !important;
    left: max(0px, calc(50vw - 480px)) !important;
    top: calc(var(--header-h) + var(--sat) + 20px);
    bottom: 20px;
    height: auto;
    width: var(--sidebar-w);
    max-width: var(--sidebar-w);
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
  }
  .drawer-nav { flex: 1 1 auto; overflow-y: auto; }
  /* Empuja el contenido a la derecha del sidebar (drawer) */
  .screen { margin-left: var(--sidebar-w); }
}

/* ── AREA DE PULSACION MINIMA (A6/A7, 2026-08-09) ────────────────────────────────────────────
   Auditoria externa: «areas tactiles <44 px». Al medir todo lo que lleva `cursor:pointer` salieron
   63 controles por debajo de 44, no los 3 del informe.
   El area la pone un pseudo-elemento TRANSPARENTE centrado sobre el control, no un tamano mayor:
   asi el boton se sigue viendo exactamente igual. Subir el alto real de sesenta controles habria
   recolocado media aplicacion sin forma de comprobarlo.
   --tap-w/--tap-h se bajan en las filas apretadas a proposito: dos areas contiguas que se solapan
   hacen que el clic se lo lleve siempre la misma, y eso es PEOR que el problema original. */
.auth-tab, .auth-demo-btn, .auth-link-ghost, .auth-link-ghost-center,
#authPassToggle, #drawerEmailMaskBtn, .field-task-del, .map-pin,
.voice-close, .date-cal-btn, .dp-nav,
[data-action="close-modal"], [data-action="close-support-chat"],
[data-action="dismiss-guide-snackbar"], [data-action="dismiss-update-banner"],
.chart-tab, #pirateFlagMat, #irpfFlagMat, #pirateFlagLab, #irpfFlagLab, .co-vis-lbl {
  position: relative;
}
.auth-tab::after, .auth-demo-btn::after, .auth-link-ghost::after, .auth-link-ghost-center::after,
#authPassToggle::after, #drawerEmailMaskBtn::after, .field-task-del::after, .map-pin::after,
.voice-close::after, .date-cal-btn::after, .dp-nav::after,
[data-action="close-modal"]::after, [data-action="close-support-chat"]::after,
[data-action="dismiss-guide-snackbar"]::after, [data-action="dismiss-update-banner"]::after,
.chart-tab::after, #pirateFlagMat::after, #irpfFlagMat::after, #pirateFlagLab::after,
#irpfFlagLab::after, .co-vis-lbl::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: var(--tap-w, 44px);
  min-height: var(--tap-h, 44px);
}
/* Filas apretadas: solo se gana ALTO. A lo ancho van pegados y 44 px de area invadirian al vecino.
   `--tap-w: 0` deja el ancho en el 100% del propio control. */
.chart-tab, #pirateFlagMat, #irpfFlagMat, #pirateFlagLab, #irpfFlagLab { --tap-w: 0; }
/* Las casillas «PDF / App» del formulario de empresa: la casilla mide 14 px pero quien recibe el
   clic es su <label>, asi que el area se le da al label. 32 y no 44 porque justo encima hay otro
   campo y un area de 44 px le robaria pulsaciones al de arriba. Con 32 se pasa de 14 a 32: por
   encima del minimo AA sin invadir nada. */
.co-vis-lbl { --tap-w: 0; --tap-h: 32px; }
/* Las chinchetas del mapa pueden caer muy juntas: 32 en vez de 44 para no tapar la de al lado y
   dejarla intocable. De 14x14 a 32x32 es cinco veces mas area. */
.map-pin { --tap-w: 32px; --tap-h: 32px; }