/* ERPY · Compatibilidad visual del sistema, 21-sep-2026.
   Una misma anatomía para el código histórico y los componentes ty-*. Se carga después de
   styles.css: aquel conserva la maquetación de negocio; aquí viven los controles compartidos.
   Las superficies siempre declaran tinta Y fondo. Los ámbitos locales reciben su paleta en
   tokens.css, incluso antes de que JavaScript abra o normalice un diálogo. */

/* Los alias antiguos resuelven en CADA superficie, no en el padre claro. */
:root,
.app-root,
[data-tema-local],
html :is(.ty-dialogo-superficie, .ty-dialogo) .command-create-card,
:is(.ty-dialogo, .ty-dialogo-superficie, .wo-modal, .po-modal, .app-sheet, .bq-modal, .modal-card, .universal-inspector, .command-palette),
:is(.workorder-form-section, .quote-line-card, .quote-milestone-row, .quote-billing-card, .quote-total-card, .quote-equipment-checklist, .quote-material-flow-card) {
  --ink: var(--ty-tinta);
  --text-primary: var(--ty-tinta);
  --muted: var(--ty-tinta-media);
  --text-secondary: var(--ty-tinta-media);
  --text-muted: var(--ty-tinta-suave);
  --typy-text: var(--ty-tinta);
  --typy-text-muted: var(--ty-tinta-media);
  --typy-text-soft: var(--ty-tinta-suave);
  --line: var(--ty-raya);
  --border-soft: var(--ty-raya);
  --border-medium: var(--ty-raya-fuerte);
  --typy-border: var(--ty-raya);
  --typy-border-strong: var(--ty-raya-fuerte);
  --panel: var(--ty-panel);
  --panel-solid: var(--ty-panel);
  --panel-soft: var(--ty-panel-alto);
  --surface-muted: var(--ty-panel-hondo);
  --surface-warm: var(--ty-panel-alto);
  --typy-surface: var(--ty-panel);
  --typy-surface-soft: var(--ty-panel-alto);
  --typy-surface-muted: var(--ty-panel-hondo);
  --typy-surface-raised: var(--ty-panel-alto);
  --brand-strong: var(--ty-marca-tinta);
  --brand-soft: var(--ty-marca-velo);
  --typy-copper-dark: var(--ty-marca-tinta);
  --cr-ink: var(--ty-tinta-media);
  --cr-ink-soft: var(--ty-tinta-media);
  --cr-ink-strong: var(--ty-tinta);
  --cr-orange-ink: var(--ty-marca-tinta);
  --cr-orange-deep: var(--ty-marca-tinta);
  --cr-sep: var(--ty-raya);
  --cr-pill-bg: var(--ty-panel);
  --cr-glass: linear-gradient(var(--ty-panel), var(--ty-panel));
  --cr-hero-wash: linear-gradient(var(--ty-panel), var(--ty-panel-alto));
  --cr-filter-wash: linear-gradient(var(--ty-panel), var(--ty-panel));
  --cr-kpi-wash: linear-gradient(var(--ty-panel), var(--ty-panel-alto));
  --cr-hairline: 1px solid var(--ty-raya);
  --cr-hairline-color: var(--ty-raya);
  --cr-inset-border: 1px solid var(--ty-raya);
  --cr-lift: var(--ty-s-1);
  --cr-lift-soft: var(--ty-s-1);
  --cr-lift-card: var(--ty-s-1);
  --cr-r-hero: var(--ty-r-4);
  --cr-r-panel: var(--ty-r-3);
  --cr-r-filter: var(--ty-r-3);
  --cr-r-card: var(--ty-r-3);
  --cr-r-field: var(--ty-r-2);
  --cr-t-sent-ink: var(--ty-enviado-tinta);
  --cr-t-neutral-ink: var(--ty-tinta-media);
  --cr-t-info-ink: var(--ty-info-tinta);
  --cr-t-success-ink: var(--ty-exito-tinta);
  --cr-t-warning-ink: var(--ty-aviso-tinta);
  --cr-t-danger-ink: var(--ty-peligro-tinta);
  color: var(--ty-tinta);
}
:root { color-scheme: light; }
:is(.wo-modal, .po-modal, .app-sheet, .bq-modal, .modal-card, [data-tema-local="oscuro"]) { color-scheme: dark; }
:root[data-tema="oscuro"] { color-scheme: dark; }

/* Botones: una sola jerarquía, con estados legibles también al pasar el ratón. */
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(.btn, .ty-btn),
html :is(.btn, .ty-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ty-e-2);
  min-height: var(--ty-control);
  max-width: 100%;
  padding: var(--ty-e-2) var(--ty-e-4);
  border: 1px solid var(--ty-raya-fuerte);
  border-radius: var(--ty-r-2);
  background-color: var(--ty-panel-alto);
  background-image: none;
  color: var(--ty-tinta);
  font-family: var(--ty-fuente);
  font-size: var(--ty-t-base);
  font-weight: var(--ty-peso-fuerte);
  line-height: var(--ty-linea-normal);
  text-decoration: none;
  -webkit-text-fill-color: currentColor;
  white-space: normal;
  text-align: center;
  box-shadow: none;
  transform: none;
  touch-action: manipulation;
  transition: background-color var(--ty-v-rapida), border-color var(--ty-v-rapida), color var(--ty-v-rapida);
}
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(.btn, .ty-btn):hover {
  background-color: var(--ty-panel-hondo);
  border-color: var(--ty-tinta-suave);
  color: var(--ty-tinta);
  box-shadow: none;
  transform: none;
}
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(.btn.primary, .ty-btn--principal) {
  background-color: var(--ty-marca-accion);
  background-image: none;
  border-color: var(--ty-marca-accion);
  color: var(--ty-sobre-marca);
  box-shadow: none;
}
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(.btn.primary, .ty-btn--principal):hover {
  background-color: var(--ty-marca-accion-fuerte);
  border-color: var(--ty-marca-accion-fuerte);
  color: var(--ty-sobre-marca);
}
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(.btn.ghost, .ty-btn--fantasma) {
  background-color: transparent;
  border-color: transparent;
  color: var(--ty-tinta-media);
}
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(.btn.ghost, .ty-btn--fantasma):hover {
  background-color: var(--ty-panel-hondo);
  color: var(--ty-tinta);
}
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(.btn.danger, .ty-btn--destructivo) {
  background-color: var(--ty-peligro-fondo);
  border-color: var(--ty-peligro-borde);
  color: var(--ty-peligro-tinta);
}
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(.btn.danger, .ty-btn--destructivo):hover { border-color: var(--ty-peligro-tinta); }
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(.btn, .ty-btn):is(:disabled, [aria-disabled="true"]) {
  background-color: var(--ty-panel-hondo);
  background-image: none;
  color: var(--ty-tinta-suave);
  border-color: var(--ty-raya);
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(.btn.small, .btn.compact, .ty-btn--compacto) {
  min-height: 34px;
  border-radius: var(--ty-r-2);
  padding: var(--ty-e-1) var(--ty-e-3);
  font-size: var(--ty-t-menor);
}
:is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ty-marca-tinta);
  outline-offset: 3px;
}

/* Una geometría de formulario para todos los módulos, sin modificar rejillas de negocio. */
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"])), select, textarea) {
  min-height: var(--ty-control);
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--ty-raya-fuerte);
  border-radius: var(--ty-r-2);
  padding: var(--ty-e-2) var(--ty-e-3);
  background-color: var(--ty-panel-hondo);
  background-image: none;
  color: var(--ty-tinta);
  -webkit-text-fill-color: var(--ty-tinta);
  caret-color: var(--ty-tinta);
  font-size: var(--ty-t-base);
  line-height: var(--ty-linea-normal);
  box-shadow: none;
}
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(input, select, textarea):focus {
  border-color: var(--ty-marca-tinta);
  background-color: var(--ty-panel);
  color: var(--ty-tinta);
  -webkit-text-fill-color: var(--ty-tinta);
}
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(input, textarea)::placeholder {
  color: var(--ty-tinta-suave);
  -webkit-text-fill-color: var(--ty-tinta-suave);
  opacity: 1;
}
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(input, textarea):autofill {
  -webkit-text-fill-color: var(--ty-tinta);
  box-shadow: 0 0 0 1000px var(--ty-panel-hondo) inset;
}
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(input, select, textarea):disabled {
  color: var(--ty-tinta-suave);
  -webkit-text-fill-color: var(--ty-tinta-suave);
  background-color: var(--ty-panel-hondo);
  opacity: 1;
}
html input:is([type="checkbox"], [type="radio"]) { accent-color: var(--ty-marca-accion); }

/* Todos los contenedores emergentes comparten marco, velo, título y pie. */
html :is(.wo-modal, .po-modal, .app-sheet, .bq-modal, .modal-card, .universal-inspector, .command-palette, .ty-dialogo) {
  border: 1px solid var(--ty-raya);
  border-radius: var(--ty-r-4);
  background-color: var(--ty-panel);
  background-image: none;
  color: var(--ty-tinta);
  box-shadow: var(--ty-s-4);
  max-height: calc(100dvh - 2 * var(--ty-e-5));
  overscroll-behavior: contain;
  font-family: var(--ty-fuente);
  font-size: var(--ty-t-base);
  line-height: var(--ty-linea-normal);
}
html :is(.wo-modal, .po-modal, .app-sheet, .bq-modal, .modal-card, .universal-inspector) {
  width: var(--ty-dialogo-xl);
  max-width: calc(100vw - 2 * var(--ty-e-5));
  margin: 0;
}
html :is(.modal-overlay, .workorder-detail-overlay, .po-overlay, .app-sheet-overlay, .bq-overlay, .inspector-backdrop, .command-palette-overlay) {
  background-color: var(--ty-velo);
  background-image: none;
  backdrop-filter: blur(4px);
  margin: 0;
  padding: var(--ty-e-5);
  overscroll-behavior: contain;
}
.ty-dialogo::backdrop { background-color: var(--ty-velo); backdrop-filter: blur(4px); }
html :is(.ty-dialogo-cabecera-comun, .ty-dialogo-cabeza, .app-sheet-head, .bq-modal-head, .po-modal .pc-detail-h, .modal-card > .panel-head, .wo-modal .detail-hero) {
  padding: var(--ty-e-5);
  padding-right: calc(var(--ty-e-5) + 52px);
  background-color: var(--ty-panel);
  background-image: none;
  border-bottom: 1px solid var(--ty-raya);
  border-radius: 0;
  color: var(--ty-tinta);
  box-shadow: none;
}
html :is(.ty-dialogo-cabecera-comun, .ty-dialogo-cabeza, .app-sheet-head, .bq-modal-head, .pc-detail-h, .wo-modal .detail-hero) :is(h2, h3, .bq-modal-num) {
  font-size: var(--ty-t-titulo);
  line-height: var(--ty-linea-apretada);
  font-weight: var(--ty-peso-maximo);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ty-tinta);
  overflow-wrap: anywhere;
}
html :is(.ty-dialogo-cabecera-comun, .ty-dialogo-cabeza, .app-sheet-head, .bq-modal-head, .pc-detail-h, .wo-modal .detail-hero) p {
  color: var(--ty-tinta-media);
  line-height: var(--ty-linea-suelta);
}
html :is(.ty-dialogo-cerrar, .wo-modal-close, .po-modal-close, .app-sheet-close, .bq-modal-close) {
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--ty-raya-fuerte);
  border-radius: var(--ty-r-2);
  background-color: var(--ty-panel-alto);
  color: var(--ty-tinta);
  transform: none;
  box-shadow: none;
  transition: background-color var(--ty-v-rapida);
}
html :is(.ty-dialogo-cerrar, .wo-modal-close, .po-modal-close, .app-sheet-close, .bq-modal-close):hover {
  background-color: var(--ty-panel-hondo);
  color: var(--ty-tinta);
  transform: none;
}
html :is(.ty-dialogo-cuerpo, .app-sheet-body, .bq-modal-body, .wo-modal-content) {
  padding: var(--ty-e-5);
  min-height: 0;
  overscroll-behavior: contain;
  scroll-padding-block: var(--ty-e-5);
}
html :is(.ty-dialogo-pie-comun, .ty-dialogo-pie, .app-sheet-actions, .bq-modal-actions, .po-modal .pc-detail-foot, .si-detail > .form-actions) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ty-e-3);
  padding: var(--ty-e-4) var(--ty-e-5) max(var(--ty-e-4), env(safe-area-inset-bottom));
  background-color: var(--ty-panel);
  background-image: none;
  border-top: 1px solid var(--ty-raya);
  color: var(--ty-tinta);
  box-shadow: none;
}
html :is(.ty-dialogo-superficie, .ty-dialogo) :is(.panel, .workorder-form-section, .quote-line-card, .quote-billing-card, .quote-total-card, .quote-equipment-checklist, .quote-material-flow-card, .quote-milestone-row) {
  border-color: var(--ty-raya);
  border-radius: var(--ty-r-3);
  background-color: var(--ty-panel-alto);
  background-image: none;
  color: var(--ty-tinta);
  box-shadow: none;
}
html :is(.ty-dialogo-superficie, .ty-dialogo) :is(.muted, .section-kicker, .bq-modal-eyebrow, .bq-modal-field > span, .section-header-v2 p, .panel-head p, .detail-row > span, td small) {
  color: var(--ty-tinta-media);
}
html :is(.ty-dialogo-superficie, .ty-dialogo) :is(.eyebrow, .section-header-v2 h3) { color: var(--ty-marca-tinta); }
html :is(.ty-dialogo-superficie, .ty-dialogo) :is(.bq-modal-field strong, .ops-empty-state strong) { color: var(--ty-tinta); }
html :is(.ty-dialogo-superficie, .ty-dialogo) .data-table thead th {
  background-color: var(--ty-panel-hondo);
  color: var(--ty-tinta-media);
  border-color: var(--ty-raya);
}
html :is(.ty-dialogo-superficie, .ty-dialogo) .data-table td { border-color: var(--ty-raya); }
html :is(.ty-dialogo-superficie, .ty-dialogo) :is(.action-menu-pop, .saved-view-bar-v2) {
  background-color: var(--ty-panel-alto);
  color: var(--ty-tinta);
  border-color: var(--ty-raya);
}

/* Estado siempre expresado con la misma pareja tinta/fondo, incluso dentro de formularios. */
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(.status-pill, .pill, .ty-etiqueta) {
  border-color: var(--ty-raya);
  background-color: var(--ty-panel-hondo);
  color: var(--ty-tinta-media);
  font-size: var(--ty-t-micro);
  font-weight: var(--ty-peso-fuerte);
  line-height: var(--ty-linea-normal);
}
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(.status-pill.success, .pill.success, .ty-etiqueta--exito) { background-color: var(--ty-exito-fondo); color: var(--ty-exito-tinta); border-color: var(--ty-exito-borde); }
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(.status-pill.warning, .pill.warning, .ty-etiqueta--aviso) { background-color: var(--ty-aviso-fondo); color: var(--ty-aviso-tinta); border-color: var(--ty-aviso-borde); }
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(.status-pill.danger, .pill.danger, .ty-etiqueta--peligro) { background-color: var(--ty-peligro-fondo); color: var(--ty-peligro-tinta); border-color: var(--ty-peligro-borde); }
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(.status-pill.info, .pill.info, .ty-etiqueta--info) { background-color: var(--ty-info-fondo); color: var(--ty-info-tinta); border-color: var(--ty-info-borde); }

/* Secciones: misma escala de títulos, superficies y separación; se conservan sus columnas. */
html :is(.page-intro-v2, .customer-command-hero, .cr-hero) {
  border-radius: var(--ty-r-4);
  padding: var(--ty-e-5);
  border-color: var(--ty-raya);
  box-shadow: var(--ty-s-1);
}
html :is(.page-intro-v2, .customer-command-hero, .cr-hero) :is(h1, h2) {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: var(--ty-linea-apretada);
  font-weight: var(--ty-peso-maximo);
}
html :is(.filter-bar-v2, .ops-shell .workspace > .panel, .ty-panel) { border-radius: var(--ty-r-3); }
html :is(.data-table, .ty-tabla) { font-size: var(--ty-t-menor); }
html :is(.data-table, .ty-tabla) :is(th, td) { line-height: var(--ty-linea-normal); }
html :is(.kpi-card-v3, .cr-kpi, .customer-command-metric) { border-radius: var(--ty-r-3); box-shadow: var(--ty-s-1); }
html :is(.detail-row, .data-table td, .ty-tabla td) { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  html :is(.wo-modal, .po-modal, .app-sheet, .bq-modal, .modal-card, .universal-inspector, .command-palette, .ty-dialogo) {
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    border-radius: 0;
    margin: 0;
  }
  html :is(.modal-overlay, .workorder-detail-overlay, .po-overlay, .app-sheet-overlay, .bq-overlay, .inspector-backdrop, .command-palette-overlay) { padding: 0; }
  html :is(.ty-dialogo-cabecera-comun, .ty-dialogo-cabeza, .app-sheet-head, .bq-modal-head, .po-modal .pc-detail-h, .wo-modal .detail-hero) { padding: var(--ty-e-4); padding-right: 64px; }
  html :is(.ty-dialogo-cuerpo, .app-sheet-body, .bq-modal-body, .wo-modal-content) { padding: var(--ty-e-4); }
  html :is(.ty-dialogo-pie-comun, .ty-dialogo-pie, .app-sheet-actions, .bq-modal-actions, .po-modal .pc-detail-foot, .si-detail > .form-actions) { padding-inline: var(--ty-e-4); gap: var(--ty-e-2); }
  html :is(.app-root, .ty-dialogo) :is(.ty-dialogo-pie-comun, .ty-dialogo-pie, .app-sheet-actions, .bq-modal-actions, .pc-detail-foot) :is(.btn, .ty-btn) { flex: 1 1 140px; min-height: 44px; }
  html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(input, select, textarea) { font-size: var(--ty-t-medio); }
}
@media (prefers-reduced-motion: reduce) {
  html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(.btn, .ty-btn, .ty-dialogo-cerrar, .wo-modal-close, .po-modal-close) { transition: none; animation: none; }
}

/* Títulos auxiliares e identidad: comparten la tinta accesible, no el naranja decorativo. */
html :is(.rail-title, .section-header-v2 h3, .panel-head h3) { color: var(--ty-marca-tinta); }
html .topbar-user-button .avatar { background-color: var(--ty-marca-accion); background-image: none; color: var(--ty-sobre-marca); }

/* Formularios y asistentes antes pintados con una paleta clara fija dentro de una ficha oscura. */
html :is(.ty-dialogo-superficie, .ty-dialogo) :is(.command-create-card, .agenda-visit-block, .agenda-visit-helper-strip, .agenda-visit-summary-grid article, .agenda-visit-reference-preview, .workorder-flow-nav, .quote-flow-nav) {
  background-color: var(--ty-panel-alto);
  background-image: none;
  color: var(--ty-tinta);
  border-color: var(--ty-raya);
  border-radius: var(--ty-r-3);
  box-shadow: none;
}
html :is(.ty-dialogo-superficie, .ty-dialogo) :is(.command-create-card, .agenda-visit-block, .agenda-visit-summary-grid, .agenda-visit-reference-preview) :is(h3, h4, strong) { color: var(--ty-tinta); }
html :is(.ty-dialogo-superficie, .ty-dialogo) :is(.field > label, .field-hint, .field small, .agenda-visit-helper-strip, .agenda-visit-summary-grid span, .agenda-visit-summary-grid small, .agenda-visit-reference-preview span) { color: var(--ty-tinta-media); }
html :is(.ty-dialogo-superficie, .ty-dialogo) .agenda-visit-helper-strip strong { color: var(--ty-marca-tinta); }
html :is(.ty-dialogo-superficie, .ty-dialogo) .command-create-card > .section-header-v2 {
  background-color: var(--ty-panel);
  background-image: none;
  border-color: var(--ty-raya);
  color: var(--ty-tinta);
}
html :is(.ty-dialogo-superficie, .ty-dialogo) :is(.form-actions, .quote-step-actions, form > .command-bar) {
  background-color: var(--ty-panel);
  background-image: none;
  color: var(--ty-tinta);
  border-color: var(--ty-raya);
  border-radius: 0;
  box-shadow: none;
}
html :is(.ty-dialogo-superficie, .ty-dialogo) .flow-step {
  background-color: var(--ty-panel-alto);
  color: var(--ty-tinta-media);
  border-color: var(--ty-raya);
  border-radius: var(--ty-r-2);
  transform: none;
}
html :is(.ty-dialogo-superficie, .ty-dialogo) .flow-step:is(.active, :hover) {
  background-color: var(--ty-marca-velo);
  color: var(--ty-marca-tinta);
  border-color: var(--ty-marca-tinta);
}
html :is(.ty-dialogo-superficie, .ty-dialogo) .flow-step span { background-color: var(--ty-marca-accion); color: var(--ty-sobre-marca); }
html .help-tip { background-color: var(--ty-panel-hondo); color: var(--ty-tinta-media); border-color: var(--ty-raya-fuerte); }
html :is(.ty-dialogo-superficie, .ty-dialogo) .notice {
  background-color: var(--ty-exito-fondo);
  background-image: none;
  border-color: var(--ty-exito-borde);
  color: var(--ty-exito-tinta);
}
html :is(.ty-dialogo-superficie, .ty-dialogo) .notice :is(p, strong, span) { color: inherit; }
html :is(.ty-dialogo-superficie, .ty-dialogo) .si-danger { color: var(--ty-peligro-tinta); }
html :is(.ty-dialogo-superficie, .ty-dialogo) .warning { color: var(--ty-aviso-tinta); }
html :is(.ty-dialogo-superficie, .ty-dialogo) .bq-status-tag.tag-issues { color: var(--ty-aviso-tinta); background-color: var(--ty-aviso-fondo); border-color: var(--ty-aviso-borde); }
html :is(.wo-step-meta, .wo-step-date, .wo-summary-card > span, .wo-kpi > span) { color: var(--ty-tinta-media); }
html .wo-step .wo-step-node { background-color: var(--ty-panel-hondo); background-image: none; color: var(--ty-tinta-media); border-color: var(--ty-raya-fuerte); }
html .wo-step.done .wo-step-node { background-color: var(--ty-exito-fondo); color: var(--ty-exito-tinta); border-color: var(--ty-exito-borde); }
html .wo-step.active .wo-step-node { background-image: none; background-color: var(--ty-marca-accion); color: var(--ty-sobre-marca); border-color: var(--ty-marca-accion); box-shadow: none; }
html .ty-dialogo-cerrar-icono { padding: 0; width: 40px; height: 40px; flex: 0 0 40px; }
/* Un diálogo enfocado es una superficie de lectura. El anillo se conserva en sus controles. */
html .ty-dialogo-superficie:focus { outline: none; }
html .universal-inspector { margin: auto; }
html .universal-inspector .inspector-head { justify-content: space-between; align-items: center; }
html .universal-inspector .inspector-head h2 { margin: 0; font-size: var(--ty-t-titulo); }
html .universal-inspector .detail-row strong { font-size: var(--ty-t-base); line-height: var(--ty-linea-normal); }
html .ty-dialogo-cabeza { padding-right: var(--ty-e-5); }
html .app-sheet-body > .command-create-card { margin: 0; padding: 0; border: 0; box-shadow: none; }
@media (max-width: 640px) {
  html .universal-inspector { margin: 0; }
  html .ty-dialogo-cabeza { padding-right: var(--ty-e-4); }
  html .ty-dialogo-cuerpo .ty-dialogo-pie { margin-inline: calc(-1 * var(--ty-e-4)); margin-bottom: calc(-1 * var(--ty-e-4)); }
  html :is(.agenda-schedule-grid, .agenda-visit-grid, .agenda-visit-summary-grid) { grid-template-columns: minmax(0, 1fr); }
  html .agenda-visit-helper-strip { flex-direction: column; align-items: flex-start; }
  html .agenda-cc :is(.cc-content, .cc-main, .cc-cal, .cc-filters) { min-width: 0; max-width: 100%; }
  html .agenda-cc .cc-filters { grid-template-columns: minmax(0, 1fr); }
  html .agenda-cc .cc-head { flex-wrap: wrap; min-width: 0; }
  html .agenda-cc .cc-cal { overflow-x: auto; }
}

/* Metadatos de sección: secundarios legibles, incluidos ceros y referencias pendientes. */
html :is(.rail-group-label, .rail-subtitle, .labor-kpi > small, .filter-result-count) { color: var(--ty-tinta-media); }
html .agenda-cc { --cc-faint: var(--ty-tinta-media); --cc-blue: var(--ty-info-tinta); }
html .agenda-cc .cc-kpi span { opacity: 1; }
html .tariff-section-tabs button { color: var(--ty-tinta-media); }
html .tariff-section-tabs button.active { color: var(--ty-marca-tinta); background-color: var(--ty-marca-velo); }
html .command-module-accountingExport h2 { color: var(--ty-marca-tinta); }
html .ty-dialogo-superficie .invoice-amount.total { background-color: var(--ty-marca-accion); background-image: none; color: var(--ty-sobre-marca); }
html .ty-dialogo-superficie .invoice-amount.total :is(span, strong) { color: var(--ty-sobre-marca); }
html .wo-modal :is(.wo-summary-card, .wo-summary-tile, .workorder-summary-card, .wo-flow-side .detail-row) > span { color: var(--ty-tinta-media); }

html .ty-dialogo-superficie .customer-editor-panel > .panel-head {
  background-color: var(--ty-panel);
  background-image: none;
  border-color: var(--ty-raya);
}
html .ty-dialogo-superficie .wo-modal-content .workorder-summary-card > span,
html .ty-dialogo-superficie .wo-fact span { color: var(--ty-tinta-media); }

/* Superficie explícita también fuera del árbol principal (componentes embebidos). */
html .panel[data-tema-local] { background-color: var(--ty-panel); background-image: none; color: var(--ty-tinta); }

/* Los selectores de fecha usan la misma superficie que el formulario que los contiene. */
html :is(.date-field-trigger, .month-picker-trigger, .dp-nav, .month-nav, .dp-cell, .month-cell) {
  background-color: var(--ty-panel-hondo);
  background-image: none;
  color: var(--ty-tinta);
  -webkit-text-fill-color: currentColor;
  border-color: var(--ty-raya-fuerte);
  border-radius: var(--ty-r-2);
  min-height: var(--ty-control);
}
html :is(.date-pop, .month-picker-pop) {
  background-color: var(--ty-panel);
  background-image: none;
  color: var(--ty-tinta);
  border-color: var(--ty-raya);
  border-radius: var(--ty-r-3);
  box-shadow: var(--ty-s-3);
}
html .dp-title { color: var(--ty-tinta); }
html :is(.dp-title:hover, .date-field-trigger:hover, .month-picker-trigger:hover, .dp-nav:hover, .month-nav:hover, .dp-cell:hover, .month-cell:hover) { border-color: var(--ty-marca-tinta); }
html :is(.dp-cell, .month-cell).is-selected { opacity: 1; background-color: var(--ty-marca-accion); color: var(--ty-sobre-marca); border-color: var(--ty-marca-accion); }
html .dp-cell.dp-muted:not(.is-selected) { color: var(--ty-tinta-suave); opacity: 1; }
html .flow-step span { background-color: var(--ty-marca-accion); color: var(--ty-sobre-marca); -webkit-text-fill-color: currentColor; }
html .wo-step-node { -webkit-text-fill-color: currentColor; }

/* La máscara antigua recortaba también el total. El hueco es ahora una superficie con texto. */
html .fiscal-donut { mask: none; -webkit-mask: none; }
html .fiscal-donut > span {
  width: 80px;
  height: 80px;
  border-radius: var(--ty-r-pastilla);
  background-color: var(--ty-panel);
  align-content: center;
}


/* Agenda: el calendario conserva días legibles y el desplazamiento queda dentro de él. */
html .agenda-cc .agenda-macsa-upload.btn.primary { color: var(--ty-sobre-marca); }
html .agenda-cc .cc-cal { min-width: 0; overflow-x: auto; }
/* Ocho cabeceras identifican la semana por técnicos; día y vista del técnico no se ensanchan. */
html .agenda-cc .cc-grid:has(> .cc-colh:nth-child(8)) { min-width: 1010px; }
html .agenda-cc .cc-ev :is(.no, .cl, .tm) { overflow-wrap: anywhere; }
html .agenda-cc .cc-ev .tm { opacity: 1; }
html .agenda-cc .cc-focus-actions { flex: 0 1 auto; min-width: 0; max-width: 100%; }
html .agenda-cc .cc-tabs > button { flex: 0 0 auto; }
@media (max-width: 1600px) {
  html .agenda-cc .cc-content { grid-template-columns: minmax(0, 1fr); }
  html .agenda-cc .cc-ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  html .agenda-cc .cc-ops { grid-template-columns: minmax(0, 1fr); }
  html .agenda-cc .cc-focus > div { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
}

/* Ficha de cliente: parejas de campos en escritorio y lectura lineal en móvil. Las notas,
   divisiones de sección y acciones conservan todo el ancho sin alterar otros formularios. */
html .customer-editor-dialog .customer-editor-panel > .customer-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--ty-e-4);
}
html .customer-editor-dialog .customer-form > .wide { grid-column: 1 / -1; }
@media (max-width: 760px) {
  html .customer-editor-dialog .customer-editor-panel > .customer-form { grid-template-columns: minmax(0, 1fr); }
  html .customer-editor-dialog .customer-form > .form-section-title { flex-direction: column; align-items: flex-start; }
}

/* La pestaña actual debe seguir distinguiéndose tras normalizar los botones. */
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(.btn, .ty-btn)[aria-current="page"] {
  background-color: var(--ty-marca-velo);
  color: var(--ty-marca-tinta);
  border-color: var(--ty-marca-tinta);
}
html :is(.app-root, .ty-dialogo, .ty-dialogo-superficie, body) :is(.btn, .ty-btn)[aria-current="page"]:hover {
  background-color: var(--ty-marca-velo);
  color: var(--ty-marca-tinta);
}

/* Las opciones de equipo también forman parte de la superficie de edición del presupuesto. */
html .quote-equipment-checklist .quote-equipment-choice {
  background-color: var(--ty-panel-hondo);
  color: var(--ty-tinta);
  border-color: var(--ty-raya-fuerte);
  border-radius: var(--ty-r-2);
}
html .quote-equipment-choice small { color: var(--ty-tinta-media); }

/* La referencia larga no comprime la etiqueta de estado; las acciones no tapan la ficha. */
html .agenda-visit-form > .section-header-v2 { flex-wrap: wrap; }
html .agenda-visit-form > .section-header-v2 > div { min-width: 0; flex: 1 1 240px; }
html .agenda-visit-form > .section-header-v2 > .status-pill { flex: 0 0 auto; }
html .agenda-visit-form > .command-bar { flex-direction: row; }
html .agenda-visit-form > .command-bar > .btn { width: auto; flex: 0 1 auto; }
@media (max-width: 640px) {
  html .agenda-visit-form > .command-bar > .btn { flex: 1 1 140px; }
}