/* ═══════════════════════════════════════════════════════════════════════════
   DENSIDAD DE LAS LISTAS  ·  una sola hoja para TODOS los shells del sistema
   (ERP, Academia, Coach, Barber, Personal).

   Las filas venían con 12 px de padding vertical y texto de 14 px, y el dato
   secundario (código, teléfono, badges) bajaba a un segundo renglón: ~64 px por
   fila. Acá se comprime a la MITAD y el detalle pasa a ir en la misma línea, así
   una fila entra en un solo renglón salvo casos raros (un nombre larguísimo).

   Va en CSS y no tabla por tabla a propósito: son decenas de listas repartidas en
   cinco shells; acá se cambia en un lugar y alcanza también a las que vengan.
   El !important es necesario porque el padding lo pone una utilidad de Tailwind
   (.py-3) escrita en cada fila, con la misma especificidad.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Encabezado ── */
table.w-full > thead > tr > th {
  padding: 5px 10px !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  letter-spacing: .015em;
}

/* ── Celdas ── */
table.w-full > tbody > tr > td {
  padding: 4px 10px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}
/* La celda vacía ("Sin productos…") conserva su aire: no es una fila de datos.
   El pie de paginación TAMBIÉN usa colspan, así que se excluye: si no, quedaba más alto
   que la tabla entera. */
table.w-full > tbody > tr:not(.pg-row) > td[colspan] {
  padding-top: 26px !important;
  padding-bottom: 26px !important;
}
/* Pie de paginación: su div reparte «Mostrando…» y los botones con justify-between; en
   línea se encogería al contenido y quedaría todo amontonado a la izquierda. */
table.w-full > tbody > tr.pg-row > td { padding: 5px 10px !important; }
table.w-full > tbody > tr.pg-row > td > div {
  display: flex !important;
  width: 100%;
  margin-left: 0 !important;
}

/* ── El detalle secundario deja de bajar de renglón ──
   Es lo que hacía que casi toda fila ocupara dos líneas: el nombre en un bloque y
   debajo el código/teléfono/badges. Ahora van uno al lado del otro. */
table.w-full > tbody > tr > td > div,
table.w-full > tbody > tr > td > p {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* :not(:first-child) y no "div + div": hay celdas donde el detalle sigue a un NODO DE TEXTO
   («${descripcion}<div>${categoría}</div>»), y ahí un selector de hermanos no aplica: el
   texto quedaba pegado al de al lado («Pago de luzServicios»). */
table.w-full > tbody > tr > td > div:not(:first-child),
table.w-full > tbody > tr > td > p:not(:first-child) {
  margin-left: 7px !important;
}
/* Lo que el propio código marcó como "block" dentro de una celda (una segunda línea
   suelta) también se alinea al lado. */
table.w-full > tbody > tr > td span.block {
  display: inline !important;
  margin-left: 6px;
}
/* Excepción: lo que ocupa el ancho a propósito (una barra de progreso, un campo que
   llena la celda) sigue siendo bloque; ponerlo en línea lo encogería al contenido. */
table.w-full > tbody > tr > td > div.w-full,
table.w-full > tbody > tr > td > div.flex-1,
table.w-full > tbody > tr > td > div[class*="h-1"],
table.w-full > tbody > tr > td > div[class*="h-2"] {
  display: block !important;
  width: 100%;
  margin-left: 0 !important;
}

/* ── Tipografías internas: todo baja un escalón ── */
table.w-full > tbody > tr > td .text-xs { font-size: 10.5px !important; line-height: 1.25 !important; }
table.w-full > tbody > tr > td .text-sm { font-size: 12px !important; line-height: 1.3 !important; }
table.w-full > tbody > tr > td .text-\[10px\],
table.w-full > tbody > tr > td .text-\[11px\] { font-size: 9.5px !important; }

/* ── Badges / pastillas de estado: más chicas y sin engordar la fila ── */
table.w-full > tbody > tr > td .rounded-full,
table.w-full > tbody > tr > td .rounded {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}

/* ── Controles dentro de una fila (botones chicos, selects, inputs) ──
   Los botones de ÍCONO (cuadrados, con el ícono centrado por grid) quedan fuera: meterles
   padding lateral les deforma la caja y el ícono se sale del borde. */
table.w-full > tbody > tr > td button:not(.kbb):not([class*="place-items-center"]) {
  padding: 3px 9px !important;
  font-size: 11px !important;
}
/* Botón de ícono dentro de una fila: se achica de forma proporcional, sin deformarse. */
table.w-full > tbody > tr > td button[class*="place-items-center"] {
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
}
table.w-full > tbody > tr > td button[class*="place-items-center"] svg {
  width: 15px !important;
  height: 15px !important;
}
table.w-full > tbody > tr > td input,
table.w-full > tbody > tr > td select {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  font-size: 11.5px !important;
}
table.w-full > tbody > tr > td input[type="checkbox"] { padding: 0 !important; }

/* ── LA PÍLDORA NUMÉRICA (.npill) SE AUTOGESTIONA ────────────────────────────
   Las reglas de acá arriba son para controles SUELTOS de fila y le destrozan la caja:
     · `button { padding: 3px 9px !important }` sobre un botón de 18x10 con box-sizing
       border-box deja la caja de contenido en 0x4px. La pista del grid arranca entonces en
       x=9 y el SVG queda con su centro 5px a la derecha y 1px abajo del centro del fondo
       de :hover — literalmente «la flecha no está centrada en el resaltado». El :not() de
       esa regla intenta excluir los botones de ícono buscando la cadena «place-items-center»
       en el atributo class, y .nstep centra por CSS, no por clase de utilidad: se le escapa.
     · `input { font-size: 11.5px !important; padding-top/bottom: 2px !important }` le cambia
       el tamaño del número (11,5px contra los 14px del sufijo «%», que es un span y no le
       aplica) y le suma 4px de alto, descuadrando la fila contra la pila de flechas.
   Se eximen las dos, con más especificidad y !important porque es contra !important. */
table.w-full > tbody > tr > td .npill button.nstep {
  padding: 0 !important; width: 18px !important; height: 10px !important; font-size: inherit !important;
}
table.w-full > tbody > tr > td .npill button.nstep svg { width: 10px !important; height: 6px !important; }
table.w-full > tbody > tr > td .npill input {
  padding: 0 !important; font-size: .875rem !important; line-height: 1.25rem !important;
}

/* ── Los tres puntos: SIN borde, en todo el sistema ──
   La clase .kbb la llevan los botones de acciones; :has() cubre además cualquiera
   que se agregue después sin acordarse de la clase (el ícono son tres círculos). */
.kbb,
button:has(> svg > circle + circle + circle) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.kbb:hover,
button:has(> svg > circle + circle + circle):hover {
  background: rgba(100, 116, 139, .12) !important;
}
table.w-full > tbody > tr > td .kbb { padding: 2px !important; }

/* ── Pie de la lista (paginación) ── */
.lista-pie, table.w-full + div {
  font-size: 11.5px;
}

/* ── En el teléfono, ningún campo por debajo de 16px ──────────────────────────
   Safari en iPhone hace zoom automático al enfocar un campo cuya letra mide menos de 16px,
   y después no vuelve: la página queda agrandada y corrida. Las reglas de arriba achican
   los controles metidos en una fila de tabla (11,5px sueltos, 14px en la píldora) y ganan
   por especificidad a la regla general del móvil, así que hay que repetirla acá con la
   misma forma. En el teléfono la tabla ya no es una tabla —cada fila es una tarjeta—, así
   que el tamaño chico no ahorra nada. */
@media (max-width: 820px) {
  table.w-full > tbody > tr > td .npill input,
  table.w-full > tbody > tr > td input,
  table.w-full > tbody > tr > td select { font-size: 16px !important; }
}

/* ══ TABLA CONTABLE ═════════════════════════════════════════════════════════
   El modelo elegido para TODAS las tablas del sistema, definido UNA vez acá porque
   listas.css lo cargan los cinco shells (administrativo, academia, personal, coach y
   barber). Tocarlo en un solo sitio es lo que hace que no se desincronicen.

   La idea del modelo: la tabla no vive dentro de una tarjeta. La cabecera se apoya en una
   línea gruesa, las filas en la más fina posible, y todo el peso visual queda para las
   cifras. Se lee mejor cuando hay que sumar con la vista, y entran más filas en pantalla.

   Se estiliza POR DESCENDENCIA (`.tblc thead th`) y no clase por clase: hay más de
   cincuenta tablas repartidas en cinco archivos, y varias escriben su <thead> a mano.
   Alcanzando al descendiente, las de a mano quedan cubiertas sin tocarlas.

   Las líneas ENTRE FILAS se dejan como están (divide-y de cada tabla): ya son de un gris
   mínimo y redefinirlas obligaría a ganarle por !important a una regla de Tailwind. */
:root{
  /* La raya bajo la cabecera. Era #0f172a: casi negra, y de 2px. Se veía como un tajo
     encima de la tabla y no pegaba con nada más del sistema, que separa con gris fino. */
  --tblc-regla:#e2e8f0;
  --tblc-tenue:#94a3b8;                 /* el texto de la cabecera */
  --tblc-hover:rgba(15,23,42,.035);
}
html.dark, html.theme-glass{
  --tblc-regla:rgba(255,255,255,.13);
  --tblc-tenue:#8b8799;
  --tblc-hover:rgba(255,255,255,.035);
}

/* El envoltorio: ya no dibuja tarjeta, solo permite el desplazamiento lateral. Sin el
   `>` a proposito: en las tablas de orden el mismo div lleva las dos clases. */
.tblc-scroll{ overflow-x:auto }

.tblc table{ width:100% }
.tblc thead th{
  text-align:left; font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.085em; color:var(--tblc-tenue); background:transparent;
  padding:0 1rem .5rem; white-space:nowrap;
  border-bottom:1px solid var(--tblc-regla);
}
/* Varias tablas escriben su <thead> a mano y le cuelgan un `border-b` al <tr>. Esa linea
   se apaga: la regla del modelo es la de 2px sobre el <th>, y las dos juntas dibujan dos
   rayas pegadas. Gana por especificidad (0,1,2 contra 0,1,0), sin !important. */
.tblc thead tr{ border-bottom-width:0 }
.tblc thead th.text-right{ text-align:right }
.tblc thead th.text-center{ text-align:center }
.tblc tbody td{ padding:.62rem 1rem }
.tblc tbody tr:hover > td{ background:var(--tblc-hover) }

/* El pie de totales cierra con doble raya, como un libro mayor. */
.tblc tfoot td{
  padding:.75rem 1rem 0; font-weight:700; white-space:nowrap;
  border-top:1px solid var(--tblc-regla);
  border-bottom:3px double var(--tblc-regla);
}

/* Una fila con campos dentro (la orden de venta a medio armar, la compra) necesita más
   aire que una de solo lectura: la píldora numérica mide 30px de alto y con el padding de
   lectura quedaba pegada a la línea de arriba y a la de abajo. */
.tblc tbody td:has(input, select, .npill){ padding-top:.4rem; padding-bottom:.4rem }

/* ── El saldo del alumno, editable en la propia celda ───────────────────────────
   Se ve como el número que era, no como un formulario: sin caja ni borde hasta que
   uno lo toca. La academia arrastra saldos torcidos de la migración y necesitaba
   corregirlos de a uno sin abrir nada. */
.cob-sal{
  width:96px; text-align:right; font-weight:600; font-size:.875rem;
  background:transparent; border:1px solid transparent; border-radius:9px;
  padding:3px 7px; margin-right:-7px; cursor:text;
  transition:border-color .12s, background .12s;
}
.cob-sal:hover{border-color:rgba(100,116,139,.28)}
.cob-sal:focus{
  outline:none; border-color:#8B5CF6; background:#fff;
  box-shadow:0 0 0 3px rgba(139,92,246,.14);
}
html.theme-glass .cob-sal:focus{background:#241f3d}
.cob-sal:disabled{opacity:.5; cursor:progress}

/* TEMPORAL · marca de «saldo corregido a mano».
   Sirve para ver de un vistazo, mientras se ordena la cartera vieja, a quien ya se le
   reviso el saldo. Se quita —esta regla y la clase que la usa— cuando termine esa pasada. */
.cob-sal-fix{
  background:rgba(139,92,246,.20);
  box-shadow:inset 0 0 0 1px rgba(139,92,246,.55);
}
html.theme-glass .cob-sal-fix{background:rgba(167,139,250,.26);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.6)}