/* ═════════════════════════════════════════════════════════════════════
   ios-refresh.css · Capa visual iOS 18 (aprobada en mockups)
   SOLO valores de tokens + pulido global. Cero cambios funcionales.
   Se carga al final: gana en cascada sin editar archivos existentes.

   Regla de la capa: aquí solo se REDEFINEN variables existentes y se
   añaden reglas de presentación. Nunca display/none sobre nodos con
   lógica, nunca selectores de IDs funcionales.
═════════════════════════════════════════════════════════════════════ */

/* ── 1 · Tipografía ──────────────────────────────────────────────────
   Inter → pila del sistema (en iPhone = SF Pro real).
   JetBrains Mono retirado de la UI: los sitios que usaban --font-mono
   heredan la sans; la alineación numérica se conserva con tabular-nums.
   Fraunces (serif de marca) se mantiene intacta. */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
               'Helvetica Neue', 'Inter', sans-serif;
  --font-form: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
               'Helvetica Neue', 'Manrope', sans-serif;
  --font-mono: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
               'Helvetica Neue', 'Inter', sans-serif;

  /* El tracking ancho era para mono; en sans se anula. */
  --tracking-mono:       0em;
  --tracking-mono-tight: 0em;
  --tracking-mono-wide:  0.02em;

  /* ── 2 · Radios (esquina continua, mockups) ── */
  --r-sm:  8px;
  --r:     12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 22px;

  /* ── 3 · Movimiento (resorte aprobado) ── */
  --ease-spring: cubic-bezier(0.32, 1.6, 0.5, 1);
}

/* Dígitos tabulares donde antes el mono alineaba columnas. */
body { font-variant-numeric: tabular-nums; }

/* ── 4 · Paleta CLARA (marfil + tinta azul-noche + oro profundo) ──── */
:root {
  --bg:          #F5F1E6;
  --surface:     #FDFBF4;
  --surf2:       #EFE9D9;
  --surf3:       #E3DBC6;
  --border:      rgba(60, 70, 95, 0.18);
  --border-soft: rgba(60, 70, 95, 0.11);
  --ink:         #1C2230;
  --muted:       #5D6070;

  --accent:      #1B2740;
  --accent-2:    #26355A;
  --accent-soft: rgba(27, 39, 64, 0.06);
  --accent-fg:   #1B2740;

  --gold:        #A8853C;
  --gold-soft:   #C9A557;
  --gold-deep:   #8E6F2F;
  --gold-bg:     rgba(168, 133, 60, 0.10);
  --gold-bg-2:   rgba(168, 133, 60, 0.16);

  --green:       #2E7D5B;
  --green-soft:  rgba(46, 125, 91, 0.10);
  --green-line:  rgba(46, 125, 91, 0.30);
  --red:         #B85C5C;
  --red-soft:    rgba(184, 92, 92, 0.09);
  --red-line:    rgba(184, 92, 92, 0.30);
  --blue:        #3A6BA8;
  --blue-soft:   rgba(58, 107, 168, 0.10);
  --blue-line:   rgba(58, 107, 168, 0.28);

  --shadow-1: 0 1px 2px rgba(60, 50, 25, 0.05);
  --shadow-2: 0 2px 6px rgba(60, 50, 25, 0.05), 0 8px 20px rgba(60, 50, 25, 0.07);
  --shadow-3: 0 2px 6px rgba(60, 50, 25, 0.06), 0 12px 28px rgba(60, 50, 25, 0.09);
  --shadow-4: 0 16px 40px rgba(60, 50, 25, 0.13);
  --shadow-navy: 0 6px 20px rgba(27, 39, 64, 0.14);
}

/* ── 5 · Paleta OSCURA (navy puerto + champagne + marfil) ─────────── */
html[data-theme="dark"] {
  --bg:          #0A0E15;
  --surface:     #131926;
  --surf2:       #1A2130;
  --surf3:       #232C3E;
  --border:      rgba(160, 165, 180, 0.20);
  --border-soft: rgba(160, 165, 180, 0.13);
  --ink:         #F4F1E8;
  --muted:       rgba(226, 224, 214, 0.58);

  --accent:      #1B2740;
  --accent-2:    #26355A;
  --accent-soft: rgba(90, 120, 170, 0.12);
  --accent-fg:   #8FB4E3;

  --gold:        #D9C08A;
  --gold-soft:   #E5D3A6;
  --gold-deep:   #C9AD6E;
  --gold-bg:     rgba(217, 192, 138, 0.10);
  --gold-bg-2:   rgba(217, 192, 138, 0.17);

  --green:       #8FD3B0;
  --green-soft:  rgba(143, 211, 176, 0.12);
  --green-line:  rgba(143, 211, 176, 0.32);
  --red:         #D98A8A;
  --red-soft:    rgba(217, 138, 138, 0.10);
  --red-line:    rgba(217, 138, 138, 0.32);
  --blue:        #8FB4E3;
  --blue-soft:   rgba(143, 180, 227, 0.12);
  --blue-line:   rgba(143, 180, 227, 0.30);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.24), 0 10px 26px rgba(0, 0, 0, 0.30);
  --shadow-3: 0 2px 6px rgba(0, 0, 0, 0.28), 0 12px 30px rgba(0, 0, 0, 0.34);
  --shadow-4: 0 18px 44px rgba(0, 0, 0, 0.44);
  --shadow-navy: 0 6px 20px rgba(0, 0, 0, 0.40);
}

/* ── 6 · Pulido global de presentación ────────────────────────────── */

/* Foco: barra dorada SOLO en campos de texto. Botones, tabs, filas y
   widgets clickables no muestran marca de foco (se veía "vibe-coded"). */
:where(input, textarea, select):focus-visible {
  outline: none;
  box-shadow: inset 3px 0 0 var(--gold);
}
:where(button, a, [role="button"], [tabindex]):focus-visible {
  outline: none;
}
/* Anula el outline global de audit-patch en todo lo no-input */
:focus-visible:not(input):not(textarea):not(select),
.navy-band :focus-visible,
.proj-tabs-wrap :focus-visible,
.sidebar :focus-visible,
.subtabs :focus-visible,
.filter-pill:focus-visible,
.proj-tab:focus-visible,
.subtab:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
/* (la barra dorada de foco en inputs la maneja la sección FORMULARIOS) */

/* Selección de texto en oro suave. */
::selection { background: var(--gold-bg-2); }

/* Scrollbars discretas (desktop). */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* ═════════════════════════════════════════════════════════════════════
   PASO 2 · Dashboard / Overview (mockup aprobado)
═════════════════════════════════════════════════════════════════════ */

/* ── Banda navy: brillo radial superior del mockup ── */
.proj-tabs-wrap {
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(90, 120, 180, 0.22), transparent 62%),
    var(--accent);
}

/* ── Selector de proyectos → geometría segmentada aprobada ──
   Misma estructura DOM; solo cambia la piel. El JS sigue usando
   .proj-tab / .active / .proj-tab--draggable sin enterarse. */
.proj-tabs {
  background: rgba(255, 255, 255, 0.10);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 2px;
  gap: 2px;
}
.proj-tab {
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 13px;
}
.proj-tab.active {
  background: #232C3E;
  color: var(--on-navy);
  border: 0.5px solid rgba(217, 192, 138, 0.35);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35),
              inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .proj-tab.active { background: #232C3E; }

/* ── Tarjetas: hairline + luz superior sutil ── */
.card,
.stat-card {
  border-width: 0.5px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 30%);
}
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .stat-card {
  background-image: none;
}

/* ── Valores de stats: serif un punto más protagonista ── */
.stat-value { font-weight: 600; }

/* ── Grid de stats 4-up: tira compacta de una fila en móvil ── */
@media (max-width: 539px) {
  .stat-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-2);
  }
  .stat-grid.cols-4 .stat-card { padding: var(--sp-3) var(--sp-2); text-align: center; }
  .stat-grid.cols-4 .stat-value { font-size: 21px; }
  .stat-grid.cols-4 .stat-label { font-size: 10px; }
}

/* ── FAB: monograma navy con anillo champagne (mockup) ── */
.fab {
  background: var(--accent);
  color: var(--gold);
  border: 1px solid rgba(217, 192, 138, 0.55);
  box-shadow: 0 0 0 3px rgba(217, 192, 138, 0.14),
              0 12px 28px rgba(0, 0, 0, 0.35);
}
.fab:active { transform: scale(0.9); }

/* ═════════════════════════════════════════════════════════════════════
   PASO 3 · Sidebar (mockup v3 aprobado)
   Iconos sueltos · cabeceras 17px semibold · aire generoso ·
   material blur · esquina redondeada derecha
═════════════════════════════════════════════════════════════════════ */

.sidebar {
  max-width: 320px;
  margin: 10px 0 10px 0;
  border: 0.5px solid var(--border-soft);
  border-left: 0;
  border-radius: 0 28px 28px 0;
  background: rgba(12, 16, 25, 0.42);
  -webkit-backdrop-filter: saturate(200%) blur(20px);
  backdrop-filter: saturate(200%) blur(20px);
  box-shadow: 24px 0 60px rgba(0, 0, 0, 0.35);
  transition: transform var(--t-slow) var(--ease-spring);
}
html:not([data-theme="dark"]) .sidebar {
  background: rgba(245, 241, 230, 0.48);
}
@supports not (-webkit-backdrop-filter: blur(1px)) {
  .sidebar { background: var(--surface); }
}
.sidebar-overlay {
  background: rgba(4, 6, 10, 0.35);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Marca */
.sidebar-title { font-size: 24px; font-weight: 600; }
.sidebar-title em { color: var(--gold); font-weight: 500; }
.sidebar-tag { font-size: 13px; margin-top: 4px; }
.sidebar-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surf2);
  color: var(--muted);
  font-size: 16px;
}
@media (hover: none) { .sidebar-close { width: 38px; height: 38px; font-size: 18px; } }

/* Cabeceras de grupo: 17px semibold, tinta, aire 26px */
.sb-group {
  padding: 26px var(--sp-5) 6px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sidebar-list > .sb-group:first-child { padding-top: 14px; }
.sb-group-chevron { opacity: 0.45; }

/* Ítems: 16px, iconos sueltos dorados, separador con sangría */
.sb-item {
  min-height: 48px;
  padding: 12px var(--sp-5);
  font-size: 16px;
  gap: 16px;
}
.sb-item-icon { color: var(--gold); width: 22px; height: 22px; }
@media (hover: hover) {
  .sb-item:hover .sb-item-icon { color: var(--gold-deep); }
}
.sb-item.active::before { top: 8px; bottom: 8px; width: 2.5px; }

.sb-badge {
  background: var(--gold-bg-2);
  color: var(--gold-deep);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 11px;
}
html[data-theme="dark"] .sb-badge { color: var(--gold); }

/* Segmentado de tema: geometría aprobada */
.sb-theme-segmented {
  border-radius: 9px;
  border: 0.5px solid var(--border-soft);
  background: var(--surf2);
}
.sb-theme-opt { font-size: 11.5px; padding: 6px 10px; border-radius: 7px; }
.sb-theme-opt.is-active {
  background: var(--accent);
  color: rgba(255, 255, 255, 0.94);
  border: 0.5px solid rgba(217, 192, 138, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Pie */
.sidebar-signout {
  border-radius: 18px;
  border-width: 0.5px;
  padding: 9px 16px;
}

/* ═════════════════════════════════════════════════════════════════════
   PASO 4 · Pantalla de proyecto (mockup aprobado)
═════════════════════════════════════════════════════════════════════ */

/* ── Subtabs (Overview/Expenses/Reimb/…) → chips desplazables ──
   Mismo DOM (.subtabs/.subtab/.active); solo piel. flex:1 se anula
   para que cada chip mida su contenido y la fila desplace. */
.subtabs {
  border-bottom: 0;
  gap: 8px;
  padding: 2px 2px 6px;
}
.subtab {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  border: 0.5px solid var(--border-soft);
  border-radius: 19px;
  padding: 9px 15px;
  overflow: visible;
  transition: transform var(--t-base) var(--ease-spring),
              background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast);
}
.subtab:active { transform: scale(0.94); }
.subtab.active {
  font-style: normal;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
  background: var(--accent);
  border-color: var(--accent);
}
html[data-theme="dark"] .subtab.active {
  background: #232C3E;
  border-color: rgba(217, 192, 138, 0.40);
  color: var(--ink);
}
.subtab.active::after { content: none; }
.subtab-count {
  background: var(--gold-bg-2);
  color: var(--gold-deep);
  border-radius: 9px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
}
.subtab.active .subtab-count {
  background: rgba(217, 192, 138, 0.25);
  color: #E8D6A8;
}
html[data-theme="dark"] .subtab-count { color: var(--gold); }

/* ── Pills de estado: sentence case, 11px, sin caps gritones ── */
.status-pill {
  font-size: 11px;
  letter-spacing: 0.01em;
  height: 20px;
  padding: 2px 9px;
  border-radius: 10px;
  text-transform: none;
}

/* ── FAB nunca tapa la última fila: aire extra al final del main ── */
body.has-fab main,
body.has-fab .panel {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* ═════════════════════════════════════════════════════════════════════
   PASO 5 · Leads · Citas · Empleados (mockups aprobados)
═════════════════════════════════════════════════════════════════════ */

/* ── Filter pills: sentence-case sans, chip activo navy ── */
.filter-pill {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 15px;
  border-width: 0.5px;
  border-color: var(--border-soft);
  transition: transform var(--t-base) var(--ease-spring),
              background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast);
}
.filter-pill:active { transform: scale(0.94); }
.filter-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: rgba(255, 255, 255, 0.94);
  font-weight: 600;
}
html[data-theme="dark"] .filter-pill.active {
  background: #232C3E;
  border-color: rgba(217, 192, 138, 0.40);
  color: var(--ink);
}
.filter-pill .count {
  background: var(--gold-bg-2);
  color: var(--gold-deep);
  border-radius: 9px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
}
html[data-theme="dark"] .filter-pill .count { color: var(--gold); }
.filter-pill.active .count {
  background: rgba(217, 192, 138, 0.25);
  color: #E8D6A8;
}

/* ── Leads: riel vertical → banda superior fina; card limpia ──
   El riel (.lead-rail) conserva su nodo y texto (el JS lo usa como
   etiqueta de estado); pasa de columna rotada a cinta horizontal. */
.panel-leads .lead-row {
  border-width: 0.5px;
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.panel-leads .lead-row-v4 { grid-template-columns: 1fr; }
.panel-leads .lead-rail {
  writing-mode: horizontal-tb;
  width: 100%;
  padding: 5px 16px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  border-radius: 0;
}
.lead-v4-name { font-size: 18px; }
.lead-v4-meta-lbl {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--muted);
}
.lead-v4-meta-val { font-size: 14px; }
.lead-v4-actions .btn-sm,
.lead-v4-actions .btn {
  border-radius: 14px;
  border-width: 0.5px;
  font-size: 13px;
}
.lead-cost-chip {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  border: 0.5px solid var(--gold-bg-2);
  color: var(--gold-deep);
  border-radius: 10px;
  padding: 3px 8px;
}
html[data-theme="dark"] .lead-cost-chip { color: var(--gold); }
.source-pill {
  font-size: 10px;
  letter-spacing: 0.05em;
  border-radius: 10px;
  border-width: 0.5px;
}

/* ── Citas: grid 4-up ya compactado en Paso 2 (stat-grid.cols-4) ── */
.appt-address, .appt-project { font-size: 13px; }

/* ── Empleados ── */
/* Meta con PIN: el PIN es sensible — se atenúa en la lista y se revela
   al expandir la card (el nodo sigue presente; solo presentación). */
.emp-head-v2-meta { font-family: var(--font-sans); font-size: 13px; }
.emp-card-v2:not(.li-card--expanded):not(.is-expanded) .mh-lbl,
.emp-card-v2:not(.li-card--expanded):not(.is-expanded) .mh-lbl + * {
  filter: blur(4px);
  opacity: 0.55;
}
.emp-dual-value, .emp-dual-money { font-family: var(--font-serif); font-weight: 600; }
.emp-dual-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.12em;
}
/* Acción destructiva: menos protagonismo aún (visible, discreta) */
.emp-action-clear-link {
  font-size: 12.5px;
  opacity: 0.75;
}
.emp-action-btn-primary { border-radius: 15px; }
.emp-archive-toggle-dashed { border-radius: var(--r-lg); }

/* ═════════════════════════════════════════════════════════════════════
   PASO 6 · Formularios y modales (mockup Nueva cotización aprobado)
═════════════════════════════════════════════════════════════════════ */

/* ── Hoja: grabber + entrada con resorte ── */
.modal {
  border-width: 0.5px;
  border-radius: 24px 24px 0 0;
  transition: transform var(--t-slow) var(--ease-spring);
}
.modal::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: var(--border);
  pointer-events: none;
}

/* ── Cabecera compacta estilo hoja nativa ── */
.modal-header { padding: var(--sp-5) var(--sp-5) var(--sp-3); border-bottom-width: 0.5px; }
.modal-title { font-size: 18px; font-weight: 600; }
.modal-close {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--surf2);
  color: var(--muted);
  font-size: 16px;
}
.modal-close:hover { background: var(--red-soft); }

/* ── Campos: quieto + foco de barra dorada (sin marco doble) ── */
.fld-input {
  border: 0.5px solid var(--border-soft);
  border-radius: var(--r);
  background: var(--surf2);
}
.fld-input:focus {
  border-color: var(--border-soft);
  box-shadow: inset 3px 0 0 var(--gold);
  background: var(--surface);
}
.fld-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* ── Pie: material blur, CTA champagne ── */
.modal-footer {
  border-top-width: 0.5px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  backdrop-filter: saturate(160%) blur(22px);
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .modal-footer { background: var(--surf2); }
}
.btn-primary {
  border-radius: 15px;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  border: 0;
  color: #1B2740;
  font-weight: 600;
  transition: transform var(--t-fast) var(--ease-spring), opacity var(--t-fast);
}
.btn-primary:active { transform: scale(0.97); }
html[data-theme="dark"] .btn-primary { color: #10151F; }

/* ── Line items (partidas): sin card blanca fuera de tema ── */
.li-card {
  background: var(--surface);
  border: 0.5px solid var(--border-soft);
  border-radius: var(--r-lg);
}
.li-total { font-family: var(--font-serif); color: var(--gold-deep); font-weight: 600; }
html[data-theme="dark"] .li-total { color: var(--gold); }


/* ═════════════════════════════════════════════════════════════════════
   PASO 7 · Barrido final — estados vacíos, toasts, diálogos, restos
═════════════════════════════════════════════════════════════════════ */

/* ── Estados vacíos: neutros, compactos, con CTA champagne ── */
.empty-rich { padding: var(--sp-6) var(--sp-5); }
.empty-rich-icon {
  background: var(--gold-bg);
  color: var(--gold-deep);
  border-radius: 14px;
}
html[data-theme="dark"] .empty-rich-icon { color: var(--gold); }
.empty-rich-title { font-family: var(--font-serif); font-weight: 600; }
.empty-rich-body { color: var(--muted); font-size: 14px; }

/* ── Toast: cápsula con material del tema (el claro traía marfil fijo) ── */
.toast {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 0.5px solid var(--border-soft);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .toast { background: var(--surface); }
}

/* ── Diálogos de confirmación: misma familia que modales ── */
.dialog {
  border: 0.5px solid var(--border-soft);
  border-radius: 20px;
}
.dialog-btn--primary { border-radius: 13px; }

/* ── Conectividad ── */
.conn-badge { border-radius: 11px; border-width: 0.5px; font-size: 11px; }

/* ── Restos de mono en cabeceras/etiquetas heredan sans ──
   (--font-mono ya apunta a la pila sans; esto normaliza tracking
   residual definido inline en audit-patch) ── */
.mh-lbl, .lead-v4-meta-lbl, .stat-sub {
  letter-spacing: 0.02em;
}

/* ── Botones outline: hairline + resorte en toda la app ── */
.btn, .btn-sm {
  border-radius: 14px;
  transition: transform var(--t-fast) var(--ease-spring),
              background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), opacity var(--t-fast);
}
.btn:active, .btn-sm:active { transform: scale(0.96); }
.btn-outline, .btn-outline-gold, .btn-outline-green, .btn-secondary {
  border-width: 0.5px;
}

/* ── Scroll-margin para inputs enfocados bajo pies con blur ── */
.modal-body :is(input, textarea, select) { scroll-margin-bottom: 96px; }

/* ═════════════════════════════════════════════════════════════════════
   PASO 8 · Widgets del Overview — estilo propio hardcodeado que la capa
   de tokens no alcanzaba (fin-sky, today-summary, team, mi-, attn)
═════════════════════════════════════════════════════════════════════ */

/* ── Cash position ── */
.fin-sky-title {
  font-style: normal;
  font-size: 20px;
  font-weight: 600;
}
.fin-sky-title em { font-style: italic; font-weight: 500; }

/* Chip "Today": sans, sentence case, cápsula hairline */
.fin-sky-tag {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 5px 11px;
  border-radius: 14px;
  border-width: 0.5px;
}

/* Labels: caps refinadas 11px sans (mockup elegante) */
.fin-sky-hero-lbl,
.fin-sky-cell-lbl {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
}
.fin-sky-hero-lbl { margin-bottom: 6px; }
.fin-sky-hero-val { letter-spacing: -0.01em; }
.fin-sky-secondary { border-top-width: 0.5px; }
.fin-sky-cell + .fin-sky-cell { border-left-width: 0.5px; }
.fin-sky-cell-sub { font-size: 12px; }

/* ── Today's summary: serif en cifras, labor neutro (rojo era error
      semántico aprobado en auditoría), labels sans discretas ── */
.today-summary-value {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.today-summary-value.cost { color: var(--ink); }
.today-summary-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.12em;
}

/* ── Money-in / Team / Attention / listas compactas ── */
.mi-eyebrow, .attn-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mi-amount { font-family: var(--font-serif); font-weight: 600; }
.team-card-head { font-family: var(--font-sans); }
.team-hours, .team-pay { font-family: var(--font-serif); font-weight: 600; }
.appt-compact-when { font-family: var(--font-sans); font-size: 13px; }
.bar-chart-value, .bar-chart-total { font-family: var(--font-serif); }
.cf-bar-amount { font-family: var(--font-serif); }

/* Widget headers genéricos del overview */
.overview-widget h3, .overview-widget h4 { font-weight: 600; }

/* ═════════════════════════════════════════════════════════════════════
   PASO 9 · Barra de proyectos — geometría segmentada de verdad.
   Lo que la mantenía como cápsula vieja:
   · min-height:44px de audit-patch §2 inflaba cada tab
   · el fade derecho ::after con radio 999 reconstruía la píldora
   · los tabs miden su contenido en vez de repartirse el ancho
═════════════════════════════════════════════════════════════════════ */

.proj-tabs-wrap { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.proj-tabs-wrap::after { display: none; }   /* decorativo, sin JS */

.proj-tabs {
  display: flex;
  border-radius: 11px;
}
.proj-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 38px;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (hover: hover) and (pointer: fine) {
  .proj-tab { min-height: 38px; padding: 8px 10px; }
}
.proj-tab.active {
  border-radius: 9px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.40),
              inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
}
.proj-tab--new {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 9px;
}
/* Muchos proyectos: la pista sigue desplazando; cada tab conserva un
   mínimo legible en vez de aplastarse. */
.proj-tab { min-inline-size: 96px; }
.proj-tab--new { min-inline-size: 0; }

/* ── Paso 10 · Segmentado fijo de 3 + selector ── */
.proj-tabs { overflow: visible; }
.proj-tab { min-inline-size: 0; }
.proj-tab--picker { color: var(--on-navy-dim); }
.proj-tab-chevron { font-size: 9px; opacity: 0.7; margin-left: 2px; }
.proj-picker {
  min-width: 240px;
  max-height: 60vh;
  overflow-y: auto;
  border: 0.5px solid var(--border-soft);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
  backdrop-filter: saturate(160%) blur(24px);
  box-shadow: var(--shadow-4);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .proj-picker { background: var(--surface); }
}
.proj-picker .overflow-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
}
.proj-picker-name { flex: 1; text-align: left; }
.proj-picker-check { color: var(--gold); font-weight: 600; }
.proj-picker-item--active { background: var(--gold-bg); }

/* ═════════════════════════════════════════════════════════════════════
   PASO 11 · Continuidad del band navy
   a) Altura constante Overview ↔ Proyecto (la barra no salta)
   b) Iconos de subtabs: fila icono+label, no bloque vertical
   c) Un solo fondo para band + tira de tabs (sin costura de color)
═════════════════════════════════════════════════════════════════════ */

/* c · Fondo unificado: el glow vive SOLO en .navy-band; la tira de
   tabs pasa a fondo plano idéntico al final del gradiente del band.
   ios66 statusbar-fix: el glow pasa de unidades % (dependientes de la
   altura de cada band) a geometría fija anclada al viewport
   (130vw × 300px, centro a -90px). Así el body::before (la franja que
   pinta el safe-area del status bar, ver base.css) puede replicar
   EXACTAMENTE los mismos píxeles y la costura en
   env(safe-area-inset-top) desaparece: status bar + hero = una pieza. */
.navy-band {
  background:
    radial-gradient(130vw 300px at 50% -90px, rgba(90, 120, 180, 0.20), transparent 70%),
    var(--accent);
}
/* Mismo glow, mismas coordenadas de viewport, sobre la franja del
   status bar. Con scroll, la franja mantiene el tono del tramo superior
   del hero (lo que siempre hizo, ahora sin salto de color). */
body::before {
  background:
    radial-gradient(130vw 300px at 50vw -90px, rgba(90, 120, 180, 0.20), transparent 70%),
    var(--accent);
  /* ios66 statusbar-fix v2: la tira baja de z-index 90 → 0. Antes se
     pintaba ENCIMA del band y cualquier diferencia de fondo producía la
     costura en env(safe-area-inset-top). Ahora el band (position:
     relative, posterior en el DOM) la cubre: en reposo el status bar lo
     pinta EL PROPIO band — continuidad garantizada por construcción.
     La tira queda solo como respaldo bajo scroll/overscroll; desde
     y>40px la cubre #stickyTitleBar (z:60). */
  z-index: 0;
}
.proj-tabs-wrap { background: var(--accent); }
html[data-theme="dark"] .navy-band,
html[data-theme="dark"] .proj-tabs-wrap {
  background: var(--bg);
}

/* a · Altura mínima del contenido del band. El header de Overview
   (eyebrow+título+pill) y el de proyecto (eyebrow+título+2 metas)
   quedan sobre la misma base; la dirección/teléfono caben dentro. */
.navy-band { display: flex; flex-direction: column; }


/* b · Subtabs con icono: chip horizontal, icono 16px a la izquierda */
.subtab {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
}
.subtab .icon,
.subtab svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.subtab.active { color: rgba(255, 255, 255, 0.94); }
.subtab.active .icon, .subtab.active svg { color: currentColor; }
html[data-theme="dark"] .subtab.active { color: var(--ink); }

/* Los subtabs reales usan la variante --v2 (columna icono/label, mayor
   especificidad). Se re-declara el chip a ese nivel. */
.subtabs.subtabs--v2 { border-bottom: 0; gap: 8px; padding: 2px 2px 6px; }
.subtab.subtab--v2 {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  padding: 9px 15px;
  border: 0.5px solid var(--border-soft);
  border-bottom-width: 0.5px;
  border-radius: 19px;
  margin-bottom: 0;
  color: var(--muted);
}
.subtab.subtab--v2 .subtab-label { font-size: 14px; }
.subtab.subtab--v2.active {
  background: var(--accent);
  border-color: var(--accent);
  color: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--accent);
}
html[data-theme="dark"] .subtab.subtab--v2.active {
  background: #232C3E;
  border-color: rgba(217, 192, 138, 0.40);
  color: var(--ink);
}
.subtab.subtab--v2.active svg { opacity: 1; }

/* ── Paso 12/15 · Heros iguales POR ARRIBA, no encogiendo ──
   Ambos títulos suben al clamp grande del proyecto colapsado. */
.brand-title,
.proj-name-large,
.proj-name-large--collapsed {
  font-size: clamp(40px, 9.6vw, 52px);
  line-height: 1.02;
}
.proj-collapsed-info-line { font-size: 14.5px; line-height: 1.35; }
.proj-collapsed-info-text { min-width: 0; }
/* Con títulos parejos, ambos contenidos quedan bajo el min-height del
   band (Paso 11) y la barra de proyectos no se mueve un píxel. */

/* ── Paso 13 · Hero de una línea, altura EXACTA compartida ── */

/* Antes: min-height (el contenido del proyecto lo superaba).
   Ahora: altura fija idéntica en ambos modos; el contenido cabe
   porque se compacta abajo. */
.navy-band {
  min-height: 300px;
  overflow: visible;
  justify-content: flex-end;
  padding-top: calc(var(--sp-3) + env(safe-area-inset-top, 0px));
  padding-bottom: var(--sp-6);
}
@media (max-width: 380px) { .navy-band { min-height: 284px; } }


/* Pill de estado bajo el título, compacta (sin solaparse jamás). */
.navy-band .brand-actions { margin-top: 6px; }
.navy-band .brand-title { margin-bottom: 6px; }

/* Proyecto (mockup): dirección arriba, teléfono abajo, iconos tenues,
   aire generoso bajo el teléfono. */
.proj-collapsed-info { margin-top: 4px; }
.proj-collapsed-info-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.proj-collapsed-info-line { min-width: 0; width: 100%; font-size: 16px; }
.proj-collapsed-info-line .icon,
.proj-collapsed-info-line svg { opacity: 0.5; }
.proj-collapsed-info-addr { color: var(--on-navy-dim); }
.proj-collapsed-info-phone { color: var(--on-navy); font-weight: 500; }
.proj-collapsed-info-line-text { white-space: normal; overflow: visible; text-overflow: clip; }
/* Aire aumentado bajo el teléfono, antes de los tabs. */
.navy-band { padding-bottom: var(--sp-6); }

/* El topbar (hamburguesa/engrane) no participa del cálculo de altura
   del bloque inferior: se ancla arriba. */
.navy-band .app-topbar:not(.app-topbar-v2) {
  position: absolute;
  top: calc(var(--sp-3) + env(safe-area-inset-top, 0px));
  left: var(--sp-5);
  right: var(--sp-5);
  margin: 0;
}
/* Header global (back + título): en flujo, centrado y compacto */
.navy-band .app-topbar-v2 { position: static; margin: 0; }

/* ── Paso 16 · Pills de proyectos = mockup EXACTO ──
   Métricas calcadas de ios18-widget-inferior.html:
   pista rgba(140,150,170,.14) · borde .5px rgba(160,165,180,.16)
   radio 11px · padding 2px · tab 9px/4px 13px · dot 6px/gap 6
   activo #232C3E radio 9px borde champagne .35 + sombra interior */
.proj-tabs {
  background: rgba(140, 150, 170, 0.14);
  border: 0.5px solid rgba(160, 165, 180, 0.16);
  border-radius: 10px;
  padding: 2px;
  gap: 0;
}
.proj-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  padding: 6px 4px;
  font-size: 12px;
  font-weight: 500;
  gap: 5px;
  border-radius: 8px;
  color: var(--on-navy);
  opacity: 0.6;
  text-align: center;
}
/* --picker se reparte igual que los demás segmentos */
.proj-tab--picker { flex: 1 1 0; }
@media (hover: hover) and (pointer: fine) {
  .proj-tab { min-height: 0; padding: 9px 4px; }
}
.proj-tab.active {
  opacity: 1;
  font-weight: 600;
  background: #232C3E;
  border: 0.5px solid rgba(217, 192, 138, 0.35);
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.40),
              inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
}
.proj-tab--picker { opacity: 0.6; }
.proj-tab--picker.active { opacity: 1; }
.proj-tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 1;
}
.proj-tab--new .proj-tab-dot { width: auto; height: auto; }

/* ── Panels globales (Estimates/Invoices/Clients/etc): banda compacta,
   contenido centrado horizontalmente. Aplica a todo panel con back-row. ── */
.navy-band:has(.panel-back-row) {
  min-height: 0;
  justify-content: flex-start;
  padding-bottom: var(--sp-5);
}
.navy-band:has(.panel-back-row) .panel-title {
  text-align: center;
  width: 100%;
}
.navy-band:has(.panel-back-row) .panel-eyebrow { text-align: center; }

/* ── Header de proyecto EXPANDIDO ──
   a) el contenido arranca bajo el topbar absoluto (sin solaparse)
   b) labels (OWNER/ADDRESS/APPROVED BUDGET…) refinadas 11px
   c) grid de presupuesto con aire consistente */
.navy-band:has(.proj-info-cards) {
  justify-content: flex-start;
  padding-top: calc(var(--sp-3) + env(safe-area-inset-top, 0px) + 52px);
}
.info-card-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-navy-dim);
}
.info-card-value { font-size: 16px; }
.budget-grid { row-gap: var(--sp-5); column-gap: var(--sp-5); }
.budget-grid .info-card-value { font-family: var(--font-serif); font-weight: 600; }
.proj-start { font-size: 14px; color: var(--on-navy-dim); }
.budget-bar { height: 4px; border-radius: 2px; }

/* ═════════════════════════════════════════════════════════════════════
   FORMULARIOS · estilo apilado unificado. Base = .form (todos los forms
   lo usan). Celdas hundidas, label caption arriba, valor grande abajo.
   Dark + light. Sin bezel de foco ni autofill amarillo del sistema.
═════════════════════════════════════════════════════════════════════ */

/* Celda apilada: solo field-groups con input/select/textarea directo */
.form .field-group:has(> input.fld-input),
.form .field-group:has(> select.fld-input),
.form .field-group:has(> textarea.fld-textarea) {
  display: block;
  border-radius: 12px;
  padding: 9px 14px 11px;
  margin-bottom: 8px;
  background: #0F141D;
  border: 0.5px solid rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
html:not([data-theme="dark"]) .form .field-group:has(> input.fld-input),
html:not([data-theme="dark"]) .form .field-group:has(> select.fld-input),
html:not([data-theme="dark"]) .form .field-group:has(> textarea.fld-textarea) {
  background: #EAE3D2;
  border: 0.5px solid rgba(60, 70, 95, 0.14);
  box-shadow: inset 0 1px 3px rgba(60, 50, 25, 0.10);
}

/* Label = caption arriba */
.form .field-group:has(> .fld-input) > .fld-label,
.form .field-group:has(> .fld-textarea) > .fld-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted);
  margin: 0 0 1px;
}

/* Valor = grande abajo, sin caja propia */
.form .field-group > .fld-input,
.form .field-group > .fld-textarea {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  min-height: 0;
  font-size: 16px;
  color: var(--ink);
}
.form .field-group > .fld-textarea { min-height: 56px; padding-top: 2px; line-height: 1.4; }
.form .field-group > .fld-input::placeholder,
.form .field-group > .fld-textarea::placeholder { color: var(--label-3, rgba(226,224,214,.3)); }

/* Foco: sin bezel del sistema; celda resaltada. Cubre todo input de form */
.form .field-group input:focus-visible,
.form .field-group select:focus-visible,
.form .field-group textarea:focus-visible,
.form .field-group .fld-input:focus-visible,
html[data-theme="dark"] .form .field-group input:focus-visible,
html[data-theme="dark"] .form .field-group .fld-input:focus-visible {
  outline: none !important;
  box-shadow: none;
}
.form .field-group input:focus,
.form .field-group select:focus,
.form .field-group textarea:focus,
.form .field-group .fld-input:focus { border-color: transparent; box-shadow: none; }
.form .field-group:focus-within {
  border-color: rgba(217, 192, 138, 0.55);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.4), 0 0 0 1px rgba(217,192,138,.25);
}
html:not([data-theme="dark"]) .form .field-group:focus-within {
  border-color: rgba(168, 133, 60, 0.55);
  box-shadow: inset 0 1px 3px rgba(60,50,25,.10), 0 0 0 1px rgba(168,133,60,.25);
}

/* Autofill Safari + botón de contacto/credencial: eliminado */
.form .field-group input:-webkit-autofill,
.form .field-group input:-webkit-autofill:focus,
.form .field-group .fld-input:-webkit-autofill,
.form .field-group .fld-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0F141D inset;
  -webkit-text-fill-color: var(--ink);
  transition: background-color 9999s ease-out;
}
html:not([data-theme="dark"]) .form .field-group input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #EAE3D2 inset;
}
.form input::-webkit-contacts-auto-fill-button,
.form input::-webkit-credentials-auto-fill-button,
.form input::-webkit-caps-lock-indicator {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
}

/* two-col: cada celda apilada, sin comprimir */
.form .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form .two-col .field-group { margin-bottom: 0; }

/* hint bajo la celda */
.form .fld-hint { font-size: 12px; color: var(--muted); padding: 6px 2px 2px; }

/* select del cliente: sin borde dorado */
.form .fld-select.fld-pill { border: 0; }

/* Compuestos (Line items, Status): bloque, label como título de sección */
.form .field-group:not(:has(> .fld-input)):not(:has(> .fld-textarea)) { display: block; }
.form .field-group:not(:has(> .fld-input)):not(:has(> .fld-textarea)) > .fld-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin: 6px 2px 8px;
}

/* Card de partidas: respeta tema (no blanca fuera de tema) */
.form .li-card:hover { background: var(--surface); }
.form .li-card.li-card--expanded { background: var(--surface); border-color: var(--gold); border-width: 0.5px; }

/* ═════════════════════════════════════════════════════════════════════
   HEADER DE PANELS (v2) · un solo tono navy
   .app-topbar-v2 vive fuera de .navy-band y pintaba su propio --accent
   con margen inferior → caja navy más clara flotando. Se funde: sin
   margen, mismo navy, ocupa hasta el borde como el band de Overview.
═════════════════════════════════════════════════════════════════════ */
/* ios66 statusbar-fix: se elimina la regla muerta que empezaba con una
   comilla huérfana (selector inválido → el parser la descartaba). El V2
   vive DENTRO de #topNavyBand (shell.js) y el band ya aporta el padding
   de safe-area (d62a24: el V2 usa padding 0); re-activarla habría
   duplicado el safe-area-inset-top. */
html[data-theme="dark"] .app-topbar.app-topbar-v1,
html[data-theme="dark"] .app-topbar.app-topbar-v2,
html[data-theme="dark"] .app-topbar { background: var(--bg) !important; }
html[data-theme="dark"] body.in-panel #topNavyBand,
html[data-theme="dark"] body.in-panel .app-topbar,
html[data-theme="dark"] body.in-panel .navy-band {
  background: var(--bg) !important;
}
.app-topbar.app-topbar-v2 .panel-back-row { margin-bottom: 14px; }
.app-topbar.app-topbar-v2 .panel-title { text-align: center; }
.app-topbar.app-topbar-v2 .panel-eyebrow { text-align: center; }

/* ═════════════════════════════════════════════════════════════════════
   BARRA STICKY DE TÍTULO (aparece al hacer scroll)
═════════════════════════════════════════════════════════════════════ */
#stickyTitleBar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 10px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  -webkit-backdrop-filter: saturate(200%) blur(20px);
  backdrop-filter: saturate(200%) blur(20px);
  border-bottom: 0.5px solid rgba(160, 165, 180, 0.16);
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity .25s, transform .35s cubic-bezier(.32,1.6,.5,1);
  pointer-events: none;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  #stickyTitleBar { background: var(--accent); }
}
html[data-theme="dark"] #stickyTitleBar { background: color-mix(in srgb, var(--bg) 55%, transparent); }
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  html[data-theme="dark"] #stickyTitleBar { background: var(--bg); }
}
#stickyTitleBar.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#stickyTitleText {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  color: #F4F1E8;
  letter-spacing: .01em;
}
#stickyTitleText em { font-style: italic; font-weight: 500; color: var(--gold, #D9C08A); }
#stickyAddBtn {
  position: absolute;
  right: 14px;
  bottom: 8px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0.5px solid rgba(217, 192, 138, 0.45);
  background: rgba(217, 192, 138, 0.14);
  color: #D9C08A;
  font-size: 19px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s cubic-bezier(.32,1.6,.5,1);
}
#stickyAddBtn:active { transform: scale(.88); }

/* Overview: botones de acción (widgets + tema) apilados a la derecha */
.ov-action-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* Safe-area superior (standalone/PWA): en dark debe seguir el fondo
   oscuro, no el navy de marca — evita la franja de otro color arriba. */
html[data-theme="dark"] { background: var(--bg); }
html[data-theme="dark"] body::before { background: var(--bg); }


/* ── Continuidad de la barra de estado (standalone) ──
   El canvas llena el viewport; la franja superior hereda el color del
   hero visible: light navy / dark fondo. */
html, body { min-height: 100%; }
html { height: -webkit-fill-available; }
body { min-height: -webkit-fill-available; }
body::before {
  height: max(env(safe-area-inset-top, 0px), 0px);
}

/* ios66 statusbar-fix: en navegadores con unidades dinámicas (iOS 15.4+)
   se prefiere 100dvh: sigue el viewport real cuando la barra de Safari
   se colapsa/expande, sin los saltos de 100vh ni el hack
   -webkit-fill-available. Solo alturas mínimas — no toca layout. */
@supports (min-height: 100dvh) {
  html { height: auto; }
  html, body { min-height: 100dvh; }
  .app-shell { min-height: 100dvh; }
}