/* VGA · Centro de Operaciones: capa visual estilo Apple, la misma del sitio (theme vga-theme/site/img/vga-apple.css).
   Se carga después de base.css y app.css. Mantiene el tema claro/oscuro del CRM y su único acento amarillo.
   - Fuente del sistema (SF Pro en Mac/iPhone, Inter Tight en Windows/Android), números tabulares.
   - Etiquetas en texto normal en lugar de monoespaciada en mayúsculas.
   - Superficies agrupadas tipo iOS, radios 14/18/22, menú lateral translúcido. */
html:root{
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter Tight","Segoe UI Variable Display",system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter Tight","Segoe UI Variable Text",system-ui,sans-serif;
  --mono:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter Tight",system-ui,sans-serif;
  --r:18px; --r-sm:12px; --r-lg:22px;
  --ease:cubic-bezier(.22,1,.36,1);
  --bg:#0b0b0a; --bg-2:#111110; --surface:#1a1a18; --surface-2:#232321; --surface-3:#2c2c29;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13);
  --ink:#f5f5f2; --ink-2:#dcdcd6; --muted:#a1a19b; --faint:#75756f;
}
html:root[data-theme="light"]{
  --bg:#f5f5f7; --bg-2:#ececef; --surface:#ffffff; --surface-2:#f5f5f7; --surface-3:#e8e8ed;
  --line:rgba(0,0,0,.07); --line-2:rgba(0,0,0,.13);
  --ink:#1d1d1f; --ink-2:#333336; --muted:#6e6e73; --faint:#8e8e93;
  --accent:#f2b705; --accent-2:#d9a300; --accent-soft:rgba(242,183,5,.16);
}
body{font:15px/1.47 var(--body);letter-spacing:-.011em;font-feature-settings:"tnum" 1,"cv11" 1}
h1,h2,h3,h4{font-family:var(--display)!important;font-stretch:100%!important;letter-spacing:-.022em}

/* lateral: material translúcido, grupos con etiqueta en texto normal */
.side{background:color-mix(in srgb,var(--bg-2) 86%,transparent);-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);border-right:1px solid var(--line);padding:16px 12px}
.brand b{font:700 16px/1.1 var(--display)!important;letter-spacing:-.02em!important}
.brand small{font:500 11.5px/1.3 var(--body)!important;letter-spacing:-.005em!important;text-transform:none!important}
.nav-g{font:600 12px/1 var(--body)!important;letter-spacing:-.005em!important;text-transform:none!important;color:var(--muted)!important;padding:18px 10px 6px!important}
.nav a{padding:9px 10px;border-radius:10px;font-weight:500;font-size:14px;letter-spacing:-.012em}
.nav a.on{background:var(--surface-3);color:var(--ink)}
.nav a.on::before{display:none}
.nav .cnt{font:600 11.5px var(--body)!important;border-radius:999px}

/* barra superior */
.top{border-bottom:1px solid var(--line)}
.top h2{font:700 24px/1.1 var(--display)!important;letter-spacing:-.03em!important}
.top .crumb{font:500 12px var(--body)!important;letter-spacing:-.005em!important;text-transform:none!important}
.search{border-radius:12px!important}
.search kbd{font:500 11px var(--body)!important}

/* tarjetas y métricas */
.card{border-radius:var(--r-lg)!important;border:1px solid var(--line)!important;background:var(--surface)!important;box-shadow:none}
.card h3{font-weight:600!important;letter-spacing:-.02em!important}
.card h3 .sub,.sec-t,.kv small,.emp .meta small,.field>span,.t th,.day h4,.gantt .gh{font:600 12px/1.3 var(--body)!important;letter-spacing:-.005em!important;text-transform:none!important}
.kpi{border-radius:var(--r-lg)!important}
.kpi .lbl{font:500 13px/1.2 var(--body)!important;letter-spacing:-.01em!important;text-transform:none!important;color:var(--muted)}
.kpi b,.big-metric b{font-family:var(--display)!important;font-weight:700!important;letter-spacing:-.035em!important}
.metric b,.score,.deal .ft .v,.funnel .v,.col-h small,.tabs .n{font-family:var(--body)!important;font-variant-numeric:tabular-nums}
.tag,.ai-badge{font:600 11.5px var(--body)!important;letter-spacing:-.005em!important;border-radius:999px!important}
.pill,.chip{border-radius:999px}

/* tablas: filas de lista */
.t th{background:transparent}
.t td{border-color:var(--line)}
.t tr:hover td{background:var(--surface-2)}

/* botones y campos: respuesta al presionar */
.btn{border-radius:999px!important;font-weight:600;letter-spacing:-.012em;transition:transform .1s ease-out,background-color .2s,color .2s}
.btn:active{transform:scale(.97)}
.icon-btn{border-radius:999px}
.icon-btn:active{transform:scale(.94)}
.input,.field input,.field select,.field textarea,input.input,select.input,textarea.input{border-radius:12px!important}
.seg,.tabs{border-radius:999px}

/* paneles, hojas y avisos */
.drawer{border-radius:var(--r-lg) 0 0 var(--r-lg)}
.toast{border-radius:16px!important;-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%)}
.deal,.list-i,.emp{border-radius:var(--r)!important}
.kanban .col{border-radius:var(--r-lg)}

/* acceso, portal del cliente y estimador */
.login .card,.pub .card{border-radius:26px!important}
.pub-head h1,.pub h1{letter-spacing:-.04em!important}

@media (prefers-reduced-motion:reduce){.btn,.icon-btn,.nav a{transition:none!important;transform:none!important}}
@media (prefers-reduced-transparency:reduce){.side,.toast{background:var(--bg-2)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}

/* ───────── Estimador (página propia e incrustado en el sitio) ───────── */
body.embed{--surface:#1e1e1c;--surface-2:#262624;--surface-3:#32322f;background:#151514;color:var(--ink)}
body.embed .pub{max-width:760px;margin:0 auto;padding:clamp(20px,4vw,34px) clamp(18px,4vw,34px) clamp(24px,4vw,36px)}
.pub .est-top{margin-bottom:12px}
.pub .est-h{margin:0 0 8px;color:var(--ink);font:700 clamp(25px,3.6vw,34px)/1.1 var(--display);letter-spacing:-.032em;text-wrap:balance;outline:0}
.pub .est-h+.choice,.pub .est-h+.form{margin-top:18px}
.pub .lead{margin-bottom:20px;color:var(--muted);line-height:1.42;letter-spacing:-.014em}
.pub .steps{gap:5px;margin-bottom:24px}
.pub .steps i{height:3px;transition:background-color .3s ease}
.pub .form{display:grid;gap:14px}
.pub .field{gap:7px}
.pub .field>span{font-size:13px!important;color:var(--ink-2)}
/* 17px: iOS no acerca la página al enfocar el campo */
.pub .input{height:52px;padding:0 15px;font-size:17px}
.pub .btn{height:50px;padding:0 22px;font-size:16px}
.pub .btn.ghost{flex:0 0 auto;border-color:transparent;background:rgba(127,127,127,.14)}
.pub .btn.ghost:hover{background:rgba(127,127,127,.22)}
.pub .btn.pri{box-shadow:none}
.pub .btn.grow{flex:1}
.pub .btn:disabled{opacity:.55;cursor:default}
.pub .seg{padding:3px;border-radius:999px}
.pub .seg button{height:38px;min-width:46px;border-radius:999px}
.pub .choice{margin-bottom:18px}
.pub .choice button{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:72px;padding:14px 16px;border-radius:14px;border-color:var(--line-2);background:var(--surface);font-size:16px;letter-spacing:-.014em;transition:transform .1s ease-out,border-color .15s,background-color .15s,box-shadow .15s}
.pub .choice button small{letter-spacing:-.005em}
.pub .choice button:hover{background:var(--surface-2)}
.pub .choice button:active{transform:scale(.975)}
.pub .check{gap:12px;line-height:1.42}
.pub .check span{font-size:13.5px;color:var(--ink-2)}
.pub .check input{flex:0 0 20px;width:20px;height:20px;margin-top:1px}
.pub .opt{background:var(--surface);border-radius:16px;padding:16px}
.pub .opt .price{font-size:22px;letter-spacing:-.025em}
.pub .notice{margin-top:18px;border-radius:14px}
.pub :is(button,a,input):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pub button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){.pub .choice button{transition:none;transform:none!important}}

/* ───────── Pulido del Centro de Operaciones ───────── */
a,button{-webkit-tap-highlight-color:transparent}
.btn,.icon-btn,.nav a,.tabs a,.seg button{touch-action:manipulation}
:is(button,a,summary):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.t td,.kpi b,.big-metric b{font-variant-numeric:tabular-nums}
/* iOS acerca la página si el campo tiene menos de 16px */
@media (pointer:coarse){.input,select.input,textarea.input,.search input{font-size:16px}}