.review-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.review-header .invoice-number {
  font-weight: 600;
}

/* Paso post-11 (feedback UI): badge de confianza clicable — permite
   volver a saltar a la página de evidencia bajo demanda (force=true en
   highlightField), ya que el foco del campo solo auto-navega una vez. */
.field-confidence--clickable {
  cursor: pointer;
  text-decoration: underline dotted;
}

.field-confidence--clickable:hover {
  color: var(--text-primary);
}

/* Paso 8.47/8.72: dos columnas a partir de escritorio — apiladas en
   pantallas estrechas, sin invertir demasiado en móvil aquí. */
.review-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

@media (max-width: 1100px) {
  .review-layout {
    grid-template-columns: 1fr;
  }
}

.review-viewer-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* Sin esto, un canvas con ancho fijo en px (zoom > 100%, ver
     renderPdfPage()) hace crecer toda la columna del grid en vez de
     desbordar dentro de .review-viewer — los grid/flex items calculan su
     min-width por defecto a partir del contenido, no de su propio ancho
     asignado ("grid blowout"). */
  min-width: 0;
}

/* Navegación entre páginas del PDF — fuera de .review-viewer a propósito:
   si viviera dentro, empujaría el canvas hacia abajo y desalinearía el
   overlay de highlight (calculado en block.y * scale, relativo al borde
   superior de .review-viewer). */
.viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.viewer-toolbar span {
  color: var(--text-secondary);
  font-size: 13px;
}

/* Bloque A7: no depende del viewer — funciona aunque pdf.js no haya cargado
   o el formato no sea visualizable, así que va aparte del toolbar del
   propio visor. */
.document-actions {
  display: flex;
  gap: var(--space-3);
  font-size: 13px;
}

.review-viewer {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  overflow: auto;
  min-height: 480px;
  /* Sin esto, el ancho está acotado por la columna del grid (de ahí que
     el scroll horizontal ya funcionara) pero el alto no lo acota nada —
     en vez de desbordar y activar el scroll vertical, el contenedor
     simplemente crecía para caber todo el contenido (la página entera se
     alargaba en vez del visor hacer scroll). */
  max-height: 75vh;
  min-width: 0;
}

.review-viewer canvas,
.review-viewer img {
  display: block;
  width: 100%;
  height: auto;
}

/* Paso 8.54/8.57: overlay de highlight OCR — un rectángulo semitransparente
   posicionado en absoluto sobre el canvas/imagen. */
.ocr-highlight {
  position: absolute;
  background: rgba(47, 93, 138, 0.28);
  border: 1px solid var(--brand-primary);
  border-radius: 2px;
  pointer-events: none;
}

/* Bloque 14: rectángulo dibujado a mano por el revisor — visualmente
   distinto de .ocr-highlight (que es de solo lectura) y, a diferencia de
   ese, con pointer-events:auto porque necesita recibir los propios
   eventos de mousedown/mousemove/mouseup del modo dibujo. */
.manual-region {
  position: absolute;
  background: rgba(200, 90, 30, 0.15);
  border: 2px dashed #c85a1e;
  border-radius: 2px;
  pointer-events: auto;
  cursor: crosshair;
}

#draw-region-button.active {
  background: var(--brand-primary);
  color: var(--text-inverse);
}

/* Botones con icono SVG en línea (currentColor: sigue el color de texto
   del botón en cada estado — normal/activo/deshabilitado — sin reglas
   propias por estado). Sustituyen a los emoji (📐/💡) por un icono
   monocromo más acorde a una herramienta de gestión, no un adorno. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.btn-icon svg {
  flex-shrink: 0;
}

/* Bloque C (clasificación de documentos): vínculo albarán/proforma <-> la
   factura real que lo resuelve, en los dos sentidos. */
.matched-invoice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
}

.matched-documents {
  margin: 0;
  padding-left: var(--space-4);
}

.viewer-zoom {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.viewer-zoom button {
  width: 26px;
  height: 26px;
  padding: 0;
  line-height: 1;
}

#viewer-zoom-level {
  min-width: 3.5em;
  text-align: center;
}

.review-form .field-row {
  margin-bottom: var(--space-3);
}

.review-form .field-row label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.review-form .hint {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

/* .link-button (base) vive en components.css (Bloque 12) — aquí solo el
   espaciado propio de ir embebido en un .hint (p. ej. "Copiar de Sociedad"). */
.hint .link-button {
  margin-left: var(--space-2);
}

/* .link-button suelto (sin texto de .hint delante, p. ej. "+ Crear proyecto
   nuevo" bajo el desplegable de Proyecto) — mismo aspecto discreto que
   .hint, pero como bloque propio en vez de margin-left. */
.hint-link-button {
  display: block;
  margin-top: var(--space-1);
  font-size: 13px;
}

/* Paso 11.13 (Bloque 11): checkbox único de sesión de revisión — a
   diferencia de .field-row label (space-between, pensado para etiqueta +
   badge de confidence), aquí la casilla y el texto van juntos a la
   izquierda. */
.review-form .field-row.learning-checkbox-row label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-start;
}

.amounts-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
}

.payment-term-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.tax-lines-table {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Secciones colapsables del formulario (<details> nativo) — mismo aspecto
   de tarjeta que .tax-lines-table, para que "sección" se lea como un único
   lenguaje visual en toda la pantalla. */
.review-section {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.review-section > summary {
  cursor: pointer;
  padding: var(--space-3);
  font-weight: 600;
  user-select: none;
  list-style-position: outside;
}

/* Separa la cabecera del contenido solo cuando hay contenido que separar
   (evita un borde huérfano pegado al triángulo nativo cuando está
   colapsada). */
.review-section[open] > summary {
  border-bottom: 1px solid var(--surface-border);
}

.review-section-body {
  padding: var(--space-3);
}

.review-section-body .tax-lines-table {
  /* Ya está dentro de la tarjeta "IVA y descuentos" — sin borde ni fondo
     propios repetidos, solo el h4 y el espaciado entre líneas. */
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 0;
}

.tax-lines-table .tax-line-row {
  display: grid;
  /* Bloque F2: dos columnas más que antes (tratamiento + % deducible) —
     flex-wrap, no una rejilla rígida: con varias líneas en pantalla un ancho
     fijo por línea rompía antes que envolver. */
  grid-template-columns: 1fr 1fr 1fr 1.4fr 1fr auto;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  align-items: end;
  flex-wrap: wrap;
}

/* El aviso de "tratamiento sin soporte fiscal" ocupa toda la fila, nunca una
   sola columna de la rejilla de arriba. */
.tax-lines-table .tax-line-row .tax-line-unsupported-hint {
  grid-column: 1 / -1;
  color: var(--color-warning, #a15c00);
}

/* Bloque F2: retenciones — mismo aspecto de tarjeta que .tax-lines-table
   (reutilizada tal cual, ver el markup de invoice-review.js), pero con sus
   propias 4 columnas (tipo, %, base, importe) + botón. */
.tax-lines-table .withholding-line-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  align-items: end;
}

/* Fila de solo lectura (Retención/Neto a pagar) bajo Base/IVA/Total —
   mismo grid de 3 columnas que .amounts-row para que las etiquetas queden
   alineadas verticalmente con los importes de arriba. */
.fiscal-summary-row {
  margin-top: var(--space-2);
}

.fiscal-summary-row .label-static {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
}

.fiscal-summary-row .amount-readonly {
  margin: 0;
  font-weight: 600;
}

/* Bloque F4: una línea de concepto trae muchos más campos de los que caben
   en una fila de rejilla de 3 columnas como IVA — cada línea es su propia
   mini-tarjeta con los campos repartidos en varias filas internas
   (flex-wrap, no grid de columnas fijas: el número de campos por fila
   varía). */
/* Resumen a la derecha del título de una sección plegable: cuántas líneas
   hay, cuánto suman y si cuadra. Con decenas de conceptos en pantalla es lo
   primero que se mira, y hasta ahora obligaba a bajar al panel de validación
   para saberlo. Va dentro del <summary>, así que se ve también plegada. */
.review-section > summary .section-summary {
  float: right;
  font-weight: 400;
  font-size: 13px;
  color: var(--text-secondary);
}

.review-section > summary .section-summary--ok {
  color: var(--success, #1a7f37);
}

.review-section > summary .section-summary--warn {
  color: var(--danger);
}

/* Los conceptos son una REJILLA, no una tarjeta por línea: con los rótulos
   repetidos en cada tarjeta, 43 conceptos ocupaban 7.890px y 89 llegaban a
   16.216px — trece pantallas de scroll para una sola factura. Con los
   rótulos una sola vez arriba y una fila por concepto, cada línea baja de
   ~180px a ~38px. */
.concept-lines-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.concept-lines-toolbar input[type="search"] {
  flex: 1 1 18em;
  max-width: 26em;
}

.concept-lines-toolbar .hint {
  margin: 0;
  white-space: nowrap;
}

/* Altura acotada con scroll propio: sin esto, para llegar a "IVA y
   descuentos" o al botón Aprobar había que recorrer las 89 líneas. */
.concept-lines-table {
  max-height: 60vh;
  overflow: auto;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.concept-lines-head,
.concept-line-row {
  display: grid;
  grid-template-columns:
    2.5rem minmax(7rem, 1fr) 6rem minmax(12rem, 3fr)
    5rem 6rem 4.5rem 7rem 3.5rem;
  gap: var(--space-1);
  align-items: center;
  padding: 2px var(--space-2);
}

/* Pegada arriba: al desplazar 89 filas nunca se pierde de vista qué columna
   es cada celda. */
.concept-lines-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  border-bottom: 1px solid var(--surface-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.concept-line-row {
  border-bottom: 1px solid var(--surface-border);
}

.concept-line-row:last-child {
  border-bottom: none;
}

.concept-line-row input,
.concept-line-row select {
  width: 100%;
  min-width: 0;
  font-size: 13px;
  padding: 2px var(--space-1);
}

.concept-line-number {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
}

.concept-line-actions {
  display: flex;
  gap: 2px;
}

.concept-line-icon {
  padding: 0 var(--space-1);
  min-width: 1.5rem;
  line-height: 1.4;
  background: none;
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.concept-line-icon:hover {
  border-color: var(--surface-border);
}

.concept-line-icon--danger:hover {
  color: var(--danger);
}

/* Fila cuyo cantidad × precio (con descuento) no da el importe. Con decenas
   de líneas, es lo que convierte "revisarlas todas" en "revisar estas". */
.concept-line-row--mismatch {
  background: var(--danger-surface);
}

.concept-line-row--mismatch .concept-line-number::after {
  content: " !";
  color: var(--danger);
  font-weight: 700;
}

.concept-line-extra-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-2) 3rem;
  border-bottom: 1px solid var(--surface-border);
  background: var(--surface-muted, #f7f8fa);
}

.concept-line-extra-row > div {
  flex: 1 1 7em;
}

.concept-line-extra-row label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
}

.concept-line-extra-row input {
  width: 100%;
  font-size: 13px;
}

/* Campos que ninguna plantilla real rellena (IVA por línea) o derivados de
   otros (bruto, importe de descuento): fuera de la vista por defecto. Con 43
   líneas, mostrarlo todo son ~600 controles en pantalla. */
/* "Importe" es el único campo del que depende el cuadre de la factura
   (CONCEPT_LINES_BALANCE suma net_amount y se salta la regla entera si falta
   en alguna línea) — se marca para que no se quede vacío por descuido. */
input.concept-line-key-field {
  border-color: var(--brand-primary);
  font-weight: 600;
}

/* Valor calculado a partir de otros campos de la misma línea, no tecleado:
   se distingue para que el revisor sepa que puede pisarlo. */
input.derived-value {
  background: var(--surface-muted, #f4f6f8);
  font-style: italic;
}

.validation-panel {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: var(--space-4) 0;
}

.review-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.review-actions .right {
  display: flex;
  gap: var(--space-2);
}

.blocking-validation-inline {
  background: var(--danger-surface);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-top: var(--space-3);
  font-size: 13px;
}

/* Bloque A2.7: el selector remoto de proyecto sustituye al <select> plano.
   Los estilos base del componente viven en pages/master-data.css; aquí solo
   lo que es propio de esta pantalla. */
.field-project-slot {
  flex: 1;
  min-width: 18rem;
}

.field-project-slot.hint {
  color: var(--color-text-muted);
  font-size: 0.9em;
}

/* Un valor histórico inactivo NO es un error: se marca, se puede conservar y
   se puede sustituir. Un valor irresoluble sí es una anomalía, y se distingue
   claramente del anterior (nunca se convierte en "sin valor"). */
option.is-inactive,
.chip.is-inactive {
  color: var(--color-text-muted);
}

option.is-unresolved,
.chip.is-unresolved,
input.is-unresolved {
  color: var(--color-danger);
  font-style: italic;
}

/* Búsqueda de tipo de concepto: solo aparece cuando el catálogo no cabe en una
   página, así que es un diálogo pequeño, no una pantalla. */
.concept-type-search-slot {
  min-width: min(26rem, 80vw);
  margin-bottom: 1rem;
}

/* Bloque A4: imputación contable. Misma forma que Conceptos: una rejilla, no
   una tabla — las columnas se ajustan al panel y, sobre todo, ningún
   contenedor con overflow recorta el desplegable del selector remoto. */

/* Bloque A5: el nivel (factura o concepto) manda sobre todo lo demás, así que
   va arriba del todo y separado de los controles de un reparto concreto. */
.allocation-scope {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.allocation-scope select {
  min-width: 9rem;
}

/* Un concepto por bloque plegable: con 20 conceptos, verlos todos desplegados
   haría ilegible la sección. El resumen enseña lo justo para decidir cuál
   abrir (número, descripción, base y estado). */
.allocation-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.allocation-line {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
}

.allocation-line-summary {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-2);
  cursor: pointer;
  font-size: 13px;
}

.allocation-line-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.allocation-line-base {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.allocation-line-status {
  color: var(--text-secondary);
  white-space: nowrap;
}

.allocation-line-body {
  padding: 0 var(--space-2) var(--space-2);
}

.allocation-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.allocation-toolbar select {
  min-width: 9rem;
}

.allocation-toolbar button {
  margin-left: auto;
  white-space: nowrap;
}

.allocation-grid {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.allocation-head,
.allocation-row {
  display: grid;
  gap: var(--space-1);
  align-items: start;
  padding: var(--space-1) var(--space-2);
}

.allocation-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--surface-border);
}

.allocation-row {
  border-bottom: 1px solid var(--surface-border);
}

.allocation-row:last-child {
  border-bottom: none;
}

/* Como en Conceptos: la unidad está en la cabecera, así que la celda es un
   input y nada puede descolgarse a la línea siguiente. */
.allocation-value {
  width: 100%;
  min-width: 0;
  text-align: right;
  font-size: 13px;
  padding: 2px var(--space-1);
  font-variant-numeric: tabular-nums;
}

.allocation-effective {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  padding-top: 3px;
  white-space: nowrap;
}

.allocation-row-actions {
  text-align: right;
}

.allocation-empty {
  margin: 0;
  padding: var(--space-2);
  color: var(--text-secondary);
  font-size: 13px;
}

/* Bloque A5: lo que el navegador ya sabe que el backend va a rechazar. Va
   junto al concepto que lo causa, no solo en el botón de guardar. */
.allocation-errors {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-3);
  color: var(--color-danger, #b42318);
  font-size: 13px;
}

.allocation-totals {
  margin: 0 0 var(--space-2);
  color: var(--text-secondary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Dentro de una fila la etiqueta ya la da la cabecera de la rejilla. */
/* El selector remoto trae min-width: 16rem porque en Datos maestros vive
   suelto en un formulario. Dentro de una rejilla eso es un mínimo que las
   columnas no pueden bajar, así que tres selectores desbordaban la fila y
   dejaban sin ancho a Importe y Efectivo. */
/* Dos selectores en el prefijo A PROPÓSITO. `.remote-select` trae
   min-width: 16rem desde master-data.css, que el shell carga DESPUÉS que
   esta hoja: con la misma especificidad ganaría aquella por orden y la
   columna volvería a ensancharse. Con `.allocation-row` delante gana esta
   sin depender del orden de los <link>.
   Hay que neutralizar TODA la cadena: el componente anida
   .remote-select > .remote-select-box > input, y basta con que un eslabón
   conserve el ancho mínimo intrínseco del input (~20 caracteres) para que la
   columna se descuadre. */
.allocation-row .remote-select,
.allocation-row .remote-select-box,
.allocation-row .remote-select input {
  min-width: 0;
}

.allocation-row .remote-select input {
  font-size: 13px;
  padding: 2px var(--space-1);
  width: 100%;
}

.allocation-row .remote-select > label {
  display: none;
}

/* Ninguna celda puede imponer un mínimo mayor que su columna. */
.allocation-head > *,
.allocation-row > * {
  min-width: 0;
}

/* Requiere revisión no es un error: la imputación sigue siendo válida, solo
   que la factura cambió por debajo. */
.allocation-notice {
  border-left: 3px solid var(--color-warning, #9a6700);
  background: var(--surface-muted, rgba(0, 0, 0, 0.03));
  padding: var(--space-2);
  margin-bottom: var(--space-2);
}

.allocation-notice p {
  margin: 0 0 var(--space-1);
}

/* Bloque F3: distribución financiera — 4 columnas FIJAS (cuenta contable,
   importe/porcentaje, efectivo, quitar), a diferencia de Expense/Tax que
   varían según qué dimensiones estén habilitadas — así que un CSS fijo basta,
   sin gridTemplate() en JS. */
.financial-allocation-head,
.financial-allocation-row {
  grid-template-columns: minmax(10rem, 1fr) 7.5rem 6.5rem 2.5rem;
}

/* Más severo que .allocation-notice (needs_review: sigue siendo válido, solo
   desactualizado) — aquí NO hay nada que guardar todavía, por eso el acento
   es de error, no de aviso. */
.financial-allocation-fiscal-notice {
  border-left: 3px solid var(--color-danger, #b42318);
  background: var(--surface-muted, rgba(0, 0, 0, 0.03));
  padding: var(--space-2);
  margin-bottom: var(--space-2);
}

.financial-allocation-fiscal-notice p {
  margin: 0;
}

.financial-allocation-base {
  font-weight: 600;
}

/* RULES-ACC-01.4-B1: sugerencia financiera (UI-01/UI-07) en el tono "info" de
   .po-suggestion-panel -- es una ayuda revisable, no un aviso -- y conflictos
   (UI-08) con el acento de aviso de .allocation-notice; el conflicto de una
   evaluación anterior, atenuado: no es el estado vigente. */
.financial-suggestion-band {
  border-left-color: var(--info);
  background: var(--info-surface);
}

.financial-suggestion-summary {
  font-weight: 600;
}

.financial-proposal-detail {
  margin: var(--space-1) 0;
}

.financial-proposal-entries,
.financial-conflict-proposals {
  margin: 0;
  padding-left: var(--space-3);
  overflow-wrap: anywhere;
}

.financial-conflict--not-current {
  border-left-color: var(--text-secondary);
}

.financial-conflict-rule {
  font-weight: 600;
}

.financial-suggestion-load {
  margin-top: var(--space-1);
}

/* RULES-ACC-01.4-B3: procedencia (UI-13) y decisiones (UI-15), compactas. */
.financial-provenance,
.financial-history {
  margin-bottom: var(--space-2);
  font-size: 13px;
}

.financial-provenance-label {
  margin: 0;
  color: var(--text-secondary);
}

.financial-meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px var(--space-2);
  margin: var(--space-1) 0;
  overflow-wrap: anywhere;
}

.financial-meta dt {
  color: var(--text-secondary);
}

.financial-meta dd {
  margin: 0;
}

.financial-history-list {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-3);
}

.financial-history-item p {
  margin: 0;
}

.financial-allocation-read-only {
  font-style: italic;
}

.allocation-context {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 var(--space-3);
  margin: 0;
  font-size: 13px;
}

.allocation-context dt {
  color: var(--text-secondary);
}

/* R4.1 §4: indicador "Sugerido" reutilizable — visible pero no intrusivo,
   nunca presentado como certeza. <details> nativo: el detalle (regla,
   versión, explicación) solo se pinta cuando se expande, sin JS propio
   para abrir/cerrar. */
.suggestion-badge {
  display: inline-block;
  margin: var(--space-1) 0;
  font-size: 13px;
}

.suggestion-badge > summary {
  display: inline-flex;
  cursor: pointer;
  list-style: none;
}

.suggestion-badge > summary::-webkit-details-marker {
  display: none;
}

.suggestion-badge-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  border-radius: 999px;
  font-weight: 600;
  background: var(--info-surface);
  color: var(--info);
}

.suggestion-badge-label::before {
  content: "✨";
  font-size: 11px;
}

.suggestion-badge-detail {
  margin: var(--space-1) 0 var(--space-2) var(--space-1);
  padding: var(--space-2);
  border-left: 3px solid var(--info);
  background: var(--surface-alt);
  max-width: 32rem;
}

.suggestion-badge-detail p {
  margin: 0 0 var(--space-1);
  color: var(--text-secondary);
}

.suggestion-badge-discard {
  color: var(--danger);
}

/* R4.1 §6: panel inline de la PO sugerida (Órdenes de compra) — mismo
   criterio visual que .allocation-notice, pero en el tono "info" porque
   esto es una ayuda, no un aviso de algo que haya cambiado por debajo. */
.po-suggestion-panel {
  border-left: 3px solid var(--info);
  background: var(--info-surface);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
}

.po-suggestion-panel p {
  margin: 0 0 var(--space-2);
}

/* R4.1 §9/§11: estado ligero de evaluación — nunca bloquea la pantalla.
   Un modificador por "familia" de estado (evaluando / bloqueado / conflicto),
   mismo criterio de color que el resto de avisos (warning/danger). */
.assignment-rules-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  font-size: 13px;
}

.assignment-rules-banner--info {
  background: var(--info-surface);
  color: var(--info);
}

.assignment-rules-banner--warning {
  background: var(--warning-surface);
  color: var(--warning);
}

.assignment-rules-banner--danger {
  background: var(--danger-surface);
  color: var(--danger);
}

/* R3.4 §16: acción discreta "Reevaluar reglas" — siempre al final del
   aviso, con el mismo color que el texto que acompaña (coherente con
   cualquiera de las tres variantes). */
.assignment-rules-banner .link-button {
  margin-left: auto;
  color: inherit;
  text-decoration: underline;
  white-space: nowrap;
}

/* R3.3 §7/§8: formulario de autorización de la excepción técnica QTC --
   mismo tono que el aviso "danger" que lo precede (fallo técnico), nunca
   confundible visualmente con el resto del formulario de revisión normal. */
.technical-override-form {
  border: 1px solid var(--danger);
  background: var(--danger-surface);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.technical-override-form h3 {
  margin: 0 0 var(--space-2);
  font-size: 15px;
}

.technical-override-scope {
  margin: 0 0 var(--space-3);
  font-size: 13px;
  color: var(--text-secondary);
}

.technical-override-diagnostic {
  margin: 0 0 var(--space-3);
  font-weight: 600;
}

.technical-override-field {
  margin-bottom: var(--space-3);
}

.technical-override-field label {
  display: block;
  font-weight: 600;
}

.technical-override-field-hint {
  margin: var(--space-1) 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.technical-override-field textarea {
  width: 100%;
}

.technical-override-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.allocation-context dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Bloque A6: el IVA vive DENTRO de "Imputación contable", como un bloque más
   de su cuerpo — separado del gasto por un borde superior, no por su propia
   sección plegable. */
.tax-allocation {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--surface-border);
}

/* El happy path: todo AUTO y COMPLETA. Una sola línea, sin rejilla — el
   detalle está a un clic si hace falta mirarlo. */
.tax-allocation-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--text-secondary);
}

.tax-allocation-heading {
  margin: 0 0 var(--space-2);
  font-size: 13px;
  font-weight: 600;
}

.tax-allocation-set + .tax-allocation-set {
  margin-top: var(--space-2);
}

.tax-allocation-set-summary {
  grid-template-columns: 1fr auto auto auto;
}

/* MANUAL o "se guardará como manual": una persona decidió esto, así que se
   marca — no es un error, es información de a quién preguntar si hay dudas. */
.tax-allocation-badge {
  color: var(--text-secondary);
  font-size: 12px;
  white-space: nowrap;
}

/* Búsqueda de tipo de concepto: solo aparece cuando el catálogo no cabe en una
   página, así que es un diálogo pequeño, no una pantalla. */
.concept-type-search-slot {
  min-width: min(26rem, 80vw);
  margin-bottom: 1rem;
}

/* Bloque F5.4.2: "Asiento contable aprobado" (solo lectura) e historial de
   aprobaciones. Reutiliza .review-section/.data-table-wrapper/.badge/
   .allocation-notice; aquí solo lo propio. */
.approved-journal-status {
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

.approved-journal-status--current {
  color: var(--success, #1a7f37);
}

.approved-journal-status--historical {
  color: var(--text-secondary);
}

.approved-journal-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-3);
  font-size: 13px;
}

.approved-journal-meta dt {
  color: var(--text-secondary);
}

.approved-journal-meta dd {
  margin: 0;
}

/* UI-JOURNAL-HISTORY-01: importe y símbolo de moneda siempre en la misma
   línea (el "€" de los totales saltaba a una segunda línea en el detalle
   histórico). En pantallas estrechas la tabla no se aprieta: se desplaza en
   horizontal dentro de .data-table-wrapper (overflow-x: auto). */
.approved-journal-table thead th:nth-child(n + 4),
.approved-journal-table tbody td:nth-child(n + 4),
.approved-journal-table .approved-journal-total-debit,
.approved-journal-table .approved-journal-total-credit {
  white-space: nowrap;
}

.approved-journal-balance--ok {
  color: var(--success, #1a7f37);
}

.approved-journal-history {
  margin-top: var(--space-3);
  border-top: 1px solid var(--surface-border);
  padding-top: var(--space-2);
}

.approved-journal-history > summary {
  cursor: pointer;
  font-weight: 600;
}

.approved-journal-history-list {
  margin: var(--space-2) 0;
  padding-left: var(--space-4);
}

.approved-journal-history-entry {
  margin-bottom: var(--space-1);
}

.approved-journal-history-detail {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border: 1px dashed var(--surface-border);
  border-radius: var(--radius-md);
}

/* Asiento propuesto mostrado como cálculo con datos actuales (factura ya
   aprobada sin asiento, histórica o rechazada): presente, pero en segundo
   plano y sin confundirse con el aprobado. */
.proposed-journal-section--secondary > summary {
  color: var(--text-secondary);
  font-weight: 400;
}

.proposed-journal-secondary-note {
  margin: 0;
  padding: var(--space-2) var(--space-3) 0;
  font-size: 13px;
  color: var(--text-secondary);
}