:root {
  --color-marca: #203663;
  --color-marca-texto: #ffffff;
  --color-fondo: #eef1f7;
  --color-superficie: #ffffff;
  --color-superficie-alt: #f4f6fb;
  --color-texto: #1f2733;
  --color-texto-suave: #5a6577;
  --color-borde: #d5dbe6;
  --color-foco: #2f6fdb;

  --color-rojo: #b42318;
  --color-rojo-suave: #fdecea;
  --color-ambar: #b54708;
  --color-ambar-suave: #fef4e6;
  --color-verde: #18794e;
  --color-verde-suave: #e8f6ee;
  --color-azul: #1d5bb8;
  --color-azul-suave: #e8f0fc;
  --color-gris: #6b7280;
  --color-gris-suave: #eef0f3;

  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;

  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --texto-xs: 0.75rem;
  --texto-s: 0.8125rem;
  --texto-m: 0.9375rem;
  --texto-l: 1.125rem;
  --texto-xl: 1.375rem;

  --radio: 6px;
  --radio-l: 10px;
  --sombra: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.1);
  --ancho-max: 1440px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-marca: #2c4a85;
    --color-fondo: #11161f;
    --color-superficie: #1a212c;
    --color-superficie-alt: #212a37;
    --color-texto: #e6e9ef;
    --color-texto-suave: #a3adbd;
    --color-borde: #333e4f;
    --color-foco: #7aa7ff;
    --color-rojo: #ff8a80;
    --color-rojo-suave: #3a1f1d;
    --color-ambar: #ffb35c;
    --color-ambar-suave: #3a2c17;
    --color-verde: #6fd3a0;
    --color-verde-suave: #183126;
    --color-azul: #8ab4ff;
    --color-azul-suave: #1b2a44;
    --color-gris: #a3adbd;
    --color-gris-suave: #262e3a;
    --sombra: none;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--texto-m);
  color: var(--color-texto);
  background: var(--color-fondo);
}

:focus-visible {
  outline: 2px solid var(--color-foco);
  outline-offset: 2px;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- barra */

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-3) var(--esp-5);
  background: var(--color-marca);
  color: var(--color-marca-texto);
}

.barra__titulo {
  margin: 0;
  font-size: var(--texto-l);
}

.barra__sub {
  font-weight: 400;
  font-size: var(--texto-s);
  opacity: 0.8;
}

.barra__usuario {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  font-size: var(--texto-s);
}

.barra__usuario[hidden] {
  display: none;
}

/* ---------------------------------------------------------------- layout */

.contenido {
  display: grid;
  gap: var(--esp-4);
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--esp-4);
}

.app {
  display: grid;
  gap: var(--esp-4);
}

/* Un ítem de grid no baja de su contenido mínimo: sin esto la tabla ancha estira toda la página en vez de scrollear. */
.contenido > *,
.app > * {
  min-width: 0;
}

.app[hidden],
.panel[hidden] {
  display: none;
}

.panel {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra);
  padding: var(--esp-4);
}

.panel__titulo {
  margin: 0 0 var(--esp-3);
  font-size: var(--texto-l);
}

.panel--login {
  width: min(100%, 380px);
  margin: var(--esp-6) auto;
}

.nota {
  margin: 0 0 var(--esp-3);
  color: var(--color-texto-suave);
  font-size: var(--texto-s);
}

/* ---------------------------------------------------------------- formularios */

.formulario {
  display: grid;
  gap: var(--esp-3);
}

/* Filtro en grilla auto-fill: los campos se acomodan solos al ancho, sin media queries por cada tamaño. */
.filtro {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--esp-3);
  align-items: end;
}

.campo {
  display: grid;
  gap: var(--esp-1);
}

.campo--ancho {
  grid-column: span 2;
}

.campo--en-linea {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

.campo__etiqueta {
  font-size: var(--texto-xs);
  font-weight: 600;
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.campo__control {
  width: 100%;
  min-height: 2.25rem;
  padding: var(--esp-2) var(--esp-3);
  font: inherit;
  color: var(--color-texto);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
}

.campo__control:disabled {
  background: var(--color-superficie-alt);
}

.filtro__acciones {
  display: flex;
  gap: var(--esp-2);
  grid-column: span 2;
}

.filtro__error {
  grid-column: 1 / -1;
}

/* En teléfono la grilla queda en una columna: un span 2 crearía una columna implícita y desbordaría. */
@media (max-width: 480px) {
  .campo--ancho,
  .filtro__acciones {
    grid-column: 1 / -1;
  }

  .barra {
    padding: var(--esp-3) var(--esp-4);
  }
}

.boton {
  min-height: 2.25rem;
  padding: var(--esp-2) var(--esp-4);
  font: inherit;
  font-weight: 600;
  border-radius: var(--radio);
  border: 1px solid transparent;
  cursor: pointer;
}

.boton:disabled {
  opacity: 0.6;
  cursor: progress;
}

.boton[hidden] {
  display: none;
}

.boton--primario {
  background: var(--color-marca);
  color: var(--color-marca-texto);
}

.boton--secundario {
  background: var(--color-superficie);
  color: var(--color-texto);
  border-color: var(--color-borde);
}

.alerta {
  margin: 0;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio);
  font-size: var(--texto-s);
}

.alerta[hidden] {
  display: none;
}

.alerta--error {
  background: var(--color-rojo-suave);
  color: var(--color-rojo);
}

.alerta--aviso {
  background: var(--color-ambar-suave);
  color: var(--color-ambar);
}

/* ---------------------------------------------------------------- tarjetas / semáforo */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tarjeta {
  --tono: var(--color-gris);
  --tono-suave: var(--color-gris-suave);
}

.tarjeta--rojo {
  --tono: var(--color-rojo);
  --tono-suave: var(--color-rojo-suave);
}
.tarjeta--ambar {
  --tono: var(--color-ambar);
  --tono-suave: var(--color-ambar-suave);
}
.tarjeta--verde {
  --tono: var(--color-verde);
  --tono-suave: var(--color-verde-suave);
}
.tarjeta--azul {
  --tono: var(--color-azul);
  --tono-suave: var(--color-azul-suave);
}
.tarjeta--error {
  --tono: var(--color-rojo);
  --tono-suave: var(--color-superficie);
}

/* El borde izquierdo lleva el color del semáforo; el texto de estado/clase lo repite para no depender solo del color. */
.tarjeta__boton {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  gap: var(--esp-1) var(--esp-2);
  width: 100%;
  height: 100%;
  padding: var(--esp-3) var(--esp-4);
  font: inherit;
  text-align: left;
  color: var(--color-texto);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-left: 6px solid var(--tono);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra);
  cursor: pointer;
}

.tarjeta__boton:disabled {
  cursor: default;
}

.tarjeta--activa .tarjeta__boton {
  background: var(--tono-suave);
  border-color: var(--tono);
}

.tarjeta__luz {
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.2rem;
  border-radius: 50%;
  background: var(--tono);
}

.tarjeta--corriendo .tarjeta__luz {
  animation: latido 1s ease-in-out infinite;
}

@keyframes latido {
  50% {
    opacity: 0.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta--corriendo .tarjeta__luz {
    animation: none;
  }
}

.tarjeta__codigo {
  font-weight: 700;
}

.tarjeta__titulo,
.tarjeta__boton > p,
.tarjeta__cifras {
  grid-column: 1 / -1;
}

.tarjeta__titulo {
  font-weight: 600;
}

.tarjeta__boton > p {
  margin: 0;
  font-size: var(--texto-s);
}

.tarjeta__estado--error,
.tarjeta__clase {
  color: var(--tono);
  font-weight: 600;
}

.tarjeta__pie {
  color: var(--color-texto-suave);
}

.tarjeta__cifras {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--esp-2);
  margin: var(--esp-1) 0;
  font-size: var(--texto-s);
}

.tarjeta__cifras dt {
  color: var(--color-texto-suave);
}

.tarjeta__cifras dd {
  margin: 0;
}

/* ---------------------------------------------------------------- detalle */

.detalle__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
}

.detalle__filtros {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

.resumen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--esp-2) var(--esp-4);
  margin: 0 0 var(--esp-3);
  font-size: var(--texto-s);
}

.resumen__item dt {
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
}

.resumen__item dd {
  margin: 0;
  font-weight: 600;
}

.avisos {
  display: grid;
  gap: var(--esp-2);
  margin: 0 0 var(--esp-3);
  padding: 0;
  list-style: none;
}

/* El contenedor scrollea en ambos ejes para que el encabezado sticky quede fijo dentro de la tabla. */
.tabla-contenedor {
  max-height: 70vh;
  overflow: auto;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-s);
}

.tabla th,
.tabla td {
  padding: var(--esp-2) var(--esp-3);
  border-bottom: 1px solid var(--color-borde);
  text-align: left;
  vertical-align: top;
}

.tabla thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-superficie-alt);
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-texto-suave);
  white-space: nowrap;
}

.tabla tbody tr:hover {
  background: var(--color-superficie-alt);
}

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

.num--dif {
  font-weight: 700;
}

.tabla__fecha {
  white-space: nowrap;
}

.tabla__motivo {
  min-width: 18rem;
}

.tabla__vacia {
  text-align: center;
  color: var(--color-texto-suave);
}

.fila--defecto_sistema td:first-child {
  box-shadow: inset 4px 0 0 var(--color-rojo);
}
.fila--dato_a_revisar td:first-child {
  box-shadow: inset 4px 0 0 var(--color-ambar);
}
.fila--legitima td:first-child {
  box-shadow: inset 4px 0 0 var(--color-azul);
}

.insignia {
  display: inline-block;
  padding: 0.1rem var(--esp-2);
  border-radius: 999px;
  font-size: var(--texto-xs);
  font-weight: 600;
  white-space: nowrap;
  background: var(--color-gris-suave);
  color: var(--color-gris);
}

.insignia--defecto_sistema {
  background: var(--color-rojo-suave);
  color: var(--color-rojo);
}
.insignia--dato_a_revisar {
  background: var(--color-ambar-suave);
  color: var(--color-ambar);
}
.insignia--legitima {
  background: var(--color-azul-suave);
  color: var(--color-azul);
}

.montos {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 0 var(--esp-3);
  margin: var(--esp-1) 0 0;
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
}

.montos dd {
  margin: 0;
}

/* ---------------------------------------------------------------- impresión */

@media print {
  body {
    background: #fff;
    color: #000;
  }

  .barra,
  .filtro,
  .detalle__filtros,
  .tarjetas,
  .panel-lateral,
  .dialogo {
    display: none;
  }

  .panel {
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .tabla-contenedor {
    max-height: none;
    overflow: visible;
    border: 0;
  }

  .tabla thead th {
    position: static;
  }

  .tabla tr {
    break-inside: avoid;
  }
}

/* ---------------------------------------------------------------- selector de controles */

.selector {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--esp-2);
  margin: 0;
  padding: var(--esp-3);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
}

.selector__opciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--esp-2) var(--esp-4);
}

.selector__opcion {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-s);
  cursor: pointer;
}

.selector__codigo {
  font-weight: 700;
}

.selector__acciones {
  display: flex;
  gap: var(--esp-3);
}

.boton--enlace {
  min-height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-azul);
  font-weight: 600;
  font-size: var(--texto-s);
  text-decoration: underline;
}

/* Parámetro que no usa ningún control marcado: atenuado (además está deshabilitado y no se envía). */
.campo--inactivo {
  opacity: 0.45;
}

.tarjeta--no-seleccionada .tarjeta__boton {
  opacity: 0.55;
}

/* ---------------------------------------------------------------- filas elegibles */

.fila--elegible {
  cursor: pointer;
}

.fila--elegible:focus-visible {
  outline: 2px solid var(--color-foco);
  outline-offset: -2px;
}

.tabla tbody tr.fila--seleccionada {
  background: var(--color-azul-suave);
}

/* ---------------------------------------------------------------- pantalla dividida */

.detalle__cuerpo {
  display: grid;
  gap: var(--esp-3);
}

/* Lista y panel lado a lado, cada uno con su propio scroll, para recorrer líneas sin perder el detalle. */
.detalle--dividido .detalle__cuerpo {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.detalle--dividido .detalle__lista,
.panel-lateral {
  max-height: 75vh;
}

.panel-lateral {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
  min-width: 0;
}

.panel-lateral[hidden] {
  display: none;
}

.panel-lateral__cabecera,
.dialogo__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  border-bottom: 1px solid var(--color-borde);
  background: var(--color-superficie-alt);
}

.cabecera__acciones {
  display: flex;
  gap: var(--esp-2);
  flex-shrink: 0;
}

.panel-lateral__titulo {
  margin: 0;
  font-size: var(--texto-m);
}

.panel-lateral__cuerpo {
  overflow: auto;
  padding: var(--esp-3);
}

/* ---------------------------------------------------------------- modal (pantallas angostas) */

.dialogo {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--color-superficie);
  color: var(--color-texto);
}

.dialogo[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.dialogo::backdrop {
  background: rgb(0 0 0 / 0.5);
}

.dialogo__cuerpo {
  overflow: auto;
  padding: var(--esp-3);
}

/* ---------------------------------------------------------------- contenido del detalle */

.problema {
  display: grid;
  gap: var(--esp-2);
  margin-bottom: var(--esp-4);
  padding: var(--esp-3);
  border-left: 4px solid var(--color-gris);
  border-radius: var(--radio);
  background: var(--color-superficie-alt);
  font-size: var(--texto-s);
}

.problema--defecto_sistema {
  border-left-color: var(--color-rojo);
}
.problema--dato_a_revisar {
  border-left-color: var(--color-ambar);
}
.problema--legitima {
  border-left-color: var(--color-azul);
}

.problema__datos,
.problema__montos,
.campos {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
  gap: var(--esp-1) var(--esp-3);
  margin: 0;
}

.problema__datos dt,
.problema__montos dt,
.campos dt {
  color: var(--color-texto-suave);
}

.problema__datos dd,
.problema__montos dd,
.campos dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* En una lista de campos el monto queda a la izquierda de su celda: alineado al número, no al borde del panel. */
.problema__montos dd.num,
.campos dd.num {
  text-align: left;
}

.detalle-doc {
  display: grid;
  gap: var(--esp-3);
}

.detalle-doc__titulo {
  margin: 0;
  font-size: var(--texto-m);
}

.detalle-doc__seccion {
  display: grid;
  gap: var(--esp-2);
}

.detalle-doc__subtitulo {
  margin: 0;
  font-size: var(--texto-s);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-texto-suave);
}

.detalle-doc .campos {
  font-size: var(--texto-s);
}

.tabla-contenedor--interna {
  max-height: 40vh;
}

.paginado {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

/* Casos de una línea agrupada: lista propia antes de la ficha del caso elegido. */
.miembros {
  display: grid;
  gap: var(--esp-2);
  margin-bottom: var(--esp-4);
}

/* ---------------------------------------------------------------- reparaciones de cuenta corriente (C6/C7/C8) */

.dialogo--centrado {
  width: min(64rem, calc(100vw - 2 * var(--esp-4)));
  height: fit-content;
  max-height: calc(100dvh - 2 * var(--esp-4));
  margin: auto;
  border-radius: var(--radio-l);
  box-shadow: var(--sombra);
}

.dialogo--centrado[open] {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.dialogo--centrado .tabla-contenedor--interna {
  max-height: 55dvh;
}

.dialogo__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  border-top: 1px solid var(--color-borde);
  background: var(--color-superficie-alt);
}

.dialogo__pie:empty {
  display: none;
}

.casilla {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin-right: auto;
  font-size: var(--texto-s);
  cursor: pointer;
}

.casilla[hidden] {
  display: none;
}

.casilla input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--color-marca);
}

.reparacion__resumen {
  margin-bottom: var(--esp-3);
}

.reparacion__cuentas del {
  color: var(--color-texto-suave);
}

.reparacion__cuentas ins {
  text-decoration: none;
  font-weight: 600;
  color: var(--color-verde);
}

.reparacion__motivos {
  display: grid;
  gap: var(--esp-1);
  margin: 0;
  padding-left: var(--esp-5);
  font-size: var(--texto-s);
}

.alerta--exito {
  background: var(--color-verde-suave);
  color: var(--color-verde);
}

.alerta--reparar {
  display: grid;
  gap: var(--esp-2);
  margin-bottom: var(--esp-3);
}

.alerta--reparar p,
.alerta--reparar ul {
  margin: 0;
}

.boton--chico {
  min-height: 1.75rem;
  padding: var(--esp-1) var(--esp-3);
  font-size: var(--texto-s);
}

.insignia--rep-aplicada {
  background: var(--color-verde-suave);
  color: var(--color-verde);
}
.insignia--rep-deshecha {
  background: var(--color-gris-suave);
  color: var(--color-texto);
}
.insignia--rep-fallida {
  background: var(--color-rojo-suave);
  color: var(--color-rojo);
}
.insignia--rep-pendiente {
  background: var(--color-ambar-suave);
  color: var(--color-ambar);
}

.reparacion__aviso {
  margin-bottom: var(--esp-3);
}

.reparacion__efecto {
  margin: 0;
  padding-left: var(--esp-5);
}

/* ---------------------------------------------------------------- regenerar asiento desde la compra (C6 6.4) */

.reparacion__fila--editada td {
  background: var(--color-ambar-suave);
}

.reparacion__avisos {
  margin-top: var(--esp-1);
  color: var(--color-ambar);
}

.reparacion__renglones {
  margin-top: var(--esp-1);
  font-size: var(--texto-s);
}

.reparacion__renglones summary {
  cursor: pointer;
  color: var(--color-azul);
}

.reparacion__renglones > div {
  margin-top: var(--esp-1);
}
/* ---------------------------------------------------------------- asiento huérfano sin rastro (C6 6.3) */

.reparacion__ficha {
  margin-top: var(--esp-4);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--color-borde);
}
/* ---------------------------------------------------------------- diagnóstico de Excel de migración */

.excel {
  margin-top: var(--esp-4);
}

.excel__resultado {
  margin-top: var(--esp-4);
}

.excel__subtitulo {
  margin: var(--esp-4) 0 var(--esp-2);
  font-size: var(--texto-m);
}

.excel__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  scroll-margin-top: var(--esp-4);
}

.excel__motivos {
  max-height: 40vh;
  margin-bottom: var(--esp-2);
}

.excel__valor code {
  font-size: var(--texto-xs);
  white-space: pre-wrap;
  word-break: break-all;
}

.excel__tipo {
  display: block;
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
}

.excel__mensaje {
  min-width: 12rem;
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
  word-break: break-word;
}

.insignia--corta,
.insignia--ignorada {
  background: var(--color-rojo-suave);
  color: var(--color-rojo);
}
.insignia--error,
.insignia--duplicado,
.insignia--alterado {
  background: var(--color-ambar-suave);
  color: var(--color-ambar);
}
.insignia--aviso {
  background: var(--color-azul-suave);
  color: var(--color-azul);
}

.excel__fila--corta td:first-child,
.excel__fila--ignorada td:first-child {
  box-shadow: inset 4px 0 0 var(--color-rojo);
}
.excel__fila--error td:first-child,
.excel__fila--duplicado td:first-child,
.excel__fila--alterado td:first-child {
  box-shadow: inset 4px 0 0 var(--color-ambar);
}
.excel__fila--aviso td:first-child {
  box-shadow: inset 4px 0 0 var(--color-azul);
}

/* Reparaciones C11 (reparaMoneda.js): cambio y cotización editables en la tabla de la vista previa. */
.reparacion__numero {
  width: 9rem;
  padding: var(--esp-1);
  font: inherit;
  text-align: right;
}

/* Selector de datos (local / producción) del login y aviso de producción: js/entorno.js */
.entorno {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  margin: 0;
  padding: var(--esp-3);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
}

.entorno__opcion {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  font-size: var(--texto-m);
}

.entorno__nota {
  flex-basis: 100%;
  margin: 0;
}

.aviso-prod {
  padding: var(--esp-2) var(--esp-5);
  background: var(--color-rojo-suave);
  border-bottom: 2px solid var(--color-rojo);
  color: var(--color-rojo);
  font-size: var(--texto-s);
  font-weight: 600;
  text-align: center;
}
/* C14 · Unificar maestro: decisión en pantalla para grupos sin DV válido */
.reparacion__decision {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}

.reparacion__decision select {
  max-width: 100%;
}