/* La marca de la oficina: la de la maqueta v2 (docs/maquetas/oficina-v2-llamadas.html), que es la de HQ v2.
 * Noche de tinta, plata y cian hielo. El cian (--accion) solo en lo que pide un clic; el halo (--brillo) solo en el
 * botón Llamar de la ficha. Títulos y números en Space Grotesk con el cromo; cuerpo en Archivo; cifras en Archivo
 * Narrow con tabular-nums. Las fuentes van locales. */
@font-face{font-family:"Space Grotesk";src:url(/fonts/SpaceGrotesk-latin.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Archivo";src:url(/fonts/Archivo-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo";src:url(/fonts/Archivo-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Archivo";src:url(/fonts/Archivo-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Archivo Narrow";src:url(/fonts/ArchivoNarrow-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --papel:#050B17; --carta:#0A1426; --carta-2:#0F1B31; --navy:#03070F;
  --tinta:#E8EAED; --tinta2:#AEB7C2; --tinta3:#8390A0;
  --linea:#1A2539; --linea2:#5A6981; --linea-plata:rgba(199,205,212,.10);
  --accion:#6FD8E8; --accion-hover:#9FE4EE; --accion-bg:#0C2A36; --foco:#C9F2F7; --sobre-accion:#04121A;
  --ok:#6FE0A6; --ok-bg:#0E2A20; --alerta:#F2C86B; --alerta-bg:#2A2210;
  --peligro:#FF8A7A; --peligro-bg:#2E1414; --cliente:#A385EF; --cliente-bg:#1D1638;
  --cromo:linear-gradient(135deg,#F4F7FA 0%,#AEB7C2 42%,#F4F7FA 55%,#9AA6B3 100%);
  --brillo:0 0 0 1px rgba(159,228,238,.45),0 0 0 5px rgba(111,216,232,.06),0 0 36px rgba(111,216,232,.14);
  --sombra-2:0 24px 60px -24px rgba(0,0,0,.65),inset 0 1px 0 rgba(199,205,212,.05);
  --display:"Space Grotesk",system-ui,sans-serif; --cuerpo:"Archivo",system-ui,sans-serif; --cifra:"Archivo Narrow","Archivo",sans-serif;
  --r:12px; --r-chico:8px; --dur:140ms; --ease-out:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
body{background:var(--papel);color:var(--tinta);font:400 14px/1.5 var(--cuerpo);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.cromo{font-family:var(--display);font-weight:600;letter-spacing:-.03em;color:var(--tinta)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .cromo{background:var(--cromo);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
.num{font-family:var(--cifra);font-variant-numeric:tabular-nums;font-weight:600}
[hidden]{display:none!important}
.solo-lector{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Botones: 40 px de alto como mínimo. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 16px;border-radius:var(--r-chico);border:1px solid var(--linea2);background:var(--carta);font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none;color:var(--tinta);transition:border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out)}
.btn:hover{border-color:var(--tinta2);background:var(--carta-2)}
.btn svg{width:16px;height:16px;flex:none}
.btn.accion{background:var(--accion);border-color:var(--accion);color:var(--sobre-accion)}
.btn.accion:hover{background:var(--accion-hover);border-color:var(--accion-hover)}
.btn.primario{background:var(--accion);border-color:var(--accion);color:var(--sobre-accion);box-shadow:var(--brillo);padding:12px 20px;font-size:15px}
.btn.primario:hover{background:var(--accion-hover)}
.btn.suave{color:var(--tinta2)}
.btn[disabled]{opacity:.55;cursor:not-allowed}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}