/* ==========================================================================
   ÍNDICE

   [01] ELEMENTOS GENERALES DEL BODY
   [02] ESTILOS PARA ELEMENTOS POR DEFECTO (textarea, div, input, button, etc)
   [03] ESTILOS DEL HEADER PRINCIPAL FRAME (botones, iconos, etc)
   [04] SELECTOR DE IDIOMAS
   [05] INTERCAMBIAR NODO
   [06] MODAL DE ADD DISPOSITIVO
   [07] CONTENIDO DE MÓDULOS DE INSTALACIÓN (devices añadidos a la interfaz, botón que saca el modal de añadir dispositivo, etc)
   [08] TABLA DE LISTADO DE DISPOSITIVOS
   [09] TOPOLOGIA DEL PROYECTO
   [10] ESTILOS DEL MODAL GUARDAR COMO
   [11] APARTADO DIAGNÓSTICO
   [12] ESTILOS MODAL NODEPICKER CONTROL PTO A PTO
   [13] ESTILOS MODALES INTERMEDIOS GENERALES
   [14] ESTILOS MODAL INTERMEDIO CONTROL PTO A PTO
   [15] ESTILOS MODAL INTERMEDIO ESCENAS,FANCOIL,PLUS Y ACTUADORES
   [16] MODALES DE LOS DISPOSITIVOS
   [17] RESPONSIVE GENERAL MOVIL Y TABLET
   [18] NAVBAR Y DROPDOWNS (Migrados de landingPage.css para project.html)
   [19] LANDING PAGE
   [20] PANEL EXPANDIBLE INFERIOR (MODULOS INSTALACION)
   [21] ASISTENTE

   ==========================================================================
*/

/****************************************************/
/* #region [01] ----- ELEMENTOS GENERALES DEL BODY ----- */
/****************************************************/


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    /*REF-- FUENTE PRINCIPAL */
    font-family: var(--font-ui);
    font-weight: 400;
    font-stretch: 90%;
    font-optical-sizing: auto;

    -webkit-user-select: none;
    /* Chrome, Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Edge antiguo */
    user-select: none;

    /* Transición global para el modo oscuro */
    transition:
        background-color 0.25s ease-in-out,
        color 0.25s ease-in-out,
        border-color 0.25s ease-in-out;
}


html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}



/* contiene todo el documento principal como el header, layout, etc. */
.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}



.device-row {
    border: 1px solid var(--gris-80);
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}



.device-row:hover,
.device-row.selected-device-row {
    border: 1px solid var(--gris-80);
}



.tabla-listado-device tr.selected-device-row>td {
    background-color: rgba(0, 188, 112, 0.1) !important;
    transition: 0s !important;
}


.tabla-listado-device tr.drag-over>td,
.tabla-listado-device thead tr.drag-over th {
    background-color: rgba(0, 188, 112, 0.1) !important;
}

.tabla-listado-device tr.drag-forbidden>td {
    background-color: rgba(255, 77, 77, 0.05) !important;
}



.tabla-listado-device tr.device-row:hover td {
    background-color: var(--gris-claro);
    cursor: pointer;
}

/* --- ESTILOS PARA ORDENACIÓN DE TABLA --- */
.tabla-listado-device thead th {
    transition: all 0.2s ease;
    cursor: default;
    position: relative;
    user-select: none;
}

.tabla-listado-device thead th[data-sort] {
    cursor: pointer;
}

/* Evitar hover en la primera columna (imagen) */
.tabla-listado-device thead th:first-child {
    cursor: default;
}

.th-col-imagen {
    text-align: center;
    vertical-align: middle;
}

.table-columns-kebab {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 auto;
}

.table-columns-kebab:hover {
    background: var(--hover-iconos);
}

.table-columns-kebab.active {
    background-color: var(--color-primario) !important;
}

.table-columns-kebab.active .icon-columns-order {
    background-color: white !important;
}

.table-columns-popup.oculto {
    display: none !important;
}

.table-columns-popup {
    position: absolute;
    display: none;
    flex-direction: column;
    min-width: 170px;
    padding: 0;
    border: 1px solid var(--gris-tarjeta-st);
    background-color: var(--white);
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.10) 0px 4px 12px;
    z-index: 10005;
}

.table-columns-popup-list {
    display: flex;
    flex-direction: column;
}

.table-col-toggle-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: var(--black);
    user-select: none;
    text-align: left;
}

.table-col-toggle-item:hover {
    background-color: var(--gris-claro);
}

.table-col-toggle-item.is-selected {
    font-weight: var(--negrita, 600);
}

.table-col-toggle-check {
    width: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
    font-size: 12px;
    visibility: hidden;
}

.table-col-toggle-item.is-selected .table-col-toggle-check {
    visibility: visible;
}

.table-col-toggle-label {
    flex: 1;
    padding-right: 20px;
}

.table-col-drag-handle {
    margin-left: auto;
    width: 14px;
    height: 14px;
    cursor: grab;
    -webkit-mask-image: url("../img/iconos/drag-handle.svg");
    mask-image: url("../img/iconos/drag-handle.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: #bcbcbc;
    /* Gris por defecto */
    transition: background-color 0.2s ease;
}

.table-col-drag-handle:hover,
.table-col-drag-handle:active {
    background-color: var(--black);
}

.table-col-drag-handle:active {
    cursor: grabbing;
}

.table-col-toggle-item.dragging {
    opacity: 0.5;
}

.table-col-toggle-item.drag-over-top {
    border-top: 2px solid var(--color-primario);
}

.table-col-toggle-item.drag-over-bottom {
    border-bottom: 2px solid var(--color-primario);
}

.tabla-listado-device thead th[data-sort]:hover {
    color: var(--color-primario) !important;
}

.tabla-listado-device thead th.active-sort {
    color: var(--color-primario) !important;
}

.accordion-icon,
.inst-chevron,
.lang-icon-right,
.toggle-btn,
.sort-indicator {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tabla-listado-device thead th .sort-indicator {
    margin-left: 8px;
    vertical-align: middle;
    opacity: 0;
    color: #9ca3af;
}

.tabla-listado-device thead th.active-sort .sort-indicator {
    opacity: 1;
    color: var(--color-primario);
}

/* Ascendente: hacia arriba */
.tabla-listado-device thead th.active-sort.asc .sort-indicator {
    transform: rotate(180deg);
}

/* Descendente: hacia abajo */
.tabla-listado-device thead th.active-sort.desc .sort-indicator {
    transform: rotate(0deg);
}

.sort-indicator svg {
    width: 10px;
    height: auto;
    display: block;
}

/* estilos del recuadro de selección */
.selection-box {
    position: absolute;
    border: 1px dashed #1984f7;
    background-color: rgba(25, 132, 247, 0.1);
    pointer-events: none;
    z-index: 1;
}

.layout,
.contenedor_principal,
.vista {
    min-height: 0;
    min-width: 0;
}

#orderIcons {
    display: flex;
    /* gap: 20px; */
    /* height: 30px; */
}


/* Hover suave */
#order:hover {
    color: #000;
}


#leftPanelContent,
#rightPanelContent {
    overflow: hidden;
}

/* Panel izquierdo*/
#leftPanelContent {
    height: 100vh;
}


/* Panel derecho iframe */
.right-panel {
    position: relative;
    flex: 0 0 var(--initial-right-width, 420px);
    min-width: 320px;
    max-width: calc(100vw - 40px);
    height: 100%;
    min-height: 0;
    background-color: var(--white);
    border-left: 1px solid var(--gris-neutro);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    container-type: inline-size;
    container-name: rightpanel;
}


.no-pointer-events-iframe {
    pointer-events: none !important;
}

.mobile-only {
    display: none;
}

#rightPanelContent {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}

#rightFrame {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    border: 0;
    position: relative;
}

#mostrar-modal_container {
    position: absolute;
    top: 11px;
    right: 20px;
    display: none;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    /* evita bloquear clics del panel */
    z-index: 11000;
}

#mostrar-modal_container .modal_exito {
    min-width: 220px;
    padding: 8px 16px;
    border-radius: 4px;
    color: #1f1f1f;
    box-shadow: rgba(0, 0, 0, 0.10) 0px 4px 12px;
    background-color: var(--white);
    animation: var(--vibrar-suave);
    border: 2px solid rgba(0, 0, 0, .1) !important;
    pointer-events: auto;
}

#mostrar-modal_container .modal_info,
#mostrar-modal_container .modal_error,
#mostrar-modal_container .modal_warning {
    min-width: 220px;
    padding: 8px 16px;
    border-radius: 4px;
    color: #1f1f1f;
    box-shadow: rgba(0, 0, 0, 0.10) 0px 4px 12px;
    background-color: var(--white);
    animation: var(--vibrar);
    border: 2px solid rgba(0, 0, 0, .1) !important;
    pointer-events: auto;
}

.panel-content.cerrado {
    display: none;
}

.panel-content.abierto {
    display: block;
}

.drag-handle {
    flex: 0 0 15px;
    cursor: col-resize;
    background-color: var(--white);
    position: relative;
    touch-action: none;
}

/* tu barra vertical larga (la de siempre) */
.drag-handle::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--gris-neutro)
}

/* grabber estilo iPhone */
.drag-handle::after {
    content: "";
    position: absolute;

    left: 8px;
    top: 50%;
    /* esto está al 68% para que quede centrado lo más ajustado posible */
    transform: translate(-50%, -50%);

    width: 3px;
    height: 35px;
    border-radius: 999px;

    background-color: var(--gris-neutro);
    transition: background-color 0.3s ease-in-out;
}

.drag-handle:hover::after {
    background-color: var(--black);
}

.drag-handle-topologia {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}


/* Icono centrado sobre el nodo */
.drag-handle-topologia::after {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: calc(50% - var(--node-depth, 0) * 20px);
    transform: translate(-50%, -50%);
    background-color: var(--drag-and-drop-topologia);
    -webkit-mask-image: url("../img/iconos/drag-handle-vertical.svg");
    mask-image: url("../img/iconos/drag-handle-vertical.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    cursor: grab;
}

.node-content-wrapper:hover .drag-handle-topologia::after {
    opacity: 1;
}



.layout {
    flex: 1;
    display: flex;
    gap: 0;
    /* border-top: 1px solid var(--color-terciario); */
    /* border-top: 1px solid var(--gris-neutro); */
    height: 100%;
    background-color: var(--white);
    overflow: hidden;
}

.contenedor_principal {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    border-radius: 6px;
    border: 1px solid var(--border);
    min-width: 0;

    position: relative;
    /* overflow: hidden; */
    container-type: inline-size;
    container-name: leftpanel;
}


.contenedor_principal::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;

    background: linear-gradient(to bottom,
            hsl(from var(--white) h s l / 0) 0%,
            hsl(from var(--white) h s l / 0.2) 55%,
            hsl(from var(--white) h s l / 0.45) 75%,
            var(--white) 100%);

    pointer-events: none;
    z-index: 9999;
}


.header-rightPanel {
    background-color: var(--gris-toolbar);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90px;
    flex-shrink: 0;
}

.telegrama-wrapper {
    display: flex;
    gap: 8px;
    width: 100%;
    align-items: flex-start;
    min-width: 0;
}

.telegrama-wrapper>div {
    min-width: 0;
}

.input-telegrama {
    flex: 1;
    width: auto !important;
    min-width: 0;
}

.btn-lapiz {
    height: 24px;
    background-color: var(--color-primario);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0px 16px;
    border: none;
    flex-shrink: 0;
}

.btn-lapiz:hover {
    background-color: #08cb7d;
}

.diag-traffic-header-container {
    flex: 1;
    min-width: 0;
    padding: 0 24px;
}

.diag-traffic-header {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.diag-traffic-title {
    flex: 0 0 auto;
    align-self: center;
    color: var(--black);
    font-size: 11px;
    white-space: nowrap;
    margin-right: 4px;
}

.diag-traffic-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    color: var(--gris-oscuro);
    font-size: 11px;
    font-weight: var(--negrita);
}

.diag-traffic-field:first-child {
    flex-basis: 130px;
}

.diag-traffic-field span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/* ========================================= */
/* POPUP DE HISTORIAL (UNDO/REDO LONG PRESS) */
/* ========================================= */
.history-popup {
    position: absolute;
    background: var(--white);
    border: 1px solid var(--gris-tarjeta-st);
    box-shadow: rgba(0, 0, 0, 0.10) 0px 4px 12px;
    border-radius: 6px;
    overflow-y: auto;
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

.history-popup .history-header {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gris-texto-oscuro, #666);
    text-transform: uppercase;
    border-bottom: 1px solid var(--gris-40, #f0f0f0);
    margin-bottom: 4px;
}

.history-popup .history-item {
    padding: 8px 16px;
    gap: 40px;
    font-size: 14px;
    color: var(--black);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s;
}

.history-popup .history-item:hover {
    background-color: var(--gris-claro);
}

.history-popup .history-item.active-state {
    background-color: var(--color-primario, #10B981);
    color: white;
    font-weight: 500;
}

.history-popup .history-item.active-state:hover {
    background-color: #08cb7d;
}

/* .history-popup .history-item.redo-state {
    opacity: 0.6;
} */

.history-popup .history-item .step-index {
    font-size: 12px;
    opacity: 0.7;
    margin-right: 12px;
    color: var(--black);
}

/* Titulos de los grupos de las instalaciones que tenga ese instalador */
#installationsSelect optgroup {
    font-style: normal;
    font-weight: var(--negrita);
    color: var(--black);
}


/****************************************************/
/* #endregion [01] ----- FIN DE ELEMENTOS GENERALES DEL BODY ----- */
/****************************************************/


/****************************************************/
/* #region [02] ----- ESTILOS PARA ELEMENTOS POR DEFECTO (textarea, div, input, button, etc) ----- */
/****************************************************/
/* contenedor principal que abarca todo el contenido del modal de cada dispositivo */
.content-dispositivo {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    padding-bottom: 30px;
    border-top: none;
    font-size: 13px;
    overflow: visible;
    height: 100%;
    width: 100%;
    animation: var(--fade);
}

/* contenido principal del modal de cada dispositivo */
.body-dispositivo {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    /* flex: 1 1 auto; */
    min-height: 0;
    overflow: visible;
    /* Override to allow tabs to bleed into border */
    color: var(--black);
}

/* cabecera del modal de cada dispositivo donde se encuentra el nombre y su dirección */
.header-dispositivo {
    background-color: var(--white);
    padding-inline: 25px;
    padding-block: 20px;
    /* border-bottom: 1px solid var(--gris-neutro); */
    font-weight: var(--negrita);
    font-size: 13px;
    color: var(--black);
    position: relative;
    display: flex;
    align-items: flex-end;
    flex: 0 0 auto;
}

.tab-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: var(--gap-div-dispositivo);
    max-height: 700px;
}

.view-imagen {
    animation: var(--fade);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.global-device-header-container.header-dispositivo {
    background-color: transparent;
    padding-block: 0;
    /* padding-left: 40px; */
    /* padding-right: 25px; */
    padding-inline: 5%;
    flex: 1;
    align-items: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* título dentro del header de cada modal de dispositivo que indica la dirección del mismo */
.titulo-header-dispositivo {
    margin: 0;
}

/* nombre del dispositivo de cada modal */
.nombre-nodo-header {
    display: flex;
    cursor: text;
    font-size: 16px;
    color: var(--black);
    margin-bottom: -1px;
}

/* botón que cierra el modal si interactuas con él */
.closeBtnModal {
    background: transparent;
    border: none;
    color: transparent;
    font-size: 18px;
    font-weight: var(--negrita);
    cursor: pointer;
    line-height: 1;
    position: absolute;
    right: 25px;
}

.closeBtnModal:hover {
    color: var(--black);
}

/* footer de cada modal que contiene principalmente el botón de aplicar */
.footer-dispositivo {
    display: flex;
    flex: 0 0 auto;
    /* margin-top: auto; */
    justify-content: center;
    align-items: center;
    padding: 25px;
    /* border-top: 1px solid var(--gris-neutro); */
    background-color: var(--white);
    color: var(--black);
    gap: 10px;
}

/* botón por defecto para los que no tengan clase */
button {
    border: none;
    color: var(--white);
    padding: 5px 18px;
    font-size: 16px;
    outline: none;
}

/* botón de aplicar que guarda los cambios del modal, se sitúa en el footer */
.btn-aplicar {
    background-color: var(--color-primario);
    border: none;
    outline: none;
    color: white;
    padding: 6px 18px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: var(--negrita);
    text-transform: uppercase;
    cursor: pointer;
}

.btn-aplicar:hover {
    background-color: #08cb7d;
}

/* botón de cancelar que descarta los cambios del modal, se sitúa en el footer */
.btn-cancelar {
    background-color: var(--bg-btn-cancelar);
    border: none;
    outline: none;
    color: white;
    padding: 6px 18px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: var(--negrita);
    text-transform: uppercase;
    cursor: pointer;
}

.btn-alternativo-aplicar {
    background-color: var(--white);
    border: none;
    outline: 2px solid var(--color-primario);
    outline-offset: -2px;
    color: var(--color-primario);
    padding: 6px 18px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: var(--negrita);
    text-transform: uppercase;
    cursor: pointer;
}

.btn-alternativo-aplicar:hover {
    filter: brightness(110%);
}

.btn-alternativo-cancelar {
    background-color: var(--white);
    border: none;
    outline: 2px solid var(--bg-btn-cancelar);
    outline-offset: -2px;
    color: #A3A3A3;
    padding: 6px 18px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: var(--negrita);
    text-transform: uppercase;
    cursor: pointer;
}

.btn-previous {
    background-color: var(--color-primario);
    border: none;
    outline: none;
    color: white;
    padding: 6px 7px;
    border-top-left-radius: 99px;
    border-bottom-left-radius: 99px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    font-size: 14px;
    font-weight: var(--negrita);
    text-transform: uppercase;
    cursor: pointer;
    align-items: flex-end;
    display: flex;
}

.btn-next {
    background-color: var(--color-primario);
    border: none;
    outline: none;
    color: white;
    padding: 6px 7px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-top-right-radius: 99px;
    border-bottom-right-radius: 99px;
    font-size: 14px;
    font-weight: var(--negrita);
    text-transform: uppercase;
    cursor: pointer;
    align-items: flex-end;
    display: flex;
}

.btn-previous:hover,
.btn-next:hover {
    background-color: #08cb7d;
}

.small {
    font-size: 12px;
    padding: 4px 18px;
}

/* .btn-alternativo-cancelar:hover {
    filter: brightness(110%);
} */

.modal-footer .btn-aplicar,
.modal-footer .btn-cancelar,
.modal-footer .btn-alternativo-aplicar,
.modal-footer .btn-alternativo-cancelar {
    width: 120px;
    height: 24px;
    padding: 4px 20px;
    font-size: 12px;
}

/* ancho exclusivo para los botones que se encuentran en el footer del modal */
.footer-dispositivo .btn-aplicar {
    width: 250px;
    max-width: 100%;
}


/* checkbox y radio por defecto con iconos personalizados */
input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    cursor: pointer;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none !important;
    outline: none !important;
    margin: 0;
    display: inline-block;
    background-color: var(--input-unselected) !important;

    /* máscaras para poder teñir el SVG con background-color */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Estado marcado (ON) -> Verde en ambos modos */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--color-primario) !important;
}

/* Estado deshabilitado -> Gris neutro */
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    background-color: var(--gris-neutro) !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Asignación de máscaras (Iconos) */
input[type="checkbox"] {
    -webkit-mask-image: url("../img/iconos/checkbox-off.svg");
    mask-image: url("../img/iconos/checkbox-off.svg");
}

input[type="checkbox"]:checked {
    -webkit-mask-image: url("../img/iconos/checkbox-on.svg");
    mask-image: url("../img/iconos/checkbox-on.svg");
}

input[type="radio"] {
    -webkit-mask-image: url("../img/iconos/radio-button-off.svg");
    mask-image: url("../img/iconos/radio-button-off.svg");
}

input[type="radio"]:checked {
    -webkit-mask-image: url("../img/iconos/radio-button-on.svg");
    mask-image: url("../img/iconos/radio-button-on.svg");
}

/* inputs generales para los que no tengan clase */
input {
    padding-left: 10px;
    border: 1px solid var(--gris-neutro);
    border-left: none;
    border-right: none;
    outline: none;
}

/* textarea por defecto */
.textarea-dispositivo {
    field-sizing: content;
    max-height: 105px;
    overflow-y: auto;
    resize: none;
    width: 100%;
    max-width: 100%;
    word-break: break-all;
    overflow-wrap: break-word;
    padding: 3px 6px 1px;
    border: 1px solid transparent;
    border-radius: 2px;
    background-color: var(--gris-claro);
    color: var(--black);
    outline: none;
    font-size: 13px;
}

/* input por defecto */
.input-dispositivo,
.nombre-canal,
.input-logica,
.valor-canal,
.limite-inf,
.limite-sup,
.input-tracking,
.salida-input,
.entrada-input {
    resize: none;
    width: 100%;
    padding: 3px 6px 1px;
    border: 1px solid transparent;
    border-radius: 3px;
    background-color: var(--gris-claro);
    color: var(--black);
    outline: none;
    padding-right: 0;
}

/* focus para los textarea-dispositivo */
.textarea-dispositivo:focus,
/* focus para los input-dispositivo */
.input-dispositivo:focus,
.nombre-canal:focus,
.input-logica:focus,
.valor-canal:focus,
.limite-inf:focus,
.limite-sup:focus,
.input-tracking:focus,
.salida-input:focus,
.entrada-input:focus,
.select-dispositivo:focus {
    border: 1px solid var(--color-primario) !important;
}

/* hover para los textarea-dispositivo */
.textarea-dispositivo:hover,
/* hover para los input-dispositivo */
.input-dispositivo:hover,
.nombre-canal:hover,
.input-logica:hover,
.valor-canal:hover,
.limite-inf:hover,
.limite-sup:hover,
.input-tracking:hover,
.salida-input:hover,
.entrada-input:hover {
    border: 1px solid var(--gris-80);
}

.numSpan {
    color: var(--black);
    font-size: 13px;
    opacity: 0.5;
}

/* select por defecto */
.select-dispositivo {
    width: 100%;
    padding: 3px 6px 1px;
    border: 1px solid var(--gris-80);
    border-radius: 2px;
    background-color: var(--gris-claro);
    color: var(--black);
    cursor: pointer;
    outline: none;
}


/* div por defecto y fieldset por defecto */
.div-dispositivo,
fieldset {
    color: var(--black);
    background-color: var(--white);
    border: 1px solid var(--gris-tarjeta-st);
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* div de tabs btn por defecto */
.tab-container-dispositivo {
    padding: 15px 0px 0px 15px;
    /* gap: 10px; */
    margin-bottom: 30px;
    border-bottom: 3px solid var(--gris-claro);
    display: flex;
    background-color: var(--white);
    width: 100%;
    height: 50px;
    position: relative;
    z-index: 100;
}

/* Extender las pestañas para cubrir el borde de 15px de los modales */
.content-dispositivo .tab-container-dispositivo,
.content-topology .tab-container-dispositivo {
    /* width: calc(100% + 30px); */
    padding-inline: 5%;
    /* 40px - 15px = 25px (alineado con el header y el contenido) */
}


/* tab bar por defecto */
.tab-btn,
.order {
    padding: 6px 14px;
    border-radius: 4px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border: none;
    border-bottom: 3px solid var(--gris-claro);
    background-color: var(--white);
    color: var(--gris-header);
    position: relative;
    top: 3px;
    cursor: pointer;
    font-weight: var(--negrita);
    line-height: 1.05rem;
    z-index: 1;
    text-wrap: nowrap;
    box-sizing: border-box;
}

/* hover si NO está activo */
.tab-btn:not(.is-active):hover,
.order:not(.active):hover {
    color: var(--black);
    position: relative;
    border-bottom: 3px solid var(--gris-neutro);
}

/* estilos SI está activo */
.tab-btn.is-active,
.order.active {
    color: var(--color-primario);
    position: relative;
    /* top: 1px; */
    /* z-index: 2; */
    border-bottom: 3px solid var(--color-primario);
}

/* Selectores con estilo de pestaña (filtros) */
.tab-select {
    padding: 6px 30px 6px 14px;
    border: none;
    border-bottom: 3px solid transparent;
    background-color: transparent;
    color: var(--gris-header);
    position: relative;
    top: 0;
    cursor: pointer;
    font-weight: var(--negrita);
    font-size: 14px;
    line-height: 1.05rem;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: all 0.2s;
    box-sizing: border-box;
}

.tab-select:hover,
.tab-select:active {
    color: var(--black);
    border-bottom-color: var(--gris-neutro);
}

/* Mantén el estado activo en los filtros personalizados mientras su menú está abierto. */
.tab-select-wrapper:has(> .custom-select-dropdown:not(.oculto))>.tab-select {
    /* color: var(--color-primario); */
    border-bottom-color: var(--color-primario) !important;
}

.tab-select:focus {
    border-bottom-color: var(--color-primario);
}

.tab-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.tab-select-wrapper .chevron-icon {
    position: absolute;
    right: 10px;
    pointer-events: none;
    width: 14px;
    height: 14px;
    top: 6px;
}

/* Checkbox de búsqueda común (linked search) */
.linked-search-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    position: relative;
    height: 32px;
    padding-bottom: 5px;
    box-sizing: border-box;
}

.linked-search-label .linked-search-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primario);
    flex-shrink: 0;
    margin: 0;
}

.linked-search-label .linked-search-text {
    font-size: 11px;
    color: var(--gris-header);
    font-weight: var(--negrita);
    white-space: nowrap;
    transition: color 0.2s;
}

.linked-search-label:hover .linked-search-text {
    color: var(--black);
}

.linked-search-label.is-linked .linked-search-text {
    color: var(--color-primario);
}

/* Header general de todos los dispositivos*/

.header-dispositivo-wrapper {
    display: flex;
    gap: 7px;
    animation: var(--fade);
    align-items: flex-end;
}

.header-dispositivo-wrapper-topology {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}


/* Por defecto el icono en desktop no sale */
.header-dispositivo-icono {
    display: flex;
    /* border: 2px solid transparent; */
    cursor: default;
}


/* visible cuando el header lo permite */
.header-con-icono .header-dispositivo-icono {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
}


.header-dispositivo-icono img {
    width: 42px;
    height: auto;
    object-fit: contain;
}

.header-dispositivo-texto {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.header-dispositivo-texto-topology {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
    flex-wrap: wrap;
}


.header-dispositivo-texto h6 {
    margin: 0;
    font-size: 18px;
}

.header-box {
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--black);
    text-align: left;
    display: flex;
    justify-content: start;
    font-weight: var(--negrita);
}



/****************************************************/
/* #endregion [02] ----- FIN DE ESTILOS PARA ELEMENTOS POR DEFECTO (textarea, div, input, button, etc) ----- */
/****************************************************/


/****************************************************/
/* #region [03] ----- ESTILOS DEL HEADER PRINCIPAL FRAME (botones, iconos, etc) ----- */
/****************************************************/

/* header del menú principal que contiene el div de iconos y el logo de app */
.toolbar {
    display: flex;
    justify-content: space-between;
    height: 90px;
    background-color: var(--gris-toolbar);
}

/* div que contiene todos los iconos de herramientas */
.icons {
    display: flex;
    flex-direction: row;
    background-color: var(--gris-toolbar);
    margin-left: 50px;
    padding-block: 15px;
}

/* primer tramo de iconos de herramientas (abrir, guardar como, etc) */
.primeros_iconos {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

/* segundo tramo de iconos de herramientas (editar, borrar, etc) */
.segundos_iconos {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.iconos_archivo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.diagnostico-busing-group {
    display: none !important;
}

.iconos_archivo.diagnostico-mode>*:not(.diagnostico-busing-group) {
    display: none !important;
}

.iconos_archivo.diagnostico-mode .diagnostico-busing-group {
    display: flex !important;
}

.diagnostico-busing-group.is-active {
    opacity: 0.4;
    cursor: default;
}

.diagnostico-busing-group.is-active .fondo-icono {
    pointer-events: none;
}


/* Contenedor del meatballs */
.meatball_container {
    position: relative;
    /* necesario para el menu */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* span de "Archivo" que contiene las acciones de Nuevo, Abrir, Guardar como y Guardar */
.meatball_container span {
    font-size: 9px;
    font-stretch: 80%;
    font-weight: 600;
    color: var(--black);
}


/* Items del menú flotante*/
.menu-items {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--black);
    text-wrap: nowrap;
    text-align: left;
}

.menu-items span {
    font-size: 14px;
    color: var(--black);
    text-wrap: nowrap;
    font-stretch: 90%;
    font-weight: 400;
}

/* Iconos pequeños dentro del menú */
.menu-items img {
    width: 18px;
    height: 18px;
}

/* Hover */
.menu-items:hover {
    background-color: var(--gris-claro);
}

.menu-items:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.menu-items:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}


/* imágenes de los iconos de herramientas*/

.nav-bar {
    width: 36px;
    height: 36px;

    background-color: var(--black);
    border-radius: 5px;

    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;

    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;

}

.nav-bar.disabled {
    background-color: var(--gris-neutro) !important;
}

.grupoIcons:has(.nav-bar.disabled),
.grupoIcons.disabled,
.meatball_container:has(.nav-bar.disabled),
.meatball_container.disabled {
    opacity: 0.4 !important;
    cursor: default !important;
}

.grupoIcons:has(.nav-bar.disabled) .fondo-icono,
.grupoIcons.disabled .fondo-icono,
.meatball_container:has(.nav-bar.disabled) .fondo-icono,
.meatball_container.disabled .fondo-icono {
    pointer-events: none !important;
}

.grupoIcons.disabled .nav-bar,
.meatball_container.disabled .nav-bar {
    background-color: var(--gris-neutro) !important;
}

.grupoIcons:has(.nav-bar.disabled) .nav-bar,
.grupoIcons.disabled .nav-bar,
.meatball_container:has(.nav-bar.disabled) .nav-bar,
.meatball_container.disabled .nav-bar {
    opacity: 1 !important;
}

/* Boton QR sin camara utilizable (inicio.js): mismo aspecto que los deshabilitados, cursor not-allowed */
.grupoIcons.qr-no-camera,
.grupoIcons.qr-no-camera * {
    cursor: not-allowed !important;
}

.grupoIcons.qr-no-camera .fondo-icono:hover {
    background-color: transparent !important;
}

.fondo-icono {
    border-radius: 6px;
}

.fondo-icono:hover {
    background-color: rgba(0, 188, 112, 0.1) !important;
    cursor: pointer;
}

.fondo-icono.is-active {
    background-color: var(--color-primario) !important;
}

.fondo-icono.is-active .nav-bar {
    background-color: white !important;
}

/* Evitar que 'disabled' rompa la visibilidad y uso de 'is-active' */
/* .grupoIcons:has(.fondo-icono.is-active) {
    opacity: 1 !important;
}

.grupoIcons:has(.fondo-icono.is-active) .fondo-icono {
    pointer-events: auto !important;
} */


/******* CARGA DE SVGS PARA TOOLBAR **********/

.icon-wizard {
    -webkit-mask-image: url("../img/iconos/wizzard.svg");
    mask-image: url("../img/iconos/wizzard.svg");
}

.icon-new {
    -webkit-mask-image: url("../img/iconos/archive-new.svg");
    mask-image: url("../img/iconos/archive-new.svg");
}

.icon-open {
    -webkit-mask-image: url("../img/iconos/archive-open.svg");
    mask-image: url("../img/iconos/archive-open.svg");
}

.icon-save {
    -webkit-mask-image: url("../img/iconos/archive-save.svg");
    mask-image: url("../img/iconos/archive-save.svg");
}

.icon-saveAs {
    -webkit-mask-image: url("../img/iconos/archive-save-as.svg");
    mask-image: url("../img/iconos/archive-save-as.svg");
}

.icon-delete {
    -webkit-mask-image: url("../img/iconos/node-delete.svg");
    mask-image: url("../img/iconos/node-delete.svg");
}

.icon-edit {
    -webkit-mask-image: url("../img/iconos//node-edit.svg");
    mask-image: url("../img/iconos/node-edit.svg");
}

.icon-uninstall {
    -webkit-mask-image: url("../img/iconos/node-uninstall.svg");
    mask-image: url("../img/iconos/node-uninstall.svg");
}

.icon-undo {
    -webkit-mask-image: url("../img/iconos/undo.svg?v=2");
    mask-image: url("../img/iconos/undo.svg?v=2");
}

.icon-redo {
    -webkit-mask-image: url("../img/iconos/redo.svg");
    mask-image: url("../img/iconos/redo.svg");
}

.icon-add {
    -webkit-mask-image: url("../img/iconos/node-add.svg");
    mask-image: url("../img/iconos/node-add.svg");
}

.icon-switch {
    -webkit-mask-image: url("../img/iconos/node-switch.svg");
    mask-image: url("../img/iconos/node-switch.svg");
}

.icon-meatballs {
    -webkit-mask-image: url("../img/iconos/menu-meatballs.svg");
    mask-image: url("../img/iconos/menu-meatballs.svg");
}

.icon-columns-order {
    -webkit-mask-image: url("../img/iconos/columns-order.svg");
    mask-image: url("../img/iconos/columns-order.svg");
}

.icon-busing-traffic {
    -webkit-mask-image: url("../img/iconos/node-diagnosis.svg");
    mask-image: url("../img/iconos/node-diagnosis.svg");
}

.icon-file {
    -webkit-mask-image: url("../img/iconos/menu-file.svg");
    mask-image: url("../img/iconos/menu-file.svg");
}

.icon-qr {
    -webkit-mask-image: url("../img/iconos/node-qr.svg");
    mask-image: url("../img/iconos/node-qr.svg");
}

.icon-qr-scan {
    -webkit-mask-image: url("../img/iconos/node-qr-scan.svg");
    mask-image: url("../img/iconos/node-qr-scan.svg");
}

.icon-scan-instalacion {
    -webkit-mask-image: url("../img/iconos/node-scan.svg");
    mask-image: url("../img/iconos/node-scan.svg");
}

/******* CARGA DE SVGS PARA TOOLBAR TOPOLOGIA **********/

.icon-duplicar {
    -webkit-mask-image: url("../img/iconos/element-duplicate.svg");
    mask-image: url("../img/iconos/element-duplicate.svg");
}

.icon-move {
    -webkit-mask-image: url("../img/iconos/element-move.svg");
    mask-image: url("../img/iconos/element-move.svg");
}

.icon-subir {
    -webkit-mask-image: url("../img/iconos/element-up.svg");
    mask-image: url("../img/iconos/element-up.svg");
}

.icon-bajar {
    -webkit-mask-image: url("../img/iconos/element-down.svg");
    mask-image: url("../img/iconos/element-down.svg");
}

.icon-addTopologia {
    -webkit-mask-image: url("../img/iconos/element-add.svg");
    mask-image: url("../img/iconos/element-add.svg");
}

.icon-deleteTopologia {
    -webkit-mask-image: url("../img/iconos/element-delete.svg");
    mask-image: url("../img/iconos/element-delete.svg");
}

.icon-editTopologia {
    -webkit-mask-image: url("../img/iconos/element-edit.svg");
    mask-image: url("../img/iconos/element-edit.svg");
}



/* contenedor que agrupa dos imágenes para formar el logo de la empresa situado en el header */
.logoSide {
    display: flex;
    justify-content: flex-end;
    height: 90px;
    gap: 10px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

/* primera imagen que forma el logo de la empresa */
.logoSideimg1 {
    width: 110px;
    height: auto;
}

/* segunda imagen que forma el logo de la empresa */
.logoSideimg2 {
    width: 110px;
    height: auto;
}

@container rightpanel (max-width: 550px) {
    .logoSideimg2 {
        display: none !important;
    }

    .logoSideimg1 {
        margin-right: 50px !important;
    }
}

/* contenedor que agrupa el div de top-buttons y de lang-switcher */
.top-tabs {
    display: flex;
    align-items: center;
    background-color: var(--gris-tarjeta-st);
    justify-content: space-between;
    height: 39px;
    padding: 0 29px 0 0;
    color: var(--black);
}

/* contenedor que agrupa los tabs de 'Diagnósticos' y de 'Módulos de instalación' */
.top-buttons {
    display: flex;
    margin-left: 50px;
    height: 100%;
}

.div-version {
    display: flex;
    height: 100%;
}

.version_name {
    font-size: 13px;
    color: #858585;
    margin-bottom: -3px;
}

/* --- MODO SWITCHER (Avanzado/Asistido) --- */
.mode-switcher {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.05);
    padding: 4px 12px;
    border-radius: 20px;
    height: 30px;
}

.mode-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 70px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: var(--color-primario);
}

input:checked+.slider:before {
    transform: translateX(16px);
}


/* estilos del botón de top buttons */
.tab {
    padding: 10px 18px 5px 18px;
    background-color: var(--gris-tarjeta-st);
    color: var(--gris-top-tabs-text);
    font-weight: var(--negrita);
    font-size: 16px;
    cursor: pointer;
}

.tab:hover {
    background-color: var(--gris-80);
}

/* cambia el estilo del botón de top buttons cuando está activo */
.tab.active {
    color: white;
    background-color: var(--color-primario);
    cursor: default;
}

.grupoIcons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.grupoIcons span {
    font-size: 9px;
    font-stretch: 80%;
    font-weight: 600;
    color: var(--black);
}

/****************************************************/
/* #endregion [03] ----- FIN DE ESTILOS DEL HEADER PRINCIPAL FRAME (botones, iconos, etc) ----- */
/****************************************************/


/****************************************************/
/* #region [04] ----- SELECTOR DE IDIOMAS ----- */
/****************************************************/

.selectores {
    display: flex;
    gap: 35px;
    position: relative;
    margin-right: 50px;
    height: 100%;
}

/* contenedor que agrupa el label y el select del modo oscuro */
.theme-selector-container {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

/* Select (Traducciones)*/
.lang-switcher {
    display: flex;
    background-color: #1C1F2B80;
    cursor: pointer;
    gap: 20px;
    padding: 10px 18px 7px 18px;
    user-select: none;
    font-size: 14px;
    width: 155px;
}

/* estilo del idioma seleccionado */
.lang-selected {
    flex: 1;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: var(--negrita);
}

/* texto de cada idioma de la lista */
.lang-option-text {
    font-weight: var(--negrita);
}

/* icono de la bola del mundo */
.lang-icon-left {
    width: 12px;
    height: 12px;
}

/* icono de > pero hacia abajo */
.lang-icon-right {
    width: 14px;
    height: 20px;
    pointer-events: none;
}

/* estilos del select de idioma cuando se despliega */
.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--color-terciario);
    margin-top: 2px;
    display: none;
    flex-direction: column;
    z-index: 100;
    width: 155px;
}

/* opción de cada idioma que agrupa la bola del mundo, el label y el icono de flecha hacia abajo */
.lang-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px 10px 18px;
    cursor: pointer;
    color: #7A7F86;
    width: 100%;
}

/* hover al contenedor de cada idioma */
.lang-option:hover {
    background-color: rgba(28, 31, 43, 0.1);
    color: #1C1F2B;
    font-weight: var(--negrita);
}

/* cambio de color cuando se selecciona el hover en el icono de la bola del mundo */
.lang-option-hover-icon {
    width: 12px;
    height: 12px;
    visibility: hidden;
}

/* mostrar icono cuando se hace hover a la opción */
.lang-option:hover .lang-option-hover-icon {
    visibility: visible;
}


/****************************************************/
/* #endregion [04] ----- FIN DE SELECTOR DE IDIOMAS ----- */
/****************************************************/


/****************************************************/
/* #region [05] ----- INTERCAMBIAR NODO ----- */
/****************************************************/

/* overlay del modal de intercambiar nodo */
.modal-sustitucion {
    position: fixed;
    inset: 0;
    background-color: var(--overlay);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Contenido del modal */
.modal-content-sustitucion {
    background-color: var(--white);
    border-radius: 6px;
    height: 580px;
    max-height: 80vh;
    border: 1px solid var(--gris-80);
    width: 750px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ocultar modal de intercambiar nodo por defecto */
.modal-sustitucion.oculto {
    display: none;
}

/* título del modal de intercambiar nodo */
.modal-sustitucion h3 {
    text-align: center;
    font-weight: normal;
}

/* contenedor del input con efecto flotante */
.modal-input-container {
    width: 220px;
    margin: 0 auto;
    margin-top: 15px;
    height: 50px;
}

/* body de los modales intermedios */
.modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--white);
    /* border-top: 1px solid var(--gris-oscuro);
    border-bottom: 1px solid var(--gris-oscuro); */
    max-height: 70vh;
}

/* input del nombre a elegir */
.modal-input-container input {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--gris-oscuro);
    outline: none;
    font-size: 15px;
    padding: 6px 0 6px 0;
    background-color: var(--white);
    text-align: center;
    color: var(--black);
}

.modal-input-container input:hover {
    background-color: var(--gris-claro);
}

/* label que actua de placeholder */
.modal-input-container label {
    display: flex;
    justify-content: center;
    margin-top: -27px;
    color: #666;
    font-size: 15px;
    pointer-events: none;
    transition: margin-top 0.3s ease, font-size 0.3s ease;
}

/* Fondo transparente si está enfocado o hay valor */
.modal-input-container input:focus,
.modal-input-container input:not(:placeholder-shown) {
    background: transparent;
}

/* Label flotante arriba */
.modal-input-container input:focus+label,
.modal-input-container input:not(:placeholder-shown)+label {
    /* top: -12px;
    left: 45px; */
    margin-top: -50px;
    font-size: 12px;
    color: var(--color-primario);
    background: transparent;
}

/* botones de cancelar o aplicar en el modal de intercambiar nodo */
.modal-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* carta que renderiza los tipos de dispositivos que hay en el modal de intercambiar nodo */
.tipo-card {
    cursor: pointer;
    border: 1px solid var(--gris-claro);
    background-color: var(--white);
    padding: 12px;
    text-align: center;
    color: var(--black);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90px;
}

/* cuando se selecciona se pone en verde */
.tipo-card.active {
    background-color: rgba(0, 188, 112, 0.1);
}

.tipo-card:hover:not(.active) {
    background-color: var(--gris-claro);
}

/* agrupa la imagen y label de cada dispositivo renderizado dentro de una carta en el modal de intercambiar nodo */
.device-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

/* imagen de device-card */
.device-card-content img {
    width: 50px;
    height: 50px;
}

.device-card-label {
    color: var(--black);
}


/* Galería y lista dentro del body */
#modalDeviceGallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

#modalDeviceList {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    border-top: 1px solid var(--gris-80);
    padding-top: 10px;
}

/* Footer con botones siempre visible */
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px;
    border-top: 1px solid #ccc;
    background-color: var(--white);
    /* Opcional: fondo para que siempre se vea */
    flex-shrink: 0;
    /* No colapsa */
}

/****************************************************/
/* #endregion [05] ----- FIN DE INTERCAMBIAR NODO ----- */
/****************************************************/


/****************************************************/
/* #region [06] ----- MODAL DE ADD DISPOSITIVO ----- */
/****************************************************/

/* todo el contenido del modal de add dispositivo */
.device-modal {
    /* position: absolute; */
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;

    display: flex;
    flex-direction: column;

    border-radius: 0;
    /* border: 8px solid var(--white); */
    box-shadow: none;
    overflow: hidden;
    z-index: 10;

    background-color: var(--white);

    animation: var(--fade);

    container-type: inline-size;
    container-name: devicemodal;
}

#modalGeneracion {
    container-type: inline-size;
    container-name: modalgeneracion;
}

@container devicemodal (max-width: 1100px) {
    .accordion-content {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

@container devicemodal (max-width: 750px) {

    #extraFields,
    #topologyExtraFields {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px 20px !important;
        align-items: center !important;
        width: 100% !important;
        padding-left: 20px !important;
        padding-block: 20px !important;
        box-sizing: border-box !important;
    }

    /* Posiciones de la cuadrícula para #extraFields */
    #extraFields>.field-group:nth-of-type(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    #extraFields>.field-group:nth-of-type(2) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    #extraFields>.field-group:nth-of-type(3) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    #extraFields>.extra-field-input-wrapper.dinamico {
        grid-column: 1 / span 2 !important;
        grid-row: 3 !important;
    }

    #extraFields>#addDeviceConfirm {
        grid-column: 2 !important;
        grid-row: 2 !important;
        width: fit-content !important;
        box-sizing: border-box !important;
    }

    /* Posiciones de la cuadrícula para #topologyExtraFields */
    #topologyExtraFields>.extra-field-input-wrapper:nth-of-type(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    #topologyExtraFields>.extra-field-input-wrapper:nth-of-type(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    #topologyExtraFields>.btn-aplicar {
        grid-column: 2 !important;
        grid-row: 2 !important;
        width: fit-content !important;
        box-sizing: border-box !important;
    }

    /* Label y el input en ROW en el modo cuadrícula */
    #extraFields .field-group,
    #extraFields .extra-field-input-wrapper,
    #topologyExtraFields .extra-field-input-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* Alineación al inicio de cada input */
    #extraFields .label-col,
    #topologyExtraFields .label-col {
        width: 90px !important;
        text-align: right !important;
        color: var(--black) !important;
        margin: 0 !important;
    }

    /* Excluir el ancho de 80px para cantidad en modo cuadrícula */
    #extraFields .field-group:nth-of-type(3) .label-col,
    #topologyExtraFields .extra-field-input-wrapper:nth-of-type(2) .label-col {
        width: auto !important;
    }

    #extraFields input,
    #topologyExtraFields input {
        max-width: 160px !important;
        box-sizing: border-box !important;
    }

}

@container devicemodal (min-width: 526px) and (max-width: 860px) {

    #extraFields:has(.extra-field-input-wrapper.dinamico) {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px 20px !important;
        align-items: center !important;
        width: 100% !important;
        padding-left: 20px !important;
        padding-block: 20px !important;
        box-sizing: border-box !important;
    }

    /* Posiciones de la cuadrícula para #extraFields cuando es dinámico */
    #extraFields:has(.extra-field-input-wrapper.dinamico)>.field-group:nth-of-type(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    #extraFields:has(.extra-field-input-wrapper.dinamico)>.field-group:nth-of-type(2) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    #extraFields:has(.extra-field-input-wrapper.dinamico)>.field-group:nth-of-type(3) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    #extraFields:has(.extra-field-input-wrapper.dinamico)>.extra-field-input-wrapper.dinamico {
        grid-column: 1 / span 2 !important;
        grid-row: 3 !important;
    }

    #extraFields:has(.extra-field-input-wrapper.dinamico)>#addDeviceConfirm {
        grid-column: 2 !important;
        grid-row: 2 !important;
        width: fit-content !important;
        box-sizing: border-box !important;
    }

    /* Label y el input en ROW en el modo cuadrícula */
    #extraFields:has(.extra-field-input-wrapper.dinamico) .field-group,
    #extraFields:has(.extra-field-input-wrapper.dinamico) .extra-field-input-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* Alineación al inicio de cada input */
    #extraFields:has(.extra-field-input-wrapper.dinamico) .label-col {
        width: 90px !important;
        text-align: right !important;
        color: var(--black) !important;
        margin: 0 !important;
    }

    /* Excluir el ancho de 80px para cantidad en modo cuadrícula */
    #extraFields:has(.extra-field-input-wrapper.dinamico) .field-group:nth-of-type(3) .label-col {
        width: auto !important;
    }

    #extraFields:has(.extra-field-input-wrapper.dinamico) input {
        max-width: 160px !important;
        box-sizing: border-box !important;
    }

}

@container devicemodal (max-width: 525px) {

    #extraFields,
    #topologyExtraFields {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 15px !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-block: 20px !important;
        box-sizing: border-box !important;
    }

    #extraFields .field-group,
    #extraFields .extra-field-input-wrapper,
    #topologyExtraFields .extra-field-input-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }

    #extraFields .label-col,
    #topologyExtraFields .label-col {
        width: 90px !important;
        text-align: right !important;
        color: var(--black) !important;
        margin: 0 !important;
    }

    #extraFields input,
    #topologyExtraFields input {
        width: 100% !important;
        max-width: 120px !important;
        text-align: left !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    #extraFields #addDeviceConfirm,
    #topologyExtraFields .btn-aplicar {
        width: 100% !important;
        max-width: 120px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        align-self: center !important;
    }

    #extraFields .field-group:nth-of-type(3) .label-col,
    #topologyExtraFields .extra-field-input-wrapper:nth-of-type(2) .label-col {
        width: 90px !important;
    }

}

@container devicemodal (max-width: 850px) {
    .accordion-content {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

@container devicemodal (max-width: 670px) {
    .accordion-content {
        grid-template-columns: repeat(4, 1fr) !important;
    }

}

@container devicemodal (max-width: 650px) {

    .tab-container-dispositivo {
        flex-wrap: wrap;
    }

    .tab-btn {
        font-size: 12px;
    }
}

@container devicemodal (max-width: 520px) {
    .accordion-content {
        grid-template-columns: repeat(3, 1fr) !important;
    }

}

@container devicemodal (max-width: 380px) {
    .accordion-content {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* contenido del modal de add dispositivo que contiene el header de cada acordeón y su contenido interno de TODOS los dispositivos (es decir agrupa todos los acordeones) */
.modal-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* header del modal de add dispositivo que contiene el botón de cerrar modal */
.modal-header {
    flex: 0 0 auto;
    padding: 25px;
    padding-left: 40px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    background-color: var(--white);
    z-index: 1;
    position: relative;
    justify-content: space-between;
}

.modal-header-accordion {
    flex: 0 0 auto;
    padding: 15px 0px 0px 0px;
    padding-inline: 3%;
    display: flex;
    align-items: center;
    border-bottom: 3px solid var(--gris-claro);
    background-color: var(--white);
    z-index: 1;
    position: relative;
    justify-content: space-between;
    height: 50px;
}

.search-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    position: relative;
}

.select-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.device-search-input {
    color: var(--black);
    width: 210px;
    padding: 5px 36px 5px;
    border: none;
    border-bottom: 3px solid var(--gris-claro);
    font-size: 14px;
    background-color: var(--white);
    outline: none;
    position: relative;
    top: 4px;
}

.search-container .device-search-input {
    top: 3px;
}

.device-search-input:hover {
    border-bottom: 3px solid var(--gris-neutro);
}

/* Keep the focus treatment on the visual trigger while a custom select is open. */
.select-input-wrapper:has(> .custom-select-dropdown:not(.oculto))>.device-search-input {
    border-bottom: 3px solid var(--color-primario) !important;
    /* color: var(--color-primario); */
}

.device-search-input:focus {
    border-bottom: 3px solid var(--color-primario) !important;
}

.search-icon.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(0.8);
}

.clear-search-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);

    cursor: pointer;
    background-color: var(--gris-neutro);
    width: 22px;
    height: 22px;

    -webkit-mask-image: url("../img/iconos/search-delete.svg");
    mask-image: url("../img/iconos/search-delete.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}

.clear-search-icon::before {
    display: none !important;
}

.clear-search-icon.visible {
    opacity: 0.7;
    visibility: visible;
    pointer-events: auto;
}

.clear-search-icon:not(.visible) {
    background-color: transparent !important;
}

.clear-search-icon:hover {
    background-color: var(--black) !important;
    opacity: 1 !important;
}

/* Topology Nav Delete Icon Styles */
.topology-nav .btn-aplicar .clear-search-icon {
    background-color: white !important;
}

.topology-nav .btn-alternativo-aplicar .clear-search-icon {
    background-color: var(--gris-neutro) !important;
}

.topology-nav .btn-alternativo-aplicar .clear-search-icon:hover {
    background-color: var(--black) !important;
}

.search-icon {
    position: absolute;
    left: 5px;
    top: 16px;
    transform: translateY(-50%);

    cursor: pointer;
    width: 24px;
    height: 24px;
    z-index: 2;

    transition:
        opacity 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;

    pointer-events: none;
}

.search-results-list {
    position: absolute;
    top: 100%;
    right: 0;
    width: 180px;
    max-height: 400px;
    background-color: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    margin-top: 8px;
    overflow-y: auto;
    animation: var(--fade);
    margin-right: 20px;
}

.search-results-list.oculto {
    display: none;
}

.search-result-item {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 7px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.search-result-item:hover {
    background-color: var(--gris-claro);
}

.search-result-item:first-child {
    border-radius: 12px 0px 0 0;
}

.search-result-item:last-child {
    border-radius: 0 0 0px 12px;
}

.search-result-item img {
    width: 30px;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.search-result-label {
    font-size: 13px;
    color: var(--black);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-icon:hover {
    color: var(--color-primario);
    transform: translateY(-50%) scale(1.1);
}

.modal-header-titulo {
    margin: 0;
    margin-bottom: 6px;
    padding-left: 39px;
    color: var(--black);
    font-size: 1.25rem;
}

.search-icon,
.clear-search-icon {
    -webkit-tap-highlight-color: transparent;
}

.search-icon:focus,
.clear-search-icon:focus {
    outline: none;
}

/* RESPONSIVE MODO MOVIL HEADER DEVICE MODAL-----BUSQUEDA */
@container devicemodal (max-width: 400px) {

    .modal-header {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .modal-header.mobile-search-open .search-container {
        flex: 1;
    }

    /* TITULO */
    .modal-header-titulo {
        position: relative;
        z-index: 1;
        white-space: nowrap;
        transition:
            opacity 0.25s ease,
            transform 0.25s ease;
    }

    /* CONTENEDOR BUSQUEDA */
    .search-container {
        margin-left: auto;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 24px;
    }

    .select-input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 24px;
        height: 24px;
    }

    /* INPUT OCULTO */
    .device-search-input {

        position: absolute;
        right: 0;

        width: 0;
        opacity: 0;

        padding-top: 6px;
        padding-bottom: 6px;

        padding-left: 0;
        padding-right: 0;

        border-width: 0;

        pointer-events: none;

        transition:
            width 0.25s ease,
            opacity 0.25s ease,
            padding 0.25s ease,
            border 0.25s ease;
    }

    /* LUPA */
    .search-icon {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        opacity: 1;
        pointer-events: auto;
        transition:
            opacity 0.2s ease,
            transform 0.2s ease;
    }

    /* TITULO DESAPARECE */
    .modal-header.mobile-search-open .modal-header-titulo {

        opacity: 0;
        transform: translateX(-20px);

        pointer-events: none;
    }

    /* INPUT APARECE */
    .modal-header.mobile-search-open .device-search-input {

        width: 170px;

        opacity: 1;

        padding: 6px 36px 6px 12px;

        border-width: 1px;

        pointer-events: auto;
    }



    /* MOSTRAR X */
    .modal-header.mobile-search-open .clear-search-icon.visible {

        opacity: 0.7;
        pointer-events: auto;
    }
}

/* footer de los modales intermedios */
.modal-footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 25px;
    gap: 10px;
    /* background-color: var(--white); */
    width: 100%;
    z-index: 1;
}

/* es el div de cada dispositivo que contiene el header y el contenido de dentro */
.accordion-item {
    overflow: hidden;
}

.accordionContainer {
    padding-inline: 3%;
}

/* es el título de cada acordeón */
.accordion-header {
    background-color: var(--white);
    /* transition: background-color 0.25s ease-in-out; */
    cursor: pointer;
    padding: 12px;
    padding-left: 20px;
    font-weight: var(--negrita);
    display: flex;
    align-items: center;
    user-select: none;
    border-top: 1px solid
        /*#e6e6e6*/
        var(--gris-claro);
    gap: 9px;
}

.accordion-title {
    font-weight: var(--negrita);
    color: #858585;
    /* transition: color 0.25s ease-in-out; */
}

/* quita borde superior SOLO al primer header */
.accordion-item:first-child .accordion-header {
    border-top: none;
}

.accordion-item:last-child .accordion-header {
    border-bottom: 1px solid
        /*#e6e6e6*/
        var(--gris-claro);
}

.accordion-item:last-child:has(.accordion-content.open) .accordion-header {
    border-bottom-color: transparent;
}


/* color del fondo cuando se hace hover */
.accordion-header:hover {
    background-color: linear-gradient(to bottom, #f8f8f8, #ffffff);
}

.accordion-header:hover .accordion-title {
    color: var(--gris-oscuro) !important;
}

.accordion-icon {
    font-size: 12px;
    transition: transform 0.2s ease;
    color: #858585;
    transform: rotate(-90deg);
}

/* es el contenido que se encuentra dentro de cada acordeón, es decir, el que almacena todos los dispositivos */
.accordion-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background-color: var(--white);
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.accordion-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0px 10px 0px 20px;
}


.accordion-content.open {
    max-height: none;
    overflow: visible;
    opacity: 1;
    padding: 18px;
    animation: var(--fade);
}


/* mostrar modal de add dispositivo */
.device-modal.mostrar {
    opacity: 1;
    pointer-events: auto;
}

/* galería de dispositivo de cada tipo */
#deviceGallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-items: center;
    width: 100%;
}

/* agrupa la imagen y el label de cada dispositivo del catálogo */
.device-card {
    width: 100%;
    max-width: 100px;
    text-align: center;
    cursor: pointer;
    border-radius: 8px;
    padding: 4px;
    background-color: var(--device-card-fondo);
    border: 2px solid transparent;
    box-shadow: rgba(0, 0, 0, 0.10) 0px 4px 12px;
    font-size: 12px;
}

/* imagen de cada dispositivo representado en la interfaz de módulos */
.device img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    cursor: pointer;
}

.device-card:hover {
    /* border: 2px solid rgba(0, 0, 0, .1) !important; */
    border: 2px solid var(--gris-80) !important;
}

/* al seleccionar un dispositivo en la galería se le coloca el borde gris al contenido */
.device-card.selected {
    /* border: 2px solid rgb(122, 120, 120) !important; */
    border: 2px solid var(--color-primario) !important;
}

/* modo intercambiar: card del mismo modelo que el dispositivo a intercambiar */
.device-card.swap-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(1);
    box-shadow: none;
}

.device-card.swap-disabled:hover,
.device-card.swap-disabled.selected {
    border: 2px solid transparent !important;
}

.device-card.swap-disabled img {
    cursor: not-allowed;
}

/* banner con el dispositivo que se está intercambiando (dentro de .header-rightPanel) */
.swap-info-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 39px;
    min-width: 0;
    animation: var(--fade);
}

.swap-info-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
}

.swap-info-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.swap-info-titulo {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--black);
}

.swap-info-detalle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    min-width: 0;
}

.swap-info-badge {
    padding: 1px 6px;
    border: 1px solid var(--gris-neutro);
    border-radius: 9999px;
    font-size: 11px;
    font-weight: var(--negrita);
    flex-shrink: 0;
    color: var(--black);
}

.swap-info-nombre {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--black);
}

.swap-info-modelo {
    font-weight: 400;
    font-size: 12px;
    opacity: 0.7;
    flex-shrink: 0;
}

/* select oculto siempre que solo se usa para traducir correctamente el header de cada acordeón */
#deviceSelect {
    display: none;
}


/* dispositivo añadido a la interfaz que contiene la imagen y el label */
.device {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    height: max-content;
    padding: 15px;
    width: 145px;
    border: 1px solid var(--gris-claro);
    animation: var(--fade);
    position: relative;
}

.device:hover {
    background-color: var(--gris-claro);
    transition: background-color 0.15s ease-in-out;
}

.device.drag-over:not(#addDeviceBtn) {
    background-color: rgba(0, 188, 112, 0.1);
    outline: 1px solid var(--color-primario) !important;
    outline-offset: -2px;
}

.device.drag-forbidden:not(#addDeviceBtn),
.device-row.drag-forbidden {
    cursor: not-allowed !important;
    background-color: rgba(255, 77, 77, 0.05) !important;
    outline: 1px solid #ff4d4d !important;
    outline-offset: -2px;
}


.device-row.drag-forbidden td {
    background-color: rgba(255, 77, 77, 0.05) !important;
    position: relative;
}

#addDeviceBtn.drag-forbidden {
    opacity: 0.7;
    cursor: not-allowed;
}

.assisted-link-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gris-neutro);
    cursor: grab;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.assisted-link-handle:hover {
    color: var(--black);
}

.assisted-link-handle:active {
    cursor: grabbing;
}

.assisted-link-handle i {
    font-size: 16px;
}

/* Resaltado para elementos destino durante el arrastre asistido */
.assisted-drag-highlight:not(#addDeviceBtn),
.device-row.assisted-drag-highlight {
    outline: 1px dashed var(--gris-neutro) !important;
    outline-offset: -2px;
    /* background-color: rgba(0, 188, 112, 0.1); */
}

/* Estilo para el dispositivo de origen (prohibido) durante el arrastre asistido */
.assisted-drag-forbidden,
.device-row.assisted-drag-forbidden {
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}

.entrada-input.assisted-drag-forbidden,
.textarea-dispositivo.assisted-drag-forbidden,
.input-telegrama.assisted-drag-forbidden,
.input-dispositivo.assisted-drag-forbidden,
.entrada-item-container.assisted-drag-forbidden,
.telegrama-wrapper.assisted-drag-forbidden,
.inst-output-item.assisted-drag-forbidden {
    cursor: not-allowed !important;
    pointer-events: none !important;
    user-select: none !important;
    opacity: 0.5 !important;
}

/* Evita soltar sobre el propio elemento que se arrastra, pero sin mostrarlo opaco ni con cursor prohibido */
.assisted-drag-self {
    pointer-events: none !important;
}


/* Estilo para los inputs de salida durante el dragover para que coincida con el de los dispositivos */
.salida-input.assisted-drag-highlight {
    outline: 1px dashed var(--gris-neutro) !important;
    outline-offset: -1px;
}

.salida-input.drag-over {
    background-color: rgba(0, 188, 112, 0.1);
    outline: 1px solid var(--color-primario) !important;
    outline-offset: -1px;
}


/* Drag over para filas de tabla */
.device-row.drag-over {
    background-color: rgba(0, 188, 112, 0.1) !important;
    outline: 1px solid var(--color-primario) !important;
    outline-offset: -2px;
}

.device-row.drag-over td {
    background-color: rgba(0, 188, 112, 0.1) !important;
}

/* dispositivo seleccionado en la interfaz principal */
.device.selected-device-container {
    background-color: rgba(0, 188, 112, 0.1) !important;
}

/* label del dispositivo */
.device .label {
    font-size: 12px;
    color: var(--black);
    text-align: center;

    cursor: text;
    white-space: nowrap;
    /* no saltos de línea */
    overflow: hidden;
    /* oculta el sobrante */
    text-overflow: ellipsis;
    /* muestra ... */
    flex: 1;
    min-width: 0;
    /* importante para que calcule el recorte */
}

/* Ajuste específico cuando está en el footer para que no se apilen */
.device-footer .label {
    text-align: center;
    width: auto;
    flex: 0 1 auto;
}

.device-modal h3 {
    margin-top: 0;
}

/* círculo que indica la dirección del dispositivo en device*/
.device-badge,
.direccion-table-badge {
    /* position: absolute; */
    /* top: 6px; */
    /* left: 6px; */

    background: var(--white);
    color: var(--black);

    font-size: 11px;
    font-weight: var(--negrita);
    /* line-height: 0px; */

    padding: 1px 6px;
    border-radius: 999px;

    border: 1px solid var(--gris-neutro);

    display: flex;
    /* align-items: center; */
    justify-content: center;


    z-index: 5;
    flex-shrink: 0;
}

.direccion-table-badge {
    background-color: var(--white) !important;
    min-width: 20px;
    align-items: center;
    width: fit-content;
    margin: 0 auto;
    display: inline-flex !important;
}

.tabla-listado-device th[data-col="direccion"] {
    text-align: left !important;
}

.tabla-listado-device td[data-col="direccion"] {
    text-align: center !important;
}

.device-footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 5px;
    height: 31px;
    overflow: hidden;
}

.device-footer.has-uid {
    height: 31px;
    overflow: hidden;
}

.device-label-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    flex: 0 1 auto;
    line-height: 1.1;
}

.device-label-stack .label {
    max-width: 100%;
}

.device-uid-tag {
    font-size: 10px;
    line-height: 12px;
    color: var(--gris-neutro);
    font-family: monospace;
    font-weight: 500;
    white-space: nowrap;
}

.device-footer .device-prog-check-icon {
    color: #27ae60;
    font-size: 15px;
    flex-shrink: 0;
    align-self: flex-end;
    margin-bottom: 2px;
}


/* ──────────────────────────────────────────────
   Badges circulares en la columna "Otros" del listado
   ────────────────────────────────────────────── */
.otros-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;
    border-radius: 999px;

    font-size: 10px;
    color: white;
    cursor: default;

}

.otros-badge:hover {
    cursor: pointer;
}

/* Verde para vinculación a Topología */
.otros-badge--vinculado {
    color: var(--color-primario);
}


/* kebab menu */
.device-kebab {
    position: absolute;
    top: 6px;
    right: 6px;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
    cursor: pointer;

    border-radius: 999px;

    color: var(--black);

    transition: all 0.2s ease;
}

.device-kebab:hover {
    background: var(--hover-iconos);
}

/* botón que cierra el modal de add dispositivo */
#closeDeviceModal {
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 5px;
    border: none;
    outline: none;
    color: var(--white);
    width: 100%;
    font-weight: var(--negrita);
    background: transparent;
    color: var(--gris-neutro);
    font-size: 16px;
}

#closeDeviceModal:hover {
    color: black;
}

/* contenedor que agrupa la dirección y el nombre del nodo */
#extraFields,
#topologyExtraFields {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    width: 100%;
    padding-left: 20px;
    padding-block: 20px;
    animation: var(--fade);
}

#extraFields .label-col,
#topologyExtraFields .label-col {
    width: unset;
    text-align: unset;
}


/* div que contiene el label y el input de dirección y  de nombre de nodo */
.field-group {
    display: flex;
    gap: 8px;
    text-wrap: nowrap;
    align-items: center;
    font-size: 14px;

}

.field-group,
.extra-field-input-wrapper {
    color: var(--black);
}

/* .field-group input,
.extra-field-input-wrapper input {
    height: 25px;
} */


#deviceAddress,
.extra-field-input-wrapper input {
    width: 50px;
}

#deviceName {
    width: 160px;
}

#cantidadDispositivos {
    width: 50px;
}

/* lo ponemos oculto por defecto */
#extraFields.oculto,
#topologyExtraFields.oculto {
    display: none !important;
}


/* div de número de DALI, DMX y Danfoss */
.extra-field-input-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    text-wrap: nowrap;
}


/****************************************************/
/* #endregion [06] ----- FIN DE MODAL DE ADD DISPOSITIVO ----- */
/****************************************************/


/****************************************************/
/* #region [07] ----- CONTENIDO DE MÓDULOS DE INSTALACIÓN (devices añadidos a la interfaz, botón que saca el modal de añadir dispositivo, etc) ----- */
/****************************************************/

.top-fixed {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 12px 24px;
    background-color: var(--white);
    border-bottom: 1px solid var(--gris-claro);
}

#modulosInstalacion {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
}

/* contenedor que almacena/representa todos los dispositivos añadidos a la interfaz */
#modulos {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 25px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--white);
}

#modulosInstalacion .tab-container-dispositivo,
#topologia .tab-container-dispositivo {
    animation: var(--fade);
}

#modulos::-webkit-scrollbar {
    width: 6px;
}

#modulos::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgb(179, 177, 177);
}

#modulos::-webkit-scrollbar-thumb:hover {
    background-color: rgb(126, 125, 125);
}

#modulos.grid-view .device-properties {
    display: none;
}

#modulos.grid-view .add-device-grid {
    display: flex;
}



/* botón de '+' que abre el modal de añadir dispositivo */
.add-device-btn {
    cursor: pointer;
    animation: var(--fade);
}

.add-device-btn .device-img {
    width: 48px !important;
    height: 48px !important;
    margin: 16px 0;
    /* Añadimos margen para que ocupe el mismo espacio visual que una de 80x80 (80 - 48 = 32 / 2 = 16) */
}

.add-device-btn:hover {
    background-color: var(--gris-claro);
    transition: background-color 0.15s ease-in-out;
}

/* texto de Añadir NODO debajo del botón que abre modal de añadir dispositivo */
.add-device-btn .label {
    cursor: pointer;
}

/* clase que se usa para ocultar lo que se desee */
.oculto {
    display: none !important;
}

/* se usa para mostrar módulos de instalación o diagnósticos*/
.vista {
    display: none;
    flex: 1;
    overflow: hidden;
}

/* la clase se usa para decidir cual de las dos vistas mencionadas previamente va a mostrarse */
.vista.visible {
    display: flex;
    flex-direction: row;
    /* flex-wrap: wrap; */
    /* gap: 8px; */
    overflow: hidden;
}

/* opciones adicionales que salen cuando se hace click derecho en cada dispositivo o click en archivo */
.context-menu {
    position: absolute;
    background-color: var(--white);
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.10) 0px 4px 12px;
    z-index: 2000;
    border: 1px solid var(--gris-tarjeta-st);
    min-width: 120px;
    animation: var(--fade);
    overflow: hidden;
}

/* por defecto las opciones aparecen ocultas */
.context-menu.oculto {
    display: none !important;
}

#menuLista,
#menuListaTopologia {
    top: 58px;
    left: 0px;
    width: max-content;
    display: flex;
    flex-direction: column;
}

/****************************************************/
/* #endregion [07] ----- FIN CONTENIDO DE MÓDULOS DE INSTALACIÓN (devices añadidos a la interfaz, botón que saca el modal de añadir dispositivo, etc) ----- */
/****************************************************/


/****************************************************/
/* #region [08] ----- TABLA DE LISTADO DE DISPOSITIVOS ----- */
/****************************************************/
/* Contenedor con scroll */
#modulos .device-table-wrapper {
    width: 100%;
    min-width: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    animation: var(--fade);
}

/* Tabla principal */
.tabla-listado-device {
    width: 100%;
    min-width: 800px;
    table-layout: fixed;
    border-collapse: collapse;
    margin-bottom: 6px;
}

.assistant-summary-table,
.assistant-summary-table.tabla-listado-device {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed !important;
}

.assistant-summary-table tbody td {
    height: 45px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
}

.tabla-listado-device {
    --bs-table-bg: var(--white);

}

/* Celdas */
.tabla-listado-device th,
.tabla-listado-device td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 6px 10px;
    color: var(--black);
    background-color: var(--white);
}

.tabla-listado-device td {
    font-size: 14px;
}

.tabla-listado-device th {
    font-size: 11px;
}

/* Header sticky */
.tabla-listado-device thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    /* background-color: transparent; */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
    color: var(--black);
    text-align: left;
}



/* Imagen en la fila */
.device-img {
    display: block;
    margin: 0 auto;
}

/* td:first-child {
    display: flex;
    flex-direction: row;
    align-items: center;
} */

/* td:nth-child(2) {
    width: 80px;
} */

td:first-child .accordion-btn {
    width: unset;
}

/* Permitir click derecho en cualquier elemento */
.device-table-wrapper tr td,
.device-table-wrapper tr td * {
    pointer-events: auto;
    /* background-color: transparent; */
}

/* Botón editar dentro de label */
.edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background-color: #f0f0f0;
    color: var(--color-primario);
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    transition: opacity var(--suave);
    opacity: 0;
}

.label-container:hover .edit-btn {
    opacity: 1;
}

.edit-btn:hover {
    background-color: #dcdcdc;
}


/* ---------------------------
   Primer td: padres e hijos
----------------------------*/

/* Primer td de todos (padres e hijos) */
/* .tabla-listado-device td:first-child,
.device-child-row td:first-child {
    display: flex;
    align-items: center;
    gap: 4px;
} */

/* ---------------------------
   Hijos (device-child-row)
----------------------------*/
.device-child-row td:first-child .child-dot {
    font-size: 0.8rem;
    color: var(--gris-neutro);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Hijos: quitar border-bottom en todos los td */
.device-child-row td {
    border-bottom: none;
}

.last-child-of-parent td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.last-child-of-parent {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* ---------------------------
   Botón acordeón padres
----------------------------*/

.accordion-btn {
    display: inline-flex;
    align-items: center;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

/* ---------------------------
   Responsive: panel < 680px
----------------------------*/
@container leftpanel (max-width: 680px) {



    .icons {
        gap: 12px !important;
    }


}

#modulos.list-view {
    display: block;
}

#modulos.list-view .device,
#modulos.list-view #addDeviceBtn {
    display: none;
}

#modulos.list-view.list-view-empty #addDeviceBtn {
    display: flex;
}

#modulos.list-view .add-device-header {
    display: flex;
}



.label-container {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.node-name-truncate {
    max-width: 180px;
    /* ajusta según tu tabla */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

/* Iconos de vinculación personalizados */
.icon-link,
.icon-link-slash {
    display: inline-block;
    width: 24px;
    height: 24px;
    position: relative;
    vertical-align: middle;
}

.icon-link:not([class*="fa-"])::after,
.icon-link-slash:not([class*="fa-"])::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask-image: url('/img/iconos/link.svg');
    mask-image: url('/img/iconos/link.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}




.icon-unlink,
.icon-unlink-slash {
    display: inline-block;
    width: 24px;
    height: 24px;
    position: relative;
    vertical-align: middle;
}

.icon-unlink:not([class*="fa-"])::after,
.icon-unlink-slash:not([class*="fa-"])::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask-image: url('/img/iconos/unlink.svg');
    mask-image: url('/img/iconos/unlink.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}



/* Posicionamiento del icono de vínculo dentro de campos de modales */
.body-dispositivo .icon-link,
.content-dispositivo .icon-link,
.body-dispositivo .icon-link-slash,
.content-dispositivo .icon-link-slash {
    position: absolute !important;
    top: 0px !important;
    right: 3px !important;
    z-index: 5;
}


/****************************************************/
/* #endregion [08] ----- FIN TABLA DE LISTADO DE DISPOSITIVOS ----- */
/****************************************************/


/****************************************************/
/* #region [09] ----- TOPOLOGIA DEL PROYECTO----- */
/****************************************************/

#topologia {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background-color: var(--white);
}

.topologia-container {
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background-color: var(--white);
}

.topologia-listado {
    flex: 1;
    overflow-y: auto;
    padding: 25px;
    animation: var(--fade);
    border-bottom: 2px solid var(--gris-claro);
}

.topologia-summary-container {
    flex-shrink: 0;
    overflow-y: visible;
}



.node {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    position: relative;
    margin-top: 5px;
    user-select: none;
}

@keyframes highlight-fade {
    0% {
        background-color: rgba(0, 188, 113, 0.411)
    }

    100% {
        background-color: transparent;
    }
}

.flash-highlight {
    animation: highlight-fade 1.5s ease-out forwards;
}

.node-content-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border-radius: 9999px;
    position: relative;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    min-height: 20px;
}

.node-actions-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding-right: 15px;
}

.node-content-wrapper:hover {
    background-color: var(--gris-claro);
    cursor: pointer;
}

.node-content-wrapper:hover .more-topology-btn {
    opacity: 1;
}

.node-content-wrapper.selected {
    background-color: rgba(0, 188, 112, 0.1);
    border-color: var(--color-primario);
}

.node-content-wrapper.no-children .toggle-btn {
    transform: rotate(0deg) !important;
}

.node-content-wrapper.no-children .toggle-btn>svg {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.node-content-wrapper.no-children:hover .toggle-btn>svg,
.node-content-wrapper.no-children.selected .toggle-btn>svg {
    opacity: 1;
}

.node-label {
    color: var(--black);
    align-self: center;
}


.more-topology-btn {
    position: absolute;
    right: 0px;
    transition: opacity 0.2s ease;
    color: var(--black);
}

.more-topology-btn:hover {
    color: var(--color-primario);
}

.node-action-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.node-content-wrapper:hover .node-action-btn {
    opacity: 1;
    pointer-events: auto;
}

.topology-action-btn {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.topology-action-btn:hover {
    background-color: var(--gris-80) !important;
}


.add-child-btn {
    border: none;
    background: var(--color-primario) !important;
    border-radius: 9999px;
    height: 18px;
    width: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: white;
    font-size: 10px;
}

.delete-child-btn {
    border: none;
    box-shadow: inset 0 0 0 2px var(--color-primario);
    background: var(--white) !important;
    border-radius: 9999px;
    height: 18px;
    width: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--color-primario);
    font-size: 10px;
}

.add-child-btn:hover {
    filter: brightness(110%);
}

.add-child-btn[style*="visibility: hidden"] {
    opacity: 0 !important;
}

.root-add-topology {
    display: flex;
    animation: var(--fade);
}

.root-add-topology .device {
    border: none;
    gap: 0;
    padding: 5px;
}

.root-add-topology .device:hover {
    background-color: transparent;
}

/* Contenedor de hijos */
.children {
    margin-left: 35px;
    position: relative;
    /* border-left: 1.5px solid var(--gris-neutro); */
    display: none;
}

.node.expanded>.children {
    display: block;
}

/* Imagen de acordeón de elementos */
/* #topologyAccordionContainer .device-card img {
    width: 48px !important;
    height: 48px !important;
} */


/* PROVISIONAL PARA QUE ESTAS TARJETAS ESTEN CON MISMO TAMAÑO QUE LAS DE DISPOSITIVOS */
/* #topologyAccordionContainer .device-card {
    display: flex;
    flex-direction: column;
    height: 94px;
    justify-content: center;
    align-items: center;
    padding-top: 15px;
} */


.accordion-header-elementos {
    display: flex;
    align-items: center;
    padding: 20px 20px 5px 40px;
    background-color: var(--white);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.accordion-header-elementos span {
    color: #858585;
    font-weight: var(--negrita);
}


/* Acordeón de Topología en el panel derecho */
.topology-el-item {
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    border-radius: 6px;
    margin: 2px 0;
}

.topology-el-item:hover {
    background-color: rgba(0, 188, 112, 0.08);
}

/* --- Sidebars Relation Trees (Topología) --- */
.topology-relations-view {
    animation: var(--fade);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.relation-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--black);
    margin: 15px 0 8px 0;
    font-weight: var(--negrita);
}

.relation-tree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
    user-select: none;
    margin: 1px 0;
}

.relation-tree-item:hover {
    background-color: var(--gris-claro);
}

.relation-tree-item.category {
    font-weight: 600;
    color: var(--black);
}

.relation-tree-item.selected {
    background-color: var(--color-primario);
    color: white !important;
}

.relation-tree-item i {
    width: 16px;
    text-align: center;
}

.relation-tree-children {
    display: none;
    margin-left: 20px;
    padding-left: 10px;
    border-left: 1px dashed var(--gris-neutro);
}

.relation-tree-children.open {
    display: block;
}

.relation-tree-placeholder {
    font-size: 12px;
    color: var(--gris-oscuro);
    font-style: italic;
    padding: 10px;
    text-align: center;
    border: 1px dashed var(--gris-neutro);
    border-radius: 6px;
}

.btn-config-topology {
    background: none;
    border: none;
    color: var(--gris-oscuro);
    cursor: pointer;
    font-size: 18px;
    padding: 5px;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-config-topology:hover {
    background-color: var(--gris-claro);
    color: var(--color-primario);
    transform: rotate(45deg);
}

.more-topology-btn:hover {
    color: var(--color-primario);
}


/* ──────────────────────────────────────────────────────────────────────────
   ÁRBOL GUIADO DE SALIDAS — Tab "Salidas" (Topología)
   ────────────────────────────────────────────────────────────────────────── */

.installation-outputs-tree {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 2px;
    animation: var(--fade);
}

.inst-tree-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    color: var(--black);
    font-size: 13px;
    opacity: 0.7;
    text-align: center;
}

/* Grupo por dispositivo */
.inst-device-group {
    border: none;
    background-color: transparent;
    transition: none;
    margin-bottom: 4px;
}

.inst-device-group:hover {
    box-shadow: none;
}

/* Cabecera del dispositivo (colapsable) */
.inst-device-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    background-color: transparent;
    user-select: none;
    transition: background-color 0.2s ease;
    border-radius: 8px;
}

.inst-device-header:hover {
    background-color: var(--gris-claro);
}

.inst-device-img {
    width: 30px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.9;
}

body.dark .inst-device-img {
    filter: invert(1) brightness(100);
}

.inst-device-label {
    font-size: 12px;
    font-weight: var(--negrita);
    color: var(--black);
    letter-spacing: 0.01em;
}

/* Contenedor de salidas */
.inst-device-outputs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0 4px 50px;
    margin-left: 19px;
    /* Quitamos el border-left global para manejarlo por ítem */
    background-color: transparent;
}

/* Ítem de salida individual (draggable) */
.inst-output-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 13px;
    color: var(--black);
    cursor: default;
    border: 2px solid transparent;
    user-select: none;
    background-color: var(--device-card-fondo);
    position: relative;
}

.inst-output-item::before {
    content: "";
    position: absolute;
    left: -50px;
    top: 50%;
    width: 40px;
    height: 1px;
    background-color: var(--gris-80);
}

/* Línea vertical que se corta en el último elemento */
.inst-output-item::after {
    content: "";
    position: absolute;
    left: -50px;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--gris-80);
}

.inst-output-item:not(:last-child)::after {
    bottom: -4px;
    /* Extender para cerrar el gap con el siguiente */
}

.inst-output-item:first-child::after {
    top: -4px;
    /* Extender hacia arriba hacia el header */
}

.inst-output-item:last-child::after {
    bottom: 50%;
    /* Termina en la línea horizontal */
}

.inst-output-item:hover {
    border: 2px solid var(--gris-80);
    cursor: pointer;
}

/* .inst-output-item:active,
.inst-output-item.selected {
    border: 2px solid var(--color-primario) !important;
} */

.icon-drag-drop:hover {
    background-color: var(--black);
}

.icon-drag-drop:active,
.inst-output-item.dragging .icon-drag-drop {
    cursor: grabbing;
}

.inst-output-icon {
    font-size: 12px;
    color: var(--color-primario);
    flex-shrink: 0;
}

.inst-output-icon.desvinculado {
    color: #b0b0b0;
}

.inst-output-label {
    min-width: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Nodo del árbol principal que recibe un drop */
.node-content-wrapper.drop-target {
    /* outline: 2px dashed var(--gris-neutro) !important;
    outline-offset: 1px !important; */
    border: 1px dashed var(--black) !important;
}

/* Nodo que está siendo arrastrado */
.node-content-wrapper.dragging-source {
    cursor: grabbing;
    border: 1px dashed var(--gris-neutro) !important;
    /* outline-offset: -1px !important; */
    transition: none !important;
    border: none;
}

/* Ocultar el botón de "Más" al hacer hover con animación */
.node-content-wrapper:hover .more-topology-btn {
    opacity: 0;
    pointer-events: none;
}

/* Forzar columna en Cubic-TL y ST */
.modal-horizontalEFPA.is-cubic-tl,
.modal-horizontalEFPA.is-st {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
}

.modal-horizontalEFPA.is-cubic-tl .modal-rightEFPA,
.modal-horizontalEFPA.is-st .modal-rightEFPA {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 15px !important;
}


/* ──────────────────────────────────────────────────────────────────────────
REORDENACIÓN DRAG & DROP
   ────────────────────────────────────────────────────────────────────────── */

/* Línea indicadora antes del nodo */
.node-content-wrapper.drop-before {
    position: relative;
}

.node-content-wrapper.drop-before::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--gris-neutro);
    z-index: 10;
    border-radius: 2px;
}

/* Línea indicadora después del nodo */
.node-content-wrapper.drop-after {
    position: relative;
}

.node-content-wrapper.drop-after::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--gris-neutro);
    z-index: 10;
    border-radius: 2px;
}


/* Estado del nodo mientras se arrastra */
.node-content-wrapper.dragging-source {
    opacity: 0.6;
    filter: grayscale(1);
    /* border: 1px dashed var(--gris-neutro) !important; */
    transition: none !important;
}

/* Nodo en modo mover (dentro de...) */
.node-content-wrapper.moving-node {
    outline: 2px dashed var(--gris-neutro) !important;
    outline-offset: 1px !important;
    transition: none !important;
}

/* Highlight al soltar o mover */
.node-content-wrapper.flash-highlight {
    animation: flashHighlight 1.6s ease-out;
}

@keyframes flashHighlight {
    0% {
        background-color: rgba(0, 188, 112, 0.4);
    }

    100% {
        background-color: transparent;
    }
}

/* Icono Drag & Drop personalizado */
.icon-drag-drop {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: -3px;
    cursor: grab;
    background-color: var(--gris-neutro);
    -webkit-mask-image: url('../img/iconos/drag-drop.svg');
    mask-image: url('../img/iconos/drag-drop.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: middle;
}

/* Contenedor principal de módulos en Instalación al recibir drop de dispositivo */
#modulos.drop-target {
    outline: 2px dashed var(--gris-neutro) !important;
    outline-offset: -4px !important;
    border-radius: 12px !important;
}

#modulos.drop-target-hover {
    /* outline: 2px solid var(--color-primario) !important;
    outline-offset: -4px !important; */
    background-color: rgba(0, 188, 113, 0.05);
    border-radius: 12px !important;
}

#modulos.drop-target-child-hover {
    outline: none !important;
}

.device.drop-target-hover-conflict {
    outline: 1px solid var(--color-primario) !important;
    outline-offset: -2px;
    background-color: rgba(0, 188, 113, 0.05) !important;
    box-shadow: none !important;
}

.device.drop-target-error-conflict {
    outline: 1px solid var(--rojo, #d9534f) !important;
    background-color: rgba(217, 83, 79, 0.05) !important;
    outline-offset: -2px;
}

.device.drop-target-warning-conflict {
    outline: 1px solid #f0ad4e !important;
    background-color: rgba(240, 173, 78, 0.05) !important;
    outline-offset: -2px;
}




/* Radio button de los acordeones EFPA en lugar del chevron */
.accordion-radioEFPA {
    cursor: pointer !important;
    transition: background-color var(--suave) !important;
}

/* Header de proyecto activo */
.header-proyecto-container {
    background: var(--gris-toolbar);
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px 0 10px;
    position: relative;
}

.header-proyecto-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid var(--gris-oscuro);
    border-radius: 50%;
    color: var(--gris-oscuro);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-back-btn i {
    font-size: 17px;
    margin-right: 1px;
}

.header-proyecto-content {
    align-items: baseline;
    display: flex;
    gap: 20px;
}

.header-proyecto-titulo {
    color: var(--titulo-proyecto);
    margin: 0;
    font-size: 20px;
    font-weight: var(--negrita)
}

.header-proyecto-ubicacion {
    color: var(--titulo-proyecto);
    margin: 0;
    font-size: 14px;
    font-weight: var(--negrita);
}

/* Aviso de SOLO LECTURA (inicio.js, renderLiveStatusBadge): usa el mismo tono
   de aviso que el login, adaptado a los temas claro y oscuro. */
.live-status-badge {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 16px;
    background-color: hsla(0, 0%, 56.1%, 0.99);
    color: white;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    animation: var(--fade-sin-movimiento);
}



.header-proyecto-estado {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}


.news-slider-arrow {
    background: var(--white);
    border: 1px solid var(--gris-80);
    color: var(--black);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: background 0.2s, color 0.2s;
    font-size: 13px;
    padding: unset;
}

.news-slider-arrow:hover {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: white;
}

.header-proyecto-container .news-slider-arrow {
    position: relative;
    top: auto;
    transform: none;
}

.header-proyecto-left .news-slider-arrow,
.header-proyecto-left .news-slider-arrow .chevron-icon {
    opacity: 1;
}

.header-proyecto-estado .news-slider-arrow {
    margin-left: 6px;
}

.news-slider-arrow .kebab-dots-icon {
    width: 24px;
    height: 24px;
    background-color: var(--gris-oscuro);
    -webkit-mask: url('../img/iconos/menu-kebab.svg') no-repeat center / contain;
    mask: url('../img/iconos/menu-kebab.svg') no-repeat center / contain;
    display: inline-block;
    transition: background-color 0.2s ease;
}

.news-slider-arrow:hover .kebab-dots-icon {
    background-color: #fff;
}

body.dark .news-slider-arrow .kebab-dots-icon {
    background-color: var(--black);
}

.project-header-kebab-btn:not(.news-slider-arrow) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--gris-oscuro);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
    outline: none;
    margin-left: 14px;
}

.project-header-kebab-btn:not(.news-slider-arrow) .kebab-dots-icon {
    width: 24px;
    height: 24px;
    background-color: var(--gris-oscuro);
    -webkit-mask: url('../img/iconos/menu-kebab.svg') no-repeat center / contain;
    mask: url('../img/iconos/menu-kebab.svg') no-repeat center / contain;
    display: inline-block;
}

.estado-label {
    font-weight: var(--negrita);
    color: var(--titulo-proyecto);
}


.estado-select {
    font-weight: var(--negrita);
    background: transparent;
    border: none;
    color: var(--titulo-proyecto);
    font-size: 16px;
    cursor: pointer;
    outline: none;
    padding: 2px 26px 0px 4px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-transform: uppercase;
}

.estado-select option {
    background-color: var(--white);
    color: var(--black);
    text-transform: none;
}

.estado-chevron {
    position: absolute;
    right: 0;
    width: 14px;
    height: 20px;
    pointer-events: none;
}

.config-mode-select {
    font-weight: var(--negrita);
    background: transparent;
    border: none;
    color: var(--titulo-proyecto);
    font-size: 16px;
    cursor: pointer;
    outline: none;
    padding: 2px 26px 0px 4px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-transform: none;
}

.config-mode-select option,
.config-mode-select optgroup {
    background-color: var(--white);
    color: var(--black);
    text-transform: none;
}

.config-mode-select:disabled,
.config-mode-select.disabled,
.custom-select-trigger.disabled,
.input-dispositivo:disabled {
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

.config-chevron {
    position: absolute;
    right: 0;
    width: 14px;
    height: 20px;
    pointer-events: none;
}

body.dark .config-icon-left {
    filter: invert(1) brightness(100);
}



/* ========================================= */
/* TOPOLOGIA */
/* ========================================= */


/* Tooltip Custom para Iconos de Informacion */
.tooltip-custom {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-left: 7px;
}

.tooltip-custom .tooltiptext {
    visibility: hidden;
    width: 220px;
    background-color: #333;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 8px 10px;
    position: absolute;
    z-index: 1000;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 11px;
    font-weight: normal;
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    line-height: 1.4;
}

.tooltip-custom .tooltiptext::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.tooltip-custom:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip-custom.tooltip-left-aligned .tooltiptext {
    left: -15px;
    transform: none;
}

.tooltip-custom.tooltip-left-aligned .tooltiptext::after {
    left: 17px;
    margin-left: 0;
}


.tooltip-custom.tooltip-left-aligned i:hover {
    color: var(--color-primario) !important;
}




/****************************************************/
/* #endregion [09] ----- FIN TOPOLOGIA DEL PROYECTO----- */
/****************************************************/


/****************************************************/
/* #region [10] ----- ESTILOS DEL MODAL GUARDAR COMO ----- */
/****************************************************/
.modal-guardar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-contenido {
    background: var(--white);
    padding: 20px;
    border-radius: 12px;
    width: 430px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    color: var(--black);
}

.modal-contenido h2 {
    margin-bottom: 10px;
}

.descripcion {
    font-size: 14px;
    color: var(--gris-oscuro);
}

.modal-contenido input {
    width: 100%;
    padding: 8px;
    margin: 10px 0;
}

.acciones {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 5px;
}

.error {
    color: #d9534f;
    font-size: 13px;
    margin-top: 5px;
    margin-bottom: 15px;
    min-height: 18px;
}


/****************************************************/
/* #endregion [10] ----- FIN ESTILOS DEL MODAL GUARDAR COMO ----- */
/****************************************************/


/****************************************************/
/* #region [11] ----- APARTADO DIAGNÓSTICO----- */
/****************************************************/

#diagnostico {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.diagnosticos-main {
    width: 100%;
    background-color: var(--gris-claro);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-right: 1px solid var(--color-primario);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.diagnosticos-content {
    background-color: var(--white);
    border: 1px solid var(--gris-neutro);
    border-top: none;
    padding: 20px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-right: none;
    position: relative;
    /* ajusta según lo que haya arriba/abajo */
    overflow-y: auto;
}

/* BARRA LATERAL DE DIAGNÓSTICOS */
.diagnosticos-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}


.diagnosticos-side {
    width: 500px;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.05);
}


.diagnosticos-side .side-header {
    padding: 15px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.diagnosticos-side .side-header h4 {
    margin: 0;
    font-size: 15px;
    color: var(--color-primario);
}

.diagnosticos-side .side-content {
    flex: 1;
    padding: 10px;
    display: flex;
}

.diagnosticos-side textarea {
    width: 100%;
    height: 100%;
    resize: none;
    border: none;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 8px;
    font-family: monospace;
    font-size: 13px;
    color: #374151;
}

.diagnosticos-side .side-footer {
    padding: 10px;
    border-top: 1px solid #e2e8f0;
    text-align: right;
}

.diagnosticos-side .btn-secondary {
    background-color: #e5e7eb;
    color: #374151;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
}

.diagnosticos-side .btn-secondary:hover {
    background-color: #d1d5db;
}

/* ---------------------------
   RENDER TELEGRAMAS
----------------------------*/
.diag-telegrams-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 20px;
}

/* Tarjetas */
.diag-card {
    background-color: var(--white);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    transition: transform var(--suave), box-shadow var(--suave);
}

.diag-card h3 {
    font-size: 16px;
    color: var(--color-primario);
    margin-bottom: 15px;
    font-weight: var(--negrita);
}

/* Campos */
.diag-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.diag-form label {
    font-size: 14px;
    color: var(--gris-oscuro);
}

.diag-form input,
.diag-form select {
    border: none;
    border-bottom: 2px solid #d1d5db;
    padding: 6px 4px;
    font-size: 14px;
    outline: none;
    background: transparent;
}

.diag-form input:focus,
.diag-form select:focus {
    border-bottom-color: var(--color-primario);
}

.input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background-color: var(--color-primario);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: var(--negrita);
}

.btn-primary:hover {
    filter: brightness(105%);
}

.btn-secondary {
    background-color: var(--color-primario);
    color: var(--white);
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: var(--negrita);
}

.btn-secondary:hover {
    filter: brightness(105%);
}

.bus-info {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.bus-stats {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-inline: 50px;
}

.bus-stats div {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    color: var(--gris-oscuro);
}

.bus-stats strong {
    color: var(--color-primario);
    font-size: 16px;
}

.diag-receive {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    width: 100%;
    justify-content: space-between;
}

.diag-receive-subapartado {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.diag-receive p {
    font-size: 15px;
    color: var(--gris-oscuro);
    margin: 4px 0;
}

.diag-receive hr {
    height: 25px;
    background-color: var(--color-primario);
    width: 4px;
}

.diag-receive input {
    width: 75px;
    border: none;
    border-bottom: 2px solid #d1d5db;
    font-size: 14px;
    outline: none;
    background: transparent;
    pointer-events: none;
    cursor: default;
}

/* ---------------------------
   RENDER DE ID ÚNICO
----------------------------*/
.diagnostico-container {
    padding: 12px;
    box-sizing: border-box;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--black);
    min-height: 420px;
    background-color: linear-gradient(180deg, var(--gris-claro), #eef3f4);
    border-radius: 6px;
}

.main-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.panel {
    background-color: white;
    border: 1px solid var(--color-terciario);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 360px;
}


.panel-title {
    font-weight: var(--negrita);
    color: var(--black);
    font-size: 13px;
}

.panel-body {
    flex: 1;
    overflow: auto;
    background-color: linear-gradient(180deg, #ffffff, #fbfdfe);
}

.panel-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid var(--color-terciario);
    background-color: #fbfdfe;
}

.search {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.search input[type="search"] {
    border: 1px solid var(--color-terciario);
    padding: 6px 8px;
    border-radius: 4px;
    min-width: 200px;
    background-color: #fff;
}

.icon-btn {
    width: 30px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    border: 1px solid var(--color-terciario);
    background-color: #fff;
    cursor: pointer;
    font-size: 12px;
    color: var(--gris-neutro);
}

.icon-btn:hover {
    color: var(--color-primario);
    border-color: rgba(0, 188, 112, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.controls-bottom {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

button.primary {
    background-color: var(--color-primario);
}

button.ghost {
    background: transparent;
    color: var(--gris-oscuro);
    border: 1px solid var(--color-terciario);
    padding: 7px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.empty-list {
    border: 1px dashed var(--color-terciario);
    border-radius: 4px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gris-neutro);
    font-size: 13px;
    background-color: linear-gradient(180deg, rgba(0, 0, 0, 0.01), transparent);
}


.side-panel {
    background-color: white;
    border: 1px solid var(--color-terciario);
    border-radius: 4px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 360px;
    position: relative;
}

.side-panel h4 {
    margin: 0;
    font-size: 14px;
    color: var(--gris-oscuro);
}

.option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px;
    border-radius: 4px;
    cursor: pointer;
}

.option input {
    transform: scale(1.05);
}

.selects-placeholder {
    background-color: var(--white);
    border: 1px solid var(--color-terciario);
    border-radius: 6px;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gris-neutro);
    font-size: 13px;
    padding: 8px;
    box-sizing: border-box;
}

/* Clear button wide */
.btn-clear {
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--color-terciario);
    background-color: linear-gradient(180deg, #ffffff, #f6f6f6);
    cursor: pointer;
    font-weight: var(--negrita);
    color: var(--gris-oscuro);
}

.btn-clear:hover {
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}


.panel-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-terciario);
    background-color: linear-gradient(180deg, rgba(0, 0, 0, 0.02), transparent);
}


.panel-headerOperaciones {
    display: flex;
    gap: 10px;
    width: 100%;
    align-items: center;
    padding: 25px 12px;
    border-bottom: 1px solid var(--color-terciario);
    background-color: linear-gradient(180deg, rgba(0, 0, 0, 0.02), transparent);
    justify-content: space-between;

}

.panel-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}


.checkbox-inline {
    display: flex;
    align-items: normal;
    gap: 6px;
    font-size: 13px;
    text-wrap: nowrap;
}


.panel-title {
    font-size: 15px;
    font-weight: var(--negrita);
    color: var(--black);
}

.btn-search {
    background-color: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
}

.btn-search:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.icon-search {
    width: 18px;
    height: 18px;
    color: #444;
    transition: transform var(--suave);
}

.btn-search:hover .icon-search {
    transform: scale(1.15);
    color: #000;
}


.integracion-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.integracion-contentModal {
    background-color: var(--white);
    border-radius: 10px;
    width: 500px;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    max-height: 65%;
    overflow: hidden;
}



.dispositivosBus-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    /* z-index: 9999; */

}

.dispositivosBus-contentModal {
    background-color: var(--white);
    border-radius: 10px;
    width: 750px;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    max-height: 65%;
    overflow: hidden;
}



.dispositivosBus-closeBtn {
    background-color: var(--color-primario);
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: var(--negrita);
    color: var(--white);
    cursor: pointer;
    width: 350px;
}


/* ---------------------------
   Responsive Panel: <1000pxs
----------------------------*/
@media (max-width: 1000px) {
    .diagnostico-container {
        grid-template-columns: 1fr;
    }

    .side-panel {
        display: none;
    }

    .main-area {
        grid-template-columns: 1fr;
    }

    .search input[type="search"] {
        min-width: 120px;
    }
}


/* ---------------------------
   RENDER CHECK ACTUADORES
----------------------------*/
.diag-actuador-grid {
    background-color: var(--white);
    padding: 20px;
}

.contenedor_botones {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.button_clear {
    background-color: #e5e7eb;
    color: #374151;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;

}

.button_clear {
    background-color: #d1d5db;
}


.bloques {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 15px;
}

.bloques input {
    border: none;
    border-bottom: 2px solid #d1d5db;
    font-size: 14px;
    outline: none;
    padding: 5px;
    background-color: var(--gris-claro);
}

.bloques input:focus {
    border-bottom-color: var(--color-primario);
}

.bloques_contenedor {
    background-color: var(--white);
    height: 270px;
    border: 1px solid var(--gris-neutro);
    border-radius: 3px;
}

.legend {
    float: unset !important;
    width: unset !important;
    font-size: 13px !important;
    font-weight: var(--negrita) !important;
}

/* Overlay general */
#modal_overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Contenedor del modal */
#modal_general {
    background-color: var(--white);
    border-radius: 12px;
    padding: 25px 30px;
    min-width: 300px;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    font-family: sans-serif;
    font-size: 16px;
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.25s ease;
    color: var(--black);
    position: relative;
    overflow: hidden;
    animation: var(--vibrar);
}


#mostrar-modal_container.mostrar {
    opacity: 1;
    transform: translateX(0);
}

/* Animación de salida */
#mostrar-modal_container.fade-out {
    opacity: 0;
    transform: translateX(30px);
}

/* Animación de entrada */
#modal_overlay.mostrar #modal_general {
    transform: scale(1);
    opacity: 1;
}

/* Cabecera del modal */
.modal_header {
    font-weight: var(--negrita);
    font-size: 15px;
    margin-bottom: 5px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    color: var(--black);
}

/* Subrayado decorativo */
.modal_header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 3px;
    border-radius: 2px;
}

/* Icono */
.modal_icon {
    font-size: 28px;
    margin-bottom: 10px;
}

/* Subrayado decorativo según tipo */
.modal_text {
    line-height: 1.4;
    color: var(--black);
}


/* MARGIN BOTTOM DEL TITULO */
.modal_exito .modal_header::after {
    background-color: var(--color-primario);
}

.modal_error .modal_header::after {
    background-color: red;
}

.modal_info .modal_header::after {
    background-color: var(--gris-neutro);
}

.modal_warning .modal_header::after {
    background-color: var(--color-aviso);
}


body.dark .botonFiltroDiag {
    filter: invert(1) brightness(100);
}

/* ---------------------------
   BREAKPOINTS PARA DIAGNÓSTICO (ordenador,tablets,mobiles...)
----------------------------*/
@media (min-width: 1400px) {
    .diag-receive {
        gap: 20px;
    }

    .diag-receive-subapartado {
        gap: 15px;
    }

    .diag-receive input {
        width: 110px;
    }
}

/* Desktop / sobremesa */
@media (min-width: 1200px) and (max-width: 1399px) {
    .diagnosticos-side {
        height: 75vh;
    }
}

/* Laptop grande / ultraportátiles */
@media (min-width: 992px) and (max-width: 1199px) {

    .diagnosticos-side {
        height: 85vh;
    }
}

/* Laptop pequeño / tablet horizontal */
@media (min-width: 768px) and (max-width: 991px) {

    .diag-receive {
        gap: 10px;
    }

    .diag-receive-subapartado {
        gap: 5px;
    }

    .diag-receive input {
        width: 50px;
    }

    .diagnosticos-side {
        height: 83vh;
    }


}

/* Tablet vertical / móviles grandes */
@media (min-width: 576px) and (max-width: 767px) {

    .diag-receive {
        gap: 10px;
    }

    .diag-receive-subapartado {
        gap: 10px;
    }

}

.fc-card {
    max-width: 300px;
}


/****************************************************/
/* #endregion [11] ----- FIN APARTADO DIAGNÓSTICO----- */
/****************************************************/


/****************************************************/
/* #region [12] ----- INICIO ESTILOS MODAL NODEPICKER CONTROL PTO A PTO ----- */
/****************************************************/

.overlay-picker {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.box-picker {
    width: 460px;
    background-color: var(--white);
    border: 1px solid var(--gris-80);
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    font-family: Tahoma, sans-serif;
    padding: 10px;

    display: flex;
    flex-direction: column;

    max-height: 90%;
    overflow: hidden;
}

.head-picker {
    font-weight: var(--negrita);
    font-size: 16px;
    background-color: var(--white);
    color: var(--black);
    padding: 5px 12px;


    flex: 0 0 auto;
}

.body-picker {
    padding: 10px;
    background-color: var(--white);

    flex: 1;
    overflow: hidden;
}

.list-picker {
    max-height: 375px;
    min-height: 200px;
    overflow-y: auto;
    background-color: var(--white);
    border: 1px solid var(--gris-80);
    color: var(--black);
    font-size: 12px;
    border-radius: 4px;
    padding: 8px;
}

.row-picker {
    padding: 3px 10px;
    cursor: pointer;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    outline: none;
    border: 1px solid transparent;
}

.row-picker:hover {
    background-color: rgba(0, 188, 112, 0.1) !important;
}

.row-picker.selected {
    background-color: rgba(0, 188, 112, 0.1) !important;
    border-color: var(--color-primario) !important;
}

/* .row-picker.selected .row-picker-text {
    color: var(--black) !important;
    font-weight: var(--negrita);
} */



.row-picker-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    padding: 3px;
    border-radius: 6px;
}

.row-picker-text {
    flex: 1;
    font-size: 13px;
    color: var(--black);
    margin-top: 4px;
}

.row-picker-btn {
    border: none;
    background: var(--color-primario) !important;
    border-radius: 9999px;
    height: 18px;
    width: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: white;
    font-size: 10px;
    opacity: 0;
    align-self: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.row-picker:hover .row-picker-btn {
    opacity: 1;
    transform: scale(1.1);
}

.row-picker-btn:hover {
    background: var(--black);
    transform: scale(1.2);
}


.footer-picker {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px;
    background-color: var(--white);

    flex: 0 0 auto;
}

/****************************************************/
/* #endregion [12] FIN ESTILOS MODAL NODEPICKER CONTROL PTO A PTO */
/****************************************************/


/****************************************************/
/* #region [13] ESTILOS MODALES INTERMEDIOS GENERALES */
/****************************************************/


.mini-overlay {
    position: absolute;
    inset: 0;

    background: var(--overlay);

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 999999;

}

.modal-card {
    background-color: var(--white);
    padding: 25px;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 30px;
    min-width: 350px;
    max-width: 90%;
    border: 1px solid var(--gris-80);
    text-align: center;
    color: var(--black);
}

.title-card {
    color: var(--black);
    font-weight: var(--negrita);
    margin-bottom: 15px;
}

.text-card {
    color: var(--black);
    margin-bottom: 25px;
}

.div-buttons-card {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/****************************************************/
/* #endregion [13] FIN ESTILOS MODALES INTERMEDIOS GENERALES */
/****************************************************/


/****************************************************/
/* #region [14] INICIO ESTILOS MODAL INTERMEDIO CONTROL PTO A PTO */
/****************************************************/

/* Contenedor modal personalizado */
.modal-box,
.modal-boxEFPA {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 500px;
    max-width: 90%;

    background-color: var(--white);
    border-radius: 6px;
    /* padding: 20px; */
    border: 1px solid var(--gris-80);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 30px;

    z-index: 3000;
    animation: var(--fade-zoom);

    display: flex;
    flex-direction: column;
}

.modal-boxEFPA {
    width: 85%;
    max-height: 90%;
    overflow: hidden;
}

.modal-boxEFPA.efpa-assistant-fullscreen {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100% !important;
    height: 100%;
    max-width: 100% !important;
    max-height: 100%;
    transform: none !important;
    border-radius: 0;
    border: none;
    box-shadow: none;
    z-index: 3001;
    animation: none;
}

.mini-overlay.efpa-assistant-fullscreen {
    position: absolute;
    top: 66px;
    left: 0;
    width: 100%;
    height: calc(100% - 65px);
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 3000;
}

.mini-overlay.efpa-assistant-fullscreen.efpa-open {
    transform: translateY(0);
}

.modal-boxEFPA .modal-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    scrollbar-gutter: stable;
}

.modal-boxEFPA .modal-header,
.modal-boxEFPA .modal-footer {
    flex: 0 0 auto;
}



.modal-horizontal {
    display: flex;
    gap: 16px;
}

.modal-img-container {
    flex: 0 0 120px;
    padding: 4px;
    border-radius: 4px;
    border: none;
}

.modal-img-container img {
    width: 100%;
    display: block;
}

.modal-right {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    /* para tener columnas de inputs */
    gap: 16px;
    justify-content: center;
}

.modal-group {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;

}

.divActuador {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}


.fieldsetDimmer {
    display: flex;
    flex-direction: column;
    padding: 25px;
    margin: 0;
    gap: 8px;
}

/****************************************************/
/* #endregion [14] FIN ESTILOS MODAL INTERMEDIO CONTROL PTO A PTO */
/****************************************************/


/****************************************************/
/* #region [15] INICIO ESTILOS MODAL INTERMEDIO ESCENAS,FANCOIL,PLUS Y ACTUADORES */
/****************************************************/

/* Contenedor modal personalizado */

.modal-bodyEFPA {
    margin-bottom: 12px;
    color: var(--black);
}

.modal-horizontalEFPA {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.modal-img-containerEFPA {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.modal-img-containerEFPA svg {
    width: 250px;
    height: auto;
}

.modal-img-containerEFPA svg ellipse[data-salida] {
    cursor: pointer;
    pointer-events: auto;
}

/* PANEL LATERAL E IMAGEN (clases usadas en el JS limpio) */
.modal-left-panel {
    flex: 0 0 38%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    min-width: 180px;
}

.modal-small-title {
    font-size: 0.95rem;
    font-weight: var(--negrita);
    color: var(--black);
    text-align: center;
}

.modal-big-img-wrap {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    background-color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.modal-big-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* RIGHT: grid, 2 columnas; el fieldset con .logic-fullwidth ocupará ambas columnas */
.modal-rightEFPA {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    gap: 12px;
    width: 100%;
}

/* Distribuir Encendidos/Apagados puntuales en 2 columnas */
.encendidos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    /* vertical y horizontal */
}


.encendidos-grid>div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.encendidos-grid label,
.switch-vertical label {
    display: flex;
    /* label y radio en línea */
    align-items: flex-start;
    gap: 6px;
}


/* Estilo fieldsets reutilizables */
.actuador-fieldset {
    background-color: var(--white);
    border-radius: 10px;
    padding: 10px 12px;
    border: 1px solid var(--gris-claro);
    color: var(--black);
    box-sizing: border-box;
}

/* full-width logic fs */
.logic-fullwidth {
    grid-column: 1 / -1;
}

/* --- ACCORDION EFPA --- */

.accordion-headerEFPA {
    padding: 10px 14px;
    width: 100%;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    user-select: none;
    transition: background-color var(--suave);
    border-bottom: 1px solid transparent;
}

.accordion-headerEFPA:hover {
    background-color: transparent;
}

.accordion-itemEFPA.is-open .accordion-headerEFPA {
    background-color: transparent;
    border-bottom-color: var(--gris-80);
}

.accordion-headerEFPA b {
    font-size: 14px;
    color: var(--black);
    font-weight: var(--negrita);
}

.accordion-radioEFPA {
    margin: 0 !important;
    cursor: pointer !important;
}

.accordion-chevronEFPA {
    font-size: 10px;
    transition: transform var(--suave);
    color: var(--gris-neutro);
    font-family: Arial, sans-serif;
}

.accordion-itemEFPA.is-open .accordion-chevronEFPA {
    transform: rotate(180deg);
}

.accordion-contentEFPA {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    overflow: hidden;
    background-color: var(--white);
    transition: grid-template-rows 0.3s ease-out;
}

.accordion-itemEFPA.is-open .accordion-contentEFPA {
    grid-template-rows: 1fr;
    opacity: 1;
}

.accordion-itemEFPA.is-open .accordion-contentEFPA.animate-fadeEFPA {
    animation: var(--fade);
}

.accordion-innerEFPA {
    min-height: 0;
    padding: 16px;
    box-sizing: border-box;
}

.accordion-itemEFPA:not(.is-open) .accordion-innerEFPA {
    display: none !important;
}

.accordion-itemEFPA .fieldset-contentEFPA {
    border: none !important;
}


/* pequeñas utilidades para labels/ops/entradas */
.field-label,
.entradas-title {
    display: block;
    font-size: 0.9rem;
    font-weight: var(--negrita);
    margin-bottom: 6px;
    color: var(--black);
}

.logic-fullwidth {
    grid-column: 1 / -1;
}

.encendidos-fullwidth {
    grid-column: 1 / -1;
    /* display: flex; */
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
}


.encendidos-fullwidth .encendidos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}


.modal-right>.actuador-fieldset:not(.encendidos-fullwidth) {
    grid-column: auto;
}



/* Labels inline */
.inline-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}


/* inline labels (radio + text) */
.inline-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin-right: 8px;
    color: var(--black);
}

/* wrapper ops row */
.ops-row {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    flex-direction: column;
    color: var(--black);
}

/* entradas list */
.entradas-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

/* switch wrapper */
.switch-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

/* focus accesible */
.modal-right select:focus,
.modal-group input[type="radio"]:focus,
.fieldset-content input[type="checkbox"]:focus,
.fieldset-content input[type="range"]:focus {
    outline: 3px solid rgba(0, 188, 112, 0.12);
    /* semitransparencia basada en color-primario */
    outline-offset: 2px;
}

/* Pequeños ajustes visuales para listados */
.entradas-list {
    margin-top: 6px;
}

.modal-label {
    font-size: 13px;
    text-wrap: nowrap;
    cursor: pointer;
    color: var(--black);

    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.modal-label input {
    cursor: pointer;
}


.link-details-popup {
    position: fixed;
    background-color: var(--white);
    border: 1px solid var(--gris-80);
    border-radius: 6px;
    padding: 15px 30px 15px 30px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 30px;
    z-index: 10001;
    width: max-content;
    max-width: 90vw;
    /* max-height: 350px; */
    overflow-y: auto;
    color: var(--black);
    pointer-events: auto;
}

.dev-link-clickable {
    transition: all 0.2s ease;
    border-radius: 20px;
    padding: 2px 16px 2px 8px;
    margin-left: -8px;
    /* Para compensar el padding y que quede alineado */
}

.dev-link-clickable:hover {
    background-color: var(--color-primario);
}

.dev-link-clickable:hover .dev-name-text {
    color: white;
}

.device-mini-icon {
    display: inline-block;
    background-color: var(--black);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: middle;
    flex-shrink: 0;
}

.dev-link-clickable:hover .device-mini-icon {
    background-color: white !important;
}

/* Responsive: en pantallas estrechas pasa a columna única */
@media (max-width: 880px) {
    .modal-left-panel {
        width: 100%;
        flex: 0 0 auto;
    }

    .modal-right {
        grid-template-columns: 1fr;
    }

    .logic-fullwidth {
        grid-column: auto;
    }
}

/* ============================================================
   RESPONSIVE MODAL EFPA
   Breakpoints: tablet ≤1100px | móvil ≤767px | móvil pequeño ≤480px
   ============================================================ */

/* --- TABLET (≤ 1100px) ------------------------------------ */
@media (max-width: 1100px) {

    .modal-boxEFPA {
        width: min(98vw, 860px);
    }

    .modal-img-containerEFPA {
        width: 280px;
    }

    .modal-img-containerEFPA img {
        width: 200px;
        height: 260px;
    }

    .modal-rightEFPA {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- MÓVIL GRANDE (≤ 767px) -------------------------------- */
@media (max-width: 767px) {

    .modal-boxEFPA,
    .modal-icon-picker,
    .box-picker {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Layout pasa a columna: imagen arriba, controles abajo */
    .modal-horizontalEFPA {
        flex-direction: column;
        align-items: center;
        padding: 16px;
        gap: 12px;
    }



    .modal-rightEFPA {
        grid-template-columns: 2fr 1fr;
        width: 100%;
    }

    .encendidos-fullwidth {
        padding: 6px 4px;
    }

    /* Cada fieldset ocupa el ancho completo */
    .actuador-fieldset {
        padding: 8px 10px;
    }

    /* Dimmer: columnas apiladas */
    .dimmer-central-containerEFPA {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .dimmer-fieldsetEFPA {
        width: 100%;
        max-width: 280px;
        height: auto;
        min-height: 120px;
    }

    .dimmer-sliderEFPA {
        transform: none;
        width: 100%;
        margin: 8px 0;
    }

    /* Pulsador: columna única */
    .pulsador-central-containerEFPA {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .pulsador-fieldsetEFPA {
        width: 100%;
        max-width: 280px;
    }

    /* Modal dimmer (contenedor padre) */
    .modal-dimmerEFPA {
        width: 100%;
    }

    /* Header con más padding táctil */
    .modal-boxEFPA .header-dispositivo {
        padding-inline: 16px;
        padding-block: 14px;
    }

    /* Footer */
    .modal-boxEFPA .modal-footer {
        padding: 16px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .modal-boxEFPA .btn-aplicar,
    .modal-boxEFPA .btn-cancelar {
        text-align: center;
    }

    /* Título header más legible */
    .modal-boxEFPA .titulo-header-dispositivo {
        font-size: 13px;
    }
}

/* --- MÓVIL PEQUEÑO (≤ 480px) ------------------------------ */
@media (max-width: 510px) {


    .modal-rightEFPA {
        display: flex;
        flex-direction: column;
    }

    .modal-boxEFPA {
        border-radius: 10px 10px 0 0;
    }

    .modal-horizontalEFPA {
        padding: 12px;
        gap: 10px;
    }

    .modal-img-containerEFPA {
        max-width: 200px;
    }

    .modal-img-containerEFPA img {
        width: 150px;
        max-height: 180px;
    }

    .fieldset-title,
    .field-label {
        font-size: 0.85rem;
    }

    /* Ops-row apilado */
    .ops-row {
        flex-direction: column;
        gap: 6px;
    }

    /* Tabs del dimmer: botones 100% */
    .tab-container-dispositivo {
        flex-wrap: wrap;
    }

    .tab-btn {
        flex: 1;
        text-align: center;
        font-size: 12px;
        padding: 5px 6px;
    }
}


/*
   DIMMER - CONTROL PROPORCIONAL EFPA
*/

/* Título centrado */
.dimmer-titleEFPA {
    text-align: center;
    margin-bottom: 12px;
    font-size: 1.2rem;
    font-weight: var(--negrita);
}

/* Contenedor central: columnas + imagen */
.dimmer-central-containerEFPA {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--black);
}

/* Columnas izquierda/derecha */
.dimmer-colEFPA {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* Fieldset de cada canal */
.dimmer-fieldsetEFPA {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}


/* Legend de cada fieldset */
.dimmer-legendEFPA {
    font-weight: var(--negrita);
    margin-bottom: 6px;
    text-align: center;
    margin-bottom: 6vh;
}

/* Slider */
.dimmer-sliderEFPA {
    width: 120px;
    height: 8px;

    transform: rotate(90deg);
    transform-origin: center;

    margin: 50px 0;

}

/* Estilo de track */
.dimmer-sliderEFPA::-webkit-slider-runnable-track {
    height: 8px;
    background-color: #ccc;
    border-radius: 4px;
}

/* Estilo del thumb */
.dimmer-sliderEFPA::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background-color: #007bff;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -4px;
    /* centrar con el track */
}

/* Porcentaje al lado del slider */
.dimmer-pctEFPA {
    font-size: 0.85rem;
    color: var(--black);
    margin-top: 6px;
}

/* Checkbox */
.dimmer-checkboxEFPA {
    width: 16px;
    height: 16px;
}

/* Label del checkbox */
.dimmer-labelEFPA {
    font-size: 0.9rem;
    user-select: none;
    cursor: pointer;
}

/* Contenedor de imagen */
.dimmer-img-containerEFPA {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Imagen central */
.dimmer-imgEFPA {
    width: 20vw;
    height: 20vh;
}

.pulsador-central-containerEFPA {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    padding: 15px 0;
}


.pulsador-colEFPA {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.pulsador-fieldsetEFPA {
    border-radius: 6px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 160px;
    background-color: var(--white);
}


.pulsador-legendEFPA {
    font-weight: var(--negrita);
    font-size: 1rem;
    text-align: center;
    margin-bottom: 8px;
}


.pulsador-checkbox-containerEFPA {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Estilo de checkbox */
.pulsador-checkboxEFPA {
    width: 18px;
    height: 18px;
    accent-color: #007BFF;
    cursor: pointer;
}

/* Label de checkbox */
.pulsador-labelEFPA {
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    padding-left: 4px;
    transition: color var(--suave);
    color: var(--black);
    text-wrap: nowrap;
}


.pulsador-checkbox-containerEFPA div {
    display: flex;
    gap: 0px;
}



/* RESPONSIVE MODAL EFPA ACTUADORES */
@container devicemodal (max-width: 925px) {

    .modal-horizontalEFPA {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: center;
    }

    .modal-img-containerEFPA {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal-img-containerEFPA svg {
        width: 175px;
        height: auto;
    }

    .modal-rightEFPA {
        display: contents;
    }

    .encendidos-fullwidth {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0;
    }

    .switch-fieldsetEFPA {
        grid-column: 1;
        grid-row: 2;
        margin: 0;
    }

    .logic-fieldsetEFPA {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        height: 100%;
    }

    .info-msgEFPA {
        grid-column: 1 / span 2;
    }

    .fieldset-contentEFPA {
        width: 100%;
    }

    .encendidos-fullwidth .encendidos-grid {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .modal-body {
        overflow-y: auto;
    }
}

@container devicemodal (max-width: 750px) {

    .modal-horizontalEFPA {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .modal-rightEFPA {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }

    .encendidos-fullwidth .encendidos-grid {
        flex-direction: row;
        justify-content: flex-start;
    }

}

@container devicemodal (max-width: 650px) {


    .encendidos-fullwidth .encendidos-grid {
        flex-direction: column;
    }
}

/* RESPONSIVE MODAL EFPA DIMMER  */

.rgb-central-containerEFPA {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    padding: 20px;
    gap: 25px;
    background-color: var(--white);
    border-radius: 24px;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.02);
}

.rgb-picker-wrapperEFPA {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--gris-80);
    min-width: 0;
}

.rgb-control-containerEFPA {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background-color: var(--white);
    border: 1px solid var(--gris-tarjeta-st);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.rgb-side-panelEFPA {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
    padding: 25px;
    background-color: var(--white);
    border: 1px solid var(--gris-tarjeta-st);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.rgb-canvasEFPA {
    max-width: 100%;
    height: auto;
    cursor: pointer;
}


.rgb-brightness-sliderEFPA {
    writing-mode: vertical-lr;
    direction: rtl;
    width: 12px;
    height: 280px;
    border-radius: 10px;
    background: linear-gradient(to top, #000, #ddd, #fff);
}


@container devicemodal (max-width: 850px) {

    .dimmer-img-containerEFPA {
        display: none;
    }

    .dimmer-central-containerEFPA {
        gap: 50px;
    }

    .rgb-central-containerEFPA {
        flex-direction: column;
    }

    .rgb-side-panelEFPA {
        width: 100%;
    }

    .rgb-brightness-sliderEFPA {
        writing-mode: horizontal-tb;
        direction: ltr;
        width: 80%;
        height: 12px;
    }
}

@container devicemodal (max-width: 700px) {

    .pulsador-central-containerEFPA {
        flex-direction: column;
        align-items: center;
    }
}


@container devicemodal (max-width: 500px) {

    .dimmer-central-containerEFPA {
        flex-direction: column;
    }

    .pulsador-checkbox-containerEFPA {
        flex-direction: column;
    }
}


/* MODAL EFPA CUBIC */
.modal-horizontalEFPA.is-cubic {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.modal-horizontalEFPA.is-cubic .modal-img-containerEFPA {
    display: none !important;
}

.modal-horizontalEFPA.is-cubic .modal-rightEFPA {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.modal-horizontalEFPA.is-cubic .modal-rightEFPA .actuador-fieldset {
    width: 100%;
}

/* RESPONSIVE MODAL EFPA CUBIC */
@container devicemodal (max-width: 600px) {
    .modal-horizontalEFPA.is-cubic .modal-rightEFPA {
        flex-direction: column !important;
        align-items: center;
    }
}


/****************************************************/
/* #endregion [15] FIN ESTILOS MODAL INTERMEDIO ESCENAS,FANCOIL,PLUS Y ACTUADORES */
/****************************************************/


/****************************************************/
/* #region [16] MODALES DE LOS DISPOSITIVOS */
/****************************************************/

/* --- MODAL ACTUADOR --- */

.tabla-telegramas {
    overflow-y: auto;
}

.form-row-dispositivo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.label-col {
    width: 150px;
    text-align: right;
    text-wrap: nowrap;
    color: var(--black);
    opacity: 0.8;
}

.fila-encabezado,
.fila-entrada {
    color: var(--black);
}

.label-unit {
    font-size: 11px;
    margin-top: 3px;
    opacity: 0.8;
}


.modal-actuador-main-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    width: 100%;
    align-items: center;
}

.modal-actuador-row {
    display: flex;
    flex-direction: row;
    gap: var(--gap-div-dispositivo);
    width: 100%;
}

.modal-actuador-img-col {
    display: flex;
    /* Oculto por defecto en pantallas pequeñas */
    flex: 0 0 250px;
    text-align: center;
}

.modal-actuador-right-col {
    flex: 1;
    min-width: 280px;
}

.modal-actuador-col {
    flex: 1 1 250px;
    /* Reducido min-width para que aguante más en fila */
    min-width: 0;
}

.modal-actuador-full-col {
    width: 100%;
}


.tab-content-nombres,
.tab-content-eventos {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.tab-content-nombres,
.tab-content-eventos,
.tab-content-actuador,
.tab-content-dimmer,
.tab-content-st,
.tab-content-viip,
.tab-content-cubic,
.tab-content-sensor,
.tab-content-integraciones,
.tab-content-bus,
.tab-content-alarmas,
.tab-content-wings {
    padding-inline: 5%;
}

#assistantModal .tab-content-nombres,
#assistantModal .tab-content-eventos,
#assistantModal .tab-content-actuador,
#assistantModal .tab-content-dimmer,
#assistantModal .tab-content-st,
#assistantModal .tab-content-viip,
#assistantModal .tab-content-cubic,
#assistantModal .tab-content-sensor,
#assistantModal .tab-content-integraciones,
#assistantModal .tab-content-bus,
#assistantModal .tab-content-alarmas,
#assistantModal .tab-content-wings {
    padding-inline: 20%;
}

.gatesDiv {
    display: flex;
    flex-direction: row;
    gap: var(--gap-div-dispositivo);
}

.parametros-actuador-row {
    display: flex;
    flex-direction: row;
    gap: var(--gap-div-dispositivo);
    width: 100%;
}

/* --- RESPONSIVE ACTUADOR --- */

@container modalgeneracion (max-width: 1000px) {

    .modal-actuador-img-col {
        display: none;
    }

}

@container modalgeneracion (max-width: 825px) {

    .parametros-actuador-row {
        flex-direction: column;
    }
}

@container modalgeneracion (max-width: 650px) {

    .tab-container-dispositivo {
        flex-wrap: wrap;
    }

    .tab-btn {

        font-size: 12px;
    }


    .modal-actuador-row {
        flex-direction: column-reverse;
    }

    .modal-actuador-col {
        flex: 1 1 auto;

    }

    .gatesDiv {
        flex-direction: column;
    }
}


/* MODAL DIMMER */

.tab-content-dimmer {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    animation: var(--fade);
}

.tab-content-dimmer img {
    flex: 0 0 180px;
    max-width: 180px;
}

.formCanales {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-div-dispositivo);
    flex: 1;
}

.dimmer-fieldset {
    flex: 1 1 300px;
    min-width: 240px;
}

.tab-content-dimmer .label-col {
    width: 110px;
}

.tab-content-dimmer input {
    width: 130px;
}

.tab-content-dimmer input[type="number"] {
    width: 70px;
}

/* --- RESPONSIVE DIMMER  --- */

@container modalgeneracion (max-width: 900px) {
    .tab-content-dimmer img {
        display: none;
    }
}



/* MODAL VIIP */

/* ---------------------------
  PLANOS SERVIDOR WEB DE LA VIIP
----------------------------*/

.viip-viewArea {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-div-dispositivo);
    height: 100%;
    padding-right: 6px;
    box-sizing: border-box;
}

.viip-visorWrap {
    width: 1066px;
    /* 1024px content + 40px padding + 2px borders */
    height: 100%;
    background-color: var(--white);
    border-radius: 4px;
    min-height: 420px;
    overflow: hidden;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border: 1px solid var(--gris-tarjeta-st);
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.viip-planoImg {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    background-color: var(--black);
}

.viip-toolsCol {
    display: flex;
    flex-direction: column;
    gap: var(--gap-div-dispositivo);
    height: 100%;
    width: 300px;
    align-items: center;
}

.viip-topControls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.viip-selectWrap {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 1;
}

.viip-selectEl {
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #9aa3b1;
    background-color: #fff;
    min-width: 160px;
}

.viip-gridLabel {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.viip-miniBtns {
    display: flex;
    gap: 6px;
    align-items: center;
}

.viip-visorTop {
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--black);
}

.viip-visorBottom {
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
}


.viip-overlayWrap {
    position: relative;
    width: 100%;
    max-width: 1024px;
    height: 600px;
    overflow: hidden;
    background-color: #111;
}

.viip-elementosField {
    padding: 25px;
    border: 1px solid var(--gris-tarjeta-st);
    border-radius: 4px;
    background-color: var(--white);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    min-width: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.viip-elementosLegend {
    padding: 0 6px;
    font-size: 13px;
    font-weight: var(--negrita);
}

.viip-topBar {
    display: none;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.viip-leftGroup {
    display: flex;
    gap: 8px;
    align-items: center;
}

.viip-addBtn {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid #c3c9d1;
    background-color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.viip-rightGroup {
    display: flex;
    gap: 8px;
    align-items: center;
}

.viip-delBtn {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid #c3c9d1;
    background-color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.viip-elementsContainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 380px;
    overflow: hidden;
    width: 100%;
    min-width: 0;
}

.drag-scrollable {
    cursor: grab;
    scrollbar-width: none;
}

.drag-scrollable::-webkit-scrollbar {
    display: none;
}

.viip-tabsContainerWrapper {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    white-space: nowrap;
    width: 100%;
    min-width: 0;
}

.viip-iconsGrid {
    display: grid;
    grid-template-columns: repeat(3, 64px);
    grid-auto-rows: 56px;
    gap: 5px;
    padding: 6px 4px;
    align-items: center;
    background-color: var(--white);
    border-radius: 6px;
    border: 1px solid transparent;
    flex: 1;
    justify-content: center;
}

.viip-iconWrap {
    width: 64px;
    height: 56px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    cursor: pointer;
    background-color: var(--gris-claro);
    border: 1px solid var(--gris-80);
    padding: 6px;
    outline: none;
    transition: box-shadow .12s;
}

.viip-iconsLayer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-Events: auto;
}

.viip-iconAttrsPanel {

    min-width: 170px;
    max-width: 260px;
    padding: 8px 10px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    font-size: 13px;
    color: #1f2937;
    display: none;
    gap: 6px;
    margin-left: 10px;
    box-sizing: border-box;
}

.viip-contextMenu {
    position: fixed;
    min-width: 200px;
    background-color: #fff;
    border: 1px solid #d0d6de;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(18, 35, 58, 0.12);
    padding: 6px;
    z-index: 20000;
    font-size: 13px;
    color: #0f1724;
    user-select: none;
    overflow: hidden;
    animation: var(--fade);
}

.viip-contextMenu .cm-item {
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.viip-contextMenu .cm-item:hover {
    background-color: #eef4ff;
}

.viip-contextMenu .cm-sep {
    height: 1px;
    background-color: #eef1f5;
    margin: 4px 0;
}

.viip-contextMenu .cm-muted {
    opacity: 0.7;
    font-size: 12px;
}



/* ---------------------------
  ESCENAS SERVIDOR WEB DE LA VIIP
----------------------------*/

.viip-modeSelector {
    display: flex;
    background-color: var(--gris-claro);
    border-radius: 50px;
    width: fit-content;
    font-weight: var(--negrita);
    border: 1px solid var(--gris-neutro);
    margin-bottom: 8px;
}

.viip-escenaFieldset,
.viip-scriptFieldset {
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
}

.viip-escenaHeader,
.viip-scriptHeader {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}


.viip-textareaScript2 {
    width: 100%;
    height: 50vh;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--gris-neutro);
    background-color: var(--gris-claro);
    resize: vertical;
    box-sizing: border-box;
}

.viip-configurationLeft,
.viip-configurationRight {
    display: flex;
    flex-direction: column;
    gap: var(--gap-div-dispositivo);
    min-width: 0;
}

.viip-configurationLeft fieldset,
.viip-configurationRight fieldset {
    min-width: 0;
}

.viip-configurationLeft {
    flex: 1;
}

.tab-content-viip {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    gap: 12px;
    flex: 1 1 auto;
    overflow-y: hidden;
    overflow-x: hidden;
    box-sizing: border-box;
}


.viip-alContent {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    overflow-y: auto;
    max-height: 300px;
}

.viip-topOpts {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
    justify-content: space-between;
    color: var(--black);
    flex-wrap: wrap;
}

.viip-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.8;
    user-select: none;
}

.fieldsetSkinViip {
    display: flex;
    flex-direction: column;
    height: 40vh;
    max-height: 600px;
    overflow: hidden;
}

.viip-skinImgWrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.viip-skinImg {
    object-fit: contain;
    object-position: center;
    transform: translateY(-26%);
    width: 420px;
    max-width: 100%;
    box-sizing: border-box;
}

.viip-skinNetContainer {
    display: flex;
    flex-direction: column;
    gap: var(--gap-div-dispositivo);
}

/* RESPONSIVE MODAL VIIP */

/* Mobile / tablet */
@media (max-width: 991.98px) {

    .viip-viewArea {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .fieldsetSkinViip,
    .fieldsetIpViip {
        margin-right: 0 !important;
    }

}


@container modalgeneracion (max-width: 900px) {

    .viip-viewArea {
        flex-direction: column;
        overflow-x: hidden !important;
    }

    .viip-configurationLeft,
    .viip-configurationRight {
        max-width: 100%;
        box-sizing: border-box;
    }

    .viip-configurationLeft textarea {
        max-width: 100%;
        box-sizing: border-box;
    }

    .viip-skinNetContainer {
        flex-direction: row;
        align-items: stretch;
    }

    .viip-skinNetContainer>fieldset {
        flex: 1;
    }

    .viip-skinImgWrap {
        display: block;
        text-align: center;
        width: 100%;
        margin: 20px auto 0 auto;
    }

    .viip-skinImg {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        display: inline-block;
        transform: none !important;
        box-sizing: border-box;
    }

    .fieldsetSkinViip {
        height: auto;
        min-height: 250px;
        display: block;
        text-align: center;
        box-sizing: border-box;
    }

    .fieldsetSkinViip>.header-box {
        text-align: left;
        display: block;
        width: 100%;
    }

}


@container modalgeneracion (max-width: 700px) {
    .viip-skinNetContainer {
        flex-direction: column;
    }

    .viip-skinNetContainer>fieldset {
        flex: none;
    }

}


@container modalgeneracion (max-width: 600px) {

    .viip-escenaHeader,
    .viip-scriptHeader {
        flex-direction: column;
        align-items: flex-start !important;
    }

}



/* MODAL SENSOR */

.eventosSensorDiv {
    display: flex;
    flex-direction: row;
    gap: var(--gap-div-dispositivo);
    width: 100%;
}

.modal-sensor-top {
    display: flex;
    gap: 25px;
    align-items: center;
    justify-content: space-between;
    height: 180px;
}

.modal-sensor-inputs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--black);
}

.modal-sensor-img {
    width: 160px;
    height: 160px;
    object-fit: contain;
}

.ldr-umbral-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-div-dispositivo);
}


/* --- RESPONSIVE SENSOR  --- */
@container modalgeneracion (max-width: 625px) {

    .eventosSensorDiv {
        flex-direction: column;
    }
}

@container modalgeneracion (max-width: 550px) {

    .modal-sensor-top {
        flex-direction: column;
        height: auto;
        gap: 15px;
        align-items: stretch;
    }

    .modal-sensor-img {
        display: none;
    }

    .modal-sensor-inputs {
        width: 100%;
    }

}

/* MODAL CAM IP */
.cloud-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.cloud-inputs {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 70%;
    width: 100%;
}

@container modalgeneracion (max-width: 550px) {
    .cloud-inputs {
        max-width: 100%;
    }
}

/* MODAL LDRBUS */
.container-input-limite {
    display: flex;
    flex-direction: row;
    gap: 25px;
    align-items: center;
}

/* RESPONSIVE LDRBUS */
@container modalgeneracion (max-width: 750px) {

    .ldr-umbral-grid,
    .sif-umbral-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .container-input-limite {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }


}


/* MODAL PANTALLA ST */
.st-main-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.st-row {
    display: flex;
    flex-direction: row;
    gap: var(--gap-div-dispositivo);
    width: 100%;
}

.st-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.st-col>fieldset {
    flex: 1;
}

.pagesRow {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    gap: var(--gap-div-dispositivo);
    margin-top: 25px;
}

/* .col-card-st {
    width: 100%;
    min-width: 250px;
} */

.st-right-col {
    width: 100%;
}

.st-escena-top-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-div-dispositivo);
    width: 100%;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-div-dispositivo);
    width: 100%;
}


/* RESPONSIVE PANTALLA ST */
@container modalgeneracion (max-width: 1080px) {

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

}

@container modalgeneracion (max-width: 950px) {
    .pagesRow {
        grid-template-columns: repeat(2, auto);
    }
}

@container modalgeneracion (max-width: 750px) {
    .st-row {
        flex-direction: column;
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }

    .st-escena-top-card {
        max-width: 100%;
    }
}

@container modalgeneracion (max-width: 490px) {
    .pagesRow {
        grid-template-columns: repeat(1, auto);
    }
}


/* MODAL CUBIC y demás */
.escenas-grid-cubic {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* RESPONSIVE CUBIC */
@container modalgeneracion (max-width: 700px) {

    .escenas-grid-cubic {
        grid-template-columns: repeat(1, 1fr) !important;
    }

}


/* MODAL CUBIC TL y demás */
.acciones-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* RESPONSIVE CUBIC-TL */
@container modalgeneracion (max-width: 700px) {

    .acciones-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }

}


/* MODAL GSMDATA */
.entradas-wrapper-gsmadata,
.escenas-grid-gsmdata {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-div-dispositivo);
}

/* RESPONSIVE GSMADATA */
@container modalgeneracion (max-width: 700px) {

    .entradas-wrapper-gsmadata,
    .escenas-grid-gsmdata {
        grid-template-columns: repeat(1, 1fr) !important;
    }

}

/* MODAL GSMING */
.entradas-wrapper-gsming,
.escenas-grid-gsming {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}


/* RESPONSIVE GSMING */
@container modalgeneracion (max-width: 700px) {

    .entradas-wrapper-gsming,
    .escenas-grid-gsming {
        grid-template-columns: repeat(1, 1fr) !important;
    }

}


/* MODAL KTF */
.panelMenuTelefono {
    display: flex;
    flex-direction: row;
    gap: var(--gap-div-dispositivo);
}

.menuTreeCol,
.menuDetailCol {
    width: 50%;
}

.panelCondigGeneral {
    display: flex;
    flex-direction: column;
    gap: var(--gap-div-dispositivo);
}

.bottomGen {
    display: flex;
    flex-direction: row;
    gap: var(--gap-div-dispositivo);
}


.llamadas-interiores-container,
.llamadas-exteriores-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

@container modalgeneracion (max-width: 675px) {
    .panelMenuTelefono {
        flex-direction: column;
    }

    .menuTreeCol,
    .menuDetailCol {
        width: 100%;
    }

    .bottomGen {
        flex-direction: column;
    }

    .llamadas-interiores-container,
    .llamadas-exteriores-container {
        flex-direction: column;
    }
}



/* Estilo iloftBusing */
.iloft-p2p-table .mobile-label {
    display: none;
}

.iloft-zonas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-div-dispositivo);
}

.iloft-form-rowTermostato,
.iloft-form-rowAdicionales {
    flex-wrap: nowrap;
}



.iloft-top-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--gap-div-dispositivo);
    align-items: stretch;
}

.iloft-top-row>fieldset {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-div-dispositivo);
}

.iloft-top-row>div>fieldset:last-child {
    flex-grow: 1;
}

@container modalgeneracion (max-width: 750px) {

    .iloft-top-row {
        flex-direction: column;
    }

    .iloft-top-row>div {
        width: 100%;

    }
}

@container modalgeneracion (max-width: 550px) {


    .iloft-zonas-grid {
        grid-template-columns: 1fr;
    }

    .iloft-p2p-table thead {
        display: none;
    }

    .iloft-p2p-table tbody tr {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--gris-neutro);
        margin-bottom: 10px;
        padding: 15px;
        border-radius: 6px;
        position: relative;
        background-color: var(--gris-claro);
    }

    .iloft-p2p-table tbody td {
        display: flex;
        flex-direction: column;
        border: none !important;
        padding: 6px 0 !important;
        width: 100% !important;
    }

    .iloft-p2p-table .mobile-label {
        display: block !important;
        font-weight: var(--negrita);
        font-size: 12px;
        color: var(--gris-oscuro);
        margin-bottom: 4px;
    }

    .iloft-p2p-table tbody td:first-child {
        position: absolute;
        top: 15px;
        right: 15px;
        width: auto !important;
        padding: 0 !important;
    }

    .iloft-top-row {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 !important;
    }

    .iloft-top-row>div {
        width: 100% !important;
        padding: 0 !important;
    }

    .iloft-form-row {
        width: 100%;
    }

    .iloft-label {
        white-space: normal;
        word-break: break-word;
    }

    .iloft-img-display {
        display: none !important;
    }
}

@container modalgeneracion (max-width: 350px) {

    .iloft-form-rowAdicionales,
    .iloft-form-rowTermostato {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px;
    }

    .iloft-label {
        min-width: auto !important;
        width: auto;
    }
}

/* Estilo CNB */

@container modalgeneracion (max-width: 800px) {
    .modal-cnb .d-grid {
        flex-direction: column !important;
    }

}

@container modalgeneracion (max-width: 550px) {

    /* Encabezado: truncado con ellipsis y expansión al pasar el ratón */
    .modal-cnb .header-dispositivo-texto .titulo-header-dispositivo {
        position: relative;
        max-width: 100%;
        display: flex;
        align-items: center;
    }

    .modal-cnb .nombre-nodo-header {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
        display: inline-block;
        vertical-align: middle;
        transition: all 0.2s ease;
    }

    .modal-cnb .nombre-nodo-header:hover,
    .modal-cnb .nombre-nodo-header:focus-within {
        overflow: visible;
        white-space: normal;
        word-break: break-word;
        position: absolute;
        z-index: 100;
        background-color: var(--blanco, #fff);
        border: 1px solid var(--gris-neutro, #ccc);
        padding: 6px 10px;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        min-width: 150px;
        max-width: 280px;
        top: -5px;
        left: -5px;
    }

    /* Botones de abajo (y acciones) en columna y ocupando todo el ancho */
    .modal-cnb .col-xl-3 {
        width: 100%;
        margin-top: 15px;
    }



    .modal-cnb .d-grid .btn-alternativo-aplicar {
        width: 100%;
    }

    /* Contenedor footer (Aplicar) */
    .modal-cnb .footer-dispositivo>div {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .modal-cnb .footer-dispositivo .btn-aplicar {
        width: 100%;
    }
}

/* Estilo Lockset */
.lockset-container {
    width: 100%;
}

.lockset-row {
    display: flex;
    flex-direction: row;
    gap: var(--gap-div-dispositivo);
    width: 100%;
    align-items: stretch;
}

.lockset-col-left {
    flex: 0 0 calc(33.333% - 7.5px);
    width: calc(33.333% - 7.5px);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lockset-col-right {
    flex: 0 0 calc(66.666% - 7.5px);
    width: calc(66.666% - 7.5px);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lockset-eventos-div {
    display: flex;
    flex-direction: row;
    gap: var(--gap-div-dispositivo);
    width: 100%;
    flex: 1;
}

.lockset-ev-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}


.lockset-row {
    flex-direction: column;
    align-items: stretch;
}

.lockset-col-left,
.lockset-col-right {
    flex: none;
    width: 100%;
}


@container modalgeneracion (max-width: 550px) {
    .lockset-eventos-div {
        flex-direction: column;
        gap: 15px;
    }

    .lockset-ev-col {
        flex: none;
        width: 100%;
    }
}

/* Estilo Multimeter */
.multimeter-input {
    width: 140px;
}

@container modalgeneracion (max-width: 550px) {
    .multimeter-input {
        width: 90px !important;
    }

    .multimeter-label {
        text-align: left !important;
    }
}



/* MODAL KA RESPONSIVE EVENTOS */
.mobile-label-ka {
    display: none;
    font-weight: var(--negrita);
    font-size: 12px;
    color: var(--gris-oscuro);
    margin-bottom: 4px;
    margin-top: 10px;
}

@container modalgeneracion (max-width: 450px) {
    .modal-ka-eventos-header {
        display: none !important;
    }

    .fila-entrada.modal-ka-eventos-row {
        flex-direction: column;
        align-items: stretch;
        border: 1px solid var(--gris-neutro);
        margin-bottom: 15px;
        padding: 15px;
        border-radius: 6px;
        gap: 0px !important;
    }

    .fila-entrada.modal-ka-eventos-row>div {
        width: 100% !important;
        min-width: 0 !important;
    }

    .mobile-label-ka {
        display: block !important;
    }

    .ka-name-wrap {
        margin-bottom: 10px;
        border-bottom: 1px solid var(--gris-tarjeta-st);
        padding-bottom: 8px;
    }

    .ka-salida-wrap {
        align-items: flex-start !important;
    }

    /* Formularios generales en móvil */
    .form-row-dispositivo {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .form-row-dispositivo .label-col {
        width: 100%;
        text-align: left;
    }

    /* Modal Cámara IP */
    .cloud-wrapper {
        flex-direction: column;
        gap: 15px;
    }

    .cloud-inputs {
        max-width: 100%;
    }

    /* Modal GSMing Control Punto a Punto */
    .gsming-control-bottom {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .gsming-btn-wrapper {
        flex-direction: row !important;
        justify-content: center !important;
    }
}

/* MODAL RFID */
.topDiv-rfid {
    display: flex;
    flex-direction: row;
    gap: var(--gap-div-dispositivo);
}

.leftBottom-rfid {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    gap: 20px;
}

.bottomDiv-rfid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@container modalgeneracion (max-width: 900px) {

    .topDiv-rfid {
        flex-direction: column;
    }
}

@container modalgeneracion (max-width: 700px) {

    .leftBottom-rfid {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* MODAL METERBUS */
.canalesRow-meterbus {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-div-dispositivo);
    width: 100%;
}

@container modalgeneracion (max-width: 850px) {

    .canalesRow-meterbus {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* MODAL SCRIPTC */
.body-scriptC {
    display: flex;
    gap: var(--gap-div-dispositivo);
    overflow: auto;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
}

.leftDiv-scriptC {
    width: 250px;
    flex-shrink: 0;
}

.centerDiv-scriptC {
    flex: 1;
    display: flex;
    min-width: 0;
}

.rightDiv-scriptC {
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: var(--gap-div-dispositivo);
    flex-shrink: 0;
}

@container modalgeneracion (max-width: 850px) {
    .body-scriptC {
        flex-wrap: wrap;
        overflow-y: auto;
    }

    .rightDiv-scriptC {
        width: 100% !important;
        flex-shrink: 1;
    }
}

@container modalgeneracion (max-width: 650px) {
    .leftDiv-scriptC {
        width: 100%;
        height: 150px;
    }

    .centerDiv-scriptC {
        height: 250px;
    }
}


/* MODAL BUSING-KNX */
.body-busingknx {
    display: grid;
    grid-template-areas: "top top"
        "left right";
    grid-template-columns: 280px 1fr;
    grid-template-rows: auto 1fr;
    gap: var(--gap-div-dispositivo);
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.topDiv-busingknx {
    grid-area: top;
    display: flex;
    align-items: center;
    gap: var(--gap-div-dispositivo);
}

.leftDiv-busingknx {
    grid-area: left;
    height: 100%;
    overflow-y: auto;
}

.rightDiv-busingknx {
    grid-area: right;
    height: 100%;
}

/* Sticky table headers inside modal BUSing-KNX */
.busingknx-header-row {
    position: sticky;
    top: 0;
    background-color: var(--white);
    z-index: 10;
    padding-bottom: 8px;
}

@container modalgeneracion (max-width: 800px) {
    .body-busingknx {
        display: grid;
        grid-template-areas: "top left"
            "right right";

        grid-template-columns: max-content 1fr;
        grid-template-rows: auto 1fr;
        overflow-y: auto;
    }

    .topDiv-busingknx {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .leftDiv-busingknx {
        height: auto;
        min-height: 150px;
    }

    .rightDiv-busingknx {
        height: auto;
        min-height: 300px;
    }
}


/* MODAL GSMDATA ALARMAS RESPONSIVE */
.armado-row-gsmdata {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.armado-left-gsmdata {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

.armado-right-gsmdata {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 8px;
}

.evento-col-gsmdata {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
}

.eventos-box-gsmdata {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.eventos-box-gsmdata>div {
    flex: 1;
    min-width: 0;
}

.entradas-wrapper-gsmadata {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@container modalgeneracion (max-width: 800px) {

    .entradas-wrapper-gsmadata {
        grid-template-columns: repeat(1, 1fr);
    }
}

@container modalgeneracion (max-width: 700px) {
    .armado-row-gsmdata {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
    }

    .armado-left-gsmdata,
    .armado-right-gsmdata {
        width: 100% !important;
    }

    .eventos-box-gsmdata {
        flex-direction: column !important;
    }

    .eventos-box-gsmdata>div {
        width: 100% !important;
        flex: none !important;
    }

    .evento-col-gsmdata {
        width: 100% !important;
    }
}


/* MODAL RESPONSIVE ULING */
.trueFalseRow-uling {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.trueBlock-uling,
.falseBlock-uling {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.row-bits-uling {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

@container modalgeneracion (max-width: 700px) {
    .trueFalseRow-uling {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .trueBlock-uling,
    .falseBlock-uling {
        width: 100% !important;
        flex: none !important;
    }
}

/****************************************************/
/* #endregion [16] FIN MODALES DE LOS DISPOSITIVOS */
/****************************************************/


/****************************************************/
/* #region [17] RESPONSIVE GENERAL MOVIL Y TABLET */
/****************************************************/

/* ---------------------------
 CONJUNTO Moviles y Tablets
----------------------------*/
@media (max-width: 991.98px) {

    /* VIIP */
    .viip-configurationLeft,
    .viip-configurationRight {
        width: 100%;
    }

    .mobile-panel-header .mobile-only .device-search-input {
        border-bottom: 2px solid var(--gris-neutro);
    }

}


/* ---------------------------
 SOLO Moviles Pequeños
----------------------------*/
@media (max-width: 767.98px) {


    .hide-on-mobile {
        display: none !important;
    }

    /*Estilos movil general body de la pagina (layout,moduloscontenedor,iframe...*/
    .layout {
        flex-direction: column;
        gap: 0;
    }

    .header-principal {
        display: none;
    }

    .header-rightPanel {
        display: none;
    }

    #mobileDeviceHeaderContainer {
        align-items: center;
    }

    #mobileDeviceHeaderContainer .header-dispositivo-wrapper {
        align-items: center;
    }


    #mobileDeviceHeaderContainer .header-dispositivo-icono img {
        width: 35px;
    }

    #mobileDeviceHeaderContainer .header-dispositivo-texto h6 {
        font-size: 13px;
    }

    #mobileDeviceHeaderContainer .device-badge {
        font-size: 11px !important;
        min-width: 16px !important;
        height: 16px !important;
    }

    .contenedor_principal {
        flex: 0 0 auto;
        height: auto;
        max-height: none;
    }

    .logoSide,
    .toolbar {
        display: none;
    }

    .drag-handle {
        flex: 0 0 15px;
        cursor: row-resize;
        height: 16px;
        background-color: var(--white);
        border: 1px solid var(--gris-neutro);
        position: relative;
        flex-shrink: 0;
    }

    /* Línea horizontal fina en el medio */
    .drag-handle::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 4px;
        /* más gruesa que antes */
        background-color: var(--gris-oscuro);
        /* contraste fuerte para que se vea */
        transform: translateY(-50%);
        border-radius: 2px;
        /* bordes redondeados opcionales */
    }


    /* “Botón” central para agarrar */
    .drag-handle::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 30px;
        /* más ancho que antes */
        height: 6px;
        /* más alto que antes */
        border-radius: 999px;
        /* background-color: var(--gris-neutro); */
    }

    .right-panel {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        border-left: none;
        border-top: 1px solid var(--gris-neutro);
    }

    .mobile-only {
        display: flex;
    }

    .mobile-panel-header {
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        min-height: 44px;
        background-color: var(--white);
        border-bottom: 1px solid var(--gris-neutro);
        flex: 0 0 auto;
    }

    #deviceModalHeader {
        display: none !important;
    }

    #mostrar-modal_container {
        top: 55px !important;
        /* Debajo del header móvil 'Dispositivos', justo sobre las tabs */
        bottom: auto !important;
        right: 15px !important;
        z-index: 12000 !important;
    }

    .search-results-list {
        margin-right: 0;
    }

    .mobile-panel-header .search-container {
        /* Mover más a la izquierda */
        margin: 0 5px;
        min-width: 0;
        justify-content: center;
        /* Evitar que expanda el flex container padre */
    }

    .mobile-panel-header .select-input-wrapper {
        width: 100%;
        /* Ocupar el espacio disponible */
        max-width: 130px;
        /* Limitar el tamaño máximo */
    }

    .mobile-panel-header .device-search-input,
    .device-search-input {
        width: 100%;
        /* max-width: 100%; */
        /* min-width: 80px; */
    }

    /* Regla vital de iOS Safari: Todos los campos de texto deben ser 16px para evitar auto-zoom y roturas de layout */
    input[type="text"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        font-size: 12px !important;
    }

    .mobile-title {
        font-weight: var(--negrita);
        font-size: 14px;
        color: var(--black);
    }

    .mobile-action-btn {
        border: 1px solid var(--gris-neutro);
        background-color: var(--white);
        color: var(--black);
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 12px;
        cursor: pointer;
        width: auto;
        min-width: 65px;
        padding: 4px 6px;
    }

    .mobile-action-btn:active {
        background-color: #f2f2f2;
    }

    .device-modal {
        position: static;
    }

    .panel-content {
        overflow: hidden;
        transition: height 0.3s ease, opacity 0.3s ease;
        display: block !important;
        height: 0;
        /* JS controlará la altura */
        opacity: 0;
        /* JS controlará la opacidad */
    }

    .panel-content.abierto {
        opacity: 1;
    }

    .panel-content.cerrado {
        opacity: 0;
    }



    /*MODAL addDeviceConfirm */
    .accordion-content {
        grid-template-columns: repeat(3, 1fr);
    }

    /*STS,CUBIK*/

    .zone .hotspot {
        display: flex !important;
        pointer-events: auto;
    }

    .topSceneCard {
        width: auto !important;
    }

    .escenas-grid {
        grid-template-columns: 1fr !important;
    }

    /*ST PLUS */
    .plus-top {
        grid-template-columns: 1fr !important;
    }

    .plus-bottom {
        grid-template-columns: 1fr !important;
    }

    /*Cubik-TL */

    .init-form {
        grid-template-columns: 1fr !important;
    }

    .opciones-fan-wrapper {
        align-items: stretch;
    }

    .opciones-fan-wrapper span {
        white-space: normal;
    }

    /*ULING */
    .divSelectsWrapperUling {
        margin-left: 0 !important;
    }

    .inputULINGnombres {
        margin-left: 0 !important;
    }

    /*WINGS ACTUADORES */
    .persianas-container {
        flex-direction: column;
    }

    /*ACTUADORES */
    .tabla-telegramas {
        overflow-y: hidden;
    }

    /* ASISTENTE RESPONSIVE */
    .btn-next,
    .btn-previous {
        width: 60px !important;
    }

    .btn-next span,
    .btn-previous span,
    #asistente_btn_skip span {
        display: none;
    }

    #asistente_btn_skip {
        width: 56px !important;
        right: 15px !important;
    }

    .rooms-grid-container {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    }

    .project-type-grid {
        justify-content: center;
    }

    .macrocategory-container span {
        display: none;
    }

    .filter-device-table {
        display: none !important;
    }
}

/* ---------------------------
  SOLO Tablets
----------------------------*/
@media (min-width: 768px) and (max-width: 991.98px) {

    /*STS,CUBIK*/
    .escenas-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /*ST PLUS */
    .plus-top {
        grid-template-columns: 1fr 1fr;
    }

    .plus-bottom {
        grid-template-columns: 1fr 1fr;
    }

    /* Ocultar copiar dispositivo del context menu nativo en móvil */
    #copyDevice {
        display: none !important;
    }

    /* Estilos para la nueva toolbar lateral en móvil */
    .mobile-side-toolbar-btn {
        background: transparent;
        border: none;
        padding: 0 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-side-toolbar-btn img {
        width: 24px;
        height: 24px;
    }

    .mobile-toolbar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 10050;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .mobile-toolbar-overlay.mostrar {
        display: block;
        opacity: 1;
    }

    .mobile-side-toolbar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        background: var(--white);
        z-index: 10051;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        display: flex;
        flex-direction: column;
        padding-top: 15px;
    }

    .mobile-side-toolbar.abierto {
        transform: translateX(0);
    }

    .mobile-side-toolbar-header {
        padding: 10px 20px;
        border-bottom: 1px solid var(--gris-neutro);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-side-toolbar-header span {
        font-weight: var(--negrita);
        font-size: 16px;
    }

    .mobile-side-toolbar-header button {
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
        padding: 5px;
    }

    .mobile-side-toolbar-content {
        flex: 1;
        padding: 15px 0;
        overflow-y: auto;
    }

    .mobile-side-toolbar-item {
        padding: 12px 20px;
        display: flex;
        align-items: center;
        gap: 15px;
        font-size: 15px;
        cursor: pointer;
        color: var(--black);
        transition: background-color 0.2s;
    }

    .mobile-side-toolbar-item:active {
        background-color: var(--gris-claro);
    }

    .mobile-side-toolbar-item i,
    .mobile-side-toolbar-item img {
        width: 20px;
        text-align: center;
    }
}

/* ========================================================================= */
/* TOOLBAR LATERAL MÓVIL (Menú de Opciones) */
/* ========================================================================= */
.mobile-toolbar-overlay {
    visibility: hidden;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    /* Sin oscurecer el fondo */
    z-index: 10050;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    will-change: opacity, visibility;
    /* Hint para aceleración por GPU */
}

.mobile-toolbar-overlay.mostrar {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}

.mobile-side-toolbar {
    position: fixed;
    top: 130px;
    left: 15px;
    width: 75px;
    /* Ancho fijo para evitar reflows de 'auto' */
    height: auto;
    max-height: calc(100vh - 150px);
    background: var(--white);
    border-radius: 16px;
    /* Borde más redondeado tipo píldora */
    z-index: 10051;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
    transform: translateX(calc(-100% - 30px));
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
    /* Vertical */
    overflow-y: auto;
    overflow-x: hidden;
    will-change: transform;
    /* Hint para aceleración por GPU */
}

.mobile-side-toolbar::-webkit-scrollbar {
    display: none;
    /* Ocultar scrollbar */
}

.mobile-side-toolbar.abierto {
    transform: translateX(0);
}

.mobile-side-toolbar-header {
    display: none;
}

.mobile-side-toolbar-content {
    display: flex;
    flex-direction: column;
    /* Vertical */
    padding: 8px 5px;
    gap: 5px;
    /* Separación pequeña entre iconos */
}

.mobile-side-toolbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Separación entre icono y texto */
    padding: 10px 8px;
    background: transparent;
    border: none;
    width: auto;
    min-width: 65px;
    text-align: center;
    font-size: 10px;
    /* Texto más pequeño */
    font-weight: 500;
    color: var(--black);
    cursor: pointer;
    border-radius: 10px;
    /* Por si tiene un hover de color */
}

/* Línea separadora abajo en vez de a la derecha */
.mobile-side-toolbar-item:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--gris-claro);
    border-radius: 0;
}

.mobile-side-toolbar-item:active {
    background: var(--gris-claro);
}

.mobile-side-toolbar-item i,
.mobile-side-toolbar-item img,
.mobile-side-toolbar-item div.nav-bar,
.mobile-side-toolbar-item div.fondo-icono {
    width: 24px;
    height: 24px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ocultar botón de copiar en el context menu de móvil */
@media (max-width: 767px) {
    #copyDevice {
        display: none !important;
    }
}

/* Ocultar elementos exclusivos de móvil en pantallas de PC */
@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

/* Icono Configuración reactivo a modo oscuro/claro */
.icon-config {
    display: block;
    width: 22px;
    height: 22px;
    background-color: var(--black);
    -webkit-mask: url("../img/iconos/config.svg") no-repeat center;
    mask: url("../img/iconos/config.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

@media (max-width: 767px) {
    #asistente_btn_movil_manual {
        display: none;
    }

    .qr-manual {
        opacity: 1 !important;
    }
}

/****************************************************/
/* #endregion [17] FIN RESPONSIVE GENERAL MOVIL Y TABLET */
/****************************************************/


/****************************************************/
/* #region [18] NAVBAR Y DROPDOWNS (Migrados de landingPage.css para project.html) */
/****************************************************/

.navbar {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 72px 0 80px;
    background-color: var(--white);
    color: var(--black);
    position: sticky;
    top: 0;
    z-index: 999;
}

.navbar-left {
    display: flex;
    align-items: flex-end;
    gap: 20px;
}

.logoSide {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
}

.logoSideimg1 {
    width: 120px;
    height: auto;
}

.logoSideimg2 {
    width: 100px;
    height: auto;
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* NAVBAR CHEVRONS AND BUTTONS */
.help-btn,
.settings-btn,
.profile-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--black);
    padding: 6px 12px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.help-btn:hover,
.settings-btn:hover,
.profile-btn:hover {
    color: var(--color-primario);
}

.navbar-chevron {
    font-size: 10px;
}

/* MENÚ DE AJUSTES EN NAVBAR */
.settings-menu-container {
    position: relative;
    display: flex;
    align-items: center;
}

.settings-btn {
    height: 30px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    padding: 0 8px;
    cursor: pointer;
    color: var(--gris-top-tabs-text);
    transition: background-color 0.2s;
    font-size: 16px;
    font-weight: var(--negrita);
}

.settings-btn i {
    font-size: 14px;
}

.settings-dropdown {
    position: absolute;
    top: 36px;
    right: 0;
    background: var(--white);
    border: 1px solid var(--gris-80);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    padding: 14px;
    min-width: 150px;
    gap: 12px;
    animation: var(--fade);
    color: var(--black);
}

.settings-dropdown-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.settings-dropdown-item label {
    font-size: 12px;
    font-weight: 500;
    color: var(--gris-neutro);
    display: flex;
    align-items: center;
    gap: 6px;
}



/* MENÚ DE PERFIL EN NAVBAR */
.profile-menu-container {
    position: relative;
    display: flex;
    align-items: center;
}

.profile-btn {
    height: 30px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    padding: 0 8px;
    cursor: pointer;
    color: var(--gris-top-tabs-text);
    transition: background-color 0.2s;
    font-size: 16px;
    font-weight: var(--negrita);
}

.profile-btn i {
    font-size: 14px;
}

.profile-dropdown {
    position: absolute;
    top: 36px;
    right: 0;
    background: var(--white);
    border: 1px solid var(--gris-80);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    padding: 14px;
    min-width: 220px;
    gap: 10px;
    animation: var(--fade);
    color: var(--black);
}

.profile-dropdown-header {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--gris-tarjeta-st);
    padding-bottom: 12px;
    margin-bottom: 4px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    background: var(--color-primario);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--negrita);
    font-size: 14px;
}

.profile-info-meta {
    display: flex;
    flex-direction: column;
}

.profile-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
}

.profile-user-email {
    font-size: 11px;
    color: var(--gris-neutro);
}

.profile-dropdown-item {
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--black);
    padding: 6px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.profile-dropdown-item:hover {
    background-color: var(--gris-claro);
}

/* BOTÓN DE AYUDA Y MODAL */
.help-menu-container {
    display: flex;
    align-items: center;
}

.help-btn {
    height: 30px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    padding: 0 8px;
    cursor: pointer;
    font-weight: var(--negrita);
    color: var(--gris-top-tabs-text);
    transition: background-color 0.2s;
    font-size: 16px;
}

.help-btn i {
    font-size: 14px;
    transition: transform 0.3s ease;
}


/* Estilos de Modales Personalizados para el menú de Ayuda */
.modal-overlay-custom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay);
    /* backdrop-filter: blur(5px); */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.3s ease;
}

.modal-content-custom {
    position: relative;
    background: var(--white);
    border: 1px solid var(--gris-80);
    border-radius: 12px;
    width: 90%;
    max-width: 480px;
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
    padding: 25px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: modalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    color: var(--black);
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.modal-content-custom-help {
    position: relative;
    background: var(--white);
    border: 1px solid var(--gris-80);
    border-radius: 12px;
    width: 90%;
    max-width: 550px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    color: var(--black);
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.header-help {
    padding-bottom: 5px;
    border-bottom: 3px solid var(--gris-claro);
    padding: 25px 25px 0 25px;
}

.modal-header-proyecto {
    padding-bottom: 5px;
    border-bottom: 3px solid var(--gris-claro);
    padding: 25px 25px 0 25px;
    margin-top: -25px;
    margin-left: -25px;
    margin-right: -25px;
}

.modal-header-proyecto h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--black);
    transition: color 0.3s;
    position: relative;
    top: 3px;
    padding-bottom: 5px;
    border-bottom: 3px solid var(--color-primario);
    padding-inline: 25px;
    margin-left: -25px;
    width: max-content;
}

.modal-header-viip {
    padding-bottom: 5px;
    border-bottom: 3px solid var(--gris-claro);
    padding: 20px 20px 0 0;
    margin-top: -20px;
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: 20px;
    position: relative;
}

.modal-header-viip h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--black);
    transition: color 0.3s;
    position: relative;
    top: 3px;
    padding-bottom: 5px;
    border-bottom: 3px solid var(--color-primario);
    padding-inline: 25px;
    width: max-content;
    margin-top: 0;
    margin-bottom: 0;
}

.modal-content-custom-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-block: 15px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    max-height: max-content;
    scrollbar-gutter: stable;
}

.modal-content-custom-help .closeBtnModal,
.modal-header-viip .closeBtnModal {
    color: var(--black) !important;
    top: 28px;
    right: 25px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.modal-content-custom-help .closeBtnModal:hover,
.modal-header-viip .closeBtnModal:hover {
    opacity: 1;
}

.share-modal .closeBtnModal {
    color: var(--gris-neutro) !important;
    top: 25px;
    right: 25px;
    transition: color 0.2s ease;
}

.share-modal .closeBtnModal:hover {
    color: var(--black) !important;
}

.modal-content-custom h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--black);
    transition: color 0.3s;
}

.modal-content-custom-help h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--black);
    transition: color 0.3s;
    position: relative;
    top: 3px;
    padding-bottom: 5px;
    border-bottom: 3px solid var(--color-primario);
    padding-inline: 35px;
    margin-left: -25px;
    width: max-content;
}

.modal-content-custom .header-box {
    margin-bottom: 0;
}

.body-modal-content-custom {
    padding: 35px 35px 45px 35px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    height: 100%;
    line-height: 1.5;
    color: var(--black);
}

.body-modal-content-custom .header-box {
    margin: 0;
}

.required-asterisk {
    color: red;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gris-neutro);
    color: white;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 12px;
    animation: scaleIn 0.15s ease-out forwards;
}

@keyframes scaleIn {
    from {
        transform: scale(0.85);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.tag-pill .remove-tag {
    cursor: pointer;
    font-weight: var(--negrita);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    font-size: 8px;
    transition: background 0.2s, color 0.2s;
    color: white;
}

.tag-pill .remove-tag:hover {
    background: rgba(255, 255, 255, 0.45);
    color: #fff;
}


.input-error {
    border: 1px solid red !important;
    transition: all 0.2s ease;
}

.modal-actions-custom {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 10px;

}

.modal-actions-custom .btn-cancelar {
    width: 140px;
    justify-items: flex-start;
}



/* SVG Mask Icons with dynamic var(--black) coloring */
.icon-kebab {
    display: block;
    width: 24px;
    height: 24px;
    background-color: var(--black);
    -webkit-mask: url("../img/iconos/menu-kebab.svg") no-repeat center;
    mask: url("../img/iconos/menu-kebab.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icon-meatballs {
    display: block;
    width: 24px;
    height: 24px;
    background-color: var(--black);
    -webkit-mask: url("../img/iconos/menu-meatballs.svg") no-repeat center;
    mask: url("../img/iconos/menu-meatballs.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icon-columns-order {
    display: block;
    width: 23px;
    height: 23px;
    background-color: var(--black);
    -webkit-mask: url("../img/iconos/columns-order.svg") no-repeat center;
    mask: url("../img/iconos/columns-order.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.column-disabled {
    color: var(--gris-80);
}

.column-disabled .table-col-toggle-check {
    color: var(--gris-80);
}

/* Opacidad para todos los chevrons */
[class*="chevron"],
[class*="fa-chevron-"] {
    opacity: 0.4;
}

/* Estilos de Chevron SVG */
.chevron-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

.chevron-icon.chevron-down {
    transform: rotate(90deg);
}

.chevron-icon.chevron-up {
    transform: rotate(-90deg);
}

.chevron-icon.chevron-left {
    transform: rotate(180deg);
}

.chevron-icon.chevron-right {
    transform: rotate(0deg);
}

/* Modo oscuro, chevron blanco del estado y de volver atrás */
body.dark .chevron-icon,
body.dark .theme-selector-container img {
    filter: invert(1) brightness(100);
}

.header-back-btn .chevron-icon {
    background-color: var(--gris-oscuro);
    -webkit-mask: url('../img/iconos/chevron.svg') no-repeat center / contain;
    mask: url('../img/iconos/chevron.svg') no-repeat center / contain;
    filter: none !important;
    opacity: 1;
}

.news-slider-arrow:hover .chevron-icon,
.news-toggle-side-btn:hover .chevron-icon {
    filter: invert(1) brightness(100);
    opacity: 1;
}

#helpBtnText:focus,
#settingsBtnText:focus,
#profileNameText:focus {
    color: var(--color-primario);
    outline: none;
}

/****************************************************/
/* #endregion [18] FIN NAVBAR Y DROPDOWNS (Migrados de landingPage.css para project.html) */
/****************************************************/


/****************************************************/
/* #region [19] ----- LANDING PAGE----- */
/****************************************************/

body.dark .search-icon {
    filter: invert(1) brightness(100);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 13px;
    color: var(--gris-neutro);
}

.form-group input[type="text"] {
    background: var(--gris-claro);
    border: 1px solid var(--gris-80);
    border-radius: 4px;
    padding: 6px 12px;
    color: var(--black);
    font-size: 14px;
    transition: border-color 0.2s, background 0.3s, color 0.3s;
}

.form-group input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primario);
}

.upload-area {
    background: var(--gris-claro);
    border: 2px dashed var(--gris-80);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.upload-area:hover {
    background: var(--device-card-fondo);
    border-color: var(--color-primario);
}

.upload-area i {
    font-size: 28px;
    color: var(--gris-neutro);
    margin-bottom: 8px;
}

.upload-area p {
    font-size: 12px;
    color: var(--gris-neutro);
}

.preview-area {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    height: 120px;
    border: 1px solid var(--gris-80);
}

.preview-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-area .clear-search-icon,
.preview-area .clear-search-icon:not(.oculto) {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    right: auto;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    z-index: 10;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.preview-area .clear-search-icon::before {
    content: "✕" !important;
    display: block !important;
    font-size: 16px !important;
    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
    text-align: center !important;
    line-height: 1 !important;
    opacity: 1 !important;
    -webkit-mask: none !important;
    mask: none !important;
    background-color: transparent !important;
}

.preview-area .clear-search-icon:hover {
    background-color: black !important;
}

/* TAG PILLS INPUT SYSTEM */
.tags-input-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--gris-80);
    border-radius: 6px;
    background: var(--gris-claro);
    min-height: 42px;
    cursor: text;
    transition: border-color 0.2s, background 0.3s;
}

.tags-input-container:focus-within {
    border-color: var(--color-primario);
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

#projectTagsInput {
    border: none;
    outline: none;
    background: transparent;
    flex-grow: 1;
    min-width: 100px;
    padding: 4px 0;
    color: var(--black);
    font-size: 14px;
}

.project-tag {
    cursor: pointer;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gris-tarjeta-st);
    color: var(--black);
    display: inline-block;
    transition: 0.2s ease;
}

.project-tag:hover {
    color: white !important;
    background-color: var(--color-primario) !important;
}

/* Desplegable de sugerencias de etiquetas */
.tag-suggestions-dropdown,
.custom-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 306px;
    overflow-y: auto;
    background-color: var(--white);
    border-radius: 6px;
    border: 1px solid var(--gris-80);
    box-shadow: rgba(0, 0, 0, 0.10) 0px 4px 12px;
    list-style: none;
    margin: 4px 0 0 0;
    z-index: 9000;
    animation: var(--fade);
}

.tag-suggestions-dropdown li,
.custom-select-dropdown li {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--black);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.tag-suggestions-dropdown li:hover,
.custom-select-dropdown li:hover {
    background-color: var(--gris-claro);
}

.tag-suggestions-dropdown.oculto,
.custom-select-dropdown.oculto {
    display: none;
}

/* Estado activo para botones con menú desplegable abierto */
.project-menu-btn.active,
.device-kebab.active,
.table-columns-kebab.active,
.news-slider-arrow.active,
.structure-instance-item-btn.active {
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
    color: white !important;
}

.project-menu-btn.active .icon-kebab,
.device-kebab.active .icon-kebab,
.table-columns-kebab.active .icon-columns-order,
.news-slider-arrow.active .kebab-dots-icon,
.structure-instance-item-btn.active .icon-kebab {
    background-color: white !important;
}

/* SVG Mask Icons with dynamic var(--black) coloring */
.icon-kebab {
    display: block;
    width: 24px;
    height: 24px;
    background-color: var(--black);
    -webkit-mask: url("../img/iconos/menu-kebab.svg") no-repeat center;
    mask: url("../img/iconos/menu-kebab.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icon-columns-order {
    display: list-item;
    width: 23px;
    height: 23px;
    background-color: var(--black);
    -webkit-mask: url("../img/iconos/columns-order.svg") no-repeat center;
    mask: url("../img/iconos/columns-order.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/****************************************************/
/* #endregion [19] ----- LANDING PAGE ----- */
/****************************************************/

/****************************************************/
/* #region [19] ASISTENTE WIZZARD */
/****************************************************/
@keyframes fade-zoom-center {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.assistant-modal {
    position: fixed;
    inset: 0;
    background-color: var(--overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    font-family: sans-serif;
}

.assistant-modal .card {
    background-color: var(--white);
    border-radius: 6px;
    width: 80%;
    max-width: 1024px;
    height: 80%;
    border: 1px solid var(--gris-80);
    display: flex;
    flex-direction: column;
    color: var(--black);
    transition: height var(--suave);
    animation: fade-zoom-center 0.25s ease;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.15);
}

.assistant-step3-container {
    display: none;
    width: 100%;
    height: 100%;
    flex-direction: column;
    box-sizing: border-box;
}

.assistant-properties-backdrop {
    display: none !important;
    /* Backdrop ya no es necesario */
}

.assistant-properties-panel {
    display: none;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--white);
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100% - 63px);
    /* Ajustado para dejar ver el header */
    border-radius: 0;
    /* Al ocupar todo el espacio no requiere bordes curvos aquí */
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.assistant-properties-panel.slide-in {
    transform: translateY(0);
}


.room-instance-item.active-room {
    background-color: rgba(0, 188, 112, 0.1) !important;
}

@media (max-width: 768px) {
    .assistant-properties-panel .mobile-close-btn {
        display: none !important;
        border-radius: 8px !important;
        border: 1px solid var(--gris-80) !important;
    }
}

.assistant-modal .modal-content-assistant {
    display: flex;
    overflow: hidden;
    flex: 1;
}

.assistant-modal .project-type-card {
    border: 2px solid var(--color-terciario);
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    transition: all 0.2s ease-in-out;
    background-color: var(--device-card-fondo);
    box-shadow: rgba(0, 0, 0, 0.10) 0px 4px 12px;
}

.assistant-modal .project-type-card:hover {
    border: 2px solid var(--gris-80) !important;
}

.assistant-modal .project-type-card.selected {
    border-color: var(--color-primario) !important;
}

.assistant-modal .project-type-card.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: auto !important;
    border-color: transparent !important;
}

.assistant-modal .project-type-card.disabled:hover {
    border-color: transparent !important;
    box-shadow: rgba(0, 0, 0, 0.10) 0px 4px 12px !important;
}

.assistant-modal .project-type-card.disabled * {
    cursor: not-allowed !important;
}

#summary_btn_program.disabled,
#summary_btn_program.disabled:hover {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background-color: var(--color-primario) !important;
    pointer-events: auto !important;
}

.assistant-modal .hidden-section .props-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--white);
}

.assistant-modal .hidden-section .panel-header {
    font-weight: var(--negrita);
    color: var(--black);
    border-bottom: 1px solid var(--gris-neutro);
}

.assistant-modal .rigth-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* border-radius: 6px; */
    height: 100%;
    overflow-y: auto;
    background: transparent;
    padding: 0;
    box-sizing: border-box;
}

.assistant-modal .hidden-section::-webkit-scrollbar {
    width: 8px;
}

.assistant-modal .hidden-section::-webkit-scrollbar-track {
    background-color: var(--gris-claro);
    border-radius: 6px;
}

.assistant-modal .hidden-section::-webkit-scrollbar-thumb {
    background-color: var(--gris-neutro);
    border-radius: 6px;
    border: 2px solid var(--gris-claro);
}

.assistant-modal .hidden-section::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-primario);
}

.assistant-modal .hidden-section {
    scrollbar-width: thin;
    scrollbar-color: var(--gris-neutro) var(--gris-claro);
}

.assistant-modal .hidden-section .property-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 15px;
    cursor: pointer;
}

.property-row {
    padding: 6px 12px;
}

.property-row:hover {
    background-color: var(--gris-claro);
}

.property-row.selected {
    background-color: var(--gris-tarjeta-st);
    border-left: 4px solid var(--color-primario);
    transition: var(--suave);
}

.assistant-modal .hidden-section .property-row label {
    flex: 1 0 45%;
    margin: 0;
    text-wrap: nowrap;
    color: var(--black);
    cursor: pointer;
}

.assistant-modal .hidden-section .property-row input[type="text"],
.assistant-modal .hidden-section .property-row input[type="number"] {
    flex: 1 0 50%;
    padding: 4px;
    border-radius: 4px;
    border: 1px solid var(--gris-neutro);
}

.assistant-modal .hidden-section .property-row input[type="checkbox"] {
    margin-right: 6px;
}

/* Estilos del Grid de Habitaciones */
.room-card-grid {
    background-color: var(--white);
    border-radius: 8px;
    border: 2px solid transparent;
    padding: 8px 0px 16px 0px;
    background-color: var(--device-card-fondo);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    aspect-ratio: 1.25;
    box-shadow: rgba(0, 0, 0, 0.10) 0px 4px 12px;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.room-card-grid:has(.room-pill-counter:hover) {
    border: 2px solid var(--gris-80);
}

.room-card-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
}

.room-card-grid.has-rooms .room-card-icon {
    opacity: 1;
}


.has-rooms .room-pill-value-wrapper {
    background: var(--color-primario);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.has-rooms .room-pill-value {
    outline: none;
    color: white;
    text-align: center;
}

.room-card-label {
    font-size: 13px;
    margin-bottom: 12px;
    font-weight: var(--negrita);
    text-align: center;
    color: var(--black);
    transition: color 0.2s;

}

.room-card-grid.has-rooms {
    border: 2px solid var(--color-primario) !important;
}

.room-pill-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--gris-tarjeta-st);
    color: var(--black);
    border-radius: 9999px;
    padding: 2px 10px;
    width: 100px;
    height: 26px;
    box-sizing: border-box;
    user-select: none;
}

.room-pill-btn {
    background: none;
    border: none;
    color: var(--black);
    font-weight: var(--negrita);
    font-size: 16px;
    cursor: pointer;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 9999px;
    transition: background-color 0.2s;
}

.room-pill-btn:hover:not(:disabled) {
    background-color: var(--gris-claro);
}

.room-pill-btn:disabled {
    color: var(--bg-btn-cancelar);
    cursor: not-allowed;
}

.room-pill-value {
    font-weight: var(--negrita);
    font-size: 13px;
}

/* Estancias creadas listado */
.room-instance-item {
    padding: 10px 15px;
    cursor: default;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f0f0f0;
    color: var(--black);
    transition: background-color 0.15s;
}

.room-instance-item:hover {
    background-color: var(--gris-claro);
}

.room-instance-item.selected {
    background-color: var(--color-primario);
    color: white;
}

.room-instance-item.selected i {
    color: white !important;
}

.list-placeholder {
    color: var(--gris-neutro);
    font-style: italic;
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    user-select: none;
}

.room-label-editable {
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s;
}

.room-label-editable:hover {
    border-bottom-color: var(--black);
}

.topology-nav {
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    background-color: var(--device-card-fondo);
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.10) 0px 4px 12px;
}

.topology-path {
    color: var(--black);
    font-size: 14px;
    margin-bottom: 15px;
    font-weight: var(--negrita);
}



/****************************************************/
/* #endregion [19] ASISTENTE WIZZARD */
/****************************************************/


/****************************************************/
/* #region [20] PANEL EXPANDIBLE INFERIOR (MODULOS INSTALACION) */
/****************************************************/

#modulosInstalacion {
    position: relative;
    z-index: 1;
}

.bottom-expandable-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
    transition: height 0.3s ease-in-out;
    background-color: var(--white);
    border-top: 1px solid var(--gris-neutro);
}

.bottom-expandable-panel.collapsed {
    height: 0;
    border-top: none;
    box-shadow: none;
}

.bottom-expandable-panel:not(.collapsed) {
    height: 180px;
}

.expand-toggle-btn {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 30px;
    background-color: var(--white);
    border: 1px solid var(--gris-neutro);
    border-bottom: none;
    border-radius: 60px 60px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--gris-oscuro);
    transition: background-color 0.2s, color 0.2s;
    z-index: 101;
}


.expand-toggle-btn i {
    transition: color 0.25s ease-in-out, opacity 0.25s ease-in-out;
    font-size: 14px;
    color: var(--black);
}

.expand-toggle-btn:hover i {
    color: var(--color-primario);
    opacity: 1;
}

.bottom-expandable-panel:not(.collapsed) .expand-toggle-btn i {
    transform: rotate(180deg);
}

.expandable-content {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow-y: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
}

.bottom-expandable-panel:not(.collapsed) .expandable-content {
    opacity: 1;
    overflow: hidden;
    visibility: visible;
}


.unaddressed-sections-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 8px;
}

.unaddressed-title {
    text-align: center;
    color: var(--black, #000);
    font-size: 16px;
    font-weight: var(--negrita);
    background: var(--white);
}

.radar-device-count {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    background-color: var(--color-primario);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
}


.unaddressed-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--gris-claro);
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}


.unaddressed-section h6 {
    margin: 0 0 10px 0;
    color: var(--black);
    font-size: 13px;
    font-weight: 600;
}


.unaddressed-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: visible;
    flex: 1;
}


/* SECCIÓN DEL SLIDER DEL RADAR */
.radar-slider-section {
    position: relative;
    overflow: hidden;
}



.radar-slider-section::before,
.radar-slider-section::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    pointer-events: none;
    z-index: 10;
}



.radar-slider-section::before {
    left: 0;
    background: linear-gradient(to right, var(--gris-claro), transparent);

}

.radar-slider-section::after {
    right: 0;
    background: linear-gradient(to left, var(--gris-claro), transparent);
}


.radar-slider-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    overflow: hidden;
    flex: 1;
    height: 100%;
}



.radar-slider-viewport {
    flex: 1;
    min-width: 0;
    margin: 0 40px;
    overflow: visible;
    position: relative;
}

.radar-container-horizontal {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-content: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    height: 100%;
}

.radar-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--white);
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--black);
    transition: all 0.2s ease;
}

.radar-slider-arrow:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.radar-slider-arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

#prevRadarBtn {
    left: 5px;
}

#nextRadarBtn {
    right: 5px;
}

.unaddressed-device-card img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 5px;
}

.unaddressed-device-card-v2 {
    min-width: 140px;
    height: 100px;
    padding: 8px 8px 0px 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    overflow: visible;
    border: 2px solid transparent;
    border-radius: 8px;
    position: relative;
    background: var(--device-card-fondo);
    cursor: default;
}

.unaddressed-device-card-v2:hover {
    border-color: var(--gris-80);
    background-color: var(--gris-claro);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.radar-meatball-btn {
    border-radius: 50%;
    transition: background-color 0.15s ease-in-out;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.radar-meatball-btn:hover {
    background-color: rgba(0, 188, 112, 0.15);
}

.unaddressed-device-card-v2 .card-btn-hover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-primario);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
    font-size: 16px;
}

.unaddressed-device-card-v2:hover .card-btn-hover {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1.1);
}

.unaddressed-device-card-v2:hover .card-content-bottom {
    opacity: 0.1;
}

.card-content-bottom {
    transition: opacity 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 2px;
}

.radar-filter-tab {
    color: var(--black) !important;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 10px;
    position: relative;
    top: 3px;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    font-size: 13px;
    line-height: 1.05rem;
    box-sizing: border-box;
}

.radar-filter-tab:hover {
    border-bottom-color: var(--gris-neutro) !important;
}

.radar-filter-tab.active {
    color: var(--color-primario) !important;
    border-bottom-color: var(--color-primario) !important;
}

.radar-filter-tab.active span:not(.radar-device-count-small) {
    color: var(--color-primario) !important;
}

.radar-filter-tab.active .radar-device-count-small {
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

.unaddressed-title {
    color: var(--color-primario) !important;
}

.radar-search-input {
    padding: 6px 30px 6px 34px;
    padding-left: 40px;
    position: relative;
    top: 0;
    font-size: 14px;
    line-height: 1.05rem;
    width: 150px;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    outline: none;
    background: transparent;
    color: var(--black);
    transition: border-bottom-color 0.2s;
    box-sizing: border-box;
}

.radar-search-input:hover {
    border-bottom-color: var(--gris-neutro);
}

.radar-search-input:focus {
    border-bottom-color: var(--color-primario);
}

.select-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.top-device-filters .tab-select-wrapper,
.bottom-device-filters .tab-select-wrapper,
.top-device-filters .select-input-wrapper,
.bottom-device-filters .select-input-wrapper,
.top-search-container .select-input-wrapper,
.bottom-search-container .select-input-wrapper,
.top-device-filters .linked-search-label,
.bottom-device-filters .linked-search-label,
.top-search-container .linked-search-label,
.bottom-search-container .linked-search-label {
    top: 3px;
}

.select-input-wrapper .search-icon {
    width: 20px;
    position: absolute;
    left: 10px;
    pointer-events: none;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
}

.select-input-wrapper .clear-search-icon {
    position: absolute;
    right: 10px;
    font-size: 18px;
    color: var(--gris-header);
    z-index: 10;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
}


/* ==========================================================================
   Modo Programacion (Feedback visual)
   ========================================================================== */
.device-img-wrapper {
    position: relative;
}

.prog-mode-badge-container {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px 8px;
    gap: 6px;
    z-index: 20;
    cursor: help;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.prog-mode-badge-dot {
    width: 10px;
    height: 10px;
    background-color: #ff3b30;
    border-radius: 50%;
    animation: pulseProgMode 2s infinite;
}

.prog-mode-badge-text {
    font-size: 10px;
    font-weight: 600;
    color: #4b5563;
    line-height: 1;
}

.device.prog-mode-error,
.prog-mode-error {
    box-shadow: inset 0 0 0 2px #ff3b30 !important;
    border-color: transparent !important;
}

/* Para la vista de lista, anulamos el box-shadow porque se rompe, y usamos bordes reales */
tr.prog-mode-error {
    box-shadow: none !important;
}

tr.prog-mode-error td {
    border-top: 1px solid #ff3b30 !important;
    border-bottom: 1px solid #ff3b30 !important;
}

tr.prog-mode-error td:first-child {
    border-left: 1px solid #ff3b30 !important;
}

tr.prog-mode-error td:last-child {
    border-right: 1px solid #ff3b30 !important;
}

/* Drag over desde radar a lista (reemplaza bordes y fondo según compatibilidad) */
tr.device-row.drop-target-hover-conflict {
    box-shadow: none !important;
}

.device-row.drop-target-hover-conflict td {
    background-color: rgba(0, 188, 113, 0.1) !important;
    border-top: 1px solid var(--color-primario) !important;
    border-bottom: 1px solid var(--color-primario) !important;
}

.device-row.drop-target-hover-conflict td:first-child {
    border-left: 1px solid var(--color-primario) !important;
}

.device-row.drop-target-hover-conflict td:last-child {
    border-right: 1px solid var(--color-primario) !important;
}

tr.device-row.drop-target-error-conflict {
    box-shadow: none !important;
}

.device-row.drop-target-error-conflict td {
    background-color: rgba(217, 83, 79, 0.05) !important;
    border-top: 1px solid var(--rojo, #d9534f) !important;
    border-bottom: 1px solid var(--rojo, #d9534f) !important;
}

.device-row.drop-target-error-conflict td:first-child {
    border-left: 1px solid var(--rojo, #d9534f) !important;
}

.device-row.drop-target-error-conflict td:last-child {
    border-right: 1px solid var(--rojo, #d9534f) !important;
}

tr.device-row.drop-target-warning-conflict {
    box-shadow: none !important;
}

.device-row.drop-target-warning-conflict td {
    background-color: rgba(240, 173, 78, 0.05) !important;
    border-top: 1px solid #f0ad4e !important;
    border-bottom: 1px solid #f0ad4e !important;
}

.device-row.drop-target-warning-conflict td:first-child {
    border-left: 1px solid #f0ad4e !important;
}

.device-row.drop-target-warning-conflict td:last-child {
    border-right: 1px solid #f0ad4e !important;
}

@keyframes pulseProgMode {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(255, 59, 48, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
    }
}


.prog-mode-badge-list {
    position: absolute;
    top: 6px;
    left: 22px;
    z-index: 20;
    cursor: help;
}



/****************************************************/
/* #endregion [20] PANEL EXPANDIBLE INFERIOR (MODULOS INSTALACION) */
/****************************************************/





/* =====================================================
   ALINEACIÓN DE FILTROS SUPERIORES E INFERIORES
   ===================================================== */

.top-device-filters,
.bottom-device-filters {
    display: flex;
    align-items: flex-end;
}

.top-device-filters .tab-select-wrapper,
.bottom-device-filters .tab-select-wrapper {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.top-search-container,
.bottom-search-container {
    display: flex;
    align-items: flex-end;
}

.bottom-device-filters {
    margin-right: 0 !important;
}

.radar-filters-container {
    gap: 10px;
}

.radar-device-filters {
    margin-right: 0 !important;
}

/* Insignia de proyecto compartido conmigo */
.shared-project-badge {
    cursor: default;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gris-tarjeta-st);
    color: var(--black);
    display: inline-block;
}



/****************************************************/
/* #region [21] ASISTENTE  */
/****************************************************/


/* #modulos en el tour ocupa todo el panel inferior */
#vinculacionesTourBottomPanel #modulos {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--white);
}

/* El wrapper de la tabla ocupa todo el espacio disponible */
#vinculacionesTourBottomPanel #modulos .device-table-wrapper {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--gris-claro);
    border-radius: 8px;
    background: var(--white);
}

/* Ocultar elementos de UI que no queremos en el tour */
#vinculacionesTourBottomPanel #modulos .table-columns-kebab,
#vinculacionesTourBottomPanel #modulos .sort-indicator,
#vinculacionesTourBottomPanel #modulos th[data-col="chevron"],
#vinculacionesTourBottomPanel #modulos td[data-col="chevron"],
#vinculacionesTourBottomPanel #modulos th[data-col="elementos"],
#vinculacionesTourBottomPanel #modulos td[data-col="elementos"],
#vinculacionesTourBottomPanel #modulos th[data-col="otros"],
#vinculacionesTourBottomPanel #modulos td[data-col="otros"],
#vinculacionesTourBottomPanel #modulos th[data-col="diagnostico"],
#vinculacionesTourBottomPanel #modulos td[data-col="diagnostico"],
#vinculacionesTourBottomPanel #modulos th[data-col="imagenHijo"],
#vinculacionesTourBottomPanel #modulos td[data-col="imagenHijo"],
#vinculacionesTourBottomPanel #modulos .list-view-empty,
#vinculacionesTourBottomPanel #modulos #addDeviceBtn {
    display: none !important;
}

/* Cabecera de la tabla */
#vinculacionesTourBottomPanel #modulos .device-table thead th {
    color: var(--black);
    padding: 6px 12px;
    box-shadow: none;
    border-bottom: 1px solid var(--gris-80);
    font-size: 11px;
    text-align: left;
    cursor: default;
    user-select: none;
}

/* Suprimir hover en filas — sin interacción normal */
#vinculacionesTourBottomPanel #modulos .device-table tbody tr:hover td,
#vinculacionesTourBottomPanel #modulos .device-table tbody tr.device-row:hover td {
    background: var(--white) !important;
}

/* Celdas normales */
#vinculacionesTourBottomPanel #modulos .device-table tbody td {
    cursor: default;
    user-select: none;
}

/* El nombre del nodo no debe parecer editable */
#vinculacionesTourBottomPanel #modulos .label-container .label {
    cursor: default !important;
    pointer-events: none;
}

/* Drag-over: feedback visual al arrastrar sobre una fila */
#vinculacionesTourBottomPanel #modulos .device-table tbody tr.drag-over td {
    background-color: rgba(0, 188, 112, 0.1) !important;
}

#vinculacionesTourBottomPanel #modulos .device-table tbody tr.drag-over {
    outline: 1px solid var(--color-primario) !important;
    outline-offset: -2px;
}

/* Fila resaltada del dispositivo actual en el tour */
#vinculacionesTourBottomPanel #modulos .device-table tbody tr.vinc-tour-current-device td {
    background: color-mix(in srgb, var(--color-primario) 8%, transparent) !important;
}

#vinculacionesTourBottomPanel #modulos .device-table tbody tr.vinc-tour-current-device:hover td {
    background: color-mix(in srgb, var(--color-primario) 8%, transparent) !important;
}


/****************************************************/
/* #endregion [21] ASISTENTE */
/****************************************************/