/*
    Vista de ORGANIGRAMA de los tipos de estructura (pestaña «Organigrama» de
    Vormansys.Web.Client/Pages/TiposEstructura.razor).

    ══ POR QUÉ ESTO ES UNA HOJA ESTÁTICA DEL HOST Y NO UN TiposEstructura.razor.css ══
    NO lo "mejores" de vuelta a CSS aislado (.razor.css): ya estuvo así y NO LLEGABA AL NAVEGADOR.
    Causa comprobada (2026-07-29): con el SDK 9.x, el CSS aislado de un proyecto CLIENTE WASM
    referenciado por el host viaja como un @import dentro de Vormansys.Web.styles.css que apunta a
    un archivo con HUELLA en el nombre (Vormansys.Web.Client.XXXXXXXXXX.bundle.scp.css). Esa huella
    cambia con cada edición del CSS, pero el proceso servidor (UseStaticFiles + manifiesto de static
    web assets) resuelve las rutas con el manifiesto que cargó AL ARRANCAR, y el <link> del bundle
    no lleva cache-busting: tras cualquier rebuild sin reiniciar el servidor (o con el bundle viejo
    cacheado por el navegador) el @import da 404 SILENCIOSO y ninguna regla de la página llega al
    DOM (síntoma: viñetas de lista visibles y tipos apilados en vertical). Un archivo físico en
    wwwroot/ se sirve directo del disco, sin manifiesto ni huella: inmune a todo eso.
    Contrapartida asumida: aquí no hay atributo de ámbito (b-...), así que TODO selector debe vivir
    bajo las clases raíz propias .vms-organigrama-* / .vms-og para no contaminar el resto de la app.

    Es un organigrama de empresa de verdad, no una lista indentada: cada <ul> de hijos es una FILA
    (display:flex; flex-direction:row; justify-content:center) centrada debajo de su padre, y cada
    <li> es una COLUMNA (tarjeta arriba, y debajo el <ul> de sus propios hijos). Esa pareja de reglas
    es todo el truco del layout; el ancho de la tarjeta es FIJO (nunca 100%), que es lo que evita que
    el árbol degenere en tarjetas apiladas de ancho completo.

    Los conectores son ortogonales y de 1px, dibujados con bordes de pseudo-elementos:
      - .vms-og ul ul::before  → la línea vertical que BAJA del padre hasta la barra de reparto.
      - li::before / li::after → las dos mitades de la barra HORIZONTAL de reparto; ::after además
        lleva el border-left que BAJA hasta la tarjeta del hijo.
      - :first-child / :last-child apagan solo el COLOR del tramo horizontal sobrante (no el borde
        entero) para no quedarse sin la bajada; :only-child quita la barra completa.
    Las alturas de esos tramos y los paddings que les hacen sitio se comparten por variables
    (--og-salto, --og-enganche), así que no puede volver a quedar media línea colgando por descuadre.

    Además, cada CAMADA (el <ul> de hijos de un mismo padre) va encerrada en un marco fino y
    redondeado del color de línea del tema, para que los hijos de un padre no se confundan con los
    de su hermano cuando comparten fila; el detalle está comentado sobre la regla .vms-og ul ul.

    Todo el color sale del TEMA de MudBlazor (--mud-palette-*), que es el tema por organización: nada
    de colores quemados. La jerarquía se lee por PROFUNDIDAD: la cúspide en el color de acento, el
    segundo nivel en tono oscuro y de ahí para abajo tarjetas claras con una barra de acento a la
    izquierda.
*/

.vms-organigrama-contenedor {
    --og-ancho-tarjeta: 11.5rem;
    --og-salto: 1.25rem;
    --og-separacion: .55rem;
    --og-enganche: .4rem;
    --og-linea: var(--mud-palette-lines-default, rgba(0, 0, 0, .3));
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: .25rem .25rem 1rem .25rem;
    max-width: 100%;
}

/* Varias raíces (datos sucios: tipos sin padre, con padre inexistente o en ciclo) = árboles
   independientes, uno al lado del otro. width:max-content para que el scroll horizontal sea del
   contenedor y la página nunca se desplace de lado. */
.vms-organigrama-raices {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2.5rem;
    width: max-content;
    min-width: 100%;
}

/* --- Esqueleto del árbol --- */

.vms-og ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
}

.vms-og li {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    list-style: none;
    position: relative;
    padding: var(--og-salto) var(--og-separacion) 0 var(--og-separacion);
}

/* La raíz no cuelga de nadie: sin hueco para conectores arriba. */
.vms-og > ul > li {
    padding-top: 0;
}

/* Los <ul> de hijos (nivel 1 en adelante) reservan el tramo vertical que baja del padre y además
   llevan un MARCO fino y redondeado que encierra a la CAMADA completa (pedido del usuario: agrupar
   con líneas sólidas a los hijos de cada padre, para que no se confundan con los hijos del tío).
   El marco usa el mismo color de línea del tema (--og-linea → --mud-palette-lines-default), así que
   se adapta solo al modo oscuro y no mete color nuevo; los marcos se anidan (la camada de un hijo
   queda dentro del marco de la de su padre) y esa cascada es justamente lo que hace legible el
   nivel más profundo. Sin fondo de relleno: solo línea, para no ensuciar el organigrama. */
.vms-og ul ul {
    position: relative;
    margin-top: var(--og-enganche);
    padding: var(--og-salto) .45rem .45rem .45rem;
    border: 1px solid var(--og-linea);
    border-radius: 6px;
}

/* La bajada del padre ahora ARRANCA en la tarjeta del padre (por encima del marco: top negativo,
   cruzando el hueco --og-enganche y el borde de 1px) y muere en la barra de reparto, dentro del
   marco. Si se toca --og-enganche o el grosor del borde, este calc los sigue solo. */
.vms-og ul ul::before {
    content: '';
    position: absolute;
    top: calc(0px - var(--og-enganche) - 1px);
    left: 50%;
    width: 0;
    height: calc(var(--og-enganche) + 1px + var(--og-salto));
    border-left: 1px solid var(--og-linea);
}

/* Barra horizontal de reparto (dos mitades) + bajada a la tarjeta del hijo. */
.vms-og ul ul > li::before,
.vms-og ul ul > li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    width: 50%;
    height: var(--og-salto);
    border-top: 1px solid var(--og-linea);
}

.vms-og ul ul > li::after {
    right: auto;
    left: 50%;
    border-left: 1px solid var(--og-linea);
}

/* Extremos: se apaga el COLOR del tramo horizontal sobrante, no el borde, para conservar la bajada. */
.vms-og ul ul > li:first-child::before,
.vms-og ul ul > li:last-child::after {
    border-top-color: transparent;
}

/* Hijo único: no hay nada que repartir, basta la bajada del ::before del <ul>. */
.vms-og ul ul > li:only-child::before,
.vms-og ul ul > li:only-child::after {
    display: none;
}

.vms-og ul ul > li:only-child {
    padding-top: 0;
}

/* --- Tarjetas --- */

.vms-og__tarjeta {
    box-sizing: border-box;
    width: var(--og-ancho-tarjeta);
    min-width: var(--og-ancho-tarjeta);
    max-width: var(--og-ancho-tarjeta);
    padding: .4rem .55rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, .2));
    border-radius: 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-align: left;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    transition: box-shadow .12s ease, opacity .12s ease;
}

/* Cúspide: color de acento de la organización. */
.vms-og__tarjeta--n0 {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-color: var(--mud-palette-primary);
}

/* Segundo nivel: tono oscuro. */
.vms-og__tarjeta--n1 {
    background: var(--mud-palette-dark);
    color: var(--mud-palette-dark-text);
    border-color: var(--mud-palette-dark);
}

/* De ahí para abajo: tarjeta clara con barra de acento a la izquierda. */
.vms-og__tarjeta--n2 {
    border-left: 4px solid var(--mud-palette-secondary);
}

.vms-og__tarjeta--clicable {
    cursor: pointer;
}

/* Sin touch-action:none el navegador se queda el gesto para hacer scroll y el arrastre con el dedo
   nunca llega a verse. Solo se pone donde el arrastre está permitido, para no matar el scroll
   táctil de quien mira el organigrama en solo lectura. */
.vms-og__tarjeta--arrastrable {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.vms-og__tarjeta--inactivo {
    opacity: .55;
}

.vms-og__tarjeta--anomalo {
    border-color: var(--mud-palette-warning);
}

.vms-og__tarjeta--origen {
    opacity: .45;
    outline: 2px dashed var(--mud-palette-primary);
    outline-offset: 2px;
}

.vms-og__tarjeta--destino {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .06);
}

.vms-og__tarjeta--vetado {
    outline: 2px dashed var(--mud-palette-error);
    outline-offset: 2px;
    cursor: not-allowed;
}

.vms-og__cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .15rem;
}

.vms-og__nombre {
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.15;
    word-break: break-word;
}

.vms-og__sub {
    display: block;
    margin-top: .1rem;
    font-size: .68rem;
    line-height: 1.2;
    opacity: .75;
    word-break: break-word;
}

.vms-og__acciones {
    display: flex;
    align-items: center;
    gap: .1rem;
    flex: 0 0 auto;
}

.vms-og__etiqueta {
    display: inline-block;
    margin-top: .2rem;
    padding: 0 .3rem;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: .62rem;
    line-height: 1.35;
    opacity: .8;
}

.vms-og__nota {
    margin-top: .25rem;
    font-size: .65rem;
    line-height: 1.25;
    color: var(--mud-palette-warning);
    word-break: break-word;
}

.vms-og__mover-aqui {
    margin-top: .3rem;
}