/*
 * entity-transfer.css
 * Doble panel de asociacion de entidades (EntityRelationsEditor): Disponibles <-> Seleccionados.
 * Estilo fiel al diseno aprobado (panel B). Acentos verdes literales; los neutros se
 * remapean en modo oscuro al final del fichero para no romper el tema.
 */

.entity-transfer .et-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #e7e9eb;
    border-radius: 6px;
    overflow: hidden;
}

.entity-transfer .et-pane--selected {
    background: #fbfefd;
    border-color: #c6ede1;
}

/* Cabeceras */
.entity-transfer .et-pane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 13px;
    border-bottom: 1px solid #eef1f4;
}

.entity-transfer .et-pane--selected .et-pane-head {
    background: #eafaf5;
    border-bottom-color: #d9efe8;
}

.entity-transfer .et-pane-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a969c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entity-transfer .et-pane--selected .et-pane-title {
    color: #148068;
}

.entity-transfer .et-bulk {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    background: none;
    border: 0;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}

.entity-transfer .et-bulk--add { color: #1ab394; }
.entity-transfer .et-bulk--add:hover { color: #15987f; }
.entity-transfer .et-bulk--remove { color: #ed5565; }
.entity-transfer .et-bulk--remove:hover { color: #d6414f; }

/* Buscador (fondo blanco, lupa dentro) */
.entity-transfer .et-search-wrap { padding: 10px 12px 0; }

.entity-transfer .et-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 11px;
    background: #fff;
    border: 1px solid #dfe3e7;
    border-radius: 6px;
}

.entity-transfer .et-search > i { color: #a1a9b1; font-size: 15px; }

.entity-transfer .et-search input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 12.5px;
    color: #4c4c5c;
}

.entity-transfer .et-search input::placeholder { color: #a1a9b1; }

.entity-transfer .et-search-clear {
    display: flex;
    padding: 0;
    background: none;
    border: 0;
    color: #a1a9b1;
    cursor: pointer;
}

.entity-transfer .et-search-clear:hover { color: #6c757d; }

/* Listas */
.entity-transfer .et-list { overflow-y: auto; }
.entity-transfer .et-list--avail { height: 300px; padding: 8px 0 4px; }
.entity-transfer .et-list--selected { height: 300px; padding: 10px 12px; }

/* Fila base (boton) */
.entity-transfer .et-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    text-align: left;
    font-family: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.entity-transfer .et-item-name {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.35;
}

.entity-transfer .et-item .badge { flex-shrink: 0; }

/* Fila disponible: chip "+" a la derecha, verde al hover */
.entity-transfer .et-item--avail {
    padding: 9px 13px;
    transition: background .12s ease;
}

.entity-transfer .et-item--avail .et-item-name { color: #4c4c5c; }
.entity-transfer .et-item--avail:hover { background: #f4fbf9; }

.entity-transfer .et-add-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #eafaf5;
    color: #1ab394;
    opacity: .5;
    transition: opacity .12s ease, background .12s ease, color .12s ease;
}

.entity-transfer .et-add-chip > i { font-size: 14px; }
.entity-transfer .et-item--avail:hover .et-add-chip { opacity: 1; background: #1ab394; color: #fff; }

/* Fila seleccionada: check en cuadrado verde, fondo blanco con borde, "x" a la derecha */
.entity-transfer .et-item--selected {
    padding: 10px 11px;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid #cfe9e0;
    border-radius: 6px;
    transition: border-color .12s ease;
}

.entity-transfer .et-item--selected:last-child { margin-bottom: 0; }
.entity-transfer .et-item--selected:hover { border-color: #9fddca; }
.entity-transfer .et-item--selected .et-item-name { color: #313a46; font-weight: 600; }

.entity-transfer .et-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: #1ab394;
    color: #fff;
}

.entity-transfer .et-check > i { font-size: 13px; }

.entity-transfer .et-remove-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #b0b8bf;
    transition: color .12s ease;
}

.entity-transfer .et-remove-chip > i { font-size: 14px; }
.entity-transfer .et-item--selected:hover .et-remove-chip { color: #ed5565; }

/* Placeholder de ayuda */
.entity-transfer .et-empty {
    text-align: center;
    color: #b0b8bf;
    font-size: 11.5px;
    line-height: 1.5;
    padding: 26px 14px;
}

.entity-transfer .et-empty > i {
    display: block;
    margin-bottom: 6px;
    font-size: 22px;
    color: #c9ced3;
}

.entity-transfer .et-empty--selected { padding-top: 34px; }

/* ===================== Maestro-detalle de relaciones ===================== */
.relations-md {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* Rail (maestro) */
.relations-md .rmd-rail {
    width: 236px;
    flex-shrink: 0;
}

.relations-md .rmd-rail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    font-family: inherit;
    background: none;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 7px;
    padding: 9px 11px;
    cursor: pointer;
}

.relations-md .rmd-rail-item + .rmd-rail-item { margin-top: 2px; }
.relations-md .rmd-rail-item:hover { background: #f6f7fb; }

.relations-md .rmd-ic {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: #a1a9b1;
}

.relations-md .rmd-rail-item .rmd-ic { font-size: 17px; }
.relations-md .rmd-ic > svg { width: 17px; height: 17px; }

.relations-md .rmd-nm {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #4c4c5c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relations-md .rmd-ct {
    flex-shrink: 0;
    min-width: 22px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    padding: 1px 7px;
    background: #eef1f4;
    color: #8a969c;
}

.relations-md .rmd-ct.on { background: #eafaf5; color: #148068; }

.relations-md .rmd-rail-item.active { background: #eafaf5; border-left-color: #1ab394; }
.relations-md .rmd-rail-item.active .rmd-ic { color: #1ab394; }
.relations-md .rmd-rail-item.active .rmd-nm { color: #148068; font-weight: 700; }

/* Detalle (un solo editor) */
.relations-md .rmd-detail { flex: 1; min-width: 0; }

.relations-md .rmd-detail-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 2px 12px;
    font-size: 14px;
    font-weight: 700;
    color: #313a46;
}

.relations-md .rmd-detail-title .rmd-ic { color: #1ab394; font-size: 18px; }
.relations-md .rmd-detail-title .rmd-ic > svg { width: 18px; height: 18px; }

/* Responsive: en estrecho el rail pasa arriba, a lo ancho, con scroll horizontal */
@media (max-width: 767.98px) {
    .relations-md { flex-direction: column; }
    .relations-md .rmd-rail {
        width: 100%;
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .relations-md .rmd-rail-item {
        width: auto;
        flex-shrink: 0;
        border-left: 0;
        border-bottom: 3px solid transparent;
        border-radius: 7px 7px 0 0;
    }
    .relations-md .rmd-rail-item + .rmd-rail-item { margin-top: 0; }
    .relations-md .rmd-rail-item.active { border-left-color: transparent; border-bottom-color: #1ab394; }
}

/* Modo oscuro del maestro-detalle */
[data-bs-theme="dark"] .relations-md .rmd-rail-item:hover { background: rgba(255, 255, 255, .04); }
[data-bs-theme="dark"] .relations-md .rmd-nm { color: var(--ins-body-color); }
[data-bs-theme="dark"] .relations-md .rmd-ct { background: rgba(255, 255, 255, .08); color: #aab8c5; }
[data-bs-theme="dark"] .relations-md .rmd-ct.on { background: rgba(26, 179, 148, .16); color: #4fd6b8; }
[data-bs-theme="dark"] .relations-md .rmd-rail-item.active { background: rgba(26, 179, 148, .12); }
[data-bs-theme="dark"] .relations-md .rmd-detail-title { color: var(--ins-emphasis-color, #dee2e6); }

/* -------- Modo oscuro: remapea solo los neutros, mantiene los acentos verdes -------- */
[data-bs-theme="dark"] .entity-transfer .et-pane {
    background: var(--ins-secondary-bg);
    border-color: rgba(255, 255, 255, .09);
}

[data-bs-theme="dark"] .entity-transfer .et-pane--selected {
    background: rgba(26, 179, 148, .06);
    border-color: rgba(26, 179, 148, .35);
}

[data-bs-theme="dark"] .entity-transfer .et-pane-head { border-bottom-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .entity-transfer .et-pane--selected .et-pane-head {
    background: rgba(26, 179, 148, .14);
    border-bottom-color: rgba(26, 179, 148, .28);
}

[data-bs-theme="dark"] .entity-transfer .et-search {
    background: var(--ins-secondary-bg);
    border-color: rgba(255, 255, 255, .14);
}

[data-bs-theme="dark"] .entity-transfer .et-search input { color: var(--ins-body-color); }
[data-bs-theme="dark"] .entity-transfer .et-item--avail .et-item-name { color: var(--ins-body-color); }
[data-bs-theme="dark"] .entity-transfer .et-item--avail:hover { background: rgba(26, 179, 148, .10); }

[data-bs-theme="dark"] .entity-transfer .et-item--selected {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(26, 179, 148, .30);
}

[data-bs-theme="dark"] .entity-transfer .et-item--selected .et-item-name { color: var(--ins-emphasis-color, #dee2e6); }