/* WP1 · Tabla de Clientes estilo Notion. Todo cuelga de .nx-nt (la tabla de Clientes del equipo en pantallas de compu).
   Medidas: encabezado 36, fila 37, líneas finas entre celdas, hover suave, etiquetas de nx-base.css. En celular no se usa (queda la tabla de siempre). */
.tabla.nx-nt { overflow: auto; scrollbar-width: thin; }
.tabla.nx-nt .th, html .tabla.nx-nt .tr { display: grid; grid-template-columns: var(--cols); align-items: stretch; gap: 0; padding: 0; width: max-content; min-width: 100%; box-sizing: border-box; font-size: var(--fs); }
.tabla.nx-nt .th { height: var(--nx-h-th); min-height: var(--nx-h-th); border-bottom: 1px solid var(--nx-linea); background: var(--surface); color: var(--mute); font-weight: 400; letter-spacing: 0; text-transform: none; }
html .tabla.nx-nt .tr { height: var(--nx-h-fila); min-height: var(--nx-h-fila); border-top: 0; border-bottom: 1px solid var(--nx-linea); color: var(--ink); }
html .tabla.nx-nt .tr:hover { background: var(--nx-hover); }
html .tabla.nx-nt .tr:focus-visible { outline: 2px solid var(--nx-azul); outline-offset: -2px; }

.nx-nt .nx-th, .nx-nt .nx-td { position: relative; display: flex; align-items: center; min-width: 0; box-sizing: border-box; border-right: 1px solid var(--nx-linea); }
.nx-nt .nx-th { gap: 7px; padding: 0 8px 0 6px; white-space: nowrap; }
.nx-nt .nx-td { padding: 0 8px; white-space: nowrap; overflow: hidden; }
.nx-nt .nx-fin, .nx-nt .nx-th-fin { border-right: 0; }
.nx-nt .nx-th-fin { justify-content: flex-end; padding: 0 6px; }
.nx-nt .nx-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 19px; height: 19px; color: var(--mute); }
.nx-nt .nx-ico svg { display: block; }
.nx-nt .nx-th-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nx-nt .nx-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-nt .nx-mut { color: var(--mute); }
.nx-nt .nx-td-estudio { gap: 8px; }
.nx-nt .nx-td-estudio .nx-ico { width: 16px; }
.nx-nt .nx-td-estudio .nx-t b { font-weight: 600; }
.nx-nt .nx-td-estudio .nx-t .nx-mut { margin-left: 8px; font-weight: 400; }
.nx-nt .nx-tag { margin-right: 0; }
/* «Cerrados este mes»: solo el número (maqueta «Propuesto»): 1,25 rem, peso 700, cifras de ancho fijo, sin barra ni raya de meta */
.nx-nt .nx-num { font-size: 1.25rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }

/* botón ABRIR al pasar el mouse (como el «OPEN» de Notion); la fila entera ya es el enlace */
.nx-nt .nx-abrir { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--nx-linea); background: var(--surface); color: var(--mute); font-size: 11px; font-weight: 600; letter-spacing: .04em; opacity: 0; pointer-events: none; transition: opacity .08s; box-shadow: var(--nx-sombra-chica); }
.nx-nt .nx-abrir svg { width: 13px; height: 13px; }
html .tabla.nx-nt .tr:hover .nx-abrir, html .tabla.nx-nt .tr:focus-visible .nx-abrir { opacity: 1; }
@media (hover: none) { .nx-nt .nx-abrir { display: none; } }

/* asa para agrandar o achicar: 8 px sobre el borde derecho de cada encabezado (= borde izquierdo del siguiente); línea azul al pasar el mouse */
.nx-nt .nx-rs { position: absolute; top: 0; bottom: 0; right: -4px; width: 8px; z-index: 2; cursor: col-resize; touch-action: none; }
.nx-nt .nx-rs::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; background: transparent; transition: background .1s; }
.nx-nt .nx-rs:hover::after, .nx-nt .nx-rs.on::after { background: var(--nx-azul); }
body.nx-rs-activo, body.nx-rs-activo * { cursor: col-resize !important; user-select: none !important; }
/* para autoajustar: cada celda toma su ancho natural un instante (no se llega a pintar) */
.nx-nt.nx-medir .nx-th, .nx-nt.nx-medir .nx-td { width: max-content; justify-self: start; overflow: visible; }
.nx-nt.nx-medir .nx-t, .nx-nt.nx-medir .nx-th-t { overflow: visible; }

/* botón de Propiedades (ojo), al final del encabezado */
.nx-nt .nx-props-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--nx-radio-ctrl); background: transparent; color: var(--mute); cursor: pointer; }
.nx-nt .nx-props-btn:hover, .nx-nt .nx-props-btn[aria-expanded=true] { background: var(--nx-hover); color: var(--ink); }
.nx-nt .nx-props-btn:focus-visible { outline: 2px solid var(--nx-azul); outline-offset: 1px; }

/* menú Propiedades (dentro de .nx-menu, anclado al ojo) */
.nx-pr-menu { padding: 0; display: flex; flex-direction: column; }
.nx-pr-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 12px 6px; }
.nx-pr-cab b { font-size: var(--fs); font-weight: 600; }
.nx-pr-cab span { font-size: var(--fs-chico); color: var(--mute); }
.nx-pr-lista { list-style: none; margin: 0; padding: 0 6px 4px; }
.nx-pr-fila { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 4px; border-radius: var(--nx-radio-ctrl); }
.nx-pr-fila:hover { background: var(--nx-hover); }
.nx-pr-fila.arrastra { background: var(--nx-azul-bg); box-shadow: inset 0 0 0 1px var(--nx-azul); }
.nx-pr-fila.oculta .nx-pr-n, .nx-pr-fila.oculta .nx-pr-ic { opacity: .5; }
.nx-pr-asa { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 28px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--dim); cursor: grab; touch-action: none; }
.nx-pr-asa:hover:not(.quieta) { color: var(--ink); background: var(--nx-hover); }
.nx-pr-asa:active { cursor: grabbing; }
.nx-pr-asa.quieta { cursor: default; opacity: .5; }
.nx-pr-ic { display: inline-flex; flex: none; width: 19px; color: var(--mute); }
.nx-pr-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-pr-ojo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--nx-radio-ctrl); background: transparent; color: var(--ink); cursor: pointer; }
.nx-pr-ojo:hover:not(:disabled) { background: var(--nx-hover); }
.nx-pr-ojo:disabled { opacity: .35; cursor: not-allowed; }
.nx-pr-fila.oculta .nx-pr-ojo { color: var(--dim); }
.nx-pr-asa:focus-visible, .nx-pr-ojo:focus-visible, .nx-pr-todo:focus-visible { outline: 2px solid var(--nx-azul); outline-offset: 1px; }
.nx-pr-pie { display: flex; gap: 6px; padding: 6px; border-top: 1px solid var(--nx-linea); }
.nx-pr-todo { flex: 1; height: 30px; padding: 0 10px; border: 0; border-radius: var(--nx-radio-ctrl); background: var(--nx-hover); color: var(--ink); font: inherit; font-size: var(--fs-chico); font-weight: 500; cursor: pointer; }
.nx-pr-todo:hover:not(:disabled) { background: var(--nx-azul-bg); }
.nx-pr-todo:disabled { opacity: .4; cursor: not-allowed; }