/* ═══════════════════════════════════════════════════════════════════════════════
   ORGANIGRAMA — Configuración → Administración (3-oct-2026)
   El mismo lenguaje de Think²: fichas de relleno tenue y sin borde ni sombra, caras redondas, el punto
   del color del área, hojas sobre el velo. Las únicas líneas son las que dicen a quién le reporta cada
   uno: son el contenido, no un marco. Todo va colgado de .org para no tocar nada de la app.
   ═══════════════════════════════════════════════════════════════════════════════ */
.org { margin: 0 0 34px; }
.org .doc-sub { max-width: 760px; }
/* Opaca a propósito: translúcida, donde dos tramos se tocan se pinta dos veces y sale una marca más oscura. */
.org { --org-linea: color-mix(in srgb, var(--texto) 18%, var(--panel)); --org-ficha: var(--panel-2); --org-ficha-hover: var(--realce-fuerte); }

/* EL LIENZO SE NAVEGA COMO EL MAPA DE SINAPSIS (regla del director, 3-oct-2026). Una ventana de alto fijo, sin fondo
   propio (el de la tarjeta), por la que el árbol se mueve y se acerca (la escena lleva la transformación); el borde se
   desvanece con la misma máscara del mapa y se desenfoca con la misma bruma (.mapa-bruma, mapa-cerebro.css), y los
   controles son los suyos (.mapa-controles, .mapa-icono). */
.org-lienzo {
  --org-canto: 64px;
  position: relative; overflow: hidden; height: clamp(380px, 62vh, 720px);
  margin: 4px 0 6px; border-radius: 18px; outline: none;
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
}
.org-lienzo.moviendo { cursor: grabbing; }
.org-lienzo:focus-visible { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--texto) 30%, transparent); }
.org-ventana {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask:
    linear-gradient(to right, transparent, #000 var(--org-canto), #000 calc(100% - var(--org-canto)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--org-canto), #000 calc(100% - var(--org-canto)), transparent);
  mask:
    linear-gradient(to right, transparent, #000 var(--org-canto), #000 calc(100% - var(--org-canto)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--org-canto), #000 calc(100% - var(--org-canto)), transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.org-escena { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.org-escena > .vacio { margin: 24px; }
.org-lienzo .mapa-bruma { z-index: 1; }
.org-lienzo .mapa-controles { z-index: 4; }
.org-lienzo .org-ayuda { z-index: 2; pointer-events: none; }
.org-lienzo:not(:hover):not(:focus-within) .org-ayuda { opacity: 0; transition: opacity .3s var(--ease, ease); }
/* Con el dedo no hay cursor que pase por encima: la ayuda se queda. */
@media (hover: none) { .org-lienzo .org-ayuda { opacity: 1 !important; } }

/* EN GRANDE: sobre la tarjeta de la app, con el fondo de la app y sus esquinas; las hojas (z 200) siguen encima. */
.org-lienzo.org-pantalla {
  position: fixed; z-index: 150; margin: 0;
  top: var(--org-arriba, 0); right: var(--org-der, 0); bottom: var(--org-abajo, 0); left: var(--org-izq, 0);
  height: auto; border-radius: var(--org-radio, 0);
  background: var(--panel);
}
html.org-en-pantalla { overflow: hidden; }
.org-lienzo.org-pantalla .mapa-controles { top: 18px; right: 20px; }

/* ── El árbol: listas anidadas y sus conectores ── */
.org-arbol, .org-arbol ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center;
}
.org-arbol { width: max-content; margin: 0; }
.org-arbol ul { position: relative; padding-top: 22px; }
.org-arbol li {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 22px 7px 0;
}
.org-arbol > li { padding-top: 0; }
/* La barra que une a los hermanos y el palo que baja a cada uno */
.org-arbol ul > li::before, .org-arbol ul > li::after {
  content: ''; position: absolute; top: 0; width: 50%; height: 22px;
  border-top: 1.5px solid var(--org-linea);
}
.org-arbol ul > li::before { right: 50%; }
.org-arbol ul > li::after { left: 50%; border-left: 1.5px solid var(--org-linea); }
.org-arbol ul > li:only-child::before { display: none; }
.org-arbol ul > li:only-child::after { border-top: 0; left: 50%; width: 0; }
.org-arbol ul > li:first-child::before, .org-arbol ul > li:last-child::after { border-top: 0; }
.org-arbol ul > li:last-child::before { border-right: 1.5px solid var(--org-linea); border-radius: 0 12px 0 0; }
/* El último baja por la curva de su ::before: su palo recto sobraba y salía al lado de la curva (3-oct-2026). */
.org-arbol ul > li:last-child:not(:only-child)::after { display: none; }
.org-arbol ul > li:first-child::after { border-radius: 12px 0 0 0; }
.org-arbol ul > li:only-child::after { border-radius: 0; }
/* El palo que baja del jefe hasta la barra de sus hermanos */
.org-arbol ul::before {
  content: ''; position: absolute; top: 0; left: 50%; height: 22px; border-left: 1.5px solid var(--org-linea);
}

/* ── La ficha ── */
.org-ficha {
  position: relative; width: 128px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 10px 12px; border: 0; border-radius: 18px;
  background: var(--org-ficha); color: var(--texto); font: inherit; text-align: center; cursor: pointer;
  transition: background var(--rapido, .18s) var(--ease, ease), transform var(--rapido, .18s) var(--ease, ease), opacity var(--rapido, .18s) var(--ease, ease), box-shadow var(--rapido, .18s) var(--ease, ease);
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
.org-ficha img { -webkit-user-drag: none; }
.org-ficha:hover { background: var(--org-ficha-hover); }
.org-ficha:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--texto) 55%, transparent); }
.org-ficha:active { transform: scale(.97); }
.org-cara-caja { position: relative; display: inline-flex; margin-bottom: 5px; }
.org-ficha .org-cara { width: 44px; height: 44px; font-size: 17px; }
.org-ficha .org-cara > img, .org-cara-caja .chat-agente-avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.org-cara-caja .chat-agente-avatar.con-foto { overflow: hidden; }
/* Un colaborador lleva su marca de IA en la esquina de la cara, como el punto de presencia en Mensajes. */
.org-ia {
  position: absolute; right: -5px; bottom: -3px; padding: 1px 4px 0; border-radius: 6px;
  font-size: 8.5px; font-weight: 700; letter-spacing: .04em; line-height: 13px;
  background: var(--contraste); color: var(--contraste-texto);
  box-shadow: 0 0 0 2px var(--org-ficha);
}
.org-ficha:hover .org-ia { box-shadow: 0 0 0 2px var(--panel-2); }
.org-ficha .org-nombre { font-size: 12.5px; font-weight: 600; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-ficha .org-nombre em { font-style: normal; font-weight: 500; color: var(--texto-suave); }
.org-cargo {
  font-size: 11px; line-height: 1.3; color: var(--texto-suave); max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.org-area { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 10.5px; color: var(--texto-suave); }
.org-area i { width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--texto-suave)); flex: none; }
/* Lo confidencial: un candado pequeño en la esquina, sin color de alarma. */
.org-candado { position: absolute; top: 9px; right: 10px; width: 13px; height: 13px; color: var(--texto-suave); opacity: .8; }
.org-candado svg, .org-cat-icono svg { width: 100%; height: 100%; display: block; }
/* La cabeza y tú se reconocen sin cambiar la forma de la ficha. */
.org-ficha.es-cabeza { background: var(--realce-fuerte); }
.org-ficha.es-cabeza:hover { background: color-mix(in srgb, var(--texto) 18%, transparent); }

/* El racimo: los que no tienen a nadie debajo, juntos bajo su jefe. */
.org-racimo {
  display: grid; grid-template-columns: repeat(var(--cols, 3), 128px); gap: 8px;
  padding: 10px; border-radius: 24px; background: color-mix(in srgb, var(--texto) 4%, transparent);
}
.org-racimo .org-ficha { background: var(--org-ficha); }
.org-racimo .org-ficha:hover { background: var(--org-ficha-hover); }

/* ── Arrastrar ── */
.org-lienzo.editable .org-ficha:not(.es-cabeza), .org-lienzo.editable.mueve-cabeza .org-ficha { cursor: grab; }
.org-lienzo.arrastrando .org-ficha { cursor: grabbing; }
.org-lienzo.arrastrando .org-ficha:not(.org-puede):not(.org-origen) { opacity: .35; }
.org-ficha.org-origen { opacity: .25; }
/* Al arrastrar: la línea que tendrá con su jefe nuevo, y bajo la ficha a quién le reportará. */
.org-sombra-linea { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 299; pointer-events: none; overflow: visible; }
.org-sombra-linea path { fill: none; stroke: color-mix(in srgb, var(--texto) 55%, transparent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 6; }
.org-sombra-linea circle { fill: color-mix(in srgb, var(--texto) 70%, transparent); }
.org-sombra-rotulo {
  position: fixed; left: 0; top: 0; z-index: 301; pointer-events: none; transform: translateX(-50%);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap; font-size: 12px;
  background: var(--contraste); color: var(--contraste-texto, var(--fondo));
}
.org-sombra-rotulo:empty { display: none; }
.org-ficha.org-destino { background: var(--org-ficha-hover); box-shadow: 0 0 0 2px color-mix(in srgb, var(--texto) 80%, transparent); transform: scale(1.04); }
.org-fantasma {
  position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; margin: 0;
  opacity: .92; transform-origin: 50% 50%; rotate: -2deg;
  /* Fuera de .org sus variables no existen: sin esto el clon salía sin fondo. Y sin transición, o va tarde al cursor. */
  --org-ficha: var(--panel-2); --org-ficha-hover: var(--realce-fuerte);
  transition: none;
}

.org-aviso { min-height: 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.org-aviso .aviso { margin: 0; }
.org-deshacer, .org-enlace {
  border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--texto);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

.org-estado { margin: 4px 0 6px; max-width: 760px; }
.org-estado .org-enlace { font-size: inherit; }

/* La conversación que el organigrama no deja abrir: el motivo, en el sitio del hilo. */
.msj-vacio.msj-cerrado { max-width: 420px; margin-inline: auto; }
/* …y en esa conversación cerrada no hay caja para escribir ni ficha que mirar: solo el motivo. */
.msj-layout.msj-sin-acceso #msj-form { display: none; }
.msj-layout.msj-sin-acceso #msj-miembros > * { visibility: hidden; }
/* Una ficha no abre nada al tocarla: se arrastra (si puedes editar) y su título dice quién es. */
.org-lienzo .org-ficha { cursor: default; -webkit-touch-callout: none; }
.org-lienzo.editable .org-ficha:not(.es-cabeza), .org-lienzo.editable.mueve-cabeza .org-ficha { cursor: grab; }