/* ==========================================================================
   INCODAP · Industria · Conexiones
   Diagrama de integración: el sistema a la medida al centro, personas arriba,
   datos abajo, piso a la izquierda, tus sistemas a la derecha y la seguridad
   como frontera punteada que envuelve todo. El rojo solo marca datos en
   movimiento, rutas activas y selección; lo que la planta ya tiene va con
   contorno en tinta y palomita.
   ========================================================================== */

.cx {
    --cx-cable: #c9d0d6;
    --cx-junta: #8e98a1;
    --cx-anillo: #b3bbc2;
    --cx-lateral: clamp(300px, 24vw, 344px);
    display: grid;
    gap: 16px;
}

.cx-tablero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cx-lateral);
    gap: 20px;
    align-items: stretch;
}

/* --------------------------------------------------------------------------
   Lienzo y mapa
   -------------------------------------------------------------------------- */

.cx-lienzo { min-width: 0; padding: 14px 16px 16px; container: cx-lienzo / inline-size; }

.cx-mapa {
    --cx-modo: hub;
    position: relative;
    display: grid;
    grid-template-columns: minmax(140px, 172px) minmax(150px, 1fr) minmax(140px, 172px);
    grid-template-areas:
        "personas personas  personas"
        "piso     centro    sistemas"
        "datos    datos     datos"
        "seguridad seguridad seguridad";
    column-gap: 44px;
    row-gap: 38px;
    padding: 34px 22px 0;
}

.cx-cables {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}

/* Cables, flechas, uniones y paquetes */
.cx-cable {
    fill: none;
    stroke: var(--cx-cable);
    stroke-width: 1.5;
    stroke-linecap: round;
    transition: stroke 200ms ease, opacity 200ms ease, stroke-width 200ms ease;
}
.cx-flecha { fill: #a9b1b8; transition: fill 200ms ease, opacity 200ms ease; }
.cx-puerto { fill: var(--blanco); stroke: #a9b1b8; stroke-width: 1.25; transition: stroke 200ms ease, opacity 200ms ease; }
.cx-junta { fill: var(--cx-junta); }
.cx-paquete { fill: var(--rojo); stroke: var(--blanco); stroke-width: 1.5; }

.cx-arista[data-ruta] .cx-cable { stroke: var(--rojo); stroke-width: 2; }
.cx-arista[data-ruta] .cx-flecha { fill: var(--rojo); }
.cx-arista[data-ruta] .cx-puerto { stroke: var(--rojo); }
.cx-arista[data-atenuada] { opacity: .55; }

/* Sin movimiento: las rutas se ven en rojo, quietas */
.cx--quieto .cx-cable { stroke: var(--rojo); stroke-opacity: .62; }
.cx--quieto .cx-flecha { fill: var(--rojo); fill-opacity: .75; }
.cx--quieto .cx-puerto { stroke: var(--rojo); stroke-opacity: .7; }
.cx--quieto .cx-arista[data-ruta] .cx-cable { stroke-opacity: 1; stroke-width: 2.25; }
.cx--quieto .cx-arista[data-ruta] .cx-flecha { fill-opacity: 1; }
.cx--quieto .cx-arista[data-atenuada] .cx-cable { stroke: var(--cx-cable); stroke-opacity: 1; }
.cx--quieto .cx-arista[data-atenuada] .cx-flecha { fill: #a9b1b8; fill-opacity: 1; }
.cx--quieto .cx-arista[data-atenuada] .cx-puerto { stroke: #a9b1b8; }

/* Frontera de seguridad */
.cx-anillo {
    fill: none;
    stroke: var(--cx-anillo);
    stroke-width: 1.25;
    stroke-dasharray: 5 5;
    transition: stroke 200ms ease;
}
.cx-anillo[data-ruta] { stroke: var(--rojo); stroke-width: 1.5; }

/* --------------------------------------------------------------------------
   Grupos
   -------------------------------------------------------------------------- */

.cx-grupo {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: grid;
    gap: 8px;
    align-content: start;
}

.cx-grupo__titulo {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--display);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    color: var(--tinta);
}
.cx-grupo__titulo .icono { width: 16px; height: 16px; color: var(--tinta-3); }

.cx-grupo__nodos { display: grid; gap: 8px; }

.cx-grupo--piso { grid-area: piso; }
.cx-grupo--sistemas { grid-area: sistemas; }

.cx-grupo--personas,
.cx-grupo--datos { justify-items: center; }
.cx-grupo--personas { grid-area: personas; }
.cx-grupo--datos { grid-area: datos; }
.cx-grupo--datos .cx-grupo__titulo { order: 2; }

/* Con espacio, las filas llevan su título a la izquierda y las columnas arriba */
@container cx-lienzo (min-width: 690px) {
    .cx-grupo--personas,
    .cx-grupo--datos {
        grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr);
        align-items: center;
        column-gap: 16px;
        justify-items: start;
    }
    .cx-grupo--personas .cx-grupo__titulo,
    .cx-grupo--datos .cx-grupo__titulo { grid-column: 1; order: 0; white-space: nowrap; }
    .cx-grupo--personas .cx-grupo__nodos,
    .cx-grupo--datos .cx-grupo__nodos { grid-column: 2; flex-wrap: nowrap; }
}

.cx-grupo--personas .cx-grupo__nodos,
.cx-grupo--datos .cx-grupo__nodos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* Seguridad: el título va sobre la frontera, arriba a la izquierda;
   las piezas se apoyan sobre su borde inferior. */
.cx-grupo--seguridad { grid-area: seguridad; position: static; }
.cx-grupo--seguridad .cx-grupo__titulo {
    position: absolute;
    top: 0;
    left: 14px;
    z-index: 1;
    padding: 0 8px;
    background: var(--blanco);
    font-size: .84rem;
    color: var(--tinta-2);
}
.cx-grupo--seguridad .cx-grupo__nodos {
    display: flex;
    justify-content: space-evenly;
    gap: 12px;
}

/* --------------------------------------------------------------------------
   Piezas
   -------------------------------------------------------------------------- */

.cx-nodo {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .3rem .7rem .3rem .35rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-btn);
    background: var(--blanco);
    box-shadow: 0 1px 2px rgba(20, 24, 28, .04);
    color: var(--tinta);
    text-align: left;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 200ms var(--ease-out), opacity 220ms ease, transform 140ms var(--ease-out);
}
.cx-nodo:active { transform: scale(.97); }
.cx-nodo,
.cx-centro,
.cx .chip,
.cx-cerrar,
.cx-pausa { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cx-nodo:focus-visible { border-radius: var(--radio-btn); }

.cx-nodo__icono {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--nieve);
    color: var(--tinta-2);
    transition: background-color 160ms ease, color 160ms ease;
}
.cx-nodo__icono .icono { width: 17px; height: 17px; }

.cx-nodo__texto { display: grid; min-width: 0; line-height: 1.2; }
.cx-nodo[data-marcable] .cx-nodo__texto { min-width: 4.7rem; }
.cx-nodo__nombre { font-size: .88rem; font-weight: 600; white-space: nowrap; }
.cx-nodo__marca { display: flex; align-items: center; gap: 3px; font-size: .72rem; font-weight: 600; color: var(--tinta); margin-top: 1px; }
.cx-nodo__marca .icono { width: 12px; height: 12px; stroke-width: 2.5; }
.cx-nodo__marca:empty { display: none; }

.cx-grupo--piso .cx-nodo,
.cx-grupo--sistemas .cx-nodo { width: 100%; }

/* Ya lo tienes: contorno en tinta y palomita (tinta sobre blanco, 17:1) */
.cx-nodo[data-tiene] { border-color: var(--tinta); }
.cx-nodo[data-tiene] .cx-nodo__icono { background: var(--nieve); color: var(--tinta); }

/* Elegida */
.cx-nodo[aria-expanded="true"] {
    border-color: var(--rojo);
    box-shadow: inset 0 0 0 1px var(--rojo), 0 6px 16px rgba(212, 32, 26, .14);
}
.cx-nodo[aria-expanded="true"] .cx-nodo__icono { background: var(--rojo); color: #fff; }

/* Fuera de la ruta elegida: se aclara sin perder contraste de texto */
.cx-nodo[data-atenuado] { color: var(--tinta-3); border-color: var(--linea-2); box-shadow: none; }
.cx-nodo[data-atenuado] .cx-nodo__icono { background: var(--nieve-2); color: #a3abb3; }
.cx-nodo[data-atenuado][data-tiene] { border-color: #9aa3ac; }
.cx-nodo[data-atenuado][data-tiene] .cx-nodo__marca { color: var(--tinta-3); }

@media (hover: hover) and (pointer: fine) {
    .cx-nodo:hover { border-color: #c2c9cf; box-shadow: var(--sombra-boton); }
    .cx-nodo[data-tiene]:not([aria-expanded="true"]):hover { border-color: var(--tinta); }
    .cx-nodo:not([aria-expanded="true"]):hover .cx-nodo__icono { background: var(--tinta); color: #fff; }
    .cx-nodo[data-atenuado]:hover { color: var(--tinta); border-color: #c2c9cf; }
}

/* --------------------------------------------------------------------------
   Centro: el sistema a la medida
   -------------------------------------------------------------------------- */

.cx-centro {
    grid-area: centro;
    position: relative;
    z-index: 1;
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: 290px;
    margin-top: 26px;
    display: grid;
    gap: .5rem;
    padding: 1rem 1.1rem 1.05rem;
    border-radius: var(--radio);
    background: var(--tinta);
    color: #fff;
    text-align: left;
    box-shadow: 0 2px 4px rgba(20, 24, 28, .08), 0 18px 40px rgba(20, 24, 28, .18);
    transition: box-shadow 220ms var(--ease-out), transform 140ms var(--ease-out);
}
.cx-centro:active { transform: scale(.985); }
.cx-centro:focus-visible { border-radius: var(--radio); outline-offset: 4px; }

.cx-centro__cabeza { display: flex; align-items: center; gap: .55rem; }
.cx-centro__cabeza .icono { width: 20px; height: 20px; color: #ff6a63; }
.cx-centro__nombre {
    font-family: var(--display);
    font-size: 1.14rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
}
.cx-centro__sub { margin-top: -.3rem; padding-left: calc(20px + .55rem); font-size: .84rem; color: #b4bbc2; }
.cx-centro__lista {
    display: grid;
    gap: .3rem;
    margin-top: .2rem;
    padding-top: .65rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .83rem;
    line-height: 1.35;
    color: #dde1e5;
}
.cx-centro__lista > span { display: flex; align-items: flex-start; gap: .45rem; }
.cx-centro__lista .icono { width: 14px; height: 14px; margin-top: 2px; color: #ff6a63; }
/* Ya lo tienes, sobre el fondo en tinta: contorno blanco y palomita */
.cx-centro__marca {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    justify-self: start;
    margin-top: .2rem;
    padding: .3rem .6rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .72);
    color: #fff;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.3;
}
.cx-centro__marca .icono { width: 13px; height: 13px; stroke-width: 2.25; }
.cx-centro__marca:empty { display: none; }

.cx-centro[aria-expanded="true"] {
    box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px var(--rojo), 0 18px 40px rgba(20, 24, 28, .2);
}
@media (hover: hover) and (pointer: fine) {
    .cx-centro:hover { box-shadow: 0 2px 4px rgba(20, 24, 28, .1), 0 22px 48px rgba(20, 24, 28, .24); }
    .cx-centro[aria-expanded="true"]:hover { box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px var(--rojo), 0 22px 48px rgba(20, 24, 28, .24); }
}

/* --------------------------------------------------------------------------
   Columna lateral: ¿Qué usas hoy? y detalle
   -------------------------------------------------------------------------- */

.cx-lateral { position: relative; min-width: 0; min-height: 0; }
.cx-lateral > .panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 20px 22px;
}
.cx-lateral > [hidden] { display: none; }

.cx .chip { min-height: 44px; max-width: 100%; }
.cx .chip:focus-visible { border-radius: 99px; }

.cx-usas .titulo-3 { font-size: 1.15rem; }
.cx-usas__apoyo { margin-top: .25rem; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: .9rem; }

.cx-resumen { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--linea); }
.cx-resumen__frase {
    font-family: var(--display);
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -.016em;
    line-height: 1.3;
    text-wrap: pretty;
    font-variant-numeric: tabular-nums;
}
.cx-resumen__nota { margin-top: .4rem; font-size: .9rem; color: var(--tinta-2); line-height: 1.45; text-wrap: pretty; }
.cx-resumen__nota:empty { display: none; }

.cx-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.4rem;
    font-size: .84rem;
    color: var(--tinta-2);
}
.cx-leyenda li { display: flex; align-items: center; gap: .6rem; }
.cx-muestra { position: relative; flex: none; width: 28px; height: 16px; }
.cx-muestra--tiene { display: grid; place-items: center; border-radius: 5px; background: var(--blanco); border: 1px solid var(--tinta); color: var(--tinta); }
.cx-muestra--tiene .icono { width: 12px; height: 12px; stroke-width: 2.5; }
.cx-leyenda__tiene { color: var(--tinta); }
.cx-muestra--dato::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1.5px;
    background: var(--cx-cable);
    transform: translateY(-50%);
}
.cx-muestra--dato::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--rojo);
    box-shadow: 0 0 0 1.5px var(--blanco);
    transform: translate(-50%, -50%);
}
.cx--quieto .cx-muestra--dato::before { background: var(--rojo); }
.cx--quieto .cx-muestra--dato::after { display: none; }
/* Pausa del movimiento (WCAG 2.2.2); sin movimiento no hace falta */
.cx-pausa {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: 0 .7rem 0 .55rem;
    margin-left: -.55rem;
    border-radius: var(--radio-chico);
    font-size: .84rem;
    font-weight: 600;
    color: var(--tinta-2);
    transition: background-color 160ms ease, color 160ms ease;
}
.cx-pausa .icono { width: 15px; height: 15px; }
.cx-pausa:focus-visible { border-radius: var(--radio-chico); }
@media (hover: hover) and (pointer: fine) { .cx-pausa:hover { background: var(--linea-2); color: var(--tinta); } }
.cx--quieto .cx-leyenda__pausa { display: none; }
.cx-leyenda { align-items: center; }

.cx-pista { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--linea); }

/* Detalle */
.cx-detalle__cabeza {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: .8rem;
    align-items: center;
}
.cx-detalle__icono {
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--rojo-piso);
    color: var(--rojo);
}
.cx-detalle__icono .icono { width: 22px; height: 22px; }
.cx-detalle__grupo { font-size: .8rem; font-weight: 500; color: var(--tinta-3); line-height: 1.3; }
.cx-detalle .titulo-3 { font-size: 1.2rem; }
.cx-detalle .titulo-3:focus { outline: none; }
.cx-detalle .titulo-3:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; }

.cx-cerrar {
    align-self: start;
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    margin: -6px -10px 0 0;
    border-radius: 10px;
    color: var(--tinta-2);
    transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ease-out);
}
.cx-cerrar:active { transform: scale(.95); }
.cx-cerrar:focus-visible { border-radius: 10px; }
@media (hover: hover) and (pointer: fine) { .cx-cerrar:hover { background: var(--linea-2); color: var(--tinta); } }

.cx-detalle__que { margin-top: .9rem; color: var(--tinta); }

.cx-trato {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .9rem;
    padding: .35rem .75rem .35rem .55rem;
    border-radius: 99px;
    border: 1px solid transparent;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.3;
}
.cx-trato .icono { width: 15px; height: 15px; }
.cx-trato--conserva { background: var(--blanco); border-color: var(--tinta); color: var(--tinta); }
.cx-trato--conserva .icono { color: var(--tinta); }
.cx-trato--agrega,
.cx-trato--neutro { background: var(--nieve); border-color: var(--linea); color: var(--tinta); }
.cx-trato--agrega .icono,
.cx-trato--neutro .icono { color: var(--tinta-3); }
.cx-trato--parte { background: var(--tinta); color: #fff; }
.cx-trato--parte .icono { color: #ff6a63; }
.cx-trato__nota { margin-top: .5rem; font-size: .88rem; color: var(--tinta-2); line-height: 1.45; }

.cx-usa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin-top: 1rem;
    padding: .7rem .8rem;
    border-radius: 12px;
    border: 1px solid var(--linea);
    background: var(--nieve-2);
}
.cx-usa > span { font-size: .88rem; font-weight: 500; color: var(--tinta-2); }

.cx-flujo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.2rem;
    padding-top: 1.05rem;
    border-top: 1px solid var(--linea);
}
.cx-flujo h4,
.cx-como h4 {
    margin-bottom: .45rem;
    font-family: var(--display);
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.cx-flujo .puntos { gap: .4rem; }
.cx-flujo .puntos li { font-size: .88rem; line-height: 1.4; }

.cx-como { margin-top: 1.1rem; }
.cx-como p { font-size: .9rem; color: var(--tinta-2); line-height: 1.5; }

.cx-compat { display: flex; align-items: flex-start; gap: .45rem; margin-top: .8rem; }
.cx-compat .icono { width: 16px; height: 16px; margin-top: 1px; }

.cx-pregunta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    margin-top: .25rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--rojo);
}
.cx-pregunta .icono { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) { .cx-pregunta:hover { color: var(--rojo-alto); text-decoration: underline; text-underline-offset: 3px; } }

/* --------------------------------------------------------------------------
   Pie del módulo
   -------------------------------------------------------------------------- */

.cx-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    padding: 0 4px;
}
.cx-pie__accion { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem 1rem; margin-left: auto; }
.cx-pie__accion p { max-width: 40ch; text-align: right; }

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

/* Mapa angosto: columnas y separaciones más justas, el centro conserva aire */
@container cx-lienzo (max-width: 650px) {
    .cx-mapa {
        grid-template-columns: minmax(132px, 156px) minmax(170px, 1fr) minmax(132px, 156px);
        column-gap: 30px;
        padding-inline: 16px;
    }
    .cx-grupo--personas .cx-grupo__nodos,
    .cx-grupo--datos .cx-grupo__nodos { gap: 8px; }
    .cx-grupo--seguridad .cx-grupo__titulo { left: 8px; }
    .cx-centro { padding: .9rem .9rem .95rem; }
    .cx-centro__lista { font-size: .8rem; }
}

/* Con columna lateral: el detalle reemplaza a "¿Qué usas hoy?" */
@media (min-width: 1081px) {
    .cx[data-seleccion] .cx-usas { display: none; }
}

/* Sin columna lateral: "¿Qué usas hoy?" arriba del diagrama y el detalle flota */
@media (max-width: 1080px) {
    .cx-tablero { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .cx-lateral { order: -1; }
    .cx-lateral > .panel { position: static; overflow: visible; }

    .cx-usas { display: grid; grid-template-columns: minmax(0, 1fr); }

    /* El detalle flotante no debe tapar la pieza con foco */
    .cx[data-seleccion] .cx-nodo,
    .cx[data-seleccion] .cx-centro { scroll-margin-bottom: min(72dvh, 560px); }

    .cx-lateral > .cx-detalle {
        position: fixed;
        inset: auto 16px 16px auto;
        z-index: 45;
        width: min(420px, calc(100vw - 32px));
        max-height: calc(100dvh - var(--barra) - 32px);
        overflow-y: auto;
        box-shadow: var(--sombra-2);
    }
}

/* Celular y tableta vertical: el detalle sube como hoja sobre las pestañas */
@media (max-width: 899px) {
    .cx-lateral > .cx-detalle {
        inset: auto 0 calc(var(--pestanas) + env(safe-area-inset-bottom)) 0;
        width: auto;
        max-height: min(70dvh, calc(100dvh - var(--barra) - var(--pestanas) - 16px));
        padding: 18px 16px 22px;
        border-radius: 18px 18px 0 0;
        border-bottom: 0;
        box-shadow: 0 -10px 40px rgba(20, 24, 28, .16);
    }
    .cx-pie { flex-direction: column; align-items: stretch; gap: 1rem; padding: 0; }
    .cx-pie__accion { flex-direction: column; align-items: stretch; margin-left: 0; }
    .cx-pie__accion p { max-width: none; text-align: left; }
    .cx-pie .btn { white-space: normal; text-align: center; }
}

/* Angosto: el diagrama se acomoda en vertical sobre una espina */
@media (max-width: 671px) {
    .cx-lienzo { padding: 8px; }
    .cx-mapa {
        --cx-modo: pila;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "piso" "centro" "sistemas" "datos" "personas" "seguridad";
        row-gap: 22px;
        padding: 18px 10px 14px;
    }

    .cx-grupo { margin-left: 22px; }
    .cx-grupo--personas,
    .cx-grupo--datos { justify-items: stretch; }
    .cx-grupo--datos .cx-grupo__titulo { order: 0; }

    .cx-grupo__nodos,
    .cx-grupo--personas .cx-grupo__nodos,
    .cx-grupo--datos .cx-grupo__nodos,
    .cx-grupo--seguridad .cx-grupo__nodos {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .cx-nodo { width: 100%; gap: .4rem; padding: .35rem .45rem .35rem .3rem; }
    .cx-nodo__icono { width: 26px; height: 26px; border-radius: 7px; }
    .cx-nodo__icono .icono { width: 16px; height: 16px; }
    .cx-nodo__nombre { font-size: .85rem; white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
    .cx-nodo[data-marcable] .cx-nodo__texto { min-width: 0; }

    .cx-centro { margin: 0 0 0 22px; max-width: none; width: auto; justify-self: stretch; }

    .cx-grupo--seguridad {
        position: relative;
        margin: 6px 0 0;
        padding-top: 16px;
        border-top: 1px solid var(--linea);
        display: grid;
        gap: 10px;
    }
    .cx-grupo--seguridad .cx-grupo__titulo { position: static; padding: 0; background: none; }
}

@media (max-width: 380px) {
    .cx-nodo__icono { width: 24px; height: 24px; }
    .cx-nodo__nombre { font-size: .82rem; }
}