/* lexta-components.css — estilos propios del portal (DESIGN.md §10).
   Solo tokens var(--lx-*); nada de valores hardcodeados.
   Fase 1 (piel): base de página, logo del header, etiqueta del modo host y splash.
   Fase 2 (bandeja): utilidades, badges, grillas, segmented control, punto de atención,
   acciones de fila y estado vacío.
   Fase 3 (peek), fase 4 (revisión) y fase 5 (Proveedores, Configuración, host: header sticky,
   secciones de los DetailViews de XAF, footer de auditoría, Salud). */

/* ---- Base de página ----
   global.min.css pinta body con surface-neutral-default-rest, la MISMA superficie
   que las cards y grillas. DESIGN.md §2 quiere la página un punto por debajo
   (--lx-bg) para que las superficies se despeguen sin sombras. Es un rol que el
   semántico de DX no distingue, por eso va acá y no en dx-overrides.
   ⚠️ `html body` y no `body`: el SplashScreen de XAF 25.2 emite un <style> INLINE
   dentro del <body> con `body { background-color: surface-default }`. Empata en
   especificidad y, por estar después en el documento, ganaba. */
html body {
  background-color: var(--lx-bg);
  color: var(--lx-text);
  font-family: var(--lx-font);
}

/* ---- Logo del header (DESIGN.md §3.3, LEXTA-BRAND.md §3.3) ----
   El template de XAF deja un <div class="header-logo"> vacío. Se pinta con
   background-image (no con la máscara CSS del template, que aplana el SVG a un
   color y mata el gradiente del isotipo). Lockup color-light en claro,
   color-dark (wordmark blanco) en oscuro. 120px = mínimo del lockup (§3.4). */
.header-logo {
  flex-shrink: 0;
  position: relative;
  width: 120px;
  height: 32px;
  background-image: url("../images/brand/lexta-horizontal-color-light.svg");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}

:root:has(link[href*="modes/dark.min.css"]) .header-logo {
  background-image: url("../images/brand/lexta-horizontal-color-dark.svg");
}

/* ---- Etiqueta del modo host (DESIGN.md §3.1) ----
   "Administración" fija junto al logo cuando el portal corre en un dominio host
   (MultiTenancy:HostDomains). La clase lx-modo-host la pone _Host.cshtml en el
   <body> con TenantModeHelper.EsDominioHost: la misma regla que el
   TenantByDomainResolver, evaluada en el request, así que se ve también en el
   login (antes de que exista un tenant o un usuario).
   Es un pseudo-elemento para no depender del markup del template de XAF: el
   header no ofrece un punto de extensión sin un window template propio. */
.lx-modo-host .header-logo::after {
  content: "Administración";
  position: absolute;
  left: calc(100% + var(--lx-sp-3));
  top: 50%;
  transform: translateY(-50%);
  padding: 2px var(--lx-sp-2);
  border-radius: var(--lx-radius-sm);
  background-color: var(--lx-warning-subtle);
  color: var(--lx-warning);
  font-family: var(--lx-font);
  font-size: var(--lx-text-xs);
  font-weight: 500;
  line-height: 16px;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ---- Splash de arranque (SplashScreen de XAF) ----
   EXCEPCIÓN CONSCIENTE a "nada de clases de DX" (DESIGN.md §2.2.7): XAF lo
   pinta con colores hardcodeados, sin variable. Son clases del splash de XAF,
   no internas de un componente DX; si cambian en un upgrade el síntoma es
   "vuelve el gris", no un layout roto.

   Es IDENTIDAD, no interacción: lleva la marca (gradiente), no el acento. */

/* Anillo de fondo: hairline. El :not() es obligatorio — el arco que gira lleva
   TAMBIÉN la clase loading-border, y sin excluirlo este color le pintaría los
   tres lados que XAF deja transparentes (el arco se volvería un anillo lleno
   que "no gira"). Lección de HUB 2026-09-07. */
.loading-border:not(.loading-floated-circle) {
  border-color: var(--lx-border) !important;
}

/* El arco: SOLO el borde superior (el único que XAF deja visible). Nunca el
   shorthand border-color. Púrpura de marca en claro, cyan en oscuro
   (--lx-brand-spinner se invierte en design-tokens.css). (0,2,0) para ganarle
   al `.loading-floated-circle { border-color: … !important }` (0,1,0) del
   <style> inline del splash en 25.2; los otros tres lados los deja
   transparentes un style="" inline con !important, que no se toca. */
.loading-border.loading-border-primary {
  border-top-color: var(--lx-brand-spinner) !important;
}

/* Círculo central con el isotipo blanco sobre el gradiente de marca.
   XAF pinta el fondo con background-color: var(--dxds-color-surface-primary-
   default-rest) !important. El gradiente es background-image, que ese
   !important no toca; y la variable se redefine SOLO en este elemento (las
   custom properties heredan por el DOM) para que el color de base, que asoma
   en los bordes antialiasados, sea la punta púrpura y no el acento. */
.loading-image-wrapper {
  --dxds-color-surface-primary-default-rest: var(--lx-brand-from);
  --dxds-color-content-primary-default-rest: var(--lx-on-brand);
  background-image: var(--lx-brand-gradient);
}

/* El isotipo es cuadrado (200×200) y XAF le da una caja de 46×30 pensada para
   un logo apaisado: quedaba de 30px dentro de un círculo de 120. (0,2,0): el
   <style> inline del splash va DESPUÉS de este archivo y con (0,1,0) ganaba. */
.loading-image-wrapper .loading-image {
  width: 56px;
  height: 56px;
}

.loading-font,
.loading-caption {
  font-family: var(--lx-font);
}

.loading-caption {
  color: var(--lx-text);
}

@media (prefers-reduced-motion: reduce) {
  .loading-floated-circle {
    animation-duration: 3s !important;
  }
}

/* ===========================================================================
   FASE 2 — BANDEJA (DESIGN.md §4.1, §4.4, §5, §7)
   =========================================================================== */

/* ---- Utilidades ---- */
.lx-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Identificadores fiscales y montos (§7). tabular-nums alinea los dígitos en columna; Plex
   Mono ya es monoespaciada, pero la regla queda para cuando el fallback no lo sea. */
.lx-mono {
  font-family: var(--lx-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;   /* un número legal partido en el guion no se lee ni se compara */
}

.lx-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* ---- Badge (§5). Markup único: Bandeja/LxBadge.razor ---- */
.lx-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--lx-sp-2);
  border-radius: var(--lx-radius-sm);
  font-family: var(--lx-font);
  font-size: var(--lx-text-xs);
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
}
.lx-badge--neutro  { background-color: var(--lx-surface-2);      color: var(--lx-text-2); }
.lx-badge--info    { background-color: var(--lx-info-subtle);    color: var(--lx-info); }
.lx-badge--success { background-color: var(--lx-success-subtle); color: var(--lx-success); }
.lx-badge--warning { background-color: var(--lx-warning-subtle); color: var(--lx-warning); }
.lx-badge--danger  { background-color: var(--lx-danger-subtle);  color: var(--lx-danger); }

/* El badge neutro usa surface-2 como fondo: sobre una fila en hover (también surface-2) se
   perdería el contorno. Un hairline lo mantiene como pieza. */
.lx-badge--neutro { box-shadow: inset 0 0 0 1px var(--lx-border); }

/* ---- Botones propios (acciones de fila, vacío). Quiet por default: §4.3 una sola primaria. */
.lx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lx-sp-1);
  min-height: 32px;                     /* §8: área clickeable ≥ 32px */
  padding: 0 var(--lx-sp-3);
  border: 1px solid transparent;
  border-radius: var(--lx-radius-sm);
  background: transparent;
  color: var(--lx-text);
  font: 500 var(--lx-text-sm)/1 var(--lx-font);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--lx-dur-fast) var(--lx-ease), border-color var(--lx-dur-fast) var(--lx-ease);
}
.lx-btn--sm { min-height: 28px; padding: 0 var(--lx-sp-2); }
.lx-btn--quiet { background-color: var(--lx-surface); border-color: var(--lx-border); }
.lx-btn--quiet:hover { border-color: var(--lx-border-strong); background-color: var(--lx-surface-2); }
.lx-btn--primario { background-color: var(--lx-accent); color: var(--lx-on-accent); }
.lx-btn--primario:hover { background-color: var(--lx-accent-hover); }
.lx-btn--peligro { background-color: var(--lx-danger-subtle); border-color: var(--lx-danger); color: var(--lx-danger); }
.lx-btn--icono { width: 28px; padding: 0; }
/* Deshabilitado (fase 5: "Volver a medir" mientras mide; Aprobar mientras guarda). Se lee
   "apagado" sin perder el texto: text-3 pasa 4,5:1 sobre la superficie en los dos modos. */
.lx-btn:disabled { color: var(--lx-text-3); cursor: not-allowed; }
.lx-btn--primario:disabled { background-color: var(--lx-surface-2); border-color: var(--lx-border); }
.lx-btn--icono svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.lx-btn:focus-visible,
.lx-link:focus-visible,
.lx-segmented__item:focus-visible {
  outline: 2px solid var(--lx-accent);   /* §8: foco visible, offset 2px */
  outline-offset: 2px;
}

.lx-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--lx-accent);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lx-link:hover { color: var(--lx-accent-hover); }

/* ---- Grillas: excepciones acotadas (§7) ------------------------------------------------
   EXCEPCIÓN DOCUMENTADA a "nada de clases internas de DX" (§9), con el mismo criterio que el
   splash: 25.2 NO tiene variable para las líneas verticales (--dxbl-grid-v-line-color existe
   recién en 26.1) ni parámetro del DxGrid (verificado por reflexión: no hay GridLines ni
   ShowVerticalLines). Cada celda lleva border-left-width: var(--dxbl-grid-border-width) y el
   único modo de sacarlo sin perder los hairlines horizontales (border-top, la misma
   variable) es pisar ese lado. Si un upgrade cambia la estructura, el síntoma es "vuelven las
   verticales", no un layout roto. Al migrar a 26.1: reemplazar por --dxbl-grid-v-line-color.
   `html` delante: DX declara (0,2,3) y el ThemeSwitcher inserta su CSS después del nuestro. */
html .dxbl-grid .dxbl-grid-table > thead > tr > th,
html .dxbl-grid .dxbl-grid-table > thead > tr > td,
html .dxbl-grid .dxbl-grid-table > tbody > tr > td,
html .dxbl-grid .dxbl-grid-table > tbody > tr > th,
html .dxbl-grid .dxbl-grid-table > tfoot > tr > td {
  border-left-width: 0;
}

/* Selección y fila enfocada: fondo --lx-accent-subtle (dx-overrides) + hairline de acento a
   la izquierda. El hairline es lo que cumple el 3:1 de la selección: accent-subtle contra
   surface-2 da 1,05 / 1,02 y solo se distingue del hover por tono. inset box-shadow y no
   border: no mueve el contenido ni pelea con el border-top de la celda. */
html .dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row > td:first-child,
html .dxbl-grid:not(.lx-bandeja) .dxbl-grid-table > tbody > tr.dxbl-grid-focused-row > td:first-child,
html:has(.lx-peek--abierto) .lx-bandeja .dxbl-grid-table > tbody > tr.dxbl-grid-focused-row > td:first-child {
  box-shadow: inset 2px 0 0 var(--lx-accent);
}
/* En la bandeja la fila enfocada lleva el hairline SOLO con el peek abierto: es la fila del
   documento abierto. Cerrado, el DxGrid igual deja enfocada la primera fila al cargar, y eso
   no es una selección (ver dx-overrides.css, bloque del peek). */

/* ---- Bandeja: segmented control con contador (§4.1) ---- */
.lx-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-md);
  background-color: var(--lx-surface-2);
}
.lx-segmented__item {
  display: inline-flex;
  align-items: center;
  gap: var(--lx-sp-2);
  min-height: 32px;
  padding: 0 var(--lx-sp-3);
  border: 1px solid transparent;
  border-radius: var(--lx-radius-sm);
  background: transparent;
  color: var(--lx-text-2);
  font: 500 var(--lx-text-sm)/1 var(--lx-font);
  cursor: pointer;
  transition: background-color var(--lx-dur-fast) var(--lx-ease), color var(--lx-dur-fast) var(--lx-ease);
}
.lx-segmented__item:hover { color: var(--lx-text); }
.lx-segmented__item--activo {
  background-color: var(--lx-surface);
  border-color: var(--lx-border);
  color: var(--lx-text);
}
.lx-segmented__conteo {
  font-family: var(--lx-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--lx-text-xs);
  color: var(--lx-text-3);
}
.lx-segmented__item--activo .lx-segmented__conteo { color: var(--lx-text-2); }
/* "Para revisar" con algo adentro: el número toma el warning, en sintonía con el punto. */
.lx-segmented__conteo--atencion,
.lx-segmented__item--activo .lx-segmented__conteo--atencion { color: var(--lx-warning); }

/* ---- Bandeja: celdas ---- */

/* Punto de atención (§4.1): lo único que "grita" en la grilla. 8px, centrado en su columna. */
.lx-punto {
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: var(--lx-warning);
}

.lx-emisor {
  display: flex;
  align-items: baseline;
  gap: var(--lx-sp-2);
  min-width: 0;
}
.lx-emisor__nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lx-emisor__ruc {
  flex-shrink: 0;
  color: var(--lx-text-2);
  font-size: var(--lx-text-xs);
}

.lx-tipo {
  font-weight: 500;
  text-decoration: none;
  cursor: help;
}

/* Recepción + acciones de fila. Las acciones se superponen al tiempo relativo al pasar el
   mouse o al entrar con el teclado a la fila (:focus-within) — nunca una columna fija. */
.lx-recepcion {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 28px;
}
.lx-recepcion__tiempo { color: var(--lx-text-2); white-space: nowrap; }

.lx-fila-acciones {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  gap: var(--lx-sp-1);
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--lx-dur-fast) var(--lx-ease);
}
.lx-fila:hover .lx-fila-acciones,
.lx-fila:focus-within .lx-fila-acciones {
  opacity: 1;
  pointer-events: auto;
}
.lx-fila:hover .lx-recepcion__tiempo,
.lx-fila:focus-within .lx-recepcion__tiempo { visibility: hidden; }

/* ---- Bandeja: estado vacío (§4.4, §8) ---- */
.lx-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lx-sp-3);
  padding: var(--lx-sp-8) var(--lx-sp-4);
  color: var(--lx-text-2);
  font-family: var(--lx-font);
  font-size: var(--lx-text-md);
  text-align: center;
  white-space: normal;
}
.lx-vacio--onboarding { padding-top: 64px; padding-bottom: 64px; }
.lx-vacio__icono {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--lx-text-3);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Sora: SOLO acá en la bandeja (§2.1, títulos grandes de vacíos). */
.lx-vacio__titulo {
  margin: 0;
  color: var(--lx-text);
  font-family: var(--lx-font-brand);
  font-size: var(--lx-text-xl);
  font-weight: 600;
}
.lx-vacio__texto { margin: 0; max-width: 44ch; }
.lx-vacio__alternativa { margin: 0; }

.lx-copiable {
  display: inline-flex;
  align-items: center;
  gap: var(--lx-sp-2);
  padding: var(--lx-sp-1) var(--lx-sp-1) var(--lx-sp-1) var(--lx-sp-3);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-md);
  background-color: var(--lx-surface-2);
}
.lx-copiable__valor {
  color: var(--lx-text);
  font-family: var(--lx-font-mono);
  font-size: var(--lx-text-md);
  user-select: all;
}

/* Sin chrome de grilla vacía (§6.1, §9): cuando el EmptyDataArea muestra nuestro vacío, se
   oculta la fila de títulos. :has() evita un segundo estado en C#. Misma excepción acotada que
   las líneas verticales: thead es estructura del DxGrid, no una clase de skin. */
html .lx-bandeja:has(.lx-vacio) .dxbl-grid-table > thead,
html .lx-grilla:has(.lx-vacio) .dxbl-grid-table > thead { display: none; }   /* fase 5: Proveedores y host */

@media (prefers-reduced-motion: reduce) {
  .lx-btn, .lx-segmented__item, .lx-fila-acciones { transition: none; }
}

/* ===========================================================================
   FASE 3 — PEEK (DESIGN.md §4.2). Markup: Bandeja/LxPeek.razor.
   Componente propio superpuesto a la bandeja (no el split de XAF ni el DxDrawer): overlay
   con --lx-shadow-overlay, que tapa la parte derecha de la cola sin empujarla.
   Solo tokens --lx-*; ninguna clase de DX.
   =========================================================================== */

.lx-peek {
  position: fixed;
  /* Borde superior = el del área de contenido de XAF (lo mide lexta.peek.anclar). */
  top: var(--lx-peek-top, 0px);
  right: 0;
  bottom: 0;
  z-index: var(--lx-z-overlay);
  display: flex;
  flex-direction: column;
  /* 440px: entra el total más largo ("1.234.567,89 USD") junto a su etiqueta y un nombre de
     emisor de ~36 caracteres en una línea. Nunca más ancho que la pantalla. */
  width: min(440px, 100vw);
  border-left: 1px solid var(--lx-border);
  border-top-left-radius: var(--lx-radius-md);
  background-color: var(--lx-surface);
  box-shadow: var(--lx-shadow-overlay);
  color: var(--lx-text);
  font-family: var(--lx-font);
  font-size: var(--lx-text-md);
  /* Cerrado: fuera de pantalla e invisible. visibility espera a que termine la salida. */
  transform: translateX(calc(100% + var(--lx-sp-6)));   /* + el halo de la sombra */
  visibility: hidden;
  transition:
    transform var(--lx-dur-med) var(--lx-ease),
    visibility 0s linear var(--lx-dur-med);
}
.lx-peek--abierto {
  transform: none;
  visibility: visible;
  transition:
    transform var(--lx-dur-med) var(--lx-ease),
    visibility 0s linear 0s;
}

/* ---- Header: emisor + badge, tipo/número/fecha, acciones ---- */
.lx-peek__header {
  display: flex;
  flex-direction: column;
  gap: var(--lx-sp-1);
  padding: var(--lx-sp-4) var(--lx-sp-4) var(--lx-sp-3);
  border-bottom: 1px solid var(--lx-border);
}
.lx-peek__fila-titulo {
  display: flex;
  align-items: center;
  gap: var(--lx-sp-2);
  min-width: 0;
}
.lx-peek__titulo {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--lx-text);
  font-size: var(--lx-text-lg);
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lx-peek__titulo:focus { outline: none; }
.lx-peek__titulo:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: 2px; }
.lx-peek__cerrar { margin-left: auto; flex-shrink: 0; width: 32px; min-height: 32px; }
.lx-peek__cerrar:hover { background-color: var(--lx-surface-2); }
.lx-peek__subtitulo,
.lx-peek__ruc {
  display: flex;
  align-items: baseline;
  gap: var(--lx-sp-2);
  margin: 0;
  color: var(--lx-text-2);
  font-size: var(--lx-text-sm);
}
.lx-peek__subtitulo .lx-tipo { color: var(--lx-text); }
.lx-peek__ruc { font-size: var(--lx-text-xs); }

.lx-peek__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lx-sp-2);
  margin-top: var(--lx-sp-2);
}
/* Dentro del peek los botones van a 32px (área clickeable §8), no a los 28px de la fila. */
.lx-peek .lx-btn--icono { width: 32px; min-height: 32px; }

.lx-peek__confirmar {
  margin-top: var(--lx-sp-2);
  padding: var(--lx-sp-3);
  border: 1px solid var(--lx-danger);
  border-radius: var(--lx-radius-md);
  background-color: var(--lx-danger-subtle);
}
.lx-peek__confirmar p { margin: 0; color: var(--lx-text); font-size: var(--lx-text-sm); }
.lx-peek__confirmar .lx-peek__acciones { justify-content: flex-end; }

/* ---- Menú ⋯ ---- */
.lx-menu { position: relative; }
.lx-menu__lista {
  position: absolute;
  top: calc(100% + var(--lx-sp-1));
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: var(--lx-sp-1);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-md);
  background-color: var(--lx-surface);
  box-shadow: var(--lx-shadow-overlay);
}
/* Si el ⋯ no es el último botón (sin Aprobar), el menú se abre hacia la derecha sin cortarse. */
.lx-peek__acciones > .lx-menu:not(:last-child) .lx-menu__lista { right: auto; left: 0; }
.lx-menu__item {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--lx-sp-3);
  border: 0;
  border-radius: var(--lx-radius-sm);
  background: transparent;
  color: var(--lx-text);
  font: 400 var(--lx-text-sm)/1 var(--lx-font);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.lx-menu__item:hover,
.lx-menu__item:focus { background-color: var(--lx-surface-2); outline: none; }
.lx-menu__item:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: -2px; }
.lx-menu__item--peligro { color: var(--lx-danger); }

/* ---- Cuerpo ---- */
.lx-peek__cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lx-peek__seccion {
  display: flex;
  flex-direction: column;
  gap: var(--lx-sp-1);
  padding: var(--lx-sp-3) var(--lx-sp-4);
  border-bottom: 1px solid var(--lx-border);
}
.lx-peek__seccion:last-child { border-bottom: 0; }
.lx-peek__totales { display: contents; margin: 0; }
.lx-peek__par {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lx-sp-4);
  min-height: 24px;
}
.lx-peek__par dt { color: var(--lx-text-2); font-size: var(--lx-text-sm); font-weight: 500; }
.lx-peek__par dd { margin: 0; text-align: right; }
.lx-peek__par--total dt { color: var(--lx-text); }
.lx-peek__par--total dd { font-weight: 500; }
.lx-peek__secundario { color: var(--lx-text-2); font-size: var(--lx-text-sm); }
.lx-peek__eyebrow {
  margin: 0 0 var(--lx-sp-1);
  color: var(--lx-text-2);
  font-size: var(--lx-text-xs);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.lx-peek__items { display: contents; margin: 0; padding: 0; list-style: none; }
.lx-peek__item-desc {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lx-peek__mas { align-self: flex-start; min-height: 32px; font-size: var(--lx-text-sm); }

.lx-peek__footer {
  padding: var(--lx-sp-2) var(--lx-sp-4);
  border-top: 1px solid var(--lx-border);
  color: var(--lx-text-2);
  font-size: var(--lx-text-xs);
}

/* ---- "⚠ N campos para revisar" (§4.2, §4.3.2): solo si hay algo ---- */
.lx-revisar {
  padding: var(--lx-sp-3) var(--lx-sp-4);
  border-bottom: 1px solid var(--lx-border);
  border-left: 2px solid var(--lx-warning);
  background-color: var(--lx-warning-subtle);
}
.lx-revisar__titulo {
  display: flex;
  align-items: center;
  gap: var(--lx-sp-2);
  margin: 0;
  color: var(--lx-warning);
  font-size: var(--lx-text-sm);
  font-weight: 600;
}
.lx-revisar__titulo svg,
.lx-banner svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lx-revisar__lista {
  display: flex;
  flex-direction: column;
  gap: var(--lx-sp-1);
  margin: var(--lx-sp-2) 0 0;
  padding-left: calc(16px + var(--lx-sp-2));
  color: var(--lx-text);
  font-size: var(--lx-text-sm);
}

/* ---- Banner de error (§8: Excepcion → MensajeExcepcion en --lx-danger-subtle) ---- */
.lx-banner {
  margin: var(--lx-sp-3) var(--lx-sp-4);
  padding: var(--lx-sp-3);
  border-radius: var(--lx-radius-md);
  font-size: var(--lx-text-sm);
}
.lx-banner p { margin: 0; }
.lx-banner p + p { margin-top: var(--lx-sp-1); }
.lx-banner--error {
  border: 1px solid var(--lx-danger);
  background-color: var(--lx-danger-subtle);
  color: var(--lx-text);
}
.lx-banner__titulo { color: var(--lx-danger); font-weight: 600; }
.lx-banner__accion { color: var(--lx-text-2); }

/* ---- Correo sin datos (Recibido no procesable) ---- */
.lx-peek__sindatos {
  display: flex;
  flex-direction: column;
  gap: var(--lx-sp-2);
  padding: var(--lx-sp-4);
  color: var(--lx-text);
  font-size: var(--lx-text-sm);
}
.lx-peek__sindatos p { margin: 0; }
.lx-peek__sindatos-titulo { font-size: var(--lx-text-md); font-weight: 600; }
.lx-peek__sindatos-accion { color: var(--lx-text-2); }

/* ---- Skeleton (§8): la forma real del cuerpo, sin spinner ---- */
.lx-skel {
  display: block;
  height: 12px;
  border-radius: var(--lx-radius-sm);
  background-color: var(--lx-surface-2);
  animation: lx-skel-pulso 1.2s var(--lx-ease) infinite alternate;
}
.lx-skel--label { width: 30%; }
.lx-skel--valor { width: 22%; }
.lx-skel--item { width: 55%; }
@keyframes lx-skel-pulso { from { opacity: 1; } to { opacity: .45; } }

/* ---- Fila enfocable: foco devuelto por Esc (§8) ---- */
html .lx-bandeja tr.lx-fila:focus { outline: none; }
html .lx-bandeja tr.lx-fila:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: -2px; }

/* ---- Responsive (§4.3.7): en angosto ocupa el ancho; en móvil es la única vista de detalle ---- */
@media (max-width: 767.98px) {
  .lx-peek { width: 100vw; border-left: 0; border-radius: 0; }
  /* En móvil no hay vista de revisión (§4.3.7): el peek ES el detalle. */
  .lx-peek__completo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lx-peek, .lx-peek--abierto { transition: none; }
  .lx-skel { animation: none; }
}

/* ===========================================================================
   FASE 4 — VISTA DE REVISIÓN (DESIGN.md §4.3, §6, §6.1). Markup: Revision/LxRevision.razor,
   LxOriginal.razor, LxCampo.razor. Solo tokens --lx-*; el DxSplitter y el DxPdfViewer se
   tocan solo por sus variables (dx-overrides.css).
   =========================================================================== */

/* La vista ocupa el alto disponible de la pestaña (lexta.revision.registrar lo mide): header y
   footer fijos, cada panel con scroll propio. */
.lx-rev {
  display: flex;
  flex-direction: column;
  height: var(--lx-rev-alto, calc(100vh - 160px));
  min-height: 360px;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-md);
  background-color: var(--lx-surface);
  color: var(--lx-text);
  font-family: var(--lx-font);
  font-size: var(--lx-text-md);
  overflow: hidden;
}

/* ---- Header (§4.3.5): emisor en --lx-text-xl + tipo/número mono + badge; acciones ---- */
.lx-rev__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lx-sp-3) var(--lx-sp-6);
  padding: var(--lx-sp-4);
  border-bottom: 1px solid var(--lx-border);
  background-color: var(--lx-surface);
}
.lx-rev__identidad { min-width: 0; flex: 1 1 320px; }
.lx-rev__titulo {
  margin: 0;
  overflow: hidden;
  color: var(--lx-text);
  font-size: var(--lx-text-xl);
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lx-rev__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lx-sp-2);
  margin: var(--lx-sp-1) 0 0;
  color: var(--lx-text-2);
  font-size: var(--lx-text-sm);
}
.lx-rev__ruc { color: var(--lx-text-2); }
.lx-rev__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lx-sp-2); }
.lx-rev__confirmar {
  display: grid;
  gap: var(--lx-sp-2);
  flex: 1 1 360px;
  max-width: 520px;
  padding: var(--lx-sp-3);
  border: 1px solid var(--lx-danger);
  border-radius: var(--lx-radius-md);
  background-color: var(--lx-danger-subtle);
}
.lx-rev__confirmar-texto { margin: 0; color: var(--lx-text); font-size: var(--lx-text-sm); font-weight: 600; }
.lx-rev__confirmar-label { color: var(--lx-text-2); font-size: var(--lx-text-sm); font-weight: 500; }
.lx-rev__opcional { font-weight: 400; }
.lx-rev__confirmar .lx-rev__acciones { justify-content: flex-end; }
.lx-textarea {
  width: 100%;
  min-height: 56px;
  padding: var(--lx-sp-2);
  /* text-3 y no border-strong: el borde es lo que identifica al campo (WCAG 1.4.11, 3:1);
     border-strong daba 1,41 / 1,90 contra surface y danger-subtle. Medido en UI-CHECKLIST. */
  border: 1px solid var(--lx-text-3);
  border-radius: var(--lx-radius-sm);
  background-color: var(--lx-surface);
  color: var(--lx-text);
  font: 400 var(--lx-text-md)/1.4 var(--lx-font);
  resize: vertical;
}
.lx-textarea::placeholder { color: var(--lx-text-3); }
.lx-textarea:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: 2px; }
.lx-rev__banner { margin: var(--lx-sp-3) var(--lx-sp-4) 0; }

/* ---- Cuerpo dividido ---- */
.lx-rev__cuerpo { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.lx-rev__pane > * { height: 100%; }
.lx-rev__pane--datos { overflow-y: auto; }

/* ---- Pestañas "Original | Datos" (< 1200px, §4.3.7) ---- */
.lx-rev__pestanas {
  display: flex;
  gap: var(--lx-sp-1);
  padding: 0 var(--lx-sp-4);
  border-bottom: 1px solid var(--lx-border);
}
.lx-rev__pestana {
  min-height: 36px;
  padding: 0 var(--lx-sp-3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--lx-text-2);
  font: 500 var(--lx-text-sm)/1 var(--lx-font);
  cursor: pointer;
}
.lx-rev__pestana[aria-selected="true"] { border-bottom-color: var(--lx-accent); color: var(--lx-text); }
.lx-rev__pestana:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: -2px; }
.lx-rev__panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.lx-rev__panel[hidden] { display: none; }

/* ---- Footer de auditoría (§6.6) ---- */
.lx-rev__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-sp-2);
  padding: var(--lx-sp-2) var(--lx-sp-4);
  border-top: 1px solid var(--lx-border);
  background-color: var(--lx-surface);
  color: var(--lx-text-2);
  font-size: var(--lx-text-xs);
}

/* ---- Panel del original (§4.3.1) ---- */
.lx-original { display: flex; flex-direction: column; height: 100%; min-height: 0; background-color: var(--lx-surface-2); }
.lx-original__barra {
  display: flex;
  align-items: center;
  gap: var(--lx-sp-3);
  padding: var(--lx-sp-2) var(--lx-sp-3) var(--lx-sp-2) var(--lx-sp-4);
  border-bottom: 1px solid var(--lx-border);
  background-color: var(--lx-surface);
}
.lx-original__titulo { margin: 0 auto 0 0; color: var(--lx-text-2); font-size: var(--lx-text-sm); font-weight: 600; }
.lx-original__contenido { flex: 1 1 auto; min-height: 0; overflow: auto; }
.lx-original__pdf { width: 100%; height: 100%; }
.lx-segmented--sm .lx-segmented__item { min-height: 28px; }
.lx-original__skeleton { display: flex; flex-direction: column; gap: 10px; padding: var(--lx-sp-4); }
.lx-skel--codigo { height: 10px; width: calc(40% + var(--lx-skel-sangria, 0ch) * 3); margin-left: var(--lx-skel-sangria, 0ch); background-color: var(--lx-border); }

/* XML resaltado: solo tokens (§4.3.1). Contrastes medidos en UI-CHECKLIST, fase 4. */
.lx-xml {
  margin: 0;
  padding: var(--lx-sp-4);
  min-height: 100%;
  background-color: var(--lx-surface);
  color: var(--lx-text);
  font: 400 var(--lx-text-sm)/1.55 var(--lx-font-mono);
  white-space: pre;
  tab-size: 2;
}
.lx-xml:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: -2px; }
.lx-xml code { font: inherit; }   /* el UA le pone monospace propio a <code> */
.lx-xml--texto { white-space: pre-wrap; font-family: var(--lx-font); }
.lx-xml__etiqueta   { color: var(--lx-accent); }
.lx-xml__atributo   { color: var(--lx-text-2); }
.lx-xml__valor      { color: var(--lx-success); }
.lx-xml__puntuacion { color: var(--lx-text-3); }
.lx-xml__comentario { color: var(--lx-text-3); font-style: italic; }

/* ---- Panel de datos ---- */
.lx-datos { display: flex; flex-direction: column; min-height: 100%; }
.lx-datos__mostrar { align-self: flex-start; margin: var(--lx-sp-3) var(--lx-sp-4) 0; }
.lx-datos__mostrar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lx-datos__sindatos { display: flex; flex-direction: column; gap: var(--lx-sp-2); padding: var(--lx-sp-6) var(--lx-sp-4); max-width: 60ch; }
.lx-datos__sindatos p { margin: 0; }
.lx-datos__sindatos-titulo { font-size: var(--lx-text-lg); font-weight: 600; }
.lx-datos__sindatos-accion { color: var(--lx-text-2); font-size: var(--lx-text-sm); }

/* "Para revisar" en la revisión: el bloque de la fase 3, con entradas que llevan al campo. */
.lx-revisar--revision { border-bottom: 1px solid var(--lx-border); }
.lx-revisar--revision .lx-revisar__lista { padding-left: 0; list-style: none; }
.lx-revisar__entrada {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-height: 32px;
  padding: var(--lx-sp-1) var(--lx-sp-2);
  border: 0;
  border-left: 2px solid var(--lx-warning);
  border-radius: 0 var(--lx-radius-sm) var(--lx-radius-sm) 0;
  background: none;
  color: var(--lx-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lx-revisar__entrada--baja { border-left-color: var(--lx-danger); }
.lx-revisar__entrada:hover { background-color: var(--lx-surface); }
.lx-revisar__entrada:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: 2px; }
.lx-revisar__campo { font-weight: 600; text-decoration: underline; text-decoration-color: var(--lx-warning); text-underline-offset: 2px; }
.lx-revisar__detalle { color: var(--lx-text-2); font-size: var(--lx-text-xs); }

/* Secciones semánticas (§6.2): encabezado --lx-text-lg 600, una columna. */
.lx-seccion { padding: var(--lx-sp-4) var(--lx-sp-4) var(--lx-sp-2); }
.lx-seccion + .lx-seccion { border-top: 1px solid var(--lx-border); }
.lx-seccion__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--lx-sp-2);
  margin: 0 0 var(--lx-sp-3);
  color: var(--lx-text);
  font-size: var(--lx-text-lg);
  font-weight: 600;
}
.lx-seccion__conteo { color: var(--lx-text-3); font: 500 var(--lx-text-sm) var(--lx-font-mono); }
.lx-seccion__link { margin-left: auto; font-size: var(--lx-text-sm); font-weight: 500; min-height: 32px; }
.lx-seccion__nota { margin: calc(-1 * var(--lx-sp-2)) 0 var(--lx-sp-3); color: var(--lx-text-2); font-size: var(--lx-text-xs); }
.lx-seccion__titulo--plegable { margin-bottom: var(--lx-sp-2); }
.lx-plegable {
  display: inline-flex;
  align-items: center;
  gap: var(--lx-sp-2);
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.lx-plegable:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: 2px; }
.lx-plegable__chevron, .lx-items__expandir svg { width: 16px; height: 16px; fill: none; stroke: var(--lx-text-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--lx-dur-fast) var(--lx-ease); }
.lx-girado { transform: rotate(180deg); }

/* ---- Campos (§6.3–6.5): label arriba, ancho proporcional ---- */
.lx-campos { display: flex; flex-wrap: wrap; gap: var(--lx-sp-3) var(--lx-sp-6); margin-bottom: var(--lx-sp-3); }
.lx-campo { flex: 1 1 100%; min-width: 0; padding-left: var(--lx-sp-2); border-left: 2px solid transparent; }
.lx-campo:focus { outline: none; }
.lx-campo--ruc { flex: 0 1 180px; }
.lx-campo--fecha { flex: 0 1 160px; }
.lx-campo--importe { flex: 0 1 160px; }
.lx-campo--importe .lx-campo__valor { text-align: right; }
.lx-campo--corto { flex: 0 1 160px; }
.lx-campos--par .lx-campo:not(.lx-campo--ruc):not(.lx-campo--fecha):not(.lx-campo--importe):not(.lx-campo--corto) { flex: 1 1 240px; }
.lx-campo__label {
  display: flex;
  align-items: center;
  gap: var(--lx-sp-1);
  min-height: 20px;
  color: var(--lx-text-2);
  font-size: var(--lx-text-sm);
  font-weight: 500;
}
.lx-campo__valor { margin-top: 2px; color: var(--lx-text); overflow-wrap: anywhere; }
/* .lx-mono no corta (un número legal partido no se compara), pero en un campo de ancho fijo un
   valor largo se superpondría al vecino: acá sí corta, en cualquier punto. */
.lx-campo__valor.lx-mono { white-space: normal; }
.lx-campo__secundario { color: var(--lx-text-2); font-size: var(--lx-text-sm); }
/* Campo observado (§4.3.3–4.3.4): borde izquierdo warning (0,60–0,89) o danger (< 0,60). */
.lx-campo--duda { border-left-color: var(--lx-warning); }
.lx-campo--duda-baja { border-left-color: var(--lx-danger); }
.lx-campo__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -6px 0;
  padding: 0;
  border: 0;
  border-radius: var(--lx-radius-sm);
  background: none;
  color: var(--lx-warning);
  cursor: pointer;
}
.lx-campo--duda-baja .lx-campo__marca { color: var(--lx-danger); }
.lx-campo__marca svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lx-campo__marca:hover { background-color: var(--lx-warning-subtle); }
.lx-campo--duda-baja .lx-campo__marca:hover { background-color: var(--lx-danger-subtle); }
.lx-campo__marca:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: 0; }
.lx-campo__duda {
  margin: var(--lx-sp-1) 0 0;
  padding: var(--lx-sp-1) var(--lx-sp-2);
  border-radius: var(--lx-radius-sm);
  background-color: var(--lx-warning-subtle);
  color: var(--lx-text);
  font-size: var(--lx-text-sm);
}
.lx-campo--duda-baja .lx-campo__duda { background-color: var(--lx-danger-subtle); }

/* ---- Ítems (nivel A inline, §6.1): tabla propia, sin grilla dentro de grilla ---- */
.lx-items { width: 100%; border-collapse: collapse; font-size: var(--lx-text-sm); }
.lx-items th {
  padding: var(--lx-sp-2);
  border-bottom: 1px solid var(--lx-border);
  background-color: var(--lx-surface-2);
  color: var(--lx-text-2);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.lx-items td { padding: var(--lx-sp-2); border-bottom: 1px solid var(--lx-border); vertical-align: top; }
.lx-items__num,
.lx-items th.lx-items__num { text-align: right; }   /* th: .lx-items th (0,1,1) lo dejaba a la izquierda */
.lx-items__fila { box-shadow: inset 2px 0 0 transparent; }
.lx-items__fila:hover { background-color: var(--lx-surface-2); }
.lx-items__fila:focus { outline: none; }
.lx-items__fila:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: -2px; }
.lx-items__fila--duda { box-shadow: inset 2px 0 0 var(--lx-warning); }
.lx-items__fila--duda-baja { box-shadow: inset 2px 0 0 var(--lx-danger); }
.lx-items__desc { display: block; color: var(--lx-text); }
.lx-items__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lx-sp-2); margin-top: 2px; color: var(--lx-text-2); font-size: var(--lx-text-xs); }
.lx-items__conf { color: var(--lx-text-2); }
.lx-items__aviso { color: var(--lx-warning); font-weight: 500; }
.lx-items__fila--duda-baja .lx-items__aviso { color: var(--lx-danger); }
.lx-items__unidad { margin-left: .5ch; color: var(--lx-text-2); }
.lx-items__impuesto { color: var(--lx-text-2); white-space: nowrap; }
.lx-items__total { font-weight: 500; }
.lx-items td.lx-items__expandir { width: 40px; padding-top: 4px; padding-bottom: 4px; text-align: right; }
.lx-items__expandir .lx-btn--icono { width: 32px; }
.lx-items__detalle td { background-color: var(--lx-surface-2); }

/* Pares etiqueta · valor (detalle de ítem, detalles del sistema). */
.lx-pares { display: grid; gap: var(--lx-sp-1); margin: 0; }
.lx-pares__par { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; gap: var(--lx-sp-3); }
.lx-pares dt { color: var(--lx-text-2); font-weight: 500; }
.lx-pares dd { margin: 0; color: var(--lx-text); overflow-wrap: anywhere; }
.lx-pares__secundario { color: var(--lx-text-2); }
.lx-pares__par--duda dt { color: var(--lx-warning); }
.lx-pares--sistema dd { font-family: var(--lx-font-mono); font-size: var(--lx-text-sm); white-space: normal; }

/* ---- Totales (§6.1: gravado, exento, IVA, total) ---- */
.lx-totales { display: grid; gap: var(--lx-sp-1); max-width: 360px; margin: 0 0 0 auto; }
.lx-totales__linea { display: flex; justify-content: space-between; gap: var(--lx-sp-4); padding: 2px var(--lx-sp-2); border-left: 2px solid transparent; }
.lx-totales__linea:focus { outline: none; }
.lx-totales__linea dt { color: var(--lx-text-2); }
.lx-totales__linea dd { margin: 0; }
.lx-totales__linea--total { margin-top: var(--lx-sp-1); padding-top: var(--lx-sp-2); border-top: 1px solid var(--lx-border); font-size: var(--lx-text-lg); font-weight: 600; }
.lx-totales__linea--total dt { color: var(--lx-text); }
.lx-totales__linea--duda { border-left-color: var(--lx-warning); }
.lx-totales__aviso { color: var(--lx-warning); }

/* ---- Colecciones de nivel B: pills con contador (§6.1) ---- */
.lx-pills { display: flex; flex-wrap: wrap; gap: var(--lx-sp-2); }
.lx-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--lx-sp-2);
  min-height: 32px;
  padding: 0 var(--lx-sp-3);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
  background-color: var(--lx-surface);
  color: var(--lx-text);
  font: 500 var(--lx-text-sm)/1 var(--lx-font);
  cursor: pointer;
}
.lx-pill:hover { border-color: var(--lx-border-strong); }
.lx-pill:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: 2px; }
.lx-pill__conteo { color: var(--lx-text-2); font-family: var(--lx-font-mono); font-size: var(--lx-text-xs); }
/* Apagada = 0 registros: se sigue pudiendo abrir (muestra el vacío con CTA), pero no llama. */
.lx-pill--vacia { background-color: var(--lx-surface-2); color: var(--lx-text-2); }
.lx-pill--vacia .lx-pill__conteo { color: var(--lx-text-3); }
/* Activa DESPUÉS de vacía: una pill en 0 abierta tiene que verse abierta. */
.lx-pill--activa { border-color: var(--lx-accent); background-color: var(--lx-accent-subtle); color: var(--lx-text); }
.lx-pills__panel { margin-top: var(--lx-sp-3); }
.lx-pills__cta { margin-top: var(--lx-sp-2); min-height: 32px; }
.lx-lista { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--lx-border); }
.lx-lista__fila { display: flex; justify-content: space-between; gap: var(--lx-sp-4); padding: var(--lx-sp-2); border-bottom: 1px solid var(--lx-border); font-size: var(--lx-text-sm); }
.lx-lista__secundario { color: var(--lx-text-2); }
.lx-vacio--compacto { align-items: flex-start; gap: var(--lx-sp-2); padding: var(--lx-sp-2) 0; font-size: var(--lx-text-sm); text-align: left; }
.lx-vacio--compacto .lx-link { min-height: 32px; }

/* ---- Validaciones: checklist compacto ✓/⚠/✕ (§6.1) ---- */
.lx-checklist { display: grid; gap: var(--lx-sp-1); margin: 0; padding: 0; list-style: none; font-size: var(--lx-text-sm); }
.lx-checklist__regla { display: grid; grid-template-columns: 20px 1fr; column-gap: var(--lx-sp-2); padding: 2px 0; }
.lx-checklist__regla:focus { outline: none; }
.lx-checklist__regla:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: 2px; }
.lx-checklist__icono { font-weight: 600; text-align: center; }
.lx-checklist__icono--ok { color: var(--lx-success); }
.lx-checklist__icono--advertencia { color: var(--lx-warning); }
.lx-checklist__icono--error { color: var(--lx-danger); }
.lx-checklist__nombre { grid-column: 2; color: var(--lx-text); font-weight: 500; }
.lx-checklist__mensaje { grid-column: 2; color: var(--lx-text-2); }
.lx-checklist__regla--ok .lx-checklist__nombre { font-weight: 400; }

/* ---- Historial (nivel C, timeline) ---- */
.lx-timeline { display: grid; gap: var(--lx-sp-2); margin: 0; padding: 0; list-style: none; font-size: var(--lx-text-sm); }
.lx-timeline__paso { display: grid; padding-left: var(--lx-sp-3); border-left: 2px solid var(--lx-border); }
.lx-timeline__paso--warning { border-left-color: var(--lx-warning); }
.lx-timeline__paso--info { border-left-color: var(--lx-info); }
.lx-timeline__paso--success { border-left-color: var(--lx-success); }
.lx-timeline__paso--danger { border-left-color: var(--lx-danger); }
.lx-timeline__accion { color: var(--lx-text); font-weight: 500; }
.lx-timeline__meta { color: var(--lx-text-2); font-size: var(--lx-text-xs); }
.lx-timeline__motivo { color: var(--lx-text); }

@media (prefers-reduced-motion: reduce) {
  .lx-plegable__chevron, .lx-items__expandir svg { transition: none; }
}


/* ===========================================================================
   FASE 5 — PROVEEDORES, CONFIGURACIÓN Y MODO HOST (DESIGN.md §3, §6, §6.7, §7, §8).
   Markup: Vistas/ (LxEncabezado, LxPie, LxCopiable), Proveedores/, Configuracion/,
   Administracion/. Las vistas son DetailViews de XAF recompuestos (VistasLexta): las clases
   lx-* van en los nodos de layout por CustomCSSClassName (nuestras, no de DX); el grupo de DX
   se tiñe por sus variables en dx-overrides.css §5. Solo tokens.
   =========================================================================== */

/* ---- Header sticky (§6.1): el ítem de layout se pega arriba del scroll de la vista ----
   Sticky va en el ÍTEM de layout (hijo directo del grupo Main, que tiene el alto de toda la
   vista), no en el <header>: el padre del header mide lo mismo que él y no dejaría pegarse. */
.lx-encabezado-item {
  position: sticky;
  /* El scroller de XAF (.main-content) tiene 8px de padding arriba: con top 0 el contenido
     asomaba por encima del header al scrollear. -8px lo pega al borde real del scroll. */
  top: calc(-1 * var(--lx-sp-2));
  z-index: 2;
  background-color: var(--lx-surface);
}
.lx-encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--lx-sp-2) var(--lx-sp-6);
  padding: var(--lx-sp-2) 0 var(--lx-sp-3);
  border-bottom: 1px solid var(--lx-border);
  background-color: var(--lx-surface);
  color: var(--lx-text);
  font-family: var(--lx-font);
}
.lx-encabezado__identidad { min-width: 0; flex: 1 1 320px; }
.lx-encabezado__contexto {
  margin: 0 0 2px;
  color: var(--lx-text-2);
  font-size: var(--lx-text-xs);
  font-weight: 500;
}
/* Host (§3.1): el contexto repite "Administración" en el tono de la etiqueta del header. */
.lx-encabezado__contexto--host { color: var(--lx-warning); }
.lx-encabezado__titulo {
  margin: 0;
  overflow: hidden;
  color: var(--lx-text);
  font-size: var(--lx-text-xl);
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lx-encabezado__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lx-sp-1) var(--lx-sp-3);
  margin: var(--lx-sp-1) 0 0;
  color: var(--lx-text-2);
  font-size: var(--lx-text-sm);
}
.lx-encabezado__badge { display: inline-flex; align-items: center; gap: var(--lx-sp-2); }
.lx-encabezado__secundario { color: var(--lx-text-2); font-size: var(--lx-text-xs); }
.lx-encabezado__estado { margin: 0; min-height: 20px; }
.lx-encabezado__sin-guardar {
  display: inline-flex;
  align-items: center;
  gap: var(--lx-sp-1);
  color: var(--lx-warning);
  font-size: var(--lx-text-sm);
  font-weight: 500;
}
.lx-encabezado__sin-guardar::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--lx-warning);
}
.lx-encabezado__acciones { display: flex; gap: var(--lx-sp-2); }

/* ---- Footer de auditoría (§6.6) ---- */
.lx-pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-sp-2);
  margin-top: var(--lx-sp-4);
  padding: var(--lx-sp-3) 0 0;
  border-top: 1px solid var(--lx-border);
  color: var(--lx-text-2);
  font-family: var(--lx-font);
  font-size: var(--lx-text-xs);
}

/* ---- Secciones del formulario de XAF (§6.2) ----
   Encabezado y separador de cada sección; el fondo, el borde y la tipografía del grupo de DX
   se resuelven por variables (dx-overrides.css §5). Una hairline arriba separa secciones:
   nada de cajas (§1 "calma"). */
/* La hairline va en un ::before inset con el gutter del form layout (12px = --lx-sp-3, el
   padding de la columna): un border-top del grupo quedaría más ancho que la del header. */
.lx-form-seccion { position: relative; padding-top: var(--lx-sp-4); }
.lx-form-seccion::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--lx-sp-3);
  right: var(--lx-sp-3);
  border-top: 1px solid var(--lx-border);
}
.lx-encabezado-item + .lx-form-seccion::before { display: none; }
.lx-form-subseccion { margin-top: var(--lx-sp-2); }

/* Anchos proporcionales (§6.4): el editor no ocupa la pantalla entera si el dato es corto.
   Dos clases nuestras (0,2,0) para ganarle a la columna del form layout sin !important. */
.lx-form-campo.lx-ancho-ruc     { flex: 0 0 auto; width: min(100%, 220px); }
.lx-form-campo.lx-ancho-corto   { flex: 0 0 auto; width: min(100%, 160px); }
.lx-form-campo.lx-ancho-importe { flex: 0 0 auto; width: min(100%, 220px); }
.lx-form-campo.lx-ancho-medio   { flex: 0 0 auto; width: min(100%, 320px); }
.lx-form-campo.lx-ancho-largo   { flex: 0 0 auto; width: min(100%, 480px); }

/* ---- Bloques propios dentro de las secciones (Configuración, categoría) ---- */
.lx-config-bloque { display: grid; gap: var(--lx-sp-2); font-family: var(--lx-font); }
.lx-config-bloque__label {
  display: flex;
  align-items: baseline;
  gap: var(--lx-sp-2);
  margin: 0;
  color: var(--lx-text-2);
  font-size: var(--lx-text-sm);
  font-weight: 500;
}
.lx-config-bloque__nota { margin: 0; max-width: 72ch; color: var(--lx-text-2); font-size: var(--lx-text-sm); }
.lx-config-bloque__nota--campo { margin-top: calc(-1 * var(--lx-sp-1)); font-size: var(--lx-text-xs); }
.lx-config-bloque__acciones { display: flex; flex-wrap: wrap; gap: var(--lx-sp-2); }
.lx-config-bloque .lx-copiable { justify-self: start; }
.lx-unidades { max-width: 640px; }

.lx-categoria { display: grid; gap: var(--lx-sp-2); font-family: var(--lx-font); font-size: var(--lx-text-sm); }
.lx-categoria p { margin: 0; }
.lx-categoria__origen { display: flex; flex-wrap: wrap; gap: var(--lx-sp-1) var(--lx-sp-2); max-width: 72ch; color: var(--lx-text-2); }
.lx-categoria__etiqueta { color: var(--lx-text); font-weight: 500; }
.lx-categoria__pendiente { flex-basis: 100%; color: var(--lx-warning); font-weight: 500; }
.lx-categoria__sugerida {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lx-sp-2) var(--lx-sp-3);
  justify-self: start;
  padding: var(--lx-sp-2) var(--lx-sp-3);
  border-radius: var(--lx-radius-md);
  background-color: var(--lx-info-subtle);
  color: var(--lx-text);
}

/* ---- Proveedor: datos de solo lectura + documentos (nivel B, sección única) ----
   Reutiliza .lx-seccion/.lx-campos de la revisión; acá las secciones alinean con las del
   formulario de XAF (sin el padding lateral del panel de la revisión). */
.lx-proveedor .lx-seccion { padding: var(--lx-sp-4) 0 var(--lx-sp-2); }
.lx-proveedor .lx-seccion:first-child { border-top: 1px solid var(--lx-border); }
.lx-proveedor .lx-campo { padding-left: 0; }

.lx-docs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--lx-border); }
.lx-docs__fila {
  display: grid;
  grid-template-columns: 12px 32px minmax(140px, 1.2fr) 96px minmax(120px, 1fr) minmax(96px, auto);
  align-items: center;
  gap: var(--lx-sp-3);
  width: 100%;
  min-height: 36px;
  padding: 0 var(--lx-sp-2);
  border: 0;
  border-bottom: 1px solid var(--lx-border);
  background: none;
  color: var(--lx-text);
  font: 400 var(--lx-text-sm)/1.3 var(--lx-font);
  text-align: left;
  cursor: pointer;
}
.lx-docs__fila:hover { background-color: var(--lx-surface-2); }
.lx-docs__fila:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: -2px; }
.lx-docs__emision { color: var(--lx-text-2); }
.lx-docs__total { text-align: right; }
.lx-docs__mas { margin-top: var(--lx-sp-2); min-height: 32px; font-size: var(--lx-text-sm); }
@media (max-width: 767px) {
  .lx-docs__fila { grid-template-columns: 12px 32px 1fr auto; }
  .lx-docs__emision, .lx-docs__estado { display: none; }
}

/* ---- Grillas de la fase 5 (Proveedores, host) ---- */
.lx-categoria-celda { display: inline-flex; align-items: center; gap: var(--lx-sp-2); }
.lx-categoria-celda__origen { color: var(--lx-text-2); font-size: var(--lx-text-xs); }
.lx-texto-3 { color: var(--lx-text-3); }
.lx-vacio__fuerte { color: var(--lx-text); font-weight: 600; }

/* ---- Salud (host) ---- */
.lx-salud { font-family: var(--lx-font); color: var(--lx-text); }
.lx-salud__header { align-items: flex-end; }
.lx-salud__cuerpo { padding-top: var(--lx-sp-4); }
.lx-salud__tabla td { vertical-align: top; }
.lx-salud__fila--warning { box-shadow: inset 2px 0 0 var(--lx-warning); }
.lx-salud__fila--danger { box-shadow: inset 2px 0 0 var(--lx-danger); }
.lx-salud__detalle, .lx-salud__accion { display: block; margin-top: var(--lx-sp-1); max-width: 72ch; font-size: var(--lx-text-xs); }
.lx-salud__detalle { color: var(--lx-text); }
.lx-salud__accion { color: var(--lx-text-2); }
.lx-salud__nada { color: var(--lx-text-2); }
.lx-salud__skeleton { display: grid; gap: var(--lx-sp-3); padding: var(--lx-sp-2); }
.lx-salud__skeleton-fila { display: grid; grid-template-columns: 2fr 1fr 80px 80px 1fr; gap: var(--lx-sp-4); align-items: center; }
.lx-skel--texto { width: 70%; }
.lx-skel--texto-corto { width: 50%; }
.lx-skel--badge { width: 72px; }
.lx-skel--num { width: 32px; justify-self: end; }

/* ---- Navegación (§3.2): entradas de primer nivel ----
   EXCEPCIÓN DOCUMENTADA (DESIGN.md §9), mismo criterio que las líneas de la grilla: el
   styles.css de XAF 25.2 (no DX) subraya todo ítem clickeable de la navegación
   (.clickable-xaf-nav-item > a .xaf-nav-link) y pone en 600 el texto de los encabezados de
   grupo del acordeón (.dxbl-accordion-group-header .xaf-nav-link). Con la navegación de la
   fase 5 las tres entradas son de primer nivel = "encabezados": salían subrayadas y en
   negrita, como links de un documento. No hay variable para ninguna de las dos reglas; se
   pisan solo esas dos propiedades, dentro de la navegación de XAF. */
html body .xaf-nav-item .xaf-nav-link {
  font-weight: 500;
  text-decoration: none;
}

/* ---- Toasts de XAF (§8, fase 5): superficie + línea semántica ----
   Fondo y texto por variables (dx-overrides.css §6). Acá la forma: hairline, radio md,
   sombra de overlay (es un overlay: único lugar con sombra, §2) y una línea de 3px en el
   color de estado, que es lo que dice si salió bien o mal sin pintar el toast entero.
   EXCEPCIÓN DOCUMENTADA (DESIGN.md §9): .xaf-alert/.alert-* son clases del template de XAF
   (no de DX) y no hay variable para borde, radio ni sombra. */
html .xaf-alert {
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-md);
  box-shadow: inset 3px 0 0 var(--lx-info), var(--lx-shadow-overlay);
  font-family: var(--lx-font);
  font-size: var(--lx-text-md);
}
html .xaf-alert.alert-success { box-shadow: inset 3px 0 0 var(--lx-success), var(--lx-shadow-overlay); }
html .xaf-alert.alert-warning { box-shadow: inset 3px 0 0 var(--lx-warning), var(--lx-shadow-overlay); }
html .xaf-alert.alert-danger  { box-shadow: inset 3px 0 0 var(--lx-danger),  var(--lx-shadow-overlay); }

/* ---- TagBox de XAF (palabras clave de servicio, 26.1) ----
   El template de XAF dibuja el chip sin padding (el texto toca el borde) y en claro el fondo
   --lx-surface-2 casi no se separa del campo. Chip con aire y hairline; sin "×": se quita con
   Retroceso/Suprimir y el doble clic abre la palabra (UI-CHECKLIST trampa 52). */
.xaf-tag-box .xaf-tag-box-tag {
  padding: 1px 6px;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-sm, 4px);
  background: var(--lx-surface-2);
  color: var(--lx-text);
  font-weight: 500;
}
