/* ═══════════════════════════════════════════════════════════════
   maX Valuations · componentes del sistema
   ───────────────────────────────────────────────────────────────
   Piezas reutilizables del rediseño. Prefijo mx- para que no choquen
   con las clases que ya existen en base.css (.card, .field, .badge-*,
   .ficha-tabs, .data-grid…), que se mantienen intactas mientras las
   pantallas se van migrando una a una.

   Regla: aquí no se escribe ningún color literal. Si falta un color,
   se añade primero a tokens.css.
   ═══════════════════════════════════════════════════════════════ */


/* ── Cifras ─────────────────────────────────────────────────────
   Cualquier número que se compare con otro va en esta clase. La
   monoespaciada con cifras tabulares alinea las columnas de €/m² y
   evita que una referencia catastral parezca prosa. */
.mx-num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}


/* ── Cabecera de entidad ────────────────────────────────────────
   Encabeza un activo, una promoción o una cartera: qué es, cómo se
   llama, en qué estado está y dónde cae dentro de su grupo. */
.mx-entity { display: flex; align-items: flex-start; gap: var(--s4);
  margin-bottom: var(--s4); flex-wrap: wrap; }
.mx-entity__id { min-width: 0; flex: 1; }
.mx-entity__cod { font-family: var(--font-num); font-size: var(--t-mini);
  font-weight: 500; color: var(--ink-300); letter-spacing: .04em; }
.mx-entity__name { font-size: 20px; font-weight: 600; letter-spacing: -.02em;
  margin: 2px 0 var(--s2); text-wrap: balance; }
.mx-entity__acts { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; }

/* «3 / 41» dice en qué punto de la promoción estás; unas flechas solas no. */
.mx-sib { display: flex; align-items: center; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); background: var(--surface); overflow: hidden; }
.mx-sib button { border: 0; background: transparent; padding: 6px 9px; line-height: 1;
  font-size: var(--t-sm); color: var(--ink-400); cursor: pointer; font-family: inherit; }
.mx-sib button:hover:not(:disabled) { background: var(--surface-3); color: var(--ink-900); }
.mx-sib button:disabled { color: var(--ink-200); cursor: default; }
.mx-sib b { font-family: var(--font-num); font-size: var(--t-mini); font-weight: 500;
  color: var(--ink-400); padding: 0 var(--s2);
  border-left: 1px solid var(--line); border-right: 1px solid var(--line); }


/* ── Distintivos ────────────────────────────────────────────────
   Estado en forma además de en palabra, para poder barrer con la
   vista en lugar de leer. */
.mx-chip { display: inline-block; font-size: var(--t-mini); font-weight: 500;
  padding: 3px 9px; border-radius: 3px; white-space: nowrap;
  background: var(--surface-5); color: var(--ink-800); }
.mx-chip--use  { background: var(--navy-100); color: var(--navy-700); }
.mx-chip--ok   { background: var(--pos-bg);   color: var(--pos); }
.mx-chip--warn { background: var(--warn-bg);  color: var(--warn); }
.mx-chip--neg  { background: var(--brass-bg); color: var(--brass-ink); }


/* ── Tira de resumen ────────────────────────────────────────────
   El titular antes que el detalle. Va arriba del todo, siempre. */
.mx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s3); margin-bottom: var(--s4); }
.mx-tile { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 13px 15px;
  display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mx-tile__k { font-size: var(--t-micro); font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-300); }
.mx-tile__v { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-xl); font-weight: 500; letter-spacing: -.02em;
  color: var(--ink-900); line-height: 1.2; }
.mx-tile__v small { font-size: var(--t-base); color: var(--ink-300); font-weight: 400; }
.mx-tile__f { font-size: var(--t-mini); color: var(--ink-400); }
.mx-tile__v--pos { color: var(--pos); }
.mx-tile__v--pos small { color: var(--pos); opacity: .7; }

/* La única pieza que se lleva el acento cálido: el resultado de una
   valoración. Si el latón aparece en más sitios, deja de significar. */
.mx-tile--res { background: var(--brass-bg); border-color: var(--brass-line); }
.mx-tile--res .mx-tile__k,
.mx-tile--res .mx-tile__v { color: var(--brass-ink); }
.mx-tile--res .mx-tile__f { color: var(--brass-ink); opacity: .8; }


/* ── Bloque de datos ────────────────────────────────────────────
   Sustituye a la rejilla de celdas sueltas: pares etiqueta/valor en
   filas, agrupados por lo que las cosas son. */
.mx-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s3); align-items: start; }
.mx-blk { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; }
.mx-blk > h3 { font-size: var(--t-micro); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-300); margin: 0;
  padding: 11px 14px 9px; border-bottom: 1px solid var(--line); }
.mx-dl { padding: 6px 14px 12px; display: flex; flex-direction: column; }
.mx-rw { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s3); padding: 6px 0; border-bottom: 1px solid var(--line); }
.mx-rw:last-child { border-bottom: 0; }
.mx-k { font-size: var(--t-sm); color: var(--ink-400); flex-shrink: 0; }
.mx-v { font-size: var(--t-sm); color: var(--ink-900); font-weight: 500;
  text-align: right; min-width: 0; word-break: break-word; }
.mx-v--mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.mx-v--dim { color: var(--ink-200); font-weight: 400; }

.mx-copy { font-size: var(--t-micro); color: var(--ink-300); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px;
  margin-left: 6px; cursor: pointer; font-family: inherit; }
.mx-copy:hover { color: var(--ink-900); border-color: var(--line-2); }


/* ── Notas ──────────────────────────────────────────────────────*/
.mx-notes { background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px 14px; margin-top: var(--s3); }
.mx-notes > h3 { font-size: var(--t-micro); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-300); margin: 0 0 6px; }
.mx-notes p { margin: 0; font-size: var(--t-sm); color: var(--ink-800);
  line-height: 1.6; max-width: 72ch; }


/* ── Barra de herramientas ──────────────────────────────────────*/
.mx-bar { display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s3); flex-wrap: wrap; }
.mx-bar h3 { font-size: var(--t-md); font-weight: 600; margin: 0; letter-spacing: -.01em; }
.mx-bar .st { font-size: var(--t-sm); color: var(--ink-400); }
.mx-bar .rt { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

.mx-pill { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-mini); font-weight: 500; padding: 5px 11px;
  border-radius: var(--r-pill); background: var(--surface-5); color: var(--ink-400); }
.mx-pill--ok   { background: var(--pos-bg);  color: var(--pos); }
.mx-pill--warn { background: var(--warn-bg); color: var(--warn); }

.mx-btn { font-family: var(--font-ui); font-size: var(--t-sm); font-weight: 500;
  padding: 7px 12px; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); color: var(--ink-800); cursor: pointer; }
.mx-btn:hover { background: var(--surface-3); }
.mx-btn--pri { background: var(--navy-700); border-color: var(--navy-700);
  color: var(--on-navy); font-weight: 600; }
.mx-btn--pri:hover { background: var(--navy-800); }

.mx-aviso { font-size: var(--t-sm); font-weight: 500; padding: 8px 14px;
  border-radius: var(--r-sm); background: var(--warn-bg); color: var(--warn);
  margin-top: var(--s3); }


/* ── Filtros ────────────────────────────────────────────────────*/
.mx-filters { display: flex; gap: 6px; padding: 9px 12px; background: var(--surface-2);
  border-bottom: 1px solid var(--line); flex-wrap: wrap; align-items: center; }
.mx-filters input, .mx-filters select { font-family: inherit; font-size: var(--t-mini);
  padding: 5px 8px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-900); }
.mx-filters input::placeholder { color: var(--ink-200); }
.mx-filters input:focus, .mx-filters select:focus { outline: 2px solid var(--navy-300);
  outline-offset: -1px; border-color: var(--navy-300); }
.mx-filters .clr { font-family: inherit; font-size: var(--t-mini); color: var(--ink-300);
  background: none; border: 0; cursor: pointer; margin-left: auto; }
.mx-filters .clr:hover { color: var(--ink-900); }


/* ── Tabla de datos ─────────────────────────────────────────────
   Cabecera fija: con 200 comparables, perder los rótulos al bajar
   obliga a subir para recordar qué columna se está mirando. */
.mx-tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.mx-tbl thead th { position: sticky; top: 0; z-index: 1; background: var(--surface);
  padding: 9px 11px; font-size: var(--t-micro); font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-300); text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line-2); }
.mx-tbl thead th.r { text-align: right; }
.mx-tbl thead th.ord { cursor: pointer; user-select: none; }
.mx-tbl thead th.ord:hover { color: var(--ink-900); }
.mx-tbl thead th .fl { color: var(--ink-200); font-weight: 400; }
.mx-tbl thead th.act .fl { color: var(--navy-600); }

.mx-tbl tbody td { padding: 8px 11px; border-bottom: 1px solid var(--line);
  white-space: nowrap; color: var(--ink-800); }
.mx-tbl tbody td.r { text-align: right; }
.mx-tbl tbody tr { cursor: pointer; }
.mx-tbl tbody tr:hover td { background: var(--surface-3); }
.mx-tbl tbody tr.on td { background: var(--navy-100); }
/* La clase la pone toggleComparable() al desmarcar la casilla. */
.mx-tbl tbody tr.excluido { opacity: .45; }
.mx-tbl tbody tr:last-child td { border-bottom: 0; }

/* Dispersión de la muestra: dónde cae la media dentro del rango. */
.mx-disp { height: 4px; border-radius: 2px; background: var(--surface-5);
  margin-top: 6px; position: relative; }
.mx-disp i { position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  background: var(--navy-200); border-radius: 2px; }
.mx-disp u { position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--navy-600); }

/* Las cifras que se comparan entre sí van en monoespaciada tabular:
   así las columnas de €/m² se alinean por dígito, no por casualidad. */
.mx-tbl .num { font-family: var(--font-num); font-variant-numeric: tabular-nums;
  color: var(--ink-900); }
.mx-tbl .num.dim { color: var(--ink-400); }
.mx-tbl .dir { display: block; max-width: 175px; overflow: hidden;
  text-overflow: ellipsis; color: var(--ink-900); font-weight: 500; }
.mx-tbl .xtr { font-size: var(--t-micro); color: var(--ink-300); letter-spacing: .04em; }

.mx-lnk { font-size: var(--t-micro); font-weight: 500; padding: 2px 6px;
  border: 1px solid var(--line-2); border-radius: 3px; color: var(--ink-400);
  background: var(--surface); text-decoration: none; }
.mx-lnk:hover { color: var(--navy-700); border-color: var(--navy-300); }


/* ── Celda de peso ──────────────────────────────────────────────
   El peso se ve además de leerse: la barra deja saltar a la vista
   qué comparables mandan en la valoración. */
.mx-w { display: flex; align-items: center; gap: 7px; justify-content: flex-end; }
.mx-w__bar { width: 32px; height: 4px; border-radius: 2px;
  background: var(--surface-5); overflow: hidden; flex-shrink: 0; }
.mx-w__bar i { display: block; height: 100%; background: var(--navy-600); border-radius: 2px; }
.mx-w input { width: 54px; padding: 3px 5px; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); background: var(--surface); color: var(--ink-900);
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-mini); text-align: right; }
/* Fijado a mano: se distingue del repartido automático, pero sin gritar.
   Antes era rojo, que en esta app significa error. */
.mx-w input.fijo { border-color: var(--navy-300); background: var(--navy-100);
  color: var(--navy-700); font-weight: 500; }
.mx-w input:disabled { color: var(--ink-200); background: var(--surface-2);
  border-color: var(--line); }
.mx-w input:focus { outline: 2px solid var(--navy-300); outline-offset: -1px; }


/* ── Raíl de detalle ────────────────────────────────────────────*/
.mx-rail { display: flex; flex-direction: column; gap: var(--s3); }
.mx-det-hd { padding: 12px 14px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); }
.mx-det-hd .t { font-size: var(--t-base); font-weight: 600;
  letter-spacing: -.01em; color: var(--ink-900); }
.mx-det-hd .s { font-size: var(--t-mini); color: var(--ink-400); margin-top: 2px; }
.mx-det-vacio { padding: 2rem 1rem; text-align: center;
  font-size: var(--t-sm); color: var(--ink-300); }
.mx-det-acts { display: flex; gap: 7px; }
.mx-det-acts .mx-btn { flex: 1; text-align: center; text-decoration: none; }

/* Histograma: dónde cae este comparable dentro de la muestra. Un número
   suelto no dice si es caro o barato; su posición en la distribución sí. */
.mx-hist { padding: 10px 14px 12px; }
.mx-hist svg { width: 100%; height: 46px; display: block; }
.mx-hist .lg { display: flex; justify-content: space-between; margin-top: 6px;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-micro); color: var(--ink-300); }


/* ── Rejilla de superficies (AG Grid) ───────────────────────────
   El origen del dato se sigue viendo en el color de la cabecera,
   igual que en la vista clásica y que en el Excel exportado. */
.ag-header-cell.sup-cat { background: var(--origen-cat); }
.ag-header-cell.sup-max { background: var(--origen-max); }
.sup-grid-bar .mx-bar { margin-bottom: var(--s2); }


/* ── Accesibilidad ──────────────────────────────────────────────*/
.mx-sib button:focus-visible,
.mx-btn:focus-visible,
.mx-copy:focus-visible { outline: 2px solid var(--navy-600); outline-offset: 2px; }