/* public/css/organigrama.css — v102/v103: el organigrama de plantilla.
 *
 * v103: las cajas ya NO se posicionan con listas anidadas. Las coordenadas
 * salen de lib/organigramaLayout.js (servido como /js/organigrama-layout.js),
 * el mismo archivo que usa el PDF; la pantalla pone cada caja en absoluto
 * con --x/--y y dibuja los conectores en un SVG. Aqui solo hay aspecto.
 *
 * Solo tokens --ec-*. Nada de HEX, nada de px sueltos fuera de la escala.
 */

.org-arbol{overflow:auto;padding:var(--ec-space-2) 0 var(--ec-space-6);-webkit-overflow-scrolling:touch;cursor:grab;user-select:none}
.org-arbol.org-agarrado,.org-arbol.org-espacio,.org-arbol.org-espacio .org-nodo{cursor:grabbing}   /* v106: lienzo agarrado */
.org-arbol.org-agarrado .org-nodo{pointer-events:none}
.org-arbol:focus-visible{outline:2px solid var(--ec-focus);outline-offset:2px}
.org-lienzo{position:relative;width:var(--w);height:var(--h);margin:0 auto}
.org-conectores{position:absolute;left:0;top:0;pointer-events:none}
.org-conectores polyline{fill:none;stroke:var(--ec-border-strong);stroke-width:1}

/* ── La caja ── */
/* 184 x 76: las medidas de MEDIDAS_PANTALLA del layout. Si cambian alla, cambian aqui. */
.org-nodo{position:absolute;left:var(--x);top:var(--y);width:184px;height:var(--h,76px);display:flex;flex-direction:column;justify-content:space-between;padding:var(--ec-space-2) var(--ec-space-3);background:var(--ec-surface);border:1px solid var(--ec-border);border-radius:var(--ec-radius-md);box-shadow:var(--ec-shadow-sm);text-align:left;transition:box-shadow var(--ec-dur-fast) var(--ec-ease-standard),border-color var(--ec-dur-fast) var(--ec-ease-standard)}
.org-nodo.nivel-0{border-color:var(--ec-accent);background:var(--ec-selected)}
.org-nodo.nivel-1{border-color:var(--ec-accent)}
.org-nodo.org-por-validar{border-style:dashed;border-color:var(--ec-warning)}
.org-nodo[draggable="true"]{cursor:move}   /* v106: mover = reasignar padre; la mano es del lienzo */
.org-nodo.org-arrastrando{opacity:.45;cursor:grabbing}
.org-nodo.org-destino{border-color:var(--ec-accent);box-shadow:0 0 0 3px var(--ec-selected),var(--ec-shadow-md)}
.org-nodo.org-destino-prohibido{border-color:var(--ec-danger);cursor:not-allowed}
.org-nodo:hover,.org-nodo:focus-within{z-index:5;box-shadow:var(--ec-shadow-md)}

.org-puesto{font-size:12px;font-weight:700;line-height:1.3;color:var(--ec-text);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.org-pie{display:flex;align-items:center;justify-content:space-between;gap:var(--ec-space-1);min-height:22px}
.org-plazas{font-size:12px;color:var(--ec-text-2);white-space:nowrap}
.org-plazas b{font-family:var(--ec-font-mono);font-size:14px;color:var(--ec-text)}
.org-etq{display:inline-flex;align-items:center;gap:var(--ec-space-1);padding:0 var(--ec-space-2);border-radius:var(--ec-radius-full);font-size:10px;font-weight:600;line-height:18px;white-space:nowrap;background:var(--ec-warning-100);color:var(--ec-warning-700)}
[data-theme="dark"] .org-etq{background:var(--ec-warning-900);color:var(--ec-warning-300)}

.org-alterna{display:inline-flex;align-items:center;gap:var(--ec-space-1);padding:0 var(--ec-space-2);min-height:22px;border:1px solid var(--ec-border);border-radius:var(--ec-radius-full);background:transparent;color:var(--ec-text-2);font-family:var(--ec-font-sans);font-size:11px;font-weight:600;white-space:nowrap;cursor:pointer}
.org-alterna:hover{background:var(--ec-hover);color:var(--ec-text)}
.org-alterna:focus-visible,.org-nodo:focus-visible,.org-acciones .btn:focus-visible{outline:2px solid var(--ec-focus);outline-offset:2px}

/* la fila de botones cuelga BAJO la caja y solo aparece al pasar el cursor o
 * al enfocar (teclado); asi la caja se queda compacta. En movil, siempre. */
.org-acciones{display:none;position:absolute;left:0;top:100%;margin-top:var(--ec-space-1);flex-wrap:wrap;gap:var(--ec-space-1);width:max-content;max-width:260px;padding:var(--ec-space-2);background:var(--ec-surface);border:1px solid var(--ec-border);border-radius:var(--ec-radius-md);box-shadow:var(--ec-shadow-md)}
.org-nodo:hover > .org-acciones,.org-nodo:focus-within > .org-acciones{display:flex}
.org-acciones .btn{min-height:32px;min-width:32px;padding:var(--ec-space-1) var(--ec-space-2);font-size:12px;line-height:1}

/* ── v107: resumen por gerencia en la tarjeta del dashboard ── */
.org-gerencias{margin-top:var(--ec-space-2)}
.org-gerencias .tbl td.num,.org-gerencias .tbl th.num{text-align:right;font-family:var(--ec-font-mono)}
.org-gerencia-fila{cursor:pointer}
.org-gerencia-fila:hover td{background:var(--ec-hover)}
.org-gerencia-fila:focus-visible{outline:2px solid var(--ec-focus);outline-offset:-2px}
.org-gerencia-raiz td{color:var(--ec-text-2)}
.org-ocupacion{display:inline-block;vertical-align:middle;width:96px;height:6px;margin-right:var(--ec-space-2);background:var(--ec-bg-subtle);border-radius:var(--ec-radius-full);overflow:hidden}
.org-ocupacion i{display:block;height:100%;background:var(--ec-accent)}
.org-ocupacion.org-excedido i{background:var(--ec-warning)}
.org-ocupacion-pct{font-size:11px;color:var(--ec-text-2);font-family:var(--ec-font-mono)}

/* ── v106: nombres cortos dentro de la caja ── */
.org-pie{margin-top:auto}
.org-nombres{margin:2px 0 0;font-size:11px;line-height:14px;color:var(--ec-text-2);cursor:pointer;border-radius:var(--ec-radius-sm)}
.org-nombres:hover{color:var(--ec-text)}
.org-nombres:focus-visible{outline:2px solid var(--ec-focus);outline-offset:1px}
.org-nombre{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org-nombres-resumen{font-style:italic}

/* ── v105: zoom, ocupacion y el modal de personas ── */
.org-zoom{display:inline-flex;align-items:center;gap:var(--ec-space-1);margin-left:6px}
.org-zoom-rotulo{font-family:var(--ec-font-mono);min-width:56px;text-align:center}
.org-plazas.org-excedido b,.org-modal-resumen.org-excedido b{color:var(--ec-warning-700)}
[data-theme="dark"] .org-plazas.org-excedido b,[data-theme="dark"] .org-modal-resumen.org-excedido b{color:var(--ec-warning-300)}
.org-barra{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ec-bg-subtle);border-radius:0 0 var(--ec-radius-md) var(--ec-radius-md);overflow:hidden}
.org-barra i{display:block;height:100%;background:var(--ec-accent)}
.org-barra.org-excedido i{background:var(--ec-warning)}
.org-etq-baja{background:var(--ec-danger-50);color:var(--ec-danger-700)}
[data-theme="dark"] .org-etq-baja{background:var(--ec-danger-900);color:var(--ec-danger-300)}
#modal-org .modal.org-modal-ancho{max-width:640px}
.org-modal-resumen{margin:0 0 var(--ec-space-3);font-size:13px;color:var(--ec-text-2)}
.org-modal-resumen b{font-family:var(--ec-font-mono);color:var(--ec-text)}
.org-asignados{list-style:none;margin:0;padding:0;max-height:220px;overflow:auto;border:1px solid var(--ec-border);border-radius:var(--ec-radius-sm)}
.org-asignados li{display:flex;align-items:center;gap:var(--ec-space-2);padding:var(--ec-space-2) var(--ec-space-3);border-bottom:1px solid var(--ec-border);font-size:12px;color:var(--ec-text)}
.org-asignados li:last-child{border-bottom:0}
.org-asignados .org-id{font-family:var(--ec-font-mono);font-weight:600}
.org-asignados .org-sub{margin-left:auto;color:var(--ec-text-2);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38%}
.org-asignados .org-baja{color:var(--ec-danger-700);font-weight:600}
[data-theme="dark"] .org-asignados .org-baja{color:var(--ec-danger-300)}
.org-candidatos{width:100%;margin-top:var(--ec-space-2);font-family:var(--ec-font-sans);font-size:12px;color:var(--ec-text);background:var(--ec-surface);border:1px solid var(--ec-border);border-radius:var(--ec-radius-sm)}
.org-aviso-linea{margin-top:var(--ec-space-2);font-size:12px;color:var(--ec-warning-700)}
[data-theme="dark"] .org-aviso-linea{color:var(--ec-warning-300)}
.org-aviso-linea:empty{display:none}
/* v123 cosm. 3: la persona elegida, completa (la <option> se recorta en el telefono). Solo <=768. */
.org-elegido-completo{display:none}
@media(max-width:768px){
  .org-elegido-completo{display:block;margin-top:var(--ec-space-2);font-size:13px;line-height:1.4;color:var(--ec-text);word-break:break-word}
  .org-elegido-completo:empty{display:none}
}

/* ── Resumen y avisos ── */
.org-aviso{display:flex;align-items:flex-start;gap:var(--ec-space-2);padding:var(--ec-space-3) var(--ec-space-4);margin-bottom:var(--ec-space-4);border-left:3px solid var(--ec-accent);border-radius:var(--ec-radius-sm);background:var(--ec-bg-subtle);color:var(--ec-text-2);font-size:12px;line-height:1.5}
.org-aviso.org-aviso-validar{border-left-color:var(--ec-warning)}
.org-modal-error{margin-top:var(--ec-space-3);padding:var(--ec-space-2) var(--ec-space-3);border-radius:var(--ec-radius-sm);background:var(--ec-danger-50);color:var(--ec-danger-700);font-size:12px}
[data-theme="dark"] .org-modal-error{background:var(--ec-danger-900);color:var(--ec-danger-300)}
.org-modal-error:empty{display:none}

/* ── Movil y tablet: lista indentada por nivel, sin arrastre ni conectores ── */
@media(max-width:768px){
  .org-solo-escritorio{display:none!important}   /* gana a .btn (inline en index.html, que carga despues) */
  .org-barra{display:none}   /* v105: en la lista no hay caja de alto fijo */
  .org-arbol{overflow:visible;cursor:default;user-select:text}
  .org-lienzo{width:auto;height:auto}
  .org-conectores{display:none}
  .org-nodo{position:static;width:auto;height:auto;cursor:default;margin:var(--ec-space-2) 0 0 calc(var(--nivel) * var(--ec-space-4));cursor:default}
  .org-nodo[draggable="true"]{cursor:default}
  .org-acciones{display:flex;position:static;margin-top:var(--ec-space-2);width:auto;max-width:none;padding:0;border:0;box-shadow:none;background:transparent}
}