/* Finance screen: statement tables, indicator cards and the provenance panel. */

.fin-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.fin-tabs {
  display: flex;
  gap: 0.25rem;
  background: var(--gray-100);
  padding: 0.25rem;
  border-radius: var(--radius);
}

.fin-tab {
  border: 0;
  background: transparent;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
}

.fin-tab:hover { color: var(--gray-900); }

.fin-tab.activo {
  background: #fff;
  color: var(--primary-700);
  box-shadow: var(--shadow-sm);
}

.fin-origen-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--gray-600);
  margin-left: auto;
}

.fin-ventana {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-bottom: 1rem;
}

/* Tables scroll inside their own box so the page header stays put. */
.tabla-envoltura {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}

/* A long ledger must not turn the page into a mile of scrolling: it scrolls
   inside its own frame, which also keeps its header row in view. */
.tabla-envoltura.tabla-alta {
  max-height: 60vh;
  overflow-y: auto;
}

.tabla-finanzas {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.tabla-finanzas th,
.tabla-finanzas td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--gray-100);
  white-space: nowrap;
}

.tabla-finanzas thead th {
  position: sticky;
  top: 0;
  background: var(--gray-50);
  font-weight: 600;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-200);
  z-index: 1;
}

.tabla-finanzas tbody tr:hover td { background: var(--primary-50); }

.tabla-finanzas .num { text-align: right; }

/* The description column stays put while the units scroll sideways. */
.tabla-finanzas .linea {
  text-align: left;
  min-width: 15rem;
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 2;
}

.tabla-finanzas thead th.linea { z-index: 3; background: var(--gray-50); }
.tabla-finanzas tbody tr:hover td.linea { background: var(--primary-50); }
.tabla-finanzas tr.seccion td.linea,
.tabla-finanzas tfoot td.linea { background: var(--gray-50); }

/* The total is the column most often read, so it stays in view while the
   business units scroll under it. */
.tabla-finanzas .col-total {
  position: sticky;
  right: 0;
  background: #fff;
  z-index: 2;
  border-left: 1px solid var(--gray-200);
}

.tabla-finanzas thead th.col-total { z-index: 3; background: var(--gray-50); }
.tabla-finanzas tbody tr:hover td.col-total { background: var(--primary-50); }
.tabla-finanzas tfoot td.col-total { background: var(--gray-50); }

.linea-nombre { font-weight: 500; color: var(--gray-800); }

/* Share of sales, drawn under the label rather than in its own column. */
.parte-barra {
  display: block;
  height: 3px;
  width: var(--parte);
  margin-top: 0.375rem;
  border-radius: 999px;
  background: var(--amber-500);
  opacity: 0.55;
}

.margen-barra {
  display: block;
  height: 3px;
  width: var(--ancho);
  margin-top: 0.375rem;
  border-radius: 999px;
}

.margen-barra.positiva { background: var(--primary-500); opacity: 0.6; }
.margen-barra.negativa { background: var(--red-500); opacity: 0.6; }

/* Spanish source term under a translated label: provenance, not decoration. */
.linea-origen {
  font-size: 0.6875rem;
  color: var(--gray-400);
  margin-top: 0.125rem;
}

.tabla-finanzas tr.seccion td {
  background: var(--gray-50);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--gray-500);
}

.tabla-finanzas tfoot td {
  border-top: 1px solid var(--gray-300);
  font-weight: 600;
}

.tabla-finanzas tfoot tr.resultado td {
  font-size: 0.9375rem;
  background: var(--gray-50);
}

.tabla-finanzas tfoot tr.margen td {
  font-weight: 500;
  color: var(--gray-600);
}

.grupo-titulo {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-800);
  margin: 1.5rem 0 0.75rem;
}

/* A figure and the cell it came from. */
.cifra {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.cifra-celda {
  font-size: 0.625rem;
  color: var(--gray-400);
  font-weight: 400;
}

button.cifra-enlace {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-bottom: 1px dotted var(--gray-300);
}

button.cifra-enlace:hover {
  border-bottom-color: var(--primary-500);
}

button.cifra-enlace:hover .cifra-celda { color: var(--primary-600); }

.money-positive { color: var(--primary-700); }
.money-negative { color: var(--red-600); }

/* An absent figure states its reason instead of showing a zero. */
.cifra-omitida {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--gray-400);
  line-height: 1.25;
}

.cifra-razon {
  font-size: 0.625rem;
  font-style: italic;
}

/* Indicator cards, laid out as the farm's own reports are. */
.ind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

/* The four headline figures belong on one line; they are read together. */
.ind-grid-titulares {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .ind-grid-titulares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .ind-grid-titulares { grid-template-columns: minmax(0, 1fr); }
}

.ind-tarjeta {
  position: relative;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1rem 1.125rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.ind-tarjeta:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* A hairline of colour carries the sign without shouting it. */
.ind-tarjeta::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: transparent;
}

.ind-positivo::before { background: var(--primary-500); }
.ind-negativo::before { background: var(--red-500); }

.ind-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.ind-titulo {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.ind-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: var(--radius);
  background: var(--gray-50);
  color: var(--gray-400);
}

.ind-icono svg { width: 15px; height: 15px; }

.ind-valor {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0.5rem 0 0.25rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.ind-ref {
  font-size: 0.6875rem;
  color: var(--gray-400);
  margin-top: 0.25rem;
}

.ind-separador {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gray-500);
  margin: 1.25rem 0 0.75rem;
}

.delta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.delta::before { font-size: 0.6875rem; line-height: 1; }
.delta-up { color: var(--primary-600); }
.delta-up::before { content: '\25B2'; }
.delta-down { color: var(--red-600); }
.delta-down::before { content: '\25BC'; }
.delta-neutral { color: var(--gray-400); font-weight: 500; font-style: italic; }

/* The bridge from sales to profit. Bars float at a height set in the model,
   on a zero-based scale, so none can exaggerate by starting partway up. */
.cascada-marco {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.25rem 0.75rem;
  margin-bottom: 1.25rem;
}

.cascada-titulo {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  margin-bottom: 1rem;
}

.cascada {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.cascada-paso {
  flex: 1 1 0;
  min-width: 5.5rem;
  display: flex;
  flex-direction: column;
}

.cascada-columna {
  position: relative;
  height: 9rem;
  margin-bottom: 0.5rem;
}

.cascada-barra {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: var(--base);
  height: var(--alto);
  min-height: 2px;
  border-radius: 3px;
  background: var(--gray-300);
}

.cascada-ingreso .cascada-barra { background: var(--primary-500); }
.cascada-egreso .cascada-barra { background: var(--red-400, #f87171); }
.cascada-resultado .cascada-barra { background: var(--primary-700); }
.cascada-perdida .cascada-barra { background: var(--red-600); }

.cascada-cifra {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-800);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cascada-parte {
  font-size: 0.625rem;
  color: var(--gray-400);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cascada-etiqueta {
  font-size: 0.6875rem;
  color: var(--gray-600);
  text-align: center;
  margin-top: 0.25rem;
  line-height: 1.25;
  overflow-wrap: break-word;
}

/* Provenance panel. */
.origen-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.4);
  z-index: 60;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.origen-overlay.activo { display: flex; }

.origen-panel {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(34rem, 100%);
  overflow: hidden;
}

.origen-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gray-600);
}

.origen-cerrar {
  border: 0;
  background: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--gray-400);
}

.origen-cerrar:hover { color: var(--gray-700); }

.origen-cuerpo { padding: 0.5rem 1rem; }

.origen-fila {
  display: flex;
  gap: 1rem;
  padding: 0.375rem 0;
  font-size: 0.8125rem;
}

.origen-clave { color: var(--gray-500); min-width: 8rem; }
.origen-valor { color: var(--gray-900); word-break: break-all; }
.origen-valor code { font-size: 0.75rem; color: var(--gray-600); }

.origen-sep {
  border-top: 1px solid var(--gray-100);
  margin: 0.5rem 0;
}

.origen-acciones {
  display: flex;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}

/* Bank tables carry many short columns, unlike the statement's wide first one.
   Numeric columns shrink to their content so the description absorbs the slack
   instead of the money being pushed off the edge. */
.tabla-bancos .linea {
  min-width: 0;
  white-space: nowrap;
}

.tabla-bancos .num {
  width: 1%;
  white-space: nowrap;
}

.tabla-bancos th,
.tabla-bancos td {
  padding: 0.5rem 0.75rem;
}

.lado-vacio {
  color: var(--gray-300);
}

/* One colour per category, used by the badge, the bar and the legend alike so
   the eye can carry a category between them. */
.cat-impuesto { --cat: #dc2626; }
.cat-proveedor { --cat: #2563eb; }
.cat-transferencia { --cat: #7c3aed; }
.cat-comision { --cat: #d97706; }
.cat-servicio { --cat: #0891b2; }
.cat-deposito { --cat: #16a34a; }
.cat-cobro { --cat: #059669; }
.cat-intereses { --cat: #65a30d; }
.cat-cheque { --cat: #db2777; }
.cat-retiro { --cat: #ea580c; }
.cat-nota_credito { --cat: #0d9488; }
.cat-nota_debito { --cat: #9333ea; }
.cat-sin_clasificar { --cat: var(--gray-400); }

.cat-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-700);
  white-space: nowrap;
}

.cat-etiqueta::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--cat, var(--gray-400));
  flex: none;
}

.cuenta-movs { display: block; }

/* A bar next to the count, so the working account is obvious at a glance. */
.cuenta-barra {
  display: block;
  height: 3px;
  width: var(--parte);
  margin-left: auto;
  margin-top: 0.25rem;
  border-radius: 999px;
  background: var(--primary-400);
  opacity: 0.7;
}

.periodo {
  font-variant-numeric: tabular-nums;
  color: var(--gray-600);
  font-size: 0.8125rem;
}

.periodo-guion { color: var(--gray-300); }

.dist-marco {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.125rem;
  margin-bottom: 1.5rem;
}

.dist-barra {
  display: flex;
  height: 0.625rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--gray-100);
}

.dist-segmento {
  width: var(--parte);
  background: var(--cat, var(--gray-400));
}

.dist-segmento:hover { filter: brightness(1.15); }

.dist-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 0.875rem;
}

.dist-clave {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--gray-600);
}

.dist-clave b {
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}

.dist-punto {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--cat, var(--gray-400));
}

.dist-pct {
  color: var(--gray-400);
  font-variant-numeric: tabular-nums;
}

/* Bank ledger: the description is the bank's own text and may be long. */
.mov-desc {
  max-width: 26rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mov-ref {
  font-size: 0.75rem;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}

.mov-origen {
  font-size: 0.75rem;
  color: var(--gray-500);
  text-decoration: none;
  border-bottom: 1px dotted var(--gray-300);
}

.mov-origen:hover {
  color: var(--primary-600);
  border-bottom-color: var(--primary-500);
}

/* Rule queue. */
.reglas-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.125rem 1.25rem;
  margin-bottom: 1rem;
}

.reglas-cifra {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-700);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.reglas-etiqueta {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  margin-top: 0.25rem;
}

.reglas-detalle {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 0.375rem;
}

.reglas-progreso {
  height: 6px;
  border-radius: 999px;
  background: var(--gray-100);
  margin-top: 0.75rem;
  overflow: hidden;
}

.reglas-progreso span {
  display: block;
  height: 100%;
  width: var(--parte);
  background: var(--primary-500);
  border-radius: 999px;
  transition: width 0.25s ease;
}

.reglas-hitos {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hito {
  font-size: 0.75rem;
  color: var(--gray-600);
  font-variant-numeric: tabular-nums;
}

.hito b { color: var(--gray-900); }

/* The basis for the suggestion, shown with it. */
.evidencia {
  font-size: 0.6875rem;
  color: var(--gray-500);
  margin-top: 0.375rem;
}

.evidencia-alerta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--amber-700);
}

.evidencia-alerta svg { width: 13px; height: 13px; }

.regla-fila:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: -2px;
}

.regla-fila.confirmed td.linea { border-left: 3px solid var(--primary-500); }
.regla-fila.rejected { opacity: 0.55; }

.regla-movs { display: block; font-weight: 600; }
.regla-parte { font-size: 0.6875rem; color: var(--gray-400); }

.cuenta-select { min-width: 13rem; font-size: 0.8125rem; }

/* Bank patterns run long; the decision must stay reachable without scrolling. */
.regla-fila .linea:first-child {
  max-width: 34rem;
  white-space: normal;
}

.regla-fila .linea-nombre,
.regla-fila .linea-origen {
  overflow-wrap: anywhere;
}

.btn-sm {
  padding: 0.3125rem 0.625rem;
  font-size: 0.75rem;
}

.tabla-vacia {
  background: #fff;
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--gray-500);
  margin-bottom: 1.5rem;
}

.tabla-vacia p { margin-bottom: 0.75rem; }

.aviso {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  background: var(--gray-900);
  color: #fff;
  padding: 0.625rem 1rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 70;
}

.aviso.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 900px) {
  .reglas-cabecera { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .fin-origen-toggle { margin-left: 0; }
  .tabla-finanzas .linea { min-width: 11rem; }
}

.fin-denegado {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.75rem;
  padding: 4rem 1.5rem;
  color: var(--gray-600);
}

.fin-denegado-icon {
  width: 48px;
  height: 48px;
  color: var(--gray-400);
}

.fin-denegado h2 {
  font-size: 1.25rem;
  color: var(--gray-800);
}

.fin-denegado p {
  max-width: 28rem;
  font-size: 0.9rem;
}