/* PCI Design System: shared visual contract for every DEV surface. */
/* Inter (variable, SIL OFL 1.1), served from /vendor/inter like hls.js and dash.js: no CDN. Latin
   and Latin Extended, the two subsets the app's Spanish and English need. */
@font-face { font-family: "PCI Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/vendor/inter/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+25B2, U+25BC, U+FEFF, U+FFFD; }
@font-face { font-family: "PCI Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/vendor/inter/inter-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  color-scheme: light;
  --pci-primary: #243c79;
  --pci-primary-hover: #182b5d;
  --pci-accent-ink: var(--pci-primary);
  --pci-danger-ink: var(--pci-danger);
  --pci-secondary: #0e163b;
  --pci-accent: #6f9fe8;
  --pci-bg: #f4f7fb;
  --pci-surface: #ffffff;
  --pci-surface-alt: #f7f9fc;
  /* Un escalon mas que `surface`, para lo que flota por encima de una tarjeta:
     menus, hojas, popovers. En claro es el mismo blanco y la sombra hace el
     trabajo; en oscuro si sube de verdad. */
  --pci-surface-raised: #ffffff;
  --pci-text: #10213d;
  --pci-text-muted: #586980;
  --pci-border: #dce4ef;
  --pci-success: #13764f;
  --pci-warning: #925d00;
  --pci-danger: #c6423b;
  --pci-info: #397bd1;

  /* Radios: un paso mas suaves, con un nivel extra para lo grande y la pildora
     que 40 sitios escribian como 999px o 99px a mano. */
  --pci-radius-sm: 8px;
  --pci-radius-md: 12px;
  --pci-radius-lg: 18px;
  --pci-radius-xl: 26px;
  --pci-radius-pill: 999px;

  /* Ritmo de espacio. Faltaban el 12 y el 20, que son los dos pasos que las
     paginas escribian a mano entre el 8 y el 16. */
  --pci-space-2xs: 2px;
  --pci-space-xs: 4px;
  --pci-space-sm: 8px;
  --pci-space-ms: 12px;
  --pci-space-md: 16px;
  --pci-space-ml: 20px;
  --pci-space-lg: 24px;
  --pci-space-xl: 32px;
  --pci-space-2xl: 48px;

  /* Una sola pila para toda la app. Hasta ahora habia seis, y 24 declaraciones
     pedian `Inter` sin que el proyecto la cargara en ningun sitio: ni
     `@font-face`, ni enlace a Google Fonts, ni woff local. Asi que cada pagina
     caia a la siguiente de SU pila y no todas tenian la misma: en Windows unas
     acababan en Segoe UI y otras en Segoe UI Variable, y en el iPhone del
     usuario las de `Inter, Segoe UI, Arial` acababan en **Arial** mientras las
     de `system-ui` usaban San Francisco. Dos tipografias distintas en la misma
     app, segun la pagina.
     La pila nativa no pesa nada, no parpadea y da la letra buena de cada
     sistema. Si algun dia se quiere Inter de verdad, se sirve desde /vendor
     como hls.js y dash.js, y se mete aqui delante.
     20-10: hecho, a pedido del dueño (mejores letras en los dashboards). Una
     sola letra en toda la app, la misma en Windows y en el iPhone; la pila
     nativa queda detras mientras carga (font-display: swap). */
  --pci-font-sans: "PCI Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pci-font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --pci-font-xs: 11px;
  --pci-font-sm: 13px;
  --pci-font-md: 15px;
  --pci-font-lg: 20px;
  --pci-font-xl: 28px;
  /* El unico tamano fluido: un titular de portada que no hay que repetir por
     breakpoint. */
  --pci-font-2xl: clamp(28px, 3.4vw, 40px);
  --pci-leading-tight: 1.2;
  --pci-leading-snug: 1.35;
  --pci-leading-normal: 1.55;
  /* Un titular grande con tracking de parrafo parece suelto; una etiqueta en
     mayusculas sin tracking parece apretada. Un token para cada caso. */
  --pci-tracking-tight: -.015em;
  --pci-tracking-wide: .08em;

  /* Elevacion en dos capas por nivel: un contacto corto y pegado, y una difusa
     y amplia. Alfa baja, que es lo que la separa de una sombra de 2015. */
  --pci-shadow-xs: 0 1px 2px rgba(16, 32, 64, .06), 0 1px 1px rgba(16, 32, 64, .04);
  --pci-shadow-sm: 0 1px 2px rgba(16, 32, 64, .05), 0 6px 16px rgba(16, 32, 64, .07);
  --pci-shadow-md: 0 2px 6px rgba(16, 32, 64, .06), 0 16px 36px rgba(16, 32, 64, .10);
  --pci-shadow-lg: 0 6px 16px rgba(16, 32, 64, .08), 0 32px 64px rgba(16, 32, 64, .14);

  --pci-height-sm: 32px;
  --pci-height-md: 40px;
  --pci-height-lg: 44px;

  /* Movimiento. Hasta ahora habia 11 transiciones en todo el proyecto y cada
     una con su duracion inventada. */
  --pci-ease: cubic-bezier(.4, 0, .2, 1);
  --pci-ease-out: cubic-bezier(.16, 1, .3, 1);
  --pci-motion-fast: 120ms;
  --pci-motion-base: 200ms;
  --pci-motion-slow: 320ms;

  /* Anillos: el de foco es el mismo en toda la app, y el de peligro existe para
     que un campo invalido no tenga que inventarse el suyo. */
  --pci-ring: 0 0 0 3px color-mix(in srgb, var(--pci-primary) 26%, transparent);
  --pci-ring-danger: 0 0 0 3px color-mix(in srgb, var(--pci-danger) 28%, transparent);
  /* Una linea mas fina que el borde, para separar sin dibujar una caja. */
  --pci-hairline: color-mix(in srgb, var(--pci-border) 72%, transparent);
  /* Cabeceras que dejan ver lo que pasa por debajo. */
  --pci-surface-glass: color-mix(in srgb, var(--pci-surface) 76%, transparent);

  /* Tintes derivados. Son exactamente lo que las paginas escribian a mano
     (#e5eefc, #fff3d6, #e7f5ee...), pero calculados sobre la superficie del modo
     y sobre el tema de acento elegido, asi que siguen a los dos. */
  --pci-primary-subtle: color-mix(in srgb, var(--pci-primary) 10%, var(--pci-surface));
  --pci-primary-border: color-mix(in srgb, var(--pci-primary) 38%, var(--pci-border));
  --pci-info-subtle: color-mix(in srgb, var(--pci-info) 12%, var(--pci-surface));
  --pci-success-subtle: color-mix(in srgb, var(--pci-success) 12%, var(--pci-surface));
  --pci-warning-subtle: color-mix(in srgb, var(--pci-warning) 14%, var(--pci-surface));
  --pci-danger-subtle: color-mix(in srgb, var(--pci-danger) 12%, var(--pci-surface));
}

:root[data-pci-mode="dark"] {
  color-scheme: dark;
  /* Lightened one step so accent text also clears AA on --pci-surface-alt,
     the lightest of the three dark surfaces. color-mix keeps it theme-aware. */
  --pci-accent-ink: color-mix(in srgb, var(--pci-accent) 78%, #fff);
  /* Same idea for danger used as TEXT: --pci-danger is tuned to be read as a
     fill or a border, and on the lighter dark surfaces it lands at 3.7:1.
     Lightened one step it clears AA on all three. */
  --pci-danger-ink: color-mix(in srgb, var(--pci-danger) 72%, #fff);
  /* These three had no dark values at all, so they kept their light-mode
     colours: dark amber, red and green on dark surfaces, all below 3:1. */
  --pci-success: #4ecf96;
  --pci-warning: #e8a53d;
  --pci-danger: #f08c86;
  --pci-bg: #10141f;
  --pci-surface: #202c47;
  --pci-surface-alt: #2b395a;
  --pci-text: #edeff5;
  --pci-text-muted: #a7afc2;
  --pci-border: rgba(255, 255, 255, .14);
  /* En oscuro la sombra no separa: lo que separa es que la superficie suba. Asi
     que `raised` es un escalon real y las sombras son mas profundas y con menos
     difusion de color. */
  --pci-surface-raised: #26324f;
  --pci-shadow-xs: 0 1px 2px rgba(0, 0, 0, .24);
  --pci-shadow-sm: 0 2px 6px rgba(0, 0, 0, .22), 0 8px 20px rgba(0, 0, 0, .18);
  --pci-shadow-md: 0 4px 12px rgba(0, 0, 0, .26), 0 18px 46px rgba(0, 0, 0, .3);
  --pci-shadow-lg: 0 8px 24px rgba(0, 0, 0, .3), 0 36px 72px rgba(0, 0, 0, .38);
  /* El cristal de la cabecera necesita mas cuerpo en oscuro o se lee el
     contenido por debajo del titulo. */
  --pci-surface-glass: color-mix(in srgb, var(--pci-surface) 86%, transparent);
  /* Un tinte del 10% sobre una superficie oscura no se ve: en oscuro los tintes
     van mas cargados. */
  --pci-primary-subtle: color-mix(in srgb, var(--pci-accent) 20%, var(--pci-surface));
  --pci-primary-border: color-mix(in srgb, var(--pci-accent) 46%, var(--pci-border));
  --pci-info-subtle: color-mix(in srgb, var(--pci-info) 24%, var(--pci-surface));
  --pci-success-subtle: color-mix(in srgb, var(--pci-success) 20%, var(--pci-surface));
  --pci-warning-subtle: color-mix(in srgb, var(--pci-warning) 20%, var(--pci-surface));
  --pci-danger-subtle: color-mix(in srgb, var(--pci-danger) 20%, var(--pci-surface));
}

:root[data-pci-theme="light-blue"] { --pci-primary: #1f6fb8; --pci-primary-hover: #175994; --pci-accent: #69b7ef; --pci-info: #1f6fb8; }
:root[data-pci-theme="navy"] { --pci-primary: #243c79; --pci-primary-hover: #182b5d; --pci-accent: #6f9fe8; --pci-info: #397bd1; }
:root[data-pci-theme="gray"] { --pci-primary: #596579; --pci-primary-hover: #414c5e; --pci-accent: #91a0b5; --pci-info: #596579; }
:root[data-pci-theme="green"] { --pci-primary: #19734a; --pci-primary-hover: #125738; --pci-accent: #43b77d; --pci-info: #19734a; }
:root[data-pci-theme="teal"] { --pci-primary: #007d78; --pci-primary-hover: #00615d; --pci-accent: #38b7ad; --pci-info: #007d78; }
:root[data-pci-theme="purple"] { --pci-primary: #6842a5; --pci-primary-hover: #4e2f80; --pci-accent: #a884e4; --pci-info: #6842a5; }
:root[data-pci-theme="pink"] { --pci-primary: #c23b7a; --pci-primary-hover: #9c2f61; --pci-accent: #e881b3; --pci-info: #c23b7a; }
:root[data-pci-theme="red"] { --pci-primary: #e62020; --pci-primary-hover: #b81a1a; --pci-accent: #ff2c2c; --pci-info: #e62020; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--pci-bg); }
/* La pila va aqui y no en cada pagina. Hasta el 11-10 ninguna hoja compartida
   la ponia en `body`: una pagina que no la declarara se servia en **Times New
   Roman**, y asi se estuvo sirviendo `maintenance-app.html` desde que se porto.
   Lo encontro `npm run verify:design-tokens`, no una lectura del CSS. */
body { min-width: 0; overflow-x: hidden; color: var(--pci-text); font-family: var(--pci-font-sans); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:where(button, a, input, select, textarea):focus-visible { outline: 3px solid color-mix(in srgb, var(--pci-accent) 42%, transparent); outline-offset: 2px; }
img, svg, video { max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Compatibility bridge: legacy modules inherit the PCI contract instead of
   keeping a second mode/palette. The legacy names remain only as aliases so
   existing markup and JavaScript IDs stay compatible. */
body {
  --canvas: var(--pci-bg);
  --bg: var(--pci-bg);
  --paper: var(--pci-bg);
  --ink: var(--pci-text);
  --text: var(--pci-text);
  --txt: var(--pci-text);
  --muted: var(--pci-text-muted);
  --text-muted: var(--pci-text-muted);
  --ink-soft: var(--pci-text-muted);
  --line: var(--pci-border);
  --border: var(--pci-border);
  --surface: var(--pci-surface);
  --surface-solid: var(--pci-surface);
  --panel: var(--pci-surface);
  --panel2: var(--pci-surface-alt);
  --card: var(--pci-surface);
  --card-bg: var(--pci-surface);
  --brand: var(--pci-primary);
  --brand-2: var(--pci-accent);
  --blue: var(--pci-primary);
  --navy: var(--pci-secondary);
  --primary: var(--pci-primary);
  --accent: var(--pci-accent);
  --good: var(--pci-success);
  --success: var(--pci-success);
  --ok: var(--pci-success);
  --danger: var(--pci-danger);
  --warning: var(--pci-warning);
  --radius: var(--pci-radius-lg);
  --shadow: var(--pci-shadow-md);
  --vi-navy: var(--pci-secondary);
  --vi-paper: var(--pci-bg);
  --vi-card: var(--pci-surface);
  --vi-ink: var(--pci-text);
  --vi-muted: var(--pci-text-muted);
  --vi-line: var(--pci-border);
  --vi-blue: var(--pci-primary);
  --vi-good: var(--pci-success);
  --vi-danger: var(--pci-danger);
  --vi-radius: var(--pci-radius-lg);
  --pci-navy: var(--pci-secondary);
  --pci-blue: var(--pci-primary);
  --pci-ink: var(--pci-text);
  --pci-muted: var(--pci-text-muted);
  --pci-line: var(--pci-border);
  /* Shared form/dashboard aliases. These are aliases, not a second palette. */
  --form-ink: var(--pci-text);
  --form-ink-soft: var(--pci-text-muted);
  --form-ink-faint: color-mix(in srgb, var(--pci-text-muted) 72%, var(--pci-surface));
  --form-line: var(--pci-border);
  --form-bg: var(--pci-bg);
  --form-surface: var(--pci-surface);
  --form-surface-2: var(--pci-surface-alt);
  --form-field: var(--pci-surface);
  --form-primary: var(--pci-primary);
  --form-primary-hover: var(--pci-primary-hover);
  --form-primary-text: #fff;
  --form-blue: var(--pci-primary);
  --form-amber: var(--pci-surface);
  --form-amber-ink: var(--pci-accent-ink);
  --form-good: var(--pci-success);
  --form-danger: var(--pci-danger);
  --form-shadow: var(--pci-shadow-md);
}

.pci-theme-controls { display: inline-flex; align-items: center; gap: var(--pci-space-sm); position: relative; }
.pci-theme-icon { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pci-theme-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 10001; display: grid; gap: 5px; min-width: 190px; padding: 8px; border: 1px solid var(--pci-border); border-radius: var(--pci-radius-md); background: var(--pci-surface); color: var(--pci-text); box-shadow: var(--pci-shadow-md); }
.pci-theme-menu[hidden] { display: none; }
.pci-theme-menu button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px; padding: 7px 9px; border: 0; border-radius: var(--pci-radius-sm); background: transparent; color: inherit; cursor: pointer; text-align: left; }
.pci-theme-menu button:hover, .pci-theme-menu button[aria-checked="true"] { background: color-mix(in srgb, var(--pci-primary) 12%, var(--pci-surface)); }
.pci-theme-swatch { width: 15px; height: 15px; flex: 0 0 15px; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pci-text) 18%, transparent); }
.pci-theme-label { font-size: var(--pci-font-sm); font-weight: 700; }
.pci-theme-menu-title { padding: 3px 9px 5px; color: var(--pci-text-muted); font-size: var(--pci-font-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 600px) {
  .pci-theme-menu { position: fixed; top: auto; right: 10px; bottom: 10px; min-width: 210px; }

  .access-header,
  .app-header {
    flex-wrap: wrap;
  }

  .dash-top-actions,
  .top-actions,
  .app-actions {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .dash-top-actions .pci-theme-controls,
  .top-actions .pci-theme-controls,
  .app-actions .pci-theme-controls {
    margin-left: auto;
  }
}

/* Internal management surfaces, including Invoice Supervisor, use the same
   visual primitives without changing their existing business markup. */
html[data-invoice-production-ui="1"] body.pci-native {
  background: var(--pci-bg) !important;
  color: var(--pci-text);
}
html[data-invoice-production-ui="1"] body.pci-native .appbar {
  background: color-mix(in srgb, var(--pci-surface) 94%, transparent);
  border-color: var(--pci-border);
  color: var(--pci-text);
}
html[data-invoice-production-ui="1"] body.pci-native .appbar button,
html[data-invoice-production-ui="1"] body.pci-native .appbar .button,
html[data-invoice-production-ui="1"] body.pci-native button,
html[data-invoice-production-ui="1"] body.pci-native .button {
  border-color: var(--pci-border);
  border-radius: var(--pci-radius-md);
  background: var(--pci-surface-alt) !important;
  color: var(--pci-text);
}
html[data-invoice-production-ui="1"] body.pci-native .primary {
  background: linear-gradient(135deg, var(--pci-primary), var(--pci-primary-hover)) !important;
  border-color: var(--pci-primary);
  color: #fff;
}
html[data-invoice-production-ui="1"] body.pci-native .panel,
html[data-invoice-production-ui="1"] body.pci-native .kpi,
html[data-invoice-production-ui="1"] body.pci-native .editor {
  border-color: var(--pci-border);
  border-radius: var(--pci-radius-lg);
  background: var(--pci-surface) !important;
  color: var(--pci-text);
  box-shadow: var(--pci-shadow-sm);
}
html[data-invoice-production-ui="1"] body.pci-native input,
html[data-invoice-production-ui="1"] body.pci-native select,
html[data-invoice-production-ui="1"] body.pci-native textarea {
  border-color: var(--pci-border);
  border-radius: var(--pci-radius-md);
  background: var(--pci-surface-alt);
  color: var(--pci-text);
}
html[data-invoice-production-ui="1"] body.pci-native th {
  background: var(--pci-surface-alt);
  color: var(--pci-accent-ink);
}
html[data-invoice-production-ui="1"] body.pci-native td {
  border-color: var(--pci-border);
  color: var(--pci-text);
}

/* ACCESS CENTER surfaces must remain readable in both modes. */
body.pci-native .services-page .service-card,
body.pci-native .services-page .prod-card {
  border-color: var(--pci-border);
  background: var(--pci-surface);
  color: var(--pci-text);
  box-shadow: var(--pci-shadow-sm);
}
body.pci-native .services-page .service-card h2,
body.pci-native .services-page .prod-card h2,
body.pci-native .services-page .service-card p,
body.pci-native .services-page .prod-card p {
  color: var(--pci-text);
}
body.pci-native .services-page .service-copy p,
body.pci-native .services-page .service-state,
body.pci-native .services-page .prod-card p {
  color: var(--pci-text-muted);
}
body.pci-native .services-page .service-action {
  border-color: var(--pci-border);
  background: var(--pci-surface-alt);
  color: var(--pci-accent-ink);
}
body.pci-native .services-page .locked-label {
  border-color: color-mix(in srgb, var(--pci-warning) 45%, var(--pci-border));
  color: var(--pci-warning);
}

/* Shared primitives for legacy PCI pages. Layout remains module-owned; color,
   surfaces, controls and states come from the same token contract. */
body.pci-native .top,
body.pci-native .vi-top,
body.pci-native .pci-topbar,
body.pci-native .appbar {
  background: color-mix(in srgb, var(--pci-surface) 96%, transparent) !important;
  color: var(--pci-text);
  border-color: var(--pci-border);
}
body.pci-native .top h1,
body.pci-native .top h2,
body.pci-native .top p,
body.pci-native .top .brand strong,
body.pci-native .top .brand small,
body.pci-native .vi-brand strong,
body.pci-native .vi-brand small,
body.pci-native .header-info,
body.pci-native .vi-clock {
  color: var(--pci-text);
}
body.pci-native .top p,
body.pci-native .vi-status,
body.pci-native .vi-clock,
body.pci-native .header-info #weather,
body.pci-native .meta,
body.pci-native label {
  color: var(--pci-text-muted) !important;
}
body.pci-native .card,
body.pci-native .vi-card,
body.pci-native .panel,
body.pci-native .kpi,
body.pci-native .module-card,
body.pci-native .rail,
body.pci-native .dashboard-panel,
body.pci-native .shift-card,
body.pci-native .sidecard {
  background: var(--pci-surface) !important;
  color: var(--pci-text) !important;
  border-color: var(--pci-border) !important;
  box-shadow: var(--pci-shadow-sm) !important;
}
body.pci-native input,
body.pci-native select,
body.pci-native textarea,
body.pci-native .vi-time-button,
body.pci-native .vi-pill,
body.pci-native .chip,
body.pci-native .btn,
body.pci-native .button {
  background: var(--pci-surface-alt) !important;
  color: var(--pci-text) !important;
  border-color: var(--pci-border) !important;
}
body.pci-native .primary,
body.pci-native .btn-primary,
body.pci-native .button.primary,
body.pci-native .vi-submit,
body.pci-native .pci-btn:not(.pci-btn-secondary):not(.pci-btn-danger) {
  background: linear-gradient(135deg, var(--pci-primary), var(--pci-primary-hover)) !important;
  color: #fff !important;
  border-color: var(--pci-primary) !important;
}
body.pci-native .error,
body.pci-native .status.error,
body.pci-native .vi-status.error { color: var(--pci-danger); }
body.pci-native .success,
body.pci-native .status.ok,
body.pci-native .vi-status.success { color: var(--pci-success); }


/* Final theme precedence layer.
   Several legacy surfaces intentionally keep !important declarations for their
   local layouts. These selectors are the single approved visual override so
   an accent theme always reaches the visible controls without changing DOM,
   dimensions or module behavior. */
html[data-pci-theme] body.pci-native .primary,
html[data-pci-theme] body.pci-native button.primary,
html[data-pci-theme] body.pci-native .button.primary,
html[data-pci-theme] body.pci-native .btn-primary,
html[data-pci-theme] body.pci-native .btn.primary,
html[data-pci-theme] body.pci-native .vi-submit,
html[data-pci-theme] body.pci-native .pci-btn:not(.pci-btn-secondary):not(.pci-btn-danger),
html[data-pci-theme] .pci-home .button.primary {
  background: linear-gradient(135deg, var(--pci-primary), var(--pci-primary-hover)) !important;
  border-color: var(--pci-primary) !important;
  color: #fff !important;
}

html[data-pci-theme] body.pci-native .service-action,
html[data-pci-theme] body.pci-native .route a,
html[data-pci-theme] body.pci-native .nav a,
html[data-pci-theme] body.pci-native .vi-nav a,
html[data-pci-theme] body.pci-native .breadcrumb a,
html[data-pci-theme] body.pci-native .dash-nav a,
html[data-pci-theme] .pci-home .button:not(.primary),
html[data-pci-theme] .pci-home .pci-theme-toggle {
  color: var(--pci-accent-ink) !important;
  border-color: var(--pci-border);
}

html[data-pci-theme] body.pci-native .active,
html[data-pci-theme] body.pci-native .tab-btn.active,
html[data-pci-theme] body.pci-native .tab-summary.active,
html[data-pci-theme] body.pci-native [aria-current="page"],
html[data-pci-theme] body.pci-native [aria-selected="true"],
html[data-pci-theme] .pci-home .pci-pill.active {
  background: var(--pci-primary);
  border-color: var(--pci-primary);
  color: #fff;
}

html[data-pci-theme] body.pci-native .loading-line,
html[data-pci-theme] body.pci-native .vi-glow,
html[data-pci-theme] body.pci-native .progress > span,
html[data-pci-theme] body.pci-native .progress-bar > span,
html[data-pci-theme] body.pci-native .meter > span {
  background: var(--pci-accent);
  border-color: var(--pci-accent);
}

html[data-pci-theme] body.pci-native .top,html[data-pci-theme] body.pci-native .vi-top,html[data-pci-theme] body.pci-native .pci-topbar,html[data-pci-theme] body.pci-native .appbar,html[data-pci-theme] body.pci-native .access-header,html[data-pci-theme] .pci-home .hero{
  border-color: color-mix(in srgb, var(--pci-primary) 42%, var(--pci-border));
}

html[data-pci-theme] .pci-home .hero {
  background: linear-gradient(120deg, var(--pci-secondary), var(--pci-primary) 62%, var(--pci-accent));
}

html[data-pci-theme] body.pci-native .accent,
html[data-pci-theme] body.pci-native .eyebrow,
html[data-pci-theme] body.pci-native .brand small,
html[data-pci-theme] body.pci-native .vi-brand small,
html[data-pci-theme] body.pci-native .top .badge {
  color: var(--pci-accent-ink) !important;
}

/* ACCESS Center and Camera Center surfaces. Their original dark shell is
   retained as a layout/content contract, while all readable surfaces now use
   the same PCI mode and accent tokens as Forms and Dashboards. */
html[data-pci-theme] body.pci-native .access-hero,
html[data-pci-theme] body.pci-native .services-hero,
html[data-pci-theme] body.pci-native .service-card,
html[data-pci-theme] body.pci-native .prod-card,
html[data-pci-theme] body.pci-native .module-card,
html[data-pci-theme] body.pci-native .access-sidebar,
html[data-pci-theme] body.pci-native .access-bottom,
html[data-pci-theme] body.pci-native .camera-controls,
html[data-pci-theme] body.pci-native .camera-tile,
html[data-pci-theme] body.pci-native .portal-card,
html[data-pci-theme] body.pci-native .workspace-bar,
html[data-pci-theme] body.pci-native .app .topbar,
html[data-pci-theme] body.pci-native .app .dashboard-panel,
html[data-pci-theme] body.pci-native .app .stat,
html[data-pci-theme] body.pci-native .app .sidecard,
html[data-pci-theme] body.pci-native .app .card {
  background: var(--pci-surface);
  border-color: var(--pci-border);
  color: var(--pci-text);
  box-shadow: var(--pci-shadow-sm);
}

html[data-pci-theme] body.pci-native .access-hero,
html[data-pci-theme] body.pci-native .services-hero,
html[data-pci-theme] body.pci-native .workspace-bar {
  background: linear-gradient(120deg, var(--pci-secondary), var(--pci-primary));
  color: #fff;
}

html[data-pci-theme] body.pci-native .access-hero h1,
html[data-pci-theme] body.pci-native .services-hero h1,
html[data-pci-theme] body.pci-native .workspace-bar h1,
html[data-pci-theme] body.pci-native .workspace-bar h2 {
  color: #fff;
}

html[data-pci-theme] body.pci-native .access-hero p,
html[data-pci-theme] body.pci-native .services-hero p,
html[data-pci-theme] body.pci-native .camera-note,
html[data-pci-theme] body.pci-native .camera-placeholder,
html[data-pci-theme] body.pci-native .camera-number,
html[data-pci-theme] body.pci-native .camera-tile small,
html[data-pci-theme] body.pci-native .portal-card p,
html[data-pci-theme] body.pci-native .service-copy p,
html[data-pci-theme] body.pci-native .service-state {
  color: var(--pci-text-muted);
}

html[data-pci-theme] body.pci-native .camera-tile {
  background: radial-gradient(circle at 50% 35%, var(--pci-surface-alt), var(--pci-surface) 70%) !important;
}

html[data-pci-theme] body.pci-native .app .hero {
  background: linear-gradient(120deg, var(--pci-secondary), var(--pci-primary)) !important;
  border-color: color-mix(in srgb, var(--pci-primary) 42%, var(--pci-border)) !important;
  color: #fff !important;
}

html[data-pci-theme] body.pci-native .app .hero h2,
html[data-pci-theme] body.pci-native .app .hero p {
  color: #fff !important;
}

html[data-pci-theme] body.pci-native .app .viewer {
  background: color-mix(in srgb, var(--pci-secondary) 82%, var(--pci-bg)) !important;
}

html[data-pci-theme] body.pci-native .camera-controls select,
html[data-pci-theme] body.pci-native .access-sidebar a,
html[data-pci-theme] body.pci-native .access-sidebar button {
  background: var(--pci-surface-alt) !important;
  border-color: var(--pci-border) !important;
  color: var(--pci-text) !important;
}

html[data-pci-theme] body.pci-native .access-sidebar .active,
html[data-pci-theme] body.pci-native .portal-card:hover,
html[data-pci-theme] body.pci-native .camera-tile:hover {
  border-color: var(--pci-primary) !important;
}

html[data-pci-theme] body.pci-native .module-icon,
html[data-pci-theme] body.pci-native .portal-icon {
  background: color-mix(in srgb, var(--pci-primary) 18%, var(--pci-surface)) !important;
  border-color: color-mix(in srgb, var(--pci-primary) 48%, var(--pci-border)) !important;
  color: var(--pci-accent-ink) !important;
}

/* Legacy application bridge.
   Older internal screens keep their functional markup, but their visible
   shell/components must resolve through the same PCI tokens as Forms and
   Dashboards. This layer changes appearance only; it does not change layout,
   dimensions, IDs, data flow, or application behavior. */
html[data-pci-theme] body.pci-native,
html[data-pci-theme] body.pci-native main {
  background-color: var(--pci-bg) !important;
  color: var(--pci-text) !important;
}

html[data-pci-theme] body.pci-native .top,
html[data-pci-theme] body.pci-native .appbar,
html[data-pci-theme] body.pci-native .topbar,
html[data-pci-theme] body.pci-native .pci-topbar {
  background: linear-gradient(120deg, var(--pci-secondary), var(--pci-primary)) !important;
  color: #fff;
  border-color: color-mix(in srgb, var(--pci-primary) 45%, var(--pci-border)) !important;
}

html[data-pci-theme] body.pci-native .top p,
html[data-pci-theme] body.pci-native .top .header-info,
html[data-pci-theme] body.pci-native .appbar .status,
html[data-pci-theme] body.pci-native .topbar .sub {
  color: color-mix(in srgb, #fff 78%, var(--pci-primary)) !important;
}

html[data-pci-theme] body.pci-native .card,
html[data-pci-theme] body.pci-native .panel,
html[data-pci-theme] body.pci-native .kpi,
html[data-pci-theme] body.pci-native .status,
html[data-pci-theme] body.pci-native .frame,
html[data-pci-theme] body.pci-native .report,
html[data-pci-theme] body.pci-native .settings-grid > .card,
html[data-pci-theme] body.pci-native .portal-card,
html[data-pci-theme] body.pci-native .invoice-card,
html[data-pci-theme] body.pci-native .editor {
  background: var(--pci-surface) !important;
  color: var(--pci-text) !important;
  border-color: var(--pci-border) !important;
  box-shadow: var(--pci-shadow-sm) !important;
}

html[data-pci-theme] body.pci-native input,
html[data-pci-theme] body.pci-native select,
html[data-pci-theme] body.pci-native textarea,
html[data-pci-theme] body.pci-native .route a,
html[data-pci-theme] body.pci-native .nav-links a,
html[data-pci-theme] body.pci-native .nav-links button,
html[data-pci-theme] body.pci-native .button:not(.primary),
html[data-pci-theme] body.pci-native .btn:not(.primary),
html[data-pci-theme] body.pci-native .chip {
  background: var(--pci-surface-alt) !important;
  color: var(--pci-text) !important;
  border-color: var(--pci-border) !important;
}

html[data-pci-theme] body.pci-native input:focus,
html[data-pci-theme] body.pci-native select:focus,
html[data-pci-theme] body.pci-native textarea:focus,
html[data-pci-theme] body.pci-native .route a:hover,
html[data-pci-theme] body.pci-native .nav-links a:hover,
html[data-pci-theme] body.pci-native .nav-links button:hover,
html[data-pci-theme] body.pci-native .button:not(.primary):hover,
html[data-pci-theme] body.pci-native .btn:not(.primary):hover {
  border-color: var(--pci-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pci-primary) 20%, transparent) !important;
}

html[data-pci-theme] body.pci-native table,
html[data-pci-theme] body.pci-native th,
html[data-pci-theme] body.pci-native td,
html[data-pci-theme] body.pci-native .table-scroll,
html[data-pci-theme] body.pci-native .table-wrap {
  border-color: var(--pci-border);
}

html[data-pci-theme] body.pci-native th,
html[data-pci-theme] body.pci-native .table thead,
html[data-pci-theme] body.pci-native .table-scroll th {
  background: var(--pci-surface-alt);
  color: var(--pci-text-muted);
}

html[data-pci-theme] body.pci-native td,
html[data-pci-theme] body.pci-native .meta,
html[data-pci-theme] body.pci-native .status,
html[data-pci-theme] body.pci-native .muted,
html[data-pci-theme] body.pci-native label,
html[data-pci-theme] body.pci-native .preview,
/* Two muted texts that no selector above reached, so they kept the light
   theme's #5b6478 on a dark surface: 2.34:1. They are not .muted because one
   is a <summary> and the other the description line of a settings card. */
html[data-pci-theme] body.pci-native .request-details summary,
html[data-pci-theme] body.pci-native .settings-grid .card span {
  color: var(--pci-text-muted) !important;
}

html[data-pci-theme] body.pci-native .current,
html[data-pci-theme] body.pci-native .report:hover,
html[data-pci-theme] body.pci-native .nav-links .current,
html[data-pci-theme] body.pci-native .badge,
html[data-pci-theme] body.pci-native .pill {
  background: var(--pci-primary) !important;
  border-color: var(--pci-primary) !important;
  color: #fff !important;
}

html[data-pci-theme] body.pci-native .error,
html[data-pci-theme] body.pci-native .danger {
  color: var(--pci-danger) !important;
}

html[data-pci-theme] body.pci-native .success,
html[data-pci-theme] body.pci-native .ok,
html[data-pci-theme] body.pci-native .paid {
  color: var(--pci-success) !important;
}

html[data-pci-theme] body.pci-native .loading-line,
html[data-pci-theme] body.pci-native .progress,
html[data-pci-theme] body.pci-native .stripe {
  background: var(--pci-accent);
}

html[data-pci-theme] body.pci-native .services-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

/* Mobile shell guardrails for legacy headers. */
@media (max-width: 700px) {
  html[data-pci-theme] body.pci-native > main > .top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding-bottom: 12px;
  }
  html[data-pci-theme] body.pci-native > main > .top .pci-clock {
    grid-column: 1;
    grid-row: 1;
    white-space: nowrap;
  }
  html[data-pci-theme] body.pci-native > main > .top .brand {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    gap: 6px;
  }
  html[data-pci-theme] body.pci-native > main > .top .brand img {
    width: 72px;
    height: 36px;
    flex: 0 0 72px;
  }
  html[data-pci-theme] body.pci-native > main > .top .brand strong {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html[data-pci-theme] body.pci-native > main > .top .nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    min-width: 0;
  }
  html[data-pci-theme] body.pci-native > main > .top .pci-theme-controls {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  html[data-pci-theme] body.pci-native .services-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
  }
  html[data-pci-theme] body.pci-native .appbar {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  html[data-pci-theme] body.pci-native .appbar .app-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
  }
}

/* Delete actions on the three dashboards. Deliberately an outline, not a
   filled red button: it sits beside Edit and PDF and should read as the
   dangerous one without shouting. --pci-danger-ink keeps the label legible on
   the dark surfaces, where plain --pci-danger lands at 3.7:1.
   Named .danger-action, not .danger, so the blanket semantic rule that paints
   status text does not claim it. The class is repeated to outweigh
   html[data-pci-theme] body.pci-native .button:not(.primary), which paints
   every button with --pci-text at specificity (0,5,2) - the :not() is what
   makes it so heavy. Three times puts this at (0,6,2), so it wins outright
   instead of depending on file order. It keys off .danger-action rather than
   .button so it also reaches the Vehicle dashboard's .ghost-button. */
html[data-pci-theme] body.pci-native .danger-action.danger-action.danger-action,
html:root body .danger-action.danger-action.danger-action {
  border-color: var(--pci-danger) !important;
  color: var(--pci-danger-ink, var(--pci-danger)) !important;
}
html[data-pci-theme] body.pci-native .danger-action.danger-action.danger-action:hover,
html[data-pci-theme] body.pci-native .danger-action.danger-action.danger-action:focus-visible,
html:root body .danger-action.danger-action.danger-action:hover,
html:root body .danger-action.danger-action.danger-action:focus-visible {
  background: color-mix(in srgb, var(--pci-danger) 16%, transparent) !important;
}


/* ============================================================================
   CAPA MODERNA (2026-10-10). Pedida asi: "un estilo mas moderno y versatil"
   para toda la app.

   Va al final del archivo a proposito: las capas de arriba resuelven el color
   de cada modulo, y esta solo cambia la FORMA de los primitivos compartidos
   (radio, borde, elevacion, foco y movimiento). Por eso casi no lleva color
   propio: lo toma de los tokens, que ya siguen al modo y al tema de acento.

   Lo que define el estilo:
     * una sola curva de radios, la del token, en vez de 218 radios a mano;
     * elevacion en dos capas y alfa baja, en vez de una sombra densa;
     * borde de pelo (`--pci-hairline`) donde antes habia una caja completa;
     * un unico anillo de foco en toda la app;
     * movimiento corto y con la misma curva, y apagado entero si el sistema
       pide menos movimiento;
     * densidad conmutable con `data-pci-density="compact"`, que es la parte
       versatil: la misma pagina sirve para un movil y para un monitor de pared.

   Alcanza `body.pci-native`, `.pci-home` y `.pci-form-page`, que es donde vive
   todo. No toca `apps/web/cashiers/styles.css`, que es del usuario.
   ========================================================================== */

/* ---- densidad ---- */
:root[data-pci-density="compact"] {
  --pci-height-sm: 28px;
  --pci-height-md: 34px;
  --pci-height-lg: 38px;
  --pci-space-ms: 10px;
  --pci-space-md: 13px;
  --pci-space-ml: 16px;
  --pci-space-lg: 20px;
  --pci-space-xl: 26px;
  --pci-radius-lg: 14px;
  --pci-radius-xl: 20px;
}
:root[data-pci-density="comfortable"] {
  --pci-space-ms: 14px;
  --pci-space-md: 18px;
  --pci-space-ml: 24px;
  --pci-space-lg: 30px;
  --pci-space-xl: 40px;
}

/* ---- superficies ---- */
/* La tarjeta pierde la caja y gana aire: borde de pelo, radio grande y la
   sombra de contacto. La capa de arriba ya le puso color; aqui solo la forma. */
body.pci-native .card,
body.pci-native .vi-card,
body.pci-native .panel,
body.pci-native .kpi,
body.pci-native .module-card,
body.pci-native .dashboard-panel,
body.pci-native .shift-card,
body.pci-native .sidecard,
body.pci-home .card,
.pci-form-page .card {
  border-radius: var(--pci-radius-lg) !important;
  border-color: var(--pci-hairline) !important;
  box-shadow: var(--pci-shadow-sm) !important;
}

/* La cabecera deja ver lo que pasa por debajo. `backdrop-filter` solo se activa
   si el navegador lo soporta de verdad; si no, se queda la superficie opaca de
   la capa anterior y no pasa nada. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  body.pci-native .top,
  body.pci-native .vi-top,
  body.pci-native .pci-topbar,
  body.pci-native .appbar,
  .pci-shell-header {
    background: var(--pci-surface-glass) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

/* ---- controles ---- */
/* Un boton: radio del token, borde de pelo, sombra de contacto y una subida de
   1px al apuntarlo. El `transform` va en `translateY` y no en `scale` para no
   mover el texto de sitio. */
body.pci-native .button,
body.pci-native .btn,
body.pci-native button.pci-btn,
body.pci-home .button,
.pci-form-page .button {
  border-radius: var(--pci-radius-md) !important;
  border-color: var(--pci-hairline) !important;
  box-shadow: var(--pci-shadow-xs);
  transition: background var(--pci-motion-fast) var(--pci-ease),
              border-color var(--pci-motion-fast) var(--pci-ease),
              box-shadow var(--pci-motion-base) var(--pci-ease),
              transform var(--pci-motion-fast) var(--pci-ease);
}
body.pci-native .button:hover,
body.pci-native .btn:hover,
body.pci-home .button:hover,
.pci-form-page .button:hover {
  border-color: var(--pci-primary-border) !important;
  box-shadow: var(--pci-shadow-sm);
  transform: translateY(-1px);
}
body.pci-native .button:active,
body.pci-native .btn:active,
body.pci-home .button:active,
.pci-form-page .button:active {
  box-shadow: var(--pci-shadow-xs);
  transform: translateY(0);
}
/* El principal era un degradado de 135 grados. Ahora es color plano del tema con
   su propio hover, que es lo que lo hace legible en los 7 acentos. */
body.pci-native .primary,
body.pci-native .btn-primary,
body.pci-native .button.primary,
body.pci-native .vi-submit,
body.pci-native .pci-btn:not(.pci-btn-secondary):not(.pci-btn-danger),
body.pci-home .button.primary,
.pci-form-page .button.primary {
  background: var(--pci-primary) !important;
  border-color: var(--pci-primary) !important;
  box-shadow: var(--pci-shadow-xs);
}
body.pci-native .primary:hover,
body.pci-native .button.primary:hover,
body.pci-native .vi-submit:hover,
body.pci-home .button.primary:hover,
.pci-form-page .button.primary:hover {
  background: var(--pci-primary-hover) !important;
  border-color: var(--pci-primary-hover) !important;
}

/* Campos: el mismo radio que el boton, y el anillo del sistema al enfocar. El
   borde se tine del tema para que el campo activo se vea de lejos. */
body.pci-native input,
body.pci-native select,
body.pci-native textarea,
body.pci-native .vi-time-button,
.pci-form-page input,
.pci-form-page select,
.pci-form-page textarea {
  border-radius: var(--pci-radius-md) !important;
  transition: border-color var(--pci-motion-fast) var(--pci-ease),
              box-shadow var(--pci-motion-fast) var(--pci-ease);
}
body.pci-native input:focus,
body.pci-native select:focus,
body.pci-native textarea:focus,
.pci-form-page input:focus,
.pci-form-page select:focus,
.pci-form-page textarea:focus {
  border-color: var(--pci-primary) !important;
  box-shadow: var(--pci-ring);
  outline: 0;
}
body.pci-native input[aria-invalid="true"],
body.pci-native .invalid,
body.pci-native .tp-invalid {
  border-color: var(--pci-danger) !important;
  box-shadow: var(--pci-ring-danger);
}

/* Un anillo de foco para toda la app. No fija el radio a proposito: el contorno
   sigue la forma que ya tenga el elemento, y una pildora enfocada no se
   convierte en un rectangulo. */
:where(body.pci-native, .pci-home, .pci-form-page) :where(a, button, .button, [tabindex]):focus-visible {
  outline: 2px solid var(--pci-primary);
  outline-offset: 2px;
}

/* ---- piezas pequenas ---- */
/* Pildoras y etiquetas: el radio de pildora del token en vez de 99px o 999px a
   mano, y tracking de etiqueta cuando van en mayusculas. */
body.pci-native .chip,
body.pci-native .badge,
body.pci-native .pill,
body.pci-native .vi-pill,
body.pci-home .pci-pill,
body.pci-home .badge {
  border-radius: var(--pci-radius-pill) !important;
  letter-spacing: var(--pci-tracking-wide);
}

/* ---- tablas ---- */
/* Cabecera de tabla como etiqueta, filas separadas por pelo y la fila apuntada
   con el tinte del tema. Es lo que convierte una tabla de datos en algo que se
   puede recorrer con la vista. */
body.pci-native table th {
  color: var(--pci-text-muted) !important;
  font-size: var(--pci-font-xs);
  font-weight: 800;
  letter-spacing: var(--pci-tracking-wide);
  text-transform: uppercase;
  border-bottom-color: var(--pci-border) !important;
}
body.pci-native table td {
  border-bottom-color: var(--pci-hairline) !important;
}
body.pci-native tbody tr {
  transition: background var(--pci-motion-fast) var(--pci-ease);
}
body.pci-native tbody tr:hover {
  background: var(--pci-primary-subtle);
}

/* ---- tipografia ---- */
/* Un titular grande con tracking de parrafo parece suelto. Esto solo aprieta el
   tracking y fija la altura de linea; los tamanos siguen siendo del modulo. */
body.pci-native h1,
body.pci-native h2,
body.pci-home h1,
body.pci-home h2,
.pci-form-page h1,
.pci-form-page h2 {
  letter-spacing: var(--pci-tracking-tight);
  line-height: var(--pci-leading-tight);
}
body.pci-native p,
.pci-form-page p {
  line-height: var(--pci-leading-normal);
}
/* Un enlace en el cuerpo del texto se subraya, pero sin tocar la letra. */
body.pci-native main a:not(.button):not(.chip):not(.badge):not([class*="nav"]),
.pci-form-page main a:not(.button):not(.chip):not(.badge) {
  color: var(--pci-accent-ink);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--pci-motion-fast) var(--pci-ease);
}

/* ---- movimiento ---- */
/* Quien pide menos movimiento no recibe ninguno, ni el de esta capa ni el de
   las paginas. */
@media (prefers-reduced-motion: reduce) {
  body.pci-native *,
  .pci-home *,
  .pci-form-page * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  body.pci-native .button:hover,
  body.pci-home .button:hover,
  .pci-form-page .button:hover {
    transform: none;
  }
}