/* ==========================================================================
   Transacciones — estilos propios de la pantalla (prefijo .trx-)
   Solo tokens de estilos.css: nada de colores sueltos.
   ========================================================================== */

/* Aviso de lo que espera una decisión */
.trx-aviso { margin-bottom: var(--e-8); }

/* ---------- Resumen del período: tira tipo libro mayor ---------- */
.trx-resumen {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--borde); overflow: hidden;
}
.trx-resumen__celda {
  display: flex; flex-direction: column; gap: var(--e-2); min-width: 0;
  padding: var(--e-5); background: var(--superficie); position: relative;
}
.trx-resumen__celda--principal::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--primario);
}
.trx-resumen__celda--principal .kpi__etiqueta .ico { color: var(--primario-texto); }
.trx-resumen__detalle .num, .trx-aviso .num { white-space: nowrap; }
.trx-resumen__detalle {
  margin-top: auto; padding-top: var(--e-2); border-top: 1px dashed var(--borde);
  font-size: var(--t-13); color: var(--texto-2);
}

/* ---------- Barra de filtros ---------- */
.trx-filtros { display: grid; gap: var(--e-4); padding: var(--e-4) var(--e-5); }
.trx-filtros .campo { gap: 4px; }
.trx-filtros .campo__etiqueta { font-size: var(--t-12); font-weight: 600; color: var(--texto-2); letter-spacing: 0.01em; }
.trx-filtros__principal {
  display: grid; gap: var(--e-3); align-items: start;
  grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
}
.trx-filtros__buscar .buscador { max-width: none; }
.trx-filtros__buscar .buscador .campo__control { padding-right: 12px; }
.trx-filtros__mas { display: grid; gap: var(--e-3); grid-template-columns: repeat(5, minmax(0, 1fr)); }
.trx-filtros__conmutar { display: none; }
.trx-filtros__cuenta {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--radio-total); background: var(--primario); color: var(--en-primario);
  font-size: var(--t-11); font-weight: 700; font-variant-numeric: tabular-nums;
}
.trx-filtros__cuenta[hidden] { display: none; }
.trx-filtros__activos {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
  padding-top: var(--e-3); border-top: 1px dashed var(--borde);
}
.trx-filtros__rotulo {
  font-size: var(--t-11); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texto-3); margin-right: var(--e-1);
}
.trx-chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.trx-chips .chip { cursor: default; }
.trx-chip-fijo { padding-right: 12px; background: var(--superficie-2); border-color: var(--borde); color: var(--texto-2); }
.trx-limpiar { margin-left: var(--e-1); }
input[type="date"].campo__control { font-variant-numeric: tabular-nums; }

/* ---------- Tabla ---------- */
.trx-tabla-cabecera { min-height: 64px; }
.trx-seleccion {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
  padding: 4px 4px 4px var(--e-3); border-radius: var(--radio-2);
  background: var(--primario-suave); color: var(--primario-texto); font-size: var(--t-13);
}
.trx-seleccion[hidden] { display: none; }
.trx-seleccion__texto { margin-right: var(--e-1); }

.trx-tabla { font-size: var(--t-13); }
.trx-tabla th, .trx-tabla td { padding-left: 6px; padding-right: 6px; }
.trx-tabla th:first-child, .trx-tabla td:first-child { padding-left: var(--e-3); }
.trx-tabla th:last-child, .trx-tabla td:last-child { padding-right: var(--e-3); }
.trx-tabla td { padding-top: 9px; padding-bottom: 9px; }
.trx-tabla .celda-sub { line-height: 1.35; }
.trx-tabla .celda-principal { line-height: 1.3; }

.trx-c-fecha time { display: block; }
.trx-c-fecha .celda-principal { display: block; }


.trx-c-contra .celda-principal { display: block; white-space: nowrap; }
.trx-c-contra--larga .celda-principal { white-space: normal; max-width: 10rem; }
.trx-canal { display: block; max-width: 6.5rem; white-space: normal; line-height: 1.3; color: var(--texto-2); }
.trx-concepto { display: block; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; color: var(--texto); }
.trx-c-bruto .monto, .trx-c-neto .monto { display: block; }
.trx-neto { font-weight: 600; }
.trx-tachado { text-decoration: line-through; text-decoration-thickness: 1px; }
.trx-c-estado .celda-sub { margin-top: 3px; }
.trx-c-accion { width: 1%; text-align: right; }
.trx-c-accion .btn--secundario { padding: 0 10px; font-size: var(--t-12); }
.trx-tabla th.trx-c-accion { width: 1%; }

/* Fila de cobro de comisiones: se distingue del resto */
.trx-tabla tr.trx-fila--comision td {
  background: color-mix(in srgb, var(--acento-suave) 70%, var(--superficie));
  border-bottom-color: var(--borde-fuerte);
}
.trx-tabla tr.trx-fila--comision td:first-child { box-shadow: inset 3px 0 0 var(--acento); }
.trx-tabla tr.trx-fila--comision:hover td { background: var(--acento-suave); }
.trx-tabla td.trx-c-comision { white-space: normal; }
.trx-tabla .trx-c-comision .celda-principal { white-space: normal; }
.trx-c-comision .celda-principal { max-width: none; font-family: var(--fuente-titulo); font-size: var(--t-14); letter-spacing: -0.005em; }

/* Vacío, paginación y nota */
.trx-vacio { border-top: 1px solid var(--borde); }
.trx-paginacion { border-top: 1px solid var(--borde); background: var(--superficie-2); border-radius: 0 0 var(--radio-3) var(--radio-3); }
.trx-tam { display: flex; align-items: center; gap: var(--e-2); margin-left: auto; margin-right: var(--e-4); }
.trx-tam label { color: var(--texto-2); white-space: nowrap; }
.trx-tam .select select { min-height: 32px; padding-top: 0; padding-bottom: 0; font-size: var(--t-13); width: auto; }
.trx-nota { margin-top: var(--e-3); max-width: 90ch; }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  .trx-filtros__principal { grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 0.7fr)); }
  .trx-filtros__mas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Escritorios más angostos: el concepto y el canal quedan en el detalle para que la tabla entre sin scroll */
@media (min-width: 641px) and (max-width: 1439px) {
  .trx-tabla .trx-c-concepto { display: none; }
}
@media (min-width: 641px) and (max-width: 1299px) {
  .trx-tabla .trx-c-canal { display: none; }
}

@media (max-width: 1023px) {
  .trx-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .trx-aviso { margin-bottom: var(--e-6); }
  .trx-filtros { padding: var(--e-4); gap: var(--e-3); }
  .trx-filtros__principal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .trx-filtros__buscar { grid-column: 1 / -1; }
  .trx-filtros__conmutar { display: inline-flex; align-self: end; width: 100%; }
  .trx-filtros__fecha { display: none; order: 2; }
  .trx-filtros__mas { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .trx-filtros--abierto .trx-filtros__fecha { display: grid; }
  .trx-filtros--abierto .trx-filtros__mas { display: grid; }
  .trx-filtros__mas .campo:last-child { grid-column: 1 / -1; }
  .trx-tam { margin: 0; }
}

/* Celular: cada movimiento es una tarjeta compacta */
@media (max-width: 640px) {
  .trx-resumen__celda { padding: var(--e-4); }
  .trx-resumen .kpi__valor { font-size: var(--t-20); }

  .trx-tabla-tarjeta { background: transparent; border: 0; box-shadow: none; }
  .trx-tabla-cabecera { padding: 0 0 var(--e-3); border: 0; min-height: 0; }
  .trx-seleccion { width: 100%; }
  .trx-tabla-contenedor { overflow: visible; background: transparent; border: 0; box-shadow: none; }
  .trx-tabla, .trx-tabla tbody { display: block; width: 100%; }
  .trx-tabla caption { display: none; }
  .trx-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .trx-tabla tbody { display: grid; gap: var(--e-3); }
  .trx-tabla tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "tipo estado" "contra bruto" "cuenta neto" "fecha fecha";
    column-gap: var(--e-3); row-gap: 6px;
    padding: var(--e-3) var(--e-4); background: var(--superficie);
    border: 1px solid var(--borde); border-radius: var(--radio-3); box-shadow: var(--sombra-1);
  }
  .trx-tabla tr[hidden] { display: none; }
  .trx-tabla td, .trx-tabla td:first-child, .trx-tabla td:last-child {
    display: block; padding: 0; border: 0; white-space: normal; min-width: 0;
    background: transparent !important; box-shadow: none !important;
  }
  .trx-tabla td.trx-c-check, .trx-tabla td.trx-c-canal, .trx-tabla td.trx-c-concepto, .trx-tabla td.trx-c-accion,
  .trx-tabla td.trx-c-check:first-child, .trx-tabla td.trx-c-accion:last-child { display: none; }
  .trx-tabla .trx-c-tipo { grid-area: tipo; align-self: center; }
  .trx-tabla .trx-c-estado { grid-area: estado; text-align: right; align-self: center; }
  .trx-tabla .trx-c-contra { grid-area: contra; }
  .trx-tabla .trx-c-bruto { grid-area: bruto; text-align: right; }
  .trx-tabla .trx-c-cuenta { grid-area: cuenta; }
  .trx-tabla .trx-c-neto { grid-area: neto; text-align: right; display: flex; gap: 6px; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; }
  .trx-tabla .trx-c-neto::before { content: "Neto"; font-size: var(--t-12); color: var(--texto-3); }
  .trx-tabla .trx-c-neto .monto { display: inline; }
  .trx-tabla .trx-c-neto .celda-sub { flex-basis: 100%; margin: 0; }
  .trx-tabla .trx-c-fecha {
    grid-area: fecha; padding-top: var(--e-2); margin-top: 2px; border-top: 1px dashed var(--borde);
    font-size: var(--t-12); color: var(--texto-3);
  }
  .trx-tabla .trx-c-fecha time { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 6px; }
  .trx-tabla .trx-c-fecha .celda-principal { font-weight: 500; color: var(--texto-2); }
  .trx-tabla .trx-c-fecha .celda-sub { margin: 0; font-size: var(--t-12); }

  .trx-tabla .tipo-mov__ico { width: 24px; height: 24px; border-radius: 7px; }
  .trx-tabla .tipo-mov__texto { flex-direction: row; align-items: baseline; gap: 6px; }
  .trx-tabla .tipo-mov .celda-sub { margin: 0; }
  .trx-tabla .trx-c-contra .celda-principal { font-size: var(--t-15); max-width: none; }
  .trx-tabla .trx-c-bruto .monto { font-size: var(--t-15); font-weight: 600; }
  .trx-tabla .trx-c-cuenta .celda-principal, .trx-tabla .trx-c-cuenta .celda-sub { display: inline; font-weight: 400; color: var(--texto-2); font-size: var(--t-13); }
  .trx-tabla .trx-c-cuenta { white-space: nowrap; }
  .trx-tabla .trx-c-cuenta .celda-principal::after { content: " · "; color: var(--texto-3); }

  .trx-tabla tr.fila--atencion { box-shadow: inset 3px 0 0 var(--tope-alerta), var(--sombra-1); }
  .trx-tabla tr.trx-fila--comision {
    background: color-mix(in srgb, var(--acento-suave) 70%, var(--superficie));
    border-color: var(--borde-fuerte); box-shadow: inset 3px 0 0 var(--acento), var(--sombra-1);
  }
  .trx-c-comision .celda-principal { font-size: var(--t-15); }

  .trx-vacio { border: 1px solid var(--borde); border-radius: var(--radio-3); background: var(--superficie); padding: var(--e-10) var(--e-4); }
  .trx-paginacion { background: transparent; border: 0; padding: var(--e-4) 0 0; flex-direction: column; }
  .trx-tam { order: 3; }
}

/* Táctil: la cruz de los chips de filtro llega a 44 px de alto con el chip */
@media (pointer: coarse) {
  .trx-chips .chip--quitar { min-height: 44px; }
  .trx-chips .chip--quitar button { width: 40px; height: 40px; }
  .trx-tam .select select { min-height: 44px; }
}

/* Celular: la tarjeta de comisión no repite el neto (es igual al monto) */
@media (max-width: 640px) {
  .trx-tabla tr.trx-fila--comision { grid-template-areas: "tipo estado" "contra bruto" "fecha fecha"; }
  .trx-tabla tr.trx-fila--comision td.trx-c-neto { display: none; }
}

/* ==========================================================================
   Paridad: período con hora, flujo neto, gráfico diario, devoluciones,
   CBU de origen, copiar código y export de conciliación
   ========================================================================== */

/* ---------- Filtros: horas del período personalizado ---------- */
input[type="time"].campo__control { font-variant-numeric: tabular-nums; }
.trx-filtros--con-hora .trx-filtros__principal { grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, 1fr)); }

/* ---------- Resumen: 5 celdas con el flujo neto ---------- */
.trx-resumen { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.trx-resumen .kpi__valor { font-size: var(--t-24); }
.trx-flujo .kpi__etiqueta { align-items: flex-start; }
.trx-flujo .kpi__etiqueta > .ico { margin-top: 1px; }
.trx-flujo__ayuda { flex: none; margin-top: -1px; }
.trx-flujo .kpi__valor small { color: inherit; }
.trx-flujo__signo { color: var(--texto-2); font-weight: 500; gap: 4px; flex-wrap: nowrap; align-items: flex-start; }
.trx-flujo__signo .ico { flex: none; margin-top: 2px; }
.trx-flujo__signo .ico { width: 16px; height: 16px; color: var(--peligro); }
.trx-flujo[data-flujo="positivo"] .trx-flujo__signo .ico { color: var(--exito); }
/* El tooltip se abre hacia la izquierda y abajo para no quedar cortado por la tira */
.trx-flujo__ayuda[data-tooltip]::after { left: auto; right: -8px; transform: translateY(-4px); }
.trx-flujo__ayuda[data-tooltip]:hover::after, .trx-flujo__ayuda[data-tooltip]:focus-visible::after { transform: none; }

/* ---------- Gráfico diario (barras dobles) ---------- */
.trx-grafico { margin-top: var(--e-4); }
.trx-grafico__cabecera { align-items: flex-start; flex-wrap: wrap; gap: var(--e-3); }
.trx-grafico__rotulo { margin: 0 0 2px; font-size: var(--t-12); font-weight: 600; color: var(--texto-3); }
.trx-grafico__titulo { font-variant-numeric: tabular-nums; }
.trx-grafico__leyenda { list-style: none; margin: 0; padding: 0; }
.trx-grafico__nota { margin: var(--e-2) 0 0; }
.trx-grafico .barras--doble > span[data-valor]:hover::after,
.trx-grafico .barras--doble > span[data-valor]:focus-visible::after { white-space: nowrap; }
.trx-grafico .barras--doble > span.trx-tip-izq:hover::after,
.trx-grafico .barras--doble > span.trx-tip-izq:focus-visible::after { left: 0; transform: none; }
.trx-grafico .barras--doble > span.trx-tip-der:hover::after,
.trx-grafico .barras--doble > span.trx-tip-der:focus-visible::after { left: auto; right: 0; transform: none; }
/* Muchos días (mes, 30 días): barras más juntas */
.trx-grafico--muchos .barras--doble { gap: 2px; }
.trx-grafico--muchos .barras--doble > span { padding: 0; gap: 1px; min-width: 0; }

/* ---------- Tabla: CBU de origen, copiar código, devoluciones ---------- */
.trx-tabla .trx-cbu { white-space: normal; max-width: 11rem; }
.trx-op { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.btn.trx-copiar {
  --btn-alto: 24px; width: 24px; min-height: 24px; height: 24px; padding: 0; margin: -4px 0;
  flex: none; border-radius: var(--radio-1); color: var(--texto-3);
}
.btn.trx-copiar:hover { color: var(--texto); }
.btn.trx-copiar .ico { width: 14px; height: 14px; }
.trx-concepto.trx-concepto--largo { white-space: normal; max-width: 11rem; overflow: visible; }

/* ---------- Modal Exportar CSV ---------- */
.trx-formatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trx-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2) var(--e-4); }
ol.trx-columnas { list-style: none; margin: 0; padding: 0; counter-reset: col; grid-template-rows: repeat(5, auto); grid-auto-flow: column; }
.trx-columnas--fijas li { counter-increment: col; display: flex; align-items: center; gap: 6px; }
.trx-columnas--fijas li::before { content: counter(col) "."; min-width: 1.4em; font-size: var(--t-12); color: var(--texto-3); font-variant-numeric: tabular-nums; }
.trx-columnas-nota { margin: 0 0 var(--e-3); }
.trx-columnas-error:not([hidden]) { display: flex; margin: var(--e-2) 0 0; }
.trx-previa-campo { grid-template-columns: minmax(0, 1fr); min-width: 0; }
pre.codigo.trx-previa {
  margin: 0; padding: var(--e-3) var(--e-4); overflow-x: auto; min-width: 0; max-width: 100%;
  color: var(--codigo-texto); font-family: var(--fuente-mono); font-size: var(--t-12); line-height: 1.6; white-space: pre;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent;
}
pre.codigo.trx-previa:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  .trx-filtros--con-hora .trx-filtros__principal { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .trx-filtros--con-hora .trx-filtros__buscar { grid-column: 1 / -1; }
  /* 3 arriba y 2 abajo, sin celdas vacías */
  .trx-resumen { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .trx-resumen__celda { grid-column: span 2; }
  .trx-resumen__celda:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 1023px) {
  .trx-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trx-resumen__celda, .trx-resumen__celda:nth-child(n+4) { grid-column: auto; }
  .trx-resumen__celda--principal { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .trx-filtros--con-hora .trx-filtros__principal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .trx-formatos, .trx-columnas { grid-template-columns: minmax(0, 1fr); }
  ol.trx-columnas { grid-template-rows: none; grid-auto-flow: row; }
}
@media (max-width: 640px) {
  .trx-resumen .kpi__valor { font-size: var(--t-20); }
  /* La tarjeta suma una línea con la referencia y el código de operación (copiable) */
  .trx-tabla tr { grid-template-areas: "tipo estado" "contra bruto" "cuenta neto" "concepto concepto" "fecha fecha"; }
  .trx-tabla tr td.trx-c-concepto {
    display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--e-2); row-gap: 2px;
    grid-area: concepto; font-size: var(--t-12); color: var(--texto-2);
  }
  .trx-tabla td.trx-c-concepto .trx-concepto { max-width: none; font-size: var(--t-12); color: var(--texto-2); }
  .trx-tabla td.trx-c-concepto .celda-sub { margin: 0; }
  .trx-tabla tr.trx-fila--comision td.trx-c-concepto { display: none; }
  .trx-tabla .trx-cbu { max-width: none; }
  .trx-grafico .barras--doble > span[data-valor]:hover::after,
  .trx-grafico .barras--doble > span[data-valor]:focus-visible::after { white-space: normal; width: max-content; max-width: 210px; text-align: left; }
}
/* Táctil: el botón copiar llega a 44 px sin agrandar la fila */
@media (pointer: coarse) {
  .btn.trx-copiar { --btn-alto: 44px; width: 44px; height: 44px; min-height: 44px; margin: -10px -10px -10px -6px; }
}

/* Chromium resuelve mal min-height: min-content en un fieldset dentro de .modal__cuerpo (la fila se achica y
   el contenido se pisa con lo de abajo). En este modal cada bloque mide lo que su contenido. */
#modal-exportar .modal__cuerpo > * { min-height: auto; }