/*
 * css/components/tree-table.css — Tabla jerárquica compartida (js/core/tree-table.js).
 *
 * 19-oct: extraída de layer-activity.css (antes clases la-*) para que la usen Actividad por capa e Incidents.
 * Color de acento de la tabla: --tt-c (por defecto el de la capa, --lc, o el acento general); el de la flecha,
 * --tt-ct. Criterios de docs/Dashboard_style_*.md §10: letra mínima 12 px, números a la derecha en monoespaciada,
 * la tabla se desliza dentro de su caja, encabezado y primera columna fijos.
 */
.tt-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 4px 0 10px; }
.tt-head h4 { margin: 0; font-size: 0.95rem; }
.tt-head select { padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 0.82rem; }
.tt-head .lang-toggle { margin: 0; }
.tt-hint { color: var(--text-dim); font-size: 0.78rem; margin: -4px 0 8px; }

.tt-box { --tt-c: var(--lc, var(--accent)); --tt-bg: var(--surface);
  max-height: 60vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.tt-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.tt-table th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--text-dim); font-weight: 600;
  text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); cursor: pointer; white-space: nowrap; user-select: none; }
.tt-table th[data-sort="asc"]::after { content: ' ▲'; font-size: 0.75rem; }
.tt-table th[data-sort="desc"]::after { content: ' ▼'; font-size: 0.75rem; }
.tt-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
/* primera columna fija al deslizar a lo ancho (con el fondo del nivel para que no se transparente) */
.tt-table > tbody > .tt-tr > td:first-child { position: sticky; left: 0; z-index: 1; background: var(--tt-bg); white-space: nowrap; }
.tt-table > thead th:first-child { left: 0; z-index: 3; }
.tt-table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-table th.num { font-family: var(--font); }
.tt-table .na { color: var(--text-dim); }
.tt-tr.openable { cursor: pointer; }
.tt-tr.openable:hover { background: color-mix(in srgb, var(--tt-c) 7%, transparent); }
.tt-tr.openable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tt-chev { display: inline-block; width: 1em; color: var(--tt-ct, var(--lct, var(--tt-c))); transition: transform .15s; }
.tt-tr.is-open .tt-chev { transform: rotate(90deg); }
.tt-detail > td { --tt-bg: color-mix(in srgb, var(--tt-c) 4%, var(--surface));
  padding: 6px 0 10px 18px; background: var(--tt-bg); }
.tt-detail .tt-table th { position: static; }
.tt-table a { color: var(--accent-text); text-decoration: none; font-weight: 700; }

.tt-skel { height: 14px; border-radius: 6px; margin: 8px 0; background: linear-gradient(90deg, var(--surface-2), var(--border), var(--surface-2)); background-size: 200% 100%; animation: tt-shimmer 1.2s infinite; }
@keyframes tt-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .tt-skel { animation: none; } .tt-chev { transition: none; } }
.tt-empty, .tt-loading { color: var(--text-dim); font-size: 0.85rem; padding: 10px 4px; }
.tt-err { color: var(--err); font-size: 0.85rem; padding: 10px 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }