:root {
  color-scheme: light;
  --tenant-primary: #3157D5;
  --tenant-primary-hover: #2B4CBD;
  --tenant-primary-subtle: #E9EDFB;
  --tenant-primary-border: #B8C3EE;
  --tenant-on-primary: #FFFFFF;
  --tenant-secondary: #12233F;
  --tenant-secondary-hover: #293950;
  --tenant-secondary-subtle: #ECEEF1;
  --tenant-on-secondary: #FFFFFF;
  --color-canvas: #F4F6FA;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FEFEFF;
  --color-text: #172033;
  --color-text-muted: #5D6878;
  --color-border: #D8DEE8;
  --color-link: #2447B8;
  --color-focus: #3157D5;
  --color-success: #1F8B4C;
  --color-warning: #A66700;
  --color-error: #B42318;
  --color-info: #2563EB;
  --color-on-success: #FFFFFF;
  --color-on-warning: #FFFFFF;
  --color-on-error: #FFFFFF;
  --color-on-info: #FFFFFF;

  --font-ui: "Open Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-data: "Open Sans", ui-sans-serif, system-ui, sans-serif;
  --type-xs: 0.75rem;
  --type-sm: 0.8125rem;
  --type-md: 0.875rem;
  --type-lg: 1rem;
  --type-xl: 1.25rem;
  --type-2xl: 1.5rem;
  --type-3xl: 2rem;
  --type-4xl: 3rem;
  --type-4xl: 3rem;
  --type-4xl: 3rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  --radius-edge: 0.125rem;
  --radius-compact: 0.25rem;
  --radius-edge: 0.125rem;
  --radius-compact: 0.25rem;
  --radius-edge: 0.125rem;
  --radius-compact: 0.25rem;
  --radius-control: 0.625rem;
  --radius-surface: 0.875rem;
  --radius-dialog: 1rem;
  --radius-pill: 999px;

  --shadow-low: 0 6px 20px rgba(18, 35, 63, 0.07);
  --shadow-medium: 0 14px 38px rgba(18, 35, 63, 0.11);
  --shadow-high: 0 24px 64px rgba(18, 35, 63, 0.16);
  --duration-fast: 150ms;
  --duration-standard: 210ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Aliases temporales para las capas existentes. */
  --brand-primary: var(--tenant-primary);
  --brand-secondary: var(--tenant-secondary);
  --brand-bg: var(--color-canvas);
  --brand-surface: var(--color-surface);
  --brand-on-primary: var(--tenant-on-primary);
  --brand-text: var(--color-text);
  --brand-link: var(--color-link);
  --brand-button: var(--tenant-primary);
  --yellow: var(--tenant-primary);
  --yellow-hover: var(--tenant-primary-hover);
  --black: var(--tenant-secondary);
  --white: var(--color-surface);
  --bg: var(--color-canvas);
  --text: var(--color-text-muted);
  --border: var(--color-border);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --error: var(--color-error);
  --info: var(--color-info);
  --shadow: var(--shadow-medium);
}

html {
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-ui);
}

body {
  color: var(--color-text);
  font-family: var(--font-ui);
}

body:not(.login-page) {
  background: var(--color-canvas);
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-ui);
}

::selection {
  color: var(--tenant-on-primary);
  background: var(--tenant-primary);
}

:where(a) {
  color: var(--color-link);
}

:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-focus) 34%, transparent);
  outline-offset: 2px;
}

:where(input, select, textarea) {
  border-color: var(--color-border);
  color: var(--color-text);
  background: var(--color-surface);
}

:where(input, select, textarea):focus-visible {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 1px var(--color-focus);
}

:where(input, textarea)::placeholder {
  color: color-mix(in srgb, var(--color-text-muted) 74%, transparent);
}

.sidebar {
  color: var(--tenant-on-secondary);
  background: var(--tenant-secondary);
  border-right-color: color-mix(in srgb, var(--tenant-on-secondary) 14%, transparent);
}

.brand-mark {
  color: var(--tenant-on-primary);
  background: var(--tenant-primary);
}

.nav-item {
  color: color-mix(in srgb, var(--tenant-on-secondary) 84%, transparent);
}

.nav-item:hover,
.nav-item.active,
.nav-item[aria-current="page"] {
  color: var(--tenant-on-primary);
  background: var(--tenant-primary);
}

.nav-group > summary {
  color: color-mix(in srgb, var(--tenant-on-secondary) 72%, transparent);
}

.btn,
.tab,
.nav-item {
  border-radius: var(--radius-control);
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.btn.primary,
.tab.active {
  color: var(--tenant-on-primary);
  background: var(--tenant-primary);
  border-color: var(--tenant-primary);
}

.btn.primary:hover,
.tab.active:hover {
  color: var(--tenant-on-primary);
  background: var(--tenant-primary-hover);
  border-color: var(--tenant-primary-hover);
}

.btn.dark {
  color: var(--tenant-on-secondary);
  background: var(--tenant-secondary);
}

.btn.dark:hover {
  color: var(--tenant-on-secondary);
  background: var(--tenant-secondary-hover);
}

.btn.ghost,
.tab:not(.active) {
  color: var(--color-text);
  background: var(--color-surface);
  border-color: var(--color-border);
}

.btn[disabled],
.tab[disabled],
.nav-item[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}

.panel,
.table-wrap,
.filters-panel,
.empty-state,
.catalog-filters,
.dialog-card,
.catalog-card,
.topbar {
  color: var(--color-text);
  background: var(--color-surface);
  border-color: var(--color-border);
}

.panel,
.topbar,
.dialog-card {
  box-shadow: var(--shadow-low);
}

.badge.success,
.status-pill.success {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
}

.badge.warning,
.status-pill.warning {
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 13%, var(--color-surface));
}

.badge.error,
.status-pill.error {
  color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 11%, var(--color-surface));
}

.badge.info,
.status-pill.info {
  color: var(--color-info);
  background: color-mix(in srgb, var(--color-info) 11%, var(--color-surface));
}

.badge.neutral,
.status-pill.neutral {
  color: var(--color-text-muted);
  background: var(--tenant-secondary-subtle);
}

.theme-accent-surface {
  color: var(--tenant-on-primary);
  background: var(--tenant-primary);
}

.theme-secondary-surface {
  color: var(--tenant-on-secondary);
  background: var(--tenant-secondary);
}

.theme-subtle-surface {
  color: var(--color-text);
  background: var(--tenant-primary-subtle);
  border: 1px solid var(--tenant-primary-border);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid CanvasText;
  }
}

/* === Responsive hardening global · RC candidate 2026-09-11 ===
   Capa exclusivamente visual y reversible. No modifica datos ni logica.
   Objetivo: evitar desbordes de KPIs, importes, tarjetas y encabezados
   ante resoluciones menores, sidebar visible o zoom elevado. */
:root {
  --ui-fluid-kpi-lg: clamp(1.35rem, 1rem + 1.15vw, 2.15rem);
  --ui-fluid-kpi-md: clamp(1.08rem, 0.92rem + 0.65vw, 1.55rem);
  --ui-fluid-title: clamp(1.25rem, 1rem + 0.85vw, 2rem);
  --ui-fluid-section: clamp(1.08rem, 0.98rem + 0.42vw, 1.4rem);
}

:where(
  .main,
  .content-section,
  .kpi-card,
  .panel,
  .catalog-card,
  .filters-panel,
  .dialog-card,
  .organization-company-card,
  .organization-company-metric,
  .organization-executive-card,
  .organization-widget,
  .controller-panel,
  .controller-total,
  .controller-decision,
  .controller-tax,
  .glass-panel,
  .report-card
) {
  min-width: 0;
  max-width: 100%;
}

:where(
  .kpi-grid,
  .organization-kpi-grid,
  .organization-company-grid,
  .controller-composition,
  .controller-materiality,
  .controller-core-grid,
  .controller-secondary,
  .chart-grid,
  .detail-grid,
  .catalog-meta
) > * {
  min-width: 0;
}

:where(.section-head, .topbar, .organization-section-heading, .controller-heading, .controller-panel > header, .controller-providers > header) > * {
  min-width: 0;
}

:where(.section-head h2, .organization-section-heading h3, .controller-heading h2) {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: var(--ui-fluid-title);
}

:where(input, select, textarea, button) {
  min-width: 0;
}

.table-wrap {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
}

.kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.organization-company-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.kpi-card {
  container-name: cfdi-kpi;
  container-type: inline-size;
}

.organization-company-metric {
  container-name: organization-metric;
  container-type: inline-size;
}

.controller-total,
.controller-decision,
.controller-tax {
  container-name: controller-metric;
  container-type: inline-size;
}

:where(.kpi-card > strong, .kpi-card .kpi-value, .kpi-content > strong) {
  max-width: 100%;
  font-size: var(--ui-fluid-kpi-lg);
  line-height: 1.08;
  letter-spacing: -0.025em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

:where(
  .organization-kpi strong,
  .organization-executive-card strong,
  .organization-company-metric strong,
  .controller-total strong,
  .controller-decision strong,
  .controller-tax strong
) {
  max-width: 100%;
  font-size: var(--ui-fluid-kpi-md);
  line-height: 1.08;
  letter-spacing: -0.025em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

:where(
  .organization-company-title,
  .organization-company-title h4,
  .organization-company-title p,
  .controller-provider-table td:first-child,
  .controller-provider-table th:first-child,
  .report-card,
  .catalog-card,
  .panel
) {
  overflow-wrap: anywhere;
}

@container cfdi-kpi (max-width: 280px) {
  :where(.kpi-card > strong, .kpi-card .kpi-value, .kpi-content > strong) {
    font-size: clamp(1.05rem, 8cqi, 1.45rem);
  }
}

@container cfdi-kpi (max-width: 190px) {
  :where(.kpi-card > strong, .kpi-card .kpi-value, .kpi-content > strong) {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@container organization-metric (max-width: 180px) {
  .organization-company-metric strong {
    font-size: clamp(0.95rem, 9cqi, 1.2rem);
  }
}

@container organization-metric (max-width: 130px) {
  .organization-company-metric strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@container controller-metric (max-width: 260px) {
  :where(.controller-total strong, .controller-decision strong, .controller-tax strong) {
    font-size: clamp(1.05rem, 8cqi, 1.5rem);
  }
}

@media (max-width: 1440px) {
  .main {
    padding-inline: clamp(14px, 1.6vw, 24px);
  }

  :where(.kpi-card, .panel, .organization-company-card, .controller-panel) {
    padding-inline: clamp(14px, 1.35vw, 22px);
  }
}

@media (max-width: 1100px) {
  .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  }

  :where(.section-head, .organization-section-heading, .controller-heading, .controller-panel > header, .controller-providers > header) {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 680px) {
  :where(input, select, textarea) {
    font-size: 1rem;
  }

  .kpi-grid,
  .organization-company-grid {
    grid-template-columns: 1fr;
  }
}