/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: "Poppins", Arial, Helvetica, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-white: #fff;
    --spacing: 0.25rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.25rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-anc-verde-oscuro: #006937;
    --color-anc-azul: #005CB9;
    --color-anc-celeste: #38A8E0;
    --color-anc-naranja: #E94E1B;
    --color-lienzo: light-dark(#F8F9FA, #121A22);
    --color-superficie: light-dark(#FFFFFF, #1B2733);
    --color-tinta: light-dark(#1B2733, #E7EBF0);
    --color-apagado: light-dark(#5F6B77, #AEB8C2);
    --color-tenue: light-dark(#66727E, #929EAA);
    --color-linea: light-dark(#E7EBF0, #2E3C4A);
    --color-linea-sutil: light-dark(#EEF1F5, #25323F);
    --color-control: light-dark(#87939F, #5F6B77);
    --color-acento: light-dark(#005CB9, #38A8E0);
    --color-acento-verde: light-dark(#006937, #3AAA35);
    --color-acento-morado: light-dark(#78368C, #D0B9D7);
    --shadow-anc: 0 1px 2px rgba(27, 39, 51, .05), 0 10px 26px -20px rgba(27, 39, 51, .28);
    --shadow-anc-pop: 0 18px 50px -12px rgba(27, 39, 51, .35);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .\@container {
    container-type: inline-size;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
  .absolute {
    position: absolute;
  }
  .static {
    position: static;
  }
  .z-50 {
    z-index: 50;
  }
  .col-span-2 {
    grid-column: span 2 / span 2;
  }
  .col-span-3 {
    grid-column: span 3 / span 3;
  }
  .m-0 {
    margin: 0px;
  }
  .m-3 {
    margin: calc(var(--spacing) * 3);
  }
  .mt-0 {
    margin-top: 0px;
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: var(--spacing);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mb-0 {
    margin-bottom: 0px;
  }
  .mb-1 {
    margin-bottom: var(--spacing);
  }
  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .ml-1 {
    margin-left: var(--spacing);
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .h-auto {
    height: auto;
  }
  .min-h-5 {
    min-height: calc(var(--spacing) * 5);
  }
  .w-auto {
    width: auto;
  }
  .w-full {
    width: 100%;
  }
  .max-w-64 {
    max-width: calc(var(--spacing) * 64);
  }
  .min-w-0 {
    min-width: 0px;
  }
  .min-w-\[40rem\] {
    min-width: 40rem;
  }
  .min-w-\[56rem\] {
    min-width: 56rem;
  }
  .min-w-\[60rem\] {
    min-width: 60rem;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .list-none {
    list-style-type: none;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .grid-cols-\[auto_minmax\(0\,1fr\)_auto\] {
    grid-template-columns: auto minmax(0,1fr) auto;
  }
  .grid-cols-\[minmax\(0\,1fr\)_auto\] {
    grid-template-columns: minmax(0,1fr) auto;
  }
  .grid-cols-\[minmax\(110px\,auto\)_1fr\] {
    grid-template-columns: minmax(110px,auto) 1fr;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .self-center {
    align-self: center;
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }
  .border-acento {
    border-color: var(--color-acento);
  }
  .border-linea {
    border-color: var(--color-linea);
  }
  .border-linea-sutil {
    border-color: var(--color-linea-sutil);
  }
  .bg-anc-azul {
    background-color: var(--color-anc-azul);
  }
  .bg-lienzo {
    background-color: var(--color-lienzo);
  }
  .bg-superficie {
    background-color: var(--color-superficie);
  }
  .p-0 {
    padding: 0px;
  }
  .p-1 {
    padding: var(--spacing);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }
  .px-0 {
    padding-inline: 0px;
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .text-center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[1\.75rem\] {
    font-size: 1.75rem;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[13px\] {
    font-size: 13px;
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .whitespace-pre-line {
    white-space: pre-line;
  }
  .text-acento {
    color: var(--color-acento);
  }
  .text-anc-naranja {
    color: var(--color-anc-naranja);
  }
  .text-apagado {
    color: var(--color-apagado);
  }
  .text-tenue {
    color: var(--color-tenue);
  }
  .text-tinta {
    color: var(--color-tinta);
  }
  .text-white {
    color: var(--color-white);
  }
  .underline {
    text-decoration-line: underline;
  }
  .decoration-dotted {
    text-decoration-style: dotted;
  }
  .underline-offset-4 {
    text-underline-offset: 4px;
  }
  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-acento {
    --tw-ring-color: var(--color-acento);
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .hover\:border-acento:hover {
      border-color: var(--color-acento);
    }
    .hover\:underline:hover {
      text-decoration-line: underline;
    }
  }
  .focus\:not-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
  .focus\:absolute:focus {
    position: absolute;
  }
  .focus\:z-50:focus {
    z-index: 50;
  }
  .focus\:m-3:focus {
    margin: calc(var(--spacing) * 3);
  }
  .focus\:rounded-lg:focus {
    border-radius: var(--radius-lg);
  }
  .focus\:bg-anc-azul:focus {
    background-color: var(--color-anc-azul);
  }
  .focus\:px-4:focus {
    padding-inline: calc(var(--spacing) * 4);
  }
  .focus\:py-2:focus {
    padding-block: calc(var(--spacing) * 2);
  }
  .focus\:text-white:focus {
    color: var(--color-white);
  }
  .aria-pressed\:border-acento[aria-pressed="true"] {
    border-color: var(--color-acento);
  }
  .aria-pressed\:ring-2[aria-pressed="true"] {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .aria-pressed\:ring-acento\/25[aria-pressed="true"] {
    --tw-ring-color: color-mix(in srgb, light-dark(#005CB9, #38A8E0) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-acento) 25%, transparent);
    }
  }
  @media (width >= 40rem) {
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (width >= 48rem) {
    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }
    .md\:min-w-0 {
      min-width: 0px;
    }
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (width >= 64rem) {
    .lg\:col-span-2 {
      grid-column: span 2 / span 2;
    }
    .lg\:flex {
      display: flex;
    }
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  @media (width >= 80rem) {
    .xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  @container (width >= 48rem) {
    .\@3xl\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  @container (width >= 56rem) {
    .\@min-\[56rem\]\:min-w-0 {
      min-width: 0px;
    }
  }
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-700.woff2') format('woff2');
}
@layer base {
  html {
    -webkit-text-size-adjust: 100%;
  }
  :root {
    color-scheme: light dark;
  }
  :root[data-tema="claro"] {
    color-scheme: light;
  }
  :root[data-tema="oscuro"] {
    color-scheme: dark;
  }
  :root[data-tema="oscuro"] .fx-solo-claro, :root:not([data-tema="oscuro"]) .fx-solo-oscuro {
    display: none;
  }
  body {
    background-color: var(--color-lienzo);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--color-tinta);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    min-width: 320px;
  }
  button, input, select, textarea {
    font: inherit;
  }
  h1, h2, h3, h4 {
    margin: 0px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--color-acento);
    outline-offset: 2px;
    border-radius: 6px;
  }
  .tnum {
    font-variant-numeric: tabular-nums;
  }
  svg {
    width: 1em;
    height: 1em;
    flex: none;
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      transition-duration: .001ms !important;
    }
  }
}
@layer components {
  .fx-encabezado {
    position: sticky;
    top: 0px;
    z-index: 40;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-linea);
    background-color: var(--color-superficie);
  }
  .fx-encabezado-interno {
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    max-width: 1560px;
    min-height: 64px;
  }
  .fx-marca {
    display: flex;
    min-width: 0px;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .fx-marca img {
    height: calc(var(--spacing) * 10);
    width: auto;
  }
  .fx-marca-texto {
    min-width: 0px;
  }
  .fx-marca-t1 {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .fx-marca-t2 {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    color: var(--color-apagado);
  }
  .fx-encabezado-acciones {
    margin-left: auto;
    display: flex;
    min-width: 0px;
    align-items: center;
    gap: calc(var(--spacing) * 4);
  }
  .fx-pestanas {
    position: sticky;
    z-index: 30;
    overflow-x: auto;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-linea);
    background-color: var(--color-superficie);
    top: 64px;
  }
  .fx-pestanas-interno {
    margin-inline: auto;
    display: flex;
    align-items: stretch;
    gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 6);
    max-width: 1560px;
    scrollbar-width: thin;
    scrollbar-color: #C2CAD3 transparent;
  }
  .fx-pestana {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
    border-color: transparent;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-apagado);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .fx-pestana:hover {
    color: var(--color-acento);
  }
  .fx-pestana[aria-current="page"] {
    border-color: var(--color-acento);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-acento);
  }
  .fx-pestana svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    flex-shrink: 0;
  }
  .fx-pestana-admin {
    margin-left: auto;
  }
  .fx-menu-movil {
    position: sticky;
    z-index: 30;
    display: none;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-linea);
    background-color: var(--color-superficie);
    top: 56px;
  }
  .fx-menu-movil details {
    margin-inline: auto;
  }
  .fx-menu-movil summary {
    display: flex;
    cursor: pointer;
    list-style-type: none;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-acento);
    min-height: 48px;
  }
  .fx-menu-movil summary::-webkit-details-marker {
    display: none;
  }
  .fx-menu-movil-activo {
    display: flex;
    min-width: 0px;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .fx-menu-movil-activo svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .fx-menu-movil-rotulo {
    margin-left: auto;
    font-size: 10px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-tenue);
    text-transform: uppercase;
  }
  .fx-menu-movil-flecha {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
    border-right-style: var(--tw-border-style);
    border-right-width: 2px;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
    border-color: var(--color-apagado);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    transform: translateY(-2px) rotate(45deg);
  }
  .fx-menu-movil details[open] .fx-menu-movil-flecha {
    transform: translateY(2px) rotate(225deg);
  }
  .fx-menu-movil nav {
    display: grid;
    gap: var(--spacing);
    overflow-y: auto;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-linea-sutil);
    padding: calc(var(--spacing) * 2);
    max-height: calc(100dvh - 112px);
  }
  .fx-menu-movil nav a {
    display: flex;
    min-height: calc(var(--spacing) * 11);
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    border-radius: 10px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-apagado);
    text-decoration-line: none;
  }
  .fx-menu-movil nav a:hover {
    background-color: var(--color-lienzo);
    color: var(--color-tinta);
  }
  .fx-menu-movil nav a[aria-current="page"] {
    background-color: var(--color-anc-azul);
    color: var(--color-white);
  }
  .fx-menu-movil nav a svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .fx-menu-movil-grupo {
    padding-inline: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: var(--spacing);
    font-size: 10px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-tenue);
    text-transform: uppercase;
  }
  .fx-lienzo {
    margin-inline: auto;
    padding-inline: calc(var(--spacing) * 6);
    padding-top: calc(var(--spacing) * 5);
    padding-bottom: calc(var(--spacing) * 10);
    max-width: 1560px;
  }
  .fx-titulo-pagina {
    margin-bottom: calc(var(--spacing) * 5);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
  }
  .fx-titulo-pagina h1 {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .fx-titulo-pagina p {
    margin-top: var(--spacing);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-apagado);
  }
  .fx-usuario {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
  }
  .fx-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-anc-azul);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    width: 38px;
    height: 38px;
    font-size: 13px;
  }
  .fx-usuario-nombre {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .fx-usuario-rol {
    font-size: 11px;
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    color: var(--color-apagado);
  }
  .fx-pastilla {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-linea);
    background-color: var(--color-superficie);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-apagado);
  }
  .fx-pastilla-activa {
    color: var(--color-acento);
    border-color: rgba(0, 92, 185, .30);
    background: rgba(0, 92, 185, .10);
  }
  .fx-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: 10px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 3.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    min-height: 40px;
  }
  .fx-btn svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    flex-shrink: 0;
  }
  .fx-btn-sm {
    padding-inline: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    min-height: 34px;
  }
  .fx-btn-primario {
    border-color: var(--color-anc-azul);
    background-color: var(--color-anc-azul);
    color: var(--color-white);
  }
  .fx-btn-primario:hover {
    border-color: var(--color-anc-verde-oscuro);
    background-color: var(--color-anc-verde-oscuro);
    color: var(--color-white);
  }
  .fx-btn-neutro {
    border-color: var(--color-control);
    background-color: var(--color-superficie);
    color: var(--color-apagado);
  }
  .fx-btn-neutro:hover {
    background-color: var(--color-lienzo);
    color: var(--color-tinta);
  }
  .fx-btn-bloque {
    width: 100%;
  }
  .fx-btn:disabled {
    cursor: not-allowed;
    opacity: 50%;
  }
  .fx-tarjeta {
    border-radius: 14px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-linea);
    background-color: var(--color-superficie);
    --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(27, 39, 51, .05)), 0 10px 26px -20px var(--tw-shadow-color, rgba(27, 39, 51, .28));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .fx-tarjeta-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-linea-sutil);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
  }
  .fx-tarjeta-cab h2 {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .fx-tarjeta-cab .sub {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-apagado);
  }
  .fx-tarjeta-cuerpo {
    padding: calc(var(--spacing) * 5);
  }
  .fx-kpi {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3.5);
    overflow: hidden;
    border-radius: 14px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-linea);
    background-color: var(--color-superficie);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(27, 39, 51, .05)), 0 10px 26px -20px var(--tw-shadow-color, rgba(27, 39, 51, .28));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .fx-kpi::before {
    content: "";
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 3px;
    background: #005CB9;
  }
  .fx-kpi:has(.fx-tinte-verde)::before {
    background: #00945E;
  }
  .fx-kpi:has(.fx-tinte-morado)::before {
    background: #78368C;
  }
  .fx-kpi:has(.fx-tinte-celeste)::before {
    background: #38A8E0;
  }
  .fx-kpi-icono {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    width: 42px;
    height: 42px;
  }
  .fx-kpi-icono svg {
    width: 20px;
    height: 20px;
  }
  .fx-kpi-valor {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .fx-kpi-texto {
    margin-top: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-apagado);
  }
  .fx-tinte-azul {
    background: rgba(0, 92, 185, .12);
    color: var(--color-acento);
  }
  .fx-tinte-verde {
    background: rgba(0, 148, 94, .12);
    color: var(--color-acento-verde);
  }
  .fx-tinte-morado {
    background: rgba(120, 54, 140, .12);
    color: var(--color-acento-morado);
  }
  .fx-tinte-celeste {
    background: rgba(56, 168, 224, .15);
    color: var(--color-acento);
  }
  .fx-aviso {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3.5);
    border-radius: 14px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
    border-color: rgba(0, 92, 185, .16);
    background: rgba(0, 92, 185, .06);
  }
  .fx-aviso-icono {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-linea);
    background-color: var(--color-superficie);
    color: var(--color-acento);
    width: 40px;
    height: 40px;
  }
  .fx-aviso-icono svg {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }
  .fx-aviso-texto {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--color-tinta);
  }
  .fx-aviso-texto b {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-acento-verde);
  }
  .fx-alerta {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2.5);
    border-radius: 10px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .fx-alerta svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    flex-shrink: 0;
    margin-top: 1px;
  }
  .fx-alerta-info {
    color: var(--color-acento);
    border-color: rgba(0, 92, 185, .20);
    background: rgba(0, 92, 185, .08);
  }
  .fx-alerta-error {
    color: var(--color-tinta);
    border-color: rgba(233, 78, 27, .25);
    background: rgba(233, 78, 27, .09);
  }
  .fx-alerta-error svg {
    color: var(--color-anc-naranja);
  }
  .fx-alerta-ok {
    color: var(--color-acento-verde);
    border-color: rgba(0, 148, 94, .25);
    background: rgba(0, 148, 94, .10);
  }
  .fx-tabla-envoltura {
    overflow: auto;
    max-height: min(620px, 70vh);
  }
  .fx-tabla {
    width: 100%;
    border-collapse: separate;
    --tw-border-spacing-x: 0px;
    --tw-border-spacing-y: 0px;
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    min-width: 860px;
  }
  .fx-tabla th {
    position: sticky;
    top: 0px;
    z-index: 10;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-linea);
    background-color: var(--color-superficie);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    vertical-align: middle;
    font-size: 10px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-tenue);
    text-transform: uppercase;
  }
  .fx-tabla td {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-linea-sutil);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 3);
    vertical-align: middle;
  }
  .fx-tabla tbody tr:last-child td {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .fx-tabla tbody tr:hover td {
    background-color: var(--color-lienzo);
  }
  .fx-fila-activa td {
    background: rgba(0, 92, 185, .05);
  }
  .fx-fila-activa td:first-child {
    box-shadow: inset 3px 0 0 #005CB9;
  }
  .fx-nombre {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-tinta);
  }
  .fx-secundario {
    font-size: 11px;
    color: var(--color-apagado);
  }
  .fx-ficha {
    display: block;
    color: inherit;
    text-decoration-line: none;
  }
  .fx-ficha:hover .fx-nombre {
    color: var(--color-acento);
  }
  .fx-grupo-tags {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing);
  }
  .fx-rol {
    display: inline-flex;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 11px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
  }
  .fx-rol-administrador {
    background: rgba(0, 92, 185, .12);
    color: var(--color-acento);
  }
  .fx-rol-gerente_regional {
    background: rgba(120, 54, 140, .12);
    color: var(--color-acento-morado);
  }
  .fx-rol-operaciones {
    background: rgba(0, 148, 94, .12);
    color: var(--color-acento-verde);
  }
  .fx-rol-experiencia_cliente {
    background: rgba(56, 168, 224, .16);
    color: var(--color-acento);
  }
  .fx-rol-consulta {
    background: var(--color-linea-sutil);
    color: var(--color-apagado);
  }
  .fx-ambito {
    display: inline-flex;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-linea);
    background-color: var(--color-lienzo);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 10px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-apagado);
  }
  .fx-ambito-todo {
    color: var(--color-acento);
    border-color: rgba(0, 92, 185, .25);
    background: rgba(0, 92, 185, .10);
  }
  .fx-estado {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 11px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .fx-estado::before {
    content: "";
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
  }
  .fx-estado-activo {
    color: var(--color-acento-verde);
  }
  .fx-estado-activo::before {
    background: #00945E;
  }
  .fx-estado-inactivo {
    color: var(--color-tenue);
  }
  .fx-estado-inactivo::before {
    background: #C2CAD3;
  }
  .fx-polaridad {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 11px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-tinta);
  }
  .fx-polaridad::before {
    content: "";
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
  }
  .fx-polaridad-negativa::before {
    background: #E94E1B;
  }
  .fx-polaridad-positiva::before {
    background: #00945E;
  }
  .fx-polaridad-sin_feedback::before {
    background: #C2CAD3;
  }
  .fx-fila-grupo td {
    background: var(--color-lienzo);
  }
  .fx-etiqueta {
    margin-bottom: calc(var(--spacing) * 1.5);
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-tinta);
  }
  .fx-campo {
    display: block;
    width: 100%;
    border-radius: 10px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-control);
    background-color: var(--color-superficie);
    padding-inline: calc(var(--spacing) * 3.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-tinta);
    min-height: 42px;
  }
  .fx-campo::placeholder {
    color: var(--color-tenue);
  }
  .fx-campo:focus {
    border-color: var(--color-acento);
    --tw-outline-style: none;
    outline-style: none;
    box-shadow: 0 0 0 3px rgba(0, 92, 185, .15);
  }
  .fx-nota {
    font-size: 11px;
    color: var(--color-tenue);
  }
  .fx-fieldset {
    margin: 0px;
    border-style: var(--tw-border-style);
    border-width: 0px;
    padding: 0px;
  }
  .fx-fieldset legend {
    margin-bottom: calc(var(--spacing) * 2);
    padding: 0px;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-tinta);
  }
  .fx-subtitulo-grupo {
    margin-block: calc(var(--spacing) * 0.5);
    font-size: 10px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-tenue);
    text-transform: uppercase;
  }
  .fx-casilla {
    margin: 0px;
    display: flex;
    cursor: pointer;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2.5);
    border-radius: 10px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-linea);
    background-color: var(--color-superficie);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .fx-casilla:hover {
    background-color: var(--color-lienzo);
  }
  .fx-casilla:has(input:checked) {
    border-color: rgba(0, 92, 185, .45);
    background: rgba(0, 92, 185, .05);
  }
  .fx-casilla input {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    flex-shrink: 0;
    cursor: pointer;
    margin-top: 1px;
    accent-color: #005CB9;
  }
  .fx-modal {
    overflow: hidden;
    border-radius: 14px;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: var(--color-superficie);
    padding: 0px;
    color: var(--color-tinta);
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    box-shadow: var(--shadow-anc-pop), 0 0 0 100vmax rgba(27, 39, 51, .45);
  }
  .fx-modal[open] {
    position: fixed;
    inset: 0px;
    z-index: 50;
    margin: auto;
    display: flex;
    flex-direction: column;
    height: fit-content;
  }
  .fx-modal:modal {
    box-shadow: var(--shadow-anc-pop);
  }
  .fx-modal::backdrop {
    background: rgba(27, 39, 51, .45);
  }
  body:has(.fx-modal[open]) {
    overflow: hidden;
  }
  .fx-modal-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-linea-sutil);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .fx-modal-cab h2 {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .fx-modal-cab .sub {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-apagado);
  }
  .fx-modal-cerrar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--color-apagado);
    text-decoration-line: none;
    width: 34px;
    height: 34px;
  }
  .fx-modal-cerrar:hover {
    background-color: var(--color-lienzo);
    color: var(--color-tinta);
  }
  .fx-modal-cerrar svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .fx-modal-cuerpo {
    min-height: 0px;
    flex: 1;
    overflow-y: auto;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 5);
  }
  .fx-modal-pie {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-linea-sutil);
    background-color: var(--color-superficie);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3.5);
  }
  .fx-vacio {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 12);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-apagado);
  }
  .fx-vacio svg {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    color: #C2CAD3;
  }
  .fx-ingreso {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing) * 6);
    background: linear-gradient(135deg, #006937, #005CB9);
  }
  .fx-ingreso-tarjeta {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 18px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
    background-color: var(--color-superficie);
    padding-inline: calc(var(--spacing) * 9);
    padding-block: calc(var(--spacing) * 10);
    color-scheme: light;
    color: var(--color-tinta);
    max-width: 430px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
  }
  .fx-ingreso-tarjeta::before {
    content: "";
    position: absolute;
    inset-inline: 0px;
    top: 0px;
    height: var(--spacing);
    background-color: var(--color-anc-celeste);
  }
  .fx-ingreso-tarjeta img {
    margin-bottom: calc(var(--spacing) * 6);
    width: auto;
    height: 52px;
  }
  .fx-ingreso-tarjeta h1 {
    margin-bottom: calc(var(--spacing) * 1.5);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .fx-ingreso-lead {
    margin-bottom: calc(var(--spacing) * 6);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-apagado);
  }
  .fx-separador {
    margin-block: calc(var(--spacing) * 5);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-tenue);
  }
  .fx-separador::before, .fx-separador::after {
    content: "";
    height: 1px;
    flex: 1;
    background-color: var(--color-linea);
  }
  /* Ingreso: «¿Olvidaste tu contraseña?», volver y reglas de la contraseña nueva. */
  .fx-ingreso-enlace {
    display: block;
    margin-top: calc(var(--spacing) * 4);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-acento);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .fx-ingreso-reglas {
    margin: calc(var(--spacing) * -1) 0 calc(var(--spacing) * 5);
    padding-left: 18px;
    list-style: disc;
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--color-apagado);
  }
  .fx-ingreso-pie {
    margin-top: calc(var(--spacing) * 6);
    text-align: center;
    font-size: 11px;
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--color-tenue);
  }
  .fx-ingreso-tarjeta code {
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-linea);
    background-color: var(--color-lienzo);
    padding-inline: var(--spacing);
    font-size: 11px;
    padding-top: 1px;
    padding-bottom: 1px;
  }
  .fx-panel {
    --fx-g-azul: light-dark(#005CB9, #4F8FD6);
    --fx-g-pos: light-dark(#00945E, #33A97E);
    --fx-g-pos-suave: light-dark(#73C4A6, #096F4F);
    --fx-g-neutro: light-dark(#D5DBE2, #303C49);
    --fx-g-neg-suave: light-dark(#F39E82, #A34123);
    --fx-g-neg: light-dark(#E94E1B, #EC6639);
    --fx-g-morado: light-dark(#78368C, #D0B9D7);
    --fx-g-gris: var(--color-control);
    --fx-g-rejilla: var(--color-linea-sutil);
    --fx-emb-1: light-dark(#7FC0A3, #1C6A51);
    --fx-emb-2: light-dark(#3FA67B, #13855D);
    --fx-emb-3: light-dark(#00945E, #33A97E);
    --fx-emb-4: light-dark(#006937, #7FC9AB);
    --fx-pnl-curva: cubic-bezier(.22, .8, .24, 1);
    --fx-pnl-tope: 111px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px 24px;
    align-items: start;
  }
  /* Filtros: por defecto flotan sobre el contenido (no lo achican) y se ocultan
     solos; con el alfiler quedan fijos al costado. Los atributos data-lateral-*
     los pone assets/panel.js. */
  .fx-pnl-lateral {
    position: fixed;
    z-index: 46;
    top: calc(var(--fx-pnl-tope) + 12px);
    bottom: 12px;
    left: var(--fx-pnl-izq, 12px);
    width: min(272px, calc(100vw - 24px));
    min-width: 0;
    padding: 16px;
    overflow-y: auto;
    border: 1px solid var(--color-linea);
    border-radius: 14px;
    background: var(--color-superficie);
    box-shadow: var(--shadow-anc-pop);
    overscroll-behavior: contain;
    scrollbar-width: thin;
    transform: translateX(calc(-100% - var(--fx-pnl-izq, 12px) - 8px));
    visibility: hidden;
    transition: transform .3s var(--fx-pnl-curva), visibility 0s linear .3s;
  }
  .fx-panel[data-lateral-abierto] .fx-pnl-lateral {
    transform: none;
    visibility: visible;
    transition: transform .3s var(--fx-pnl-curva), visibility 0s;
  }
  .fx-pnl-fondo {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: color-mix(in srgb, var(--color-tinta) 16%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
  }
  .fx-panel[data-lateral-abierto]:not([data-lateral-fijo]) .fx-pnl-fondo {
    opacity: 1;
    pointer-events: auto;
  }
  /* El alfiler: inclinado mientras el panel flota, vertical cuando está fijo. */
  .fx-pnl-fijar svg {
    transform: rotate(40deg);
    transition: transform .3s var(--fx-pnl-curva);
  }
  .fx-pnl-fijar[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--color-acento) 40%, transparent);
    background: color-mix(in srgb, var(--color-acento) 7%, var(--color-superficie));
    color: var(--color-acento);
  }
  .fx-pnl-fijar[aria-pressed="true"] svg {
    transform: none;
  }
  @media (max-width: 1023px) {
    .fx-pnl-fijar {
      display: none;
    }
  }
  @media (min-width: 1024px) {
    /* Siempre dos columnas: la de filtros mide 0 hasta que se fija, así el
       contenido se corre con animación en vez de saltar. */
    .fx-panel {
      grid-template-columns: 0 minmax(0, 1fr);
      column-gap: 0;
      transition: grid-template-columns .32s var(--fx-pnl-curva), column-gap .32s var(--fx-pnl-curva);
    }
    .fx-panel > .fx-pnl-principal {
      grid-column: 2;
    }
    .fx-panel[data-lateral-fijo] {
      grid-template-columns: 272px minmax(0, 1fr);
      column-gap: 24px;
    }
    .fx-panel[data-lateral-fijo] .fx-pnl-lateral {
      position: sticky;
      grid-column: 1;
      left: auto;
      bottom: auto;
      width: auto;
      max-height: calc(100dvh - var(--fx-pnl-tope) - 24px);
      transform: none;
      visibility: visible;
      box-shadow: var(--shadow-anc);
      transition: none;
    }
    .fx-panel[data-lateral-fijando] .fx-pnl-lateral {
      animation: fx-pnl-fijar .45s var(--fx-pnl-curva);
    }
    .fx-panel[data-lateral-soltando] .fx-pnl-lateral {
      animation: fx-pnl-soltar .32s var(--fx-pnl-curva) forwards;
    }
  }
  /* Fijar: baja desde arriba y se asienta. Soltar: se despega antes de irse. */
  @keyframes fx-pnl-fijar {
    0% {
      transform: translateY(-6px) scale(1.015);
      box-shadow: var(--shadow-anc-pop);
    }
    60% {
      transform: translateY(2px) scale(.997);
    }
    100% {
      transform: none;
    }
  }
  @keyframes fx-pnl-soltar {
    to {
      transform: translateY(-6px) scale(1.015);
      box-shadow: var(--shadow-anc-pop);
    }
  }
  .fx-pnl-filtros {
    display: grid;
    gap: 16px;
  }
  .fx-pnl-grupo {
    display: grid;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid var(--color-linea-sutil);
  }
  .fx-pnl-grupo legend {
    float: left;
    width: 100%;
    padding: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-tenue);
  }
  .fx-pnl-campo {
    display: grid;
    gap: 4px;
    min-width: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-apagado);
  }
  .fx-pnl-campo .fx-campo {
    min-width: 0;
    min-height: 36px;
    padding-inline: 8px;
    font-size: var(--text-xs);
  }
  .fx-pnl-lista {
    min-width: 0;
    border: 1px solid var(--color-linea);
    border-radius: 10px;
    background: var(--color-superficie);
    transition: border-color .16s;
  }
  .fx-pnl-lista > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-apagado);
    list-style: none;
    cursor: pointer;
    user-select: none;
  }
  .fx-pnl-lista > summary::-webkit-details-marker {
    display: none;
  }
  .fx-pnl-lista > summary b {
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--color-tinta);
  }
  .fx-pnl-lista > summary::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin: -3px 2px 0;
    border-right: 1.5px solid var(--color-tenue);
    border-bottom: 1.5px solid var(--color-tenue);
    transform: rotate(45deg);
    transition: transform .2s var(--fx-pnl-curva);
  }
  .fx-pnl-lista[open] > summary::after {
    margin-top: 3px;
    transform: rotate(225deg);
  }
  .fx-pnl-lista > summary:hover, .fx-pnl-lista[open] > summary {
    color: var(--color-tinta);
  }
  .fx-pnl-lista > summary:focus-visible {
    outline: 3px solid var(--color-acento);
    outline-offset: 2px;
    border-radius: 10px;
  }
  .fx-pnl-lista[data-activa] {
    border-color: color-mix(in srgb, light-dark(#005CB9, #38A8E0) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--color-acento) 40%, transparent);
    }
  }
  .fx-pnl-lista[data-activa] > summary b {
    color: var(--color-acento);
  }
  .fx-pnl-lista-opciones {
    max-height: 240px;
    padding: 4px;
    border-top: 1px solid var(--color-linea-sutil);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .fx-pnl-principal {
    min-width: 0;
  }
  .fx-pnl-barra {
    position: sticky;
    top: var(--fx-pnl-tope);
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 60px;
    padding: 12px 0;
    background: color-mix(in srgb, light-dark(#F8F9FA, #121A22) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-lienzo) 90%, transparent);
    }
    backdrop-filter: saturate(1.3) blur(10px);
  }
  .fx-pnl-alcance {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: var(--text-xs);
    color: var(--color-tenue);
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .fx-pnl-segmento {
    display: inline-flex;
    gap: 2px;
    max-width: 100%;
    padding: 3px;
    border: 1px solid var(--color-linea);
    border-radius: 10px;
    background: var(--color-linea-sutil);
  }
  .fx-pnl-segmento button {
    padding: 5px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-apagado);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .16s, color .16s, box-shadow .16s;
  }
  .fx-pnl-segmento button:hover {
    color: var(--color-tinta);
  }
  .fx-pnl-segmento button[aria-pressed="true"] {
    background: var(--color-superficie);
    color: var(--color-tinta);
    box-shadow: 0 1px 2px rgba(27, 39, 51, .12), 0 0 0 1px var(--color-linea);
  }
  .fx-pnl-segmento-chico button {
    padding: 3px 8px;
    font-size: 11px;
  }
  .fx-pnl-paises {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .fx-pnl-pais {
    position: relative;
    cursor: pointer;
  }
  .fx-pnl-pais input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }
  .fx-pnl-pais span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--color-linea);
    border-radius: 10px;
    background: var(--color-superficie);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--color-tenue);
    transition: background-color .16s, border-color .16s, color .16s;
  }
  .fx-pnl-pais span::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-control);
    transition: background-color .16s, transform .2s var(--fx-pnl-curva);
  }
  .fx-pnl-pais:hover span {
    border-color: var(--color-control);
    color: var(--color-tinta);
  }
  .fx-pnl-pais input:checked + span {
    border-color: color-mix(in srgb, light-dark(#005CB9, #38A8E0) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--color-acento) 40%, transparent);
    }
    background: color-mix(in srgb, light-dark(#005CB9, #38A8E0) 8%, light-dark(#FFFFFF, #1B2733));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-acento) 8%, var(--color-superficie));
    }
    color: var(--color-acento);
  }
  .fx-pnl-pais input:checked + span::before {
    background: var(--color-acento);
    transform: scale(1.25);
  }
  .fx-pnl-pais input:focus-visible + span {
    outline: 3px solid var(--color-acento);
    outline-offset: 2px;
  }
  .fx-pnl-menu {
    position: relative;
  }
  .fx-pnl-boton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--color-linea);
    border-radius: 10px;
    background: var(--color-superficie);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-apagado);
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
    user-select: none;
    transition: background-color .16s, border-color .16s, color .16s;
  }
  .fx-pnl-boton::-webkit-details-marker {
    display: none;
  }
  .fx-pnl-boton svg {
    width: 15px;
    height: 15px;
  }
  .fx-pnl-boton > span {
    max-width: 16em;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .fx-pnl-boton:hover {
    border-color: var(--color-control);
    color: var(--color-tinta);
  }
  .fx-pnl-boton:focus-visible {
    outline: 3px solid var(--color-acento);
    outline-offset: 2px;
  }
  .fx-pnl-menu[open] > .fx-pnl-boton, .fx-pnl-boton[aria-expanded="true"], .fx-pnl-boton-activo {
    border-color: color-mix(in srgb, light-dark(#005CB9, #38A8E0) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--color-acento) 40%, transparent);
    }
    background: color-mix(in srgb, light-dark(#005CB9, #38A8E0) 7%, light-dark(#FFFFFF, #1B2733));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-acento) 7%, var(--color-superficie));
    }
    color: var(--color-acento);
  }
  .fx-pnl-boton-icono {
    width: 36px;
    padding: 0;
    justify-content: center;
  }
  .fx-panel[aria-busy="true"] [data-actualizar] svg {
    animation: fx-pnl-girar .9s linear infinite;
  }
  .fx-pnl-pop-lista {
    max-height: min(320px, 50vh);
    margin: 0 -6px;
    padding: 0 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .fx-pnl-pop-grupo {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 6px 4px;
    background: var(--color-superficie);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-tenue);
  }
  .fx-pnl-pop-opcion {
    display: grid;
    grid-template-columns: auto 5em minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 8px;
    font-size: var(--text-xs);
    cursor: pointer;
  }
  .fx-pnl-pop-opcion:hover {
    background: var(--color-lienzo);
  }
  .fx-pnl-pop-opcion:has(input:checked) {
    background: color-mix(in srgb, light-dark(#005CB9, #38A8E0) 7%, light-dark(#FFFFFF, #1B2733));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-acento) 7%, var(--color-superficie));
    }
  }
  .fx-pnl-pop-opcion input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #005CB9;
  }
  .fx-pnl-pop-opcion b {
    font-weight: 600;
    color: var(--color-tinta);
    font-variant-numeric: tabular-nums;
  }
  .fx-pnl-pop-opcion span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-apagado);
  }
  .fx-pnl-pop-pie {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--color-linea-sutil);
  }
  .fx-pnl-buscar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--color-linea);
    border-radius: 10px;
    background: var(--color-superficie);
    color: var(--color-tenue);
    transition: border-color .16s, box-shadow .16s;
  }
  .fx-pnl-buscar svg {
    width: 15px;
    height: 15px;
  }
  .fx-pnl-buscar:focus-within {
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px rgba(0, 92, 185, .15);
  }
  .fx-pnl-buscar input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: var(--text-xs);
    color: var(--color-tinta);
  }
  .fx-pnl-buscar input::placeholder {
    color: var(--color-tenue);
  }
  .fx-pnl-buscar input:focus-visible {
    outline: none;
  }
  .fx-pnl-chips {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .fx-pnl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    height: 28px;
    padding: 0 8px 0 10px;
    border: 1px solid color-mix(in srgb, light-dark(#005CB9, #38A8E0) 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--color-acento) 35%, transparent);
    }
    border-radius: 999px;
    background: color-mix(in srgb, light-dark(#005CB9, #38A8E0) 8%, light-dark(#FFFFFF, #1B2733));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-acento) 8%, var(--color-superficie));
    }
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-tinta);
    cursor: pointer;
    transition: background-color .16s;
    animation: fx-pnl-pop .2s var(--fx-pnl-curva);
  }
  .fx-pnl-chip > span:not(.fx-pnl-chip-dim) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fx-pnl-chip-dim {
    font-weight: 600;
    color: var(--color-acento);
  }
  .fx-pnl-chip svg {
    width: 13px;
    height: 13px;
    color: var(--color-apagado);
  }
  .fx-pnl-chip:hover {
    background: color-mix(in srgb, light-dark(#005CB9, #38A8E0) 15%, light-dark(#FFFFFF, #1B2733));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-acento) 15%, var(--color-superficie));
    }
  }
  .fx-pnl-chip:hover svg {
    color: var(--color-tinta);
  }
  .fx-pnl-limpiar {
    padding: 4px 6px;
    border: 0;
    background: none;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-apagado);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .fx-pnl-limpiar:hover {
    color: var(--color-tinta);
  }
  .fx-pnl-progreso {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
  }
  .fx-pnl-progreso::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 35%;
    border-radius: 2px;
    background: var(--color-acento);
    animation: fx-pnl-progreso 1.1s ease-in-out infinite;
  }
  .fx-panel[aria-busy="true"] .fx-pnl-progreso {
    opacity: 1;
  }
  .fx-panel:not([aria-busy="true"]) .fx-pnl-progreso::after {
    animation-play-state: paused;
  }
  .fx-pnl-avisos {
    display: grid;
    gap: 8px;
    margin-top: 14px;
  }
  .fx-pnl-avisos .fx-alerta {
    align-items: center;
  }
  .fx-pnl-avisos .fx-btn {
    margin-left: auto;
  }
  .fx-pnl-barra-vistas {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4px 16px;
    margin: 14px 0 18px;
    border-bottom: 1px solid var(--color-linea);
  }
  .fx-pnl-vistas {
    display: flex;
    gap: 2px;
    max-width: 100%;
    margin-bottom: -1px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .fx-pnl-vistas::-webkit-scrollbar {
    display: none;
  }
  .fx-pnl-vistas button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px 12px;
    border: 0;
    background: none;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-apagado);
    white-space: nowrap;
    cursor: pointer;
    transition: color .16s;
  }
  .fx-pnl-vistas button::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--color-acento);
    transform: scaleX(0);
    transition: transform .25s var(--fx-pnl-curva);
  }
  .fx-pnl-vistas button:hover, .fx-pnl-vistas button[aria-selected="true"] {
    color: var(--color-tinta);
  }
  .fx-pnl-vistas button[aria-selected="true"]::after {
    transform: scaleX(1);
  }
  .fx-pnl-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-linea-sutil);
    font-size: 10px;
    font-weight: 600;
    color: var(--color-apagado);
    font-variant-numeric: tabular-nums;
  }
  .fx-pnl-contador:empty {
    display: none;
  }
  [aria-selected="true"] > .fx-pnl-contador {
    background: color-mix(in srgb, light-dark(#005CB9, #38A8E0) 12%, light-dark(#FFFFFF, #1B2733));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-acento) 12%, var(--color-superficie));
    }
    color: var(--color-acento);
  }
  .fx-pnl-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding-bottom: 12px;
    font-size: 11px;
    color: var(--color-tenue);
  }
  .fx-pnl-estado::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fx-g-pos);
    flex: none;
  }
  .fx-panel[aria-busy="true"] .fx-pnl-estado::before {
    background: var(--color-acento);
    animation: fx-pnl-latido 1s ease-in-out infinite;
  }
  .fx-pnl-estado-error {
    color: var(--color-tinta);
  }
  .fx-panel .fx-pnl-estado-error::before {
    background: var(--fx-g-neg);
    animation: none;
  }
  .fx-panel[data-error] :is(.fx-pnl-barra-vistas, .fx-pnl-vista) {
    display: none;
  }
  .fx-pnl-vista {
    display: grid;
    gap: 16px;
    transition: opacity .2s;
  }
  .fx-panel[aria-busy="true"]:not([data-primera-carga]) .fx-pnl-vista {
    opacity: .55;
  }
  .fx-pnl-vista[data-entra] :is(.fx-pnl-tarjeta, .fx-pnl-kpi) {
    animation: fx-pnl-entrar .5s var(--fx-pnl-curva) backwards;
    animation-delay: calc(var(--fx-i, 0) * 45ms);
  }
  .fx-pnl-min {
    min-width: 0;
  }
  .fx-pnl-fila {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
  }
  .fx-pnl-heroe {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
  }
  .fx-pnl-kpis {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @container (min-width: 880px) {
    .fx-pnl-heroe {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
    .fx-pnl-kpis {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .fx-pnl-fila-2, .fx-pnl-fila-3 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .fx-pnl-fila-3 > :last-child {
      grid-column: 1 / -1;
    }
  }
  @container (min-width: 1180px) {
    .fx-pnl-fila-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .fx-pnl-fila-3 > :last-child {
      grid-column: auto;
    }
  }
  .fx-pnl-tarjeta {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .fx-pnl-tarjeta-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 16px 20px 0;
  }
  .fx-pnl-tarjeta-cab h2 {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-tinta);
  }
  .fx-pnl-tarjeta-cab p {
    margin: 2px 0 0;
    font-size: var(--text-xs);
    color: var(--color-apagado);
  }
  .fx-pnl-tarjeta-cuerpo {
    flex: 1;
    min-width: 0;
    padding: 16px 20px 20px;
  }
  .fx-pnl-tarjeta > [data-graf="casos"] {
    padding-top: 14px;
  }
  .fx-pnl-kpi {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--color-linea);
    border-radius: 14px;
    background: var(--color-superficie);
    box-shadow: 0 1px 2px rgba(27, 39, 51, .05), 0 10px 26px -20px rgba(27, 39, 51, .28);
  }
  .fx-pnl-kpi-rotulo {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-apagado);
  }
  .fx-pnl-kpi-valor {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--color-tinta);
    font-variant-numeric: tabular-nums;
  }
  .fx-pnl-kpi-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4px 8px;
    min-height: 26px;
  }
  .fx-pnl-kpi-pie [data-detalle] {
    min-width: 0;
    font-size: 11px;
    line-height: 1.35;
    color: var(--color-tenue);
  }
  .fx-pnl-chispa {
    width: 84px;
    height: 26px;
    margin-left: auto;
    flex: none;
  }
  .fx-g-chispa {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .fx-g-chispa-linea {
    stroke: var(--fx-g-azul);
  }
  .fx-g-chispa-punto {
    fill: var(--fx-g-azul);
  }
  .fx-panel[data-primera-carga] [data-graf]:empty::before, .fx-panel[data-primera-carga] .fx-pnl-kpi-valor {
    background: linear-gradient(100deg, var(--color-linea-sutil) 35%, color-mix(in srgb, light-dark(#EEF1F5, #25323F) 30%, light-dark(#FFFFFF, #1B2733)) 50%, var(--color-linea-sutil) 65%) 0 0 / 300% 100%;
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(100deg, var(--color-linea-sutil) 35%, color-mix(in srgb, var(--color-linea-sutil) 30%, var(--color-superficie)) 50%, var(--color-linea-sutil) 65%) 0 0 / 300% 100%;
    }
    animation: fx-pnl-brillo 1.4s linear infinite;
  }
  .fx-panel[data-primera-carga] [data-graf]:empty::before {
    content: "";
    display: block;
    height: 180px;
    border-radius: 10px;
  }
  .fx-panel[data-primera-carga] .fx-pnl-kpi-valor {
    display: inline-block;
    width: 3.2em;
    border-radius: 8px;
    color: transparent;
  }
  .fx-emb {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .fx-emb-paso {
    display: grid;
    gap: 6px;
    padding: 6px 0;
    border-radius: 6px;
  }
  .fx-emb-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .fx-emb-rotulo {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-apagado);
  }
  .fx-emb-valor {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-variant-numeric: tabular-nums;
  }
  .fx-emb-valor b {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-tinta);
  }
  .fx-emb-valor small {
    min-width: 3.8em;
    font-size: var(--text-xs);
    color: var(--color-apagado);
    text-align: right;
  }
  .fx-emb-pista {
    height: 12px;
    border-radius: 4px;
    background: var(--fx-g-rejilla);
    overflow: hidden;
  }
  .fx-emb-barra {
    width: 0;
    height: 100%;
    border-radius: 0 4px 4px 0;
    transition: width .9s var(--fx-pnl-curva);
  }
  .fx-emb-fugas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 4px 6px;
    padding: 2px 0 6px 14px;
    border-left: 2px dotted var(--color-linea);
  }
  .fx-emb-fuga {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 10px;
    border: 1px solid var(--color-linea);
    border-radius: 999px;
    background: var(--color-superficie);
    font-size: 11px;
    color: var(--color-apagado);
    transition: border-color .16s, background-color .16s, color .16s;
  }
  .fx-emb-fuga b {
    font-weight: 600;
    color: var(--color-tinta);
    font-variant-numeric: tabular-nums;
  }
  .fx-emb-fuga:hover {
    border-color: var(--color-control);
    color: var(--color-tinta);
  }
  .fx-emb-fuga.fx-g-elegido {
    border-color: var(--color-acento);
    background: color-mix(in srgb, light-dark(#005CB9, #38A8E0) 8%, light-dark(#FFFFFF, #1B2733));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-acento) 8%, var(--color-superficie));
    }
    color: var(--color-tinta);
  }
  .fx-emb-fuga-neutra {
    border-style: dashed;
  }
  .fx-emb-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-linea-sutil);
  }
  .fx-emb-nota {
    font-size: 11px;
    color: var(--color-tenue);
  }
  .fx-sat {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    align-items: center;
    gap: 20px;
  }
  .fx-sat-anillo {
    width: 148px;
  }
  .fx-sat-datos {
    display: grid;
    gap: 10px;
    min-width: 0;
  }
  .fx-sat-cifra {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
  }
  .fx-sat-cifra strong {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-tinta);
    font-variant-numeric: tabular-nums;
  }
  .fx-sat-cifra span {
    font-size: var(--text-xs);
    color: var(--color-apagado);
  }
  .fx-sat-lista {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .fx-sat-lista li {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin: 0 -6px;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: var(--text-xs);
    color: var(--color-apagado);
    transition: background-color .16s, opacity .2s;
  }
  .fx-sat-lista li > span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fx-sat-lista b {
    font-weight: 600;
    color: var(--color-tinta);
    font-variant-numeric: tabular-nums;
  }
  [data-graf="satisfaccion"] {
    display: flex;
    flex-direction: column;
  }
  [data-graf="satisfaccion"] > .fx-sat {
    flex: 1;
    align-content: center;
  }
  .fx-sat + .fx-g-bloque {
    margin-top: auto;
    padding-top: 20px;
  }
  .fx-g-vacio {
    margin: 0;
    padding: 28px 16px;
    border: 1px dashed var(--color-linea);
    border-radius: 10px;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-apagado);
  }
  .fx-g-nota {
    margin: 12px 0 0;
    font-size: 11px;
    color: var(--color-tenue);
  }
  .fx-g-nota-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
  }
  .fx-g-titulo {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-tenue);
  }
  .fx-g-bloque + .fx-g-bloque {
    margin-top: 20px;
  }
  .fx-g-accion {
    cursor: pointer;
  }
  .fx-g-accion:focus-visible {
    outline: 2px solid var(--color-acento);
    outline-offset: 2px;
    border-radius: 6px;
  }
  .fx-g-atenuado {
    opacity: .38;
    transition: opacity .2s;
  }
  .fx-g-atenuado:hover, .fx-g-atenuado:focus-visible {
    opacity: .8;
  }
  :is(.fx-g-barra, .fx-sat-lista li, .fx-g-leyenda li).fx-g-elegido {
    background: color-mix(in srgb, light-dark(#005CB9, #38A8E0) 8%, light-dark(#FFFFFF, #1B2733));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-acento) 8%, var(--color-superficie));
    }
    box-shadow: inset 2px 0 0 var(--color-acento);
  }
  .fx-g-barra.fx-g-elegido .fx-g-barra-etiqueta {
    font-weight: 600;
  }
  :is(.fx-g-barra, .fx-sat-lista li, .fx-g-leyenda li).fx-g-accion:hover:not(.fx-g-elegido) {
    background: var(--color-lienzo);
  }
  .fx-g-barras {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .fx-g-barra {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 0 -6px;
    padding: 5px 6px;
    border-radius: 6px;
    font-size: var(--text-xs);
    transition: background-color .16s, opacity .2s;
  }
  .fx-g-barra-etiqueta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-tinta);
  }
  .fx-g-barra-pista {
    height: 8px;
    border-radius: 4px;
    background: var(--fx-g-rejilla);
    overflow: hidden;
  }
  .fx-g-barra-relleno {
    width: 0;
    height: 100%;
    border-radius: 0 4px 4px 0;
    background: var(--fx-g-azul);
    transition: width .8s var(--fx-pnl-curva);
  }
  .fx-g-barra-valor {
    min-width: 3.6em;
    text-align: right;
    font-weight: 500;
    color: var(--color-tinta);
    font-variant-numeric: tabular-nums;
  }
  .fx-g-barras-apiladas .fx-g-barra {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 4px;
  }
  .fx-g-barras-apiladas .fx-g-barra-etiqueta {
    grid-column: 1 / -1;
    white-space: normal;
  }
  .fx-g-pista-doble {
    display: flex;
    gap: 2px;
  }
  .fx-g-pista-doble .fx-g-barra-relleno {
    flex: none;
    border-radius: 0;
  }
  .fx-g-pista-doble .fx-g-barra-relleno:last-child {
    border-radius: 0 4px 4px 0;
  }
  .fx-g-apilada {
    display: flex;
    gap: 2px;
    height: 16px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--color-superficie);
  }
  .fx-g-segmento {
    height: 100%;
    min-width: 3px;
    transition: flex .8s var(--fx-pnl-curva), opacity .2s, filter .16s;
  }
  .fx-g-segmento:hover {
    filter: brightness(1.1);
  }
  .fx-g-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-xs);
    color: var(--color-apagado);
  }
  .fx-g-leyenda li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    transition: background-color .16s, opacity .2s;
  }
  .fx-g-leyenda li.fx-g-accion {
    margin: 0 -6px;
    padding: 2px 6px;
  }
  .fx-g-leyenda b {
    font-weight: 600;
    color: var(--color-tinta);
    font-variant-numeric: tabular-nums;
  }
  .fx-g-clave {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: none;
  }
  .fx-g-clave-linea {
    width: 14px;
    height: 2px;
    border-radius: 1px;
    flex: none;
  }
  .fx-g-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    font-family: var(--font-sans);
  }
  .fx-g-svg .fx-g-eje {
    fill: var(--color-tenue);
    font-size: 11px;
  }
  .fx-g-svg .fx-g-rejilla {
    stroke: var(--fx-g-rejilla);
    stroke-width: 1;
  }
  .fx-g-svg .fx-g-cursor {
    stroke: var(--color-control);
    stroke-width: 1;
    stroke-dasharray: 3 3;
  }
  .fx-g-columna {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: fx-pnl-crecer .7s var(--fx-pnl-curva) backwards;
    animation-delay: var(--fx-d, 0ms);
  }
  .fx-g-linea {
    stroke-dasharray: 1;
    animation: fx-pnl-trazar 1.1s var(--fx-pnl-curva) backwards;
  }
  .fx-g-punto {
    animation: fx-pnl-aparecer .3s ease-out .7s backwards;
  }
  .fx-g-svg .fx-g-final {
    fill: var(--color-tinta);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    animation: fx-pnl-aparecer .3s ease-out .8s backwards;
  }
  .fx-g-zona {
    outline: none;
  }
  .fx-g-zona:focus-visible {
    fill: color-mix(in srgb, light-dark(#005CB9, #38A8E0) 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in srgb, var(--color-acento) 8%, transparent);
    }
  }
  .fx-g-calor {
    display: grid;
    grid-template-columns: 3.4em repeat(7, minmax(0, 1fr));
    gap: 2px;
    font-size: 11px;
  }
  .fx-g-calor-cab {
    padding: 2px 0 4px;
    text-align: center;
    font-size: 10px;
    color: var(--color-tenue);
  }
  .fx-g-calor-dia {
    display: flex;
    align-items: center;
    font-size: 10px;
    color: var(--color-apagado);
    font-variant-numeric: tabular-nums;
  }
  .fx-g-celda {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    border-radius: 4px;
    color: var(--color-tinta);
    font-variant-numeric: tabular-nums;
    animation: fx-pnl-aparecer .35s ease-out backwards;
    animation-delay: var(--fx-d, 0ms);
    transition: opacity .2s;
  }
  @container (min-width: 880px) {
    .fx-g-celda {
      height: 38px;
    }
  }
  .fx-g-celda-vacia {
    background: var(--fx-g-rejilla);
    color: var(--color-tenue);
  }
  .fx-g-celda-oscura {
    font-weight: 600;
  }
  .fx-g-celda:hover {
    outline: 2px solid var(--color-control);
    outline-offset: -2px;
  }
  .fx-g-celda.fx-g-elegido {
    outline: 2px solid var(--color-tinta);
    outline-offset: -2px;
  }
  .fx-g-escala {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
  }
  .fx-g-escala-barra {
    width: 72px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--fx-g-neg), var(--fx-g-neg));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(90deg, color-mix(in srgb, var(--fx-g-neg) 6%, var(--color-superficie)), color-mix(in srgb, var(--fx-g-neg) 70%, var(--color-superficie)));
    }
  }
  .fx-g-nube {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .fx-g-tema {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 12px;
    line-height: 1.3;
    border: 1px solid var(--color-linea);
    border-radius: 999px;
    background: var(--color-superficie);
    color: var(--color-tinta);
    transition: border-color .16s, background-color .16s, opacity .2s;
  }
  .fx-g-tema b {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-tenue);
    font-variant-numeric: tabular-nums;
  }
  .fx-g-tema:hover {
    border-color: var(--color-control);
  }
  .fx-g-tema.fx-g-elegido {
    border-color: var(--color-acento);
    background: color-mix(in srgb, light-dark(#005CB9, #38A8E0) 10%, light-dark(#FFFFFF, #1B2733));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-acento) 10%, var(--color-superficie));
    }
  }
  .fx-g-tema-0 {
    font-size: var(--text-xs);
    color: var(--color-apagado);
  }
  .fx-g-tema-1 {
    font-size: 13px;
  }
  .fx-g-tema-2 {
    font-size: 15px;
    font-weight: 500;
  }
  .fx-g-tema-3 {
    font-size: 17px;
    font-weight: 600;
    background: var(--color-lienzo);
  }
  .fx-g-datos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
    margin: 0;
    font-size: var(--text-xs);
  }
  .fx-g-datos dt {
    color: var(--color-apagado);
  }
  .fx-g-datos dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--color-tinta);
    font-variant-numeric: tabular-nums;
  }
  .fx-tabla .fx-g-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .fx-g-orden {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
  }
  .fx-g-orden:hover {
    color: var(--color-tinta);
  }
  [aria-sort="ascending"] > .fx-g-orden::after {
    content: "▲";
    font-size: 8px;
  }
  [aria-sort="descending"] > .fx-g-orden::after {
    content: "▼";
    font-size: 8px;
  }
  [aria-sort] > .fx-g-orden {
    color: var(--color-tinta);
  }
  .fx-g-mini {
    display: grid;
    grid-template-columns: minmax(48px, 1fr) 3.6em;
    align-items: center;
    gap: 8px;
  }
  .fx-g-mini .fx-g-barra-pista {
    height: 6px;
  }
  .fx-g-tabla-comparativo tbody tr, .fx-g-casos tbody tr {
    cursor: pointer;
  }
  .fx-g-tabla-chica {
    min-width: 0;
  }
  .fx-g-tabla-chica th, .fx-g-tabla-chica td {
    padding: 8px 10px;
  }
  .fx-g-marca {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--fx-g-neg);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--fx-g-neg) 16%, var(--color-superficie));
    }
    color: var(--color-tinta);
    font-weight: 600;
  }
  .fx-g-datos-tabla {
    margin-top: 12px;
  }
  .fx-g-datos-tabla summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-acento);
  }
  .fx-g-datos-tabla summary::-webkit-details-marker {
    display: none;
  }
  .fx-g-datos-tabla summary::before {
    content: "";
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .2s;
  }
  .fx-g-datos-tabla[open] summary::before {
    transform: rotate(45deg);
  }
  .fx-g-datos-tabla .fx-tabla-envoltura {
    max-height: 260px;
    margin-top: 8px;
    border: 1px solid var(--color-linea-sutil);
    border-radius: 10px;
  }
  .fx-tt {
    table-layout: fixed;
  }
  .fx-tt th {
    vertical-align: top;
  }
  .fx-tt td {
    vertical-align: top;
    overflow-wrap: anywhere;
  }
  .fx-tt td.fx-g-num {
    vertical-align: middle;
    overflow-wrap: normal;
  }
  .fx-tt th.fx-g-num {
    white-space: normal;
  }
  .fx-tt tbody tr {
    animation: fx-pnl-aparecer .25s ease-out;
  }
  .fx-tt .fx-g-orden {
    min-width: 0;
    text-align: left;
  }
  .fx-tt th.fx-g-num .fx-g-orden {
    margin-left: auto;
    text-align: right;
  }
  .fx-tt th:not([aria-sort]) .fx-g-orden:hover::after {
    content: "↕";
    font-size: 8px;
    opacity: .5;
  }
  .fx-tt .fx-g-estado, .fx-tt .fx-g-con-punto {
    white-space: normal;
  }
  .fx-tt .fx-g-estado + .fx-g-estado {
    margin-left: 0;
  }
  .fx-tt .fx-polaridad {
    align-items: flex-start;
  }
  .fx-tt .fx-polaridad::before {
    flex: none;
    margin-top: .35em;
  }
  .fx-tt-lupa {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 20px;
    height: 20px;
    margin-left: auto;
    border-radius: 6px;
    color: var(--color-tenue);
    opacity: .4;
    cursor: pointer;
    transition: opacity .15s, background-color .15s, color .15s;
  }
  .fx-tt th.fx-g-num .fx-tt-lupa {
    margin-left: 0;
  }
  .fx-tt-lupa svg {
    width: 12px;
    height: 12px;
  }
  .fx-tt th:hover .fx-tt-lupa, .fx-tt-lupa:focus-visible {
    opacity: 1;
  }
  .fx-tt-lupa:hover {
    background: var(--color-lienzo);
    color: var(--color-tinta);
  }
  .fx-tt-lupa:focus-visible {
    outline: 2px solid var(--color-acento);
    outline-offset: 1px;
  }
  .fx-tt-filtrada .fx-tt-lupa {
    opacity: 1;
    color: var(--color-acento);
    background: color-mix(in srgb, light-dark(#005CB9, #38A8E0) 14%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-acento) 14%, transparent);
    }
  }
  .fx-tt-buscar {
    position: relative;
    margin-top: 6px;
  }
  .fx-tt-buscar input {
    display: block;
    width: 100%;
    min-width: 0;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--color-linea);
    border-radius: 8px;
    background: var(--color-superficie);
    color: var(--color-tinta);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    animation: fx-pnl-aparecer .15s ease-out;
  }
  .fx-tt-buscar input::placeholder {
    color: var(--color-tenue);
  }
  .fx-tt-buscar input:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px color-mix(in srgb, light-dark(#005CB9, #38A8E0) 18%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-acento) 18%, transparent);
    }
  }
  .fx-tt-buscar::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--color-acento);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
  }
  .fx-tt-buscar[data-espera]::after {
    animation: fx-tt-espera 1.5s linear forwards;
  }
  @keyframes fx-tt-espera {
    to {
      transform: scaleX(1);
    }
  }
  .fx-pnl-casos-acciones {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .fx-pnl-casos-acciones .fx-pnl-buscar {
    width: 360px;
  }
  [data-graf="registro"] .fx-tabla-envoltura {
    max-height: 420px;
  }
  .fx-g-casos {
    max-height: min(780px, 75vh);
    border-top: 1px solid var(--color-linea-sutil);
  }
  .fx-g-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-linea-sutil);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-tinta);
    white-space: nowrap;
  }
  .fx-g-estado::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-control);
    flex: none;
  }
  .fx-g-estado + .fx-g-estado {
    margin-left: 4px;
  }
  .fx-g-estado-con_sentido::before {
    background: var(--fx-g-pos);
  }
  .fx-g-estado-sin_clasificar::before {
    background: var(--fx-g-morado);
  }
  .fx-g-estado-por_analizar::before {
    background: var(--fx-g-azul);
  }
  .fx-g-estado-insuficiente::before, .fx-g-estado-sin_sentido::before {
    background: var(--fx-g-neg-suave);
  }
  .fx-g-estado-pendiente::before {
    background: var(--fx-g-neutro);
  }
  .fx-g-estado-sin_fe::before, .fx-g-estado-tardia::before {
    background: var(--fx-g-neg);
  }
  .fx-g-con-punto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }
  .fx-g-tenue {
    color: var(--color-tenue);
  }
  .fx-g-mas {
    display: flex;
    justify-content: center;
    padding: 14px;
    border-top: 1px solid var(--color-linea-sutil);
  }
  .fx-pnl-detalle {
    width: min(640px, calc(100vw - 32px));
  }
  .fx-pnl-detalle[open] {
    animation: fx-pnl-modal .22s var(--fx-pnl-curva);
  }
  .fx-pnl-detalle[open]::backdrop {
    animation: fx-pnl-aparecer .22s ease-out;
  }
  .fx-det-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .fx-det-chips .fx-g-estado + .fx-g-estado {
    margin-left: 0;
  }
  .fx-det-seccion {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--color-linea-sutil);
  }
  .fx-det-seccion h3 {
    margin: 0 0 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-tenue);
  }
  .fx-det-chips .fx-g-con-punto {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-linea-sutil);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-tinta);
  }
  .fx-det-chips .fx-g-clave {
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
  .fx-det-texto {
    margin: 0;
    padding: 12px 14px;
    border-left: 3px solid var(--color-linea);
    border-radius: 4px 10px 10px 4px;
    background: var(--color-lienzo);
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--color-tinta);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .fx-det-motivo {
    margin: 10px 0 0;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-apagado);
  }
  .fx-det-motivo b {
    font-weight: 600;
    color: var(--color-tinta);
  }
  .fx-det-lista {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .fx-det-lista li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .fx-det-lista small {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--color-linea-sutil);
    font-size: 10px;
    font-weight: 600;
    color: var(--color-apagado);
  }
  .fx-cruce {
    display: grid;
    gap: 14px;
  }
  .fx-cruce-barra {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
  }
  .fx-cruce-titulo {
    display: flex;
    flex: 1 1 280px;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  .fx-cruce-nombre {
    flex: 1;
    min-width: 0;
    height: 40px;
    margin-left: -10px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-tinta);
    text-overflow: ellipsis;
    transition: border-color .16s, background-color .16s, box-shadow .16s;
  }
  .fx-cruce-nombre::placeholder {
    font-weight: 500;
    color: var(--color-tenue);
  }
  .fx-cruce-nombre:hover {
    border-color: var(--color-linea);
  }
  .fx-cruce-nombre:focus {
    outline: none;
    border-color: var(--color-acento);
    background: var(--color-superficie);
    box-shadow: 0 0 0 3px color-mix(in srgb, light-dark(#005CB9, #38A8E0) 18%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-acento) 18%, transparent);
    }
  }
  .fx-cruce-estado {
    flex: none;
    font-size: 11px;
    color: var(--color-tenue);
    white-space: nowrap;
  }
  .fx-cruce-estado[data-cambios] {
    color: var(--color-tinta);
  }
  .fx-cruce-estado[data-cambios]::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--fx-g-neg);
    vertical-align: 1px;
  }
  .fx-cruce-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }
  .fx-cruce-aviso {
    order: 3;
    flex-basis: 100%;
    margin: -4px 0 0;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-acento-verde);
    animation: fx-pnl-aparecer .2s ease-out;
  }
  .fx-cruce-aviso-error {
    color: var(--color-tinta);
  }
  .fx-cruce-aviso-error::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--fx-g-neg);
    vertical-align: 1px;
  }
  .fx-cruce-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    width: min(340px, calc(100vw - 32px));
    max-height: min(420px, 60vh);
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--color-linea);
    border-radius: 12px;
    background: var(--color-superficie);
    box-shadow: var(--shadow-anc-pop);
    animation: fx-pnl-pop .16s var(--fx-pnl-curva);
  }
  .fx-cruce-pop .fx-g-vacio {
    border: 0;
  }
  .fx-cruce-mis-item {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .fx-cruce-mis-abrir {
    display: grid;
    flex: 1;
    gap: 1px;
    min-width: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background-color .16s;
  }
  .fx-cruce-mis-abrir b {
    overflow: hidden;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-tinta);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fx-cruce-mis-abrir span {
    font-size: 11px;
    color: var(--color-tenue);
  }
  .fx-cruce-mis-abrir:hover, .fx-cruce-mis-abrir[aria-current] {
    background: var(--color-lienzo);
  }
  .fx-cruce-mis-abrir[aria-current] b {
    color: var(--color-acento);
  }
  .fx-cruce-mis-borrar {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--color-tenue);
    cursor: pointer;
    transition: background-color .16s, color .16s;
  }
  .fx-cruce-mis-borrar:hover {
    background: var(--fx-g-neg);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--fx-g-neg) 12%, var(--color-superficie));
    }
    color: var(--color-tinta);
  }
  .fx-cruce-mis-borrar svg {
    width: 13px;
    height: 13px;
  }
  .fx-cruce-cuerpo {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .fx-cruce[data-ancha] .fx-cruce-cuerpo {
    grid-template-columns: 244px minmax(0, 1fr);
  }
  .fx-cruce-lista {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--color-linea);
    border-radius: 14px;
    background: var(--color-superficie);
    box-shadow: var(--shadow-anc);
  }
  .fx-cruce-lista > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    list-style: none;
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-acento);
  }
  .fx-cruce-lista > summary::-webkit-details-marker {
    display: none;
  }
  .fx-cruce-lista > summary svg {
    width: 15px;
    height: 15px;
  }
  .fx-cruce-lista[open] > summary {
    margin-bottom: 10px;
  }
  .fx-cruce[data-ancha] .fx-cruce-lista > summary {
    display: none;
  }
  .fx-cruce[data-ancha] .fx-cruce-lista {
    position: sticky;
    top: calc(var(--fx-pnl-tope) + 72px);
    max-height: calc(100dvh - var(--fx-pnl-tope) - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .fx-cruce-campos {
    display: grid;
    gap: 16px;
    margin-top: 12px;
  }
  .fx-cruce:not([data-ancha]) .fx-cruce-campos {
    max-height: 46vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
  }
  .fx-cruce-seccion-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-linea-sutil);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-tinta);
  }
  .fx-cruce-seccion-titulo small {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-tenue);
  }
  .fx-cruce-grupo-titulo {
    margin: 10px 0 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-tenue);
  }
  .fx-cruce-grupo {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .fx-cruce-campo, .fx-cruce-ficha, .fx-cruce-fantasma {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--color-linea);
    border-radius: 8px;
    background: var(--color-superficie);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-tinta);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  .fx-cruce-campo {
    cursor: grab;
    transition: border-color .16s, background-color .16s, color .16s, opacity .16s;
  }
  .fx-cruce-campo:hover {
    border-color: var(--color-control);
  }
  .fx-cruce-campo-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fx-cruce-campo[aria-pressed="true"] {
    border-color: color-mix(in srgb, light-dark(#005CB9, #38A8E0) 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--color-acento) 45%, transparent);
    }
    background: color-mix(in srgb, light-dark(#005CB9, #38A8E0) 9%, light-dark(#FFFFFF, #1B2733));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-acento) 9%, var(--color-superficie));
    }
    color: var(--color-acento);
  }
  .fx-cruce-campo[aria-pressed="true"]::after {
    content: "✓";
    font-size: 11px;
    font-weight: 600;
  }
  .fx-cruce-unidad {
    display: inline-grid;
    flex: none;
    place-items: center;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 4px;
    background: var(--fx-g-pos);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--fx-g-pos) 16%, var(--color-superficie));
    }
    font-size: 10px;
    font-weight: 600;
    color: var(--color-acento-verde);
  }
  .fx-cruce-zonas {
    display: grid;
    gap: 8px;
  }
  .fx-cruce-zona {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 8px 10px;
    border: 1.5px dashed var(--color-linea);
    border-radius: 12px;
    background: color-mix(in srgb, light-dark(#FFFFFF, #1B2733) 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-superficie) 55%, transparent);
    }
    transition: border-color .16s, background-color .16s, opacity .16s;
  }
  .fx-cruce-zona[data-llena] {
    border-style: solid;
    background: var(--color-superficie);
  }
  .fx-cruce-zona > b {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-tenue);
  }
  .fx-cruce-fichas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 30px;
  }
  .fx-cruce-zona-vacia {
    font-size: var(--text-xs);
    color: var(--color-tenue);
  }
  .fx-cruce-ficha {
    gap: 0;
    padding: 0 2px 0 0;
    cursor: grab;
    box-shadow: 0 1px 2px rgba(27, 39, 51, .08);
    animation: fx-pnl-pop .18s var(--fx-pnl-curva);
  }
  .fx-cruce-ficha-nombre {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 28px;
    padding: 0 4px 0 10px;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
  }
  .fx-cruce-ficha-nombre span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fx-cruce-ficha-quitar {
    display: grid;
    flex: none;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--color-tenue);
    cursor: pointer;
  }
  .fx-cruce-ficha-quitar:hover {
    background: var(--color-lienzo);
    color: var(--color-tinta);
  }
  .fx-cruce-ficha-quitar svg {
    width: 12px;
    height: 12px;
  }
  .fx-cruce-arrastrado {
    opacity: .35;
  }
  .fx-cruce[data-arrastrando] .fx-cruce-zona[data-valida] {
    border-color: color-mix(in srgb, light-dark(#005CB9, #38A8E0) 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--color-acento) 55%, transparent);
    }
    background: color-mix(in srgb, light-dark(#005CB9, #38A8E0) 4%, light-dark(#FFFFFF, #1B2733));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-acento) 4%, var(--color-superficie));
    }
  }
  .fx-cruce[data-arrastrando] .fx-cruce-zona[data-encima] {
    border-style: solid;
    border-color: var(--color-acento);
    background: color-mix(in srgb, light-dark(#005CB9, #38A8E0) 10%, light-dark(#FFFFFF, #1B2733));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-acento) 10%, var(--color-superficie));
    }
  }
  .fx-cruce[data-arrastrando] .fx-cruce-zona[data-invalida] {
    opacity: .45;
  }
  .fx-cruce[data-arrastrando], .fx-cruce[data-arrastrando] * {
    cursor: grabbing;
  }
  .fx-cruce-marca {
    width: 3px;
    height: 26px;
    border-radius: 2px;
    background: var(--color-acento);
  }
  .fx-cruce-fantasma {
    position: fixed;
    z-index: 70;
    pointer-events: none;
    border-color: var(--color-acento);
    box-shadow: var(--shadow-anc-pop);
    transform: rotate(-2deg);
  }
  .fx-cruce-menu {
    position: fixed;
    z-index: 65;
    display: grid;
    min-width: 190px;
    padding: 4px;
    border: 1px solid var(--color-linea);
    border-radius: 10px;
    background: var(--color-superficie);
    box-shadow: var(--shadow-anc-pop);
    animation: fx-pnl-pop .14s var(--fx-pnl-curva);
  }
  .fx-cruce-menu button {
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    text-align: left;
    font-size: var(--text-xs);
    color: var(--color-tinta);
    cursor: pointer;
  }
  .fx-cruce-menu button:hover, .fx-cruce-menu button:focus-visible {
    outline: none;
    background: var(--color-lienzo);
  }
  .fx-cruce-menu button:last-child {
    margin-top: 2px;
    border-top: 1px solid var(--color-linea-sutil);
    border-radius: 0 0 7px 7px;
  }
  .fx-cruce-trabajo {
    display: grid;
    gap: 14px;
    min-width: 0;
  }
  .fx-cruce[data-vacia] .fx-cruce-trabajo .fx-pnl-tarjeta-cab {
    display: none;
  }
  .fx-cruce-ver {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .fx-cruce-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 12px 20px 0;
  }
  .fx-cruce-opciones:not(:has(> :not([hidden]))) {
    display: none;
  }
  .fx-cruce-notas {
    padding: 0 20px 16px;
  }
  .fx-cruce-notas:empty {
    display: none;
  }
  .fx-cruce-notas .fx-g-nota {
    margin-top: 4px;
  }
  .fx-cruce-grafico {
    margin-bottom: 18px;
  }
  .fx-cruce-envoltura {
    max-height: min(640px, 72vh);
    border: 1px solid var(--color-linea-sutil);
    border-radius: 10px;
  }
  .fx-cruce-tabla tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 5;
    border-top: 1px solid var(--color-linea);
    border-bottom: 0;
    background: var(--color-superficie);
    font-weight: 600;
    color: var(--color-tinta);
  }
  .fx-cruce-tabla :is(th, td):first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-superficie);
  }
  .fx-cruce-tabla thead th:first-child, .fx-cruce-tabla tfoot td:first-child {
    z-index: 12;
  }
  .fx-cruce-fila-accion {
    cursor: pointer;
  }
  .fx-cruce-poco {
    color: var(--color-tenue);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
  }
  .fx-cruce-celda {
    display: block;
    margin: -4px -6px;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: box-shadow .16s;
  }
  .fx-cruce-celda:hover {
    box-shadow: inset 0 0 0 1px var(--color-control);
  }
  .fx-cruce-celda-elegida {
    background: color-mix(in srgb, light-dark(#005CB9, #38A8E0) 14%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-acento) 14%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--color-acento);
  }
  .fx-cruce-boton-fila {
    border-radius: 4px;
    cursor: pointer;
  }
  .fx-cruce-boton-fila:hover {
    color: var(--color-acento);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .fx-cruce-inicio {
    display: grid;
    gap: 6px;
    padding: 4px 0;
  }
  .fx-cruce-inicio h3 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-tinta);
  }
  .fx-cruce-inicio p {
    margin: 0 0 8px;
    font-size: var(--text-xs);
    color: var(--color-apagado);
  }
  .fx-cruce-plantillas {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  }
  .fx-cruce-plantilla {
    display: grid;
    align-content: start;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--color-linea);
    border-radius: 12px;
    background: var(--color-superficie);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s, box-shadow .16s, transform .16s;
  }
  .fx-cruce-plantilla b {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-tinta);
  }
  .fx-cruce-plantilla span {
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--color-apagado);
  }
  .fx-cruce-plantilla:hover {
    border-color: var(--color-acento);
    box-shadow: var(--shadow-anc);
    transform: translateY(-1px);
  }
  .fx-cruce-dialogo {
    width: min(520px, calc(100vw - 32px));
  }
  .fx-cruce-dialogo[open] {
    animation: fx-pnl-modal .22s var(--fx-pnl-curva);
  }
  .fx-cruce-dialogo[open]::backdrop {
    animation: fx-pnl-aparecer .22s ease-out;
  }
  .fx-cruce-dialogo-nota {
    margin: 10px 0 0;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-apagado);
  }
  .fx-cruce-dialogo .fx-alerta {
    margin: 12px 0 0;
  }
  .fx-cruce-enlace {
    display: flex;
    gap: 8px;
  }
  /* Lista de indicadores y campos: fija al costado (por defecto) o flotante.
     Los atributos data-lista-* los pone assets/panel.js; solo en pantalla ancha. */
  .fx-cruce-lista-cab {
    display: none;
  }
  .fx-cruce[data-ancha] .fx-cruce-lista-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
  }
  .fx-cruce-lista-cab b {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-acento);
  }
  .fx-cruce-lista-cab > div {
    display: flex;
    gap: 4px;
  }
  .fx-cruce:not([data-lista-suelta]) [data-lista-cerrar] {
    display: none;
  }
  .fx-cruce-fijar svg {
    transform: rotate(40deg);
    transition: transform .3s var(--fx-pnl-curva);
  }
  .fx-cruce-fijar[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--color-acento) 40%, transparent);
    background: color-mix(in srgb, var(--color-acento) 7%, var(--color-superficie));
    color: var(--color-acento);
  }
  .fx-cruce-fijar[aria-pressed="true"] svg {
    transform: none;
  }
  .fx-cruce [data-lista-boton] {
    display: none;
  }
  .fx-cruce[data-ancha][data-lista-suelta] [data-lista-boton] {
    display: inline-flex;
  }
  .fx-cruce[data-ancha] .fx-cruce-cuerpo {
    transition: grid-template-columns .32s var(--fx-pnl-curva), column-gap .32s var(--fx-pnl-curva);
  }
  .fx-cruce[data-ancha] .fx-cruce-trabajo {
    grid-column: 2;
  }
  .fx-cruce[data-ancha][data-lista-suelta] .fx-cruce-cuerpo {
    grid-template-columns: 0 minmax(0, 1fr);
    column-gap: 0;
  }
  .fx-cruce[data-ancha][data-lista-suelta] .fx-cruce-lista {
    position: fixed;
    z-index: 44;
    top: calc(var(--fx-pnl-tope) + 12px);
    left: var(--fx-lista-izq, 12px);
    width: 260px;
    max-height: calc(100dvh - var(--fx-pnl-tope) - 24px);
    box-shadow: var(--shadow-anc-pop);
    transform: translateX(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform .26s var(--fx-pnl-curva), opacity .2s, visibility 0s linear .26s;
  }
  .fx-cruce[data-ancha][data-lista-suelta][data-lista-abierta] .fx-cruce-lista {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: transform .26s var(--fx-pnl-curva), opacity .2s, visibility 0s;
  }
  .fx-cruce[data-lista-fijando] .fx-cruce-lista {
    animation: fx-pnl-fijar .45s var(--fx-pnl-curva);
  }
  .fx-cruce[data-lista-soltando] .fx-cruce-lista {
    animation: fx-pnl-soltar .32s var(--fx-pnl-curva) forwards;
  }
  /* Asistente de IA: pedido escrito y línea de aviso. */
  .fx-cruce-ia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .fx-cruce-ia-caja {
    display: flex;
    flex: 1 1 260px;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--color-linea);
    border-radius: 10px;
    background: var(--color-superficie);
    transition: border-color .16s, box-shadow .16s;
  }
  .fx-cruce-ia-caja:focus-within {
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-acento) 18%, transparent);
  }
  .fx-cruce-ia-caja svg {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--color-acento);
  }
  .fx-cruce-ia-caja input {
    flex: 1;
    min-width: 0;
    height: 36px;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--color-tinta);
    outline: none;
  }
  .fx-cruce-ia-caja input::placeholder {
    color: var(--color-tenue);
  }
  .fx-cruce-ia[aria-busy="true"] .fx-cruce-ia-caja svg {
    animation: fx-ia-pensar 1s ease-in-out infinite;
  }
  @keyframes fx-ia-pensar {
    50% {
      opacity: .35;
      transform: scale(.85);
    }
  }
  .fx-cruce-ia-aviso {
    display: grid;
    gap: 4px;
    margin: -6px 0 0;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-apagado);
  }
  .fx-cruce-ia-aviso[data-tono="error"] {
    color: var(--color-tinta);
  }
  .fx-cruce-ia-enlace {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--color-acento);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  /* Recorrido guiado de Reportes automáticos (lo arma assets/panel.js). */
  .fx-tour-capa {
    position: fixed;
    inset: 0;
    z-index: 80;
  }
  .fx-tour-foco {
    position: fixed;
    z-index: 81;
    pointer-events: none;
    border-radius: 12px;
    box-shadow: 0 0 0 3px var(--color-acento), 0 0 0 9999px rgb(11 22 32 / 55%);
    transition: top .3s var(--fx-pnl-curva), left .3s var(--fx-pnl-curva), width .3s var(--fx-pnl-curva), height .3s var(--fx-pnl-curva);
  }
  .fx-tour-foco::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    animation: fx-tour-latido 1.6s ease-out infinite;
  }
  @keyframes fx-tour-latido {
    0% {
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-acento) 55%, transparent);
    }
    100% {
      box-shadow: 0 0 0 12px color-mix(in srgb, var(--color-acento) 0%, transparent);
    }
  }
  .fx-tour-burbuja {
    position: fixed;
    z-index: 82;
    width: min(320px, calc(100vw - 16px));
    padding: 14px 16px;
    border: 1px solid var(--color-linea);
    border-radius: 14px;
    background: var(--color-superficie);
    box-shadow: var(--shadow-anc-pop);
    animation: fx-pnl-pop .2s var(--fx-pnl-curva);
  }
  .fx-tour-burbuja h3 {
    margin: 2px 0 6px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-tinta);
  }
  .fx-tour-burbuja p {
    margin: 0;
    font-size: var(--text-xs);
    line-height: 1.55;
    color: var(--color-apagado);
  }
  .fx-tour-burbuja .fx-tour-n {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-acento);
  }
  .fx-tour-pie {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
  }
  .fx-tour-pie .fx-tour-saltar {
    margin-right: auto;
  }
  .fx-ayuda-latido {
    animation: fx-ayuda-latido 1.2s var(--fx-pnl-curva) 2;
  }
  @keyframes fx-ayuda-latido {
    0%, 100% {
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-acento) 45%, transparent);
    }
    60% {
      box-shadow: 0 0 0 9px color-mix(in srgb, var(--color-acento) 0%, transparent);
    }
  }
  .fx-cruce-enlace .fx-campo {
    flex: 1;
    min-width: 0;
    font-size: var(--text-xs);
  }
  @media (max-width: 639px) {
    .fx-cruce-nombre {
      font-size: var(--text-base);
    }
    .fx-cruce-acciones {
      width: 100%;
      margin-left: 0;
    }
    .fx-cruce-acciones .fx-pnl-menu {
      position: static;
    }
    .fx-cruce-pop {
      left: 0;
      right: 0;
      width: auto;
    }
    .fx-cruce-zona {
      grid-template-columns: 62px minmax(0, 1fr);
      gap: 8px;
    }
    .fx-cruce-opciones, .fx-cruce-notas {
      padding-inline: 16px;
    }
    .fx-cruce-enlace {
      flex-wrap: wrap;
    }
  }
  @media (pointer: coarse) {
    .fx-cruce-campo, .fx-cruce-ficha {
      min-height: 36px;
    }
    .fx-cruce-ficha-nombre {
      height: 34px;
    }
    .fx-cruce-ficha-quitar {
      width: 32px;
      height: 32px;
    }
  }
  .fx-panel-tooltip {
    position: fixed;
    z-index: 60;
    pointer-events: none;
    max-width: 280px;
    padding: 8px 10px;
    border: 1px solid var(--color-linea);
    border-radius: 8px;
    background: var(--color-superficie);
    color: var(--color-tinta);
    font-size: var(--text-xs);
    box-shadow: var(--shadow-anc-pop);
  }
  .fx-panel-tooltip[hidden] {
    display: none;
  }
  .fx-g-tip-titulo {
    margin-bottom: 4px;
    color: var(--color-apagado);
  }
  .fx-g-tip-fila {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .fx-g-tip-fila + .fx-g-tip-fila {
    margin-top: 2px;
  }
  .fx-g-tip-fila strong {
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .fx-g-tip-fila span:last-child {
    color: var(--color-apagado);
  }
  @keyframes fx-pnl-entrar {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }
  @keyframes fx-pnl-pop {
    from {
      opacity: 0;
      transform: translateY(-4px) scale(.98);
    }
  }
  @keyframes fx-pnl-modal {
    from {
      opacity: 0;
      transform: translateY(8px) scale(.98);
    }
  }
  @keyframes fx-pnl-aparecer {
    from {
      opacity: 0;
    }
  }
  @keyframes fx-pnl-crecer {
    from {
      transform: scaleY(0);
    }
  }
  @keyframes fx-pnl-trazar {
    from {
      stroke-dashoffset: 1;
    }
  }
  @keyframes fx-pnl-progreso {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(300%);
    }
  }
  @keyframes fx-pnl-girar {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes fx-pnl-latido {
    50% {
      opacity: .25;
    }
  }
  @keyframes fx-pnl-brillo {
    from {
      background-position: 100% 0;
    }
    to {
      background-position: 0 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .fx-pnl-progreso::after {
      width: 100%;
      animation: none;
      opacity: .6;
    }
    .fx-panel[aria-busy="true"] :is([data-actualizar] svg, .fx-pnl-estado::before), .fx-panel[data-primera-carga] [data-graf]:empty::before, .fx-panel[data-primera-carga] .fx-pnl-kpi-valor {
      animation: none;
    }
  }
  @media (max-width: 639px) {
    .fx-pnl-filtros {
      position: relative;
      top: auto;
      margin: 0 -16px;
      padding: 10px 16px;
      background: var(--color-lienzo);
      backdrop-filter: none;
    }
    .fx-pnl-filtros-fila {
      position: relative;
    }
    .fx-pnl-menu {
      position: static;
    }
    .fx-pnl-menu[data-menu-sucursales] {
      margin-left: 0;
    }
    .fx-pnl-pop, .fx-pnl-pop-ancho {
      left: 0;
      right: 0;
      width: auto;
      max-width: none;
    }
    .fx-pnl-segmento {
      width: 100%;
    }
    .fx-pnl-segmento button {
      flex: 1 1 auto;
      padding: 5px 7px;
    }
    .fx-pnl-segmento-chico {
      width: auto;
    }
    .fx-pnl-vistas {
      mask-image: linear-gradient(90deg, #000 85%, transparent);
    }
    .fx-pnl-rango {
      flex: 1 1 100%;
      min-width: 0;
    }
    .fx-pnl-rango input {
      flex: 1;
      width: 0;
    }
    .fx-pnl-rango input, .fx-pnl-buscar input {
      font-size: 16px;
    }
    .fx-pnl-vistas button {
      padding: 10px 10px 12px;
      font-size: var(--text-xs);
    }
    .fx-pnl-estado {
      padding-bottom: 8px;
    }
    .fx-pnl-tarjeta-cab {
      padding: 14px 16px 0;
    }
    .fx-pnl-tarjeta-cuerpo {
      padding: 14px 16px 16px;
    }
    .fx-pnl-kpi {
      padding: 12px 14px;
    }
    .fx-pnl-kpi-valor {
      font-size: var(--text-lg);
    }
    .fx-pnl-chispa {
      width: 64px;
    }
    .fx-pnl-casos-acciones {
      flex-wrap: wrap;
      width: 100%;
    }
    .fx-pnl-casos-acciones .fx-pnl-buscar {
      width: 100%;
    }
    .fx-g-barra {
      grid-template-columns: minmax(0, 1fr) auto;
      row-gap: 4px;
    }
    .fx-g-barra-etiqueta {
      grid-column: 1 / -1;
    }
    .fx-g-calor {
      grid-template-columns: 2.8em repeat(7, minmax(0, 1fr));
    }
    .fx-g-celda {
      height: 26px;
      font-size: 10px;
    }
  }
  @media (max-width: 479px) {
    .fx-sat {
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
    }
    .fx-sat-datos {
      width: 100%;
    }
  }
  @media (pointer: coarse) {
    .fx-pnl-boton, .fx-pnl-rango, .fx-pnl-buscar, .fx-pnl-pais span {
      height: 40px;
    }
    .fx-pnl-boton-icono {
      width: 40px;
    }
  }
}
@media (max-width: 639px) {
  .fx-encabezado-interno {
    gap: calc(var(--spacing) * 2.5);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    min-height: 56px;
  }
  .fx-marca {
    gap: calc(var(--spacing) * 2);
  }
  .fx-marca img {
    height: 34px;
  }
  .fx-marca-texto {
    display: none;
  }
  .fx-encabezado-acciones {
    gap: calc(var(--spacing) * 2);
  }
  .fx-usuario-info {
    display: none;
  }
  .fx-avatar {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }
  .fx-pestanas {
    display: none;
  }
  .fx-menu-movil {
    display: block;
  }
  .fx-lienzo {
    padding-inline: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 8);
  }
  .fx-titulo-pagina {
    margin-bottom: calc(var(--spacing) * 4);
    align-items: flex-start;
  }
  .fx-titulo-pagina h1 {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .fx-titulo-pagina p {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .fx-kpi {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3.5);
  }
  .fx-tarjeta-cab {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3.5);
  }
  .fx-tarjeta-cuerpo {
    padding: calc(var(--spacing) * 4);
  }
  .fx-aviso {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3.5);
  }
  .fx-modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
  .fx-modal-cab {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3.5);
  }
  .fx-modal-cuerpo {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
  }
  .fx-modal-pie {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .fx-modal-pie .fx-btn {
    flex: 1;
  }
  .fx-ingreso {
    align-items: flex-start;
    padding: calc(var(--spacing) * 4);
  }
  .fx-ingreso-tarjeta {
    margin-block: auto;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    max-width: 430px;
  }
  .fx-ingreso-tarjeta img {
    height: 46px;
  }
  .fx-campo {
    font-size: 16px;
  }
}
@media (max-width: 420px) {
  .fx-usuario {
    display: none;
  }
  .fx-salir-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
}
@media (pointer: coarse) {
  .fx-btn, .fx-pestana, .fx-modal-cerrar {
    min-height: 44px;
  }
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-border-spacing-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-spacing-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-tracking: initial;
      --tw-border-spacing-x: 0;
      --tw-border-spacing-y: 0;
    }
  }
}
@layer components {

  /* --- Rol Jefe de Taller -------------------------------------------------- */
  /* Texto oscuro: el naranja ANC no alcanza contraste AA como texto pequeño. */
  .fx-rol-jefe_taller { background: rgba(233, 78, 27, .10); color: var(--color-tinta); }

  /* --- Lista ----------------------------------------------------------------- */
  .fx-usr-aviso { margin-bottom: 16px; }

  .fx-usr-filtros {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px 210px;
    gap: 12px;
    align-items: end;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-linea-sutil);
  }

  .fx-usr-buscar { position: relative; }
  .fx-usr-buscar > svg {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: var(--color-tenue);
    pointer-events: none;
  }
  .fx-usr-buscar > .fx-campo { padding-left: 36px; }

  .fx-usr-persona {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
  }
  .fx-usr-persona:hover .fx-nombre { color: var(--color-acento); }
  .fx-avatar.fx-usr-avatar { width: 32px; height: 32px; flex: none; font-size: 11px; }
  .fx-avatar.fx-usr-avatar-grande { width: 40px; height: 40px; flex: none; font-size: 13px; }
  .fx-usr-min { min-width: 0; }
  .fx-usr-linea { display: block; }
  .fx-usr-linea .fx-ambito { margin-left: 4px; }
  .fx-usr-nota-rol { margin-top: 4px; }
  .fx-usr-fecha { white-space: nowrap; }

  /* --- Panel: secciones ---------------------------------------------------- */
  .fx-usr-cab { display: flex; align-items: center; gap: 12px; min-width: 0; }

  .fx-usr-seccion { padding: 22px 0; border-top: 1px solid var(--color-linea-sutil); }
  .fx-usr-form > .fx-usr-seccion:first-of-type { padding-top: 0; border-top: 0; }
  .fx-usr-seccion-suelta { padding-bottom: 0; }

  .fx-usr-seccion-titulo {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-tenue);
  }
  .fx-usr-seccion-ayuda { margin: -6px 0 14px; font-size: 12px; line-height: 1.5; color: var(--color-apagado); }

  .fx-usr-campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
    align-items: start;
  }
  .fx-usr-ancho { grid-column: 1 / -1; }

  .fx-usr-ayuda { margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: var(--color-tenue); }
  .fx-usr-alerta-rol {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--color-tinta);
    background: rgba(233, 78, 27, .08);
    border: 1px solid rgba(233, 78, 27, .22);
  }

  /* --- Select nativo con la misma flecha que los selectores con casillas ---- */
  .fx-usr-select { position: relative; }
  .fx-usr-select > select.fx-campo { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; }
  .fx-usr-select::after,
  .fx-usr-multi > summary::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.75px solid var(--color-apagado);
    border-bottom: 1.75px solid var(--color-apagado);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .15s ease;
    pointer-events: none;
  }

  /* --- Selector con casillas (details): parece un select ------------------- */
  .fx-usr-multi > summary {
    position: relative;
    display: flex;
    align-items: center;
    padding-right: 38px;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .fx-usr-multi > summary::-webkit-details-marker { display: none; }
  .fx-usr-multi[open] > summary {
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px rgba(0, 92, 185, .15);
  }
  .fx-usr-multi[open] > summary::after { transform: translateY(-25%) rotate(-135deg); }

  .fx-usr-multi-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fx-usr-multi-vacio { color: var(--color-tenue); }

  .fx-usr-menu {
    margin-top: 6px;
    overflow: hidden;
    border: 1px solid var(--color-linea);
    border-radius: 10px;
    background: var(--color-superficie);
    box-shadow: var(--shadow-anc);
  }
  .fx-usr-menu-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid var(--color-linea-sutil);
    background: var(--color-lienzo);
  }
  .fx-usr-menu-barra > .fx-usr-buscar { flex: 1 1 220px; }

  .fx-usr-opciones { padding: 4px; }
  .fx-usr-opciones-largas { max-height: 320px; overflow-y: auto; padding: 0 4px 4px; }

  .fx-usr-grupo-titulo {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0 -4px;
    padding: 8px 12px 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-tenue);
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-linea-sutil);
  }

  .fx-usr-opcion {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 7px 8px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--color-tinta);
    cursor: pointer;
  }
  .fx-usr-opcion:hover { background: var(--color-lienzo); }
  .fx-usr-opcion > input {
    width: 16px;
    height: 16px;
    margin: 0;
    flex: none;
    accent-color: #005CB9;
    cursor: pointer;
  }
  .fx-usr-opcion-codigo { flex: none; min-width: 64px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .fx-usr-opcion-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-apagado); }
  .fx-usr-opcion-texto { display: flex; flex-direction: column; gap: 1px; font-weight: 500; }
  .fx-usr-opcion-nota { font-size: 11px; font-weight: 400; color: var(--color-tenue); }
  .fx-usr-opcion-suelta { margin-top: 10px; padding-left: 0; }
  .fx-usr-opcion-suelta:hover { background: transparent; }

  .fx-usr-separador { height: 1px; margin: 4px 8px; background: var(--color-linea-sutil); }
  .fx-usr-menu-vacio { margin: 0; padding: 18px 12px; text-align: center; font-size: 12px; color: var(--color-tenue); }

  /* --- Historial --------------------------------------------------------- */
  .fx-usr-datos {
    display: grid;
    grid-template-columns: minmax(130px, auto) 1fr;
    gap: 8px 16px;
    margin: 0;
    font-size: 12px;
  }
  .fx-usr-datos dt { color: var(--color-apagado); }
  .fx-usr-datos dd { margin: 0; font-weight: 500; color: var(--color-tinta); }

  .fx-usr-acciones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
  }

  /* --- Pantallas angostas -------------------------------------------------- */
  @media (max-width: 720px) {
    .fx-usr-filtros { grid-template-columns: 1fr 1fr; }
    .fx-usr-filtros > :first-child { grid-column: 1 / -1; }
  }
  @media (max-width: 639px) {
    .fx-usr-filtros { padding: 12px 16px; }
    .fx-usr-campos,
    .fx-usr-acciones { grid-template-columns: minmax(0, 1fr); }
  }
}

/* Fuera de @layer a propósito: la regla móvil de .fx-modal (sección 5) está
   fuera de capa y le ganaría a cualquier regla dentro de components. */
@media (max-width: 639px) {
  .fx-modal.fx-modal-lateral,
  .fx-modal.fx-modal-lateral[open] { width: 100vw; max-height: 100dvh; border-radius: 0; }
}