/**
 * 06-detalle-cxp.css — La lupa de la rejilla y el diálogo de desglose.
 */

/* ── La lupa en la celda ─────────────────────────────────────────────────
 * Se superpone a la izquierda de la celda, donde las cifras alineadas a la
 * derecha dejan sitio libre. Solo aparece al pasar por encima: una rejilla de
 * catorce semanas con un icono fijo en cada celda deja de leerse como una
 * tabla de números.
 */
.lupa {
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: var(--surf);
  border: 1px solid var(--line2);
  border-radius: 3px;
  color: var(--acc);
  cursor: pointer;
  opacity: 0;
  transition: opacity .1s;
}
td.c:hover .lupa,
.lupa:focus-visible { opacity: 1; }
.lupa:hover { background: var(--accSoft); border-color: var(--accLine); }

/* Rastro permanente de que la celda tiene desglose: sin esto, el usuario no
   sabe dónde pasar el ratón. Un punto de 3px en la esquina no compite con las
   cifras pero se ve al recorrer la fila. */
td.c:has(.lupa)::before {
  content: "";
  position: absolute;
  left: 4px;
  bottom: 3px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accLine);
}
td.c:hover:has(.lupa)::before { opacity: 0; }

/* ── Cabecera del diálogo ────────────────────────────────────────────── */
.dcab {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.dtotal {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 700;
  color: var(--neg);
  line-height: 1.2;
}
.dnum {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 600;
  color: var(--tx);
  line-height: 1.35;
}

/* ── Tabla de proveedores ────────────────────────────────────────────── */
.dtabla td { border-bottom: 1px solid var(--line); }
tr.dprov { cursor: pointer; }
tr.dprov:hover td { background: var(--surf2); }
tr.dprov.abierta td { background: var(--accSoft); }

.dpos {
  font-family: var(--f-num);
  font-size: 11px;
  color: var(--tx3);
  text-align: right;
  vertical-align: top;
  padding-top: 9px !important;
}
.dnom { display: flex; align-items: center; gap: 8px; }
.dflecha { color: var(--acc); font-size: 10px; width: 9px; flex: none; }
.dchip {
  flex: none;
  padding: 0 5px;
  background: var(--surf2);
  border-radius: 2px;
  font-family: var(--f-num);
  font-size: 9.5px;
  color: var(--tx3);
}
.dval {
  text-align: right;
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dpct {
  text-align: right;
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--tx3);
}

/* La barra repite el porcentaje en forma. Ordenados de mayor a menor, el
   perfil de la columna dice de un vistazo si el peso está concentrado en dos
   proveedores o repartido entre cincuenta. */
.dbarra {
  display: block;
  height: 3px;
  margin-top: 3px;
  background: var(--surf3);
  border-radius: 2px;
  overflow: hidden;
}
.dbarra i { display: block; height: 100%; background: var(--acc); }

/* ── Facturas de un proveedor ────────────────────────────────────────── */
tr.ddet > td { background: var(--surf2); padding: 0 0 8px !important; }

table.dfact { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.dfact th {
  position: static;               /* dentro de un .tscroll, sticky se solaparía */
  padding: 4px 10px 3px;
  background: none;
  border-bottom: 1px solid var(--line2);
  text-align: left;
  font-family: var(--f-num);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx3);
  white-space: nowrap;
}
table.dfact td {
  padding: 3px 10px;
  border: 0;
  font-size: 12px;
  color: var(--tx2);
  vertical-align: top;
}
table.dfact th.dval, table.dfact td.dval { text-align: right; }

/* Anchos en píxeles, no en porcentaje: cinco de las seis columnas tienen
   contenido de tamaño conocido —un código, un tipo, dos fechas y una cifra— y
   pedirles un porcentaje del ancho hace que crezcan cuando no lo necesitan y
   que las fechas se partan en dos líneas cuando el diálogo se estrecha.
   Se les da lo justo y la OBSERVACIÓN se queda con todo lo que sobre: es la
   única de longitud imprevisible, y por tanto la única que sabe qué hacer con
   el espacio libre. En un diálogo de 900px pasa de 250px a ~325px. */
table.dfact th:nth-child(1), table.dfact td:nth-child(1) { width: 106px; }
table.dfact th:nth-child(2), table.dfact td:nth-child(2) { width: 84px; }
table.dfact th:nth-child(3), table.dfact td:nth-child(3) { width: 98px; }
table.dfact th:nth-child(4), table.dfact td:nth-child(4) { width: 98px; }
table.dfact th:nth-child(5), table.dfact td:nth-child(5) { width: auto; }
table.dfact th:nth-child(6), table.dfact td:nth-child(6) { width: 126px; }

/* Las dos fechas NUNCA se parten. Una fecha repartida en dos líneas
   —«2026-08-» sobre «11»— se lee como dos datos distintos, y en una tabla
   donde la columna de al lado también es una fecha, eso induce a error.
   El `nowrap` es la garantía; los 98px de arriba son para que no tenga que
   desbordarse para cumplirla. */
table.dfact td:nth-child(3), table.dfact td:nth-child(4) { white-space: nowrap; }

.ddoc { font-family: var(--f-num); font-size: 11.5px; word-break: break-all; }

/* La observación se recorta a tres líneas: son textos de longitud imprevisible
   y una sola factura no puede empujar la tabla entera. Tres es el límite donde
   la fila sigue leyéndose como una fila; a partir de ahí una observación larga
   separa tanto sus vecinas que se pierde la comparación entre facturas.
   El texto completo va en el atributo `title`, y el recorte solo se nota
   cuando de verdad sobra texto: lo corto sigue ocupando una línea. */
.dobs {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11.5px;
  color: var(--tx3);
  line-height: 1.45;
}

.dparcial {
  display: block;
  font-size: 10px;
  color: var(--tx3);
  font-variant-numeric: tabular-nums;
}
.dmoneda {
  font-family: var(--f-num);
  font-size: 9.5px;
  color: var(--amb);
  letter-spacing: .05em;
}

/* Este diálogo lleva seis columnas: con el ancho por defecto no cabrían. Todo
   lo que se le dé de más va a parar a la observación, que es la única columna
   elástica. El 96vw manda en pantallas estrechas. */
dialog:has(.dcab) { max-width: min(96vw, 980px); }