/* =====================================================================
   AT HOME · SKIN "MERIDIAN"  — rediseño visual integral · CLARO CORPORATIVO
   Blanco + aire + acento azul profundo (estética SaaS premium: Stripe / Mercury / Linear-light).
   Sistema visual nuevo y unificado: tipografía Inter, jerarquías claras, componentes refinados.
   - Se activa con html.theme-pro (interruptor Pro/Clásico en Personalización · default).
   - INTOCABLES: Emporio (#public-screen/.mk-*), Belmont (.pub-*), login (#login-screen),
     impresiones (.pr-*), Personalización (skin-picker).
   - "Clásico" = no tener la clase html.theme-pro (diseño anterior 100% intacto).
   SOLO cambia lo visual. Ninguna función/ruta/handler se toca.
   ===================================================================== */

/* ============ 1 · TOKENS MERIDIAN (claro corporativo) ============ */
html.theme-pro #app-shell .main-col{
  /* superficies */
  --bg-0:#F4F6FA; --bg-1:#ECEFF5; --bg-2:#FFFFFF; --panel:#FFFFFF; --panel-2:#EEF2F8; --panel-3:#EDF0F6; --elev:#FFFFFF;
  /* líneas */
  --line:#D9DFE9; --line-2:#C7D0DD; --line-3:#AEB9CA;
  /* texto */
  --text:#0E1726; --text-2:#3A4557; --muted:#687486; --faint:#9AA3B3;
  /* acento AZUL OSCURO / navy (marca) */
  --acc:#172554; --acc-hi:#111C44; --acc-dim:#0C1330; --acc-ink:#FFFFFF; --acc-soft:rgba(23,37,84,.08); --acc-line:rgba(23,37,84,.26);
  --acc-glow:0 0 0 3px rgba(23,37,84,.14);
  /* estados (oscurecidos para contraste AA sobre blanco) */
  --ok:#15803D; --ok-soft:rgba(21,128,61,.10);
  --warn:#B45309; --warn-soft:rgba(180,83,9,.11);
  --bad:#B91C1C; --bad-soft:rgba(185,28,28,.09);
  --info:#172554; --info-soft:rgba(23,37,84,.09);
  --vio:#6D28D9; --vio-soft:rgba(109,40,217,.09);
  /* radios / sombras (en claro la elevación es por sombra suave) */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:16px; --r-pill:999px;
  --sh-1:0 1px 3px rgba(15,26,46,.09), 0 1px 2px rgba(15,26,46,.05);
  --sh-2:0 6px 20px -6px rgba(15,26,46,.15);
  --sh-pop:0 24px 54px -16px rgba(15,26,46,.24);
  --ring:0 0 0 3px rgba(23,37,84,.16);
  /* tipografía — Inter en todo, jerarquías por peso/tamaño */
  --disp:'Inter',system-ui,-apple-system,sans-serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'Inter',system-ui,sans-serif;

  /* === REMAPEO de tokens globales → todos los componentes adoptan MERIDIAN === */
  --card:var(--panel); --border:var(--line); --surface-2:var(--panel-2); --soft-fill:var(--panel-2); --radius:var(--r-md);
  --navy:var(--text); --navy-2:var(--text-2); --navy-3:var(--muted);
  --green:var(--ok); --green-soft:var(--ok-soft);
  --amber:var(--warn); --amber-soft:var(--warn-soft);
  --red:var(--bad); --red-soft:var(--bad-soft);
  --blue:var(--info); --blue-soft:var(--info-soft);
  --violet:var(--vio); --violet-soft:var(--vio-soft);
  --gold:var(--acc); --gold-soft:var(--acc-soft);
  --chart-ink:var(--muted); --chart-grid:var(--line);
  --shadow:var(--sh-1); --shadow-lg:var(--sh-pop); --glass:rgba(255,255,255,.9);
  --topbar-bg:var(--bg-2);
  --qa-grp-rgb:255,255,255; --qa-tl-rgb:255,255,255;

  background:var(--bg-1); color:var(--text); font-family:var(--sans);
  font-size:14px; letter-spacing:-.003em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ============ 2 · BASE / LAYOUT ============ */
html.theme-pro #app-shell .main-col #view{ background:var(--bg-1); padding:26px clamp(18px,2.6vw,38px) 96px; max-width:1360px; margin:0 auto; }
@media(max-width:640px){ html.theme-pro #app-shell .main-col #view{ padding:16px 14px 92px; } }
html.theme-pro #app-shell .main-col{ scrollbar-width:thin; scrollbar-color:#AEB9CA transparent; }
html.theme-pro #app-shell .main-col ::-webkit-scrollbar{ width:12px; height:12px; }
html.theme-pro #app-shell .main-col ::-webkit-scrollbar-thumb{ background:#D3DAE6; border-radius:8px; border:3px solid transparent; background-clip:content-box; }
html.theme-pro #app-shell .main-col ::-webkit-scrollbar-thumb:hover{ background:#BCC6D6; background-clip:content-box; }
html.theme-pro #app-shell .main-col a{ color:var(--acc); text-decoration:none; }
html.theme-pro #app-shell .main-col a:hover{ color:var(--acc-hi); text-decoration:underline; }
html.theme-pro #app-shell .main-col hr{ border:none; border-top:1px solid var(--line); margin:22px 0; }
html.theme-pro #app-shell .main-col .muted,
html.theme-pro #app-shell .main-col small,
html.theme-pro #app-shell .main-col .sub,
html.theme-pro #app-shell .main-col .page-sub{ color:var(--muted); }
html.theme-pro #app-shell .main-col b,
html.theme-pro #app-shell .main-col strong{ color:var(--text); }
html.theme-pro #app-shell .main-col code,
html.theme-pro #app-shell .main-col kbd{ font-family:var(--mono); background:var(--panel-2); border:1px solid var(--line-2); border-radius:var(--r-xs); padding:1px 6px; font-size:11.5px; color:var(--text-2); }

/* ============ 3 · TIPOGRAFÍA + CABECERA DE PÁGINA ============ */
html.theme-pro #app-shell .main-col h1,
html.theme-pro #app-shell .main-col h2,
html.theme-pro #app-shell .main-col h3,
html.theme-pro #app-shell .main-col h4{ font-family:var(--disp); color:var(--text); font-weight:650; letter-spacing:-.02em; }
html.theme-pro #app-shell .main-col .page-title{
  font-family:var(--disp); font-size:clamp(20px,2.6vw,26px); font-weight:700; letter-spacing:-.025em; line-height:1.15;
  margin:0 0 20px; padding-bottom:18px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--text);
}
html.theme-pro #app-shell .main-col .section-title{
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:30px 0 12px; display:flex; align-items:center; gap:10px;
}
html.theme-pro #app-shell .main-col .home-sec-lbl,
html.theme-pro #app-shell .main-col .label-up,
html.theme-pro #app-shell .main-col .eyebrow{
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}

/* ============ 4 · TARJETAS / PANELES ============ */
html.theme-pro #app-shell .main-col .card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  padding:20px 22px; transition:box-shadow .16s, border-color .16s, transform .16s;
}
html.theme-pro #app-shell .main-col .card .card{ background:var(--panel-2); border-color:var(--line); box-shadow:none; }
html.theme-pro #app-shell .main-col .card[style*="border-left"]{ border-left:1px solid var(--line) !important; }
html.theme-pro #app-shell .main-col .card-head{ margin-bottom:16px; padding-bottom:0; border-bottom:none; }
html.theme-pro #app-shell .main-col .card-head h2,
html.theme-pro #app-shell .main-col .card-head h3{ font-family:var(--disp); font-size:15.5px; font-weight:650; letter-spacing:-.015em; }
html.theme-pro #app-shell .main-col .mb{ color:var(--muted); }

/* ============ 5 · KPI / STAT ============ */
html.theme-pro #app-shell .main-col .grid-kpi{ gap:16px; }
html.theme-pro #app-shell .main-col .kpi,
html.theme-pro #app-shell .main-col .stat-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:18px 20px;
  transition:box-shadow .16s, border-color .16s;
}
html.theme-pro #app-shell .main-col .kpi-clickable:hover,
html.theme-pro #app-shell .main-col .kpi:hover{ border-color:var(--acc-line); box-shadow:var(--sh-2); }
html.theme-pro #app-shell .main-col .kpi-label,
html.theme-pro #app-shell .main-col .stat-label{
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
}
html.theme-pro #app-shell .main-col .kpi-value,
html.theme-pro #app-shell .main-col .stat-value,
html.theme-pro #app-shell .main-col .big-num{
  font-family:var(--disp); font-weight:700; letter-spacing:-.03em; color:var(--text); font-variant-numeric:tabular-nums;
}
html.theme-pro #app-shell .main-col .kpi-extra,
html.theme-pro #app-shell .main-col .kpi-go{ color:var(--muted); }
html.theme-pro #app-shell .main-col .kpi-detail-row{ border-bottom:1px solid var(--line); }

/* ============ 6 · BOTONES ============ */
html.theme-pro #app-shell .main-col .btn{
  font-family:var(--sans); border-radius:var(--r-sm); font-weight:600; font-size:13.5px; border:1px solid transparent;
  padding:9px 16px; transition:background .14s,border-color .14s,color .14s,box-shadow .14s; box-shadow:none;
}
html.theme-pro #app-shell .main-col .btn-primary,
html.theme-pro #app-shell .main-col .btn-gold,
html.theme-pro #app-shell .main-col .btn-green{ background:var(--acc); color:var(--acc-ink); border-color:transparent; box-shadow:0 1px 2px rgba(23,37,84,.25); }
html.theme-pro #app-shell .main-col .btn-primary:hover,
html.theme-pro #app-shell .main-col .btn-gold:hover,
html.theme-pro #app-shell .main-col .btn-green:hover{ background:var(--acc-hi); color:var(--acc-ink); filter:none; }
html.theme-pro #app-shell .main-col .btn-primary:active,
html.theme-pro #app-shell .main-col .btn-gold:active{ background:var(--acc-dim); }
html.theme-pro #app-shell .main-col .btn-outline{ background:#fff; border:1px solid var(--line-2); color:var(--text); box-shadow:var(--sh-1); }
html.theme-pro #app-shell .main-col .btn-outline:hover{ border-color:var(--acc); color:var(--acc); background:var(--acc-soft); filter:none; }
html.theme-pro #app-shell .main-col .btn-ghost{ background:var(--panel-2); color:var(--text-2); border:1px solid var(--line); }
html.theme-pro #app-shell .main-col .btn-ghost:hover{ background:var(--panel-3); border-color:var(--line-2); color:var(--text); }
html.theme-pro #app-shell .main-col .btn-danger,
html.theme-pro #app-shell .main-col .btn-red{ background:var(--bad); color:#fff; border-color:transparent; }
html.theme-pro #app-shell .main-col .btn:focus-visible{ outline:none; box-shadow:var(--ring); }
html.theme-pro #app-shell .main-col .btn-sm{ font-size:12.5px; padding:7px 13px; }
html.theme-pro #app-shell .main-col .btn-xs{ font-size:11.5px; padding:5px 10px; }

/* ============ 7 · FORMULARIOS ============ */
html.theme-pro #app-shell .main-col input,
html.theme-pro #app-shell .main-col select,
html.theme-pro #app-shell .main-col textarea{
  background:#FFFFFF !important; border:1px solid var(--line-2); color:var(--text); border-radius:var(--r-sm);
  font-family:var(--sans); font-size:14px; box-shadow:var(--sh-1);
}
html.theme-pro #app-shell .main-col input::placeholder,
html.theme-pro #app-shell .main-col textarea::placeholder{ color:var(--faint); }
html.theme-pro #app-shell .main-col input:focus,
html.theme-pro #app-shell .main-col select:focus,
html.theme-pro #app-shell .main-col textarea:focus{ outline:none; border-color:var(--acc); box-shadow:var(--ring); }
html.theme-pro #app-shell .main-col label{
  font-family:var(--sans); color:var(--text-2); font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none;
}
html.theme-pro #app-shell .main-col .seg-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); }
html.theme-pro #app-shell .main-col .seg-card:hover{ border-color:var(--line-2); box-shadow:var(--sh-2); }
html.theme-pro #app-shell .main-col .seg-card.on,
html.theme-pro #app-shell .main-col .seg-card.sel{ border-color:var(--acc); box-shadow:0 0 0 2px var(--acc-soft); }
html.theme-pro #app-shell .main-col .seg-toggle{ background:var(--panel-2); border:1px solid var(--line-2); border-radius:8px; overflow:hidden; }
html.theme-pro #app-shell .main-col .seg-tg{ background:transparent !important; color:var(--muted); border:none; }
html.theme-pro #app-shell .main-col .seg-tg.active{ background:#FFFFFF !important; color:var(--acc); box-shadow:var(--sh-1); }

/* ============ 8 · TABLAS ============ */
html.theme-pro #app-shell .main-col .table-wrap{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:auto; background:var(--panel); box-shadow:var(--sh-1); }
html.theme-pro #app-shell .main-col table{ font-size:13.5px; }
html.theme-pro #app-shell .main-col th{
  background:var(--panel-2) !important; color:var(--muted); font-family:var(--sans);
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  border-bottom:1px solid var(--line); padding:12px 16px; text-align:left; position:sticky; top:0; white-space:nowrap;
}
html.theme-pro #app-shell .main-col td{ border-bottom:1px solid var(--line); padding:13px 16px; color:var(--text-2); }
html.theme-pro #app-shell .main-col tbody tr:hover td{ background:var(--bg-1) !important; }
html.theme-pro #app-shell .main-col tbody tr.sel td,
html.theme-pro #app-shell .main-col tbody tr.active td{ background:var(--acc-soft); box-shadow:inset 2px 0 0 var(--acc); }
html.theme-pro #app-shell .main-col td b, html.theme-pro #app-shell .main-col td strong{ color:var(--text); }
html.theme-pro #app-shell .main-col .data-mono,
html.theme-pro #app-shell .main-col td .mono{ font-variant-numeric:tabular-nums; }

/* ============ 9 · TABS ============ */
html.theme-pro #app-shell .main-col .tabs{ border-bottom:1px solid var(--line); gap:4px; overflow-x:auto; }
html.theme-pro #app-shell .main-col .tab{
  background:transparent; border:none; border-bottom:2px solid transparent; color:var(--muted);
  font-family:var(--sans); font-weight:600; font-size:13.5px; border-radius:0; padding:10px 14px; transition:color .15s,border-color .2s;
}
html.theme-pro #app-shell .main-col .tab:hover{ color:var(--text-2); }
html.theme-pro #app-shell .main-col .tab.active,
html.theme-pro #app-shell .main-col .tab.on{ color:var(--acc); border-bottom-color:var(--acc); }

/* ============ 10 · BADGES / CHIPS ============ */
html.theme-pro #app-shell .main-col .badge{
  font-family:var(--sans); font-size:11px; letter-spacing:0; font-weight:600;
  border:1px solid transparent; background:var(--panel-2); color:var(--text-2); border-radius:var(--r-pill); padding:3px 10px;
}
html.theme-pro #app-shell .main-col .badge.ok, html.theme-pro #app-shell .main-col .badge-green, html.theme-pro #app-shell .main-col .badge.green{ background:var(--ok-soft); color:var(--ok); }
html.theme-pro #app-shell .main-col .badge.warn, html.theme-pro #app-shell .main-col .badge-amber, html.theme-pro #app-shell .main-col .badge.amber{ background:var(--warn-soft); color:var(--warn); }
html.theme-pro #app-shell .main-col .badge.bad, html.theme-pro #app-shell .main-col .badge-red, html.theme-pro #app-shell .main-col .badge.red{ background:var(--bad-soft); color:var(--bad); }
html.theme-pro #app-shell .main-col .badge.info, html.theme-pro #app-shell .main-col .badge-blue{ background:var(--info-soft); color:var(--info); }
html.theme-pro #app-shell .main-col .chip{ background:#FFFFFF; border:1px solid var(--line-2); color:var(--text-2); border-radius:var(--r-pill); box-shadow:var(--sh-1); }
html.theme-pro #app-shell .main-col .chip:hover{ border-color:var(--line-3); color:var(--text); }
html.theme-pro #app-shell .main-col .chip.active,
html.theme-pro #app-shell .main-col .chip.on{ background:var(--acc-soft); border-color:var(--acc); color:var(--acc); box-shadow:none; }

/* ============ 11 · FILTROS ============ */
html.theme-pro #app-shell .main-col .filters select,
html.theme-pro #app-shell .main-col .filters input{ background:#FFFFFF; border:1px solid var(--line-2); }

/* ============ 12 · LISTAS / EMPTY ============ */
html.theme-pro #app-shell .main-col .list,
html.theme-pro #app-shell .main-col .list-row{ border-color:var(--line); }
html.theme-pro #app-shell .main-col .list-row{ border-bottom:1px solid var(--line); }
html.theme-pro #app-shell .main-col .list-row:hover{ background:var(--bg-1); }
html.theme-pro #app-shell .main-col .empty-state{
  background:var(--panel); border:1px dashed var(--line-2); border-radius:var(--r-xl); color:var(--muted); padding:36px 20px;
}

/* ============ 13 · PROGRESO ============ */
html.theme-pro #app-shell .main-col .bar,
html.theme-pro #app-shell .main-col .progress,
html.theme-pro #app-shell .main-col .meter,
html.theme-pro #app-shell .main-col .hbar-track,
html.theme-pro #app-shell .main-col .pbar{ background:var(--panel-3) !important; border-radius:var(--r-pill); }
html.theme-pro #app-shell .main-col .bar>span,
html.theme-pro #app-shell .main-col .progress>span,
html.theme-pro #app-shell .main-col .meter>span{ background:var(--acc); }

/* ============ 14 · INICIO · buscador + accesos rápidos ============ */
html.theme-pro #app-shell .main-col .home-hero{ margin-bottom:12px; }
html.theme-pro #app-shell .main-col .home-hello h2{ font-family:var(--disp); font-size:clamp(22px,3.2vw,34px); font-weight:700; letter-spacing:-.03em; color:var(--text); }
html.theme-pro #app-shell .main-col .home-search{ background:#FFFFFF; border:1px solid var(--line-2); border-radius:var(--r-md); box-shadow:var(--sh-1); }
html.theme-pro #app-shell .main-col .home-search input{ background:transparent !important; border:none; box-shadow:none !important; color:var(--text); }
html.theme-pro #app-shell .main-col .home-search input:focus{ box-shadow:none !important; }
html.theme-pro #app-shell .main-col .home-search:focus-within{ border-color:var(--acc); box-shadow:var(--ring); }
html.theme-pro #app-shell .main-col .home-search-ico{ color:var(--muted); }
html.theme-pro #app-shell .main-col .home-search-results{ background:#FFFFFF; border:1px solid var(--line-2); box-shadow:var(--sh-pop); border-radius:var(--r-md); }
html.theme-pro #app-shell .main-col .qa-grid{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
html.theme-pro #app-shell .main-col .qa-tile{
  flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:12px; text-align:left !important;
  background:#FFFFFF !important; border:1px solid var(--line); border-radius:var(--r-lg); color:var(--text); box-shadow:var(--sh-1);
  padding:13px 15px !important; transition:box-shadow .15s, border-color .15s, transform .15s;
}
html.theme-pro #app-shell .main-col .qa-tile:hover{ border-color:var(--acc-line); box-shadow:var(--sh-2); transform:translateY(-1px); background:#FFFFFF !important; }
html.theme-pro #app-shell .main-col .qa-tile .qa-ico{
  width:38px !important; height:38px !important; flex:0 0 auto; margin:0 !important;
  background:var(--acc-soft); border:1px solid var(--acc-line); border-radius:10px; color:var(--acc);
  display:flex; align-items:center; justify-content:center;
}
html.theme-pro #app-shell .main-col .qa-tile .qa-ico .ico{ width:19px; height:19px; }
html.theme-pro #app-shell .main-col .qa-tile .qa-ico svg,
html.theme-pro #app-shell .main-col .qa-tile .qa-ico path{ color:var(--acc) !important; stroke:var(--acc) !important; }
html.theme-pro #app-shell .main-col .qa-tile .qa-lbl{ color:var(--text) !important; font-weight:600; font-size:13px; text-align:left !important; text-shadow:none !important; line-height:1.25; }
html.theme-pro #app-shell .main-col .qa-group{ border:1px solid var(--line) !important; border-radius:var(--r-xl); background:transparent !important; padding:0; }
html.theme-pro #app-shell .main-col .qa-group-t{ font-family:var(--sans); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }

/* ============ 15 · DEFENSIVO · literales oscuros que rompen en claro ============ */
html.theme-pro #app-shell .main-col .task-card.st-completada{ background:var(--ok-soft) !important; }
html.theme-pro #app-shell .main-col .task-card.st-no_completada{ background:var(--bad-soft) !important; }
html.theme-pro #app-shell .main-col .task-card.st-en_proceso{ background:var(--info-soft) !important; }
html.theme-pro #app-shell .main-col .task-card.st-revision{ background:var(--warn-soft) !important; }
html.theme-pro #app-shell .main-col .st-btn,
html.theme-pro #app-shell .main-col .agent-pick,
html.theme-pro #app-shell .main-col .comment,
html.theme-pro #app-shell .main-col .tl-body{ background:var(--panel-2) !important; color:var(--text) !important; }
html.theme-pro #app-shell .main-col .topbar-search{ background:#FFFFFF !important; border:1px solid var(--line-2); }
html.theme-pro #app-shell .main-col .home-loc-map,
html.theme-pro #app-shell .main-col .fr-thumb{ background:var(--panel-2) !important; }
html.theme-pro #app-shell .main-col .alert-item.crit{ background:var(--bad-soft) !important; color:var(--bad) !important; border-color:rgba(185,28,28,.2) !important; }
html.theme-pro #app-shell .main-col .alert-item.warn{ background:var(--warn-soft) !important; color:var(--warn) !important; border-color:rgba(180,83,9,.2) !important; }
html.theme-pro #app-shell .main-col .alert-item.info{ background:var(--info-soft) !important; color:var(--info) !important; border-color:rgba(29,78,216,.2) !important; }
html.theme-pro #app-shell .main-col .task-card [contenteditable]{ background:#FFFFFF !important; color:var(--text) !important; }
/* tarjetas con gris oscuro fijo (mc-visit etc.) → neutro claro */
html.theme-pro #app-shell .main-col .mc-task.mc-visit{ background:var(--panel-3) !important; color:var(--text) !important; border-left-color:var(--acc) !important; }
html.theme-pro #app-shell .topbar{ background:#FFFFFF; border-bottom:1px solid var(--line); color:var(--text); }

/* ============ 16 · MODALES ============ */
html.theme-pro #modal-root{ background:rgba(15,26,46,.35); }
html.theme-pro #modal-root .modal{
  background:#FFFFFF; border:1px solid var(--line); border-radius:16px; color:#0E1726; box-shadow:0 30px 70px -20px rgba(15,26,46,.4);
  font-family:'Inter',system-ui,sans-serif;
  --card:#FFFFFF; --panel:#FFFFFF; --panel-2:#EEF2F8; --panel-3:#EDF0F6; --border:#D9DFE9; --line:#D9DFE9; --line-2:#C7D0DD; --line-3:#AEB9CA;
  --surface-2:#EEF2F8; --soft-fill:#EEF2F8; --text:#0E1726; --text-2:#3A4557; --muted:#687486; --faint:#9AA3B3;
  --acc:#172554; --acc-ink:#FFFFFF; --acc-soft:rgba(23,37,84,.08); --gold:#172554; --green:#15803D; --red:#B91C1C;
  --disp:'Inter',sans-serif; --mono:'Inter',sans-serif;
}
html.theme-pro #modal-root .modal-head{ border-bottom:1px solid #D9DFE9; }
html.theme-pro #modal-root .modal-head h3{ color:#0E1726; font-family:'Inter',sans-serif; font-weight:650; letter-spacing:-.02em; }
html.theme-pro #modal-root .modal-x{ color:#687486; }
html.theme-pro #modal-root .modal-x:hover{ color:#0E1726; }
html.theme-pro #modal-root .modal-body{ color:#0E1726; }
html.theme-pro #modal-root .modal-foot{ border-top:1px solid #D9DFE9; }
html.theme-pro #modal-root .modal .btn-primary,
html.theme-pro #modal-root .modal .btn-gold{ background:#172554; color:#fff; border:none; }
html.theme-pro #modal-root .modal .btn-outline{ background:#fff; border:1px solid #C7D0DD; color:#0E1726; }
html.theme-pro #modal-root .modal input,
html.theme-pro #modal-root .modal select,
html.theme-pro #modal-root .modal textarea{ background:#FFFFFF; border:1px solid #C7D0DD; color:#0E1726; border-radius:8px; }
html.theme-pro #modal-root .modal label{ color:#3A4557; font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none; }
html.theme-pro #modal-root .modal th{ background:#EEF2F8; color:#687486; border-bottom:1px solid #D9DFE9; font-family:'Inter',sans-serif; }
html.theme-pro #modal-root .modal td{ border-bottom:1px solid #EDF0F6; }

/* ============ 17 · TOASTS ============ */
html.theme-pro #toast-root .toast{ background:#FFFFFF; border:1px solid #D9DFE9; color:#0E1726; border-radius:10px; box-shadow:0 20px 48px -14px rgba(15,26,46,.28); font-family:'Inter',sans-serif; }

/* ============ 18 · INTERRUPTOR DE SKIN (Personalización — global, ambos skins) ============ */
.skin-picker{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px; }
@media(max-width:560px){ .skin-picker{ grid-template-columns:1fr; } }
.skin-opt{ text-align:left; cursor:pointer; border:1.5px solid var(--border,#D9DFE9); background:var(--card,#fff); border-radius:14px; padding:0; overflow:hidden; transition:border-color .15s,transform .15s; font-family:inherit; }
.skin-opt:hover{ transform:translateY(-2px); }
.skin-opt.on{ border-color:#172554; box-shadow:0 0 0 3px rgba(23,37,84,.16); }
.skin-prev{ height:92px; display:flex; }
.skin-prev .sp-bar{ width:34%; }
.skin-prev .sp-body{ flex:1; padding:11px; display:flex; flex-direction:column; gap:7px; }
.skin-prev .sp-row{ height:9px; border-radius:3px; }
.skin-prev .sp-chip{ width:46%; height:16px; border-radius:5px; }
.skin-prev.clasico{ background:#FFFFFF; } .skin-prev.clasico .sp-bar{ background:#F4F5F7; } .skin-prev.clasico .sp-row{ background:#E9E3DC; } .skin-prev.clasico .sp-chip{ background:#1E3442; }
.skin-prev.pro{ background:#ECEFF5; } .skin-prev.pro .sp-bar{ background:#F4F6FA; border-right:1px solid #D9DFE9; } .skin-prev.pro .sp-row{ background:#E1E6EF; } .skin-prev.pro .sp-chip{ background:#172554; }
.skin-prev.maison{ background:#EEECE7; } .skin-prev.maison .sp-bar{ background:#E8E6E1; border-right:1px solid rgba(25,24,22,.14); } .skin-prev.maison .sp-row{ background:#DEDBD4; } .skin-prev.maison .sp-chip{ background:#191919; }
.skin-meta{ padding:11px 14px; border-top:1px solid var(--border,#D9DFE9); }
.skin-meta b{ display:block; font-size:14px; color:var(--text,#0E1726); }
.skin-meta span{ font-size:12px; color:var(--muted,#687486); }

/* ============ 19 · (reservado) ============ */

/* ============ 20 · SHELL MERIDIAN: rail de áreas + command bar (reemplaza el menú en Pro) ============ */
#ah-rail, #ah-topbar{ display:none; }

html.theme-pro #app-shell .sidebar,
html.theme-pro #app-shell .sidebar-overlay,
html.theme-pro #app-shell .menu-fab,
html.theme-pro #app-shell .main-col .athome-brand{ display:none !important; }
html.theme-pro #app-shell .main-col{ margin-left:64px !important; margin-right:0 !important; }
/* fondo uniforme claro */
html.theme-pro body{ background:#E3E8F0 !important; }
html.theme-pro #app-shell{ background:#ECEFF5 !important; }
html.theme-pro #app-shell .main-col{ background:#ECEFF5; }

/* --- RAIL (áreas) --- */
html.theme-pro #ah-rail{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  position:fixed; left:0; top:0; bottom:0; width:64px; z-index:60;
  background:#FFFFFF; border-right:1px solid #D9DFE9; padding:10px 0;
}
html.theme-pro .ah-rail-logo{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer; margin-bottom:6px; }
html.theme-pro .ah-rail-logo img{ width:28px; height:auto; display:block; filter:brightness(.25) saturate(1.1); }
html.theme-pro .ah-rail-areas{ display:flex; flex-direction:column; align-items:center; gap:4px; flex:1 1 auto; width:100%; }
html.theme-pro .ah-area{ position:relative; width:100%; display:flex; justify-content:center; }
html.theme-pro .ah-area-btn{ position:relative; width:42px; height:42px; border-radius:11px; border:none; background:transparent; color:#687486; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .14s,color .14s; }
html.theme-pro .ah-area-btn .ico{ width:21px; height:21px; }
html.theme-pro .ah-area:hover .ah-area-btn{ background:#E8EDF5; color:#0E1726; }
html.theme-pro .ah-area.active .ah-area-btn{ background:rgba(23,37,84,.09); color:#172554; }
html.theme-pro .ah-area.active::before{ content:""; position:absolute; left:-10px; top:50%; transform:translateY(-50%); width:3px; height:22px; border-radius:0 3px 3px 0; background:#172554; }
html.theme-pro .ah-area-dot{ position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%; background:#DC2626; border:2px solid #FFFFFF; }
html.theme-pro .ah-fly{
  position:absolute; left:52px; top:-6px; min-width:216px; background:#FFFFFF; border:1px solid #D9DFE9; border-radius:12px;
  box-shadow:0 24px 54px -16px rgba(15,26,46,.28); padding:7px; z-index:70; opacity:0; visibility:hidden; transform:translateX(-6px);
  transition:opacity .13s, transform .13s, visibility .13s; pointer-events:none;
}
html.theme-pro .ah-area:hover .ah-fly{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
html.theme-pro .ah-fly-t{ font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#687486; padding:5px 10px 7px; }
html.theme-pro .ah-fly-i{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color:#3A4557; font:600 13.5px 'Inter',system-ui,sans-serif; cursor:pointer; }
html.theme-pro .ah-fly-i .ico{ width:17px; height:17px; color:#687486; }
html.theme-pro .ah-fly-i:hover{ background:#E8EDF5; color:#0E1726; }
html.theme-pro .ah-fly-i:hover .ico{ color:#3A4557; }
html.theme-pro .ah-fly-i.active{ color:#172554; }
html.theme-pro .ah-fly-i.active .ico{ color:#172554; }
html.theme-pro .ah-fly-i .nav-badge{ margin-left:auto; }
html.theme-pro .ah-rail-foot{ display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:auto; }
html.theme-pro .ah-rail-ic{ position:relative; width:42px; height:42px; border-radius:11px; border:none; background:transparent; color:#687486; cursor:pointer; display:flex; align-items:center; justify-content:center; }
html.theme-pro .ah-rail-ic:hover{ background:#E8EDF5; color:#0E1726; }
html.theme-pro .ah-rail-ic .ico{ width:20px; height:20px; }
html.theme-pro .ah-rail-avatar{ background:#172554; color:#fff; font:700 12px 'Inter',sans-serif; border:none; text-transform:uppercase; }
html.theme-pro .ah-rail-avatar:hover{ background:#111C44; }

/* --- COMMAND BAR (topbar) --- */
html.theme-pro #app-shell .main-col #ah-topbar{
  display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:50; height:56px; padding:0 clamp(16px,2.4vw,30px);
  background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid #D9DFE9;
}
html.theme-pro .ah-tb-crumb{ display:flex; align-items:center; gap:8px; min-width:0; }
html.theme-pro .ah-tb-eyebrow{ font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#687486; white-space:nowrap; }
html.theme-pro .ah-tb-sep{ color:#AEB9CA; }
html.theme-pro .ah-tb-title{ font-family:'Inter',sans-serif; font-size:15px; font-weight:650; letter-spacing:-.015em; color:#0E1726; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.theme-pro .ah-tb-search{
  display:flex; align-items:center; gap:8px; height:38px; padding:0 12px; margin-left:8px; max-width:420px; width:100%;
  background:#EEF2F8; border:1px solid #C7D0DD; border-radius:9px; cursor:text;
}
html.theme-pro .ah-tb-search:hover{ border-color:#AEB9CA; background:#FFFFFF; }
html.theme-pro .ah-tb-search .ico{ width:16px; height:16px; color:#687486; }
html.theme-pro .ah-tb-ph{ flex:1; text-align:left; font-size:13px; color:#687486; }
html.theme-pro .ah-tb-search kbd{ font-family:'Inter',sans-serif; font-size:10.5px; font-weight:600; color:#687486; background:#FFFFFF; border:1px solid #C7D0DD; border-radius:5px; padding:1px 6px; }
html.theme-pro .ah-tb-right{ display:flex; align-items:center; gap:8px; margin-left:auto; }
html.theme-pro .ah-tb-ic{ position:relative; width:38px; height:38px; border-radius:9px; border:1px solid #D9DFE9; background:#FFFFFF; color:#3A4557; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-1); }
html.theme-pro .ah-tb-ic:hover{ background:#EEF2F8; color:#0E1726; }
html.theme-pro .ah-tb-ic .ico{ width:18px; height:18px; }
html.theme-pro .ah-tb-dot{ position:absolute; top:8px; right:8px; width:7px; height:7px; border-radius:50%; background:#DC2626; border:2px solid #FFFFFF; }
html.theme-pro .ah-create{ position:relative; }
html.theme-pro .ah-create-btn{ display:flex; align-items:center; gap:6px; height:38px; }
html.theme-pro .ah-create-btn .ico{ width:16px; height:16px; }
html.theme-pro .ah-create-menu{ position:absolute; right:0; top:46px; min-width:224px; background:#FFFFFF; border:1px solid #D9DFE9; border-radius:12px; box-shadow:0 24px 54px -16px rgba(15,26,46,.28); padding:7px; z-index:80; display:none; }
html.theme-pro .ah-create-menu.open{ display:block; }
html.theme-pro .ah-create-i{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:#3A4557; font:600 13.5px 'Inter',system-ui,sans-serif; cursor:pointer; }
html.theme-pro .ah-create-i .ico{ width:17px; height:17px; color:#172554; }
html.theme-pro .ah-create-i:hover{ background:#E8EDF5; color:#0E1726; }

/* --- MÓVIL: rail → bottom-nav, topbar compacto --- */
@media(max-width:820px){
  html.theme-pro #app-shell .main-col{ margin-left:0 !important; }
  html.theme-pro #ah-rail{
    flex-direction:row; top:auto; left:0; right:0; bottom:0; width:auto; height:60px; padding:0 4px;
    border-right:none; border-top:1px solid #D9DFE9; background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); justify-content:space-around;
    box-shadow:0 -6px 24px -12px rgba(15,26,46,.18);
  }
  html.theme-pro .ah-rail-logo, html.theme-pro .ah-rail-foot{ display:none; }
  html.theme-pro .ah-rail-areas{ flex-direction:row; justify-content:space-around; gap:2px; width:100%; }
  html.theme-pro .ah-area.active::before{ left:50%; top:auto; bottom:0; transform:translateX(-50%); width:22px; height:3px; border-radius:3px 3px 0 0; }
  html.theme-pro .ah-fly{ display:none !important; }
  html.theme-pro #app-shell .main-col #view{ padding-bottom:84px; }
  html.theme-pro #app-shell .main-col #ah-topbar{ padding:0 14px; gap:10px; }
  html.theme-pro .ah-tb-search{ max-width:none; }
  html.theme-pro .ah-tb-ph, html.theme-pro .ah-tb-eyebrow, html.theme-pro .ah-tb-sep{ display:none; }
}

/* ============ 21 · MAPAS (Leaflet) en claro — controles/popup corporativos ============ */
html.theme-pro .leaflet-container{ background:#E8EDF4 !important; }
html.theme-pro .leaflet-control-zoom a{ background:#FFFFFF !important; color:#0E1726 !important; border-color:#D9DFE9 !important; }
html.theme-pro .leaflet-control-zoom a:hover{ background:#EEF2F8 !important; }
html.theme-pro .leaflet-bar{ border:1px solid #D9DFE9 !important; box-shadow:0 4px 16px -4px rgba(15,26,46,.14) !important; }
html.theme-pro .leaflet-popup-content-wrapper,
html.theme-pro .leaflet-popup-tip{ background:#FFFFFF !important; color:#0E1726 !important; box-shadow:0 12px 32px -12px rgba(15,26,46,.28) !important; }

/* ============ 22 · AJUSTE FINO · calmar colores saturados ============ */
html.theme-pro #app-shell .main-col .pipe-step{ filter:saturate(.85) brightness(1.02); border-radius:3px; }
html.theme-pro #app-shell .main-col .pipe-cat-badge{ filter:saturate(.9); }

/* ============ 23 · COMODIDAD · jerarquía, densidad y fusión de redundancias ============ */
/* El buscador grande del inicio es redundante con el command bar (⌘K): se fusiona (se oculta). */
html.theme-pro #app-shell .main-col .home-search{ display:none !important; }
/* Mapa del equipo: altura acotada para que no domine la pantalla. */
html.theme-pro #app-shell .main-col .home-loc-map{ height:300px !important; max-height:46vh; }
/* Respiración consistente entre secciones. */
html.theme-pro #app-shell .main-col .home-sec-lbl,
html.theme-pro #app-shell .main-col .section-title{ margin-top:32px; margin-bottom:14px; }
html.theme-pro #app-shell .main-col .home-hero{ margin-bottom:8px; }
html.theme-pro #app-shell .main-col .mt{ margin-top:18px; }
html.theme-pro #app-shell .main-col .grid{ gap:16px; }
html.theme-pro #app-shell .main-col .grid-2{ gap:18px; }
/* Botón "ver todos/ver análisis": discreto y alineado. */
html.theme-pro #app-shell .main-col .home-more-btn{ margin-top:12px; }

/* ============ 24 · PULIDO PREMIUM (visual excellence) ============ */
/* Tiras de proceso del Centro de Mando: de sólidos fuertes → pastillas tenues (siguen el código verde/amber/rojo). */
html.theme-pro #app-shell .main-col .mando-strip{ font-weight:600; border:1px solid transparent; }
html.theme-pro #app-shell .main-col .mando-strip.c-g{ background:var(--ok-soft) !important; color:var(--ok) !important; border-color:rgba(21,128,61,.22) !important; }
html.theme-pro #app-shell .main-col .mando-strip.c-y{ background:var(--warn-soft) !important; color:var(--warn) !important; border-color:rgba(180,83,9,.22) !important; }
html.theme-pro #app-shell .main-col .mando-strip.c-r{ background:var(--bad-soft) !important; color:var(--bad) !important; border-color:rgba(185,28,28,.22) !important; }
/* Tarjetas del organigrama más limpias. */
html.theme-pro #app-shell .main-col .mando-card{ background:#FFFFFF; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2); }
html.theme-pro #app-shell .main-col .mando-accent{ opacity:.9; }
/* Tarjetas de propiedad / recurso / plantilla: hover premium (sutil elevación). */
html.theme-pro #app-shell .main-col .prop-card,
html.theme-pro #app-shell .main-col .res-card,
html.theme-pro #app-shell .main-col .tpl-card{ transition:box-shadow .16s, transform .16s, border-color .16s; }
html.theme-pro #app-shell .main-col .prop-card:hover,
html.theme-pro #app-shell .main-col .res-card:hover,
html.theme-pro #app-shell .main-col .tpl-card:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); border-color:var(--acc-line); }
/* Portadas de inmuebles con radio consistente. */
html.theme-pro #app-shell .main-col .prop-cover,
html.theme-pro #app-shell .main-col .p-cover{ border-radius:var(--r-md) var(--r-md) 0 0; }
/* Calendario / celdas de rendimiento: un punto menos saturadas. */
html.theme-pro #app-shell .main-col .cal-cell,
html.theme-pro #app-shell .main-col .heat-cell{ filter:saturate(.9); }

/* ============ 25 · QUICK WINS de comodidad (del análisis de reorganización) ============ */
/* Filtros y barras de herramientas envuelven en pantallas chicas. */
html.theme-pro #app-shell .main-col .filters{ flex-wrap:wrap; align-items:center; }
html.theme-pro #app-shell .main-col .mando-bar-row{ flex-wrap:wrap; gap:10px; }
/* Mapas altos acotados para que no empujen el contenido. */
html.theme-pro #app-shell .main-col .leaflet-container{ max-height:420px; }
/* Tablas anchas dentro de una card: scroll horizontal en vez de desbordar. */
html.theme-pro #app-shell .main-col .card>table{ display:block; overflow-x:auto; max-width:100%; }
/* Descripción de tarjeta de inmueble acotada a 2 líneas. */
html.theme-pro #app-shell .main-col .prop-card .muted{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* <details> con aspecto de plegable premium (para los bloques secundarios). */
html.theme-pro #app-shell .main-col details>summary{ cursor:pointer; font-weight:600; color:var(--acc); padding:10px 2px; list-style:none; user-select:none; }
html.theme-pro #app-shell .main-col details>summary::-webkit-details-marker{ display:none; }