/* =====================================================================
   FRAME CANONICO .tbl de la VISTA TABLA (fuente UNICA compartida).
   Calca 1:1 de la maqueta assets/app.css. Referencia = Unidades Privadas
   (DistribucionPanel). TODOS los modulos vista-tabla apuntan aqui su header,
   fila, footer y drag de columnas; los prefijos per-modulo (.zc-/.dtab-/.utb-/
   .ea-/...) se migran a estas .tbl-*. Tokens --propia-* (los mismos de la
   maqueta); cero hex. Light + dark salen solos por token.
   NO duplicar estas reglas en los CSS per-modulo: si algo no calza, se arregla
   AQUI para que cambie en todos a la vez. Referencia de citas: HANDOFF-TABLA-UNIDADES.md.
   ===================================================================== */

/* ---- Contenedor + scroll (el FAB flota sobre el wrap; el scroll lleva la tabla) ---- */
.tblwrap { position:relative; background:var(--propia-bg-card); border:1px solid var(--propia-border-card); border-radius:8px; overflow:hidden; box-shadow:var(--propia-shadow-card); }
.tblscroll { overflow:auto; max-height:calc(100vh - 300px); overflow-anchor:none; }

.tbl { width:100%; border-collapse:separate; border-spacing:0; min-width:max-content; }

/* ---- Header: sticky vertical + separadores de columna NOTORIOS (solo header) ----
   El LOOK del header se comparte por DOS vias para una sola fuente de verdad:
   - .tbl thead th  -> tablas reales con el frame .tbl (Unidades, la referencia).
   - .tbl-hdcell    -> clase reutilizable para modulos que NO reescriben su estructura
     (pseudo-tablas flex/grid o <table> propias): se la ponen a sus celdas de header y
     heredan EXACTO el mismo TRATAMIENTO visual (el padding lo mantiene cada modulo,
     alineado a su cuerpo). .tbl-hdcell--plain = sin separador (expander/acciones). */
/* TRATAMIENTO visual compartido (sin padding: el padding horizontal lo pone cada
   modulo para que la celda de header quede ALINEADA con su columna de cuerpo; forzar
   el de Unidades donde el cuerpo tiene otra geometria correria el texto = se ve roto). */
/* Peso 600 + color text-h1: calca EXACTA del header de la maqueta (assets/app.css); antes 700 + secondary. */
.tbl thead th, .tbl-hdcell { position:sticky; top:0; z-index:6; background:var(--propia-bg-table-head); text-align:left; font-size:11.5px; font-weight:600; letter-spacing:.4px; color:var(--propia-text-h1); text-transform:uppercase; border-bottom:1px solid var(--propia-border-card); white-space:nowrap; user-select:none; }
/* Altura de header homogenea en todo el sistema: 47px (= Unidades). Se fija con height + padding
   vertical 0; el contenido se centra (vertical-align middle). Clampa las tablas que quedaban en 55px
   (Contratos/PQRSD/Roles) a 47 sin tocar Unidades (ya ~47). */
.tbl thead th { cursor:pointer; padding:0 16px; height:47px; vertical-align:middle; }  /* Unidades: ordena al clic */
.tbl thead th, .tbl-hdcell { border-right:1px solid var(--propia-border-card); box-shadow:inset -1px 0 0 var(--propia-border-card); }
/* Excepciones sin separador: seleccion, +columna y la ultima. El EXPANDER SI lleva separador: es el
   divisor que aisla el bloque de controles (checkbox + expander) de la 1a columna de datos, homogeneo
   en todos los modulos (decision Alex 2026-10-08). La seleccion queda limpia (una sola linea, tras el
   expander). */
.tbl thead th.tbl-sel, .tbl thead th.tbl-addcol, .tbl thead th:last-child,
.tbl-hdcell.tbl-hdcell--plain, .tbl-hdcell:last-child { border-right:0; box-shadow:none; }

/* ---- Flecha de configuracion del campo. En Unidades: SIEMPRE visible (no solo hover). ---- */
.tbl thead th.tbl-th--menu { padding-right:30px; }  /* sin position:relative: rompe el sticky; el sticky del th es el contenedor de la flecha absoluta */
.tbl-th-edit { position:absolute; top:50%; right:12px; transform:translateY(-50%); border:0; background:transparent; color:var(--propia-text-muted); cursor:pointer; padding:3px; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; opacity:1; transition:background .12s, color .12s; }
.tbl-th-edit:hover { color:var(--propia-brand); background:var(--propia-brand-soft); }
.tbl-th-edit svg, .tbl-th-edit i { font-size:14px; }
.tbl-th-lbl { pointer-events:none; }
/* indicador de orden (flecha up/down) junto al label */
.tbl-th-arrow { margin-left:4px; font-size:9px; color:var(--propia-brand); }

/* ---- Ajuste de ancho por arrastre + reordenar por arrastre ---- */
.tbl thead th[draggable="true"] { cursor:grab; }
.tbl-col-rz { position:absolute; top:0; right:0; width:9px; height:100%; cursor:col-resize; }
.tbl-col-rz::after { content:''; position:absolute; top:20%; right:3px; width:2px; height:60%; background:transparent; border-radius:2px; }
.tbl-col-rz:hover::after { background:var(--propia-brand); }
.tbl thead th.tbl-th-over { box-shadow:inset 3px 0 0 var(--propia-brand); }

/* ---- Cuerpo ---- */
.tbl tbody td { padding:11px 16px; border-bottom:1px solid var(--propia-border-divider); font-size:13px; color:var(--propia-text-body); white-space:nowrap; }
.tbl tbody tr:hover td { background:var(--propia-bg-hover); }
.tbl .c { text-align:center; }
.tbl .cod { font-weight:700; color:var(--propia-brand-text); }
.tbl .nom { font-weight:600; color:var(--propia-text-h1); }
.tbl .mut { color:var(--propia-text-muted); }
.tbl .sin { color:var(--propia-text-faint); font-style:italic; }

/* Celda editable inline (input/select "fantasma" que llena la celda; borde brand + glow al foco). */
.tbl-cell { width:100%; box-sizing:border-box; border:1.5px solid transparent; background:transparent; border-radius:8px; padding:6px 8px; margin:-6px -8px; font-size:13px; color:var(--propia-text-body); font-family:inherit; outline:none; transition:background .12s, border-color .12s, box-shadow .12s; }
.tbl-cell:hover { background:var(--propia-bg-hover); }
.tbl-cell:focus, .tbl-cell:focus-visible { background:var(--propia-bg-card); border-color:var(--propia-brand); box-shadow:0 0 0 3px rgba(109,79,227,.14); }
.tbl-cell-num { text-align:right; }
/* chip de valor de un campo tipo lista/seleccion (con su color) */
.tbl-chip { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:700; }
/* Celda de PROPIETARIO editable inline: nombre actual + selector de persona para asignar/cambiar. */
.tbl-prop { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tbl-prop-nom { font-size:13px; color:var(--propia-text-body); }

/* ---- Filas de grupo (agrupacion N-niveles) ---- */
.tbl-grp td { background:var(--propia-brand-soft-2); font-weight:700; font-size:11.5px; color:var(--propia-brand-text-2); text-transform:none; }
.tbl-grp .n { color:var(--propia-text-faint); font-weight:700; margin-left:8px; }
.tbl-grp2 td { background:var(--propia-bg-card-soft); font-size:11px; }

/* ---- Columna de seleccion ---- */
/* Ancho RIGIDO 38px (min=max): en tablas reales con table-layout:auto + width:100%, un solo
   width:38px es una SUGERENCIA y el auto-layout la encoge ~0.8px cuando la tabla se estira (p.ej.
   Roles, pocas columnas). Con min+max fijos el checkbox mide 38px EXACTO en todo el sistema (= Unidades). */
.tbl th.tbl-sel, .tbl td.tbl-sel { width:38px; min-width:38px; max-width:38px; text-align:center; padding:0 4px; }
.tbl-chk { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.tbl-chk input { width:16px; height:16px; accent-color:var(--propia-brand); cursor:pointer; margin:0; }

/* ---- Columna expander (abre la ficha; aparece al hover de la fila) ---- */
.tbl th.tbl-exp, .tbl td.tbl-exp { width:34px; min-width:34px; max-width:34px; text-align:center; padding:0 4px; }
/* 26x26 (padding 6 + icono 14) radius 7: calca del expander de la maqueta; antes 22x22 radius 6. */
.tbl-exp-btn { border:0; background:transparent; color:var(--propia-text-muted); cursor:pointer; padding:6px; border-radius:7px; display:inline-flex; }
.tbl-exp-btn:hover { color:var(--propia-brand); background:var(--propia-brand-soft); }
.tbl tbody tr:not(.newrow) .tbl-exp-btn { opacity:0; transition:opacity .12s, background .12s; }
.tbl tbody tr:not(.newrow):hover .tbl-exp-btn, .tbl tbody tr:not(.newrow) .tbl-exp-btn:focus-visible { opacity:1; }

/* ---- Columna "+ crear campo" (sticky a la derecha) ---- */
.tbl th.tbl-addcol, .tbl td.tbl-addcol { position:sticky; right:0; background:var(--propia-bg-card); width:76px; text-align:center; padding:0 4px; }
/* Celda de solo lectura (ej. AGRUPACION derivada: Individual / Principal) */
.tbl-ro { padding:6px 8px; font-size:13px; color:var(--propia-text-body); white-space:nowrap; }
.tbl thead th.tbl-addcol { background:var(--propia-bg-table-head); }
.tbl tbody tr:hover td.tbl-addcol { background:var(--propia-bg-hover); }
.tbl tr.newrow td.tbl-addcol { background:var(--propia-bg-card); }
.tbl-addcol-btn { border:0; background:transparent; color:var(--propia-text-muted); cursor:pointer; padding:4px; border-radius:6px; }
.tbl-addcol-btn:hover { color:var(--propia-brand); background:var(--propia-brand-soft); }

/* ---- Fila recien creada: resaltada hasta el proximo refresco (violeta, al aire del alta inline) ---- */
.tbl tbody tr.tbl-row-new > td { background:var(--propia-brand-soft-2); }
.tbl tbody tr.tbl-row-new > td:first-child { box-shadow:inset 3px 0 0 var(--propia-brand); }

/* ---- Centinela de scroll infinito (div despues de la tabla; observable por IntersectionObserver) ---- */
.tbl-inf-sentinel { min-height:1px; display:flex; align-items:center; justify-content:center; gap:6px; text-align:center; color:var(--propia-text-faint); font-size:12px; padding:10px; }
.tbl tbody tr.tbl-inf > td { text-align:center; color:var(--propia-text-faint); font-size:12px; padding:12px; }
.tbl-inf-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--propia-brand); margin-right:6px; vertical-align:middle; animation:tblinf 1s ease-in-out infinite; }
@keyframes tblinf { 0%,100%{ opacity:.3 } 50%{ opacity:1 } }

/* ---- Fila de alta inline (sin botones; nace vacia al final; guarda al blur/Enter) ---- */
.tbl tr.newrow td { background:var(--propia-bg-table-head); border-top:1px solid var(--propia-border-card); }
.tbl tr.newrow--edit td { background:var(--propia-brand-soft-2); }
/* Foco: borde VIOLETA sobre el propio input (abraza el campo), igual que Zonas/Equipos/Residentes.
   Antes era un anillo ::after inset:5px (recuadro flotante mas chico que el input) -> se veia distinto.
   El padding vertical 7px da aire para que la fila de alta respire y el glow 3px NO se recorte contra el
   borde de la fila (antes padding:0 -> gap 1px -> sombra violeta cortada; ahora gap ~8px como Zonas). */
.tbl tr.newrow td.nf-cell { padding:7px 4px; position:relative; }
.nf-in { width:100%; box-sizing:border-box; border:1px solid transparent; border-radius:8px; background:transparent; padding:10px 12px; font-size:13px; color:var(--propia-text-body); font-family:inherit; outline:none; transition:border-color .12s, box-shadow .12s; }
.nf-in:focus { border:1.5px solid var(--propia-brand); box-shadow:0 0 0 3px rgba(109,79,227,.14); }
.nf-in::placeholder { color:var(--propia-text-faint); }
.nf-mut { padding:10px 12px; font-size:12px; color:var(--propia-text-faint); font-style:italic; }
/* boton "+ Agregar registro" en linea (fila al final) */
.row-add--sm { display:inline-flex; align-items:center; gap:5px; background:var(--propia-brand-soft); border:1px solid var(--propia-brand-border); color:var(--propia-brand); padding:8px 10px 8px 12px; font-size:12px; font-weight:700; border-radius:8px; cursor:pointer; font-family:inherit; }
.row-add--sm:hover { background:var(--propia-brand-soft-3); border-color:var(--propia-brand); }

/* ---- Boton FLOTANTE crear registro (esquina inferior IZQUIERDA; aparece cuando el de linea no se ve) ---- */
.tbl-fab { position:absolute; left:16px; bottom:16px; z-index:6; display:inline-flex; align-items:center; gap:7px; padding:10px 15px; border-radius:999px; border:0; background:var(--propia-brand); color:#fff; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; box-shadow:0 8px 20px var(--propia-brand-soft), 0 2px 6px rgba(27,42,58,.18); transition:background .12s, transform .1s, opacity .15s; }
.tbl-fab:hover { background:var(--propia-brand-hover); transform:translateY(-1px); }
.tbl-fab i, .tbl-fab svg { font-size:13px; }
.tbl-fab[hidden] { display:none; }

/* ---- Footer: "N registros - mostrando M" ---- */
.tbl-foot { display:flex; align-items:center; padding:10px 16px; background:var(--propia-bg-table-head); border-top:1px solid var(--propia-border-card); font-size:12.5px; color:var(--propia-text-muted); }
.tbl-foot strong { color:var(--propia-text-body); font-weight:700; }

/* ---- Drag de columnas: fantasma elevado + drop-line (feel pro; compartido por las vistas-tabla). ---- */
/* Toda celda de header arrastrable lleva [data-clave] (el body no); da la pista de "agarrable".
   !important para ganarle al cursor:pointer del header sortable (mismo patron en todos los modulos);
   el resize handle y el chevron conservan su cursor propio (col-resize / pointer). */
[data-clave] { cursor: grab !important; }
.tbl-col-dragging { opacity: .4; }
.tbl-col-ghost { position: fixed; z-index: 9999; pointer-events: none; display: inline-flex; align-items: center; background: var(--propia-bg-card); border: 1px solid var(--propia-brand); border-radius: 8px; box-shadow: 0 8px 22px rgba(27,42,58,.22); padding: 10px 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--propia-brand); white-space: nowrap; }
.tbl-col-dropline { position: fixed; z-index: 9998; width: 2px; background: var(--propia-brand); box-shadow: 0 0 0 2px var(--propia-brand-soft); border-radius: 2px; pointer-events: none; display: none; }

/* ===== Fila-aviso del alta invisible (compartido): "Tab o clic fuera para guardar" ===== */
/* La fila (.X-nf-hintrow) la pone cada modulo con su grid/estructura; aqui solo el contenido. */
.tbl-nf-hintrow { background: var(--propia-brand-soft-2, var(--propia-bg-subtle)); }
.tbl-nf-hintrow:hover { background: var(--propia-brand-soft-2, var(--propia-bg-subtle)); }
.tbl-nf-hintrow > div { padding: 5px 16px; }
.tbl-nf-hint-txt { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--propia-text-faint); letter-spacing: .2px; }
.tbl-nf-hint-sep { opacity: .5; }
.tbl-kbd { display: inline-flex; align-items: center; min-width: 20px; justify-content: center; padding: 1px 6px; border: 1px solid var(--propia-border-card); border-bottom-width: 2px; border-radius: 5px; background: var(--propia-bg-card); color: var(--propia-text-secondary); font-size: 10.5px; font-weight: 700; font-family: inherit; }