/* Instrumento v2 · Adaptador del CRM. Cargar después del CSS heredado.
   Los nombres anteriores siguen siendo alias; la fuente es vyron-tokens.css. */
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('../fonts/geist-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('../fonts/geist-mono-variable.woff2') format('woff2');
}
html:root {
  --bg-deep: var(--vy-fondo);
  --bg-base: var(--vy-fondo);
  --bg-elevated: var(--vy-superficie-alta);
  --bg-card: var(--vy-superficie);
  --bg-hover: var(--vy-superficie-alta);
  --border: var(--vy-linea);
  --border-strong: var(--vy-linea-fuerte);
  --border-glow: var(--vy-linea-fuerte);
  --text-primary: var(--vy-tinta);
  --text-secondary: var(--vy-tinta-suave);
  --text-tertiary: var(--vy-tinta-tenue);
  --text-muted: var(--vy-tinta-tenue);
  --blue-dark: var(--vy-tinta);
  --blue-mid: var(--vy-tinta-suave);
  --blue-light: var(--vy-tinta);
  --green-acc: var(--vy-exito);
  --gray-bg: var(--vy-fondo);
  --gray-border: var(--vy-linea-fuerte);
  --gray-text: var(--vy-tinta-tenue);
  --red: var(--vy-peligro);
  --orange: var(--vy-aviso);
  --font: var(--vy-f-texto);
  --font-display: var(--vy-f-texto);
  --font-mono: var(--vy-f-mono);
  --radius: var(--vy-forma-campo);
  --radius-lg: var(--vy-forma-tarjeta);
  --radius-pill: var(--vy-radio-pildora);
  --shadow: 0 2px 12px rgb(0 0 0 / .09);
  --shadow-card: var(--shadow);
  --shadow-glow: none;
}
html body {
  font-family: var(--vy-f-texto);
  color: var(--vy-tinta);
  background-color: var(--vy-fondo);
  background-image: none;
}
html body :is(h1, h2, h3, h4, input, select, textarea, button) {
  font-family: var(--vy-f-texto);
}
html .topbar {
  --nav-bg: var(--vy-superficie);
  --nav-border: var(--vy-linea);
  --nav-text: var(--vy-tinta);
  --nav-dim: var(--vy-tinta-suave);
  --nav-faint: var(--vy-tinta-tenue);
  --nav-hover: var(--vy-superficie-alta);
  --nav-card: var(--vy-superficie);
  --nav-accent: var(--vy-tinta);
  --nav-font: var(--vy-f-texto);
  --nav-font-disp: var(--vy-f-texto);
}
/* Pares de base: los alias de tinta no deben caer sobre superficies fijas
   del CSS anterior. No se modifica geometría ni visibilidad de componentes. */
html body :is(.panel, .card, .modal-box, .modal-content, .dropdown) {
  background: var(--vy-superficie);
  color: var(--vy-tinta);
  border-color: var(--vy-linea);
}
html body :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='submit']), select, textarea) {
  background: var(--vy-superficie);
  color: var(--vy-tinta);
  border-color: var(--vy-linea-fuerte);
}
html body :is(input, textarea)::placeholder {
  color: var(--vy-tinta-tenue);
  opacity: 1;
}
html body :is(.btn-primary, .btn-mono),
html body :is(.btn-primary, .btn-mono):hover:not(:disabled) {
  background: var(--vy-boton-fondo);
  color: var(--vy-boton-texto);
  border-color: var(--vy-boton-fondo);
  box-shadow: none;
}

/* Armazón compartido: geometría y estados, sin cambiar los controles del CRM. */
html { scrollbar-gutter: stable; }
html body :is(main, .main, .container, .page-content) { min-width: 0; max-width: 100%; }
html body .vy-icon { vertical-align: middle; flex-shrink: 0; }
html body :is(button, .btn, input, select, textarea) { border-radius: var(--vy-forma-campo); }
html body :is(button, .btn) { background-image: none; }
html body :is(.btn-secondary, .btn-ghost) {
  background: var(--vy-superficie); color: var(--vy-tinta); border: 1px solid var(--vy-linea-fuerte); box-shadow: none;
}
html body :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--vy-tinta); outline-offset: 3px;
}
html body :is(.panel, .card) { border: 1px solid var(--vy-linea); border-radius: var(--vy-forma-tarjeta); box-shadow: var(--shadow); }
html body :is(.modal-box, .modal-content) { border-radius: var(--vy-forma-hoja); }
/* Tope para pantallas chicas sin pisar el ancho propio de cada modal. */
html body :where(.modal-box, .modal-content) { max-width: calc(100vw - 24px); max-height: calc(100dvh - 32px); overflow-y: auto; }
html body :is(.table-wrap, .table-container, .table-scroll) { max-width: 100%; overflow-x: auto; }
html body table { border-collapse: collapse; color: var(--vy-tinta); }
html body :is(th, td) { border-color: var(--vy-linea); }
html body th { background: var(--vy-superficie-alta); color: var(--vy-tinta-suave); font: 400 12px/1.4 var(--vy-f-mono); }
html body :is(.chip, .badge) { border-radius: var(--vy-forma-chip); font-family: var(--vy-f-mono); }
html body :is(.badge-success, .chip-success) { background: var(--vy-exito-relleno); color: var(--vy-exito-sobre); }
html body :is(.badge-warning, .chip-warning) { background: var(--vy-aviso-relleno); color: var(--vy-aviso-sobre); }
html body :is(.badge-danger, .chip-danger) { background: var(--vy-peligro-relleno); color: var(--vy-peligro-sobre); }
html body :is(.toast, .empty-state) { background: var(--vy-superficie); color: var(--vy-tinta-suave); border: 1px solid var(--vy-linea); border-radius: var(--vy-forma-tarjeta); }
html body .topbar { border-bottom: 1px solid var(--vy-linea); box-shadow: none; }
html body .topbar-nav { border-radius: var(--vy-forma-capsula); }
html body :is(.nav-link, .nav-more-btn) { border-radius: var(--vy-radio-pildora); }
html body .topbar .nav-link.active { background: var(--vy-superficie-alta); color: var(--vy-tinta); box-shadow: none; }
html body .nav-more-panel { border: 1px solid var(--vy-linea-fuerte); border-radius: var(--vy-forma-tarjeta); }
@media (max-width: 768px) {
  html body .topbar-nav { border-radius: var(--vy-forma-capsula); background: var(--vy-tab-fondo); border-color: var(--vy-tab-borde); }
  html body :is(.page-header, .panel-header, .filters, .toolbar) { flex-wrap: wrap; min-width: 0; }
  html body :is(input, select, textarea) { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html body *, html body *::before, html body *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* Colores que elige el usuario (valores, grupos, equipos) usados como TEXTO: se mezclan
   al 50 % con la tinta del tema para llegar a 4.5:1 en claro y en oscuro (peor caso de
   la paleta que ofrece la UI: 4.74:1 en claro y 5.49:1 en oscuro). El color puro se
   conserva en bordes y marcas. Uso: class="uc-texto" style="--uc:#22c55e". */
html body .uc-texto { color: color-mix(in oklab, var(--uc, var(--vy-acento)) 50%, var(--vy-tinta)); }