/* ============================================================================
brand-2.css — CONTINUACIÓN del sistema de diseño de Deglia (split de brand.css).
Se carga JUSTO DESPUÉS de brand.css en TODOS los HTML → mismo orden de cascada
(los componentes de acá estaban al final de brand.css). Byte-idéntico en efecto.
Separado para respetar archivos <=600 líneas (regla nº0-ter).
Contiene: 16) TOOLTIP · 17) AVATAR · 19) CHECKBOX · 18) ICONOS · banner impersonación · KPI cross-filter.
============================================================================ */
/* ---------------------------------------------------------------------------
16) TOOLTIP (catálogo #17) — UN tooltip canónico, liviano, por atributo [data-tip]
+ CSS puro (sin JS). Poné data-tip="texto" en cualquier elemento; aparece arriba al
hover/focus. data-tip-pos="bottom" lo baja. Estética del kit (panel + line + sombra).
--------------------------------------------------------------------------- */
/* Burbuja SUTIL: compacta, padding/radio suaves, sombra ligera, wrap a 240px. Oscuro suave (no un
ladrillo negro) con texto claro → legible en tema claro y oscuro. Aparece ARRIBA por defecto; flip
a ABAJO con data-tip-pos="bottom". El z-index alto + al hover subimos el stacking del ancla para que
NUNCA quede tapada por botones/filas siguientes. */
[data-tip]{position:relative}
[data-tip]:hover,[data-tip]:focus-visible{z-index:1201}
[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 7px);
transform:translateX(-50%) translateY(3px);background:var(--tip-bg);color:var(--tip-fg);
border:1px solid var(--tip-bd);border-radius:var(--r-sm);padding:5px 9px;font-size:var(--fs-xs);
font-weight:600;line-height:1.4;white-space:normal;width:max-content;max-width:240px;text-align:center;
box-shadow:0 4px 14px rgba(15,18,25,.18);
opacity:0;pointer-events:none;z-index:1200;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
/* burbuja oscura SUAVE con texto claro (contraste alto, sin ser un bloque negro pesado) */
:root,[data-theme=dark]{--tip-bg:#2a2f3a;--tip-fg:#eef1f6;--tip-bd:#3a4150}
[data-theme=light]{--tip-bg:#2b303b;--tip-fg:#f3f5f9;--tip-bd:#2b303b}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
[data-tip][data-tip-pos=bottom]::after{bottom:auto;top:calc(100% + 7px);
transform:translateX(-50%) translateY(-3px)}
[data-tip][data-tip-pos=bottom]:hover::after,[data-tip][data-tip-pos=bottom]:focus-visible::after{
transform:translateX(-50%) translateY(0)}
/* Anti-recorte (FIX): la tooltip por defecto apunta ARRIBA, y dentro de un contenedor con
overflow (tablas .tbwrap) el borde superior la cortaba — se veía a medias en la 1ª fila / los
encabezados. Robustez sin JS:
(a) los ENCABEZADOS de tabla (thead th[data-tip]) apuntan SIEMPRE hacia ABAJO: están arriba de
todo, no hay fila encima que los recorte;
(b) los contenedores de tabla de la sección Usuarios/Roles/Habilidades NO recortan la tooltip
(overflow-x visible en horizontal — no reintroduce scroll — y sin tope de alto), de modo que
cualquier fila (incluida la primera) muestra la burbuja completa;
(c) z-index alto para que quede por encima de encabezados sticky y filas siguientes. */
thead th[data-tip]::after{bottom:auto;top:calc(100% + 7px);transform:translateX(-50%) translateY(-3px)}
thead th[data-tip]:hover::after,thead th[data-tip]:focus-visible::after{transform:translateX(-50%) translateY(0)}
/* Wrappers de tablas de la sección: sin tope de alto ni recorte vertical (la burbuja de la 1ª fila
sale entera). FIX QA 2026-10-07 (Settings→Users: última columna cortada fuera de la card): el
shorthand "overflow:visible" de acá pisaba el scroll horizontal que el comentario de arriba decía
que se preservaba -- no existía NINGÚN otro ".usrtbl{overflow-x:auto}" en el CSS, así que una matriz
con muchas columnas (roles×usuarios) simplemente desbordaba la card sin forma de llegar al resto.
overflow-x:auto restaura el scroll horizontal; overflow-y:visible mantiene el fix de la tooltip. */
.usrwrap .tbwrap,.usrmx.tbwrap,.usrtbl{overflow-x:auto;overflow-y:visible;max-height:none}
/* ---------------------------------------------------------------------------
17) AVATAR (catálogo #18) — UN avatar canónico: imagen o iniciales sobre acento
suave. Tamaños sm(24)/md(32)/lg(44). Motor: renderAvatar() en ui-kit.js.
--------------------------------------------------------------------------- */
.avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;overflow:hidden;
border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:700;
font-family:var(--font-sans);text-transform:uppercase;line-height:1;user-select:none}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar--sm{width:24px;height:24px;font-size:var(--fs-xs)}
.avatar--md{width:32px;height:32px;font-size:var(--fs-sm)}
.avatar--lg{width:44px;height:44px;font-size:var(--fs-lg)}
/* ---------------------------------------------------------------------------
19) CHECKBOX (catálogo #21) — UN checkbox canónico. Etiqueta clickeable
(`.chk` = label) que envuelve un `` estilado: cajita con
check, estados hover/checked/disabled, color de marca --accent. Motor:
renderCheckbox() en ui-kit.js. Reemplaza checkboxes crudos. Para armar una
lista pareja usar `.chk-grid` (columnas parejas, gap del kit).
--------------------------------------------------------------------------- */
.chk{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--txt);
line-height:1.3;cursor:pointer;user-select:none}
.chk input[type=checkbox]{-webkit-appearance:none;appearance:none;margin:0;flex:none;
width:17px;height:17px;border:1px solid var(--line);border-radius:5px;background:var(--panel2);
cursor:pointer;position:relative;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.chk input[type=checkbox]:hover{border-color:var(--accent)}
.chk input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent)}
.chk input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
/* tilde dibujado por CSS (sin imagen): dos bordes que forman el check */
.chk input[type=checkbox]:checked::after{content:'';position:absolute;left:5px;top:1.5px;
width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.chk input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}
.chk:has(input:disabled){opacity:.6;cursor:not-allowed}
/* grilla prolija de checkboxes: columnas parejas, gap del kit */
.chk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:9px 16px}
/* ---------------------------------------------------------------------------
18) ICONOS (catálogo #14) — UN set curado de SVG inline. Motor: icon(name) en
ui-kit.js. `.ic-svg` hereda el color (stroke=currentColor) y toma tamaño --ic-sz.
De acá en más, iconos así (no emoji/glifos sueltos). Sumar icono = path en ICONS.
--------------------------------------------------------------------------- */
.ic-svg{width:var(--ic-sz,18px);height:var(--ic-sz,18px);vertical-align:middle;flex:none}
/* ---------------------------------------------------------------------------
19) BANNER DE IMPERSONACIÓN ("Ver como") — franja superior en la PESTAÑA que está
viendo el tablero como otra persona. Color de acento del tenant (no hardcodear),
con botón canónico "Salir". Solo aparece en la pestaña impersonada (per-tab bearer).
--------------------------------------------------------------------------- */
.impbanner{display:flex;align-items:center;justify-content:space-between;gap:12px;
background:var(--accent);color:#fff;padding:4px 14px;font-size:var(--fs-sm,12px);
font-weight:700;text-align:left;position:relative;z-index:60}
.impbanner .btn.soft{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff}
.impbanner .btn.soft:hover{background:rgba(255,255,255,.28)}
/* 20) KPI cross-filter (.kpi-x) + KPIGRID (.kpigrid): KPI/tarjeta clickeable que filtra o resalta otro visual. */
.kpi-x{cursor:pointer}.kpi-x.on{border-color:var(--accent);box-shadow:0 6px 18px var(--sh)}
.kpigrid .kpi{cursor:pointer}.kpigrid .kpi.sel{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink) inset}
/* QA 2026-10-10 (Socios): .kpis.kpigrid hereda el grid de .kpis (sin align-items -> default stretch); con 3
tarjetas de contenido corto (nombre + 2 valores) en la misma fila, CSS Grid las estiraba parejo a la altura
que fuera (209px vs ~95px de contenido real), dejando un hueco enorme debajo de cada una. */
.kpis.kpigrid{align-items:start}
.kpigrid .kpi .val.pos{color:var(--pos)}.kpigrid .kpi .val.neg{color:var(--neg)}
/* ---------------------------------------------------------------------------
21) OUTLINE / ÁRBOL JERÁRQUICO DRAG-AND-DROP (catálogo #25, docs/UI-KIT.md)
UN árbol editable (como un explorador de archivos): filas FLAT indentadas por profundidad
(--d, CSS var inline por fila), con drag-and-drop nativo (motor: attachOutline() en
static/js/ui-tree.js) para reordenar hermanos (soltar en el tercio superior/inferior de una
fila) y anidar/desanidar (soltar en el tercio central = mete como hijo del target; soltar en
la `.outline-rootzone` al pie = sube a nivel raíz, al final). El contenido de cada fila (label,
selector de tipo, controles) lo arma quien llama — este bloque es solo el CHROME del árbol.
--------------------------------------------------------------------------- */
.outline{display:flex;flex-direction:column;gap:0;margin-top:4px}
.outline-row{position:relative;display:flex;align-items:center;gap:8px;background:var(--panel2);
border:1px solid var(--line);border-radius:var(--r-md);padding:7px 9px;margin:0 0 6px calc(var(--d,0) * 22px);
transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.outline-row.off{opacity:.55}
.outline-row.drag{opacity:.35}
.outline-row.drop-before::before,.outline-row.drop-after::after{content:'';position:absolute;left:0;right:0;
height:2px;background:var(--brand);border-radius:2px}
.outline-row.drop-before::before{top:-4px}
.outline-row.drop-after::after{bottom:-4px}
.outline-row.drop-into{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,var(--panel2))}
.outline-guide{position:absolute;top:-6px;bottom:-6px;left:-11px;width:0;border-left:2px dashed var(--line);flex:none}
.outline-grip{cursor:grab;color:var(--mut);flex:none;user-select:none;line-height:1;padding:2px 3px}
.outline-grip:active{cursor:grabbing}
.outline-caret{flex:none;display:flex;align-items:center;justify-content:center;width:18px;height:18px;
color:var(--mut);cursor:pointer;background:none;border:none;padding:0}
.outline-caret svg{transition:transform .15s}
.outline-caret.collapsed svg{transform:rotate(-90deg)}
.outline-caret.leaf{visibility:hidden}
.outline-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.outline-main input.field{width:100%}
.outline-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.outline-meta select.field,.outline-meta .dd-trigger{padding:5px 8px;font-size:var(--fs-sm);width:auto}
.outline-actions{display:flex;align-items:center;gap:5px;flex:none}
.outline-rootzone{height:16px;border-radius:var(--r-md);margin-left:0}
.outline-rootzone.drop-into{border:1px dashed var(--brand);background:color-mix(in srgb,var(--brand) 8%,transparent)}
tr.tr-hl>td{background:color-mix(in srgb,var(--pink) 14%,transparent);transition:background .3s ease}
/* ---------------------------------------------------------------------------
DROPDOWN canónico (catálogo #9, docs/UI-KIT.md) — motor en ui-dropdown.js. Reemplaza el popup
nativo del