/* Misma paleta que la APK (bo_app/lib/config/app_theme.dart). */
:root {
  --bg: #0a0e17;
  --surface: #141a26;
  --surface-hi: #1d2536;
  --stroke: #2a3346;
  --primary: #ff7a1a;
  --primary-alt: #ffc107;
  --danger: #f87171;
  --success: #34d399;
  --text-hi: #f3f5f9;
  --text-mid: #9aa6bc;
  --text-low: #5b6678;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-hi);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* --- Estructura --- */

.shell { max-width: 940px; margin: 0 auto; padding: 24px 20px 64px; }

header.bar {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--stroke);
  position: sticky; top: 0; background: rgba(10, 14, 23, .92);
  backdrop-filter: blur(8px); z-index: 10;
}
header.bar .mark { height: 24px; width: auto; display: block; }
header.bar .brand {
  font-weight: 600; letter-spacing: .3px; color: var(--text-mid);
  padding-left: 12px; border-left: 1px solid var(--stroke);
}
header.bar .spacer { flex: 1; }
header.bar .who { color: var(--text-mid); font-size: 13px; }

h1 { font-size: 22px; margin: 28px 0 4px; }
h2 { font-size: 16px; margin: 32px 0 12px; color: var(--text-mid);
     text-transform: uppercase; letter-spacing: .8px; font-weight: 600; }
.sub { color: var(--text-mid); margin: 0 0 24px; }

/* --- Tarjetas --- */

.card {
  background: var(--surface); border: 1px solid var(--stroke);
  border-radius: var(--radius); padding: 18px;
}
.card + .card { margin-top: 12px; }

.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tabs button {
  padding: 8px 18px; background: transparent; border: 1px solid var(--stroke);
  border-radius: 999px; color: var(--text-mid); cursor: pointer;
  font: inherit; font-size: 14px; transition: all .15s;
}
.tabs button:hover { color: var(--text-hi); }
.tabs button.on {
  border-color: var(--primary); color: var(--text-hi); background: var(--surface-hi);
  font-weight: 600;
}

/* Cancelaciones: lo único que escribe en el BO, y se ve distinto a propósito. */
.tabs button.peligro.on { border-color: var(--danger); color: var(--danger); }

textarea {
  width: 100%; padding: 11px 13px; background: var(--bg);
  border: 1px solid var(--stroke); border-radius: 10px; color: var(--text-hi);
  font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical;
}
textarea:focus { outline: none; border-color: var(--primary); }

button.primary.peligro {
  background: var(--danger); color: #2a0b0b;
}
button.primary.peligro:disabled { background: var(--surface-hi); color: var(--text-low); }

/* Avance de la revisión: se llena conforme vuelve cada tanda, no es estimado. */
.avance { margin-top: 14px; }
.avance .barra {
  height: 6px; background: var(--bg); border: 1px solid var(--stroke);
  border-radius: 999px; overflow: hidden;
}
.avance .barra span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #34d399, #10b981);
  transition: width .25s ease;
}
.avance-txt { margin-top: 6px; font-size: 12px; color: var(--text-mid); }

.resumen { margin: 0 0 8px; font-size: 14px; color: var(--text-mid); }
.resumen.aviso { color: var(--primary-alt); }

.tabla-wrap { overflow-x: auto; margin-top: 10px; }
#cancel-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
#cancel-tabla th, #cancel-tabla td {
  padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--stroke);
  white-space: nowrap;
}
#cancel-tabla th { color: var(--text-mid); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .5px; }
#cancel-tabla td.num, #cancel-tabla th.num { text-align: right; }
#cancel-tabla tr.no td { color: var(--text-low); }
#cancel-tabla tr.si td:last-child { color: var(--success); }

.resultado-cancel { margin-top: 12px; overflow-x: auto; }
.resultado-cancel table { width: 100%; border-collapse: collapse; font-size: 13px; }
.resultado-cancel th, .resultado-cancel td {
  padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--stroke);
  white-space: nowrap;
}
.resultado-cancel th { color: var(--text-mid); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .5px; }
.resultado-cancel td.num, .resultado-cancel th.num { text-align: right; }
.resultado-cancel tr.no td { color: var(--text-low); }
.resultado-cancel td.ref {
  color: var(--primary-alt); font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.job a.preview { display: block; margin-top: 12px; }
.job a.preview img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--stroke);
}
.job a.preview:hover img { border-color: var(--primary); }

.report {
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.report:hover { border-color: var(--primary); background: var(--surface-hi); }
.report .body { flex: 1; min-width: 0; }
.report .title { font-weight: 600; }
.report .desc { color: var(--text-mid); font-size: 13px; margin-top: 3px; }
.report .chev { color: var(--text-low); font-size: 20px; }
/* Las listas de precios no generan un archivo: se editan. El filo de color la
   separa de los cuatro reportes sin sacarla de la lista. */
.report.listas { border-left: 3px solid var(--primary); }

/* --- Formularios --- */

label { display: block; font-size: 13px; color: var(--text-mid); margin-bottom: 6px; }

input[type=text], input[type=password], input[type=date], input[type=month], select {
  width: 100%; padding: 11px 13px; background: var(--bg);
  border: 1px solid var(--stroke); border-radius: 10px;
  color: var(--text-hi); font-size: 15px; font-family: inherit;
}
input:focus, select:focus { outline: none; border-color: var(--primary); }
select { appearance: none; cursor: pointer; }

.field + .field { margin-top: 14px; }

input[type=file] {
  width: 100%; padding: 10px 12px; background: var(--bg);
  border: 1px dashed var(--stroke); border-radius: 10px;
  color: var(--text-mid); font-size: 14px; font-family: inherit; cursor: pointer;
}
input[type=file]:hover { border-color: var(--primary); }
input[type=file]::file-selector-button {
  margin-right: 12px; padding: 6px 12px; border: 0; border-radius: 8px;
  background: var(--surface-hi); color: var(--text-hi); cursor: pointer;
  font: inherit; font-size: 13px;
}
.hint-file { margin-top: 7px; font-size: 12px; color: var(--text-low); line-height: 1.45; }
/* Alineados por ARRIBA: con `flex-end`, un campo que lleva texto de ayuda
   debajo empuja al otro hacia abajo y las dos cajas quedan a distinta altura. */
.row { display: flex; gap: 12px; align-items: flex-start; }
.row > * { flex: 1; }
/* Dentro de una fila la separacion la da el `gap`. Sin esto, el segundo campo
   hereda el margin-top de `.field + .field` y queda mas abajo que el primero. */
.row > .field + .field { margin-top: 0; }

.modes { display: flex; gap: 8px; margin-bottom: 14px; }
.modes button {
  flex: 1; padding: 9px; background: var(--bg); border: 1px solid var(--stroke);
  border-radius: 10px; color: var(--text-mid); cursor: pointer; font: inherit;
}
.modes button.on { border-color: var(--primary); color: var(--text-hi); background: var(--surface-hi); }

button.primary {
  width: 100%; padding: 12px; margin-top: 18px; border: 0; border-radius: 10px;
  background: linear-gradient(90deg, var(--primary-alt), var(--primary));
  color: #1a1206; font-weight: 700; font-size: 15px; cursor: pointer;
  font-family: inherit;
}
button.primary:disabled { opacity: .5; cursor: default; }

/* Tambien para <a>: el boton de comisiones es un enlace de descarga, para que
   el clic derecho y "guardar como" sigan funcionando. Sin `a.ghost` sale con
   el azul y el subrayado del navegador. */
button.ghost, a.ghost {
  display: inline-block;
  padding: 8px 14px; background: transparent; border: 1px solid var(--stroke);
  border-radius: 9px; color: var(--text-mid); cursor: pointer; font: inherit;
  text-decoration: none;
}
button.ghost:hover, a.ghost:hover { color: var(--text-hi); border-color: var(--primary); }

.error {
  margin-top: 14px; padding: 11px 13px; border-radius: 10px;
  background: rgba(248, 113, 113, .12); border: 1px solid rgba(248, 113, 113, .4);
  color: var(--danger); font-size: 14px;
}

/* --- Login --- */

.login-wrap { max-width: 380px; margin: 12vh auto; padding: 0 20px; }
.login-wrap .logo {
  display: block; width: 210px; max-width: 70%; height: auto;
  margin: 0 auto 22px;
}
.login-wrap .title { text-align: center; font-size: 19px; font-weight: 600; letter-spacing: .2px; }
.login-wrap .hint { text-align: center; color: var(--text-mid); font-size: 13px;
  margin: 6px 0 26px; }

/* --- Trabajos --- */

.job .head { display: flex; align-items: center; gap: 10px; }
.job .head .title { font-weight: 600; flex: 1; }
.job .period { color: var(--text-mid); font-size: 13px; }

.job .close {
  background: transparent; border: 1px solid var(--stroke); border-radius: 8px;
  color: var(--text-low); cursor: pointer; font: 16px/1 inherit;
  width: 26px; height: 26px; padding: 0; flex: none;
}
.job .close:hover { color: var(--text-hi); border-color: var(--danger); }

.badge { font-size: 12px; padding: 3px 9px; border-radius: 999px; font-weight: 600; }
.badge.queued { background: rgba(154,166,188,.15); color: var(--text-mid); }
.badge.running { background: rgba(255,193,7,.15); color: var(--primary-alt); }
.badge.done { background: rgba(52,211,153,.15); color: var(--success); }
.badge.error { background: rgba(248,113,113,.15); color: var(--danger); }
.badge.cancelled { background: rgba(154,166,188,.15); color: var(--text-mid); }

button.ghost.danger { color: var(--danger); border-color: rgba(248,113,113,.4); }
button.ghost.danger:hover { color: var(--danger); border-color: var(--danger);
  background: rgba(248,113,113,.1); }
button.ghost.danger:disabled { opacity: .55; cursor: default;
  border-color: var(--stroke); color: var(--text-mid); background: transparent; }

.log {
  margin-top: 12px; padding: 12px; max-height: 240px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--stroke); border-radius: 10px;
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-mid); white-space: pre-wrap; word-break: break-word;
}

.job .actions { margin-top: 12px; display: flex; gap: 10px; align-items: center; }
a.download {
  display: inline-block; padding: 9px 16px; border-radius: 10px;
  background: linear-gradient(90deg, var(--primary-alt), var(--primary));
  color: #1a1206; font-weight: 700; text-decoration: none; font-size: 14px;
}
.elapsed { color: var(--text-low); font-size: 12px; }

.spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--stroke); border-top-color: var(--primary);
  animation: spin .8s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty { color: var(--text-low); font-size: 14px; padding: 8px 2px; }

@media (max-width: 560px) {
  .row { flex-direction: column; }
}

/* --- Facturación ---------------------------------------------------------- */

.resumen-fact { margin: 14px 0 4px; }

/* La franja de arriba responde la única pregunta que importa al terminar:
   ¿cuadró o no? Por eso va antes que cualquier tabla. */
.resumen-fact .franja {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
}
.resumen-fact .franja.ok  { background: rgba(52,211,153,.12); color: var(--success); }
.resumen-fact .franja.mal { background: rgba(248,113,113,.12); color: var(--danger); }

.resumen-fact table.cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 12px;
}
.resumen-fact table.cmp th,
.resumen-fact table.cmp td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--stroke);
  text-align: left;
}
.resumen-fact table.cmp th { color: var(--text-mid); font-weight: 600; }
.resumen-fact table.cmp td.num,
.resumen-fact table.cmp th.num { text-align: right; font-variant-numeric: tabular-nums; }
.resumen-fact table.cmp tr.si td { color: var(--success); }
.resumen-fact table.cmp tr.no td { color: var(--danger); font-weight: 600; }
.resumen-fact table.cmp tr.total td { font-weight: 700; border-bottom: none; }

/* Los descuadres van plegados: cuando cuadra no estorban, y cuando no,
   se abren y traen el número para ir a buscarlo. */
.resumen-fact .descuadre { margin-bottom: 10px; font-size: 13px; }
.resumen-fact .descuadre summary { cursor: pointer; color: var(--danger); }
.resumen-fact .descuadre ul {
  margin: 8px 0 0 18px;
  max-height: 220px;
  overflow-y: auto;
  color: var(--text-mid);
}
.resumen-fact .descuadre li { padding: 2px 0; font-variant-numeric: tabular-nums; }

.hint-file.alerta { color: var(--primary-alt); }

/* Texto listo para pegar en un correo. */
.resumen-fact .correo { margin: 4px 0 14px; }
.resumen-fact .correo pre {
  margin: 8px 0 0;
  padding: 12px 14px;
  background: var(--surface-hi);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-hi);
  white-space: pre-wrap;
  overflow-x: auto;
}

/* Los dos pasos de Facturación llevan encabezado propio: el orden importa
   —primero se manda el resumen, luego se calcula— y sin rótulo no se ve. */
h2.paso {
  margin: 26px 0 10px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-mid);
}

/* El catálogo de comisiones, arriba de los dos pasos: se consulta seguido y
   no vale la pena esconderlo dentro de un paso. */
.comisiones {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px 0 6px;
}
.comisiones .hint-file { margin: 0; }

/* --- Ventana de comisiones ------------------------------------------------ */

.modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .6);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-caja {
  background: var(--surface); border: 1px solid var(--stroke);
  border-radius: var(--radius);
  width: min(1040px, 100%); max-height: 88vh;
  display: flex; flex-direction: column; padding: 22px 24px;
}
.modal-cab { display: flex; align-items: center; gap: 12px; }
.modal-cab h2 { margin: 0; flex: 1; font-size: 19px; }
.modal-cab .cerrar {
  background: none; border: 0; color: var(--text-mid);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.modal-cab .cerrar:hover { color: var(--text-hi); }
/* La tabla es lo único que crece: cabecera y pie quedan siempre a la vista.
   Va en su propia caja con borde: sin eso los renglones se cortan contra el
   pie al hacer scroll y parece que la ventana esta rota. */
.modal-caja .tabla-wrap {
  flex: 1; overflow: auto; margin-top: 12px;
  border: 1px solid var(--stroke); border-radius: 10px;
  background: var(--bg);
}
.modal-pie {
  display: flex; align-items: center; gap: 10px; margin-top: 16px;
}
.modal-pie .cuenta { flex: 1; font-size: 13px; color: var(--text-low); }
/* Los cuatro botones del pie, de la misma altura y sin margenes heredados:
   `.primary` trae `margin-top: 18px` y mas padding porque en los formularios
   va solo y a lo ancho. Aqui va en fila con los demas. */
.modal-pie .ghost,
.modal-pie .primary {
  margin: 0;
  padding: 9px 18px;
  border: 1px solid transparent;   /* mismo alto de caja que los ghost */
  border-radius: 9px;
  font-size: 14px;
  line-height: 1.35;
  width: auto;
}
.modal-pie .ghost { border-color: var(--stroke); }

/* El directorio de cuentas usa la misma tabla que las comisiones. */
#com-tabla, #dir-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
#com-tabla th, #com-tabla td,
#dir-tabla th, #dir-tabla td {
  padding: 8px 12px; border-bottom: 1px solid var(--stroke); text-align: left;
}
/* El ultimo renglon no lleva linea: la da el borde del contenedor. */
#com-tabla tbody tr:last-child td,
#dir-tabla tbody tr:last-child td { border-bottom: 0; }
#dir-tabla thead th {
  position: sticky; top: 0; z-index: 1; background: var(--surface-hi);
  color: var(--text-mid); font-weight: 600;
  border-bottom: 1px solid var(--stroke);
}
#dir-tabla td.num, #dir-tabla th.num { text-align: right; }
/* Los que faltan van marcados: son los que hay que llenar. */
#dir-tabla tr.nuevo td { background: rgba(255, 122, 26, .10); }
/* Un producto marcado «no provisionar» se ve apagado: esta ahi a proposito,
   pero no genera movimiento. */
#dir-tabla tr.fuera td { opacity: .55; }
#dir-tabla .quitar {
  background: none; border: 0; color: var(--text-low); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 6px;
}
#dir-tabla .quitar:hover { color: var(--danger); }
/* La franja de aviso de la ventana: dice que falta antes de la tabla. */
.modal-caja .franja {
  padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 4px;
}
.modal-caja .franja.mal { background: rgba(248,113,113,.12); color: var(--danger); }

#com-tabla thead th {
  position: sticky; top: 0; z-index: 1; background: var(--surface-hi);
  color: var(--text-mid); font-weight: 600;
  border-bottom: 1px solid var(--stroke);
}
#com-tabla td.num, #com-tabla th.num { text-align: right; }
/* Los que faltan van marcados: son los que hay que llenar. */
#com-tabla tr.nuevo td { background: rgba(255, 122, 26, .10); }
input.celda {
  width: 100%; max-width: 120px; padding: 6px 9px;
  background: var(--bg); border: 1px solid var(--stroke); border-radius: 7px;
  color: var(--text-hi); font: inherit; text-align: right;
}
input.celda:focus { outline: none; border-color: var(--primary); }

.faltantes {
  margin: 10px 0 14px 18px; font-size: 13px; color: var(--text-mid);
  font-variant-numeric: tabular-nums;
}
/* Los nombres son texto: no se alinean a la derecha como los números. */
input.celda.texto { max-width: none; text-align: left; }
/* Los cuatro botones del pie no caben en pantallas angostas. */
.modal-pie { flex-wrap: wrap; }
.modal-pie .cuenta { min-width: 150px; }

/* Barra de avance de un reporte. Misma forma que la de la revisión, con el
   texto de la etapa debajo: cuál va y de cuántas. */
.job .barra {
  height: 6px; background: var(--bg); border: 1px solid var(--stroke);
  border-radius: 999px; overflow: hidden; margin: 2px 0 6px;
}
.job .barra .relleno {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #34d399, #10b981);
  transition: width .4s ease;
}
.job .etapa {
  display: block; margin: 0 0 10px; font-size: 12px; color: var(--text-mid);
}

/* --- Pago de Recolecciones --- */
/* La tabla es la pantalla: 38 filas con sus fechas editables y sus totales.
   Se queda con la misma cara que el resto de las tablas de la app. */
#rec-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
#rec-tabla th, #rec-tabla td {
  padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--stroke);
  white-space: nowrap;
}
#rec-tabla thead th {
  position: sticky; top: 0; background: var(--card);
  color: var(--text-mid); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .5px;
}
#rec-tabla td.num, #rec-tabla th.num {
  text-align: right; font-variant-numeric: tabular-nums;
}
#rec-tabla tbody tr:last-child td { border-bottom: 0; }
/* Las que traen algo pendiente de confirmar, marcadas como en el Excel. */
#rec-tabla tr.pendiente td:first-child {
  box-shadow: inset 3px 0 0 var(--primary-alt);
}
#rec-tabla input.celda { max-width: 145px; text-align: left; }
/* Alto acotado: son 38 filas y los botones tienen que quedar a la vista. */
#panel-recol .tabla-wrap { max-height: 62vh; overflow-y: auto; }
.acciones-recol {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px;
}
.acciones-recol .hint-file { margin: 0; }
/* El neto (Total executed / Total TXN) es la base del pago: se resalta para
   distinguirlo del bruto que tiene al lado. */
#rec-tabla td.neto { color: var(--text); font-weight: 600; }
/* Las recolecciones que hoy no se pagan: se leen, pero no compiten con las
   que sí. Siguen mostrando lo que acumularon. */
#rec-tabla tr.no-paga td { color: var(--text-low); }
#rec-tabla tr.no-paga td.neto { font-weight: 400; }
/* Las que hay que cotejar contra el corte del proveedor antes de pagar. */
#rec-tabla tr.cotejar td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
#rec-tabla tr.cotejar td { font-weight: 600; }
/* Directorio bancario: son 15 columnas, así que la tabla necesita aire. */
#ban-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
#ban-tabla th, #ban-tabla td {
  padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--stroke);
  white-space: nowrap;
}
#ban-tabla thead th {
  position: sticky; top: 0; background: var(--card); color: var(--text-mid);
  font-weight: 600; font-size: 11px; text-transform: uppercase;
  letter-spacing: .4px;
}
#ban-tabla tr.nuevo td { background: rgba(255, 122, 26, .10); }
#ban-tabla input.celda { min-width: 130px; }
#modal-banco .modal-caja { max-width: 96vw; }
/* El recordatorio de validar con el proveedor: va arriba de la pantalla y no
   depende de que se haya calculado nada. */
.aviso-fijo { margin: 14px 0 18px; }

/* La lista de precios que esta puesta: nombre + cuando + botones, arriba del
   campo de archivo. El campo solo hace falta si se va a cambiar. */
.precios-actual {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 10px; padding: 10px 12px;
  background: var(--surface-hi); border: 1px solid var(--stroke); border-radius: 10px;
}
.precios-datos { display: flex; flex-direction: column; min-width: 0; }
.precios-datos strong { color: var(--text-hi); font-size: 14px; }
.precios-datos .hint-file { margin-top: 3px; }
.precios-botones { display: flex; gap: 8px; flex-shrink: 0; }
#precios-vista { max-height: 320px; overflow: auto; margin-bottom: 10px; }
#precios-vista table { font-size: 12px; }
#precios-vista th { position: sticky; top: 0; background: var(--surface-hi); }

/* Editor de listas de precios */
.sub-tabs { margin-bottom: 12px; }
.precios-barra {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0;
}
.precios-barra input[type=search] { flex: 1; min-width: 220px; }
.precios-botones { display: flex; gap: 8px; margin-left: auto; flex-shrink: 0; }
#precios-tabla { max-height: 62vh; overflow: auto; }
table.editable { font-size: 12px; border-collapse: collapse; width: 100%; }
table.editable th {
  position: sticky; top: 0; z-index: 1; background: var(--surface-hi);
  text-align: left; white-space: nowrap;
}
table.editable td { padding: 2px 4px; }
table.editable td.fija { color: var(--text-low); white-space: nowrap; }
table.editable input {
  width: 100%; padding: 4px 6px; font-size: 12px; border-radius: 6px;
  background: var(--surface); border: 1px solid transparent; color: var(--text-hi);
}
table.editable input:hover { border-color: var(--stroke); }
table.editable input:focus { border-color: var(--primary); outline: none; }
table.editable input.num { text-align: right; }
button.ghost.mini { padding: 2px 8px; font-size: 13px; line-height: 1.2; }
th .ay { color: var(--text-low); cursor: help; }
.precios-botones button { white-space: nowrap; }
button.primary:disabled { background: var(--surface-hi); color: var(--text-low); }