/* ── Estilo BASE compartido de TODAS las tablas de SIMA ─────────────────────────────
   Todo por TEMA ACTIVO (var(--...)). Aplica: header sticky, zebra sutil, separadores,
   hover, celdas en una sola línea (nowrap) y encabezados ordenables. La tabla va dentro
   de un contenedor .sima-tbl-wrap que SCROLLEA horizontal cuando no cabe (no colapsa).   */

.sima-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

.sima-tbl { width: 100%; min-width: 100%; border-collapse: collapse; white-space: nowrap; font-size: .82rem; }

.sima-tbl thead th {
    text-align: left; padding: 8px 11px; border-bottom: 1px solid var(--glass-border);
    color: var(--text-muted); font-weight: 700; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .4px; white-space: nowrap;
    position: sticky; top: 0; z-index: 1; background: var(--win-pop, rgba(20, 20, 30, .97));
}
.sima-tbl thead th.sortable { cursor: pointer; user-select: none; }
.sima-tbl thead th.sortable:hover { color: var(--text-main); }
.sima-tbl thead th .srt { opacity: .3; margin-left: 3px; }
.sima-tbl thead th.sorted .srt { opacity: 1; color: var(--accent); }

.sima-tbl tbody td { padding: 8px 11px; vertical-align: middle; border-bottom: 1px solid color-mix(in srgb, var(--text-main) 7%, transparent); }
.sima-tbl tbody tr.zebra td { background: color-mix(in srgb, var(--text-main) 3.5%, transparent); }
.sima-tbl tbody tr:hover td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sima-tbl tbody tr.tbl-daysep td { border-bottom: 1px solid var(--glass-border); padding: 9px 8px 4px; font-weight: 700; color: var(--accent); }

/* ── v2: columna LARGA ──────────────────────────────────────────────────────
   Envuelve el contenido en <div class="long" title="texto completo"> dentro del <td>
   (el max-width en el propio <td> lo IGNORA table-layout:auto; un elemento interno sí
   lo respeta): baja a 2 LÍNEAS con «…» en vez de estirar la tabla. El texto entero sale
   en el tooltip del title. Si aun así no cabe, el .sima-tbl-wrap sigue scrolleando
   horizontal. Ej.: <td><div class="long" title="${full}">${full}</div></td> */
.sima-tbl .long {
    max-width: 280px; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
}
/* GUARDA (2026-09-26, desniveles en Consultorios): un .long puesto en el PROPIO <td>/<th> le quita
   display:table-cell → esa celda deja de medir como la fila y sus bordes se desalinean. Se le
   devuelve su naturaleza de celda (sin recorte); el recorte va SIEMPRE en un elemento interno.
   Todas las celdas de una fila: mismo alto, mismo borde, centradas en vertical. */
.sima-tbl td.long, .sima-tbl th.long { display: table-cell; max-width: none; -webkit-line-clamp: unset; line-clamp: unset; }
/* Misma guarda para cualquier td/th: nada de flex/grid/block en la celda misma (los botones y chips van
   en un <div> interno). Las reglas de data-prio/data-fit (más específicas) siguen pudiendo ocultarla. */
.sima-tbl > tbody > tr > td, .sima-tbl > thead > tr > th { display: table-cell; }

/* ── Responsividad por CONTENEDOR (data-w del cuerpo de ventana/pestaña, lo fija windows.js con un
   ResizeObserver; NO viewport, NO container-type). Prioridad de columnas con data-prio 1|2|3: la 1
   nunca se oculta; la 3 se oculta en 'sm'; la 2 y la 3 en 'xs'. Relleno y alto de fila compactos en
   angosto. .sima-cell-sub = segunda línea DENTRO de la celda principal (plan · monto · fecha…), que
   solo aparece cuando se ocultan sus columnas, para no perder el dato. Scroll horizontal = último
   recurso (el .sima-tbl-wrap sigue estando). ────────────────────────────────────────────────── */
[data-w="sm"] .sima-tbl th[data-prio="3"], [data-w="sm"] .sima-tbl td[data-prio="3"] { display: none; }
[data-w="xs"] .sima-tbl th[data-prio="2"], [data-w="xs"] .sima-tbl td[data-prio="2"],
[data-w="xs"] .sima-tbl th[data-prio="3"], [data-w="xs"] .sima-tbl td[data-prio="3"] { display: none; }
/* data-fit (windows.js, por desborde REAL de la tabla en su wrap, a cualquier data-w). */
.sima-tbl[data-fit="3"] th[data-prio="3"], .sima-tbl[data-fit="3"] td[data-prio="3"],
.sima-tbl[data-fit="2"] th[data-prio="3"], .sima-tbl[data-fit="2"] td[data-prio="3"],
.sima-tbl[data-fit="2"] th[data-prio="2"], .sima-tbl[data-fit="2"] td[data-prio="2"] { display: none; }
.sima-tbl[data-fit] .sima-cell-sub.at-sm, .sima-tbl[data-fit="2"] .sima-cell-sub.at-xs { display: block; }
[data-w="sm"] .sima-tbl td, [data-w="sm"] .sima-tbl th { padding: 6px 8px; }
[data-w="xs"] .sima-tbl td, [data-w="xs"] .sima-tbl th { padding: 5px 7px; font-size: .8rem; }
/* La subline vive en la celda principal, oculta por defecto; se muestra cuando el ancho esconde sus
   columnas (sm oculta prio3, xs oculta prio2+3). Cada .sima-cell-sub declara desde qué nivel aparece. */
.sima-cell-sub { display: none; font-size: .72rem; color: var(--text-muted); margin-top: 2px; line-height: 1.35; }
[data-w="sm"] .sima-tbl .sima-cell-sub.at-sm,
[data-w="xs"] .sima-tbl .sima-cell-sub.at-sm,
[data-w="xs"] .sima-tbl .sima-cell-sub.at-xs { display: block; }

/* Contenedor PLANO para tablas (reemplaza la glass-card anidada: card dentro de card). Borde 1px,
   sin blur ni doble sombra; la tabla controla su propia densidad. Densidad uniforme por data-w. */
.sima-flatcard { border: 1px solid var(--win-border); border-radius: 12px; background: var(--win-bg); overflow: hidden; }
.sima-flatcard > .sima-tbl-wrap { border: 0; border-radius: 0; }
/* Pie de tabla (contador / cargar más) uniforme. */
.sima-tbl-foot { display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-size: .82rem; color: var(--text-muted); flex-wrap: wrap; border-top: 1px solid var(--win-border); }