/* Transitional styles extracted from DEVwebsite/modules and DEVwebsite/modals.
 * Each scope exists only while its original template marker is in the document.
 * Keep module scopes before modal scopes, and preserve source block order.
 * Keyframe names are isolated per source, except documented runtime contracts.
 * Functional inline style attributes and script-generated styles stay in HTML.
 * tools/extract-template-styles.py --check validates markers and CSS integrity.
 */
/* dui-template-style {"key":"modules/admindt4:0","bytes":3982,"sha256":"570203ecc2ca07e526859f116c910fa85b30556595712ed0c0ea4f9ea7932f95","media":null,"source_sha256":"570203ecc2ca07e526859f116c910fa85b30556595712ed0c0ea4f9ea7932f95"} */
@scope (:root:has(template[data-dui-legacy-style="modules/admindt4:0"])) {

    .ESNUMADMINDT4{
        display:none !important;
    }
    .badgePayment{
        width:80%;
    }
    #akiponreports {
        min-height: 700px;
    }

    /* nombre y email cortados con puntos suspensivos: el valor entero queda en el title */
    .admdt4-trunc{
        display:inline-block;
        max-width:140px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        vertical-align:middle;
    }
    .admdt4-trunc-lg{
        max-width:200px;
    }

    /* Verified y P.M.: chips propios (badge-soft-* no existe en el CSS del CRM y salia texto suelto) */
    .admdt4-chip{
        display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;
        border:1px solid var(--dt-border, rgba(127,127,127,.25));border-radius:999px;
        font-size:.75rem;font-weight:500;line-height:1;white-space:nowrap;color:var(--dt-text-2, #6b7280);
    }
    .admdt4-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55}
    .admdt4-chip.is-ok{color:#16a34a;border-color:rgba(22,163,74,.35)}
    .admdt4-chip.is-ok::before{opacity:1}
    .admdt4-pm{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
        color:#16a34a;border:0;font-size:13px}
    .admdt4-none{color:var(--dt-text-3, #9ca3af)}

    /* tabla mas compacta, en la linea de adminv2_logs; colores por variables del tema (claro/oscuro) */
    #akiponreportsTABLA{
        font-size:.85rem;
    }
    #akiponreportsTABLA tbody td{
        vertical-align:middle;
        padding-top:.45rem;
        padding-bottom:.45rem;
    }
    /* la cabecera acompaña al scroll; el offset de la topbar es el mismo patron que .hr-attendance-sticky
       del tema, y el fondo lleva !important porque .table thead th lo fuerza a transparent */
    #akiponreportsTABLA thead th{
        position:sticky;
        top:calc(var(--dt-topbar-h, 44px));
        z-index:2;
        background:var(--dt-surface) !important;
        white-space:nowrap;
    }
    #akiponreportsTABLA tbody tr:hover td{
        background:var(--dt-hover);
    }
    /* ancho de los selects de Comercial / C.Success (antes lo daba la clase MAXSIZEADM) */
    #akiponreportsTABLA tbody select{
        width:100%;
        max-width:140px;
        font-size:inherit;
    }
    /* fecha alta, agentes, trial, saldo, dias en negativo y ultima conexion: en una sola linea */
    #akiponreportsTABLA tbody td:nth-child(8),
    #akiponreportsTABLA tbody td:nth-child(9),
    #akiponreportsTABLA tbody td:nth-child(10),
    #akiponreportsTABLA tbody td:nth-child(11),
    #akiponreportsTABLA tbody td:nth-child(12),
    #akiponreportsTABLA tbody td:nth-child(13){
        white-space:nowrap;
    }
    .admindt4-actions-btn{
        display:inline-flex;
        width:30px;
        height:30px;
        margin:0;
        padding:0 !important;
        align-items:center;
        justify-content:center;
        color:var(--dt-muted) !important;
        background:transparent !important;
        border:0 !important;
        border-radius:7px !important;
        box-shadow:none !important;
        cursor:pointer;
        transition:color .15s ease, background-color .15s ease, border-color .15s ease;
    }
    .admindt4-actions-btn:hover,
    .admindt4-actions-btn[aria-expanded="true"]{
        color:var(--dt-text) !important;
        background:var(--dt-hover) !important;
        border-color:var(--dt-border-strong) !important;
    }
    .admindt4-actions-btn:focus-visible{
        outline:2px solid var(--dt-focus);
        outline-offset:2px;
        box-shadow:none !important;
    }
    .admindt4-actions-btn .ti{
        font-size:17px;
        line-height:1;
    }
    .admindt4-actions-menu{
        min-width:190px;
        padding:5px !important;
    }
    .admindt4-actions-menu .dropdown-item{
        min-height:32px;
        padding:6px 9px;
        border-radius:6px;
        font-size:12px;
    }

}
/* end dui-template-style modules/admindt4:0 */
/* dui-template-style {"key":"modules/admindt4controlbds:0","bytes":26277,"sha256":"8bac98fba27e9c214cb408399521b484f36ed3b1d7e176fb36ec8ae937335db4","media":null,"source_sha256":"8bac98fba27e9c214cb408399521b484f36ed3b1d7e176fb36ec8ae937335db4"} */
@scope (:root:has(template[data-dui-legacy-style="modules/admindt4controlbds:0"])) {

    #main-wrapper .page-wrapper .body-wrapper > #akicontenidonormal:has(#datalyse-machine-monitor) { margin: 0 !important; padding: 0 !important; max-width: none !important; }
    #datalyse-machine-monitor { width: 100%; max-width: none; min-width: 0; margin: 0; padding: 0; color: var(--dt-text); }
    #datalyse-machine-monitor[hidden], #datalyse-machine-monitor [hidden] { display: none !important; }
    #datalyse-machine-monitor .mm-eyebrow { color: var(--dt-muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .55rem; }
    #datalyse-machine-monitor .mm-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
    #datalyse-machine-monitor .mm-button { border: 0; border-radius: var(--dt-radius-sm); background: var(--dt-surface); color: var(--dt-text); padding: .6rem .85rem; font: inherit; font-size: .83rem; }
    #datalyse-machine-monitor #mm-database-section { margin:0 0 1rem; }
    #datalyse-machine-monitor #mm-db-primary .mm-fleet-chart { height:460px; resize:vertical; }
    #datalyse-machine-monitor #mm-db-details > summary { cursor:pointer; padding:.8rem 0; color:var(--dt-text); font-size:.82rem; }
    #datalyse-machine-monitor #mm-db-primary .mm-fleet-legend { max-height:100px; }
    #datalyse-machine-monitor .mm-legend-value { margin-left:auto; white-space:nowrap; font-variant-numeric:tabular-nums; }
    #datalyse-machine-monitor .mm-power-actions { display:flex; flex-wrap:wrap; gap:.3rem; max-width:250px; margin-top:.5rem; }
    #datalyse-machine-monitor .mm-power-actions .mm-button { font-size:.72rem; padding:.3rem .5rem; }
    #datalyse-machine-monitor .mm-button-primary { background: var(--dt-cta); border-color: var(--dt-cta); color: var(--dt-cta-fg); }
    #datalyse-machine-monitor .mm-button-primary:hover { background: var(--dt-cta-hover); }
    #datalyse-machine-monitor .mm-button:disabled { opacity: .5; cursor: default; }
    #datalyse-machine-monitor button:focus-visible, #datalyse-machine-monitor input:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 2px; }
    #datalyse-machine-monitor .mm-session { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1rem 1.2rem; margin-bottom: 1rem; }
    #datalyse-machine-monitor .mm-session p { margin: .3rem 0 0; color: var(--dt-muted); font-size: .8rem; }
    #datalyse-machine-monitor .mm-status { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; white-space: nowrap; }
    #datalyse-machine-monitor .mm-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--dt-muted); flex-shrink: 0; }
    #datalyse-machine-monitor .mm-online .mm-dot { background: var(--dt-success); }
    #datalyse-machine-monitor .mm-error .mm-dot { background: var(--dt-danger); }
    #datalyse-machine-monitor .mm-warning .mm-dot { background: var(--dt-warning); }
    #datalyse-machine-monitor .mm-archived { color: var(--dt-muted); }
    #datalyse-machine-monitor .mm-countdown { font-size: 1.4rem; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
    #datalyse-machine-monitor .mm-countdown-label { font-size: .72rem; color: var(--dt-muted); margin-left: .5rem; }
    #datalyse-machine-monitor .mm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: .8rem; margin-bottom: 1.25rem; }
    #datalyse-machine-monitor .mm-incidents { padding: 1rem 1.2rem; margin: 0 0 1.25rem; }
    #datalyse-machine-monitor .mm-incidents-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem; }
    #datalyse-machine-monitor .mm-incidents h2 { font-size: 1rem; margin: 0; }
    #datalyse-machine-monitor .mm-incidents ul { margin: .75rem 0 0; padding-left: 1.2rem; }
    #datalyse-machine-monitor .mm-incidents li { padding: .2rem 0; font-size: .82rem; overflow-wrap: anywhere; }
    #datalyse-machine-monitor .mm-incidents.has-incidents { border-left: 3px solid var(--dt-danger); }
    #datalyse-machine-monitor .mm-table tr.mm-affected { background: var(--dt-surface-2); }
    #datalyse-machine-monitor .mm-table tr.mm-danger-row > td:first-child { box-shadow: inset 3px 0 var(--dt-danger); }
    #datalyse-machine-monitor .mm-fleet-reading.has-alarm { color: var(--dt-danger); font-weight: 600; }
    #datalyse-machine-monitor .mm-incidents p { color: var(--dt-muted); margin: .65rem 0 0; font-size: .8rem; }
    #datalyse-machine-monitor .mm-stat-label { display: block; color: var(--dt-muted); font-size: .76rem; }
    #datalyse-machine-monitor .mm-stat-value { display: block; margin: .55rem 0 .15rem; font-size: 1.6rem; font-weight: 500; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
    #datalyse-machine-monitor .mm-stat-note { color: var(--dt-muted); font-size: .72rem; }
    #datalyse-machine-monitor [data-mm-metric="cpu"] { --mm-series: var(--dt-tint-info-tx); --mm-tint: var(--dt-tint-info-bg); }
    #datalyse-machine-monitor [data-mm-metric="ram"] { --mm-series: var(--dt-tint-ok-tx); --mm-tint: var(--dt-tint-ok-bg); }
    #datalyse-machine-monitor [data-mm-metric="iops"] { --mm-series: var(--dt-tint-warn-tx); --mm-tint: var(--dt-tint-warn-bg); }
    #datalyse-machine-monitor [data-mm-metric] .mm-stat-value { color: var(--mm-series); }
    #datalyse-machine-monitor .mm-command-center { display: grid; grid-template-columns: 1fr; gap: 0; align-items: start; margin: 0; }
    #datalyse-machine-monitor .mm-control-rail { min-width: 0; order: 2; display: grid; grid-template-columns: 1fr; gap: .65rem; margin-top: .75rem; }
    #datalyse-machine-monitor .mm-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border: 0; border-radius: var(--dt-radius); background: var(--dt-surface); overflow: hidden; margin: 0 0 1rem; }
    #datalyse-machine-monitor .mm-stats .dui-stat-card { border: 0; border-radius: 0; box-shadow: none; padding: .75rem 1rem; background: transparent; }
    #datalyse-machine-monitor .mm-stats .dui-stat-card + .dui-stat-card { border-left: 1px solid var(--dt-border); }
    #datalyse-machine-monitor .mm-stat-value { margin: .25rem 0 .1rem; font-size: 1.4rem; }
    #datalyse-machine-monitor .mm-incidents { padding: 1rem; margin: 0; }
    #datalyse-machine-monitor .mm-incidents ul { max-height: 190px; overflow: auto; }
    #datalyse-machine-monitor .mm-incidents .mm-actions { gap: .35rem; margin-top: .8rem; }
    #datalyse-machine-monitor .mm-incidents .mm-button { font-size: .72rem; padding: .45rem .55rem; }
    #datalyse-machine-monitor .mm-fleet { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; min-width: 0; width: 100%; order: 1; }
    #datalyse-machine-monitor .mm-fleet-chart { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 100%; min-width: 260px; height: 500px; min-height: 360px; padding: .65rem; margin: 0; border: 1px solid var(--dt-border); border-radius: var(--dt-radius-sm); box-shadow: none; overflow: auto; resize: both; }
    #datalyse-machine-monitor .mm-fleet-head { display: flex; justify-content: space-between; align-items: baseline; gap: .7rem; }
    #datalyse-machine-monitor .mm-fleet-head h2 { font-size: 1rem; font-weight: 600; margin: 0; letter-spacing: -.02em; }
    #datalyse-machine-monitor .mm-fleet-reading { font-size: .73rem; color: var(--dt-muted); text-align: right; font-variant-numeric: tabular-nums; }
    #datalyse-machine-monitor .mm-fleet-caption { font-size: .69rem; color: var(--dt-muted); margin: .35rem 0 .9rem; }
    #datalyse-machine-monitor .mm-fleet-frame { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); grid-template-rows: minmax(0,1fr) auto; gap: .45rem; flex: 1; min-height: 150px; }
    #datalyse-machine-monitor .mm-fleet-scale { display: flex; flex-direction: column; justify-content: space-between; text-align: right; color: var(--dt-muted); font-size: .62rem; }
    #datalyse-machine-monitor .mm-fleet-plot { position: relative; height: 100%; min-width: 0; outline-offset: 3px; }
    #datalyse-machine-monitor .mm-fleet-plot:focus-visible { outline: 2px solid var(--dt-focus); }
    #datalyse-machine-monitor .mm-fleet-svg { display: block; width: 100%; height: 100%; overflow: visible; }
    #datalyse-machine-monitor .mm-fleet-grid { fill: none; stroke: var(--dt-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
    #datalyse-machine-monitor .mm-fleet-line { fill: none; stroke-width: 1.65; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
    #datalyse-machine-monitor .mm-fleet-threshold { stroke: var(--dt-danger); stroke-dasharray: 4 5; opacity: .5; stroke-width: 1; vector-effect: non-scaling-stroke; }
    #datalyse-machine-monitor .mm-fleet-times { grid-column: 2; display: flex; justify-content: space-between; font-size: .62rem; color: var(--dt-muted); font-variant-numeric: tabular-nums; }
    #datalyse-machine-monitor .mm-fleet-empty { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; color: var(--dt-muted); font-size: .78rem; text-align: center; padding: .75rem; pointer-events: none; }
    #datalyse-machine-monitor .mm-fleet-controls { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-top: .65rem; font-size: .66rem; color: var(--dt-muted); }
    #datalyse-machine-monitor .mm-fleet-controls button { border: 0; background: transparent; color: var(--dt-text); padding: .2rem .3rem; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
    #datalyse-machine-monitor .mm-fleet-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .2rem .55rem; max-height: 64px; overflow: auto; scrollbar-width: thin; margin-top: .3rem; padding: .2rem; }
    #datalyse-machine-monitor .mm-fleet-legend button { display: flex; align-items: center; gap: .4rem; min-width: 0; padding: .15rem 0; border: 0; background: transparent; color: var(--dt-text); text-align: left; font: inherit; font-size: .67rem; }
    #datalyse-machine-monitor .mm-fleet-legend button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
    #datalyse-machine-monitor .mm-fleet-swatch { width: 13px; height: 2px; background: var(--mm-host-color); flex-shrink: 0; }
    #datalyse-machine-monitor .mm-fleet-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #datalyse-machine-monitor .mm-fleet-tooltip { position: absolute; z-index: 2; top: .25rem; right: .25rem; max-height: calc(100% - .5rem); width: min(260px, 95%); padding: .6rem; overflow: auto; border: 0; background: var(--dt-surface); border-radius: var(--dt-radius-sm); box-shadow: none; pointer-events: none; }
    #datalyse-machine-monitor .mm-fleet-tooltip strong { display: block; color: var(--dt-muted); font-size: .65rem; margin-bottom: .4rem; }
    #datalyse-machine-monitor .mm-fleet-tooltip div { display: flex; align-items: center; gap: .4rem; font-size: .65rem; }
    #datalyse-machine-monitor .mm-fleet-tooltip b { margin-left: auto; white-space: nowrap; font-weight: 500; font-variant-numeric: tabular-nums; }
    #datalyse-machine-monitor .mm-fleet-cursor { position: absolute; inset-block: 0; width: 0; border-left: 1px dashed var(--dt-muted); pointer-events: none; }
    @media (max-width: 1100px) {
        #datalyse-machine-monitor .mm-command-center { grid-template-columns: 1fr; }
        #datalyse-machine-monitor .mm-control-rail { grid-template-columns: 1fr; }
        #datalyse-machine-monitor .mm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
        #datalyse-machine-monitor .mm-stats .dui-stat-card + .dui-stat-card { border-top: 0; }
    }
    @media (max-width: 620px) {
        #datalyse-machine-monitor .mm-fleet, #datalyse-machine-monitor .mm-control-rail { grid-template-columns: 1fr; }
        #datalyse-machine-monitor .mm-fleet-chart { padding: .5rem; min-width: 0; }
    }
    #datalyse-machine-monitor .mm-search { display: flex; align-items: center; gap: .5rem; border: 0; border-radius: var(--dt-radius-sm); padding: .45rem .7rem; color: var(--dt-muted); background: var(--dt-surface); max-width: 100%; }
    #datalyse-machine-monitor .mm-search:focus-within { border-color: var(--dt-focus); }
    #datalyse-machine-monitor .mm-search input[type="search"], #datalyse-machine-monitor .mm-search input[type="search"]:focus { width: 245px; min-width: 0; border: 0 !important; border-radius: 0; padding: 0; outline: none; box-shadow: none !important; background: transparent !important; color: var(--dt-text); font: inherit; font-size: .8rem; }
    #datalyse-machine-monitor .mm-search input::placeholder { color: var(--dt-muted); }
    #datalyse-machine-monitor .mm-table-shell { padding: 0; overflow: hidden; }
    #datalyse-machine-monitor .mm-table { width: 100%; min-width: 870px; border-collapse: collapse; font-size: .82rem; }
    #datalyse-machine-monitor .mm-table th { text-align: left; color: var(--dt-muted); font-size: .73rem; font-weight: 500; background: var(--dt-surface-2); padding: .75rem 1rem; }
    #datalyse-machine-monitor .mm-table td { padding: .85rem 1rem; border-top: 1px solid var(--dt-border); vertical-align: middle; }
    #datalyse-machine-monitor .mm-table th:first-child { width: 27%; }
    #datalyse-machine-monitor .mm-table th:nth-child(2), #datalyse-machine-monitor .mm-table th:nth-child(3) { width: 18%; }
    #datalyse-machine-monitor .mm-host { font-weight: 500; overflow-wrap: anywhere; }
    #datalyse-machine-monitor .mm-sub { display: block; margin-top: .2rem; font-size: .69rem; color: var(--dt-muted); line-height: 1.4; }
    #datalyse-machine-monitor .mm-metric { font-variant-numeric: tabular-nums; }
    #datalyse-machine-monitor .mm-meter { height: 4px; width: 100%; max-width: 140px; border-radius: 4px; background: var(--dt-surface-3); overflow: hidden; margin: .45rem 0 .35rem; }
    #datalyse-machine-monitor .mm-meter span { display: block; height: 100%; border-radius: inherit; background: var(--dt-success); }
    #datalyse-machine-monitor .mm-meter.mm-warning span { background: var(--dt-warning); }
    #datalyse-machine-monitor .mm-meter.mm-error span { background: var(--dt-danger); }
    #datalyse-machine-monitor .mm-spark { display: block; width: 100%; max-width: 210px; height: 34px; margin-top: .35rem; background: var(--mm-tint); border-radius: var(--dt-radius-sm); }
    #datalyse-machine-monitor .mm-spark path { fill: none; stroke: var(--mm-series); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
    #datalyse-machine-monitor .mm-spark .mm-threshold { stroke: var(--dt-danger); stroke-dasharray: 3 3; stroke-width: 1; opacity: .55; }
    #datalyse-machine-monitor .mm-empty { color: var(--dt-muted); padding: 2.5rem 1rem !important; text-align: center; }
    #datalyse-machine-monitor .mm-key-green { color: var(--dt-success); }
    #datalyse-machine-monitor .mm-key-amber { color: var(--dt-warning); }
    #datalyse-machine-monitor .mm-key-red { color: var(--dt-danger); }
    #datalyse-machine-monitor .mm-footnote { margin: .8rem 0 0; color: var(--dt-muted); font-size: .74rem; line-height: 1.5; }
    #datalyse-machine-monitor .mm-message { border-left: 2px solid var(--dt-warning); padding: .55rem .8rem; font-size: .8rem; margin: 0 0 1rem; background: var(--dt-surface-2); }
    @media (max-width: 700px) {
        #datalyse-machine-monitor .mm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
        #datalyse-machine-monitor .mm-stats .dui-stat-card { min-width: 0; padding: .65rem; }
        #datalyse-machine-monitor .mm-stats .mm-stat-label { font-size: .7rem; line-height: 1.2; }
        #datalyse-machine-monitor .mm-stats .mm-stat-value { margin: .4rem 0 .15rem; font-size: 1.15rem; }
        #datalyse-machine-monitor .mm-stats .mm-stat-note { display: block; font-size: .64rem; line-height: 1.25; }
        #datalyse-machine-monitor .mm-stat-trend { height: 16px; margin-top: .3rem; }
        #datalyse-machine-monitor .dui-page-header { gap: 1rem; }
        #datalyse-machine-monitor .mm-search { width: 100%; }
        #datalyse-machine-monitor .mm-search input { width: 100%; }
    }
    @media (forced-colors: active) { #datalyse-machine-monitor .mm-search input[type="search"]:focus-visible { outline: 2px solid Highlight; } }
    #datalyse-machine-monitor .mm-anomaly-banner { position: sticky; top: var(--dt-topbar-h, 54px); z-index: 25; display: flex; align-items: center; flex-wrap: wrap; gap: .65rem 1.2rem; padding: .7rem 1rem; border-bottom: 2px solid var(--dt-warning); background: var(--dt-tint-warn-bg); color: var(--dt-text); }
    #datalyse-machine-monitor .mm-anomaly-banner[data-severity="critical"], #datalyse-machine-monitor .mm-anomaly-banner[data-severity="high"] { background: var(--dt-tint-danger-bg); border-color: var(--dt-danger); }
    #datalyse-machine-monitor .mm-anomaly-score { display: flex; align-items: baseline; gap: .45rem; white-space: nowrap; }
    #datalyse-machine-monitor .mm-anomaly-score strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
    #datalyse-machine-monitor .mm-anomaly-detail { flex: 1; min-width: 200px; }
    #datalyse-machine-monitor .mm-anomaly-detail p { margin: .2rem 0 0; font-size: .78rem; }
    #datalyse-machine-monitor .mm-anomaly-banner a { color: inherit; font-size: .8rem; }
    #datalyse-machine-monitor .mm-risk-steps { display: flex; gap: 3px; margin-top: .3rem; }
    #datalyse-machine-monitor .mm-risk-steps span { width: 13px; height: 4px; background: var(--dt-border-strong); }
    #datalyse-machine-monitor .mm-risk-steps .is-active { background: var(--dt-warning); }
    #datalyse-machine-monitor [data-severity="critical"] .mm-risk-steps .is-active, #datalyse-machine-monitor [data-severity="high"] .mm-risk-steps .is-active { background: var(--dt-danger); }
    #datalyse-machine-monitor #mm-alert-report { scroll-margin-top: calc(var(--dt-topbar-h, 54px) + 100px); }
    #datalyse-machine-monitor #mm-incidents { list-style: none; padding: 0; max-height: none; }
    #datalyse-machine-monitor .mm-report-item { padding: .8rem 0; border-top: 1px solid var(--dt-border); }
    #datalyse-machine-monitor .mm-report-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem; }
    #datalyse-machine-monitor .mm-risk-label { color: var(--dt-tint-warn-tx); white-space: nowrap; }
    #datalyse-machine-monitor .mm-report-details { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: .2rem .7rem; margin: .6rem 0 0; font-size: .75rem; }
    #datalyse-machine-monitor .mm-report-details dt { color: var(--dt-muted); font-weight: 400; }
    #datalyse-machine-monitor .mm-report-details dd { margin: 0; }
    #datalyse-machine-monitor .mm-databases { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .65rem; }
    #datalyse-machine-monitor .mm-db-card { padding: .8rem; min-width: 0; }
    #datalyse-machine-monitor .mm-db-name { display: flex; align-items: center; gap: .4rem; font-size: .8rem; overflow-wrap: anywhere; }
    #datalyse-machine-monitor .mm-db-value { display: block; margin-top: .4rem; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
    #datalyse-machine-monitor .mm-section-title { font-size: 1rem; margin: .4rem 0 .6rem; }
    #datalyse-machine-monitor .mm-table { min-width: 1100px; }
    #datalyse-machine-monitor .mm-table th:first-child { width: 18%; }
    #datalyse-machine-monitor .mm-table th:nth-child(2), #datalyse-machine-monitor .mm-table th:nth-child(3) { width: 12%; }
    #datalyse-machine-monitor .mm-db-fleet { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; margin-bottom: .75rem; }

    #datalyse-machine-monitor .mm-fleet-tooltip .mm-fleet-hover-name { color: var(--dt-text); font-size: .8rem; }
    #datalyse-machine-monitor .mm-mail-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; }
    @media (max-width: 700px) { #datalyse-machine-monitor .mm-db-fleet { grid-template-columns: 1fr; } }
    #datalyse-machine-monitor .mm-chart-expanded { grid-column: 1 / -1; }
    #datalyse-machine-monitor .mm-chart-sizing { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; color: var(--dt-muted); font-size: .65rem; margin: .3rem 0; }
    #datalyse-machine-monitor .mm-chart-sizing button { border: 1px solid var(--dt-border); border-radius: var(--dt-radius-sm); padding: .15rem .4rem; font: inherit; background: var(--dt-surface); color: var(--dt-text); }
    #datalyse-machine-monitor .mm-fleet-chart > :not(.mm-fleet-frame) { flex-shrink: 0; }
    #datalyse-machine-monitor .mm-fleet-chart::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 10px; height: 10px; border-right: 2px solid var(--dt-muted); border-bottom: 2px solid var(--dt-muted); pointer-events: none; }
    #redis-admin { color: var(--dt-text); }
    #redis-admin .rq-toolbar, #redis-admin .rq-filterbar, #redis-admin .rq-actions, #redis-admin .rq-pagination { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
    #redis-admin .rq-toolbar { justify-content: space-between; margin-bottom: 1rem; }
    #redis-admin .rq-toolbar h4 { margin: 0 0 .25rem; }
    #redis-admin .rq-toolbar p { margin: 0; color: var(--dt-muted); }
    #redis-admin .rq-env { width: 235px; }
    #redis-admin .rq-environment-control { display: flex; flex-direction: column; gap: .25rem; }
    #redis-admin .rq-prefix { color: var(--dt-muted); font-size: .78rem; overflow-wrap: anywhere; }
    #redis-admin .rq-panel { border: 0; border-radius: var(--dt-radius, 8px); background: var(--dt-surface); margin-bottom: 1rem; overflow: hidden; }
    #redis-admin .rq-panel-heading { padding: .85rem 1rem; border-bottom: 1px solid var(--dt-border); display: flex; justify-content: space-between; gap: .75rem; align-items: center; flex-wrap: wrap; }
    #redis-admin .rq-panel-heading h5 { margin: 0; }
    #redis-admin .rq-panel-heading p { margin: .2rem 0 0; color: var(--dt-muted); font-size: .8rem; }
    #redis-admin .rq-table { font-size: .82rem; margin: 0; }
    #redis-admin .rq-table th { position: relative; white-space: nowrap; font-weight: 600; color: var(--dt-muted); }
    #redis-admin .rq-jobs-table { min-width: 980px; }
    #redis-admin .rq-table td, #redis-admin .rq-table th { vertical-align: middle; padding: .6rem .8rem; border-color: var(--dt-border); }
    #redis-admin .rq-table tr[aria-selected="true"] { background: var(--dt-hover); }
    #redis-admin .rq-table td.rq-number { text-align: right; font-variant-numeric: tabular-nums; }
    #redis-admin .rq-table .rq-count { border: 0; padding: .15rem .3rem; border-radius: 4px; background: transparent; color: inherit; min-width: 1.75rem; text-align: right; font: inherit; font-variant-numeric: tabular-nums; }
    #redis-admin .rq-count:hover, #redis-admin .rq-count[aria-pressed="true"] { background: var(--dt-hover); text-decoration: underline; }
    #redis-admin .rq-count.rq-has-failures { color: var(--dt-tint-danger-tx, #b42318); font-weight: 600; }
    #redis-admin button:focus-visible, #redis-admin select:focus-visible { outline: 2px solid var(--dt-primary, #2563eb); outline-offset: 2px; }
    #redis-admin .rq-queue-name { white-space: nowrap; }
    #redis-admin .rq-sub { display: block; font-size: .72rem; color: var(--dt-muted); margin-top: .15rem; }
    #redis-admin .rq-status { font-size: .8rem; color: var(--dt-muted); }
    #redis-admin .rq-error { color: var(--dt-tint-danger-tx, #b42318); }
    #redis-admin .rq-paused { color: var(--dt-tint-warn-tx, #9a6700); }
    #redis-admin .rq-filterbar { padding: .85rem 1rem; }
    #redis-admin .rq-filterbar label { font-size: .8rem; color: var(--dt-muted); }
    #redis-admin .rq-filterbar select { min-width: 155px; width: auto; }
    #redis-admin .rq-filterbar .rq-actions { margin-left: auto; }
    #redis-admin .rq-pagination { justify-content: space-between; padding: .7rem 1rem; border-top: 1px solid var(--dt-border); color: var(--dt-muted); font-size: .82rem; }
    #redis-admin .rq-empty { padding: 2rem 1rem; text-align: center; color: var(--dt-muted); }
    #redis-admin .rq-id { display: block; max-width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #redis-admin .rq-job-error { max-width: 340px; overflow-wrap: anywhere; }
    #redis-admin .rq-job-actions { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
    #redis-admin .rq-bulk-results { max-height: 240px; overflow: auto; padding: .75rem 1rem .75rem 2rem; margin: 0; font-size: .82rem; }
    #redis-admin .rq-bulk-results li + li { margin-top: .5rem; }
    #redis-admin .rq-detail-body { padding: 1rem; }
    #redis-admin .rq-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: 0 0 1rem; }
    #redis-admin .rq-detail-grid dt { color: var(--dt-muted); font-size: .76rem; font-weight: 400; margin-bottom: .25rem; }
    #redis-admin .rq-detail-grid dd { margin: 0; font-size: .85rem; overflow-wrap: anywhere; }
    #redis-admin .rq-detail-grid .rq-wide { grid-column: 1 / -1; }
    #redis-admin .rq-error-box { background: var(--dt-surface-2); border-left: 3px solid var(--dt-border); padding: .75rem 1rem; margin-bottom: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .83rem; }
    #redis-admin .rq-note { color: var(--dt-muted); font-size: .8rem; margin: .75rem 0 0; }
    #redis-admin .rq-context { border-top: 1px solid var(--dt-border); border-bottom: 1px solid var(--dt-border); margin: 1rem 0; padding: 1rem 0; }
    #redis-admin .rq-context h6 { font-size: .88rem; margin: 1rem 0 .75rem; }
    #redis-admin .rq-context .rq-detail-grid { margin-bottom: .75rem; }
    #redis-admin .rq-context-status { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; }
    #redis-admin [hidden] { display: none !important; }
    @media (max-width: 700px) {
        #redis-admin .rq-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        #redis-admin .rq-filterbar .rq-actions { margin-left: 0; width: 100%; }
        #redis-admin .rq-toolbar > .rq-actions { width: 100%; }
        #redis-admin .rq-id { max-width: 180px; }
    }

}
/* end dui-template-style modules/admindt4controlbds:0 */
/* dui-template-style {"key":"modules/admindt4totalv2:0","bytes":12001,"sha256":"3c6b0cb17845b31e19b1a6908678dd41c447160fe1839075c3bf6626f07bf9a8","media":null,"source_sha256":"1728d18aa5b99d86561d5242fd44a2c81f07e207f67d99479cdea66a5ce28cfb"} */
@scope (:root:has(template[data-dui-legacy-style="modules/admindt4totalv2:0"])) {

.v2_topbar{
    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
    margin-bottom:14px; padding:12px 16px; font-size:13px;
    background: var(--el-bg-raised, #fff);
    border:0;
    border-radius: var(--el-radius, 10px);
    color: var(--el-text, #111);
    box-shadow: none;
}
.v2_topbar label{ margin:0 4px 0 0; font-weight:600; color: var(--el-text-muted, #555); }
.v2_topbar select, .v2_topbar input{
    padding:6px 10px;
    background: var(--el-bg-app, #fff);
    color: var(--el-text, #111);
    border:0;
    border-radius: var(--el-radius-sm, 6px);
    font:inherit;
}
.v2_topbar .v2_period_label{ margin-left:auto; color: var(--el-text-muted, #555); font-size:12px; }
.v2_topbar .v2_status{ font-style:italic; color: var(--el-text-muted, #777); }

.v2_topbar .btn-default,
.v2_topbar #V2_BTN_PREV_MONTH,
.v2_topbar #V2_BTN_NEXT_MONTH{
    background: var(--el-bg-app, #fff);
    color: var(--el-text, #111);
    border:0;
    border-radius: var(--el-radius-sm, 6px);
    padding:6px 12px;
    font:inherit;
    cursor:pointer;
    line-height:1;
}
.v2_topbar .btn-default:hover,
.v2_topbar #V2_BTN_PREV_MONTH:hover,
.v2_topbar #V2_BTN_NEXT_MONTH:hover{
    background: var(--el-hover, rgba(0,0,0,.05));
}
.v2_topbar #V2_BTN_RELOAD{
    background: var(--el-accent, #111);
    color: var(--el-accent-fg, #fff);
    border-color: var(--el-accent, #111);
    font-weight:600;
}
.v2_topbar #V2_BTN_RELOAD:hover{
    background: var(--el-accent-hover, #000);
}
.v2_topbar #V2_BTN_PREV_MONTH,
.v2_topbar #V2_BTN_NEXT_MONTH{
    padding:6px 10px;
    font-size:14px;
    min-width:32px;
    text-align:center;
}
#V2_MONTH_PICKER_WRAP{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-left:8px;
    padding-left:12px;
    border-left:1px solid var(--el-border, #e5e7eb);
}
#V2_MONTH_PICKER{ min-width:150px; }

.v2_grid_wrap{ height:520px; width:100%; margin-bottom:15px; }
.v2_grid_wrap.ag-theme-quartz{ border:none; }

.v2_card{
    border:0;
    margin-bottom:18px;
    background: var(--el-bg-raised, #fff);
    border-radius: var(--el-radius, 10px);
    overflow:hidden;
    color: var(--el-text, #111);
    box-shadow: none;
}
.v2_card_header{
    padding:12px 16px;
    background: var(--el-bg-raised-2, #f4f4f5);
    border-bottom:1px solid var(--el-border-strong, #e5e7eb);
    font-size:14px; font-weight:700;
    display:flex; justify-content:space-between; align-items:center;
    color: var(--el-text, #111);
    line-height:1.3;
}
.v2_card_header > span:last-child{
    font-weight:400 !important; font-size:11px !important;
    color: var(--el-text-muted, #666) !important;
}
.v2_card_body_inner{ padding:16px; }

.v2_table{
    width:100%;
    border-collapse:collapse;
    font-size:12.5px;
    background: transparent;
    color: var(--el-text, #111);
}
.v2_table th, .v2_table td{
    border:0;
    padding:8px 10px;
    text-align:left;
    vertical-align:top;
}
.v2_table thead th{
    background: var(--el-bg-raised-2, #f4f4f5);
    font-weight:600;
    position:sticky; top:0; z-index:1;
    color: var(--el-text, #111);
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:.3px;
}
.v2_table tbody tr:hover{
    background: var(--el-hover, rgba(0,0,0,.04));
}
.v2_amount{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }

.v2_badge_yes{
    background: var(--el-success, #16a34a);
    color: #fff !important;
    padding:2px 10px; border-radius:999px; font-size:11px; font-weight:700;
    letter-spacing:.2px;
}
.v2_badge_no{
    background: transparent;
    color: var(--el-text-muted, #6b7280) !important;
    padding:2px 10px; border-radius:999px; font-size:11px; font-weight:600;
    border:1px solid var(--el-border-strong, #d1d5db);
}

.v2_section_panel{ max-height:520px; overflow:auto; padding:14px 16px; }

.v2_month_block{
    margin-bottom:18px;
    border:0;
    border-radius: var(--el-radius-sm, 6px);
    overflow:hidden;
    background: var(--el-bg-app, #fff);
}
.v2_month_block:last-child{ margin-bottom:0; }
.v2_month_title{
    background: var(--el-bg-raised-2, #f4f4f5);
    padding:8px 14px;
    font-weight:700;
    font-size:13px;
    color: var(--el-text, #111);
    display:flex; flex-wrap:wrap; gap:8px;
    border-bottom:1px solid var(--el-border-strong, #d1d5db);
}
.v2_month_title .v2_month_chip{
    background: var(--el-bg-raised, #fff);
    border:1px solid var(--el-border, #e5e7eb);
    color: var(--el-text-muted, #555);
    padding:2px 8px; border-radius:999px; font-weight:600;
    font-size:11px;
}
.v2_month_block .v2_table{ border:none; }
.v2_month_block .v2_table th,
.v2_month_block .v2_table td{
    border-left:none; border-right:none;
}
.v2_month_block .v2_table thead th{
    border-top:none;
    background: transparent;
    border-bottom:1px solid var(--el-border, #e5e7eb);
}
.v2_month_block .v2_table tbody tr:last-child td{ border-bottom:none; }

#V2_FILTER_INFO{ font-weight:400 !important; font-size:12px !important; color: var(--el-text-muted, #777) !important; }

.v2_empty{
    text-align:center; color: var(--el-text-muted, #999);
    padding:24px; font-size:13px;
}

.v2_company_list{
    max-width:520px;
    line-height:1.7;
}
.v2_company_chip{
    display:inline-flex; align-items:center; gap:4px;
    background: var(--el-bg-raised-2, #f4f4f5);
    border:1px solid var(--el-border, #e5e7eb);
    color: var(--el-text, #111);
    padding:1px 8px; margin:1px 2px; border-radius:999px;
    font-size:11px; white-space:nowrap;
}
.v2_company_chip_count{
    background: var(--el-bg-raised, #fff);
    border:1px solid var(--el-border, #e5e7eb);
    color: var(--el-text-muted, #6b7280);
    padding:0 6px; border-radius:999px;
    font-size:10px; font-weight:600;
}

.v2_kpi_row{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap:12px;
    padding:14px 16px;
}
.v2_kpi{
    background: var(--el-bg-app, #fff);
    border:0;
    border-radius: var(--el-radius-sm, 6px);
    padding:14px 16px;
}
.v2_kpi_label{
    font-size:11px;
    color: var(--el-text-muted, #6b7280);
    text-transform:uppercase;
    letter-spacing:.5px;
    font-weight:600;
    margin-bottom:6px;
}
.v2_kpi_value{
    font-size:22px;
    font-weight:700;
    color: var(--el-text, #111);
    font-variant-numeric:tabular-nums;
    line-height:1.2;
}
.v2_kpi_sub{
    font-size:11px;
    color: var(--el-text-muted, #6b7280);
    margin-top:4px;
}
.v2_kpi_value.v2_pos{ color: var(--el-success, #16a34a); }
.v2_kpi_value.v2_neg{ color: var(--el-danger, #dc2626); }

.v2_benefit_controls{
    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
    padding:10px 16px;
    border-top:1px solid var(--el-border, #e5e7eb);
    border-bottom:1px solid var(--el-border, #e5e7eb);
    background: var(--el-bg-raised-2, #f4f4f5);
    font-size:12px;
}
.v2_benefit_controls label{ font-weight:600; color: var(--el-text-muted, #555); }
.v2_benefit_controls select{
    padding:5px 9px;
    background: var(--el-bg-app, #fff);
    color: var(--el-text, #111);
    border:0;
    border-radius: var(--el-radius-sm, 6px);
}
.v2_benefit_controls .v2_status_inline{ font-style:italic; color: var(--el-text-muted, #777); }
.v2_benefit_panel{ padding:14px 16px; max-height:600px; overflow:auto; }

.v2_amount.v2_pos{ color: var(--el-success, #16a34a); }
.v2_amount.v2_neg{ color: var(--el-danger, #dc2626); }

.v2_accordion_row{ cursor:pointer; }
.v2_accordion_row:hover{ background: var(--el-hover, rgba(0,0,0,.04)) !important; }
.v2_accordion_caret{
    display:inline-block; width:14px; text-align:center;
    color: var(--el-text-muted, #6b7280); margin-right:6px;
    transition: transform .15s;
    font-size:10px;
}
.v2_accordion_row.expanded .v2_accordion_caret{ transform: rotate(90deg); color: var(--el-text, #111); }
.v2_accordion_child_row td{
    background: var(--el-bg-raised-2, rgba(0,0,0,.03));
    font-size:11.5px;
}
.v2_accordion_child_row td:first-child{ padding-left:34px; }
.v2_accordion_child_row.v2_hidden{ display:none; }
.v2_master_chip{
    display:inline-block;
    background: var(--el-bg-raised-2, #f4f4f5);
    border:1px solid var(--el-border, #e5e7eb);
    color: var(--el-text-muted, #555);
    padding:1px 8px; border-radius:999px;
    font-size:10px;
    margin-left:6px;
    font-variant-numeric:tabular-nums;
}

.v2_loaded_chip{
    display:inline-block;
    background: var(--el-success, #16a34a);
    color: #fff;
    padding:2px 10px; border-radius:999px;
    font-size:11px; font-weight:700;
    letter-spacing:.3px;
    margin-right:8px;
}
.v2_stale_chip{
    display:inline-block;
    background: var(--el-warning, #fbbf24);
    color: #111;
    padding:3px 10px; border-radius:999px;
    font-size:11px; font-weight:700;
    margin-left:6px;
}
.v2_loading_overlay{
    text-align:center;
    padding:60px 20px;
    color: var(--el-text, #111);
    font-size:14px;
}
.v2_loading_spinner{
    display:inline-block;
    width:32px; height:32px;
    border:3px solid var(--el-border, #e5e7eb);
    border-top-color: var(--el-success, #16a34a);
    border-radius:50%;
    animation: dui-legacy-modules-admindt4totalv2-v2_spin 0.8s linear infinite;
    margin-bottom:14px;
}
@keyframes dui-legacy-modules-admindt4totalv2-v2_spin {
    to { transform: rotate(360deg); }
}
.v2_panel_stale{
    opacity:0.45;
    pointer-events:none;
    filter: grayscale(0.4);
}

.v2_card_header{ cursor:pointer; user-select:none; }
.v2_card_caret{
    display:inline-block;
    width:14px; text-align:center;
    margin-right:8px;
    color: var(--el-text-muted, #6b7280);
    transition: transform .15s;
    font-size:11px;
}
.v2_card.v2_collapsed .v2_card_caret{ transform: rotate(-90deg); }
.v2_card.v2_collapsed > *:not(.v2_card_header){ display:none !important; }
/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Comisiones (admin): un solo CTA en tinta («Show client breakdown», de btn-lg con sombra en línea a 34 px plano); Reload pasa a
   ghost; los chips de estado (Yes, cargado, cargando, error, mes desactualizado) pasan de relleno pleno a tinte suave (Yes con punto,
   los demás ya llevan su glifo); el spinner, en tinta. Las sombras de .v2_topbar, .v2_card y del panel de servicios ya valen none por
   --el-shadow-xs y --el-shadow (datalyse-modern.css). */
#akicontenidonormal .v2_topbar #V2_BTN_RELOAD { background: transparent; color: var(--dt-text); border-color: var(--dt-border-strong); font-weight: 600; }
#akicontenidonormal .v2_topbar #V2_BTN_RELOAD:hover { background: var(--dt-hover); }
#akicontenidonormal #V2_BENEFIT_BTN_LOAD[style*='box-shadow'] { box-shadow: none !important; display: inline-flex; align-items: center; height: 34px; padding: 0 14px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; border-radius: var(--dt-radius); }
#akicontenidonormal .v2_badge_yes { background: var(--dt-tint-ok-bg); color: var(--dt-tint-ok-tx) !important; font-weight: 600; letter-spacing: 0; }
#akicontenidonormal .v2_badge_yes::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: middle; }
#akicontenidonormal .v2_loaded_chip { background: var(--dt-tint-ok-bg); color: var(--dt-tint-ok-tx); font-weight: 600; letter-spacing: 0; }
#akicontenidonormal #V2_BENEFIT_LOADED_BADGE[style*='--el-warning'] { background: var(--dt-tint-warn-bg) !important; color: var(--dt-tint-warn-tx) !important; }
#akicontenidonormal #V2_BENEFIT_LOADED_BADGE[style*='--el-danger'] { background: var(--dt-tint-danger-bg) !important; color: var(--dt-tint-danger-tx) !important; }
#akicontenidonormal .v2_stale_chip { background: var(--dt-tint-warn-bg); color: var(--dt-tint-warn-tx); font-weight: 600; }
#akicontenidonormal .v2_loading_spinner { border-color: var(--dt-border-strong); border-top-color: var(--dt-text); }
#akicontenidonormal .v2_kpi_value { font-weight: 600; letter-spacing: -.01em; }

}
/* end dui-template-style modules/admindt4totalv2:0 */
/* dui-template-style {"key":"modules/aiagents:0","bytes":64719,"sha256":"dddbe783d727455d1fceb7454d9f4888a61e83a89ba2027b5feb84a0f25f7101","media":null,"source_sha256":"7530cf88b0d55fa3058110eb11c00a6aeb317c0ce5e91e304d4e0b06ee8a6ced"} */
@scope (:root:has(template[data-dui-legacy-style="modules/aiagents:0"])) {

/* Multichannel welcome */
.aag-welcome { display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; padding:40px; margin-bottom:28px; border:0; border-radius:24px; background:var(--dt-surface); color:var(--dt-text); }
#aagControlsRow, #aagBrowseTemplatesStage, #aagAgentsView { display:none !important; }
.aag-welcome__eyebrow { font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.aag-welcome h1 { font-size:clamp(28px,3.2vw,44px); line-height:1.12; letter-spacing:-.035em; margin:16px 0; color:var(--dt-text); }
.aag-welcome p { font-size:15px; line-height:1.7; max-width:600px; }
.aag-welcome__cta { margin-top:12px; padding:12px 20px; border:0; border-radius:12px; background:var(--dt-cta); color:var(--dt-cta-fg); font:inherit; cursor:pointer; }
/* Self-contained illustration: no media, timers, or network activity. */
.aag-welcome__visual { position:relative; min-width:0; padding:20px; border:0; border-radius:22px; background:var(--dt-surface-2); color:var(--dt-text); }
.aag-motion__header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.aag-motion__caption { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.13em; color:var(--dt-muted); }
.aag-motion__pause { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.aag-motion__control { display:flex; align-items:center; gap:5px; padding:6px 8px; margin:0; border:0; border-radius:8px; font-size:11px; cursor:pointer; background:var(--dt-surface); color:var(--dt-text); }
.aag-motion__control svg { width:12px; height:12px; fill:currentColor; }
.aag-motion__control:hover { background:var(--dt-hover); }
.aag-motion__pause:focus-visible ~ .aag-motion__header .aag-motion__control { outline:2px solid var(--dt-focus); outline-offset:3px; }
.aag-motion__resume { display:none; }
.aag-motion__pause:checked ~ .aag-motion__header .aag-motion__play { display:none; }
.aag-motion__pause:checked ~ .aag-motion__header .aag-motion__resume { display:inline; }
.aag-motion__scene { position:relative; isolation:isolate; aspect-ratio:560/440; margin:12px 0; background-image:radial-gradient(var(--dt-border-strong) .8px, transparent .8px); background-size:18px 18px; }
.aag-motion__links { position:absolute; inset:0; width:100%; height:100%; overflow:visible; fill:none; stroke:var(--dt-border-strong); stroke-width:1.5; }
.aag-motion__signal { stroke:var(--dt-blue); stroke-width:3; stroke-linecap:round; stroke-dasharray:7 93; stroke-dashoffset:7; opacity:0; animation:dui-legacy-modules-aiagents-aag-signal 12s linear infinite; animation-delay:var(--aag-delay); }
.aag-motion__orbit { position:absolute; inset:22% 28%; border:1px solid color-mix(in srgb, var(--dt-blue) 22%, var(--dt-border)); border-radius:50%; }
.aag-motion__orbit--outer { inset:15% 22%; border-style:dashed; animation:dui-legacy-modules-aiagents-aag-orbit 60s linear infinite; }
.aag-motion__orbit--inner { inset:29% 34%; animation:dui-legacy-modules-aiagents-aag-breathe 4s ease-in-out infinite; }
.aag-motion__core { position:absolute; top:50%; left:50%; width:28%; aspect-ratio:1; transform:translate(-50%,-50%); }
.aag-motion__core .dt-agent-orb { display:block; width:100%; height:100%; }
.aag-motion__name { position:absolute; top:67%; left:38%; width:24%; text-align:center; font-size:12px; font-weight:600; color:var(--dt-text); }
.aag-motion__node { position:absolute; display:flex; align-items:center; gap:9px; width:38%; padding:12px 10px; box-sizing:border-box; border:0; border-radius:13px; background:var(--dt-surface); box-shadow:var(--dt-pop-shadow); animation:dui-legacy-modules-aiagents-aag-channel 12s ease-in-out infinite; animation-delay:var(--aag-delay); }
.aag-motion__node--phone { top:9%; left:0; --aag-delay:0s; }
.aag-motion__node--whatsapp { top:9%; right:0; --aag-delay:3s; }
.aag-motion__node--web { bottom:6%; left:0; --aag-delay:6s; }
.aag-motion__node--campaign { bottom:6%; right:0; --aag-delay:9s; }
.aag-motion__icon { display:grid; place-items:center; flex-shrink:0; width:30px; height:30px; border-radius:9px; background:color-mix(in srgb, var(--dt-cyan) 15%, var(--dt-surface)); color:var(--dt-blue); }
.aag-motion__icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.aag-motion__node strong { display:block; font-size:12px; font-weight:600; line-height:1.4; }
.aag-motion__node small { display:block; font-size:10px; line-height:1.5; color:var(--dt-muted); }
.aag-motion__footer { display:flex; align-items:center; justify-content:center; gap:7px; padding-top:14px; border-top:1px solid var(--dt-border); color:var(--dt-muted); font-size:11px; text-align:center; }
.aag-motion__footer svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; flex-shrink:0; }
.aag-motion__pause:checked ~ .aag-motion__scene *,
.aag-motion__pause:checked ~ .aag-motion__scene *::before { animation-play-state:paused; }
@keyframes dui-legacy-modules-aiagents-aag-signal { 0% { stroke-dashoffset:7; opacity:0; } 3% { opacity:.65; } 22% { stroke-dashoffset:-100; opacity:.65; } 25%,100% { stroke-dashoffset:-100; opacity:0; } }
@keyframes dui-legacy-modules-aiagents-aag-channel { 0%,25%,100% { transform:translateY(0); border-color:var(--dt-border-strong); } 8%,18% { transform:translateY(-4px); border-color:var(--dt-focus); } }
@keyframes dui-legacy-modules-aiagents-aag-orbit { to { transform:rotate(360deg); } }
@keyframes dui-legacy-modules-aiagents-aag-breathe { 50% { transform:scale(1.07); opacity:.5; } }
@media (max-width:1100px) { .aag-welcome { gap:24px; padding:28px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .aag-welcome__visual { padding:14px; } .aag-motion__node { gap:6px; padding:10px 7px; } }
@media (max-width:850px) { .aag-welcome { grid-template-columns:minmax(0,1fr); padding:24px; gap:24px; } .aag-welcome__visual { width:100%; max-width:520px; box-sizing:border-box; justify-self:center; } }
@media (max-width:420px) { .aag-welcome { padding:16px; } .aag-welcome__visual { padding:10px; } .aag-motion__icon { width:23px; height:26px; } .aag-motion__node strong { font-size:10px; } .aag-motion__node small { font-size:9px; } .aag-motion__name { font-size:10px; } .aag-motion__caption { font-size:9px; letter-spacing:.07em; } }
@media (max-width:360px) { .aag-motion__node { gap:4px; padding:10px 6px; } .aag-motion__icon { width:18px; height:22px; } .aag-motion__icon svg { width:16px; height:16px; } .aag-motion__node small { display:none; } }
@media (prefers-reduced-motion:reduce) { .aag-motion__scene *, .aag-motion__scene *::before { animation:none !important; } .aag-motion__control { display:none; } .aag-motion__pause { display:none; } }
@media (forced-colors:active) { .aag-motion__pause:focus-visible ~ .aag-motion__header .aag-motion__control { outline-color:Highlight; } }

/* ====== AI Agents Dashboard — Modern Design (tablatest style) ====== */
.aag {
  padding: 24px 28px;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* --- Main flex layout: content + panel --- */
.aag-layout { display: flex; gap: 0; min-height: var(--app-page-height); overflow: hidden; width: 100%; }
.aag-main { flex: 1; min-width: 0; overflow: hidden; transition: flex 0.3s ease; }
.aag-layout.has-panel .aag-main { margin-right: 16px; }

/* --- Page Header --- */
.aag-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.aag-header__left { display: flex; flex-direction: column; gap: 4px; }
.aag-header__title {
  font-size: 22px; font-weight: 700; color: var(--text-color);
  display: flex; align-items: center; gap: 10px;
}
.aag-header__title-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #5d87ff, #3b6cf5);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--dt-on-color); flex-shrink: 0;
}
.aag-header__subtitle { font-size: 13px; color: var(--text-secondary-color); }
.aag-header__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #5d87ff, #3b6cf5);
  color: var(--dt-cta-fg); font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: all 0.15s; font-family: inherit;
  box-shadow: none;
}
.aag-header__btn:hover { opacity: 0.9; box-shadow: none; transform: translateY(-1px); }
.aag-header__btn i { font-size: 16px; }

/* --- Stat Cards Row --- */
.aag-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; width: 100%; }
.aag-stat {
  background: var(--bg-color);
  border: 0;
  border-radius: 12px; padding: 18px 20px;
  display: flex; align-items: flex-start; justify-content: space-between;
  transition: box-shadow 0.2s;
}
.aag-stat:hover { box-shadow: none; }
.aag-stat__text { display: flex; flex-direction: column; gap: 2px; }
.aag-stat__label { font-size: 12.5px; font-weight: 500; color: var(--text-secondary-color); }
.aag-stat__value { font-size: 28px; font-weight: 700; color: var(--text-color); line-height: 1.2; margin: 2px 0; }
.aag-stat__sub { font-size: 12px; color: var(--text-muted-color); }
.aag-stat__sub--green { color: var(--bs-success, #13deb9); }
.aag-stat__icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.aag-stat__icon--blue   { background: rgba(93,135,255,0.1); color: var(--bs-primary, #5d87ff); }
.aag-stat__icon--green  { background: rgba(19,222,185,0.1); color: var(--bs-success, #13deb9); }
.aag-stat__icon--purple { background: rgba(102,16,242,0.1); color: var(--bs-indigo, #6610f2); }
.aag-stat__icon--orange { background: rgba(255,174,31,0.1); color: var(--bs-warning, #ffae1f); }

/* --- Controls Row --- */
.aag-controls {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; gap: 16px; flex-wrap: wrap;
}
.aag-tabs { display: flex; align-items: center; gap: 0; border-bottom: 2px solid var(--border-color); }
.aag-tab {
  padding: 10px 16px; font-size: 13.5px; font-weight: 500; color: var(--text-secondary-color);
  background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; transition: all 0.15s; margin-bottom: -2px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: inherit;
}
.aag-tab:hover { color: var(--text-color); }
.aag-tab.is-active { color: var(--bs-primary, #5d87ff); border-bottom-color: var(--bs-primary, #5d87ff); font-weight: 600; }
.aag-tab__count {
  font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px;
  background: var(--bg-secondary-color); color: var(--text-secondary-color);
}
.aag-tab.is-active .aag-tab__count { background: rgba(93,135,255,0.12); color: var(--bs-primary, #5d87ff); }

.aag-search { position: relative; flex-shrink: 0; min-width: 0; }
.aag-search__icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted-color); font-size: 15px; pointer-events: none;
}
input[type="text"].aag-search__input {
  padding: 8px 12px 8px 34px; font-size: 13px; border: 0;
  border-radius: 8px; background: var(--bg-color); color: var(--text-color);
  outline: none; width: 220px; max-width: 100%; box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s; font-family: inherit;
}
.aag-search__input::placeholder { color: var(--text-muted-color); }
.aag-search__input:focus { border-color: var(--bs-primary, #5d87ff); box-shadow: 0 0 0 3px rgba(93,135,255,0.1); }

/* --- Agent Cards Grid --- */
.aag-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  transition: grid-template-columns 0.3s ease;
  width: 100%;
}
.aag-layout.has-panel .aag-grid { grid-template-columns: repeat(2, 1fr); }

/* --- Agent Card --- */
.aag-card {
  background: var(--bg-color); border: 0;
  border-radius: 12px; padding: 20px; display: flex; flex-direction: column;
  gap: 12px; transition: box-shadow 0.2s, border-color 0.2s;
  border-top: 3px solid var(--bs-primary, #5d87ff); cursor: pointer;
  position: relative; overflow: hidden; min-width: 0;
}
.aag-card:hover { box-shadow: none; border-color: var(--border-color); }
.aag-card.is-selected {
  border-color: var(--bs-primary, #5d87ff);
  box-shadow: 0 0 0 2px rgba(93,135,255,0.2), 0 4px 16px rgba(0,0,0,0.06);
}

/* Card header */
.aag-card__header { display: flex; align-items: center; gap: 12px; }
.aag-card__icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--dt-on-color); flex-shrink: 0;
  background: linear-gradient(135deg, #5d87ff, #3b6cf5);
}
.aag-card__title-area { flex: 1; min-width: 0; }
.aag-card__name {
  font-size: 15px; font-weight: 700; color: var(--text-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aag-card__badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* Card actions (3-dot menu) */
.aag-card__actions {
  position: absolute; top: 14px; right: 14px; z-index: 5;
}
.aag-card__actions-btn {
  width: 30px; height: 30px; border: 0;
  background: var(--bg-color); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 15px; color: var(--text-secondary-color);
  transition: all 0.12s; opacity: 0;
}
.aag-card:hover .aag-card__actions-btn { opacity: 1; }
.aag-card__actions-btn:hover { background: var(--hover-color); color: var(--text-color); border-color: var(--border-strong-color); }
.aag-card__actions .dropdown-menu {
  border-radius: 10px; box-shadow: var(--dt-pop-shadow);
  border: 0; padding: 6px; min-width: 160px;
  background: var(--bg-color);
}
.aag-card__actions .dropdown-item {
  border-radius: 6px; padding: 8px 12px; font-size: 13px;
  display: flex; align-items: center; gap: 8px; color: var(--text-color);
  transition: background 0.1s;
}
.aag-card__actions .dropdown-item:hover { background: var(--hover-color); }
.aag-card__actions .dropdown-item i { font-size: 16px; width: 18px; text-align: center; }
.aag-card__actions .dropdown-item.aag-danger { color: var(--error-color, #ef4444); }
.aag-card__actions .dropdown-item.aag-danger:hover { background: rgba(239,68,68,0.06); }

/* Badges */
.aag-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; font-size: 11px; font-weight: 600; border-radius: 20px;
}
.aag-badge__dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.aag-badge--active { background: rgba(19,222,185,0.1); color: var(--bs-success, #13deb9); }
.aag-badge--active .aag-badge__dot { background: var(--bs-success, #13deb9); }
.aag-badge--type { background: var(--bg-secondary-color); color: var(--text-secondary-color); font-weight: 500; }

/* Description */
.aag-card__desc {
  font-size: 13px; color: var(--text-secondary-color); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 40px;
}

/* Card footer */
.aag-card__footer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 12px; border-top: 1px solid var(--border-color); margin-top: auto;
}
.aag-card__meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted-color); }
.aag-card__meta i { font-size: 14px; }
.aag-card__id {
  font-size: 10px; font-weight: 600; background: var(--bg-secondary-color);
  color: var(--text-muted-color); padding: 2px 8px; border-radius: 4px;
  font-family: monospace; letter-spacing: 0.3px;
}

/* Create card */
.aag-card--create {
  border: 2px dashed var(--border-color); border-top: 2px dashed var(--border-color);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 200px; cursor: pointer; transition: all 0.2s;
  color: var(--text-secondary-color); background: transparent;
}
.aag-card--create:hover {
  border-color: var(--bs-primary, #5d87ff); color: var(--bs-primary, #5d87ff);
  background: rgba(93,135,255,0.02);
}
.aag-card--create__icon {
  width: 48px; height: 48px; border-radius: 50%; background: var(--bg-secondary-color);
  display: flex; align-items: center; justify-content: center; font-size: 22px; transition: background 0.2s;
}
.aag-card--create:hover .aag-card--create__icon { background: rgba(93,135,255,0.1); }
.aag-card--create__title { font-size: 15px; font-weight: 600; }
.aag-card--create__sub { font-size: 12.5px; opacity: 0.65; }

/* ===== Side Panel ===== */
.aag-panel {
  visibility: hidden; width: 0; min-width: 0; overflow: hidden; flex-shrink: 0;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.aag-panel.is-open { visibility: visible; width: 390px; min-width: 390px; }
.aag-panel.is-open .aag-panel__inner {
  position: fixed; top: 71px; right: 0;
  width: 390px; background: var(--bg-color); border-left: 1px solid var(--border-color);
  display: flex; flex-direction: column;
  height: calc(100vh - 71px); max-height: calc(100vh - 71px); min-height: 0;
  overflow-y: auto;
}

/* Close btn */
.aag-panel__close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
  border: none; background: transparent; font-size: 18px; color: var(--text-muted-color);
  cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s; z-index: 2;
}
.aag-panel__close:hover { background: var(--hover-color); color: var(--text-color); }

/* Panel header */
.aag-panel__header {
  text-align: center; padding: 32px 20px 18px;
  border-bottom: 1px solid var(--border-color); position: relative;
}
.aag-panel__avatar {
  width: 56px; height: 56px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff; margin-bottom: 14px;
  background: linear-gradient(135deg, #5d87ff, #3b6cf5);
}
.aag-panel__name { font-size: 18px; font-weight: 700; color: var(--text-color); margin-bottom: 4px; }
.aag-panel__subtitle { font-size: 12.5px; color: var(--text-muted-color); margin-bottom: 16px; line-height: 1.5; }

/* Action buttons */
.aag-panel__actions { display: flex; justify-content: center; gap: 10px; margin-bottom: 2px; }
.aag-panel__action-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 16px; border: 0; border-radius: 10px;
  background: var(--bg-color); cursor: pointer; font-size: 11px; font-weight: 600;
  color: var(--text-secondary-color); transition: all 0.12s;
}
.aag-panel__action-btn i { font-size: 17px; }
.aag-panel__action-btn:hover { background: var(--hover-color); border-color: var(--border-strong-color); }
.aag-panel__action-btn--primary { color: var(--bs-primary, #5d87ff); }
.aag-panel__action-btn--primary:hover { background: rgba(93,135,255,0.06); border-color: rgba(93,135,255,0.25); }
.aag-panel__action-btn--delete { color: var(--error-color, #ef4444); }
.aag-panel__action-btn--delete:hover { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.25); }

/* Detail rows */
.aag-panel__details { padding: 16px 20px; flex: 1; }
.aag-panel__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid var(--border-color); font-size: 13px;
}
.aag-panel__row-label { color: var(--text-secondary-color); font-weight: 500; }
.aag-panel__row-value { color: var(--text-color); font-weight: 600; text-align: right; max-width: 60%; word-break: break-word; }

/* Description */
.aag-panel__desc-title {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text-muted-color); margin-top: 16px; margin-bottom: 8px;
}
.aag-panel__desc-box {
  background: var(--bg-secondary-color); border: 0; border-radius: 10px;
  padding: 14px 16px; font-size: 13px; color: var(--text-color); line-height: 1.65;
}

/* Footer buttons */
.aag-panel__footer { padding: 14px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.aag-panel__btn {
  width: 100%; padding: 11px; border-radius: 10px; font-size: 13.5px;
  font-weight: 600; cursor: pointer; text-align: center;
  transition: all 0.12s; border: 0; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.aag-panel__btn i { font-size: 16px; }
.aag-panel__btn--primary {
  background: linear-gradient(135deg, #5d87ff, #3b6cf5); color: var(--dt-cta-fg);
  border-color: transparent; box-shadow: none;
}
.aag-panel__btn--primary:hover { opacity: 0.9; box-shadow: none; }
.aag-panel__btn--outline { background: var(--bg-color); color: var(--text-color); border-color: var(--border-color); }
.aag-panel__btn--outline:hover { background: var(--hover-color); }

/* --- Empty State --- */
.aag-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 400px; padding: 48px 24px; text-align: center;
}
.aag-empty__icon {
  width: 80px; height: 80px; border-radius: 20px;
  background: rgba(93,135,255,0.08); color: var(--bs-primary, #5d87ff);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; margin-bottom: 24px;
}
.aag-empty__title {
  font-size: 20px; font-weight: 700; color: var(--text-color); margin-bottom: 8px;
}
.aag-empty__text {
  font-size: 14px; color: var(--text-secondary-color); line-height: 1.6;
  max-width: 440px; margin-bottom: 28px;
}
.aag-empty__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; border-radius: 12px; border: none;
  background: linear-gradient(135deg, #5d87ff, #3b6cf5);
  color: var(--dt-cta-fg); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.15s; font-family: inherit;
  box-shadow: none;
}
.aag-empty__btn:hover { opacity: 0.9; box-shadow: none; transform: translateY(-1px); }
.aag-empty__btn i { font-size: 18px; }

/* --- No search results --- */
.aag-noresults {
  display: none; text-align: center; padding: 48px 20px;
  color: var(--text-secondary-color); font-size: 14px;
}
.aag-noresults.is-visible { display: block; }
.aag-noresults i { font-size: 32px; display: block; margin-bottom: 12px; color: var(--text-muted-color); }

/* Hidden utility */
.aag-hidden { display: none !important; }

/* --- Responsive --- */
@media (max-width: 1100px) {
  .aag-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px) {
  .aag-layout.has-panel .aag-main { margin-right: 0; }
  .aag-layout.has-panel .aag-grid { grid-template-columns: repeat(2, 1fr); }

  .aag-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    z-index: 1050; height: 100vh;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    transform: translateX(100%);
    width: 390px; min-width: 390px;
    box-shadow: none;
  }
  .aag-panel.is-open {
    transform: translateX(0);
    box-shadow: none;
  }
  .aag-panel__inner {
    min-height: 100vh; max-height: 100vh; position: relative;
  }

  .aag-panel-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.35); z-index: 1049;
    opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
  }
  .aag-panel-backdrop.is-visible {
    display: block; opacity: 1; pointer-events: auto;
  }
}

@media (max-width: 768px) {
  .aag { padding: 20px 16px; }
  .aag-stats { grid-template-columns: repeat(2, 1fr); }
  .aag-grid { grid-template-columns: 1fr; }
  .aag-layout.has-panel .aag-grid { grid-template-columns: 1fr; }
  .aag-controls { flex-wrap: wrap; }
  .aag-header { flex-direction: column; gap: 12px; }
  .aag-search { width: 100%; }
  .aag-search__input { width: 100%; }

  .aag-panel, .aag-panel.is-open { width: 100%; min-width: 100%; }
  .aag-panel__inner { width: 100%; }
}

@media (max-width: 500px) {
  .aag-stats { grid-template-columns: 1fr; }
  .aag { padding: 14px 12px; }
  .aag-search__input { width: 100%; }
  .aag-header__title { font-size: 18px; }
  .aag-header__btn { padding: 9px 16px; font-size: 13px; width: 100%; justify-content: center; }
  .aag-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .aag-tab { padding: 10px 12px; font-size: 12.5px; }
  .aag-stat { padding: 14px 16px; }
  .aag-stat__value { font-size: 24px; }
  .aag-card { padding: 16px; }
}

/* ═══════════ ElevenLabs Agents v4 (https://elevenlabs.io/app/agents) ═══════════
   Diseño cálido, minimalista y técnico inspirado en ElevenLabs Conversational AI.
   Mantiene el 100% de los IDs, clases y contratos de socket del módulo. */
.aag {
  --aag-surface: var(--dt-surface);
  --aag-surface2: var(--dt-surface-2);
  --aag-overlay: var(--dt-overlay);
  --aag-border: var(--dt-border);
  --aag-border-strong: var(--dt-border-strong);
  --aag-text: var(--dt-text);
  --aag-muted: var(--dt-muted);
  --aag-faint: var(--dt-faint);
  --aag-hover: var(--dt-hover);
  --aag-active: var(--dt-active);
  --aag-focus: #0c0a09;
  --aag-cta: var(--dt-cta);
  --aag-cta-hover: var(--dt-hover);
  --aag-cta-fg: var(--dt-cta-fg);
  --aag-danger: var(--dt-danger);
  --aag-success: var(--dt-success);
  --aag-ok-bg: var(--dt-chip-success);
  --aag-ok-tx: #15803d;
  --aag-radius: 10px;
  --aag-radius-lg: 16px;
  --aag-control-h: 36px;
  color: var(--aag-text);
  font-family: var(--font-sans);
  max-width: 1440px;
  margin: 0 auto;
}
:scope[data-bs-theme="dark"] .aag {
  --aag-surface: var(--dt-surface);
  --aag-surface2: var(--dt-surface-2);
  --aag-overlay: var(--dt-overlay);
  --aag-border: var(--dt-border);
  --aag-border-strong: var(--dt-border-strong);
  --aag-text: var(--dt-text);
  --aag-muted: var(--dt-muted);
  --aag-faint: var(--dt-faint);
  --aag-hover: var(--dt-hover);
  --aag-active: var(--dt-active);
  --aag-focus: #fafaf9;
  --aag-cta: var(--dt-cta);
  --aag-cta-hover: var(--dt-hover);
  --aag-cta-fg: var(--dt-cta-fg);
  --aag-ok-bg: var(--dt-chip-success);
  --aag-ok-tx: #4ade80;
}

/* ── Cabecera estilo ElevenLabs Agents ── */
.aag .aag-header {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--aag-border);
  align-items: center;
}
.aag-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--aag-muted);
  margin-bottom: 6px;
}
.aag-eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: none;
}
.aag .aag-header__title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--aag-text);
}
.aag .aag-header__title-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 17px;
  background: var(--aag-surface2);
  color: var(--aag-text);
  border: 0;
}
.aag .sb-section-trigger-text strong { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.aag .sb-section-trigger-icon { background: var(--aag-surface2); color: var(--aag-text); border: 0; }
.aag .aag-header__subtitle { color: var(--aag-muted); font-size: 13.5px; }

.aag-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* ── CTA Principal en píldora de tinta (#0c0a09) ── */
.aag .aag-header__btn, .aag .aag-empty__btn, .aag .aag-panel__btn--primary {
  height: var(--aag-control-h);
  padding: 0 18px;
  border-radius: 9999px;
  background: var(--aag-cta);
  color: var(--aag-cta-fg);
  border: 0;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
  transform: none;
}
.aag .aag-header__btn:hover, .aag .aag-empty__btn:hover, .aag .aag-panel__btn--primary:hover {
  background: var(--aag-cta-hover);
  border-color: var(--aag-cta-hover);
  color: var(--aag-cta-fg);
  opacity: 1;
  transform: translateY(-0.5px);
}
.aag .aag-header__btn i, .aag .aag-empty__btn i, .aag .aag-panel__btn i { font-size: 15px; }

/* ── 4 Tarjetas de Telemetría Conversacional (ElevenLabs Agents Overview) ── */
.aag .aag-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.aag .aag-stat {
  border-radius: var(--aag-radius-lg);
  padding: 16px 18px;
  background: var(--aag-surface);
  border: 0;
  box-shadow: none;
}
.aag .aag-stat:hover { border-color: var(--aag-border-strong); box-shadow: none; }
.aag .aag-stat__label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--aag-muted);
}
.aag .aag-stat__value {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--aag-text);
  margin: 4px 0 2px;
}
.aag .aag-stat__sub { color: var(--aag-faint); font-size: 12px; }
.aag .aag-stat__sub--green { color: var(--aag-ok-tx); }
.aag .aag-stat__icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 15px;
  background: var(--aag-surface2);
  color: var(--aag-text);
  border: 0;
}

/* ── Pestañas segmentadas ElevenLabs + buscador 36px ── */
.aag .aag-tabs {
  border-bottom: none;
  background: var(--aag-surface2);
  padding: 3px;
  border-radius: 10px;
  border: 0;
  gap: 2px;
}
.aag .aag-tab {
  height: 30px;
  padding: 0 12px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--aag-muted);
  border-bottom: none;
  border-radius: 7px;
}
.aag .aag-tab:hover { color: var(--aag-text); }
.aag .aag-tab.is-active {
  color: var(--aag-text);
  background: var(--aag-surface);
  font-weight: 600;
  box-shadow: none;
}
.aag .aag-tab__count {
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
  background: var(--aag-surface2);
  color: var(--aag-muted);
}
.aag input[type="text"].aag-search__input {
  height: var(--aag-control-h);
  padding: 0 14px 0 34px;
  font-size: 13px;
  border-radius: 9999px;
  border: 0;
  background: var(--aag-surface);
  width: 250px;
}
.aag input[type="text"].aag-search__input:focus {
  border-color: var(--dt-border-strong);
  box-shadow: none;
}
.aag .aag-search__icon { color: var(--aag-faint); left: 12px; }

/* ── Tarjetas de Agente (ElevenLabs Agent Cards con botón Test AI Agent en vivo) ── */
.aag .aag-card {
  border: 0;
  border-top: 1px solid var(--aag-border);
  border-radius: var(--aag-radius-lg);
  background: var(--aag-surface);
  padding: 18px 20px;
  box-shadow: none;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.aag .aag-card:hover {
  border-color: var(--aag-border-strong);
  transform: translateY(-1px);
  box-shadow: none;
}
.aag .aag-card.is-selected {
  border-color: var(--aag-text);
  box-shadow: inset 0 0 0 1px var(--aag-text);
}
.aag .aag-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 17px;
  background: var(--aag-surface2);
  color: var(--aag-text);
  border: 0;
  position: relative;
}
.aag .aag-card__name {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.aag .aag-card__desc { color: var(--aag-muted); font-size: 12.75px; }
.aag .aag-card__footer {
  border-top-color: var(--aag-border);
  padding-top: 12px;
}
.aag .aag-card__meta {
  color: var(--aag-muted);
  font-size: 11.5px;
  font-weight: 500;
}
.aag .aag-card__id {
  background: var(--aag-surface2);
  color: var(--aag-muted);
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.aag-card__cta-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.aag-card__test-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 9999px;
  border: 0;
  background: var(--aag-surface);
  color: var(--aag-text);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.14s ease;
}
.aag-card__test-btn:hover {
  background: var(--aag-cta);
  color: var(--aag-cta-fg);
  border-color: var(--aag-cta);
}
.aag-wave-bars {
  display: inline-flex;
  align-items: center;
  gap: 1.5px;
  height: 11px;
}
.aag-wave-bars i {
  display: block;
  width: 1.5px;
  background: currentColor;
  border-radius: 2px;
  animation: dui-legacy-modules-aiagents-aagWavePulse 1.2s ease-in-out infinite;
}
.aag-wave-bars i:nth-child(1) { height: 4px; animation-delay: 0s; }
.aag-wave-bars i:nth-child(2) { height: 9px; animation-delay: 0.15s; }
.aag-wave-bars i:nth-child(3) { height: 6px; animation-delay: 0.3s; }
.aag-wave-bars i:nth-child(4) { height: 10px; animation-delay: 0.45s; }
@keyframes dui-legacy-modules-aiagents-aagWavePulse {
  0%, 100% { transform: scaleY(0.65); opacity: 0.7; }
  50% { transform: scaleY(1.15); opacity: 1; }
}

.aag .aag-card__actions-btn { color: var(--aag-muted); border-color: var(--aag-border); background: var(--aag-surface); opacity: 1; }
.aag .aag-card__actions-btn:hover { color: var(--aag-text); background: var(--aag-hover); border-color: var(--aag-border-strong); }
.aag .aag-card__actions .dropdown-menu { box-shadow: none; border-color: var(--aag-border); border-radius: 12px; }
.aag .aag-card__actions .dropdown-item i { color: var(--aag-muted) !important; }
.aag .aag-card__actions .dropdown-item.aag-danger i { color: var(--aag-danger) !important; }

/* ── Badges ── */
.aag .aag-badge { height: 20px; padding: 0 8px; font-size: 11px; font-weight: 500; border-radius: 999px; gap: 5px; }
.aag .aag-badge--active { background: var(--aag-ok-bg); color: var(--aag-ok-tx); }
.aag .aag-badge--active .aag-badge__dot { background: currentColor; }
.aag .aag-badge--type { background: var(--aag-surface2); color: var(--aag-muted); font-weight: 500; }

/* ── Tarjeta "Crear nuevo agente" ── */
.aag .aag-card--create { border: 1px dashed var(--aag-border-strong); background: transparent; color: var(--aag-muted); }
.aag .aag-card--create:hover { border-color: var(--aag-text); color: var(--aag-text); background: var(--aag-hover); box-shadow: none; }
.aag .aag-card--create__icon {
  width: 40px; height: 40px; border-radius: 10px; font-size: 20px;
  background: var(--aag-surface2); border: 0; color: var(--aag-muted);
}
.aag .aag-card--create:hover .aag-card--create__icon { background: var(--aag-cta); color: var(--aag-cta-fg); }
.aag .aag-card--create__title { font-size: 14px; font-weight: 600; }
.aag .aag-card--create__sub { opacity: 1; color: var(--aag-faint); }

/* ── Panel lateral (Inspector de Agente estilo ElevenLabs) ── */
.aag .aag-panel.is-open .aag-panel__inner {
  top: var(--dt-topbar-h, 44px);
  height: calc(100vh - var(--dt-topbar-h, 44px));
  max-height: calc(100vh - var(--dt-topbar-h, 44px));
  background: var(--aag-surface);
  border-left: 1px solid var(--aag-border);
}
.aag .aag-panel__header { padding: 28px 20px 18px; border-bottom-color: var(--aag-border); }
.aag .aag-panel__avatar {
  width: 44px; height: 44px; border-radius: 12px; font-size: 20px; margin-bottom: 12px;
  background: var(--aag-surface2); color: var(--aag-text); border: 1px solid var(--aag-border);
}
.aag .aag-panel__name { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.aag .aag-panel__subtitle { color: var(--aag-faint); }
.aag .aag-panel__actions { gap: 8px; }
.aag .aag-panel__action-btn {
  flex-direction: row; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9999px;
  border: 0; background: transparent; color: var(--aag-muted); font-size: 12px; font-weight: 500;
}
.aag .aag-panel__action-btn i { font-size: 14px; }
.aag .aag-panel__action-btn:hover,
.aag .aag-panel__action-btn--primary:hover,
.aag .aag-panel__action-btn--delete:hover { background: var(--aag-hover); border-color: var(--aag-text); color: var(--aag-text); }
.aag .aag-panel__action-btn--primary { color: var(--aag-text); }
.aag .aag-panel__action-btn--delete { color: var(--aag-muted); }
.aag .aag-panel__action-btn--delete i { color: var(--aag-danger); }
.aag .aag-panel__close { color: var(--aag-muted); }
.aag .aag-panel__close:hover { background: var(--aag-hover); color: var(--aag-text); }
.aag .aag-panel__row { border-bottom-color: var(--aag-border); }
.aag .aag-panel__row-label { color: var(--aag-muted); }
.aag .aag-panel__row-value { font-weight: 500; }
.aag #aagPanelId { font-variant-numeric: tabular-nums; color: var(--aag-muted); }
.aag #aagPanelStatus span { color: var(--aag-text) !important; font-weight: 500 !important; display: inline-flex; align-items: center; gap: 6px; }
.aag #aagPanelStatus span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--aag-success); flex: none; }
.aag .aag-panel__desc-title { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--aag-faint); }
.aag .aag-panel__desc-box { background: var(--aag-surface2); border-color: var(--aag-border); border-radius: 12px; }
.aag .aag-panel__btn { height: var(--aag-control-h); padding: 0 16px; border-radius: 9999px; font-size: 13px; }
.aag .aag-panel__btn--outline { background: transparent; color: var(--aag-text); border-color: var(--aag-border-strong); }
.aag .aag-panel__btn--outline:hover { background: var(--aag-hover); }

/* ── Prueba en vivo EN LÍNEA (06-11-2026, Marc: «el del popup no debería estar, tampoco como modal»):
   panel junto a las tarjetas con el motor REAL webagentai/datalyse-aiagent.js en modo studio-inline
   (orbe multicolor, llamada y chat de verdad por wss://ai.datalyse.io). El motor no se toca: va en
   un iframe porque pinta a pantalla completa y solo admite una instancia por documento. ── */
.aag-agents-split { display: block; }
.aag-agents-split.has-dock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 16px;
  align-items: start;
}
.aag-agents-split.has-dock .aag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aag-live-dock {
  position: sticky;
  top: calc(var(--dt-topbar-h, 44px) + 12px);
  height: min(680px, calc(100vh - var(--dt-topbar-h, 44px) - 24px));
  min-height: 460px;
  display: flex;
  flex-direction: column;
  background: var(--aag-surface);
  border: 0;
  border-radius: 12px;
  overflow: hidden;
}
.aag-live-dock[hidden] { display: none; }
.aag-live-dock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--aag-border);
}
.aag-live-dock__title { display: flex; flex-direction: column; min-width: 0; }
.aag-live-dock__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--aag-muted);
}
.aag-live-dock__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--aag-success); flex-shrink: 0; }
.aag-live-dock__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--aag-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aag-live-dock__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.aag-live-dock__btn,
.aag-live-dock__icon {
  height: 28px;
  border-radius: 9999px;
  border: 0;
  background: transparent;
  color: var(--aag-text);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: background var(--dt-dur-1, .12s) var(--dt-ease, ease);
}
.aag-live-dock__btn { padding: 0 10px; }
.aag-live-dock__icon { width: 28px; padding: 0; color: var(--aag-muted); }
.aag-live-dock__btn:hover,
.aag-live-dock__icon:hover { background: var(--aag-hover); color: var(--aag-text); }
.aag-live-dock__body { position: relative; flex: 1; min-height: 0; background: var(--aag-surface2); }
.aag-live-dock__body iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}
.aag-live-dock__foot {
  padding: 8px 14px;
  border-top: 1px solid var(--aag-border);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--aag-muted);
}
.aag .aag-card.is-testing { border-color: var(--aag-border-strong); background: var(--aag-hover); }
@media (max-width: 1100px) {
  .aag-agents-split.has-dock .aag-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .aag-agents-split.has-dock { grid-template-columns: minmax(0, 1fr); }
  .aag-live-dock { position: relative; top: 0; order: -1; height: min(620px, 78vh); }
}

/* Vista previa de una PLANTILLA: sin conversación simulada (una plantilla no tiene agente detrás) */
.aag-prv-welcome {
  width: 100%;
  max-width: 440px;
  margin: 0 auto 14px;
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  text-align: left;
}
.aag-prv-welcome__label { display: block; font-size: 11px; font-weight: 500; color: var(--aag-muted); margin-bottom: 4px; }
.aag-prv-welcome__text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--aag-text); }
.aag-prv-note { margin: 0 auto; max-width: 420px; font-size: 12px; line-height: 1.45; color: var(--aag-muted); }

/* ── Vacío ── */
.aag .aag-empty__icon {
  width: 48px; height: 48px; border-radius: 12px; font-size: 22px; margin-bottom: 20px;
  background: var(--aag-surface2); color: var(--aag-muted); border: 0;
}
.aag .aag-empty__title { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.aag .aag-empty__text { color: var(--aag-muted); }
.aag .aag-empty__text span { color: var(--aag-text) !important; font-weight: 500 !important; }
.aag .aag-noresults { color: var(--aag-muted); }
.aag .aag-noresults i { color: var(--aag-faint); }

@media (max-width: 1100px) {
  .aag .aag-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
  .aag .aag-panel.is-open { box-shadow: none; }
  .aag .aag-panel.is-open .aag-panel__inner { top: 0; height: 100vh; max-height: 100vh; }
  .aag .aag-panel-backdrop { background: var(--dt-backdrop); }
}
@media (max-width: 600px) {
  .aag .aag-stats { grid-template-columns: 1fr; }
}

#aagCreateLoading { background: var(--dt-surface-2) !important; color: var(--dt-muted) !important; border: 1px solid var(--dt-border); }
#aagCreateLoading > div { border-color: var(--dt-border-strong) !important; border-top-color: var(--dt-text) !important; }
#aagCreateError { color: var(--dt-danger) !important; }
@keyframes dui-legacy-modules-aiagents-spin { to { transform: rotate(360deg); } }
.aag-spin { display: inline-block; animation: dui-legacy-modules-aiagents-spin 1s linear infinite; }

/* ═══════════ ElevenAgents Browse Templates Split View ═══════════ */
.aag-browse-split {
  display: grid;
  grid-template-columns: minmax(380px, 470px) minmax(0, 1fr);
  min-height: 680px;
  border-radius: 16px;
  border: 0;
  background: var(--dt-surface);
  color: var(--dt-text);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: none;
}
@media (max-width: 1050px) {
  .aag-browse-split { grid-template-columns: 1fr; }
}
.aag-browse-left {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--dt-surface);
  max-height: 740px;
}
.aag-browse-left__head {
  padding: 20px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.aag-browse-left__title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--dt-on-color);
  margin: 0 0 12px;
}
.aag-browse-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.aag-browse-search {
  position: relative;
  flex: 1 1 160px;
  min-width: 140px;
}
.aag-browse-search i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dt-muted);
  font-size: 14px;
}
.aag-browse-search input {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 30px;
  border-radius: 8px;
  border: 0;
  background: rgba(255, 255, 255, 0.04);
  color: var(--dt-text);
  font-size: 12.5px;
  outline: none;
}
.aag-browse-search input:focus {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.07);
}
.aag-browse-pill {
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 0;
  background: rgba(255, 255, 255, 0.04);
  color: var(--dt-text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.14s ease;
}
.aag-browse-pill:hover,
.aag-browse-pill.is-active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--dt-on-color);
}
.aag-browse-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 16px 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.16) transparent;
}
@media (max-width: 560px) {
  .aag-browse-grid { grid-template-columns: 1fr; }
}
.aag-btpl-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: var(--dt-surface);
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.aag-btpl-card:hover {
  background: var(--dt-surface);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
.aag-btpl-card.is-selected {
  background: var(--dt-surface);
  border-color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.aag-btpl-head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.aag-conic-orb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  box-shadow: inset 0 0 4px rgba(255,255,255,0.45), 0 2px 6px rgba(0,0,0,0.4);
}
.aag-btpl-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--dt-on-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aag-btpl-desc {
  font-size: 12px;
  color: var(--dt-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.aag-btpl-foot {
  display: flex;
  align-items: center;
  gap: 6px;
}
.aag-btpl-int {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  color: var(--dt-text);
  font-size: 11px;
  font-weight: 500;
}

/* Right Canvas (Dotted Workflow & Preview Inspector) */
.aag-browse-right {
  display: flex;
  flex-direction: column;
  background-color: var(--dt-surface);
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 18px 18px;
  position: relative;
  min-height: 640px;
}
.aag-browse-right__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  z-index: 2;
}
.aag-canvas-seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 10px;
  background: #1a1a1e;
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.aag-canvas-seg button {
  height: 28px;
  padding: 0 13px;
  border-radius: 7px;
  border: 0;
  background: transparent;
  color: #a1a1aa;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.14s ease;
}
.aag-canvas-seg button.is-active {
  background: #2a2a30;
  color: #ffffff;
  font-weight: 600;
}
.aag-canvas-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aag-btn-use-tpl {
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  background: var(--dt-surface);
  color: var(--dt-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.aag-btn-use-tpl:hover {
  background: var(--dt-surface-2);
  transform: translateY(-1px);
}
.aag-btn-dark-pill {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 0;
  background: var(--dt-cta);
  color: var(--dt-cta-fg);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.aag-btn-dark-pill:hover {
  background: var(--dt-cta);
  color: var(--dt-cta-fg);
}

/* Flowchart Nodes inside Workflow Canvas */
.aag-wf-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 24px 28px;
  position: relative;
  user-select: none;
}
.aag-wf-pill-node {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 10px;
  background: var(--dt-surface);
  border: 0;
  color: var(--dt-text);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: none;
}
.aag-wf-card-node {
  width: 260px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--dt-surface);
  border: 0;
  box-shadow: none;
  text-align: left;
}
.aag-wf-card-node__head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dt-on-color);
  margin-bottom: 5px;
}
.aag-wf-card-node__head i {
  color: var(--dt-muted);
  font-size: 14px;
}
.aag-wf-card-node__body {
  font-size: 11.5px;
  color: var(--dt-muted);
  line-height: 1.42;
}
.aag-wf-card-node__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: #d4d4d8;
  font-size: 10.5px;
  font-weight: 600;
}
.aag-wf-edge-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--dt-surface);
  color: var(--dt-text);
  font-size: 11px;
  font-weight: 600;
  box-shadow: none;
  max-width: 210px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aag-wf-branches {
  display: grid;
  grid-template-columns: repeat(2, 260px);
  gap: 48px;
  align-items: start;
  justify-content: center;
}
@media (max-width: 700px) {
  .aag-wf-branches { grid-template-columns: 1fr; gap: 16px; }
}

/* Preview Stage inside Right Canvas (3D Conic Blue Metallic Orb) */
.aag-prv-stage {
  flex: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
.aag-big-conic-orb-wrap {
  position: relative;
  width: 204px;
  height: 204px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.aag-big-conic-orb {
  width: 196px;
  height: 196px;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg at 50% 50%,
    #0284c7 0deg,
    #38bdf8 55deg,
    #0f172a 115deg,
    #1d4ed8 180deg,
    #67e8f9 240deg,
    #0f172a 305deg,
    #0284c7 360deg
  );
  box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.35), 0 18px 50px rgba(2, 132, 199, 0.35);
  animation: dui-legacy-modules-aiagents-aagConicRotate 14s linear infinite;
}
@keyframes dui-legacy-modules-aiagents-aagConicRotate {
  to { transform: rotate(360deg); }
}
.aag-big-conic-callbtn {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--dt-surface);
  color: var(--dt-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.14s ease;
}
.aag-big-conic-callbtn:hover {
  transform: translateX(-50%) scale(1.07);
}

/* ═══════════ ElevenLabs v4 Skill Light & Dark Adaptive Tokens ═══════════ */
.aag {
  --aag-surface: var(--dt-surface);
  --aag-surface2: var(--dt-surface-2);
  --aag-text: var(--dt-text);
  --aag-muted: var(--dt-muted);
  --aag-faint: var(--dt-faint);
  --aag-border: var(--dt-border);
  --aag-border-strong: var(--dt-border-strong);
  font-family: var(--font-sans);
}
.aag .aag-stat {
  background: var(--el-card-stone, #f5f4f2);
  border: 0;
  border-radius: 16px;
}
.aag .aag-header__btn {
  border-radius: 9999px !important;
  background: var(--el-cta-bg, #0c0a09) !important;
  color: var(--el-cta-fg, #ffffff) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.aag .aag-header__btn:hover {
  background: var(--el-cta-hover, #292524) !important;
}
:scope:not([data-bs-theme="dark"]) .aag-browse-split {
  background: var(--el-stage-bg, #ffffff);
  color: var(--el-ink, #0c0a09);
  border-color: var(--el-border-strong, rgba(12, 10, 9, 0.14));
  box-shadow: none;
}
:scope:not([data-bs-theme="dark"]) .aag-browse-left {
  background: var(--el-stage-bg, #ffffff);
  border-right-color: var(--el-border, rgba(12, 10, 9, 0.08));
}
:scope:not([data-bs-theme="dark"]) .aag-browse-left__head {
  border-bottom-color: var(--el-border, rgba(12, 10, 9, 0.08));
}
:scope:not([data-bs-theme="dark"]) .aag-browse-left__title {
  color: var(--el-ink, #0c0a09);
}
:scope:not([data-bs-theme="dark"]) .aag-browse-search input {
  background: var(--el-card-stone, #f5f4f2);
  border-color: var(--el-border, rgba(12, 10, 9, 0.08));
  color: var(--el-ink, #0c0a09);
  border-radius: 9999px;
}
:scope:not([data-bs-theme="dark"]) .aag-browse-pill {
  background: var(--el-card-stone, #f5f4f2);
  border-color: var(--el-border, rgba(12, 10, 9, 0.08));
  color: var(--el-ink-secondary, #57534e);
  border-radius: 9999px;
}
:scope:not([data-bs-theme="dark"]) .aag-browse-pill:hover,
:scope:not([data-bs-theme="dark"]) .aag-browse-pill.is-active {
  background: var(--el-ink, #0c0a09);
  border-color: var(--el-ink, #0c0a09);
  color: var(--dt-on-color);
}
:scope:not([data-bs-theme="dark"]) .aag-btpl-card {
  background: var(--el-card-stone, #f5f4f2);
  border-color: var(--el-border, rgba(12, 10, 9, 0.08));
  border-radius: 16px;
}
:scope:not([data-bs-theme="dark"]) .aag-btpl-card:hover {
  background: var(--el-card-stone-hover, #eceae6);
  border-color: var(--el-border-strong, rgba(12, 10, 9, 0.15));
}
:scope:not([data-bs-theme="dark"]) .aag-btpl-card.is-selected {
  background: var(--dt-app);
  border-color: var(--el-ink, #0c0a09);
  box-shadow: none;
}
:scope:not([data-bs-theme="dark"]) .aag-btpl-title {
  color: var(--el-ink, #0c0a09);
}
:scope:not([data-bs-theme="dark"]) .aag-btpl-desc {
  color: var(--el-ink-secondary, #57534e);
}
:scope:not([data-bs-theme="dark"]) .aag-btpl-int {
  background: var(--dt-app);
  border-color: var(--el-border, rgba(12, 10, 9, 0.08));
  color: var(--el-ink-secondary, #57534e);
}
:scope:not([data-bs-theme="dark"]) .aag-browse-right {
  background-color: var(--el-card-stone, #f5f4f2);
  background-image: radial-gradient(rgba(12, 10, 9, 0.12) 1px, transparent 1px);
}
:scope:not([data-bs-theme="dark"]) .aag-canvas-seg {
  background: rgba(12, 10, 9, 0.06);
  border-color: var(--el-border, rgba(12, 10, 9, 0.08));
  border-radius: 9999px;
}
:scope:not([data-bs-theme="dark"]) .aag-canvas-seg button {
  color: var(--el-ink-secondary, #57534e);
  border-radius: 9999px;
}
:scope:not([data-bs-theme="dark"]) .aag-canvas-seg button.is-active {
  background: #ffffff;
  color: var(--el-ink, #0c0a09);
  box-shadow: none;
}
:scope:not([data-bs-theme="dark"]) .aag-btn-use-tpl {
  background: var(--el-ink, #0c0a09);
  color: var(--dt-cta-fg);
}
:scope:not([data-bs-theme="dark"]) .aag-btn-dark-pill {
  background: var(--dt-app);
  border-color: var(--el-border-strong, rgba(12, 10, 9, 0.15));
  color: var(--el-ink, #0c0a09);
}
:scope:not([data-bs-theme="dark"]) .aag-wf-pill-node,
:scope:not([data-bs-theme="dark"]) .aag-wf-card-node {
  background: var(--dt-app);
  border-color: var(--el-border-strong, rgba(12, 10, 9, 0.14));
  color: var(--el-ink, #0c0a09);
  box-shadow: none;
}
.aag-wf-stage svg { color: rgba(255, 255, 255, 0.26); }
:scope:not([data-bs-theme="dark"]) .aag-wf-stage svg { color: rgba(12, 10, 9, 0.22); }
:scope:not([data-bs-theme="dark"]) .aag-wf-edge-label {
  background: var(--aag-surface);
  color: var(--aag-text);
  border: 0;
  box-shadow: none;
}
:scope:not([data-bs-theme="dark"]) .aag-wf-card-node__head { color: var(--el-ink, #0c0a09); }
:scope:not([data-bs-theme="dark"]) .aag-wf-card-node__body { color: var(--el-ink-secondary, #57534e); }
:scope:not([data-bs-theme="dark"]) .aag-wf-card-node__chip {
  background: var(--el-card-stone, #f5f4f2);
  color: var(--el-ink-secondary, #57534e);
}

.aag-big-conic-orb-wrap.is-calling .aag-big-conic-orb {
  animation: dui-legacy-modules-aiagents-aagConicRotate 4s linear infinite, dui-legacy-modules-aiagents-aagConicPulse 1.8s ease-in-out infinite;
}
@keyframes dui-legacy-modules-aiagents-aagConicPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 16px rgba(45, 212, 191, 0.6)); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 32px rgba(45, 212, 191, 0.9)); }
}


/* ═══════════ 3D Conic Metallic Studio Orb Movement & Live Preview Stage ═══════════ */
.aag-prv-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 20px;
  text-align: center;
}
.aag-conic-orb {
  animation: dui-legacy-modules-aiagents-aagConicSpin3D 5s linear infinite;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
}
.aag-big-conic-orb-wrap {
  --orb-energy: 0;
  --aag-orb-glow: rgba(45, 212, 191, 0.42);
  --aag-orb-ring: rgba(45, 212, 191, 0.6);
  position: relative;
  width: 204px;
  height: 204px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  animation: dui-legacy-modules-aiagents-aagOrbFloat3D 3.6s ease-in-out infinite;
}
@keyframes dui-legacy-modules-aiagents-aagOrbFloat3D {
  0%, 100% { transform: translateY(0px) scale(calc(1 + var(--orb-energy, 0) * 0.16)); }
  50%      { transform: translateY(-7px) scale(calc(1.03 + var(--orb-energy, 0) * 0.18)); }
}
/* Stationary 3D Specular Glass Highlight Lens on top of spinning conic orb */
.aag-big-conic-orb-wrap::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.12) 30%, transparent 58%),
    radial-gradient(circle at 74% 78%, rgba(0, 0, 0, 0.22) 0%, transparent 52%);
  box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.36), 0 20px 52px var(--aag-orb-glow, rgba(45, 212, 191, 0.38));
  pointer-events: none;
  z-index: 3;
}
.aag-orb-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--aag-orb-ring, rgba(45, 212, 191, 0.58));
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.aag-big-conic-orb-wrap:hover .aag-orb-ring.r1,
.aag-big-conic-orb-wrap.is-calling .aag-orb-ring.r1 {
  animation: dui-legacy-modules-aiagents-aagOrbRingWave 2s infinite ease-out;
}
.aag-big-conic-orb-wrap.is-calling .aag-orb-ring.r2 {
  animation: dui-legacy-modules-aiagents-aagOrbRingWave 2s infinite 0.65s ease-out;
}
@keyframes dui-legacy-modules-aiagents-aagOrbRingWave {
  0%   { transform: scale(0.94); opacity: 0.85; }
  100% { transform: scale(1.34); opacity: 0; }
}
.aag-big-conic-orb {
  width: 196px;
  height: 196px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  z-index: 2;
  box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.38);
  animation: dui-legacy-modules-aiagents-aagConicSpin3D 4.8s linear infinite !important;
  transition: background 0.35s ease;
}
/* Subtle counter-rotating 3D metallic sheen that preserves the sharp cone vertex */
.aag-big-conic-orb::before {
  content: '';
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: conic-gradient(from 90deg at 46% 54%, rgba(255,255,255,0.26), transparent 30%, rgba(0,0,0,0.18) 62%, transparent 88%, rgba(255,255,255,0.26));
  mix-blend-mode: overlay;
  animation: dui-legacy-modules-aiagents-aagConicCounterSheen 3.4s ease-in-out infinite alternate;
  pointer-events: none;
}
.aag-big-conic-orb-wrap.is-calling .aag-big-conic-orb {
  animation-duration: 1.75s !important;
}
@keyframes dui-legacy-modules-aiagents-aagConicSpin3D {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.035); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes dui-legacy-modules-aiagents-aagConicCounterSheen {
  0%   { transform: rotate(0deg) scale(1.04); opacity: 0.55; }
  100% { transform: rotate(-140deg) scale(0.96); opacity: 0.85; }
}
.aag-big-conic-callbtn {
  z-index: 5 !important;
}
.aag-big-conic-callbtn.is-hangup {
  background: #ef4444 !important;
  color: var(--dt-cta-fg) !important;
  box-shadow: none !important;
}
.aag-prv-color-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 14px;
}
.aag-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(120, 120, 128, 0.28);
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.aag-color-swatch:hover,
.aag-color-swatch.is-active {
  transform: scale(1.22);
  border-color: var(--aag-text, #0c0a09);
}
.aag-prv-live-box {
  width: 100%;
  max-width: 430px;
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  border-radius: 16px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  box-sizing: border-box;
}
:scope:not([data-bs-theme="dark"]) .aag-prv-live-box {
  background: var(--dt-app);
  border-color: rgba(12, 10, 9, 0.1);
  box-shadow: none;
}
.aag-prv-voice-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--aag-muted, #71717a);
}
.aag-prv-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dt-surface);
  flex-shrink: 0;
}
.aag-prv-live-dot.is-live {
  background: #22c55e;
  box-shadow: none;
}
.aag-prv-voice-state {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aag-prv-chat-log {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 120px;
  overflow-y: auto;
  padding: 4px 2px;
}
.aag-prv-chat-form {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(120, 120, 128, 0.08);
  border: 0;
  border-radius: 999px;
  padding: 3px 5px 3px 8px;
}
.aag-prv-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--aag-muted, #71717a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.aag-prv-chat-input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--aag-text, #0c0a09);
  font-size: 12.5px;
  outline: none;
  height: 28px;
}
.aag-prv-send-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: var(--aag-text, #0c0a09);
  color: var(--aag-surface, #ffffff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

}
/* end dui-template-style modules/aiagents:0 */
/* dui-template-style {"key":"modules/aiagentsedit:0","bytes":7020,"sha256":"89f8531c4e97a503b0d99928f94d7acbd8118c205f0b24f411034c55a17091eb","media":null,"source_sha256":"d6370744e37e48e12895f688ac26b06af5629e44fd61dda1efad79b4c2b92149"} */
@scope (:root:has(template[data-dui-legacy-style="modules/aiagentsedit:0"])) {

    /* ============================================
   PROMPT GENERATOR DROPDOWN
   ============================================ */

    /* Dropdown Container *//* ============================================
   PROMPT GENERATOR - MAGIC BUTTON VERSION
   ============================================ */

    /* Botón varita mágica en el header */
    .ai-prompt-magic-btn {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        border: 0;
        background: var(--dt-surface-2);
        color: var(--ai-accent);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        transition: all 0.2s ease;
        margin-left: auto;
        flex-shrink: 0;
    }

    .ai-prompt-magic-btn:hover {
        border-color: transparent;
        background: var(--dt-hover);
        transform: scale(1.05);
        box-shadow: none;
    }

    .ai-prompt-magic-btn.active {
        background: var(--ai-gradient);
        border-color: transparent;
        color: var(--dt-cta-fg);
        box-shadow: none;
    }

    .ai-prompt-magic-btn.active:hover {
        transform: scale(1.05);
    }

    /* Panel desplegable */
    .ai-prompt-generator-panel {
        display: none;
        padding: 16px;
        margin-bottom: 16px;
        border-radius: var(--ai-radius);
        border: 0;
        background: var(--dt-surface-2);
        animation: dui-legacy-modules-aiagentsedit-panelSlideDown 0.25s ease;
    }

    .ai-prompt-generator-panel.open {
        display: block;
    }

    @keyframes dui-legacy-modules-aiagentsedit-panelSlideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .ai-prompt-generator-desc {
        margin: 0 0 12px;
        font-size: 13px;
        color: var(--ai-text3);
    }

    /* Input Row */
    .ai-prompt-generator-input {
        display: flex;
        gap: 10px;
    }

    .ai-prompt-generator-input .ai-input {
        flex: 1;
        min-width: 0;
    }

    .ai-prompt-generator-input .ai-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Loading State */
    .ai-prompt-generator-loading {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 12px;
        padding: 10px 14px;
        background: var(--dt-surface-2);
        border-radius: 8px;
        font-size: 13px;
        color: var(--ai-accent);
    }

    .ai-spinner-small {
        width: 18px;
        height: 18px;
        border: 2px solid rgba(var(--bs-primary-rgb, 93, 135, 255), 0.2);
        border-top-color: var(--ai-accent);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        flex-shrink: 0;
    }

    /* ============================================
       DARK THEME
       ============================================ */
    [data-bs-theme="dark"] .ai-prompt-magic-btn {
        background: var(--dt-surface-2);
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-prompt-magic-btn:hover {
        background: var(--dt-hover);
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-prompt-generator-panel {
        background: var(--dt-surface-2);
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-prompt-generator-loading {
        background: var(--dt-surface-2);
    }

    /* ============================================
       RESPONSIVE
       ============================================ */
    @media (max-width: 576px) {
        .ai-prompt-generator-input {
            flex-direction: column;
        }

        .ai-prompt-generator-input .ai-btn {
            width: 100%;
            justify-content: center;
        }
    }

    /* Exact Preview Stage from aiagents.html */
    .aag-prv-stage {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px;
      text-align: center;
      width: 100%;
    }
    .aag-big-conic-orb-wrap {
      position: relative;
      width: 204px;
      height: 204px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
    }
    .aag-big-conic-orb {
      width: 196px;
      height: 196px;
      border-radius: 50%;
      background: conic-gradient(
        from 180deg at 50% 50%,
        #0284c7 0deg,
        #38bdf8 55deg,
        #0f172a 115deg,
        #1d4ed8 180deg,
        #67e8f9 240deg,
        #0f172a 305deg,
        #0284c7 360deg
      );
      box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.35), 0 18px 50px rgba(2, 132, 199, 0.35);
      animation: dui-legacy-modules-aiagentsedit-aagConicRotate 14s linear infinite;
      cursor: pointer;
    }
    @keyframes dui-legacy-modules-aiagentsedit-aagConicRotate {
      to { transform: rotate(360deg); }
    }
    .aag-big-conic-callbtn {
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 0;
      background: var(--dt-surface);
      color: var(--dt-text);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      cursor: pointer;
      box-shadow: none;
      transition: transform 0.14s ease;
    }
    .aag-big-conic-callbtn:hover {
      transform: translateX(-50%) scale(1.07);
    }
    .aag-btn-use-tpl {
      height: 34px;
      padding: 0 16px;
      border-radius: 999px;
      border: 0;
      background: var(--dt-cta);
      color: var(--dt-cta-fg);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.12s ease, background 0.12s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .aag-btn-use-tpl:hover {
      background: var(--dt-cta-hover);
      transform: translateY(-1px);
    }
    .aag-btn-dark-pill {
      height: 34px;
      padding: 0 14px;
      border-radius: 999px;
      border: 0;
      background: var(--dt-cta);
      color: var(--dt-cta-fg);
      font-size: 12.5px;
      font-weight: 500;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .aag-btn-dark-pill:hover {
      background: var(--dt-cta);
      color: var(--dt-cta-fg);
    }
    :scope:not([data-bs-theme="dark"]) .aag-btn-use-tpl {
      background: var(--dt-cta);
      color: var(--dt-cta-fg);
    }
    :scope:not([data-bs-theme="dark"]) .aag-btn-dark-pill {
      background: var(--dt-app);
      border-color: transparent;
      color: var(--el-ink);
    }


}
/* end dui-template-style modules/aiagentsedit:0 */
/* dui-template-style {"key":"modules/aiagentsedit:1","bytes":1358,"sha256":"7848ae2a2857f0142a2786d123debc6449a4d64e54243100de445e93d088b91d","media":null,"source_sha256":"5844f48f2d58afc406390c2d913b34b42cc0388666596ea215c7a5138c069cbc"} */
@scope (:root:has(template[data-dui-legacy-style="modules/aiagentsedit:1"])) {

#panel-personality { max-width: 1080px; margin-inline: auto; }
#panel-personality .ai-grid-agent-stacked { grid-template-columns: minmax(0, 1fr) !important; }
#panel-personality .ai-grid-agent-stacked > .ai-col { min-width: 0; }
#panel-personality > .ai-card, #panel-personality .ai-grid-agent-stacked .ai-card {
    border: 0; border-radius: 16px; background: var(--dt-surface);
    box-shadow: none; margin-bottom: 20px;
}
#panel-personality .ai-card-header { padding: 18px 22px; gap: 14px; background: var(--dt-surface); }
#panel-personality .ai-card-header h3 { color: var(--dt-text); font-size: 16px; font-weight: 650; letter-spacing: -.015em; }
#panel-personality .ai-card-header p { color: var(--dt-muted); }
#panel-personality .ai-card-header .ai-card-icon { background: var(--dt-surface-2) !important; color: var(--dt-text) !important; border-radius: 11px; }
#panel-personality .ai-card-body { padding: 22px; }
#panel-personality :is(.ai-input, .ai-select, .ai-textarea) { border-color: transparent; background: var(--dt-surface); color: var(--dt-text); }
#panel-personality :is(.ai-input, .ai-select, .ai-textarea):focus-visible { border-color: transparent; box-shadow: none; background: var(--dt-active);
    }
@media (max-width: 768px) { #panel-personality .ai-card-header, #panel-personality .ai-card-body { padding: 16px; } }

}
/* end dui-template-style modules/aiagentsedit:1 */
/* dui-template-style {"key":"modules/aiagentsedit:2","bytes":177646,"sha256":"8d4a224e797bc569e96bb7fcb3ee88153940e3dcfa99634ae13ad157af0cc8f0","media":null,"source_sha256":"22f78510cfde7b0402b053dbd961ab2b232963f8f125bc435647eae3690b31c2"} */
@scope (:root:has(template[data-dui-legacy-style="modules/aiagentsedit:2"])) {

    /* AI Agent Editor - Con soporte para tema oscuro */

    .ai-agent-editor {
        --ai-accent: var(--dt-cta);            /* 26-10 (Marc, "como ElevenLabs"): el acento es tinta, no azul */
        --ai-accent2: var(--dt-cta);
        --ai-accent-light: var(--dt-active);
        --ai-gradient: var(--dt-cta);          /* color plano: válido en cada `background: var(--ai-gradient)` */
        --ai-radius: var(--dt-radius);
        --ai-radius-lg: var(--dt-radius-lg);

        /* Tema claro — hereda del template */
        --ai-bg: var(--dt-surface);
        --ai-bg2: var(--dt-surface-2);
        --ai-bg3: var(--dt-active);
        --ai-border: var(--dt-border);
        --ai-text: var(--dt-text);
        --ai-text2: var(--dt-muted);
        --ai-text3: var(--dt-faint);

        position: relative;
        padding: 24px;
        min-height: 100vh;
        /*background: var(--ai-bg2);*/
    }

    /* ============================================
       TEMA OSCURO - data-bs-theme="dark"
       ============================================ */
    [data-bs-theme="dark"] .ai-agent-editor,
    .ai-agent-editor[data-bs-theme="dark"] {
        --ai-bg: var(--dt-surface);
        --ai-bg2: var(--dt-surface-2);
        --ai-bg3: var(--dt-active);
        --ai-border: var(--dt-border);
        --ai-text: var(--dt-text);
        --ai-text2: var(--dt-muted);
        --ai-text3: var(--dt-faint);
        --ai-accent-light: var(--dt-active);
    }

    /* Ajustes específicos para tema oscuro */
    [data-bs-theme="dark"] .ai-card,
    [data-bs-theme="dark"] .ai-main-container {
        background: var(--ai-bg);
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-card:hover {
        border-color: transparent;
        box-shadow: none;
    }

    [data-bs-theme="dark"] .ai-tabs {
        background: var(--ai-bg2);
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-input,
    [data-bs-theme="dark"] .ai-select,
    [data-bs-theme="dark"] .ai-textarea {
        background: var(--ai-bg2);
        border-color: transparent;
        color: var(--ai-text);
    }

    [data-bs-theme="dark"] .ai-input::placeholder,
    [data-bs-theme="dark"] .ai-textarea::placeholder {
        color: var(--ai-text3);
    }

    [data-bs-theme="dark"] .ai-input:focus,
    [data-bs-theme="dark"] .ai-select:focus,
    [data-bs-theme="dark"] .ai-textarea:focus {
        border-color: transparent;
        box-shadow: none; background: var(--dt-active);
    }

    [data-bs-theme="dark"] .ai-btn-icon {
        background: var(--ai-bg2);
        border-color: transparent;
        color: var(--ai-text2);
    }

    [data-bs-theme="dark"] .ai-btn-icon:hover {
        border-color: transparent;
        color: var(--ai-accent);
        background: var(--ai-bg3);
    }

    [data-bs-theme="dark"] .ai-btn-icon.red:hover {
        border-color: #ef4444;
        color: #ef4444;
        background: rgba(239, 68, 68, .1);
    }

    [data-bs-theme="dark"] .ai-lang-trigger {
        background: var(--ai-bg2);
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-lang-menu {
        background: var(--ai-bg);
        border-color: transparent;
        box-shadow: none;
    }

    [data-bs-theme="dark"] .ai-lang-search {
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-lang-search input {
        color: var(--ai-text);
    }

    [data-bs-theme="dark"] .ai-lang-option:hover {
        background: var(--ai-bg3);
    }

    [data-bs-theme="dark"] .ai-lang-option.selected {
        background: var(--dt-active);
    }

    [data-bs-theme="dark"] .ai-lang-chip {
        background: var(--ai-bg3);
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-lang-chip.active {
        border-color: transparent;
        background: var(--dt-active);
    }

    [data-bs-theme="dark"] .ai-voice-card {
        background: var(--ai-bg2);
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-voice-card:hover {
        border-color: transparent;
        box-shadow: none;
    }

    [data-bs-theme="dark"] .ai-voice-card.selected {
        border-color: transparent;
        background: var(--dt-active);
    }

    [data-bs-theme="dark"] .ai-voice-avatar {
        background: var(--ai-bg3);
    }

    [data-bs-theme="dark"] .ai-tag {
        background: var(--ai-bg3);
        color: var(--ai-text2);
    }

    [data-bs-theme="dark"] .ai-tag.male {
        background: rgba(59, 130, 246, .2);
        color: #60a5fa;
    }

    [data-bs-theme="dark"] .ai-tag.female {
        background: rgba(236, 72, 153, .2);
        color: #f472b6;
    }

    [data-bs-theme="dark"] .ai-asr-card {
        background: var(--ai-bg2);
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-asr-card:hover {
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-asr-card.active {
        border-color: transparent;
        background: var(--dt-active);
    }

    [data-bs-theme="dark"] .ai-model-card {
        background: var(--ai-bg2);
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-model-card:hover {
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-model-card.active {
        border-color: transparent;
        background: var(--dt-active);
    }

    [data-bs-theme="dark"] .ai-model-price-tooltip {
        background: var(--ai-bg3);
        box-shadow: none;
    }

    [data-bs-theme="dark"] .ai-model-price-tooltip::after {
        border-top-color: var(--ai-bg3);
    }

    [data-bs-theme="dark"] .ai-slider {
        background: var(--ai-bg3);
    }

    [data-bs-theme="dark"] .ai-preset {
        background: var(--ai-bg2);
        border-color: transparent;
        color: var(--ai-text2);
    }

    [data-bs-theme="dark"] .ai-preset:hover {
        border-color: transparent;
        background: var(--ai-bg3);
    }

    [data-bs-theme="dark"] .ai-tool-item {
        background: var(--ai-bg2);
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-tool-params {
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-switch-slider {
        background: var(--ai-bg3);
    }

    [data-bs-theme="dark"] .ai-embed-box {
        background: var(--ai-bg2);
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-embed-header {
        background: var(--ai-bg3);
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-embed-code {
        color: var(--dt-text);
    }

    [data-bs-theme="dark"] .ai-preview-container {
        background: var(--ai-bg3);
    }

    [data-bs-theme="dark"] .ai-table th {
        background: var(--ai-bg3);
        color: var(--ai-text3);
    }

    [data-bs-theme="dark"] .ai-table th,
    [data-bs-theme="dark"] .ai-table td {
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-table code {
        background: var(--ai-bg3);
        color: var(--dt-text);
    }

    [data-bs-theme="dark"] .ai-btn-group {
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-btn-group label {
        color: var(--ai-text2);
    }

    [data-bs-theme="dark"] .ai-btn-group label:hover {
        background: var(--ai-bg3);
    }

    [data-bs-theme="dark"] .ai-footer {
        background: var(--ai-bg2);
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-color-option.selected {
        border-color: var(--ai-text);
    }

    [data-bs-theme="dark"] .ai-position-picker {
        background: var(--ai-bg2);
    }

    [data-bs-theme="dark"] .ai-position-option {
        background: var(--ai-bg);
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-position-option:hover {
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-position-option.selected {
        border-color: transparent;
        background: var(--dt-active);
    }

    [data-bs-theme="dark"] .ai-mode-option,
    [data-bs-theme="dark"] .ai-size-option {
        background: var(--ai-bg2);
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-mode-option:hover,
    [data-bs-theme="dark"] .ai-size-option:hover {
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-mode-option.selected,
    [data-bs-theme="dark"] .ai-size-option.selected {
        border-color: transparent;
        background: var(--dt-active);
    }

    [data-bs-theme="dark"] .ai-size-icon {
        background: var(--ai-bg3);
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-size-option.selected .ai-size-icon {
        border-color: transparent;
        background: var(--dt-active);
    }

    [data-bs-theme="dark"] .ai-welcome-item {
        background: var(--ai-bg2);
    }

    [data-bs-theme="dark"] .ai-lang-message-item {
        background: var(--ai-bg2);
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-lang-message-item:hover {
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-lang-msg-content input {
        background: var(--ai-bg);
        border-color: transparent;
        color: var(--ai-text);
    }

    [data-bs-theme="dark"] .ai-lang-msg-content input:focus {
        border-color: transparent;
        box-shadow: none; background: var(--dt-active);
    }

    [data-bs-theme="dark"] .ai-ctool-param {
        background: var(--ai-bg2);
        border-color: transparent;
    }

    [data-bs-theme="dark"] #ctool-params-list:empty::before {
        background: var(--ai-bg2);
        border-color: transparent;
    }

    /* RAG Knowledge - Tema oscuro */
    [data-bs-theme="dark"] .ai-rag-upload-zone {
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-rag-upload-zone:hover,
    [data-bs-theme="dark"] .ai-rag-upload-zone.dragover {
        border-color: transparent;
        background: var(--dt-hover);
    }

    [data-bs-theme="dark"] .ai-rag-queue {
        background: var(--ai-bg2);
    }

    [data-bs-theme="dark"] .ai-rag-queue-item {
        background: var(--ai-bg);
    }

    [data-bs-theme="dark"] .ai-rag-progress-bar {
        background: var(--ai-bg3);
    }

    [data-bs-theme="dark"] .ai-rag-stat {
        background: var(--ai-bg2);
    }

    [data-bs-theme="dark"] .ai-rag-file {
        background: var(--ai-bg2);
    }

    [data-bs-theme="dark"] .ai-rag-file:hover {
        background: var(--ai-bg3);
    }

    [data-bs-theme="dark"] .ai-rag-modal-content {
        background: var(--ai-bg);
        box-shadow: none;
    }

    [data-bs-theme="dark"] .ai-rag-modal-header {
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-rag-modal-close:hover {
        background: var(--ai-bg3);
    }

    [data-bs-theme="dark"] .ai-rag-modal-body {
        background: var(--ai-bg2);
    }

    /* Scrollbars - Tema oscuro */
    [data-bs-theme="dark"] .ai-voices-grid::-webkit-scrollbar-track,
    [data-bs-theme="dark"] .ai-lang-list::-webkit-scrollbar-track {
        background: var(--ai-bg2);
    }

    [data-bs-theme="dark"] .ai-voices-grid::-webkit-scrollbar-thumb,
    [data-bs-theme="dark"] .ai-lang-list::-webkit-scrollbar-thumb {
        background: var(--ai-bg3);
    }

    [data-bs-theme="dark"] .ai-voices-grid::-webkit-scrollbar-thumb:hover,
    [data-bs-theme="dark"] .ai-lang-list::-webkit-scrollbar-thumb:hover {
        background: var(--ai-text3);
    }

    /* Card icons con mejores colores en oscuro */
    [data-bs-theme="dark"] .ai-card-icon.purple {
        background: rgba(var(--bs-primary-rgb, 93, 135, 255), .2);
        color: #93b4ff;
    }

    [data-bs-theme="dark"] .ai-card-icon.blue {
        background: rgba(59, 130, 246, .2);
        color: #60a5fa;
    }

    [data-bs-theme="dark"] .ai-card-icon.green {
        background: rgba(34, 197, 94, .2);
        color: #4ade80;
    }

    [data-bs-theme="dark"] .ai-card-icon.orange {
        background: rgba(249, 115, 22, .2);
        color: #fb923c;
    }

    /* Message icons en oscuro */
    [data-bs-theme="dark"] .ai-message-icon.green,
    [data-bs-theme="dark"] .ai-lang-msg-icon.green {
        background: rgba(34, 197, 94, .2);
        color: #4ade80;
    }

    [data-bs-theme="dark"] .ai-message-icon.yellow,
    [data-bs-theme="dark"] .ai-lang-msg-icon.yellow {
        background: rgba(234, 179, 8, .2);
        color: #facc15;
    }

    [data-bs-theme="dark"] .ai-message-icon.blue,
    [data-bs-theme="dark"] .ai-lang-msg-icon.blue {
        background: rgba(59, 130, 246, .2);
        color: #60a5fa;
    }

    [data-bs-theme="dark"] .ai-message-icon.red,
    [data-bs-theme="dark"] .ai-lang-msg-icon.red {
        background: rgba(239, 68, 68, .2);
        color: #f87171;
    }

    /* RAG stat icons en oscuro */
    [data-bs-theme="dark"] .ai-rag-stat-icon.blue {
        background: rgba(59, 130, 246, .2);
        color: #60a5fa;
    }

    [data-bs-theme="dark"] .ai-rag-stat-icon.green {
        background: rgba(34, 197, 94, .2);
        color: #4ade80;
    }

    [data-bs-theme="dark"] .ai-rag-stat-icon.orange {
        background: rgba(249, 115, 22, .2);
        color: #fb923c;
    }

    [data-bs-theme="dark"] .ai-rag-stat-icon.purple {
        background: rgba(var(--bs-primary-rgb, 93, 135, 255), .2);
        color: #93b4ff;
    }

    /* ASR price badge en oscuro */
    [data-bs-theme="dark"] .ai-asr-price {
        background: var(--dt-surface-2);
        color: var(--dt-muted);
    }

    /* ============================================
       ESTILOS BASE (sin cambios)
       ============================================ */

    .ai-page-header {
        margin-bottom: 24px;
    }

    .ai-breadcrumb {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: var(--ai-text3);
        margin-bottom: 12px;
    }

    .ai-breadcrumb a {
        color: var(--ai-text2);
        text-decoration: none;
        transition: .2s;
    }

    .ai-breadcrumb a:hover {
        color: var(--ai-accent);
    }

    .ai-header-main {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
        padding: 24px;
        background: var(--ai-gradient);
        border-radius: var(--ai-radius-lg);
        box-shadow: none;
    }

    .ai-header-left {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .ai-agent-avatar {
        width: 56px;
        height: 56px;
        border-radius: var(--ai-radius);
        background: rgba(255, 255, 255, .2);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: #fff;
    }

    .ai-header-info h1 {
        font-size: 22px;
        font-weight: 700;
        color: var(--dt-on-color);
        margin: 0 0 4px;
    }

    .ai-header-info p {
        font-size: 13px;
        color: var(--dt-muted);
        margin: 0;
    }

    .ai-header-actions {
        display: flex;
        gap: 10px;
    }

    .ai-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border-radius: var(--ai-radius);
        font-size: 14px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: .2s;
    }

    .ai-btn-primary {
        background: var(--ai-gradient);
        color: var(--dt-cta-fg);
        box-shadow: none;
    }

    .ai-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: none;
    }

    .ai-btn-glass {
        background: var(--dt-surface-2);
        color: var(--dt-text);
        backdrop-filter: blur(8px);
        border: 0;
    }

    .ai-btn-glass:hover {
        background: var(--dt-hover);
    }

    [data-bs-theme="dark"] .ai-btn-glass {
        background: var(--dt-surface-2);
        color: var(--dt-text);
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-btn-glass:hover {
        background: var(--dt-hover);
    }

    .ai-btn-sm {
        padding: 6px 12px;
        font-size: 12px;
    }

    .ai-btn-icon {
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 8px;
        background: var(--ai-bg);
        border: 0;
        color: var(--ai-text2);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .ai-btn-icon:hover {
        border-color: transparent;
        color: var(--ai-accent);
    }

    .ai-btn-icon.red:hover {
        border-color: #ef4444;
        color: #ef4444;
    }

    .ai-main-container {
        background: var(--ai-bg);
        border: 0;
        border-radius: var(--ai-radius-lg);
        overflow: hidden;
        box-shadow: none;
    }

    .ai-tabs {
        display: flex;
        gap: 0;
        padding: 0 12px;
        border-bottom: 1px solid transparent;
        overflow-x: auto;
        scrollbar-width: none;
        background: var(--ai-bg2);
    }

    .ai-tabs::-webkit-scrollbar {
        display: none;
    }

    .ai-tab {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 16px 20px;
        background: transparent;
        border: none;
        color: var(--ai-text3);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: .2s;
        position: relative;
        white-space: nowrap;
    }

    .ai-tab i {
        font-size: 18px;
    }

    .ai-tab:hover {
        color: var(--ai-text);
    }

    .ai-tab.active {
        color: var(--ai-accent);
    }

    .ai-tab.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 16px;
        right: 16px;
        height: 2px;
        background: var(--ai-gradient);
        border-radius: 2px 2px 0 0;
    }

    .ai-tab-panels {
        padding: 24px;
    }

    .ai-panel {
        display: none;
        animation: dui-legacy-modules-aiagentsedit-fadeIn .3s ease;
    }

    .ai-panel.active {
        display: block;
    }

    @keyframes dui-legacy-modules-aiagentsedit-fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .ai-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    @media (max-width: 992px) {
        .ai-grid-2 {
            grid-template-columns: 1fr;
        }
    }

    .ai-card {
        background: var(--ai-bg);
        border: 0;
        border-radius: var(--ai-radius);
        overflow: hidden;
        margin-bottom: 20px;
        transition: .2s;
    }

    .ai-card:last-child {
        margin-bottom: 0;
    }

    .ai-card:hover {
        border-color: transparent;
        box-shadow: none;
    }

    .ai-card-header {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 20px;
        border-bottom: 1px solid transparent;
    }

    .ai-card-header h3 {
        font-size: 16px;
        font-weight: 600;
        margin: 0 0 4px;
        color: var(--ai-text);
    }

    .ai-card-header p {
        font-size: 13px;
        color: var(--ai-text3);
        margin: 0;
    }

    .ai-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
    }

    .ai-card-icon.purple {
        background: rgba(var(--bs-primary-rgb, 93, 135, 255), .12);
        color: #5d87ff;
    }

    .ai-card-icon.blue {
        background: rgba(59, 130, 246, .12);
        color: #3b82f6;
    }

    .ai-card-icon.green {
        background: rgba(34, 197, 94, .12);
        color: #22c55e;
    }

    .ai-card-icon.orange {
        background: rgba(249, 115, 22, .12);
        color: #f97316;
    }

    .ai-card-body {
        padding: 20px;
    }

    .ai-card-body-table {
        padding: 0;
    }

    .ai-card-tall .ai-card-body {
        display: flex;
        flex-direction: column;
    }

    .ai-card-tall .ai-textarea-code {
        flex: 1;
        min-height: 536px;
    }

    .ai-field {
        margin-bottom: 16px;
    }

    .ai-field:last-child {
        margin-bottom: 0;
    }

    .ai-field label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--ai-text2);
        margin-bottom: 6px;
    }

    .ai-input,
    .ai-select,
    .ai-textarea {
        width: 100%;
        padding: 12px 14px;
        background: var(--ai-bg);
        border: 0;
        border-radius: 8px;
        color: var(--ai-text);
        font-size: 14px;
        transition: .2s;
    }

    .ai-input:focus,
    .ai-select:focus,
    .ai-textarea:focus {
        outline: none;
        border-color: transparent;
        box-shadow: none; background: var(--dt-active);
    }

    .ai-textarea {
        min-height: 100px;
        resize: vertical;
        line-height: 1.6;
    }

    .ai-textarea-code {
        font-family: 'JetBrains Mono', monospace;
        font-size: 13px;
    }

    .ai-field-footer {
        display: flex;
        justify-content: space-between;
        margin-top: 8px;
        font-size: 12px;
        color: var(--ai-text3);
    }

    .ai-field-check {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
    }

    .ai-field-check input {
        width: 18px;
        height: 18px;
        accent-color: var(--ai-accent);
    }

    .ai-field-actions {
        display: flex;
        gap: 10px;
    }

    /* Language Dropdown Multi-Select */
    .ai-field-lang {
        min-width: 220px;
    }

    .ai-lang-dropdown {
        position: relative;
    }

    .ai-lang-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        background: var(--ai-bg);
        border: 0;
        border-radius: 8px;
        cursor: pointer;
        transition: .2s;
    }

    .ai-lang-trigger:hover {
        border-color: transparent;
    }

    .ai-lang-dropdown.open .ai-lang-trigger {
        border-color: transparent;
        box-shadow: none;
        border-radius: 8px 8px 0 0;
    }

    .ai-lang-placeholder {
        font-size: 14px;
        color: var(--ai-text2);
    }

    .ai-lang-trigger i {
        color: var(--ai-text3);
        transition: .2s;
    }

    .ai-lang-dropdown.open .ai-lang-trigger i {
        transform: rotate(180deg);
    }

    .ai-lang-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--ai-bg);
        border: 0;
        border-top: none;
        border-radius: 0 0 8px 8px;
        box-shadow: none;
        z-index: 100;
        display: none;
        max-height: 300px;
        overflow: hidden;
    }

    .ai-lang-dropdown.open .ai-lang-menu {
        display: block;
    }

    .ai-lang-search {
        padding: 10px;
        border-bottom: 1px solid transparent;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .ai-lang-search i {
        color: var(--ai-text3);
    }

    .ai-lang-search input {
        flex: 1;
        border: none;
        outline: none;
        font-size: 14px;
        background: transparent;
        color: var(--ai-text);
    }

    .ai-lang-list {
        max-height: 220px;
        overflow-y: auto;
        padding: 8px;
    }

    .ai-lang-option {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 6px;
        cursor: pointer;
        transition: .15s;
    }

    .ai-lang-option:hover {
        background: var(--ai-bg2);
    }

    .ai-lang-option.selected {
        background: var(--dt-active);
    }

    .ai-lang-option input {
        display: none;
    }

    .ai-lang-checkbox {
        float: left;
        width: 20px;
        height: 20px;
        border: 2px solid var(--ai-border);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .2s;
        flex-shrink: 0;
    }

    .ai-lang-checkbox i {
        font-size: 12px;
        color: var(--dt-on-color);
        opacity: 0;
        transition: .15s;
    }

    .ai-lang-option.selected .ai-lang-checkbox {
        background: var(--ai-accent);
        border-color: var(--ai-accent);
    }

    .ai-lang-option.selected .ai-lang-checkbox i {
        opacity: 1;
    }

    .ai-lang-label {
        margin-left: 10px;
        font-size: 14px;
        color: var(--ai-text);
    }

    .ai-lang-empty {
        padding: 20px;
        text-align: center;
        color: var(--ai-text3);
        font-size: 13px;
    }

    /* Language Chips */
    .ai-lang-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 20px;
        min-height: 40px;
    }

    .ai-lang-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: var(--ai-bg2);
        border: 2px solid transparent;
        border-radius: 8px;
        cursor: pointer;
        transition: .2s;
    }

    .ai-lang-chip:hover {
        border-color: transparent;
    }

    .ai-lang-chip.active {
        border-color: transparent;
        background: var(--dt-active);
    }

    .ai-chip-name {
        font-size: 13px;
        font-weight: 600;
        color: var(--ai-text);
    }

    .ai-chip-voice {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: var(--ai-accent);
        background: var(--dt-surface-2);
        padding: 2px 8px;
        border-radius: 4px;
    }

    .ai-chip-voice i {
        font-size: 10px;
    }

    .ai-chip-remove {
        width: 20px;
        height: 20px;
        border: none;
        background: transparent;
        color: var(--ai-text3);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: .15s;
        margin-left: 4px;
    }

    .ai-chip-remove:hover {
        background: rgba(239, 68, 68, .1);
        color: #ef4444;
    }

    /* Default Language Selector */
    .ai-default-lang-wrap {
        margin-bottom: 16px;
        padding: 12px 16px;
        background: linear-gradient(135deg, rgba(234, 179, 8, 0.06), rgba(245, 158, 11, 0.06));
        border: 0;
        border-radius: 10px;
    }

    .ai-default-lang-wrap label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        color: var(--ai-text);
        margin-bottom: 8px;
    }

    .ai-default-lang-wrap label i {
        color: #eab308;
        font-size: 16px;
    }

    .ai-default-lang-wrap .ai-select {
        width: 100%;
    }

    .ai-default-lang-wrap .ai-field-hint {
        display: block;
        margin-top: 6px;
        font-size: 11px;
        color: var(--ai-text3);
    }

    /* Current Language Info */
    .ai-current-lang {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: var(--ai-gradient);
        border-radius: 8px;
        margin-bottom: 16px;
    }

    .ai-current-lang-header {
        display: flex;
        align-items: center;
        gap: 16px;
        width: 100%;
        justify-content: space-between;
    }

    .ai-current-lang-name {
        font-size: 15px;
        font-weight: 600;
        color: var(--dt-on-color);
    }

    .ai-current-lang-voice {
        font-size: 13px;
        color: var(--dt-muted);
        padding: 4px 12px;
        background: var(--dt-surface-2);
        border-radius: 20px;
    }

    .ai-current-lang-voice.has-voice {
        background: var(--dt-surface-2);
        color: var(--dt-muted);
    }

    .ai-voice-filters {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid transparent;
    }

    .ai-voice-filters .ai-field {
        margin-bottom: 0;
        min-width: 150px;
    }

    .ai-field-search {
        flex: 1;
        min-width: 200px;
    }

    .ai-search-box {
        position: relative;
    }

    .ai-search-box i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ai-text3);
    }

    .ai-search-box input {
        padding-left: 38px;
    }

    .ai-voices-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
        max-height: 500px;
        overflow-y: auto;
        padding: 4px;
    }

    .ai-voices-loading,
    .ai-voices-empty {
        grid-column: 1/-1;
        text-align: center;
        padding: 60px 20px;
        color: var(--ai-text3);
    }

    .ai-voices-loading i,
    .ai-voices-empty i {
        font-size: 48px;
        opacity: .4;
        display: block;
        margin-bottom: 12px;
    }

    .ai-voice-card {
        background: var(--ai-bg2);
        border: 0;
        border-radius: var(--ai-radius);
        padding: 16px;
        cursor: pointer;
        transition: .2s;
        position: relative;
    }

    .ai-voice-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--ai-gradient);
        border-radius: var(--ai-radius) var(--ai-radius) 0 0;
        transform: scaleX(0);
        transition: .2s;
    }

    .ai-voice-card:hover {
        border-color: transparent;
        transform: translateY(-2px);
        box-shadow: none;
    }

    .ai-voice-card:hover::before {
        transform: scaleX(1);
    }

    .ai-voice-card.selected {
        border-color: transparent;
        background: var(--dt-active);
    }

    .ai-voice-card.selected::before {
        transform: scaleX(1);
    }

    .ai-voice-header {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 12px;
    }

    .ai-voice-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--ai-bg3);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: var(--ai-text3);
    }

    .ai-voice-info {
        flex: 1;
        min-width: 0;
    }

    .ai-voice-info h5 {
        font-size: 15px;
        font-weight: 600;
        margin: 0 0 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--ai-text);
    }

    .ai-voice-tags {
        display: flex;
        gap: 6px;
    }

    .ai-tag {
        padding: 2px 8px;
        background: var(--ai-bg3);
        border-radius: 4px;
        font-size: 11px;
        font-weight: 500;
        color: var(--ai-text2);
    }

    .ai-tag.male {
        background: rgba(59, 130, 246, .12);
        color: #3b82f6;
    }

    .ai-tag.female {
        background: rgba(236, 72, 153, .12);
        color: #ec4899;
    }

    /* Vista previa de voz: el play es un dUI.Player 'mini' (.dpl--mini, datalyse-player.css).
       .ai-voice-play solo queda como boton apagado de las voces sin preview_url. */
    .ai-voice-play {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: transparent;
        border: 0;
        color: var(--ai-text3);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        opacity: .5;
        cursor: not-allowed;
    }

    .ai-voice-header .dpl--mini,
    .ai-voice-card-mini .dpl--mini { flex-shrink: 0; }

    .ai-voice-desc {
        font-size: 13px;
        color: var(--ai-text3);
        line-height: 1.5;
        margin-bottom: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ai-voice-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ai-voice-price {
        font-size: 13px;
        color: var(--ai-accent);
        font-weight: 600;
    }

    .ai-badge {
        padding: 4px 10px;
        background: var(--ai-gradient);
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        color: #fff;
    }

    .ai-badge.blue {
        background: #3b82f6;
    }

    .ai-badge.orange {
        background: #f97316;
    }

    .ai-asr-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    @media (max-width: 768px) {
        .ai-asr-grid {
            grid-template-columns: 1fr;
        }
    }

    .ai-asr-card {
        background: var(--ai-bg2);
        border: 0;
        border-radius: var(--ai-radius);
        padding: 24px;
        text-align: center;
        cursor: pointer;
        transition: .2s;
    }

    .ai-asr-card:hover {
        border-color: transparent;
        transform: translateY(-2px);
    }

    .ai-asr-card.active {
        border-color: transparent;
        background: var(--dt-active);
    }

    .ai-asr-icon {
        font-size: 32px;
        margin-bottom: 12px;
    }

    .ai-asr-card h4 {
        font-size: 16px;
        font-weight: 600;
        margin: 0 0 8px;
        color: var(--ai-text);
    }

    .ai-asr-card p {
        font-size: 13px;
        color: var(--ai-text3);
        margin: 0 0 12px;
    }

    .ai-asr-price {
        display: inline-block;
        padding: 4px 12px;
        background: var(--dt-surface-2);
        border-radius: 20px;
        font-size: 13px;
        color: var(--ai-accent);
        font-weight: 600;
    }

    .ai-models-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 16px;
    }

    .ai-model-card {
        background: var(--ai-bg2);
        border: 0;
        border-radius: var(--ai-radius);
        padding: 20px;
        cursor: pointer;
        transition: .2s;
        position: relative;
    }

    .ai-model-card:hover {
        border-color: transparent;
        transform: translateY(-2px);
    }

    .ai-model-card.active {
        border-color: transparent;
        background: var(--dt-active);
        position: relative;
    }

    .ai-model-card.active::after {
        content: '✓';
        position: absolute;
        top: 10px;
        right: 10px;
        width: 24px;
        height: 24px;
        background: var(--ai-gradient);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: var(--dt-on-color);
    }

    .ai-model-icon {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .ai-model-card h4 {
        font-size: 15px;
        font-weight: 600;
        margin: 0 0 6px;
        color: var(--ai-text);
    }

    .ai-model-card p {
        font-size: 12px;
        color: var(--ai-text3);
        margin: 0 0 12px;
        line-height: 1.5;
    }

    .ai-model-price-wrap {
        position: relative;
        display: inline-block;
    }

    .ai-model-price {
        font-size: 13px;
        color: var(--ai-accent);
        font-weight: 600;
        cursor: help;
        border-bottom: 1px dashed transparent;
    }

    .ai-model-price-tooltip {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        background: var(--ai-text);
        color: var(--dt-on-color);
        padding: 12px 14px;
        border-radius: 8px;
        font-size: 12px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: .2s;
        z-index: 100;
        box-shadow: none;
    }

    .ai-model-price-tooltip::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: var(--ai-text);
    }

    .ai-model-price-wrap:hover .ai-model-price-tooltip {
        opacity: 1;
        visibility: visible;
    }

    .ai-tooltip-row {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 3px 0;
    }

    .ai-tooltip-row span:first-child {
        color: var(--ai-text3);
    }

    .ai-tooltip-row span:last-child {
        font-weight: 600;
    }

    .ai-tooltip-note {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid transparent;
        color: var(--ai-text3);
        font-size: 11px;
        text-align: center;
    }

    .ai-slider-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .ai-slider-value {
        padding: 4px 10px;
        background: var(--ai-gradient);
        border-radius: 6px;
        font-size: 13px;
        font-weight: 600;
        color: var(--dt-on-color);
    }

    .ai-slider {
        width: 100%;
        height: 8px;
        border-radius: 4px;
        background: var(--ai-bg3);
        appearance: none;
        cursor: pointer;
    }

    .ai-slider::-webkit-slider-thumb {
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--ai-gradient);
        box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb, 93, 135, 255), .4);
        cursor: pointer;
    }

    .ai-slider-presets {
        display: flex;
        gap: 8px;
        margin-top: 12px;
    }

    .ai-preset {
        flex: 1;
        padding: 8px;
        background: var(--ai-bg2);
        border: 0;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: .2s;
        color: var(--ai-text2);
    }

    .ai-preset:hover {
        border-color: transparent;
    }

    .ai-preset.active {
        background: var(--ai-accent);
        border-color: transparent;
        color: var(--dt-cta-fg);
    }

    .ai-messages-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .ai-message-item {
        display: flex;
        gap: 14px;
        align-items: flex-start;
    }

    .ai-message-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
    }

    .ai-message-icon.green {
        background: rgba(34, 197, 94, .12);
        color: #22c55e;
    }

    .ai-message-icon.yellow {
        background: rgba(234, 179, 8, .12);
        color: #eab308;
    }

    .ai-message-icon.blue {
        background: rgba(59, 130, 246, .12);
        color: #3b82f6;
    }

    .ai-message-icon.red {
        background: rgba(239, 68, 68, .12);
        color: #ef4444;
    }

    .ai-message-content {
        flex: 1;
    }

    .ai-message-content label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 6px;
        color: var(--ai-text);
    }

    .ai-message-content span {
        display: block;
        font-size: 12px;
        color: var(--ai-text3);
        margin-top: 6px;
    }

    .ai-tool-item {
        padding: 14px;
        background: var(--ai-bg2);
        border: 0;
        border-radius: 10px;
        margin-bottom: 10px;
    }

    .ai-tool-item:last-child {
        margin-bottom: 0;
    }

    .ai-tool-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    .ai-tool-label {
        font-size: 14px;
        font-weight: 500;
        flex: 1;
        color: var(--ai-text);
    }

    .ai-tool-params {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid transparent;
    }

    .ai-switch {
        position: relative;
        width: 44px;
        height: 24px;
        display: inline-block;
    }

    .ai-switch.sm {
        width: 36px;
        height: 20px;
    }

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

    .ai-switch-slider {
        position: absolute;
        cursor: pointer;
        inset: 0;
        background: var(--ai-bg3);
        border-radius: 24px;
        transition: .2s;
    }

    .ai-switch-slider::before {
        content: '';
        position: absolute;
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background: var(--dt-surface);
        border-radius: 50%;
        transition: .2s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    }

    .ai-switch.sm .ai-switch-slider::before {
        height: 14px;
        width: 14px;
    }

    .ai-switch input:checked + .ai-switch-slider {
        background: var(--ai-gradient);
    }

    .ai-switch input:checked + .ai-switch-slider::before {
        transform: translateX(20px);
    }

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

    .ai-embed-box {
        background: var(--ai-bg2);
        border-radius: var(--ai-radius);
        overflow: hidden;
        border: 0;
    }

    .ai-embed-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background: var(--ai-bg3);
        border-bottom: 1px solid transparent;
        font-size: 13px;
        font-weight: 500;
        color: var(--ai-text2);
    }

    .ai-embed-code {
        padding: 16px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 12px;
        line-height: 1.8;
        white-space: pre-wrap;
        word-break: break-all;
        margin: 0;
        color: var(--dt-text);
    }

    .ai-preview-container {
        min-height: 350px;
        background: var(--ai-bg3);
        border-radius: var(--ai-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .ai-preview-placeholder {
        text-align: center;
        color: var(--ai-text3);
    }

    .ai-preview-placeholder i {
        font-size: 48px;
        opacity: .4;
        display: block;
        margin-bottom: 12px;
    }

    .ai-preview-iframe {
        width: 100%;
        height: 665px;
        border: none;
    }

    /* Preview Modal */
    .ai-preview-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--dt-backdrop);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        backdrop-filter: blur(4px);
    }

    .ai-preview-modal {
        background: var(--ai-bg);
        border-radius: 16px;
        width: 100%;
        max-width: 500px;
        height: 85vh;
        max-height: 750px;
        display: flex;
        flex-direction: column;
        box-shadow: none;
        border: 0;
        overflow: hidden;
    }

    .ai-preview-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid transparent;
        flex-shrink: 0;
    }

    .ai-preview-modal-header h3 {
        margin: 0;
        font-size: 15px;
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--ai-text);
    }

    .ai-preview-modal-close {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: none;
        background: transparent;
        color: var(--ai-text3);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .ai-preview-modal-close:hover {
        background: var(--ai-bg3);
        color: var(--ai-text);
    }

    .ai-preview-modal-body {
        flex: 1;
        overflow: hidden;
    }

    .ai-preview-modal-iframe {
        width: 100%;
        height: 100%;
        border: none;
    }

    [data-bs-theme="dark"] .ai-preview-modal {
        background: var(--ai-bg);
        border-color: transparent;
        box-shadow: none;
    }

    [data-bs-theme="dark"] .ai-preview-modal-header {
        border-color: transparent;
    }

    [data-bs-theme="dark"] .ai-preview-modal-close:hover {
        background: var(--ai-bg3);
    }

    .ai-table {
        width: 100%;
        border-collapse: collapse;
    }

    .ai-table th,
    .ai-table td {
        padding: 12px 16px;
        text-align: left;
        border-bottom: 1px solid transparent;
    }

    .ai-table th {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--ai-text3);
        background: var(--ai-bg3);
    }

    .ai-table code {
        padding: 4px 8px;
        background: var(--ai-bg3);
        border-radius: 4px;
        font-size: 12px;
        color: var(--dt-text);
    }

    .ai-table-empty {
        text-align: center;
        padding: 40px 20px !important;
        color: var(--ai-text3);
    }

    .ai-table-empty i {
        font-size: 32px;
        opacity: .4;
        display: block;
        margin-bottom: 8px;
    }

    .ai-btn-group {
        display: flex;
        border: 0;
        border-radius: 8px;
        overflow: hidden;
    }

    .ai-btn-group input {
        display: none;
    }

    .ai-btn-group label {
        flex: 1;
        padding: 10px 16px;
        text-align: center;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        transition: .2s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        color: var(--ai-text2);
    }

    .ai-btn-group label:hover {
        background: var(--ai-bg3);
    }

    .ai-btn-group input:checked + label {
        background: var(--ai-accent);
        color: var(--dt-cta-fg);
    }

    .ai-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 24px;
        border-top: 1px solid transparent;
        background: var(--ai-bg2);
    }

    .ai-footer span {
        font-size: 13px;
        color: var(--ai-text3);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .ai-loading {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px;
    }

    .ai-spinner {
        width: 32px;
        height: 32px;
        border: 3px solid var(--ai-border);
        border-top-color: var(--ai-accent);
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    .d-none {
        display: none !important;
    }

    .ai-voices-grid::-webkit-scrollbar {
        width: 6px;
    }

    .ai-voices-grid::-webkit-scrollbar-track {
        background: var(--ai-bg3);
        border-radius: 3px;
    }

    .ai-voices-grid::-webkit-scrollbar-thumb {
        background: var(--ai-border);
        border-radius: 3px;
    }

    .ai-voices-grid::-webkit-scrollbar-thumb:hover {
        background: var(--ai-text3);
    }

    .ai-lang-list::-webkit-scrollbar {
        width: 6px;
    }

    .ai-lang-list::-webkit-scrollbar-track {
        background: var(--ai-bg2);
        border-radius: 3px;
    }

    .ai-lang-list::-webkit-scrollbar-thumb {
        background: var(--ai-border);
        border-radius: 3px;
    }

    /* Widget Color Picker */
    .ai-color-picker {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .ai-color-option {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        cursor: pointer;
        position: relative;
        transition: .2s;
        border: 3px solid transparent;
    }

    .ai-color-option span {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 7px;
    }

    .ai-color-option:hover {
        transform: scale(1.1);
    }

    .ai-color-option.selected {
        border-color: var(--ai-text);
    }

    .ai-color-option.selected::after {
        content: '✓';
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    }

    /* Widget Position Picker */
    .ai-position-picker {
        background: var(--ai-bg2);
        border-radius: var(--ai-radius);
        padding: 12px;
    }

    .ai-position-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .ai-position-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 12px 8px;
        background: var(--ai-bg);
        border: 0;
        border-radius: 8px;
        cursor: pointer;
        transition: .2s;
    }

    .ai-position-option i {
        font-size: 20px;
        color: var(--ai-text2);
    }

    .ai-position-option:hover {
        border-color: transparent;
    }

    .ai-position-option.selected {
        border-color: transparent;
        background: var(--dt-active);
    }

    .ai-position-option.selected i {
        color: var(--ai-accent);
    }

    /* Chat Mode Picker */
    .ai-chat-mode-picker {
        display: flex;
        gap: 10px;
    }

    .ai-mode-option {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 16px 12px;
        background: var(--ai-bg2);
        border: 0;
        border-radius: var(--ai-radius);
        cursor: pointer;
        transition: .2s;
    }

    .ai-mode-option i {
        font-size: 24px;
        color: var(--ai-text2);
    }

    .ai-mode-option span {
        font-size: 12px;
        font-weight: 600;
        color: var(--ai-text2);
    }

    .ai-mode-option:hover {
        border-color: transparent;
    }

    .ai-mode-option.selected {
        border-color: transparent;
        background: var(--dt-active);
    }

    .ai-mode-option.selected i,
    .ai-mode-option.selected span {
        color: var(--ai-accent);
    }

    /* Size Picker */
    .ai-size-picker {
        display: flex;
        gap: 10px;
    }

    .ai-size-option {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 16px 12px;
        background: var(--ai-bg2);
        border: 0;
        border-radius: var(--ai-radius);
        cursor: pointer;
        transition: .2s;
    }

    .ai-size-icon {
        width: 40px;
        height: 30px;
        background: var(--ai-bg3);
        border: 0;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ai-size-icon i {
        font-size: 14px;
        color: var(--ai-text3);
    }

    .ai-size-option span {
        font-size: 12px;
        font-weight: 600;
        color: var(--ai-text2);
    }

    .ai-size-option:hover {
        border-color: transparent;
    }

    .ai-size-option.selected {
        border-color: transparent;
        background: var(--dt-active);
    }

    .ai-size-option.selected .ai-size-icon {
        border-color: transparent;
        background: var(--dt-active);
    }

    .ai-size-option.selected .ai-size-icon i {
        color: var(--ai-accent);
    }

    .ai-size-option.selected span {
        color: var(--ai-accent);
    }

    /* Welcome Messages */
    .ai-welcome-messages {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .ai-welcome-empty {
        text-align: center;
        padding: 30px 20px;
        color: var(--ai-text3);
    }

    .ai-welcome-empty i {
        font-size: 32px;
        opacity: .4;
        display: block;
        margin-bottom: 8px;
    }

    .ai-welcome-item {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 14px;
        background: var(--ai-bg2);
        border-radius: var(--ai-radius);
    }

    .ai-welcome-lang {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 600;
        color: var(--ai-text);
    }

    .ai-welcome-flag {
        font-size: 18px;
    }

    .ai-welcome-input {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }

    /* Per-Language Messages Section */
    .ai-lang-messages-section {
        margin-top: 24px;
        padding-top: 24px;
        border-top: 2px solid transparent;
    }

    .ai-lang-messages-header {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 20px;
    }

    .ai-lang-messages-header h3 {
        font-size: 16px;
        font-weight: 600;
        margin: 0 0 4px;
        color: var(--ai-text);
    }

    .ai-lang-messages-header p {
        font-size: 13px;
        color: var(--ai-text3);
        margin: 0;
    }

    .ai-lang-messages-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    @media (max-width: 768px) {
        .ai-lang-messages-grid {
            grid-template-columns: 1fr;
        }
    }

    .ai-lang-message-item {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        padding: 16px;
        background: var(--ai-bg2);
        border: 0;
        border-radius: var(--ai-radius);
        transition: .2s;
    }

    .ai-lang-message-item:hover {
        border-color: transparent;
    }

    .ai-lang-msg-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
    }

    .ai-lang-msg-icon.green {
        background: rgba(34, 197, 94, .12);
        color: #22c55e;
    }

    .ai-lang-msg-icon.yellow {
        background: rgba(234, 179, 8, .12);
        color: #eab308;
    }

    .ai-lang-msg-icon.blue {
        background: rgba(59, 130, 246, .12);
        color: #3b82f6;
    }

    .ai-lang-msg-icon.red {
        background: rgba(239, 68, 68, .12);
        color: #ef4444;
    }

    .ai-lang-msg-content {
        flex: 1;
        min-width: 0;
    }

    .ai-lang-msg-content label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 6px;
        color: var(--ai-text);
    }

    .ai-lang-msg-content input {
        width: 100%;
        padding: 10px 12px;
        background: var(--ai-bg);
        border: 0;
        border-radius: 6px;
        color: var(--ai-text);
        font-size: 13px;
        transition: .2s;
    }

    .ai-lang-msg-content input:focus {
        outline: none;
        border-color: transparent;
        box-shadow: none; background: var(--dt-active);
    }

    .ai-lang-msg-content input::placeholder {
        color: var(--ai-text3);
    }

    .ai-lang-msg-content span {
        display: block;
        font-size: 11px;
        color: var(--ai-text3);
        margin-top: 6px;
    }

    .ai-tool-params {
        display: none !important;
    }

    /* Custom Tools Styles */
    .ai-ctool-param {
        margin-bottom: 10px;
        padding: 12px;
        background: var(--ai-bg2);
        border: 0;
        border-radius: 8px;
    }

    .ai-ctool-param-row {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
    }

    .ai-ctool-param-row .ai-input {
        flex: 1;
        min-width: 100px;
        padding: 8px 10px;
        font-size: 13px;
    }

    .ai-ctool-param-row .ai-select {
        width: 100px;
        padding: 8px 10px;
        font-size: 13px;
    }

    .ai-ctool-param-row .ai-switch {
        flex-shrink: 0;
    }

    .ai-ctool-param-del {
        flex-shrink: 0;
    }

    #ctool-params-list:empty::before {
        content: 'No parameters defined';
        display: block;
        padding: 16px;
        text-align: center;
        color: var(--ai-text3);
        font-size: 13px;
        background: var(--ai-bg2);
        border-radius: 8px;
        border: 1px dashed transparent;
    }

    /* RAG Knowledge Upload Styles */
    .ai-rag-upload-zone {
        border: 2px dashed transparent;
        border-radius: var(--ai-radius);
        padding: 40px 20px;
        text-align: center;
        cursor: pointer;
        transition: .2s;
    }

    .ai-rag-upload-zone:hover,
    .ai-rag-upload-zone.dragover {
        border-color: transparent;
        background: var(--dt-hover);
    }

    .ai-rag-upload-zone i {
        font-size: 48px;
        color: var(--ai-accent);
        opacity: .6;
        margin-bottom: 12px;
        display: block;
    }

    .ai-rag-upload-zone p {
        margin: 0 0 8px;
        color: var(--ai-text);
    }

    .ai-rag-upload-zone p span {
        color: var(--ai-accent);
        text-decoration: underline;
    }

    .ai-rag-upload-zone small {
        color: var(--ai-text3);
        font-size: 12px;
    }

    .ai-rag-queue {
        margin-top: 20px;
        padding: 16px;
        background: var(--ai-bg2);
        border-radius: var(--ai-radius);
    }

    .ai-rag-queue-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        font-size: 13px;
        font-weight: 600;
        color: var(--ai-text2);
    }

    .ai-btn-text {
        background: none;
        border: none;
        color: var(--ai-accent);
        cursor: pointer;
        font-size: 12px;
    }

    .ai-rag-queue-list {
        max-height: 200px;
        overflow-y: auto;
        margin-bottom: 12px;
    }

    .ai-rag-queue-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        background: var(--ai-bg);
        border-radius: 8px;
        margin-bottom: 8px;
    }

    .ai-rag-queue-item i {
        font-size: 20px;
        color: var(--ai-accent);
    }

    .ai-rag-queue-item span {
        flex: 1;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ai-rag-queue-item small {
        color: var(--ai-text3);
        font-size: 11px;
    }

    .ai-rag-queue-item button {
        width: 24px;
        height: 24px;
        border: none;
        background: transparent;
        color: var(--ai-text3);
        cursor: pointer;
        border-radius: 4px;
    }

    .ai-rag-queue-item button:hover {
        background: rgba(239, 68, 68, .1);
        color: #ef4444;
    }

    .ai-btn-block {
        width: 100%;
    }

    .ai-rag-progress {
        margin-top: 16px;
    }

    .ai-rag-progress-bar {
        height: 8px;
        background: var(--ai-bg3);
        border-radius: 4px;
        overflow: hidden;
    }

    .ai-rag-progress-fill {
        height: 100%;
        background: var(--ai-gradient);
        width: 0;
        transition: width .3s;
    }

    .ai-rag-progress span {
        display: block;
        text-align: center;
        font-size: 12px;
        color: var(--ai-text3);
        margin-top: 8px;
    }

    .ai-rag-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .ai-rag-stat {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        background: var(--ai-bg2);
        border-radius: var(--ai-radius);
    }

    .ai-rag-stat-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }

    .ai-rag-stat-icon.blue {
        background: rgba(59, 130, 246, .12);
        color: #3b82f6;
    }

    .ai-rag-stat-icon.green {
        background: rgba(34, 197, 94, .12);
        color: #22c55e;
    }

    .ai-rag-stat-icon.orange {
        background: rgba(249, 115, 22, .12);
        color: #f97316;
    }

    .ai-rag-stat-icon.purple {
        background: rgba(var(--bs-primary-rgb, 93, 135, 255), .12);
        color: #5d87ff;
    }

    .ai-rag-stat-value {
        display: block;
        font-size: 18px;
        font-weight: 700;
        color: var(--ai-text);
    }

    .ai-rag-stat-label {
        font-size: 12px;
        color: var(--ai-text3);
    }

    .ai-rag-files {
        max-height: 400px;
        overflow-y: auto;
    }

    .ai-rag-empty {
        text-align: center;
        padding: 40px;
        color: var(--ai-text3);
    }

    .ai-rag-empty i {
        font-size: 48px;
        opacity: .4;
        display: block;
        margin-bottom: 12px;
    }

    .ai-rag-file {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        background: var(--ai-bg2);
        border-radius: var(--ai-radius);
        margin-bottom: 10px;
        transition: .2s;
    }

    .ai-rag-file:hover {
        background: var(--ai-bg3);
    }

    .ai-rag-file-icon {
        width: 44px;
        height: 44px;
        background: var(--dt-surface-2);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ai-rag-file-icon i {
        font-size: 22px;
        color: var(--ai-accent);
    }

    .ai-rag-file-info {
        flex: 1;
        min-width: 0;
    }

    .ai-rag-file-info span {
        display: block;
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ai-rag-file-info small {
        color: var(--ai-text3);
        font-size: 12px;
    }

    .ai-rag-file-actions {
        display: flex;
        gap: 6px;
    }

    .ai-rag-modal {
        position: fixed;
        inset: 0;
        background: var(--dt-backdrop);
        backdrop-filter: blur(4px);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .ai-rag-modal-content {
        background: var(--ai-bg);
        border-radius: var(--ai-radius-lg);
        width: 100%;
        max-width: 700px;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        box-shadow: none;
    }

    .ai-rag-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid transparent;
    }

    .ai-rag-modal-header h4 {
        margin: 0;
        font-size: 16px;
    }

    .ai-rag-modal-close {
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        cursor: pointer;
        border-radius: 8px;
        color: var(--ai-text3);
    }

    .ai-rag-modal-close:hover {
        background: var(--ai-bg3);
        color: var(--ai-text);
    }

    .ai-rag-modal-body {
        flex: 1;
        overflow: auto;
        padding: 20px;
        margin: 0;
        font-size: 13px;
        line-height: 1.6;
        white-space: pre-wrap;
        font-family: 'JetBrains Mono', monospace;
        background: var(--ai-bg2);
    }

    @media (max-width: 768px) {
        .ai-header-main {
            flex-direction: column;
            align-items: flex-start;
        }

        .ai-header-actions {
            width: 100%;
        }

        .ai-header-actions .ai-btn {
            flex: 1;
        }

        .ai-tab span {
            display: none;
        }

        .ai-tab {
            padding: 14px;
        }

        .ai-footer {
            flex-direction: column;
            gap: 12px;
        }

        .ai-chat-mode-picker,
        .ai-size-picker {
            flex-direction: column;
        }
    }

    /* Collapsible tool sections */
    .ai-tools-section { padding:0 20px; }
    .ai-tools-section-body { display:none; padding-bottom:16px; }
    .ai-tools-section.open .ai-tools-section-body { display:block; }
    .ai-tools-section.open .ai-tools-chevron { transform:rotate(180deg); }
    .ai-tools-section-header { cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-top: 1px solid transparent; user-select:none; }
    .ai-tools-section-header h4 { font-size:14px; font-weight:600; color: var(--ai-text); display:flex; align-items:center; gap:8px; margin:0; }
    .ai-tools-section-header .ai-badge { font-size:11px; padding:2px 8px; border-radius:10px; background:var(--ai-border); color:var(--ai-text2); font-weight:500; }
    .ai-tools-chevron { color: var(--ai-text2); transition: transform 0.2s ease; font-size:18px; }

    /* Form modals (Redirects / Custom Tools) */
    .ai-form-modal-overlay {
        position:fixed; top:0; left:0; right:0; bottom:0;
        background: var(--dt-backdrop); backdrop-filter:blur(4px);
        z-index:10000; display:flex; align-items:center; justify-content:center; padding:24px;
    }
    .ai-form-modal {
        background: var(--ai-bg); border-radius:16px; width:100%; max-width:520px;
        max-height:85vh; display:flex; flex-direction:column;
        box-shadow: none; border: 0;
        animation: dui-legacy-modules-aiagentsedit-aiModalIn 0.2s ease;
    }
    @keyframes dui-legacy-modules-aiagentsedit-aiModalIn { from { opacity:0; transform:translateY(12px) scale(0.97); } to { opacity:1; transform:translateY(0) scale(1); } }
    .ai-form-modal-header {
        display:flex; align-items:center; justify-content:space-between;
        padding:18px 22px; border-bottom: 1px solid transparent; flex-shrink:0;
    }
    .ai-form-modal-header h3 { margin:0; font-size:15px; display:flex; align-items:center; gap:8px; color: var(--ai-text); }
    .ai-form-modal-body { padding:22px; overflow-y:auto; flex:1; }
    .ai-form-modal-footer {
        display:flex; justify-content:flex-end; gap:10px;
        padding:16px 22px; border-top: 1px solid transparent; flex-shrink:0;
    }
    [data-bs-theme="dark"] .ai-form-modal { background: var(--ai-bg); border-color: transparent; box-shadow: none; }
    [data-bs-theme="dark"] .ai-form-modal-header, [data-bs-theme="dark"] .ai-form-modal-footer { border-color: transparent; }

    /* Unsaved changes floating bar */
    .ai-unsaved-bar {
        position: sticky;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        max-width: 420px;
        width: calc(100% - 48px);
        margin: 16px auto 0;
        padding: 12px 20px;
        background: var(--dt-surface-2);
        color: var(--dt-text);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        box-shadow: none;
        z-index: 100;
        animation: dui-legacy-modules-aiagentsedit-slideUp .3s ease;
    }
    @keyframes dui-legacy-modules-aiagentsedit-slideUp {
        from { opacity:0; transform:translateX(-50%) translateY(20px); }
        to { opacity:1; transform:translateX(-50%) translateY(0); }
    }
    .ai-unsaved-bar span {
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
    }
    .ai-unsaved-actions {
        display: flex;
        gap: 8px;
    }
    .ai-unsaved-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: .2s;
        white-space: nowrap;
    }
    .ai-unsaved-btn.discard {
        background: var(--dt-surface);
        color: var(--dt-text);
    }
    .ai-unsaved-btn.discard:hover {
        background: var(--dt-hover);
    }
    .ai-unsaved-btn.save {
        background: var(--ai-accent);
        color: var(--dt-cta-fg);
    }
    .ai-unsaved-btn.save:hover {
        filter: brightness(1.1);
    }
    [data-bs-theme="dark"] .ai-unsaved-bar {
        background: var(--dt-surface-2);
        box-shadow: none;
    }

/* ═══════════ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══════════
   Bloque añadido al final: solo color, borde, sombra, radio y peso; ningún id/clase que lea el JS cambia. */
    /* ═══════════ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══════════
       Bloque añadido al final del <style> del módulo: solo color, borde, sombra, radio, espaciado y peso. Ningún id, clase ni
       atributo que lea el JS cambia (.active en pestañas/presets/ASR/LLM, .selected en voces y pickers, .open, .has-voice,
       .dragover, .playing, data-target, data-locale, .d-none). Los tokens --ai-* de la cabecera (y su copia oscura) ya apuntan a
       --dt-* de datalyse-modern.css, así que cada `background: var(--ai-gradient)` / `var(--ai-accent)` ya es tinta plana y los
       estilos inline que escribe el JS (bloques por idioma, voces mini) cambian solos; aquí se vacían los restos: rgba(var(--bs-primary-rgb))
       del bloque oscuro, hex de Tailwind, sombras, saltos al pasar y cuadrados de color. Todo cuelga de .ai-agent-editor y va DESPUÉS
       de las reglas [data-bs-theme="dark"] .x (misma especificidad): gana por orden. datalyse-modern.css ya fuerza con !important
       .ai-btn-primary / .ai-prompt-magic-btn.active (tinta, border 0, sin sombra), el panel del generador, su caja de carga y los
       spinners: aquí solo se quita el salto, se da hover y se pone gris donde aquel deja color (los únicos !important de este bloque).
       Referencia: modules/control-phonenumbers.html (.pn-btn, .pn-tabs, .pn-status-badge) y modules/aiagents.html (.aag). */

    /* ── Migas y cabecera: fuera el banner degradado; título 20/600 sobre línea fina, avatar en cuadrado neutro ── */
    .ai-agent-editor { color: var(--dt-text); }
    .ai-agent-editor .ai-page-header { margin-bottom: 20px; }
    .ai-agent-editor .ai-breadcrumb { font-size: 12.5px; color: var(--dt-faint); margin-bottom: 14px; }
    .ai-agent-editor .ai-breadcrumb a { color: var(--dt-muted); }
    .ai-agent-editor .ai-breadcrumb a:hover { color: var(--dt-text); }
    .ai-agent-editor .ai-breadcrumb #akititagent { color: var(--dt-text); font-weight: 500; }
    .ai-agent-editor .sb-section-trigger-icon { background: var(--dt-surface-2); color: var(--dt-muted); border: 0; }
    .ai-agent-editor .ai-header-main {
        padding: 2px 0 18px; gap: 14px;
        background: transparent; border-radius: 0; box-shadow: none; border-bottom: 1px solid transparent;
    }
    .ai-agent-editor .ai-agent-avatar {
        width: 40px; height: 40px; border-radius: 10px; font-size: 20px; backdrop-filter: none;
        background: var(--dt-surface-2); color: var(--dt-muted); border: 1px solid var(--dt-border);
    }
    .ai-agent-editor .ai-header-info h1 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; color: var(--dt-text); margin-bottom: 2px; }
    .ai-agent-editor .ai-header-info p { color: var(--dt-muted); }
    .ai-agent-editor .ai-header-actions { gap: 8px; }
    .ai-agent-editor[data-agent-state]:not([data-agent-state="ready"]) [data-studio-needs-agent] { display: none; }
    .ai-agent-editor .ai-studio-agent-title-accessible {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
    }
    .ai-agent-editor .ai-header-left { flex: 1 1 480px; min-width: 0; align-items: flex-start; }
    .ai-agent-editor .ai-header-info { flex: 1; min-width: 0; }
    .ai-agent-editor .ai-studio-agent-picker {
        display: grid; gap: 7px; width: min(100%, 580px);
        color: var(--dt-muted); font-size: 12px;
    }
    .ai-agent-editor .ai-studio-agent-picker > label { font-size: 12px; font-weight: 500; margin: 0; }
    .ai-agent-editor .ai-studio-agent-picker-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .ai-agent-editor .ai-studio-agent-select { flex: 1; min-width: 0; }
    .ai-agent-editor .ai-studio-agent-select .dui-select__trigger,
    .ai-agent-editor .ai-studio-agent-picker select:not(.dui-select-native) {
        box-sizing: border-box; min-height: 52px !important; height: auto !important; width: 100%; min-width: 0; padding: 10px 14px;
        border: 0; border-radius: var(--dt-radius);
        background: var(--dt-surface); color: var(--dt-text);
        font-size: clamp(17px, 1.6vw, 22px); font-weight: 500; box-shadow: none;
    }
    .ai-agent-editor .ai-studio-agent-select .dui-select__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .ai-agent-editor .ai-studio-agent-select .dui-select__arrow { width: 18px; height: 18px; flex-shrink: 0; color: var(--dt-text); opacity: 1; }
    .ai-agent-editor #aiStudioCreateAgent { flex-shrink: 0; min-height: 40px; }
    .ai-agent-editor #aiStudioAgentPickerHint { font-size: 11px; line-height: 1.4; }
    .ai-agent-editor #elStudioHeaderSub { margin-top: 8px; font-size: 11px; }
    .ai-agent-editor .ai-studio-agent-select .dui-select__trigger:focus-visible,
    .ai-agent-editor .ai-studio-agent-picker select:focus-visible { outline: none; border-color: transparent !important; background: var(--dt-active);
    }
    .ai-studio-agent-select-menu { border: 0; background: var(--dt-surface); box-shadow: none; }
    @media (max-width: 560px) {
        .ai-agent-editor .ai-header-left { gap: 10px; }
        .ai-agent-editor .ai-studio-agent-picker-row { flex-wrap: wrap; }
        .ai-agent-editor .ai-studio-agent-select { flex-basis: 100%; }
    }
    .ai-agent-editor .ai-studio-agent-status {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--dt-border);
        border-radius: var(--dt-radius); background: var(--dt-surface); color: var(--dt-muted);
    }
    .ai-agent-editor .ai-studio-agent-status p { margin: 0; }
    .ai-agent-editor .ai-studio-agent-status[hidden], .ai-agent-editor .ai-studio-agent-status button[hidden] { display: none; }
    @media (forced-colors: active) {
        .ai-agent-editor .ai-studio-agent-select .dui-select__trigger:focus-visible,
        .ai-agent-editor .ai-studio-agent-picker select:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
    }

    /* ── Botones ghost 34 px (como .pn-btn); el CTA en tinta lo pone ya datalyse-modern.css (!important): aquí hover sin salto ── */
    .ai-agent-editor .ai-btn {
        min-height: 34px; padding: 0 13px; gap: 7px; border-radius: 8px; font-size: 13px; font-weight: 600;
        border: 0; background: transparent; color: var(--dt-text);
        transition: background-color .12s, border-color .12s, color .12s;
    }
    .ai-agent-editor .ai-btn i { font-size: 16px; line-height: 1; }
    .ai-agent-editor .ai-btn:hover { background: var(--dt-hover); }
    .ai-agent-editor .ai-btn:disabled { opacity: .5; cursor: default; }
    .ai-agent-editor .ai-btn-sm { min-height: 30px; padding: 0 11px; font-size: 12.5px; }
    .ai-agent-editor .ai-btn-sm i { font-size: 15px; }
    .ai-agent-editor .ai-btn-primary:hover { transform: none; box-shadow: none; background: var(--dt-cta-hover) !important; }
    .ai-agent-editor .ai-btn-primary:disabled { opacity: .45; }
    .ai-agent-editor .ai-btn-glass { background: var(--dt-surface-2); backdrop-filter: none; color: var(--dt-text); border-color: transparent; }
    .ai-agent-editor .ai-btn-glass:hover { background: var(--dt-hover); color: var(--dt-text); }
    /* un solo CTA por vista (Save de la cabecera): el Save duplicado del pie, el «Select voice» pequeño de cada idioma y
       «Open Live Preview» (la cabecera ya tiene Preview) bajan a ghost */
    .ai-agent-editor .ai-footer .ai-btn-primary,
    .ai-agent-editor .ai-btn-sm.ai-btn-primary,
    .ai-agent-editor #openPreviewModalBtn { background: transparent !important; color: var(--dt-text) !important; border: 0 !important; }
    .ai-agent-editor .ai-footer .ai-btn-primary:hover,
    .ai-agent-editor .ai-btn-sm.ai-btn-primary:hover,
    .ai-agent-editor #openPreviewModalBtn:hover { background: var(--dt-hover) !important; }
    .ai-agent-editor .ai-btn-icon {
        width: 30px; height: 30px; border-radius: 7px;
        background: transparent; border: 0; color: var(--dt-muted);
        transition: background-color .12s, border-color .12s, color .12s;
    }
    .ai-agent-editor .ai-table .ai-btn-icon + .ai-btn-icon { margin-left: 4px; }
    .ai-agent-editor .ai-btn-icon:hover { background: var(--dt-hover); border-color: transparent; color: var(--dt-text); }
    .ai-agent-editor .ai-btn-icon.red:hover { background: var(--dt-hover); border-color: var(--dt-border-strong); color: var(--dt-danger); }
    .ai-agent-editor .ai-btn-text { color: var(--dt-muted); font-weight: 600; }
    .ai-agent-editor .ai-btn-text:hover { color: var(--dt-text); text-decoration: underline; }

    /* ── Contenedor y pestañas: una superficie, línea fina; pestañas subrayadas 2 px en tinta (sin franja gris) ── */
    .ai-agent-editor .ai-main-container { background: var(--dt-surface); border-color: transparent; border-radius: 12px; box-shadow: none; }
    .ai-agent-editor .ai-tabs { background: transparent; border-bottom-color: transparent; padding: 0 20px; gap: 22px; }
    .ai-agent-editor .ai-tab { height: 44px; padding: 0 2px; gap: 7px; font-size: 13px; font-weight: 600; color: var(--dt-muted); transition: color .13s; }
    .ai-agent-editor .ai-tab i { font-size: 16px; color: var(--dt-faint); }
    .ai-agent-editor .ai-tab:hover { color: var(--dt-text); }
    .ai-agent-editor .ai-tab:hover i { color: var(--dt-muted); }
    .ai-agent-editor .ai-tab.active { color: var(--dt-text); }
    .ai-agent-editor .ai-tab.active i { color: var(--dt-text); }
    .ai-agent-editor .ai-tab.active::after { left: 0; right: 0; height: 2px; background: var(--dt-text); border-radius: 0; }
    .ai-agent-editor .ai-tab-panels { padding: 22px 20px 24px; }
    .ai-agent-editor .ai-grid-2 { gap: 16px; }

    /* ── Tarjetas: línea fina, sin brillo al pasar; cabecera 14/600; icono en cuadrado neutro (gana a .purple/.blue/.green/.orange
       y a sus variantes oscuras por especificidad igual + orden) ── */
    .ai-agent-editor .ai-card { background: var(--dt-surface); border-color: transparent; border-radius: 12px; margin-bottom: 16px; transition: none; }
    .ai-agent-editor .ai-card:hover { border-color: transparent; box-shadow: none; }
    .ai-agent-editor .ai-card-header { align-items: center; gap: 12px; padding: 14px 18px; border-bottom-color: transparent; }
    .ai-agent-editor .ai-card-header h3 { font-size: 14px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 1px; }
    .ai-agent-editor .ai-card-header p { font-size: 12.5px; color: var(--dt-muted); }
    .ai-agent-editor .ai-card-body { padding: 18px; }
    .ai-agent-editor .ai-card-body-table { padding: 0; }
    .ai-agent-editor :is(.ai-card-header .ai-card-icon, .ai-rag-stat .ai-rag-stat-icon, .ai-rag-file .ai-rag-file-icon,
                         .ai-message-item .ai-message-icon, .ai-lang-message-item .ai-lang-msg-icon) {
        width: 30px; height: 30px; border-radius: 8px; font-size: 15px;
        background: var(--dt-surface-2); color: var(--dt-muted); border: 0;
    }
    .ai-agent-editor .ai-rag-file .ai-rag-file-icon i { font-size: 15px; color: var(--dt-muted); }

    /* ── Campos: etiqueta 12/600 gris, controles 34 px con línea fina fuerte, foco = borde tinta + anillo fino (sin azul) ── */
    .ai-agent-editor .ai-field { margin-bottom: 14px; }
    .ai-agent-editor .ai-field > label { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--dt-muted); margin-bottom: 6px; }
    .ai-agent-editor :is(.ai-input, .ai-select, .ai-textarea, .ai-lang-trigger, .ai-lang-msg-content input) {
        background: var(--dt-surface); border: 0; border-radius: 8px; color: var(--dt-text); font-size: 13px;
        transition: border-color .12s, box-shadow .12s;
    }
    .ai-agent-editor :is(.ai-input, .ai-select, .ai-lang-trigger) { height: 34px; padding: 0 12px; }
    .ai-agent-editor textarea.ai-input { height: auto; padding: 8px 12px; }
    .ai-agent-editor .ai-textarea { padding: 9px 12px; }
    .ai-agent-editor :is(.ai-input, .ai-select, .ai-textarea, .ai-lang-msg-content input):focus { border-color: transparent; box-shadow: none; background: var(--dt-active);
    }
    .ai-agent-editor :is(.ai-input, .ai-textarea, .ai-lang-msg-content input)::placeholder { color: var(--dt-faint); }
    .ai-agent-editor .ai-field-footer { color: var(--dt-faint); }
    .ai-agent-editor .ai-field-check input { accent-color: var(--dt-cta); }
    .ai-agent-editor .ai-field-check label { font-size: 13px; color: var(--dt-text); }
    .ai-agent-editor code { padding: 1px 5px; border-radius: 4px; font-size: 12px; background: var(--dt-surface-2); color: var(--dt-text); }

    /* ── Idiomas: desplegable como una caja con el disparador (borde tinta al abrir), opciones con hover gris, casilla en tinta;
       chips redondos con línea fina (activo = tinta), voz en pastilla gris, quitar = gris → tinta ── */
    .ai-agent-editor .ai-lang-trigger:hover { border-color: transparent; }
    .ai-agent-editor .ai-lang-dropdown.open .ai-lang-trigger { border-color: transparent; box-shadow: none; }
    .ai-agent-editor .ai-lang-placeholder { font-size: 13px; color: var(--dt-muted); }
    .ai-agent-editor .ai-lang-trigger i { color: var(--dt-faint); }
    .ai-agent-editor .ai-lang-menu { background: var(--dt-overlay); border: 0; border-top: none; box-shadow: none; }
    .ai-agent-editor .ai-lang-search { border-bottom-color: transparent; }
    .ai-agent-editor .ai-lang-search input { font-size: 13px; }
    .ai-agent-editor .ai-lang-search i { color: var(--dt-faint); }
    .ai-agent-editor .ai-lang-option { padding: 8px 10px; }
    .ai-agent-editor .ai-lang-option:hover { background: var(--dt-hover); }
    .ai-agent-editor .ai-lang-option.selected { background: var(--dt-active); }
    .ai-agent-editor .ai-lang-checkbox { width: 16px; height: 16px; border: 1px solid var(--dt-border-strong); border-radius: 4px; }
    .ai-agent-editor .ai-lang-checkbox i { font-size: 11px; color: var(--dt-cta-fg); }
    .ai-agent-editor .ai-lang-option.selected .ai-lang-checkbox { background: var(--dt-cta); border-color: var(--dt-cta); }
    .ai-agent-editor .ai-lang-label { font-size: 13px; }
    .ai-agent-editor .ai-lang-chips { gap: 8px; margin-bottom: 16px; }
    .ai-agent-editor .ai-lang-chip { min-height: 30px; padding: 0 5px 0 11px; gap: 7px; background: transparent; border: 1px solid transparent; border-radius: 999px; }
    .ai-agent-editor .ai-lang-chip:hover { border-color: transparent; background: var(--dt-hover); }
    .ai-agent-editor .ai-lang-chip.active { border-color: transparent; background: var(--dt-active); font-weight: 600; }
    .ai-agent-editor .ai-chip-name { font-size: 12.5px; }
    .ai-agent-editor .ai-chip-voice { padding: 1px 7px; border-radius: 999px; font-size: 11px; background: var(--dt-surface-2); color: var(--dt-muted); }
    .ai-agent-editor .ai-chip-remove { margin-left: 0; border-radius: 50%; color: var(--dt-faint); }
    .ai-agent-editor .ai-chip-remove:hover { background: var(--dt-active); color: var(--dt-text); }
    .ai-agent-editor .ai-voice-filters { border-bottom-color: transparent; }

    /* ── Voces (#voices-grid va dentro de un display:none; se deja coherente por si el JS lo muestra): tarjetas 1 px sin barra ni
       salto, selección = tinta, género en gris; la vista previa es un dUI.Player 'mini' (datalyse-player.css); el picker inline lo
       pintan los tokens --ai-* ── */
    .ai-agent-editor .ai-current-lang { background: var(--dt-surface-2); border: 0; }
    .ai-agent-editor .ai-current-lang-name { color: var(--dt-text); }
    .ai-agent-editor .ai-current-lang-voice, .ai-agent-editor .ai-current-lang-voice.has-voice { background: var(--dt-surface); color: var(--dt-muted); border: 0; }
    .ai-agent-editor .ai-voice-card { background: var(--dt-surface); border: 0; border-radius: 12px; }
    .ai-agent-editor .ai-voice-card::before { display: none; }
    .ai-agent-editor .ai-voice-card:hover { border-color: transparent; transform: none; box-shadow: none; }
    .ai-agent-editor .ai-voice-card.selected { border-color: transparent; background: var(--dt-surface-2); box-shadow: none; }
    .ai-agent-editor .ai-voice-avatar { background: var(--dt-surface-2); color: var(--dt-muted); border: 1px solid var(--dt-border); }
    .ai-agent-editor .ai-voice-info h5 { font-size: 14px; }
    .ai-agent-editor .ai-tag, .ai-agent-editor .ai-tag.male, .ai-agent-editor .ai-tag.female { background: var(--dt-surface-2); color: var(--dt-muted); border-radius: 999px; }
    .ai-agent-editor .ai-voice-play { background: transparent; color: var(--dt-faint); border: 0; }
    .ai-agent-editor .ai-voice-price { color: var(--dt-text); }

    /* ── Badges de tipo (url/script, api/webhook, contadores, «Selected»): pastilla gris 20 px, sin azul/naranja; precios en texto
       tinta con números tabulares ── */
    .ai-agent-editor .ai-badge, .ai-agent-editor .ai-badge.blue, .ai-agent-editor .ai-badge.orange, .ai-agent-editor .ai-badge.purple,
    .ai-agent-editor .ai-tools-section-header .ai-badge {
        display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
        font-size: 11px; font-weight: 600; background: var(--dt-surface-2); color: var(--dt-muted);
    }
    .ai-agent-editor .ai-asr-price { padding: 0; border-radius: 0; background: transparent; color: var(--dt-text); font-size: 13px; font-weight: 600; }
    .ai-agent-editor .ai-model-price { color: var(--dt-text); border-bottom-color: transparent; }

    /* ── Modelos ASR/LLM: 1 px, sin salto; activo = superficie piedra + sombra sutil + ✓ en tinta; emojis en gris; tooltip como capa con
       línea fina (sin flecha) ── */
    .ai-agent-editor .ai-asr-grid, .ai-agent-editor .ai-models-grid { gap: 12px; }
    .ai-agent-editor :is(.ai-asr-card, .ai-model-card) { background: var(--dt-surface); border: 0; border-radius: 12px; padding: 18px; transition: border-color .12s, background-color .12s; }
    .ai-agent-editor :is(.ai-asr-card, .ai-model-card):hover { border-color: transparent; transform: none; box-shadow: none; }
    .ai-agent-editor :is(.ai-asr-card, .ai-model-card).active { border-color: transparent; background: var(--dt-surface-2); box-shadow: none; }
    .ai-agent-editor .ai-asr-icon, .ai-agent-editor .ai-model-icon { font-size: 22px; margin-bottom: 10px; filter: grayscale(1); opacity: .75; }
    .ai-agent-editor .ai-asr-card h4, .ai-agent-editor .ai-model-card h4 { font-size: 14px; }
    .ai-agent-editor .ai-asr-card p, .ai-agent-editor .ai-model-card p { font-size: 12.5px; color: var(--dt-muted); }
    .ai-agent-editor .ai-model-card.active::after { width: 20px; height: 20px; font-size: 11px; background: var(--dt-cta); color: var(--dt-cta-fg); }
    .ai-agent-editor .ai-model-price-tooltip { background: var(--dt-overlay); color: var(--dt-text); border: 0; box-shadow: none; }
    .ai-agent-editor .ai-model-price-tooltip::after { display: none; }
    .ai-agent-editor .ai-tooltip-row span:first-child { color: var(--dt-muted); }
    .ai-agent-editor .ai-tooltip-note { border-top-color: transparent; color: var(--dt-faint); }

    /* ── Deslizador, presets e interruptores: pista gris fina, pulgar y encendido en tinta; valor en pastilla gris tabular ── */
    .ai-agent-editor .ai-slider-header { font-size: 13px; font-weight: 500; color: var(--dt-muted); }
    .ai-agent-editor .ai-slider-value { padding: 1px 8px; border-radius: 6px; font-size: 12px; background: var(--dt-surface-2); color: var(--dt-text); border: 0; }
    .ai-agent-editor .ai-slider { height: 4px; border-radius: 2px; background: var(--dt-border-strong); }
    .ai-agent-editor .ai-slider::-webkit-slider-thumb { width: 16px; height: 16px; background: var(--dt-cta); border: 2px solid var(--dt-surface); box-shadow: none; }
    .ai-agent-editor .ai-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--dt-cta); border: 2px solid var(--dt-surface); }
    .ai-agent-editor .ai-preset { height: 30px; padding: 0 8px; border-radius: 7px; font-weight: 600; background: transparent; border: 0; color: var(--dt-text); }
    .ai-agent-editor .ai-preset:hover { background: var(--dt-hover); border-color: transparent; }
    .ai-agent-editor .ai-preset.active { background: var(--dt-cta); border-color: transparent; color: var(--dt-cta-fg); }
    .ai-agent-editor .ai-switch-slider { background: var(--dt-border-strong); }
    .ai-agent-editor .ai-switch-slider::before { background: var(--dt-surface); box-shadow: none; }
    :scope[data-bs-theme="dark"] .ai-agent-editor .ai-switch-slider::before { background: var(--dt-text); }
    .ai-agent-editor .ai-switch input:checked + .ai-switch-slider { background: var(--dt-cta); }
    .ai-agent-editor .ai-switch input:checked + .ai-switch-slider::before { background: var(--dt-cta-fg); }

    /* ── Herramientas: filas 1 px; secciones plegables con línea fina; tabla con cabecera gris 11/600; grupo de radios en tinta;
       pie transparente ── */
    .ai-agent-editor .ai-tool-item { padding: 12px 14px; margin-bottom: 8px; border-radius: 10px; background: var(--dt-surface); border-color: transparent; }
    .ai-agent-editor .ai-tool-label { font-size: 13px; }
    .ai-agent-editor .ai-tools-section-header { border-top-color: transparent; }
    .ai-agent-editor .ai-tools-section-header h4 { font-size: 13px; }
    .ai-agent-editor .ai-tools-section-header h4 i { color: var(--dt-muted); }
    .ai-agent-editor .ai-tools-chevron { font-size: 16px; color: var(--dt-faint); }
    .ai-agent-editor .ai-table th { padding: 8px 12px; font-size: 11px; letter-spacing: .05em; background: transparent; color: var(--dt-muted); border-bottom-color: transparent; }
    .ai-agent-editor .ai-table td { padding: 8px 12px; font-size: 13px; border-bottom-color: transparent; }
    .ai-agent-editor .ai-table code { color: var(--dt-text); background: var(--dt-surface-2); }
    .ai-agent-editor .ai-table-empty { color: var(--dt-faint); }
    .ai-agent-editor .ai-btn-group { border-color: transparent; border-radius: 8px; }
    .ai-agent-editor .ai-btn-group label { height: 32px; padding: 0 14px; margin: 0; font-size: 13px; font-weight: 600; color: var(--dt-muted); }
    .ai-agent-editor .ai-btn-group label:hover { background: var(--dt-hover); color: var(--dt-text); }
    .ai-agent-editor .ai-btn-group input:checked + label { background: var(--dt-cta); color: var(--dt-cta-fg); }
    .ai-agent-editor .ai-footer { padding: 14px 20px; background: transparent; border-top-color: transparent; }
    .ai-agent-editor .ai-footer span { font-size: 12.5px; color: var(--dt-faint); }

    /* ── Web Agent: caja de código gris con cabecera transparente; muestras de color con aro fino; posición/modo/tamaño =
       tarjetas 1 px, seleccionado en tinta (sin azul) ── */
    .ai-agent-editor .ai-embed-box { border-radius: 10px; background: var(--dt-surface-2); border-color: transparent; }
    .ai-agent-editor .ai-embed-header { padding: 8px 10px 8px 14px; background: transparent; border-bottom-color: transparent; color: var(--dt-muted); }
    .ai-agent-editor .ai-embed-code { font-size: 12px; color: var(--dt-text); }
    .ai-agent-editor .ai-preview-container { background: var(--dt-surface-2); border: 0; }
    .ai-agent-editor .ai-color-option { border-width: 2px; border-radius: 10px; }
    .ai-agent-editor .ai-color-option span { border-radius: 7px; border: 1px solid var(--dt-border-strong); }
    .ai-agent-editor .ai-color-option:hover { transform: none; border-color: var(--dt-border-strong); }
    .ai-agent-editor .ai-color-option.selected { border-color: var(--dt-border-strong); box-shadow: 0 2px 8px rgba(12, 10, 9, 0.12); }
    .ai-agent-editor .ai-position-picker { padding: 0; background: transparent; }
    .ai-agent-editor :is(.ai-position-option, .ai-mode-option, .ai-size-option) { background: var(--dt-surface); border: 0; border-radius: 10px; transition: border-color .12s, background-color .12s; }
    .ai-agent-editor :is(.ai-position-option, .ai-mode-option, .ai-size-option):hover { border-color: transparent; background: var(--dt-hover); }
    .ai-agent-editor :is(.ai-position-option, .ai-mode-option, .ai-size-option).selected { border-color: transparent; background: var(--dt-surface-2); box-shadow: none; }
    .ai-agent-editor :is(.ai-position-option, .ai-mode-option, .ai-size-option) :is(i, span) { color: var(--dt-muted); }
    .ai-agent-editor :is(.ai-position-option, .ai-mode-option, .ai-size-option).selected :is(i, span) { color: var(--dt-text); font-weight: 600; }
    .ai-agent-editor .ai-size-icon { border-radius: 5px; background: var(--dt-surface-2); border: 0; }
    .ai-agent-editor .ai-size-option.selected .ai-size-icon { background: var(--dt-surface); border-color: transparent; }
    .ai-agent-editor .ai-size-icon i, .ai-agent-editor .ai-size-option.selected .ai-size-icon i { color: var(--dt-text); }

    /* ── Bloques por idioma y parámetros de herramienta: cajas con línea fina; «No parameters» en trazo discontinuo ── */
    .ai-agent-editor .ai-welcome-item { border-radius: 10px; background: var(--dt-surface); border: 0; }
    .ai-agent-editor .ai-lang-message-item, .ai-agent-editor .ai-lang-message-item:hover { border-radius: 10px; background: var(--dt-surface); border-color: transparent; }
    .ai-agent-editor .ai-lang-messages-section { border-top: 1px solid transparent; }
    .ai-agent-editor .ai-ctool-param { border-radius: 8px; background: var(--dt-surface-2); border-color: transparent; }
    .ai-agent-editor #ctool-params-list:empty::before { background: transparent; border: 1px dashed transparent; color: var(--dt-faint); }

    /* ── Knowledge (RAG): zona de subida con trazo fino e icono en cuadrado neutro; cola, progreso, cifras y ficheros 1 px; barra
       de progreso en tinta; quitar/borrar = rojo solo en el icono ── */
    .ai-agent-editor .ai-rag-upload-zone { padding: 32px 20px; border: 1px dashed transparent; border-radius: 12px; }
    .ai-agent-editor .ai-rag-upload-zone:hover, .ai-agent-editor .ai-rag-upload-zone.dragover { border-color: transparent; background: var(--dt-hover); }
    .ai-agent-editor .ai-rag-upload-zone i {
        display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 12px;
        border-radius: 12px; font-size: 24px; opacity: 1; background: var(--dt-surface-2); color: var(--dt-muted); border: 0;
    }
    .ai-agent-editor .ai-rag-upload-zone p { font-size: 13px; color: var(--dt-text); }
    .ai-agent-editor .ai-rag-upload-zone p span { color: var(--dt-text); text-underline-offset: 2px; }
    .ai-agent-editor .ai-rag-upload-zone small { color: var(--dt-faint); }
    .ai-agent-editor .ai-rag-queue { border-radius: 10px; background: var(--dt-surface-2); border: 0; }
    .ai-agent-editor .ai-rag-queue-header { color: var(--dt-muted); }
    .ai-agent-editor .ai-rag-queue-item { border-radius: 8px; font-size: 13px; background: var(--dt-surface); border: 0; }
    .ai-agent-editor .ai-rag-queue-item i { font-size: 18px; color: var(--dt-muted); }
    .ai-agent-editor .ai-rag-queue-item button:hover { background: var(--dt-hover); color: var(--dt-danger); }
    .ai-agent-editor .ai-rag-progress-bar { height: 4px; border-radius: 2px; background: var(--dt-border-strong); }
    .ai-agent-editor .ai-rag-progress-fill { background: var(--dt-cta); }
    .ai-agent-editor .ai-rag-stats { gap: 10px; }
    .ai-agent-editor .ai-rag-stat { padding: 12px 14px; gap: 10px; border-radius: 10px; background: var(--dt-surface); border: 0; }
    .ai-agent-editor .ai-rag-stat-value { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
    .ai-agent-editor .ai-rag-stat-label { font-size: 11.5px; color: var(--dt-faint); }
    .ai-agent-editor .ai-rag-file { padding: 10px 12px; margin-bottom: 8px; border-radius: 10px; background: var(--dt-surface); border: 0; }
    .ai-agent-editor .ai-rag-file:hover { background: var(--dt-hover); }
    .ai-agent-editor .ai-rag-file-info span { font-size: 13px; }
    .ai-agent-editor .ai-rag-file-info small { color: var(--dt-faint); }
    .ai-agent-editor :is(.ai-rag-empty, .ai-table-empty, .ai-voices-empty, .ai-voices-loading, .ai-welcome-empty, .ai-preview-placeholder) { color: var(--dt-faint); }
    .ai-agent-editor :is(.ai-rag-empty, .ai-table-empty, .ai-voices-empty, .ai-voices-loading, .ai-welcome-empty, .ai-preview-placeholder) i { font-size: 26px; opacity: 1; color: var(--dt-faint); }

    /* ── Capas (vista previa del widget, redirecciones, herramientas, fichero): velo plano, caja con línea fina fuerte, sin sombra ── */
    .ai-agent-editor :is(.ai-rag-modal, .ai-preview-modal-overlay, .ai-form-modal-overlay) { background: var(--dt-backdrop); backdrop-filter: none; }
    .ai-agent-editor :is(.ai-rag-modal-content, .ai-preview-modal, .ai-form-modal) { background: var(--dt-overlay); border: 0; border-radius: 14px; box-shadow: none; }
    .ai-agent-editor .ai-rag-modal-content { overflow: hidden; }
    .ai-agent-editor :is(.ai-rag-modal-header, .ai-preview-modal-header, .ai-form-modal-header, .ai-form-modal-footer) { padding: 14px 18px; border-color: transparent; }
    .ai-agent-editor :is(.ai-rag-modal-header h4, .ai-preview-modal-header h3, .ai-form-modal-header h3) { font-size: 14px; font-weight: 600; color: var(--dt-text); }
    .ai-agent-editor :is(.ai-rag-modal-header h4, .ai-preview-modal-header h3, .ai-form-modal-header h3) i { color: var(--dt-muted); }
    .ai-agent-editor :is(.ai-rag-modal-close, .ai-preview-modal-close) { border-radius: 7px; color: var(--dt-muted); }
    .ai-agent-editor :is(.ai-rag-modal-close, .ai-preview-modal-close):hover { background: var(--dt-hover); color: var(--dt-text); }
    .ai-agent-editor .ai-form-modal-body { padding: 18px; }
    .ai-agent-editor .ai-rag-modal-body { font-size: 12.5px; background: var(--dt-surface-2); color: var(--dt-text); }

    /* ── «Cambios sin guardar»: tarjeta con línea fina fuerte (no pastilla oscura con sombra); Descartar ghost, Guardar tinta ── */
    .ai-agent-editor .ai-unsaved-bar { padding: 8px 8px 8px 16px; border-radius: 12px; background: var(--dt-surface-2); color: var(--dt-text); border: 0; box-shadow: none; }
    .ai-agent-editor .ai-unsaved-bar span { font-size: 13px; }
    .ai-agent-editor .ai-unsaved-btn { height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; }
    .ai-agent-editor .ai-unsaved-btn.discard { background: var(--dt-surface); color: var(--dt-text); border: 0; }
    .ai-agent-editor .ai-unsaved-btn.discard:hover { background: var(--dt-hover); color: var(--dt-text); }
    .ai-agent-editor .ai-unsaved-btn.save { background: var(--dt-cta); color: var(--dt-cta-fg); border: 0; }
    .ai-agent-editor .ai-unsaved-btn.save:hover { filter: none; background: var(--dt-cta-hover); border-color: transparent; }

    /* ── Varita y generador de prompt (su <style> propio va al principio del módulo; datalyse-modern.css fuerza activo, hover,
       panel, caja de carga y spinners con !important): botón ghost 32 px gris; carga y spinners en gris/tinta ── */
    .ai-agent-editor .ai-prompt-magic-btn { width: 32px; height: 32px; border-radius: 8px; font-size: 16px; border: 0; background: transparent; color: var(--dt-muted); box-shadow: none; }
    .ai-agent-editor .ai-prompt-magic-btn:hover { background: var(--dt-hover); box-shadow: none; }
    .ai-agent-editor .ai-prompt-magic-btn.active:hover { transform: none; }
    .ai-agent-editor .ai-prompt-generator-panel { border-radius: 10px; }
    .ai-agent-editor .ai-prompt-generator-desc { color: var(--dt-muted); }
    .ai-agent-editor .ai-prompt-generator-loading { background: var(--dt-surface-2) !important; color: var(--dt-muted) !important; border: 1px solid transparent !important; }
    .ai-agent-editor .ai-spinner, .ai-agent-editor .ai-spinner-small { border-color: var(--dt-border-strong) !important; border-top-color: var(--dt-text) !important; }

    /* ── Barras de desplazamiento y cifras tabulares ── */
    .ai-agent-editor :is(.ai-voices-grid, .ai-lang-list)::-webkit-scrollbar-track { background: transparent; }
    .ai-agent-editor :is(.ai-voices-grid, .ai-lang-list)::-webkit-scrollbar-thumb { background: var(--dt-border-strong); }
    .ai-agent-editor :is(.ai-field-footer, .ai-slider-value, .ai-rag-stat-value, .ai-rag-stat-label, .ai-table, .ai-asr-price, .ai-model-price,
                         .ai-model-price-tooltip, .ai-voice-price, .ai-badge, .ai-rag-file-info small, .ai-rag-queue-item small) { font-variant-numeric: tabular-nums; }

    .ai-agent-editor .ai-grid-2.ai-grid-agent-main {
        grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr);
        align-items: start;
    }
    .ai-agent-editor .ai-btn {
        border-radius: 9999px;
        padding: 0 16px;
    }
    @media (max-width: 960px) {
        .ai-agent-editor .ai-grid-2.ai-grid-agent-main {
            grid-template-columns: 1fr;
        }
    }
    @media (max-width: 768px) {
        .ai-agent-editor .ai-tabs { padding: 0 14px; gap: 16px; }
        .ai-agent-editor .ai-tab-panels { padding: 16px 14px 20px; }
        .ai-agent-editor .ai-header-main { padding-bottom: 14px; }
        .ai-agent-editor .ai-voice-filters { grid-template-columns: 1fr !important; }
    }

    /* ============================================================================
       ELEVENAGENTS STUDIO v4 — Preconfigured Templates, Spotlight, Workflow & Dock
       ============================================================================ */
    .el-studio-orb-avatar {
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: conic-gradient(from 190deg at 50% 50%, #0ea5e9, #e0f2fe, #0284c7, #bae6fd, #0ea5e9) !important;
        box-shadow: inset 0 0 10px rgba(255,255,255,0.45), 0 2px 10px rgba(14,165,233,0.28) !important;
        border: 1px solid rgba(255,255,255,0.28) !important;
        flex-shrink: 0;
    }
    .el-studio-branch-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        height: 24px;
        padding: 0 9px;
        border-radius: 7px;
        font-size: 11.5px;
        font-weight: 500;
        background: var(--dt-surface-2);
        border: 0;
        color: var(--dt-muted);
    }
    .el-studio-tpl-active-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        height: 24px;
        padding: 0 10px;
        border-radius: 999px;
        font-size: 11.5px;
        font-weight: 600;
        background: rgba(56, 189, 248, 0.12);
        border: 1px solid rgba(56, 189, 248, 0.3);
        color: #38bdf8;
    }
    .el-studio-btn-ghost,
    .el-studio-btn-autopilot {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 34px;
        padding: 0 12px;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 500;
        background: var(--dt-surface);
        border: 0;
        color: var(--dt-text);
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .el-studio-btn-ghost:hover,
    .el-studio-btn-autopilot:hover {
        background: var(--dt-hover);
    }
    .el-studio-btn-ghost.active {
        background: var(--dt-active);
        border-color: transparent;
    }

    /* Quick Preconfigured Templates Strip */
    .el-studio-quick-tpl-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 12px;
        padding: 8px 12px;
        border-radius: 10px;
        background: var(--dt-surface);
        border: 0;
    }
    .el-studio-quick-tpl-label {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        font-weight: 600;
        color: var(--dt-muted);
        white-space: nowrap;
        flex-shrink: 0;
    }
    .el-studio-quick-tpl-scroll {
        display: flex;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        flex: 1;
        scrollbar-width: none;
        padding: 2px 0;
    }
    .el-studio-quick-tpl-scroll::-webkit-scrollbar { display: none; }
    .el-studio-quick-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 28px;
        padding: 0 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        background: var(--dt-surface-2);
        border: 0;
        color: var(--dt-text);
        cursor: pointer;
        transition: all 0.14s ease;
        flex-shrink: 0;
    }
    .el-studio-quick-pill:hover {
        border-color: transparent;
        transform: translateY(-1px);
    }
    .el-studio-quick-pill.active {
        background: var(--dt-active);
        border-color: transparent;
        color: var(--dt-text);
        font-weight: 600;
    }
    .el-studio-mini-orb {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        display: inline-block;
        flex-shrink: 0;
        box-shadow: inset 0 0 4px rgba(255,255,255,0.5);
    }
    .el-studio-mini-orb.lg {
        width: 22px;
        height: 22px;
    }
    .el-studio-quick-tpl-more {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        height: 28px;
        padding: 0 10px;
        border-radius: 7px;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        background: transparent;
        border: 0;
        color: var(--dt-text);
        cursor: pointer;
        flex-shrink: 0;
    }
    .el-studio-quick-tpl-more:hover {
        background: var(--dt-hover);
    }

    /* Split Workspace: Left Tab Panels + Right Interactive Preview Dock */
    .el-studio-workspace-split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(420px, 480px);
        align-items: stretch;
        border-bottom: 1px solid transparent;
    }
    .el-studio-workspace-split.dock-collapsed {
        grid-template-columns: minmax(0, 1fr);
    }
    .el-studio-workspace-split.dock-collapsed .el-studio-preview-dock {
        display: none;
    }
    .el-studio-preview-dock {
        border-left: 1px solid transparent;
        background: var(--dt-surface);
        display: flex;
        flex-direction: column;
        min-height: 620px;
    }
    .el-studio-dock-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        border-bottom: 1px solid transparent;
        background: var(--dt-surface);
    }
    .el-studio-dock-seg {
        display: inline-flex;
        background: var(--dt-surface-2);
        border: 0;
        border-radius: 8px;
        padding: 2px;
        gap: 2px;
    }
    .el-studio-dock-tab {
        border: 0;
        background: transparent;
        color: var(--dt-muted);
        font-size: 12px;
        font-weight: 500;
        padding: 4px 11px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.14s ease;
    }
    .el-studio-dock-tab.active {
        background: var(--dt-surface);
        color: var(--dt-text);
        box-shadow: none;
    }
    .el-studio-dock-mock {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--dt-muted);
    }
    .el-studio-mock-pill {
        border: 0;
        background: var(--dt-surface-2);
        color: var(--dt-muted);
        border-radius: 6px;
        padding: 2px 8px;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
    }
    .el-studio-mock-pill.on {
        background: var(--dt-active);
        border-color: transparent;
        color: var(--dt-text);
    }
    .el-studio-dock-canvas {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: var(--dt-surface-2);
        background-image: none;
        padding: 18px;
    }
    .el-studio-dock-inline {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .el-studio-orb-stage {
        position: relative;
        width: 196px;
        height: 196px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto 0 12px;
    }
    .el-studio-conic-orb {
        width: 184px;
        height: 184px;
        border-radius: 50%;
        background: conic-gradient(from 180deg at 50% 50%, #0ea5e9, #bae6fd, #0284c7, #38bdf8, #0369a1, #e0f2fe, #0ea5e9);
        box-shadow:
            inset 0 0 32px rgba(255, 255, 255, 0.65),
            inset -16px -16px 36px rgba(2, 132, 199, 0.6),
            0 18px 52px rgba(14, 165, 233, 0.28);
        cursor: pointer;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        animation: dui-legacy-modules-aiagentsedit-elOrbSlowSpin 16s linear infinite;
    }
    .el-studio-conic-orb:hover {
        transform: scale(1.03);
        box-shadow:
            inset 0 0 32px rgba(255, 255, 255, 0.7),
            0 20px 56px rgba(14, 165, 233, 0.34);
    }
    .el-studio-conic-orb.sm {
        width: 34px;
        height: 34px;
        animation: none;
        box-shadow: inset 0 0 8px rgba(255,255,255,0.5);
    }
    @keyframes dui-legacy-modules-aiagentsedit-elOrbSlowSpin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .el-studio-orb-call-btn {
        position: absolute;
        bottom: 6px;
        right: 6px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--dt-cta);
        color: var(--dt-cta-fg);
        border: 1px solid transparent;
        box-shadow: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        cursor: pointer;
        transition: transform 0.16s ease;
    }
    .el-studio-orb-call-btn:hover {
        transform: scale(1.08);
    }
    .el-studio-orb-caption {
        font-size: 12px;
        color: #71717a;
        text-align: center;
        margin-bottom: auto;
    }
    .el-studio-inline-chatlog {
        width: 100%;
        max-height: 150px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 10px;
        padding: 8px;
        border-radius: 10px;
        background: var(--dt-surface-2);
        border: 0;
    }
    .el-inline-msg {
        font-size: 12px;
        line-height: 1.45;
        padding: 6px 10px;
        border-radius: 8px;
    }
    .el-inline-msg.user {
        align-self: flex-end;
        background: var(--dt-surface);
        color: var(--dt-text);
    }
    .el-inline-msg.agent {
        align-self: flex-start;
        background: var(--dt-surface-2);
        border: 0;
        color: var(--dt-text);
    }
    .el-inline-tag {
        color: #c084fc;
        font-family: monospace;
        font-size: 11px;
    }
    .el-inline-lat {
        display: block;
        font-size: 10.5px;
        color: var(--dt-muted);
        margin-top: 3px;
    }
    .el-studio-inline-chatbar {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--dt-surface-2);
        border: 0;
        border-radius: 12px;
        padding: 6px 8px 6px 12px;
        margin-top: 12px;
    }
    .el-studio-inline-chatbar input {
        flex: 1;
        background: transparent;
        border: 0;
        outline: none;
        color: var(--dt-text);
        font-size: 12.5px;
    }
    .el-studio-inline-send {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        border: 0;
        background: var(--dt-cta);
        color: var(--dt-cta-fg);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .el-studio-inline-send:hover {
        background: var(--dt-cta-hover);
        color: var(--dt-cta-fg);
    }

    /* Widget Mode inside Right Preview Dock (Screenshots 2 & 3) */
    .el-studio-dock-widget {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .el-studio-widget-hint {
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-size: 12px;
        color: var(--dt-muted);
    }
    .el-studio-widget-hint small {
        color: var(--dt-muted);
        font-size: 11px;
    }
    .el-studio-floating-launcher {
        align-self: flex-end;
        margin-top: auto;
        background: var(--dt-surface);
        color: var(--dt-text);
        border-radius: 20px;
        padding: 14px 16px;
        width: 215px;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .el-studio-launcher-top {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .el-studio-launcher-label {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--dt-text);
    }
    .el-studio-launcher-cta {
        width: 100%;
        height: 38px;
        border-radius: 999px;
        border: 0;
        background: var(--dt-surface);
        color: var(--dt-text);
        font-size: 13px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        cursor: pointer;
    }
    .el-studio-launcher-cta:hover {
        background: var(--dt-surface);
    }

    /* Spotlight Panel (Screenshots 2 & 3) */
    .el-spot-wrap {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .el-spot-top-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
    }
    .el-spot-kicker {
        font-size: 11.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--dt-muted);
        margin-bottom: 2px;
    }
    .el-spot-title {
        font-size: 16px;
        font-weight: 600;
        margin: 0;
        color: var(--dt-text);
    }
    .el-spot-filters {
        display: flex;
        gap: 8px;
    }
    .el-spot-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 11px;
        border-radius: 8px;
        font-size: 12px;
        background: var(--dt-surface);
        border: 0;
        color: var(--dt-muted);
    }
    .el-spot-rec-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    .el-spot-rec-card {
        background: var(--dt-surface);
        border: 0;
        border-radius: 14px;
        padding: 18px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .el-spot-rec-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        color: var(--dt-muted);
    }
    .el-spot-rec-tag {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-weight: 500;
    }
    .el-spot-rec-title {
        font-size: 15px;
        font-weight: 600;
        color: var(--dt-text);
    }
    .el-spot-rec-desc {
        font-size: 13px;
        line-height: 1.5;
        color: var(--dt-muted);
        margin: 0;
        flex: 1;
    }
    .el-spot-rec-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 8px;
        border-top: 1px solid transparent;
    }
    .el-spot-sev-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 600;
        color: #f87171;
    }
    .el-spot-sev-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #ef4444;
    }
    .el-spot-action-btn {
        height: 30px;
        padding: 0 12px;
        border-radius: 7px;
        font-size: 12px;
        font-weight: 600;
        background: var(--dt-surface-2);
        border: 0;
        color: var(--dt-text);
        cursor: pointer;
    }
    .el-spot-action-btn:hover {
        background: var(--dt-hover);
    }
    .el-spot-bento-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    .el-spot-bento-card {
        background: var(--dt-surface);
        border: 0;
        border-radius: 12px;
        padding: 16px;
    }
    .el-spot-bento-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 12px;
    }
    .el-spot-bento-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--dt-text);
    }
    .el-spot-bento-sub {
        font-size: 12px;
        color: var(--dt-muted);
    }
    .el-spot-bento-arrow {
        color: var(--dt-muted);
    }
    .el-spot-spark-bars {
        display: flex;
        align-items: flex-end;
        gap: 6px;
        height: 44px;
        padding-top: 6px;
    }
    .el-spot-spark-bars span {
        flex: 1;
        background: var(--dt-surface-2);
        border-radius: 3px 3px 0 0;
    }
    .el-spot-topic-list {
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-size: 12px;
        color: var(--dt-muted);
    }
    .el-spot-topic-row {
        display: flex;
        justify-content: space-between;
    }
    .el-spot-metric-big {
        font-size: 20px;
        font-weight: 700;
        color: var(--dt-text);
        margin-bottom: 8px;
    }
    .el-spot-metric-big small {
        font-size: 12px;
        font-weight: 400;
        color: var(--dt-muted);
    }
    .el-spot-progress {
        height: 5px;
        border-radius: 999px;
        background: var(--dt-surface-2);
        overflow: hidden;
    }
    .el-spot-progress > div {
        height: 100%;
        border-radius: 999px;
    }
    .el-spot-chip-ok, .el-spot-chip-neutral, .el-spot-chip-low {
        font-size: 11.5px;
        padding: 3px 8px;
        border-radius: 6px;
        background: rgba(255,255,255,0.05);
    }
    .el-spot-chip-ok { color: #4ade80; }
    .el-spot-chip-neutral { color: #a1a1aa; }
    .el-spot-chip-low { color: var(--dt-muted); }

    /* Workflow Panel & Dotted Graph Canvas (Screenshot 8) */
    .el-wf-studio-wrap {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .el-wf-studio-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }
    .el-wf-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 7px;
        font-size: 12px;
        font-weight: 600;
        background: rgba(56, 189, 248, 0.12);
        color: #38bdf8;
    }
    .el-wf-dotted-canvas,
    .el-tpl-right-canvas {
        position: relative;
        min-height: 575px;
        border-radius: 14px;
        background-color: var(--dt-surface-2);
        background-image: radial-gradient(var(--dt-border-strong) 1px, transparent 1px);
        background-size: 18px 18px;
        border: 1px solid transparent;
        overflow: hidden;
    }
    .el-wf-graph-stage {
        position: relative;
        width: 100%;
        height: 565px;
    }
    .el-wf-svg-connectors {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }
    .el-wf-node-pill {
        position: absolute;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 34px;
        padding: 0 14px;
        border-radius: 9px;
        background: var(--dt-surface);
        border: 0;
        color: var(--dt-text);
        font-size: 12.5px;
        font-weight: 600;
        box-shadow: none;
    }
    .el-wf-node-box {
        position: absolute;
        background: var(--dt-surface);
        border: 0;
        border-radius: 12px;
        padding: 12px 14px;
        color: var(--dt-text);
        box-shadow: none;
    }
    .el-wf-node-title {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--dt-text);
        margin-bottom: 5px;
    }
    .el-wf-node-desc {
        font-size: 11.5px;
        line-height: 1.42;
        color: var(--dt-muted);
    }
    .el-wf-node-tools {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-top: 7px;
        padding: 2px 7px;
        border-radius: 6px;
        font-size: 11px;
        background: var(--dt-surface-2);
        color: var(--dt-text);
    }
    .el-wf-cond-pill {
        position: absolute;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        max-width: 230px;
        padding: 4px 11px;
        border-radius: 999px;
        background: var(--dt-surface-2);
        color: var(--dt-text);
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-shadow: none;
    }

    /* Settings -> Autopilot Agent Context (agents.md) (Screenshots 4 & 5) */
    .el-aset-wrap {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .el-aset-subtabs {
        display: inline-flex;
        gap: 6px;
        border-bottom: 1px solid transparent;
        padding-bottom: 10px;
    }
    .el-aset-subtab {
        height: 32px;
        padding: 0 13px;
        border-radius: 8px;
        border: 0;
        background: transparent;
        color: var(--dt-muted);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
    }
    .el-aset-subtab.active {
        background: var(--dt-surface-2);
        border-color: transparent;
        color: var(--dt-text);
    }
    .el-aset-layout {
        display: grid;
        grid-template-columns: 185px minmax(0, 1fr);
        gap: 22px;
        align-items: start;
    }
    .el-aset-sidebar {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .el-aset-side-group {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--dt-faint);
        padding: 4px 10px;
    }
    .el-aset-side-item {
        text-align: left;
        padding: 7px 10px;
        border-radius: 8px;
        border: 0;
        background: transparent;
        color: var(--dt-muted);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
    }
    .el-aset-side-item.active,
    .el-aset-side-item:hover {
        background: var(--dt-surface-2);
        color: var(--dt-text);
    }
    .el-aset-context-card {
        background: var(--dt-surface);
        border: 0;
        border-radius: 14px;
        padding: 22px;
    }
    .el-aset-context-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--dt-text);
        margin: 0 0 6px;
    }
    .el-aset-context-desc {
        font-size: 13px;
        color: var(--dt-muted);
        margin: 0 0 16px;
        line-height: 1.5;
    }
    .el-aset-context-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 16px;
    }
    .el-aset-btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 34px;
        padding: 0 14px;
        border-radius: 8px;
        border: 0;
        background: var(--dt-cta);
        color: var(--dt-cta-fg);
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
    }
    .el-aset-btn-ghost {
        height: 34px;
        padding: 0 13px;
        border-radius: 8px;
        border: 0;
        background: var(--dt-surface-2);
        color: var(--dt-text);
        font-size: 12.5px;
        font-weight: 500;
        cursor: pointer;
    }
    .el-aset-btn-link {
        border: 0;
        background: transparent;
        color: var(--dt-muted);
        font-size: 12.5px;
        text-decoration: underline;
        cursor: pointer;
    }
    .el-aset-md-editor-wrap {
        border: 0;
        border-radius: 10px;
        overflow: hidden;
        background: var(--dt-surface-2);
    }
    .el-aset-md-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        border-bottom: 1px solid transparent;
        font-size: 12px;
        color: var(--dt-muted);
    }
    .el-aset-apply-btn {
        height: 26px;
        padding: 0 10px;
        border-radius: 6px;
        border: 0;
        background: var(--dt-surface-2);
        color: var(--dt-text);
        font-size: 11.5px;
        font-weight: 600;
        cursor: pointer;
    }
    .el-aset-md-textarea {
        width: 100%;
        border: 0;
        outline: none;
        background: transparent;
        color: var(--dt-text);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 12.5px;
        line-height: 1.55;
        padding: 12px;
        resize: vertical;
    }
    .el-aset-guard-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 12px 14px;
        border-radius: 10px;
        border: 0;
        background: var(--dt-surface-2);
    }
    .el-aset-guard-row strong {
        display: block;
        font-size: 13px;
        color: var(--dt-text);
    }
    .el-aset-guard-row small {
        font-size: 12px;
        color: var(--dt-muted);
    }

    /* Browse 16 Preconfigured Templates Split Modal (Screenshot 8) */
    .el-tpl-modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: var(--dt-backdrop);
        backdrop-filter: blur(6px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    .el-tpl-modal-dialog {
        width: min(1260px, 96vw);
        height: min(820px, 90vh);
        background: var(--dt-surface);
        border: 0;
        border-radius: 18px;
        display: grid;
        grid-template-columns: 470px minmax(0, 1fr);
        overflow: hidden;
        box-shadow: none;
    }
    .el-tpl-modal-left {
        display: flex;
        flex-direction: column;
        border-right: 1px solid transparent;
        padding: 18px;
        overflow: hidden;
    }
    .el-tpl-modal-head h3 {
        font-size: 18px;
        font-weight: 600;
        color: var(--dt-text);
        margin: 0 0 4px;
    }
    .el-tpl-modal-head p {
        font-size: 12.5px;
        color: var(--dt-muted);
        margin: 0 0 12px;
    }
    .el-tpl-search-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
    }
    .el-tpl-search-box {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--dt-surface);
        border: 0;
        border-radius: 9px;
        padding: 0 11px;
        height: 36px;
        color: var(--dt-muted);
    }
    .el-tpl-search-box input {
        flex: 1;
        background: transparent;
        border: 0;
        outline: none;
        color: var(--dt-text);
        font-size: 12.5px;
    }
    .el-tpl-cat-pills {
        display: flex;
        gap: 6px;
    }
    .el-tpl-cat-btn {
        height: 28px;
        padding: 0 10px;
        border-radius: 7px;
        border: 0;
        background: var(--dt-surface-2);
        color: var(--dt-muted);
        font-size: 11.5px;
        font-weight: 500;
        cursor: pointer;
    }
    .el-tpl-cat-btn.active {
        background: var(--dt-active);
        color: var(--dt-text);
        border-color: transparent;
        font-weight: 600;
    }
    .el-tpl-cards-grid {
        flex: 1;
        overflow-y: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        align-content: start;
        padding-right: 4px;
    }
    .el-tpl-card {
        background: var(--dt-surface);
        border: 0;
        border-radius: 12px;
        padding: 12px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 7px;
        transition: all 0.14s ease;
    }
    .el-tpl-card:hover {
        border-color: transparent;
        background: var(--dt-hover);
    }
    .el-tpl-card.active {
        border-color: transparent;
        background: var(--dt-active);
    }
    .el-tpl-card-top {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .el-tpl-card-name {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--dt-text);
        line-height: 1.25;
    }
    .el-tpl-card-desc {
        font-size: 11.5px;
        color: var(--dt-muted);
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .el-tpl-card-foot {
        margin-top: auto;
    }
    .el-tpl-integ-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 7px;
        border-radius: 6px;
        background: var(--dt-surface-2);
        border: 0;
        color: var(--dt-muted);
        font-size: 10.5px;
    }
    .el-tpl-modal-right {
        display: flex;
        flex-direction: column;
        background: var(--dt-surface);
        padding: 14px 18px 18px;
    }
    .el-tpl-right-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }
    .el-tpl-use-btn {
        height: 34px;
        padding: 0 16px;
        border-radius: 999px;
        border: 0;
        background: var(--dt-cta);
        color: var(--dt-cta-fg);
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
    }
    .el-tpl-use-btn:hover {
        background: var(--dt-cta-hover);
    }
    .el-tpl-close-btn {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        border: 0;
        background: var(--dt-surface-2);
        color: var(--dt-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .el-tpl-preview-center {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 24px;
    }

    @media (max-width: 1180px) {
        .el-studio-workspace-split {
            grid-template-columns: 1fr;
        }
        .el-studio-preview-dock {
            border-left: 0;
            border-top: 1px solid transparent;
        }
        .el-tpl-modal-dialog {
            grid-template-columns: 1fr;
            overflow-y: auto;
        }
    }

    /* ═══════════ ElevenLabs v4 Skill Adaptive Light/Dark Studio Tokens ═══════════ */
    .el-wf-svg-connectors {
        color: rgba(255, 255, 255, 0.22);
    }
    :scope:not([data-bs-theme="dark"]) .el-wf-svg-connectors {
        color: rgba(12, 10, 9, 0.22);
    }
    :scope:not([data-bs-theme="dark"]) .el-studio-tpl-active-badge,
    :scope:not([data-bs-theme="dark"]) .el-wf-badge {
        background: var(--el-card-stone, #f5f4f2);
        border: 1px solid var(--el-border-strong, rgba(12, 10, 9, 0.12));
        color: var(--el-ink, #0c0a09);
    }
    :scope:not([data-bs-theme="dark"]) .el-studio-quick-pill:hover {
        border-color: transparent;
        background: var(--el-card-stone-hover);
    }
    :scope:not([data-bs-theme="dark"]) .el-studio-quick-pill.active {
        background: var(--el-ink);
        border-color: transparent;
        color: var(--dt-on-color);
    }
    :scope:not([data-bs-theme="dark"]) .el-spot-kicker {
        color: var(--el-ink-secondary);
    }
    :scope:not([data-bs-theme="dark"]) .el-spot-spark-bars span {
        background: var(--dt-surface-2);
    }
    :scope:not([data-bs-theme="dark"]) .el-spot-progress {
        background: var(--dt-surface-2);
    }
    :scope:not([data-bs-theme="dark"]) .el-spot-chip-ok,
    :scope:not([data-bs-theme="dark"]) .el-spot-chip-neutral,
    :scope:not([data-bs-theme="dark"]) .el-spot-chip-low {
        background: var(--el-card-stone, #f5f4f2);
        border: 1px solid var(--el-border, rgba(12, 10, 9, 0.07));
    }
    :scope:not([data-bs-theme="dark"]) .el-spot-chip-ok { color: #15803d; }
    :scope:not([data-bs-theme="dark"]) .el-spot-chip-neutral { color: #57534e; }
    :scope:not([data-bs-theme="dark"]) .el-spot-chip-low { color: #0369a1; }

    /* Settings & Autopilot agents.md Light Mode */
    :scope:not([data-bs-theme="dark"]) .el-aset-btn-primary {
        background: var(--dt-cta);
        border-color: transparent;
        color: var(--dt-cta-fg);
    }
    :scope:not([data-bs-theme="dark"]) .el-aset-btn-primary:hover {
        background: var(--dt-cta);
    }
    :scope:not([data-bs-theme="dark"]) .el-aset-md-editor-wrap {
        background: var(--dt-surface-2);
        border-color: transparent;
    }
    :scope:not([data-bs-theme="dark"]) .el-aset-md-bar {
        background: var(--dt-app);
        border-bottom-color: transparent;
        color: var(--el-ink-secondary);
    }
    :scope:not([data-bs-theme="dark"]) .el-aset-apply-btn {
        background: var(--el-ink);
        color: var(--dt-cta-fg);
    }
    :scope:not([data-bs-theme="dark"]) .el-aset-md-textarea {
        color: var(--el-ink);
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    :scope:not([data-bs-theme="dark"]) .el-studio-preview-dock {
        background: var(--el-card-stone);
        border-left-color: transparent;
    }
    :scope:not([data-bs-theme="dark"]) .el-studio-dock-header {
        background: var(--el-stage-bg);
        border-bottom-color: transparent;
    }
    :scope:not([data-bs-theme="dark"]) .el-studio-dock-seg {
        background: var(--el-card-stone);
        border-color: transparent;
        border-radius: 9999px;
    }
    :scope:not([data-bs-theme="dark"]) .el-studio-dock-tab {
        color: var(--el-ink-secondary);
        border-radius: 9999px;
    }
    :scope:not([data-bs-theme="dark"]) .el-studio-dock-tab.active {
        background: var(--dt-app);
        color: var(--el-ink);
        box-shadow: none;
    }
    :scope:not([data-bs-theme="dark"]) .el-studio-dock-mock {
        color: var(--el-ink-secondary);
    }
    :scope:not([data-bs-theme="dark"]) .el-studio-mock-pill {
        background: var(--el-card-stone);
        border-color: transparent;
        color: var(--el-ink-secondary);
    }
    :scope:not([data-bs-theme="dark"]) .el-studio-mock-pill.on {
        background: var(--dt-active);
        border-color: transparent;
        color: var(--dt-text);
    }
    :scope:not([data-bs-theme="dark"]) .el-studio-dock-canvas {
        background-color: var(--dt-surface-2);
        background-image: none;
    }
    :scope:not([data-bs-theme="dark"]) .el-studio-orb-call-btn {
        box-shadow: none;
    }
    :scope:not([data-bs-theme="dark"]) .el-studio-floating-launcher {
        border: 0;
        box-shadow: none;
    }
    :scope:not([data-bs-theme="dark"]) .el-studio-inline-chatlog {
        background: var(--dt-surface-2);
        border-color: transparent;
    }
    :scope:not([data-bs-theme="dark"]) .el-inline-msg.user {
        background: var(--el-ink);
        color: var(--dt-on-color);
    }
    :scope:not([data-bs-theme="dark"]) .el-inline-msg.agent {
        background: var(--el-card-stone);
        border-color: transparent;
        color: var(--el-ink);
    }
    :scope:not([data-bs-theme="dark"]) .el-studio-inline-chatbar {
        background: var(--dt-surface-2);
        border-color: transparent;
        border-radius: 9999px;
    }
    :scope:not([data-bs-theme="dark"]) .el-studio-inline-chatbar input {
        color: var(--el-ink);
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    :scope:not([data-bs-theme="dark"]) .el-studio-inline-send {
        background: var(--dt-cta);
        color: var(--dt-cta-fg);
        border-radius: 9999px;
    }
    :scope:not([data-bs-theme="dark"]) .el-wf-dotted-canvas,
    :scope:not([data-bs-theme="dark"]) .el-tpl-right-canvas {
        background-color: var(--dt-surface-2);
        background-image: radial-gradient(var(--dt-border-strong) 1px, transparent 1px);
        border-color: transparent;
    }
    :scope:not([data-bs-theme="dark"]) .el-wf-node-pill,
    :scope:not([data-bs-theme="dark"]) .el-wf-node-box {
        background: var(--dt-app);
        border-color: transparent;
        color: var(--el-ink);
        box-shadow: none;
    }
    :scope:not([data-bs-theme="dark"]) .el-wf-node-box:hover {
        border-color: transparent;
        box-shadow: none;
    }
    :scope:not([data-bs-theme="dark"]) .el-wf-cond-pill {
        background: var(--el-ink);
        color: var(--dt-on-color);
        box-shadow: none;
    }
    :scope:not([data-bs-theme="dark"]) .el-wf-node-title { color: var(--el-ink); }
    :scope:not([data-bs-theme="dark"]) .el-wf-node-desc { color: var(--el-ink-secondary); }
    :scope:not([data-bs-theme="dark"]) .el-wf-node-tools {
        background: var(--el-card-stone);
        color: var(--el-ink-secondary);
    }
    :scope:not([data-bs-theme="dark"]) .el-tpl-modal-backdrop {
        background: var(--dt-backdrop);
    }
    :scope:not([data-bs-theme="dark"]) .el-tpl-modal-dialog {
        background: var(--dt-app);
        border-color: transparent;
        box-shadow: none;
    }
    :scope:not([data-bs-theme="dark"]) .el-tpl-modal-left {
        border-right-color: transparent;
    }
    :scope:not([data-bs-theme="dark"]) .el-tpl-modal-head h3 { color: var(--el-ink); }
    :scope:not([data-bs-theme="dark"]) .el-tpl-modal-head p { color: var(--el-ink-secondary); }
    :scope:not([data-bs-theme="dark"]) .el-tpl-search-box {
        background: var(--el-card-stone);
        border-color: transparent;
        border-radius: 9999px;
    }
    :scope:not([data-bs-theme="dark"]) .el-tpl-search-box input {
        color: var(--el-ink);
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    :scope:not([data-bs-theme="dark"]) .el-tpl-cat-btn {
        background: var(--dt-surface-2);
        border-color: transparent;
        color: var(--dt-muted);
        border-radius: 9999px;
    }
    :scope:not([data-bs-theme="dark"]) .el-tpl-cat-btn.active {
        background: var(--dt-active);
        border-color: transparent;
        color: var(--dt-text);
    }
    :scope:not([data-bs-theme="dark"]) .el-tpl-card {
        background: var(--el-card-stone);
        border-color: transparent;
    }
    :scope:not([data-bs-theme="dark"]) .el-tpl-card:hover {
        background: var(--dt-hover);
        border-color: transparent;
    }
    :scope:not([data-bs-theme="dark"]) .el-tpl-card.active {
        background: var(--dt-active);
        border-color: transparent;
        box-shadow: none;
    }
    :scope:not([data-bs-theme="dark"]) .el-tpl-card-name { color: var(--el-ink); }
    :scope:not([data-bs-theme="dark"]) .el-tpl-card-desc { color: var(--el-ink-secondary); }
    :scope:not([data-bs-theme="dark"]) .el-tpl-integ-pill {
        background: var(--dt-app);
        border-color: transparent;
        color: var(--el-ink-secondary);
    }
    :scope:not([data-bs-theme="dark"]) .el-tpl-modal-right {
        background: var(--el-card-stone);
    }
    :scope:not([data-bs-theme="dark"]) .el-tpl-use-btn {
        background: var(--dt-cta);
        color: var(--dt-cta-fg);
    }
    :scope:not([data-bs-theme="dark"]) .el-tpl-close-btn {
        background: var(--dt-app);
        border-color: transparent;
        color: var(--el-ink-secondary);
    }

    /* ═══════════ ElevenLabs v4 Interactive Agent Preview Modal & Live Dock Call UI ═══════════ */
    .el-prv-modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 10050;
        background: var(--dt-backdrop);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    .el-prv-modal-dialog {
        width: min(1140px, 96vw) !important;
        height: min(740px, 90vh) !important;
        max-width: 1140px !important;
        background: var(--dt-surface) !important;
        border: 0 !important;
        border-radius: 20px !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: none !important;
    }
    .el-prv-modal-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 14px 20px !important;
        border-bottom: 1px solid transparent !important;
        background: var(--dt-surface) !important;
    }
    .el-prv-modal-brand {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .el-prv-live-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        background: rgba(34, 197, 94, 0.12);
        color: #22c55e;
        border: 1px solid rgba(34, 197, 94, 0.25);
    }
    .el-prv-live-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #22c55e;
    }
    .el-prv-live-dot.pulse {
        box-shadow: none;
        animation: dui-legacy-modules-aiagentsedit-elPrvPulseDot 1.4s infinite ease-in-out;
    }
    @keyframes dui-legacy-modules-aiagentsedit-elPrvPulseDot {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.3); opacity: 0.7; }
    }
    .el-prv-tts-toggle {
        height: 34px;
        padding: 0 12px;
        border-radius: 999px;
        border: 0;
        background: var(--dt-surface-2);
        color: var(--dt-muted);
        font-size: 12px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
    }
    .el-prv-tts-toggle.on {
        background: var(--dt-active);
        border-color: transparent;
        color: var(--dt-text);
    }
    :scope:not([data-bs-theme="dark"]) .el-prv-tts-toggle.on {
        background: var(--dt-active);
        border-color: transparent;
        color: var(--dt-text);
    }
    .el-prv-modal-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 0 !important;
        background: var(--dt-bg);
    }
    .el-prv-voice-grid {
        flex: 1;
        display: grid;
        grid-template-columns: 430px minmax(0, 1fr);
        height: 100%;
        overflow: hidden;
    }
    .el-prv-stage-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px 22px;
        border-right: 1px solid transparent;
        background-color: var(--dt-surface-2);
        background-image: none;
        text-align: center;
        gap: 14px;
    }
    :scope:not([data-bs-theme="dark"]) .el-prv-stage-left {
        background-color: var(--dt-surface-2);
        background-image: none;
    }
    .el-prv-telemetry-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
    }
    .el-prv-tel-pill {
        font-size: 11px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        padding: 3px 9px;
        border-radius: 999px;
        background: var(--dt-surface);
        border: 0;
        color: var(--dt-muted);
    }
    .el-prv-tel-pill strong {
        color: var(--dt-text);
    }
    .el-prv-orb-wrap {
        position: relative;
        width: 176px;
        height: 176px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin: 8px 0;
    }
    .el-prv-big-orb {
        width: 148px !important;
        height: 148px !important;
        position: relative;
        z-index: 2;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .el-prv-orb-wrap:hover .el-prv-big-orb {
        transform: scale(1.04);
    }
    .el-prv-orb-ring {
        position: absolute;
        inset: 10px;
        border-radius: 50%;
        border: 1.5px solid rgba(56, 189, 248, 0.35);
        opacity: 0;
        pointer-events: none;
        z-index: 1;
    }
    .el-prv-orb-wrap.is-active .el-prv-orb-ring.r1,
    .el-studio-orb-stage.is-calling .el-prv-orb-ring.r1 {
        animation: dui-legacy-modules-aiagentsedit-elOrbWaveRing 2.2s infinite ease-out;
    }
    .el-prv-orb-wrap.is-active .el-prv-orb-ring.r2,
    .el-studio-orb-stage.is-calling .el-prv-orb-ring.r2 {
        animation: dui-legacy-modules-aiagentsedit-elOrbWaveRing 2.2s infinite 0.7s ease-out;
    }
    .el-prv-orb-wrap.is-active .el-prv-orb-ring.r3 {
        animation: dui-legacy-modules-aiagentsedit-elOrbWaveRing 2.2s infinite 1.4s ease-out;
    }
    @keyframes dui-legacy-modules-aiagentsedit-elOrbWaveRing {
        0% { transform: scale(0.88); opacity: 0.75; }
        100% { transform: scale(1.38); opacity: 0; }
    }
    .el-prv-orb-float-btn {
        z-index: 3;
        bottom: 10px !important;
        right: 10px !important;
    }
    .el-studio-orb-call-btn.is-hangup {
        background: #ef4444 !important;
        color: #ffffff !important;
        border-color: #ef4444 !important;
    }
    .el-prv-stage-status {
        font-size: 12.5px;
        color: var(--dt-muted, #a1a1aa);
    }
    .el-prv-voice-meta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        border-radius: 999px;
        background: var(--dt-surface);
        border: 0;
        font-size: 11.5px;
        font-weight: 500;
        color: var(--dt-text);
    }
    .el-prv-call-controls {
        display: flex;
        align-items: center;
        gap: 8px;
        justify-content: center;
    }
    .el-prv-ctrl-btn {
        height: 40px;
        padding: 0 18px;
        border-radius: 999px;
        border: 0;
        background: var(--dt-surface);
        color: var(--dt-text);
        font-size: 13px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .el-prv-ctrl-btn.icon {
        width: 40px;
        padding: 0;
    }
    .el-prv-ctrl-btn.primary {
        background: var(--dt-cta);
        color: var(--dt-cta-fg);
        border-color: transparent;
    }
    .el-prv-ctrl-btn.primary.danger {
        background: #ef4444 !important;
        border-color: #ef4444 !important;
        color: var(--dt-cta-fg) !important;
    }
    .el-prv-ctrl-btn.is-recording {
        background: #ef4444 !important;
        color: var(--dt-cta-fg) !important;
        border-color: #ef4444 !important;
    }
    .el-prv-quick-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
        margin-top: 4px;
    }
    .el-prv-chip {
        padding: 5px 11px;
        border-radius: 999px;
        border: 1px solid transparent;
        background: var(--dt-surface);
        color: var(--dt-text);
        font-size: 11.5px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.14s ease;
    }
    .el-prv-chip.sm {
        padding: 3px 9px;
        font-size: 11px;
    }
    .el-prv-chip:hover {
        border-color: transparent;
        transform: translateY(-1px);
    }
    .el-prv-stage-right {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        padding: 18px 22px;
        background: var(--dt-surface);
    }
    .el-prv-transcript-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 12px;
        border-bottom: 1px solid transparent;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--dt-muted);
    }
    .el-prv-clear-btn {
        height: 28px;
        padding: 0 10px;
        border-radius: 999px;
        border: 0;
        background: transparent;
        color: var(--dt-muted);
        font-size: 11.5px;
        cursor: pointer;
    }
    .el-prv-transcript-log {
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 14px 4px;
    }
    .el-prv-turn-step {
        align-self: center;
        font-size: 11px;
        padding: 3px 11px;
        border-radius: 999px;
        background: var(--dt-surface-2);
        border: 0;
        color: var(--dt-muted);
    }
    .el-prv-msg {
        max-width: 86%;
        padding: 12px 14px;
        border-radius: 14px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .el-prv-msg.agent {
        align-self: flex-start;
        background: var(--dt-surface-2);
        border: 0;
        color: var(--dt-text);
    }
    .el-prv-msg.user {
        align-self: flex-end;
        background: var(--dt-cta);
        color: var(--dt-cta-fg);
    }
    .el-prv-msg-head {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 11.5px;
        opacity: 0.9;
    }
    .el-prv-msg-body {
        font-size: 13.5px;
        line-height: 1.5;
    }
    .el-prv-msg-foot {
        display: flex;
        gap: 10px;
        font-size: 10.5px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        opacity: 0.65;
        margin-top: 2px;
    }
    .el-prv-mic-inline {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 0;
        background: transparent;
        color: var(--dt-muted);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .el-prv-mic-inline:hover {
        color: var(--dt-text);
    }
    .el-dock-live-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }
    .el-dock-pill-btn {
        height: 30px;
        padding: 0 11px;
        border-radius: 999px;
        border: 0;
        background: var(--dt-surface);
        color: var(--dt-text);
        font-size: 11.5px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        cursor: pointer;
    }
    .el-dock-pill-btn.call {
        background: var(--dt-cta);
        color: var(--dt-cta-fg);
        border-color: transparent;
    }
    .el-dock-pill-btn.call.is-hangup {
        background: #ef4444 !important;
        border-color: #ef4444 !important;
        color: var(--dt-cta-fg) !important;
    }
    .el-dock-quick-row {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        width: 100%;
        justify-content: center;
        margin-top: auto;
        padding-top: 6px;
    }
    .el-prv-widget-pane {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }
    .el-prv-widget-browser-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 18px;
        background: var(--dt-surface-2, #f5f4f2);
        border-bottom: 1px solid var(--dt-border, rgba(12,10,9,0.08));
    }
    .el-prv-browser-dots {
        display: flex;
        gap: 6px;
    }
    .el-prv-browser-dots span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--dt-faint) 35%, transparent);
    }
    .el-prv-browser-url {
        font-size: 12px;
        padding: 4px 14px;
        border-radius: 999px;
        background: var(--dt-surface);
        border: 0;
        color: var(--dt-muted);
    }
    .el-prv-widget-stage-wrap {
        flex: 1;
        position: relative;
        overflow: hidden;
        background: var(--dt-bg, #faf9f5);
    }
    .el-prv-simulated-site {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 32px;
        text-align: center;
    }
    .el-prv-sim-kicker {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        color: var(--dt-muted);
        margin-bottom: 8px;
        display: block;
    }
    .el-prv-sim-hero h4 {
        font-size: 20px;
        font-weight: 600;
        color: var(--dt-text);
        margin: 0 0 8px;
    }
    .el-prv-sim-hero p {
        font-size: 13.5px;
        color: var(--dt-muted);
        max-width: 460px;
        margin: 0 auto;
    }
    .el-prv-sim-launcher {
        position: absolute;
        bottom: 28px;
        right: 28px;
    }
    @media (max-width: 960px) {
        .el-prv-voice-grid {
            grid-template-columns: 1fr;
            overflow-y: auto;
        }
    }

    /* Exact Preview Stage from aiagents.html + 3D Conic Metallic Fluid Motion & Live Voice/Chat */
    .aag-prv-stage {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 20px 20px 16px;
      text-align: center;
      width: 100%;
      box-sizing: border-box;
      overflow-y: auto;
    }
    .aag-big-conic-orb-wrap {
      --aag-orb-glow: rgba(45, 212, 191, 0.45);
      --aag-orb-ring: rgba(45, 212, 191, 0.62);
      --orb-energy: 0;
      position: relative;
      width: 192px;
      height: 192px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 4px 0 18px;
      flex-shrink: 0;
      animation: dui-legacy-modules-aiagentsedit-aagOrbFloat3D 3.8s ease-in-out infinite;
    }
    @keyframes dui-legacy-modules-aiagentsedit-aagOrbFloat3D {
      0%, 100% { transform: translateY(0px) scale(calc(1 + var(--orb-energy, 0) * 0.16)); }
      50%      { transform: translateY(-6px) scale(calc(1.03 + var(--orb-energy, 0) * 0.18)); }
    }
    /* Stationary 3D Specular Glass Highlight Lens on top of spinning conic orb */
    .aag-big-conic-orb-wrap::after {
      content: '';
      position: absolute;
      inset: 4px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0.15) 32%, transparent 62%),
        radial-gradient(circle at 74% 78%, rgba(0, 0, 0, 0.28) 0%, transparent 55%);
      box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.38);
      pointer-events: none;
      z-index: 3;
    }
    .aag-orb-ring {
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 1.5px solid var(--aag-orb-ring, rgba(45, 212, 191, 0.6));
      opacity: 0;
      pointer-events: none;
      z-index: 1;
    }
    .aag-big-conic-orb-wrap:hover .aag-orb-ring.r1,
    .aag-big-conic-orb-wrap.is-calling .aag-orb-ring.r1 {
      animation: dui-legacy-modules-aiagentsedit-aagOrbRingWave 2s infinite ease-out;
    }
    .aag-big-conic-orb-wrap.is-calling .aag-orb-ring.r2 {
      animation: dui-legacy-modules-aiagentsedit-aagOrbRingWave 2s infinite 0.65s ease-out;
    }
    @keyframes dui-legacy-modules-aiagentsedit-aagOrbRingWave {
      0%   { transform: scale(0.94); opacity: 0.85; }
      100% { transform: scale(1.34); opacity: 0; }
    }
    .aag-big-conic-orb {
      width: 184px;
      height: 184px;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
      z-index: 2;
      background: conic-gradient(from 180deg, #2dd4bf, #0d9488, #042f2e, #99f6e4, #2dd4bf);
      box-shadow:
        inset 0 0 28px rgba(255, 255, 255, 0.42),
        0 22px 56px var(--aag-orb-glow, rgba(45, 212, 191, 0.44));
      animation: dui-legacy-modules-aiagentsedit-aagConicRotate 5.8s linear infinite;
      cursor: pointer;
      transition: background 0.35s ease, box-shadow 0.35s ease;
    }
    /* Crisp 3D metallic sheen layer inside the conic orb (preserves the sharp cone vertex!) */
    .aag-big-conic-orb::before {
      content: '';
      position: absolute;
      inset: -8%;
      border-radius: 50%;
      background: conic-gradient(from 90deg at 46% 54%, rgba(255,255,255,0.28), transparent 30%, rgba(0,0,0,0.18) 62%, transparent 88%, rgba(255,255,255,0.28));
      mix-blend-mode: overlay;
      opacity: 0.75;
      animation: dui-legacy-modules-aiagentsedit-aagConicCounterRotate 3.4s ease-in-out infinite alternate;
      pointer-events: none;
    }
    .aag-big-conic-orb-wrap.is-calling .aag-big-conic-orb {
      animation-duration: 2.1s !important;
      box-shadow:
        inset 0 0 34px rgba(255, 255, 255, 0.6),
        0 0 38px var(--aag-orb-ring, rgba(45, 212, 191, 0.7)),
        0 26px 68px var(--aag-orb-glow, rgba(45, 212, 191, 0.6));
    }
    @keyframes dui-legacy-modules-aiagentsedit-aagConicRotate {
      0%   { transform: rotate(0deg) scale(1); }
      50%  { transform: rotate(180deg) scale(1.03); }
      100% { transform: rotate(360deg) scale(1); }
    }
    @keyframes dui-legacy-modules-aiagentsedit-aagConicCounterRotate {
      0%   { transform: rotate(360deg) scale(1.06); }
      50%  { transform: rotate(180deg) scale(0.95); }
      100% { transform: rotate(0deg) scale(1.06); }
    }
    .aag-big-conic-callbtn {
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 0;
      background: var(--dt-surface);
      color: var(--dt-text);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      cursor: pointer;
      box-shadow: none;
      transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
    }
    .aag-big-conic-callbtn:hover {
      transform: translateX(-50%) scale(1.08);
    }
    .aag-big-conic-callbtn.is-hangup {
      background: #ef4444 !important;
      color: var(--dt-cta-fg) !important;
      border-color: #ef4444 !important;
      box-shadow: none !important;
    }
    /* Interactive Color Swatches under Orb */
    .aag-prv-color-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin: 0 0 14px;
    }
    .aag-color-swatch {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.22);
      cursor: pointer;
      padding: 0;
      box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);
      transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .aag-color-swatch:hover,
    .aag-color-swatch.is-active {
      transform: scale(1.22);
      border-color: var(--dt-text, #ffffff);
      box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.6), 0 4px 12px rgba(0, 0, 0, 0.35);
    }
    .aag-btn-use-tpl {
      height: 34px;
      padding: 0 16px;
      border-radius: 999px;
      border: 0;
      background: var(--dt-cta);
      color: var(--dt-cta-fg);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.12s ease, background 0.12s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .aag-btn-use-tpl.is-hangup {
      background: #ef4444 !important;
      color: var(--dt-cta-fg) !important;
    }
    .aag-btn-use-tpl:hover {
      background: var(--dt-cta-hover);
      transform: translateY(-1px);
    }
    .aag-btn-dark-pill {
      height: 34px;
      padding: 0 14px;
      border-radius: 999px;
      border: 0;
      background: var(--dt-cta);
      color: var(--dt-cta-fg);
      font-size: 12.5px;
      font-weight: 500;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .aag-btn-dark-pill:hover {
      background: var(--dt-cta);
      color: var(--dt-cta-fg);
    }
    :scope:not([data-bs-theme="dark"]) .aag-btn-use-tpl {
      background: var(--dt-cta);
      color: var(--dt-cta-fg);
    }
    :scope:not([data-bs-theme="dark"]) .aag-btn-dark-pill {
      background: var(--dt-app);
      border-color: transparent;
      color: var(--el-ink);
    }
    /* Live Voice & Real Chat Box inside .aag-prv-stage */
    .aag-prv-live-box {
      width: 100%;
      max-width: 420px;
      margin-top: auto;
      background: var(--dt-surface);
      border: 0;
      border-radius: 16px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      text-align: left;
      box-sizing: border-box;
    }
    :scope:not([data-bs-theme="dark"]) .aag-prv-live-box {
      background: var(--dt-surface);
      border-color: transparent;
      box-shadow: none;
    }
    .aag-prv-voice-strip {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11.5px;
      color: var(--dt-muted);
      padding-bottom: 6px;
      border-bottom: 1px solid transparent;
    }
    .aag-prv-live-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--dt-surface);
      flex-shrink: 0;
    }
    .aag-prv-live-dot.is-live {
      background: #22c55e;
      box-shadow: none;
    }
    .aag-prv-voice-state {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .aag-prv-wave-bars {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      height: 20px;
    }
    .aag-prv-wave-bars span {
      width: 2.5px;
      height: 5px;
      border-radius: 99px;
      background: #2dd4bf;
      opacity: 0.35;
      transition: height 0.07s ease, opacity 0.07s ease;
    }
    .aag-prv-timer {
      font-family: monospace;
      font-size: 11px;
      color: var(--dt-muted);
    }
    .aag-prv-chat-log {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 150px;
      overflow-y: auto;
      padding: 2px 2px;
    }
    .aag-chat-msg {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 12.5px;
      line-height: 1.4;
    }
    .aag-chat-msg.user {
      justify-content: flex-end;
    }
    .aag-chat-avatar {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 2px;
      box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.4);
      animation: dui-legacy-modules-aiagentsedit-aagConicRotate 6s linear infinite;
    }
    .aag-chat-bubble {
      background: var(--dt-surface-2);
      border: 0;
      border-radius: 12px;
      padding: 7px 10px;
      color: var(--dt-text);
      max-width: 88%;
    }
    :scope:not([data-bs-theme="dark"]) .aag-chat-bubble {
      background: var(--dt-surface-2);
      border-color: transparent;
      color: var(--dt-text);
    }
    .aag-chat-bubble.user {
      background: #0d9488;
      color: var(--dt-on-color);
      border-color: transparent;
    }
    .aag-prv-chat-form {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--dt-surface-2);
      border: 0;
      border-radius: 999px;
      padding: 3px 5px 3px 8px;
    }
    :scope:not([data-bs-theme="dark"]) .aag-prv-chat-form {
      background: var(--dt-surface-2);
      border-color: transparent;
    }
    .aag-prv-icon-btn {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 0;
      background: transparent;
      color: var(--dt-muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .aag-prv-icon-btn:hover,
    .aag-prv-icon-btn.is-recording {
      color: #ef4444;
      background: rgba(239, 68, 68, 0.12);
    }
    .aag-prv-chat-input {
      flex: 1;
      border: 0;
      background: transparent;
      color: var(--dt-text);
      font-size: 12.5px;
      outline: none;
      height: 28px;
    }
    :scope:not([data-bs-theme="dark"]) .aag-prv-chat-input {
      color: var(--dt-text);
    }
    .aag-prv-send-btn {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 0;
      background: var(--dt-cta);
      color: var(--dt-cta-fg);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
    }

    /* ── Prueba REAL en el dock (06-11-2026): el motor webagentai en modo studio-inline dentro de un marco fijo y pegajoso
       (el motor pinta a pantalla completa: el iframe le da el tamaño). Sin sombras ni degradados propios. ── */
    .ai-agent-editor #aagPrvStage.el-live-stage {
      padding: 12px;
      gap: 10px;
      align-items: stretch;
      justify-content: flex-start;
      overflow: visible;
    }
    .ai-agent-editor .el-live-frame {
      position: sticky;
      top: calc(var(--dt-topbar-h, 44px) + 12px);
      height: min(700px, calc(100vh - var(--dt-topbar-h, 44px) - 120px));
      min-height: 460px;
      border: 0;
      border-radius: 12px;
      overflow: hidden;
      background: var(--dt-surface);
    }
    .ai-agent-editor .el-live-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
    .ai-agent-editor .el-live-empty {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 24px;
      text-align: center;
      font-size: 13px;
      line-height: 1.45;
      color: var(--dt-muted);
      background: var(--dt-surface);
    }
    .ai-agent-editor .el-live-empty[hidden],
    .ai-agent-editor .el-live-unsaved[hidden] { display: none; }
    .ai-agent-editor .el-live-empty i {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      border: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: var(--dt-text);
    }
    .ai-agent-editor .el-live-unsaved {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 8px 8px 12px;
      border: 0;
      border-radius: 12px;
      background: var(--dt-surface);
      font-size: 12.5px;
      line-height: 1.4;
      text-align: left;
      color: var(--dt-text);
    }
    .ai-agent-editor .el-live-unsaved .aag-btn-use-tpl { flex-shrink: 0; white-space: nowrap; }
    /* Spotlight real: últimas conversaciones desplegables */
    .ai-agent-editor .el-spot-recent { margin-top: 16px; border: 0; border-radius: 12px; overflow: hidden; }
    .ai-agent-editor .el-spot-recent__head { padding: 10px 14px; border-bottom: 1px solid transparent; font-size: 13px; font-weight: 600; color: var(--dt-text); }
    .ai-agent-editor .el-spot-recent__empty { padding: 14px; font-size: 12.5px; color: var(--dt-muted); }
    .ai-agent-editor .el-spot-conv + .el-spot-conv { border-top: 1px solid transparent; }
    .ai-agent-editor .el-spot-conv__row {
      display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 0; background: transparent;
      color: var(--dt-text); text-align: left; cursor: pointer; font: inherit;
    }
    .ai-agent-editor .el-spot-conv__row:hover { background: var(--dt-hover); }
    .ai-agent-editor .el-spot-conv__row > .ti { color: var(--dt-muted); font-size: 15px; flex-shrink: 0; }
    .ai-agent-editor .el-spot-conv__main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
    .ai-agent-editor .el-spot-conv__prev { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ai-agent-editor .el-spot-conv__meta { font-size: 11.5px; color: var(--dt-muted); font-variant-numeric: tabular-nums; }
    .ai-agent-editor .el-spot-conv__chev { transition: transform var(--dt-dur-1, .12s) var(--dt-ease, ease); }
    .ai-agent-editor .el-spot-conv.is-open .el-spot-conv__chev { transform: rotate(180deg); }
    .ai-agent-editor .el-spot-conv__body { padding: 4px 14px 14px 39px; display: flex; flex-direction: column; gap: 8px; }
    .ai-agent-editor .el-spot-conv__body[hidden] { display: none; }
    .ai-agent-editor .el-spot-turn { font-size: 12.5px; line-height: 1.5; color: var(--dt-text); white-space: pre-wrap; word-break: break-word; }
    .ai-agent-editor .el-spot-turn__who { display: block; font-size: 11px; font-weight: 600; color: var(--dt-muted); }
    .ai-agent-editor .el-spot-turn--user .el-spot-turn__who { color: var(--dt-text); }

    /* El marco pegajoso necesita que el contenedor no sea de scroll: clip recorta igual que hidden sin serlo */
    @supports (overflow: clip) {
      .ai-agent-editor .ai-main-container { overflow: clip; }
    }
    @media (max-width: 1180px) {
      .ai-agent-editor .el-live-frame { position: relative; top: 0; height: min(640px, 78vh); }
    }

    /* Shared-surface focus keeps nested search fields borderless and visible to keyboard users. */
    :is(.ai-lang-search, .el-studio-inline-chatbar, .el-tpl-search-box, .el-aset-md-editor-wrap, .aag-prv-chat-form):focus-within {
        background: var(--dt-active);
        box-shadow: none;
    }
    .ai-agent-editor :is(.ai-input, .ai-select, .ai-textarea, .ai-lang-trigger, .dui-select__trigger):focus-visible,
    :is(.ai-form-modal, .ai-rag-modal-content, .ai-preview-modal, .el-tpl-modal-dialog, .el-prv-modal-dialog) :is(input, select, textarea, button):focus-visible,
    :is(.el-studio-inline-chatbar, .el-tpl-search-box, .aag-prv-chat-form) input:focus-visible,
    .el-aset-md-textarea:focus-visible {
        outline: 2px solid var(--dt-focus);
        outline-offset: -2px;
        box-shadow: none;
    }
    @media (forced-colors: active) {
        .ai-agent-editor :is(input, select, textarea, button, [tabindex]):focus-visible,
        :is(.ai-form-modal, .ai-rag-modal-content, .ai-preview-modal, .el-tpl-modal-dialog, .el-prv-modal-dialog) :is(input, select, textarea, button, [tabindex]):focus-visible {
            outline: 2px solid Highlight !important;
            outline-offset: 2px;
        }
    }

}
/* end dui-template-style modules/aiagentsedit:2 */
/* dui-template-style {"key":"modules/aibuilder:0","bytes":1048,"sha256":"b18768ae5f92153164d64d65268cecc5791d3154a185a8a2c2a75af5476b7421","media":null,"source_sha256":"b18768ae5f92153164d64d65268cecc5791d3154a185a8a2c2a75af5476b7421"} */
@scope (:root:has(template[data-dui-legacy-style="modules/aibuilder:0"])) {

    #akicontenidonormal[data-module="aibuilder"] {
        height: calc(100vh - var(--dt-topbar-h, 44px));
        height: calc(100dvh - var(--dt-topbar-h, 44px));
        min-height: 0;
        padding: 0 !important;
        overflow: hidden;
    }

    #akicontenidonormal[data-module="aibuilder"] #aibuilderWrap,
    #akicontenidonormal[data-module="aibuilder"] #aibuilderFrame {
        width: 100%;
        height: 100%;
    }

    #akicontenidonormal[data-module="aibuilder"] #aibuilderWrap {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    #akicontenidonormal[data-module="aibuilder"] .aibuilder-section-header {
        flex: 0 0 auto;
        padding: 10px 20px;
        border-bottom: 1px solid var(--bs-border-color);
        background: var(--bs-body-bg);
    }

    #akicontenidonormal[data-module="aibuilder"] #aibuilderFrame {
        position: static;
        display: block;
        flex: 1 1 0;
        min-height: 0;
        height: 0;
        border: 0;
    }

}
/* end dui-template-style modules/aibuilder:0 */
/* dui-template-style {"key":"modules/aimusicstudio:0","bytes":83444,"sha256":"da29ff986c60d2995028deea5d27c3c5b37d22992d3480b85ca784189981bb81","media":null,"source_sha256":"7c51faa613a08b025c8190f4590589ba40c28b544f6d079a737234054c10fdbc"} */
@scope (:root:has(template[data-dui-legacy-style="modules/aimusicstudio:0"])) {

    #akicontenidonormal[data-module="aimusicstudio"] {
        --ams-bg: var(--dt-app);
        --ams-surface: var(--dt-surface);
        --ams-surface-2: var(--dt-surface-2);
        --ams-surface-3: var(--dt-surface-3);
        --ams-border: var(--dt-border);
        --ams-border-strong: var(--dt-border-strong);
        --ams-text: var(--dt-text);
        --ams-muted: var(--dt-muted);
        --ams-primary: var(--dt-cta);
        --ams-primary-rgb: var(--dt-cta-rgb);
        --ams-focus: var(--dt-focus, #2563eb);
        --ams-focus-ring: var(--dt-focus-ring, rgba(37, 99, 235, .14));
        --ams-shadow-sm: none;
        --ams-shadow-lg: var(--dt-pop-shadow);
        --ams-player-shadow: none; /* 26-10: sin sombras */
        --ams-radius-sm: 8px;
        --ams-radius-md: 12px;
        --ams-radius-lg: 16px;
        --ams-radius-xl: 24px;
        --ams-control-h: 40px;
        --ams-player-h: 80px;
        --ams-content-max: 1240px;
        --ams-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
        height: calc(100vh - var(--dt-topbar-h, 44px));
        height: calc(100dvh - var(--dt-topbar-h, 44px));
        min-height: 0;
        padding: 0 !important;
        overflow: hidden;
        position: relative;
        container-type: inline-size;
        background: var(--ams-bg);
    }
    [data-bs-theme="dark"] #akicontenidonormal[data-module="aimusicstudio"] {
        --ams-bg: var(--dt-app);
        --ams-surface: var(--dt-surface);
        --ams-surface-2: var(--dt-surface-2);
        --ams-surface-3: var(--dt-surface-3);
        --ams-border: var(--dt-border);
        --ams-border-strong: var(--dt-border-strong);
        --ams-text: var(--dt-text);
        --ams-muted: var(--dt-muted);
        --ams-focus: var(--dt-focus, #60a5fa);
        --ams-focus-ring: var(--dt-focus-ring, rgba(96, 165, 250, .18));
        --ams-shadow-sm: none;
        --ams-shadow-lg: var(--dt-pop-shadow);
        --ams-player-shadow: none;
        background: var(--ams-bg);
    }

    .ams-page {
        height: 100%;
        min-height: 0;
        overflow: auto;
        background: var(--ams-bg);
        color: var(--ams-text);
        font-family: inherit;
        padding: 24px 20px 48px;
        box-sizing: border-box;
        position: relative;
    }
    .ams-page.has-player { padding-bottom: calc(48px + var(--ams-player-h, 80px)); }

    .ams-shell {
        width: 100%;
        max-width: var(--ams-content-max);
        margin: 0 auto;
    }

    /* === HEADER === */
    .ams-header { display: flex; flex-direction: column; gap: 16px; margin-bottom: 8px; }
    .ams-title {
        margin: 0; font-size: 36px; font-weight: 700; letter-spacing: -.03em;
        color: var(--ams-text); line-height: 1.1;
    }
    .ams-heading { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .ams-beta {
        display: inline-flex; align-items: center; height: 23px; padding: 0 8px; border-radius: 999px;
        background: var(--ams-surface-2, var(--ams-bg-2, #f3f4f6)); color: var(--ams-muted); font-size: 11px; font-weight: 650;
    }
    .ams-tabs-row {
        display: flex; align-items: center; justify-content: space-between; gap: 16px;
        border-bottom: 1px solid var(--ams-border); flex-wrap: wrap;
    }
    .ams-tabs { display: flex; align-items: center; gap: 2px; }
    .ams-tab {
        appearance: none; border: none; background: transparent; color: var(--ams-muted);
        font: inherit; font-size: 14px; font-weight: 500; padding: 12px 14px 13px; cursor: pointer; position: relative;
        border-radius: 0; transition: color .15s;
    }
    .ams-tab:hover { color: var(--ams-text); }
    .ams-tab.active { color: var(--ams-text); font-weight: 600; }
    .ams-tab.active::after {
        content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
        background: var(--ams-text); border-radius: 2px 2px 0 0;
    }
    .ams-tabs-side { display: flex; align-items: center; gap: 2px; }
    .ams-tab-side {
        appearance: none; border: none; background: transparent; color: var(--ams-muted);
        font: inherit; font-size: 13px; font-weight: 500; padding: 8px 12px; cursor: pointer; border-radius: 8px;
        transition: color .15s, background .15s;
    }
    .ams-tab-side:hover { color: var(--ams-text); background: var(--ams-surface-2); }

    /* === TRACK TABLE === */
    .ams-table-wrap { position: relative; }
    .ams-list-head, .ams-track {
        display: grid;
        grid-template-columns: minmax(240px, 1.5fr) minmax(180px, 1.3fr) 80px 56px 148px;
        gap: 12px; align-items: center;
    }
    .ams-list-head {
        position: sticky; top: 0; z-index: 2;
        padding: 10px 10px 10px; font-size: 11px; font-weight: 650; color: var(--ams-muted);
        text-transform: uppercase; letter-spacing: .05em;
        background: color-mix(in srgb, var(--ams-bg) 92%, transparent);
        backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--ams-border);
    }
    .ams-track {
        padding: 10px; border-radius: 12px; transition: background .12s;
        border-bottom: 1px solid transparent;
    }
    .ams-track + .ams-track { border-top: 1px solid var(--ams-border); }
    .ams-track:hover { background: var(--ams-surface); }
    .ams-track.playing { background: rgba(var(--ams-primary-rgb),.05); }

    .ams-track-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .ams-thumb {
        width: 46px; height: 46px; border-radius: 10px; flex-shrink: 0; position: relative; overflow: hidden;
        background-color: #334155; background-size: cover; background-position: center;
    }
    .ams-thumb > img {
        position: absolute; inset: 0; z-index: 0;
        width: 100%; height: 100%; display: block; object-fit: cover; object-position: center;
    }
    .ams-thumb-play {
        position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
        background: rgba(0,0,0,.42); color: var(--dt-on-color); border: none; cursor: pointer; font-size: 17px; z-index: 2;
    }
    .ams-track:hover .ams-thumb-play, .ams-track.playing .ams-thumb-play { display: flex; }
    .ams-track-meta { min-width: 0; }
    .ams-track-title {
        font-size: 14px; font-weight: 650; color: var(--ams-text);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ams-track-sub {
        font-size: 12px; color: var(--ams-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
    }
    .ams-waveform { width: 100%; height: 34px; display: block; cursor: pointer; opacity: .85; }
    .ams-track.playing .ams-waveform, .ams-track:hover .ams-waveform { opacity: 1; }
    .ams-cell { font-size: 13px; color: var(--ams-muted); font-variant-numeric: tabular-nums; }
    .ams-actions {
        display: flex; align-items: center; justify-content: flex-end; gap: 2px;
        opacity: .35; transition: opacity .15s;
    }
    .ams-track:hover .ams-actions, .ams-track.playing .ams-actions { opacity: 1; }
    .ams-action {
        width: 32px; height: 32px; border: none; background: transparent; color: var(--ams-muted);
        border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
        cursor: pointer; font-size: 16px; transition: background .12s, color .12s;
    }
    .ams-action:hover { background: var(--ams-surface-2); color: var(--ams-text); }
    .ams-action.active { color: var(--ams-primary); }

    .ams-empty {
        padding: 64px 24px; text-align: center; color: var(--ams-muted);
        border: 1px dashed var(--ams-border); border-radius: 16px; background: var(--ams-surface);
        margin-top: 12px;
    }
    .ams-empty i { font-size: 32px; display: block; margin-bottom: 12px; opacity: .65; }
    .ams-empty-title { font-size: 16px; font-weight: 650; color: var(--ams-text); margin-bottom: 6px; }
    .ams-panel { display: none; }
    .ams-panel.active { display: block; }

    audio.ams-audio { display: none; }

    /* === PLAYER (barra fija inferior; los controles los pinta dUI.Player, variante bar, sobre #amsAudio) === */
    .ams-player {
        position: fixed; left: var(--dt-sidebar-w, 0px); right: 0; bottom: 0;
        height: var(--ams-player-h); z-index: 40;
        background: var(--ams-surface); border-top: 1px solid var(--ams-border);
        transform: translateY(100%); opacity: 0; pointer-events: none;
        transition: transform .18s cubic-bezier(.4,0,.2,1), opacity .18s ease;
    }
    .ams-player.show {
        transform: translateY(0); opacity: 1; pointer-events: auto;
    }
    .ams-player-inner {
        height: 100%; display: flex; align-items: center; gap: 24px;
        padding: 0 20px; max-width: 100%; box-sizing: border-box;
    }
    .ams-player-meta { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 0 1 280px; }
    .ams-player-thumb {
        width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0; overflow: hidden;
        position: relative; background-color: #334155; background-size: cover; background-position: center;
    }
    .ams-player-thumb > img {
        position: absolute; inset: 0; width: 100%; height: 100%; display: block;
        object-fit: cover; object-position: center;
    }
    .ams-cover-image[hidden], .ams-player-thumb > img[hidden] { display: none; }
    .ams-player-title {
        font-size: 14px; font-weight: 650; color: var(--ams-text);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ams-player-sub {
        font-size: 12px; color: var(--ams-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
    }
    .ams-player-center { flex: 1 1 auto; min-width: 0; }
    /* La barra dUI va desnuda dentro del reproductor fijo (la linea superior ya la pone .ams-player). Su .dpl-slot lleva los ±10 s
       y el volumen del módulo (la variante bar no los pinta): display:contents los mete en la fila y order los coloca como antes:
       -10 · play · +10 · onda · tiempo · volumen · velocidad. */
    .ams-player-center .dpl--bar { width: 100%; max-width: none; border: 0; border-radius: 0; background: transparent; padding: 0; gap: 8px;
        flex-wrap: nowrap; align-items: center; } /* una sola linea: la onda cede ancho (26-10, la barra saltaba a 3 filas en 80 px) */
    .ams-player-center .dpl--bar .dpl-wave, .ams-player-center .dpl--bar .dpl-scrub { flex: 1 1 0; width: auto; min-width: 120px; }
    .ams-player-center .dpl--bar > .dpl-slot { display: contents; }
    .ams-player-center .dpl--bar .ams-dpl-back { order: -1; }
    .ams-player-center .dpl--bar .ams-dpl-fwd { order: 1; }
    .ams-player-center .dpl--bar .dpl-wave, .ams-player-center .dpl--bar .dpl-scrub { order: 2; }
    .ams-player-center .dpl--bar .dpl-time { order: 3; }
    .ams-player-center .dpl--bar .dpl-vol { order: 4; }
    .ams-player-center .dpl--bar .dpl-chip { order: 5; }
    .ams-player-center .dpl--bar .dpl-volbar { width: 64px; }
    .ams-player-center .dpl--bar .dpl-volpct { display: none; }
    .ams-player-center .ams-audio-native { display: block; width: 100%; }
    .ams-player-right { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; margin-left: auto; }
    .ams-player-util {
        width: 34px; height: 34px; border: none; background: transparent; color: var(--ams-muted);
        border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
        cursor: pointer; font-size: 18px; transition: color .12s, background .12s;
    }
    .ams-player-util:hover { color: var(--ams-text); background: var(--ams-surface-2); }

    @media (prefers-reduced-motion: reduce) {
        .ams-player { transition: none !important; transform: none !important; opacity: 1; }
        .ams-player:not(.show) { display: none; }
    }

    @media (max-width: 900px) {
        .ams-page { padding: 18px 14px 48px; }
        .ams-page.has-player { padding-bottom: calc(48px + var(--ams-player-h)); }
        .ams-title { font-size: 28px; }
        .ams-list-head { display: none; }
        .ams-track {
            grid-template-columns: 1fr auto;
            grid-template-areas: "main actions" "wave wave" "meta meta";
            gap: 8px 10px;
        }
        .ams-track-main { grid-area: main; }
        .ams-waveform { grid-area: wave; }
        .ams-track .ams-cell-dur { grid-area: meta; }
        .ams-track .ams-cell-bpm { display: none; }
        .ams-actions { grid-area: actions; opacity: 1; }
        .ams-player { left: 0 !important; }
        .ams-player-meta { flex: 0 1 130px; }
        .ams-player-sub { display: none; }
    }

    /* === ELEVENLABS-INSPIRED REFRESH === */
    #akicontenidonormal[data-module="aimusicstudio"] *,
    #akicontenidonormal[data-module="aimusicstudio"] *::before,
    #akicontenidonormal[data-module="aimusicstudio"] *::after { box-sizing: border-box; }

    #akicontenidonormal[data-module="aimusicstudio"] .ams-page {
        height: 100%; min-height: 0; padding: 22px 20px 42px;
        scrollbar-gutter: stable; overscroll-behavior: contain;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-page.has-player {
        padding-bottom: calc(42px + var(--ams-player-h, 80px));
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-shell {
        width: 100%; max-width: var(--ams-content-max); margin: 0 auto;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-header {
        gap: 8px; margin-bottom: 20px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-title {
        margin: 0 !important; color: var(--ams-text) !important;
        font-size: 28px; line-height: 34px; font-weight: 400; letter-spacing: -.035em;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-tabs-row {
        min-height: 42px; gap: 12px; border-color: var(--ams-border); flex-wrap: nowrap;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-tabs,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-tabs-side { gap: 0; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-tab {
        min-height: 42px; padding: 10px 12px 11px; font-size: 13px; font-weight: 500;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-tab.active { font-weight: 600; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-tab.active::after { left: 8px; right: 8px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-tab-side {
        min-height: 34px; padding: 7px 10px; font-size: 12px; border-radius: var(--ams-radius-sm);
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-tab-side:has(.ams-tab-badge) { display: inline-flex; align-items: center; gap: 5px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-tab-badge {
        padding: 1px 5px; border-radius: 999px; background: var(--ams-surface-2);
        color: var(--ams-muted); font-size: 8px; line-height: 12px; font-weight: 650;
    }

    #akicontenidonormal[data-module="aimusicstudio"] .ams-table-wrap {
        overflow: hidden; border: 0; border-radius: var(--ams-radius-lg);
        background: var(--ams-surface); box-shadow: none;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-table-wrap.is-empty .ams-list-head { display: none; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-table-wrap.is-empty .ams-empty {
        margin: 0; border-radius: 0; box-shadow: none;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-list-head,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-track {
        grid-template-columns: minmax(180px, 1.45fr) minmax(100px, 1.25fr) 58px 44px 128px;
        gap: 8px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-list-head {
        min-height: 38px; padding: 9px 12px; background: var(--ams-surface-2);
        border-color: var(--ams-border); backdrop-filter: none; font-size: 10px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-track {
        min-height: 70px; padding: 10px 12px; border-radius: 0; border: 0; background: transparent;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-track + .ams-track { border-top: 1px solid var(--ams-border); }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-track:hover { background: color-mix(in srgb, var(--ams-text) 3.8%, transparent); }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-track.playing { background: color-mix(in srgb, var(--ams-primary) 7%, transparent); }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-track-main { gap: 10px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-thumb { width: 40px; height: 40px; border-radius: 9px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-track-title { font-size: 13px; font-weight: 620; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-track-sub { font-size: 11px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-waveform { height: 32px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-cell { font-size: 11px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-actions { opacity: .55; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-action { width: 30px; height: 30px; font-size: 15px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-thumb-play {
        inset: 50% auto auto 50%; width: 31px; height: 31px; display: flex; opacity: 0; pointer-events: none;
        border: 1px solid rgba(255, 255, 255, .24); border-radius: 50%; background: rgba(8, 10, 14, .82);
        color: var(--dt-on-color); box-shadow: 0 4px 14px rgba(0, 0, 0, .24); backdrop-filter: blur(5px);
        transform: translate(-50%, -50%) scale(.82);
        transition: opacity .14s ease, transform .14s ease, background .14s ease;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-track:hover .ams-thumb-play,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-thumb:focus-within .ams-thumb-play,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-track.playing .ams-thumb-play {
        opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1);
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-thumb-play:hover { background: rgba(0, 0, 0, .96); }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-thumb > img { transition: transform .18s ease, filter .18s ease; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-track:hover .ams-thumb > img { transform: scale(1.045); filter: brightness(.78); }

    #akicontenidonormal[data-module="aimusicstudio"] .ams-play-glyph {
        position: relative; display: inline-block; width: 16px; height: 16px; flex: 0 0 16px;
        color: currentColor; font-style: normal; line-height: 1;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-play-glyph::before {
        content: ""; position: absolute; left: 54%; top: 50%; width: 0; height: 0;
        border-top: 6px solid transparent; border-bottom: 6px solid transparent;
        border-left: 9px solid currentColor; transform: translate(-44%, -50%);
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-play-glyph::after { content: none; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-play-glyph.is-pause::before,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-play-glyph.is-pause::after {
        content: ""; position: absolute; top: 1px; width: 4px; height: 14px;
        border: 0; border-radius: 999px; background: currentColor; transform: none;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-play-glyph.is-pause::before { left: 2px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-play-glyph.is-pause::after { left: auto; right: 2px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-thumb-play .ams-play-glyph {
        width: 13px; height: 13px; flex-basis: 13px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-thumb-play .ams-play-glyph::before {
        border-top-width: 5px; border-bottom-width: 5px; border-left-width: 8px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-thumb-play .ams-play-glyph.is-pause::before,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-thumb-play .ams-play-glyph.is-pause::after {
        top: 1px; width: 3px; height: 12px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-empty {
        margin: 18px 0 0; padding: 70px 24px; border: 0; border-radius: var(--ams-radius-lg);
        background: var(--ams-surface); box-shadow: none;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-empty i { font-size: 30px; margin-bottom: 10px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-empty-title { font-size: 15px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-empty-action {
        margin-top: 16px; min-height: 34px; padding: 7px 13px; border: 0;
        border-radius: 9px; background: var(--ams-surface); color: var(--ams-text); font: inherit;
        font-size: 12px; font-weight: 600; cursor: pointer;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-empty-action:hover { background: var(--ams-surface-2); }

    #akicontenidonormal[data-module="aimusicstudio"] .ams-player {
        position: absolute; inset-inline: 0; left: 0 !important; right: 0; bottom: 0;
        width: 100%; height: var(--ams-player-h, 80px); min-height: var(--ams-player-h, 80px);
        z-index: 60; overflow: visible; box-sizing: border-box;
        color: var(--ams-text); background: var(--ams-surface); border-top: 1px solid var(--ams-border);
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-player-inner {
        width: 100%; max-width: none; height: 100%; margin: 0; padding: 10px 18px;
        display: grid; grid-template-columns: minmax(200px, 1fr) minmax(360px, 760px) minmax(84px, 1fr);
        align-items: center; gap: 18px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-player-meta { min-width: 0; gap: 10px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-player-copy { min-width: 0; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-player-thumb { width: 44px; height: 44px; border-radius: 9px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-player-title { font-size: 13px; font-weight: 650; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-player-sub { font-size: 11px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-player-center { width: 100%; min-width: 0; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-player-right {
        min-width: 0; justify-content: flex-end; gap: 2px; margin: 0;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-player-util { width: 32px; height: 32px; font-size: 17px; border-radius: 50%; }

    /* === GENERATIONS / PROJECT HISTORY === */
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generations-workspace {
        width: 100%; max-width: 1040px; margin: 0 auto; display: grid;
        grid-template-columns: minmax(0, 1fr); gap: 42px; align-items: start;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-composer {
        position: relative; top: auto; width: 100%; max-width: 1040px; min-width: 0;
        margin: 22px auto 0; padding: 0; border: 0; background: transparent; box-shadow: none;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-textarea {
        display: block; width: 100%; min-width: 0; resize: none; padding: 10px;
        border: 0; border-radius: 9px; outline: 0;
        background: var(--ams-surface); color: var(--ams-text); font: inherit; font-size: 12px; line-height: 18px;
        transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-textarea::placeholder { color: var(--ams-muted); opacity: .7; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-textarea:focus {
        border-color: var(--ams-focus); box-shadow: 0 0 0 3px var(--ams-focus-ring); background: var(--ams-surface);
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-prompt-card {
        overflow: hidden; border: 0; border-radius: 18px;
        background: var(--ams-surface); box-shadow: none;
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-prompt-card:focus-within {
        border-color: var(--ams-focus); box-shadow: 0 0 0 3px var(--ams-focus-ring);
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-prompt-card .ams-generation-prompt {
        height: 142px; min-height: 142px; padding: 18px 20px; border: 0; border-radius: 0;
        background: transparent; font-size: 15px; line-height: 24px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-prompt-card .ams-generation-prompt:focus {
        border-color: transparent; box-shadow: none; background: transparent;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-prompt-footer {
        padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
        border-top: 1px solid var(--ams-border); background: color-mix(in srgb, var(--ams-surface-2) 42%, var(--ams-surface));
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-lyrics { height: 104px; padding-bottom: 30px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-lyrics:disabled {
        background: var(--ams-surface-2); color: var(--ams-muted); cursor: not-allowed;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-submit {
        width: 100%; min-height: 50px; margin-top: 12px; padding: 7px 8px 7px 16px;
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        border: 0; border-radius: 9999px; background: var(--ams-text); color: var(--ams-surface);
        font: inherit; font-size: 13px; line-height: 18px; font-weight: 500; cursor: pointer;
        transition: opacity .15s ease, transform .15s ease;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-submit:hover:not(:disabled) { transform: none; opacity: .9; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-submit:disabled { opacity: .38; cursor: not-allowed; transform: none; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-submit.is-processing { opacity: .58; }

    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-primary-lyrics {
        margin-top: 12px; padding: 12px; border: 0; border-radius: 12px; background: var(--ams-surface);
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-summary {
        margin-top: 10px; padding: 0 2px; color: var(--ams-muted); font-size: 9.5px; line-height: 1.45;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-service-status { min-height: 14px; color: var(--ams-muted); font-size: 9px; line-height: 14px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-service-status.is-error { color: #dc2626; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-visually-hidden {
        position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
        margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
    }

    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-history {
        min-width: 0; padding-top: 24px; border-top: 1px solid var(--ams-border);
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-history-title {
        position: static; width: auto; height: auto; padding: 0; margin: 0 0 12px; overflow: visible;
        clip: auto; white-space: normal; border: 0; color: var(--ams-text); font-size: 18px; line-height: 24px; font-weight: 700;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-toolbar {
        display: grid; grid-template-columns: minmax(190px, 1fr) 132px 36px; gap: 7px; align-items: center;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-search,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-search:hover,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-search:focus,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-search:focus-visible,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-search:focus-within,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-search:active {
        min-width: 0; height: 36px; padding: 0 10px; display: flex; align-items: center; gap: 7px;
        border: 1px solid var(--ams-border) !important; border-radius: 9px;
        background: var(--ams-surface) !important; outline: 0 !important; box-shadow: none !important;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-search > i { color: var(--ams-muted); font-size: 15px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-search input,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-search input:hover,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-search input:focus,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-search input:focus-visible,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-search input:active,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-search input:-webkit-autofill,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-search input:-webkit-autofill:hover,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-search input:-webkit-autofill:focus {
        flex: 1; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0;
        border: 0 !important; border-color: transparent !important; border-radius: 0 !important;
        outline: 0 !important; outline-color: transparent !important;
        box-shadow: none !important; background: transparent !important; color: var(--ams-text) !important;
        caret-color: var(--ams-text); font: inherit; font-size: 11px;
        -webkit-appearance: none; appearance: none;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-search input::placeholder { color: var(--ams-muted); }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-search-clear {
        width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent;
        color: var(--ams-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-search-clear:hover { color: var(--ams-text); background: var(--ams-surface-2); }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-search-clear[hidden] { display: none !important; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-sort-wrap { position: relative; min-width: 0; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-sort-wrap::after {
        content: '\ea5f'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
        color: var(--ams-muted); font-family: 'tabler-icons'; font-size: 13px; pointer-events: none;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-sort {
        appearance: none; width: 100%; height: 36px; padding: 0 29px 0 10px;
        border: 0; border-radius: 9px; outline: 0;
        background: var(--ams-surface); color: var(--ams-text); font: inherit; font-size: 11px; cursor: pointer;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-sort:focus {
        border-color: var(--ams-focus); box-shadow: 0 0 0 3px var(--ams-focus-ring);
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-density {
        width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px;
        background: var(--ams-surface); color: var(--ams-text); display: inline-flex; align-items: center;
        justify-content: center; font-size: 16px; cursor: pointer;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-density:hover,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-density[aria-pressed="true"] { background: var(--ams-surface-2); }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-filter-row {
        min-height: 30px; margin: 6px 0 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-filter,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-date-filter,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-date-filter:hover,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-date-filter:focus,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-date-filter:focus-within,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-date-filter:active {
        position: relative; min-height: 24px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 4px;
        border: 1px solid var(--ams-border) !important; border-radius: 999px;
        background: var(--ams-surface) !important; color: var(--ams-text);
        font: inherit; font-size: 10px; line-height: 16px; cursor: pointer;
        outline: 0 !important; box-shadow: none !important;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-filter:hover,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-filter[aria-pressed="true"],
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-date-filter:hover,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-date-filter:focus-within {
        background: var(--ams-surface-2) !important;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-date-filter.is-active,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-date-filter.is-active:focus-within {
        border-color: var(--ams-border-strong) !important; color: var(--ams-text);
        background: var(--ams-surface-2) !important;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-date-filter input,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-date-filter input:hover,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-date-filter input:focus,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-date-filter input:focus-visible,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-date-filter input:active {
        position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
        border: 0 !important; outline: 0 !important; box-shadow: none !important;
        background: transparent !important; -webkit-appearance: none; appearance: none;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generations-feed { display: grid; gap: 8px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generations-feed.is-compact { gap: 5px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-project {
        min-width: 0; overflow: hidden; border: 0; border-radius: 11px;
        background: var(--ams-surface); box-shadow: none;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-project-head {
        min-height: 31px; padding: 6px 9px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
        border-bottom: 1px solid var(--ams-border); background: color-mix(in srgb, var(--ams-surface-2) 54%, var(--ams-surface));
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-project-heading {
        min-width: 0; display: flex; align-items: center; gap: 6px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-project-name {
        min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        color: var(--ams-text); font-size: 10px; line-height: 16px; font-weight: 650;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-model-badge {
        flex: 0 0 auto; padding: 2px 6px; border-radius: 999px; background: var(--ams-surface-3);
        color: var(--ams-muted); font-size: 8px; line-height: 12px; font-weight: 600;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-open-row {
        flex: 0 0 auto; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-open {
        flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; border: 0; background: transparent;
        color: var(--ams-muted); font: inherit; font-size: 9px; line-height: 16px; text-decoration: none; cursor: pointer;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-open:hover { color: var(--ams-text); }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-open:focus-visible {
        outline: 2px solid var(--ams-focus); outline-offset: 2px; border-radius: 5px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-track {
        min-height: 52px; padding: 6px 8px; display: grid;
        grid-template-columns: 28px minmax(120px, 1fr) minmax(120px, 1.05fr) auto;
        gap: 8px; align-items: center; transition: background .12s ease;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-track + .ams-generation-track { border-top: 1px solid var(--ams-border); }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-track:hover { background: color-mix(in srgb, var(--ams-text) 3.8%, transparent); }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-track.playing { background: color-mix(in srgb, var(--ams-text) 6%, transparent); }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-track.is-pending { color: var(--ams-muted); }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-play {
        width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
        background: var(--ams-text); color: var(--ams-surface); display: inline-flex; align-items: center;
        justify-content: center; cursor: pointer;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-play:hover { transform: scale(1.04); }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-play .ams-play-glyph {
        width: 11px; height: 11px; flex-basis: 11px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-play .ams-play-glyph::before {
        border-top-width: 4px; border-bottom-width: 4px; border-left-width: 6px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-play .ams-play-glyph.is-pause::before,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-play .ams-play-glyph.is-pause::after {
        top: 1px; width: 3px; height: 10px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-spinner {
        width: 24px; height: 24px; border: 2px solid var(--ams-surface-3); border-top-color: var(--ams-muted);
        border-radius: 50%; animation: dui-legacy-modules-aimusicstudio-ams-generation-spin .8s linear infinite;
    }
    @keyframes dui-legacy-modules-aimusicstudio-ams-generation-spin { to { transform: rotate(360deg); } }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-spin { animation: dui-legacy-modules-aimusicstudio-ams-generation-spin .8s linear infinite; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-track-copy { min-width: 0; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-track-title {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ams-text);
        font-size: 11px; line-height: 16px; font-weight: 650;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-track-meta {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px;
        color: var(--ams-muted); font-size: 9px; line-height: 13px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-wave { min-width: 0; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-wave .ams-waveform { height: 28px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-pending-wave {
        width: 100%; height: 28px; opacity: .55;
        background-image: radial-gradient(circle, var(--ams-muted) 1.2px, transparent 1.4px);
        background-position: center; background-size: 12px 12px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-actions {
        display: flex; align-items: center; justify-content: flex-end; gap: 1px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-action {
        width: 27px; height: 27px; padding: 0; border: 0; border-radius: 7px; background: transparent;
        color: var(--ams-muted); display: inline-flex; align-items: center; justify-content: center;
        font-size: 15px; cursor: pointer;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-action:hover { background: var(--ams-surface-2); color: var(--ams-text); }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-action.active { color: var(--ams-primary); }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generations-feed.is-compact .ams-generation-track { min-height: 44px; padding-block: 4px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-no-results {
        margin-top: 8px; padding: 62px 20px; text-align: center; border: 0;
        border-radius: 12px; background: var(--ams-surface); color: var(--ams-muted); font-size: 12px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-no-results i {
        display: block; margin-bottom: 10px; color: var(--ams-muted); font-size: 26px;
    }

    @media (max-width: 900px) {
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generations-workspace {
            grid-template-columns: minmax(0, 1fr); gap: 32px;
        }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-track {
            grid-template-columns: 28px minmax(105px, 1fr) minmax(90px, .85fr) auto; gap: 6px;
        }
    }
    @container (max-width: 900px) {
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generations-workspace {
            grid-template-columns: minmax(0, 1fr); gap: 32px;
        }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-track {
            grid-template-columns: 28px minmax(105px, 1fr) minmax(90px, .85fr) auto; gap: 6px;
        }
    }
    @media (max-width: 767px) {
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generations-workspace { grid-template-columns: minmax(0, 1fr); gap: 28px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-toolbar { grid-template-columns: minmax(0, 1fr) 124px 36px; }
    }
    @container (max-width: 767px) {
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generations-workspace { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    }
    @media (max-width: 520px) {
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-toolbar {
            grid-template-columns: minmax(0, 1fr) 36px;
        }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-search { grid-column: 1 / -1; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-sort-wrap { grid-column: 1; grid-row: 2; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-density { grid-column: 2; grid-row: 2; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-project-head { align-items: flex-start; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-project-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-track {
            grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "play copy actions" ". wave wave";
            gap: 5px 7px; min-height: 76px;
        }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-play,
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-spinner { grid-area: play; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-track-copy { grid-area: copy; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-wave { grid-area: wave; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-actions { grid-area: actions; }
    }
    @container (max-width: 520px) {
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-toolbar { grid-template-columns: minmax(0, 1fr) 36px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-search { grid-column: 1 / -1; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-sort-wrap { grid-column: 1; grid-row: 2; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-density { grid-column: 2; grid-row: 2; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-project-head { align-items: flex-start; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-project-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-track {
            grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "play copy actions" ". wave wave";
            gap: 5px 7px; min-height: 76px;
        }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-play,
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-spinner { grid-area: play; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-track-copy { grid-area: copy; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-wave { grid-area: wave; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-actions { grid-area: actions; }
    }

    #akicontenidonormal[data-module="aimusicstudio"] :is(button, [role="slider"]):focus-visible {
        outline: 2px solid var(--ams-focus); outline-offset: 2px;
    }

    @media (max-width: 1023px) {
        #akicontenidonormal[data-module="aimusicstudio"] .ams-player-inner {
            grid-template-columns: minmax(160px, 1fr) minmax(300px, 2fr) minmax(72px, auto); gap: 12px;
        }
        /* la columna central ya no da para la barra de volumen: queda el botón de silencio */
        #akicontenidonormal[data-module="aimusicstudio"] .ams-player-center .dpl--bar .dpl-volbar { display: none; }
    }

    @media (min-width: 768px) and (max-width: 900px) {
        #akicontenidonormal[data-module="aimusicstudio"] .ams-list-head { display: grid; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-track { grid-template-areas: none; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-track-main,
        #akicontenidonormal[data-module="aimusicstudio"] .ams-waveform,
        #akicontenidonormal[data-module="aimusicstudio"] .ams-track .ams-cell-dur,
        #akicontenidonormal[data-module="aimusicstudio"] .ams-actions { grid-area: auto; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-track .ams-cell-bpm { display: block; }
    }

    @media (max-width: 767px) {
        #akicontenidonormal[data-module="aimusicstudio"] { --ams-player-h: 108px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-page { padding: 16px 14px 32px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-page.has-player {
            padding-bottom: calc(32px + var(--ams-player-h));
        }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-header { margin-bottom: 16px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-title { font-size: 24px; line-height: 30px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-tabs-row { overflow-x: auto; scrollbar-width: none; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-tabs-row::-webkit-scrollbar { display: none; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-tabs,
        #akicontenidonormal[data-module="aimusicstudio"] .ams-tabs-side { flex: 0 0 auto; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-list-head { display: none; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-track {
            min-height: 92px; grid-template-columns: minmax(0, 1fr) auto;
            grid-template-areas: "main actions" "wave meta"; gap: 8px 10px; padding: 11px;
        }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-track-main { grid-area: main; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-waveform { grid-area: wave; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-track .ams-cell-dur { grid-area: meta; align-self: center; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-track .ams-cell-bpm { display: none; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-actions { grid-area: actions; opacity: 1; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-action[data-act="remix"],
        #akicontenidonormal[data-module="aimusicstudio"] .ams-action[data-act="more"] { display: none; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-player { height: auto; min-height: var(--ams-player-h); }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-player-inner {
            padding: 8px 12px; grid-template-columns: minmax(0, 1fr) auto;
            grid-template-rows: 40px auto; grid-template-areas: "meta tools" "center center"; gap: 6px 10px;
        }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-player-meta { grid-area: meta; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-player-right { grid-area: tools; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-player-center { grid-area: center; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-player-center .dpl--bar .dpl-vol { display: none; } /* el móvil tiene volumen físico */
        #akicontenidonormal[data-module="aimusicstudio"] .ams-player-thumb { width: 40px; height: 40px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-player-sub,
        #akicontenidonormal[data-module="aimusicstudio"] .ams-player-info { display: none; }
    }

    @media (max-width: 560px) {
        /* datalyse-player.css parte la barra en dos líneas (la onda a ancho completo): la onda va detrás de la velocidad y el
           reproductor crece a 16 + 40 (meta) + 6 + 36 (controles) + 8 + 32 (onda) = 138 px; el padding de la página lo sigue. */
        #akicontenidonormal[data-module="aimusicstudio"] { --ams-player-h: 140px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-player-center .dpl--bar .dpl-wave,
        #akicontenidonormal[data-module="aimusicstudio"] .ams-player-center .dpl--bar .dpl-scrub { order: 9; }
    }

    @media (max-width: 420px) {
        #akicontenidonormal[data-module="aimusicstudio"] .ams-player-right { gap: 0; }
    }

    @media (hover: none) {
        #akicontenidonormal[data-module="aimusicstudio"] .ams-thumb-play {
            opacity: 1; pointer-events: auto; background: rgba(0, 0, 0, .24);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        #akicontenidonormal[data-module="aimusicstudio"] *,
        #akicontenidonormal[data-module="aimusicstudio"] *::before,
        #akicontenidonormal[data-module="aimusicstudio"] *::after {
            animation-duration: .01ms !important; animation-iteration-count: 1 !important;
            transition-duration: .01ms !important; transition-delay: 0ms !important;
        }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-cover-image,
        #akicontenidonormal[data-module="aimusicstudio"] .ams-thumb-play { transition: none !important; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-page { scroll-behavior: auto !important; }
    }

    /* === PROMPT-FIRST COMPOSER === */
    #akicontenidonormal[data-module="aimusicstudio"] {
        --ams-composer-shell: var(--ams-surface);
        --ams-composer-well: var(--ams-surface-2);
        --ams-composer-pill: var(--ams-surface);
        --ams-composer-pill-border: var(--dt-border);
        --ams-composer-ink: var(--dt-text);
        --ams-composer-ink-strong: var(--ams-text);
        --ams-composer-submit: var(--ams-text);
        --ams-composer-submit-ink: var(--dt-text);
        --ams-composer-shadow: none;
    }
    [data-bs-theme="dark"] #akicontenidonormal[data-module="aimusicstudio"] {
        --ams-composer-shell: var(--ams-surface);
        --ams-composer-well: var(--ams-surface-2);
        --ams-composer-pill: var(--ams-surface);
        --ams-composer-pill-border: var(--dt-border);
        --ams-composer-ink: var(--dt-text);
        --ams-composer-ink-strong: var(--ams-text);
        --ams-composer-submit: var(--ams-text);
        --ams-composer-submit-ink: var(--dt-text);
        --ams-composer-shadow: none;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-header {
        max-width: 1040px; margin: 0 auto; gap: 0;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-title {
        font-size: clamp(27px, 4vw, 36px);
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first {
        position: relative; width: 100%; max-width: 1040px; margin: 26px auto 34px; padding: 0;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-prompt-card {
        overflow: visible; padding: 12px; border: 0;
        border-radius: 28px; background: var(--ams-composer-shell); box-shadow: none;
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-prompt-card:focus-within {
        border-color: var(--ams-composer-pill-border);
        box-shadow: var(--ams-composer-shadow);
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-recommendations {
        min-height: 42px; margin: 0; padding: 4px 12px 8px; display: flex; align-items: center; gap: 8px;
        overflow: visible; border: 0; border-radius: 0; background: transparent;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-suggestions {
        min-width: 0; flex: 1 1 auto; margin: 0; padding: 0;
        display: flex; align-items: center; gap: 8px; overflow-x: auto;
        overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; scrollbar-width: none;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-suggestions::-webkit-scrollbar { display: none; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-suggestion {
        appearance: none; flex: 0 0 auto; min-width: 0; min-height: 34px; padding: 7px 13px 7px 11px;
        display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px;
        overflow: hidden; border: 0; border-radius: 999px;
        background: var(--ams-composer-pill); color: var(--ams-composer-ink-strong);
        font: inherit; font-size: 12.5px; line-height: 18px; font-weight: 500; white-space: nowrap; cursor: pointer;
        scroll-snap-align: start; touch-action: manipulation;
        box-shadow: none;
        transition: border-color .15s ease, background .15s ease, transform .15s ease, color .15s ease;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-suggestion i {
        flex: 0 0 auto; color: var(--ams-composer-ink); font-size: 14px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-suggestion span {
        min-width: 0; overflow: hidden; text-overflow: ellipsis;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-suggestion:hover {
        border-color: color-mix(in srgb, var(--ams-composer-pill-border) 55%, var(--ams-composer-ink));
        background: color-mix(in srgb, var(--ams-composer-pill) 82%, var(--ams-composer-shell));
        color: var(--ams-text);
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-suggestion:active { transform: scale(.985); }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-ideas-refresh {
        appearance: none; flex: 0 0 auto; width: 34px; height: 34px; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
        border: 0; border-radius: 999px;
        background: var(--ams-composer-pill); color: var(--ams-composer-ink);
        font: inherit; font-size: 15px; cursor: pointer;
        box-shadow: none;
        transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-ideas-refresh:hover {
        border-color: color-mix(in srgb, var(--ams-composer-pill-border) 55%, var(--ams-composer-ink));
        background: color-mix(in srgb, var(--ams-composer-pill) 82%, var(--ams-composer-shell));
        color: var(--ams-composer-ink-strong);
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-ideas-refresh:active { transform: rotate(18deg); }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-prompt-well {
        overflow: visible; border: 0; border-radius: 20px;
        background: var(--ams-composer-well);
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-card-head {
        min-height: 44px; padding: 12px 14px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-card-head-left {
        min-width: 0; display: inline-flex; align-items: center; gap: 8px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-create-chip {
        min-height: 30px; padding: 5px 11px; display: inline-flex; align-items: center; gap: 7px;
        border: 1px solid var(--ams-composer-pill-border); border-radius: 999px;
        background: var(--ams-composer-pill); color: var(--ams-composer-ink-strong);
        font-size: 12.5px; font-weight: 600;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-create-chip > i { color: var(--ams-composer-ink); font-size: 14px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-reset {
        appearance: none; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
        border: 0; border-radius: 10px; background: transparent; color: var(--ams-composer-ink);
        font: inherit; font-size: 17px; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-reset:hover {
        border-color: var(--ams-composer-pill-border); background: var(--ams-composer-pill); color: var(--ams-composer-ink-strong);
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-reset:disabled {
        opacity: .28; cursor: default; border-color: transparent; background: transparent;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-prompt-field {
        position: relative; width: 100%;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-prompt {
        position: relative; z-index: 1; width: 100%; height: 104px; min-height: 104px; max-height: 220px; padding: 6px 18px 12px; resize: vertical;
        border: 0; border-radius: 0; background: transparent; color: var(--ams-composer-ink-strong);
        font: inherit; font-size: 15px; line-height: 24px; letter-spacing: -.01em; outline: 0;
        caret-color: var(--ams-text);
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-prompt-idea {
        position: absolute; left: 18px; right: 18px; top: 6px; bottom: 12px; z-index: 0;
        overflow: hidden; pointer-events: none;
        font: inherit; font-size: 15px; line-height: 24px; letter-spacing: -.01em;
        opacity: 0; transform: translateY(4px);
        transition: opacity .32s ease, transform .32s ease;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-prompt-idea[data-inline-suggestion]::after {
        content: attr(data-inline-suggestion);
        color: color-mix(in srgb, var(--ams-composer-ink) 58%, transparent);
        pointer-events: none; white-space: pre-wrap;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-prompt-idea.is-visible {
        opacity: 1; transform: translateY(0);
    }
    @media (prefers-reduced-motion: reduce) {
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-prompt-idea {
            transition: opacity .15s ease; transform: none;
        }
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-prompt-field.is-filled .ams-generation-prompt-idea,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-prompt-idea[hidden] {
        opacity: 0 !important; visibility: hidden;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-prompt-well .ams-generation-suggestion {
        background: var(--ams-composer-shell); border-color: var(--ams-composer-pill-border);
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-prompt-well .ams-generation-ideas-refresh {
        background: var(--ams-composer-shell);
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-prompt::placeholder {
        color: color-mix(in srgb, var(--ams-composer-ink) 82%, transparent); opacity: 1;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-prompt:focus,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-prompt:focus-visible,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-prompt:hover,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-prompt:active {
        border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-primary-lyrics {
        margin: 0 12px 4px; padding: 10px 12px 12px; border: 0;
        border-radius: 14px; background: color-mix(in srgb, var(--ams-composer-pill) 70%, var(--ams-composer-well));
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-primary-lyrics[hidden] { display: none !important; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-primary-lyrics > label {
        display: block; margin-bottom: 7px; color: var(--ams-composer-ink); font-size: 10.5px; font-weight: 650;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-lyrics {
        height: 160px; min-height: 120px; padding: 2px 2px; resize: vertical; border: 0; border-radius: 0;
        background: transparent; color: var(--ams-composer-ink-strong); font-size: 13.5px; line-height: 21px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-lyrics:focus,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-lyrics:hover,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-lyrics:active {
        border: 0; box-shadow: none; background: transparent;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-prompt-footer {
        position: relative; z-index: 5; min-height: 56px; padding: 6px 10px 10px 10px;
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        overflow: visible; border: 0; border-radius: 0; background: transparent;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-compact-controls {
        position: relative; z-index: 6; min-width: 0; display: flex; align-items: center; gap: 2px;
        flex-wrap: nowrap; overflow: visible;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker {
        position: relative; flex: 0 0 auto; z-index: 1; overflow: visible;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker:has(.ams-generation-picker-toggle[aria-expanded="true"]) {
        z-index: 30;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-toggle {
        appearance: none; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px;
        border: 0; border-radius: 999px; background: transparent; color: var(--ams-composer-ink);
        font: inherit; font-size: 12.5px; font-weight: 550; white-space: nowrap; cursor: pointer;
        transition: border-color .15s ease, background .15s ease, color .15s ease;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-toggle:hover,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-toggle[aria-expanded="true"] {
        border-color: var(--ams-composer-pill-border); background: var(--ams-composer-pill); color: var(--ams-composer-ink-strong);
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-toggle:disabled { opacity: .48; cursor: not-allowed; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-toggle > i { color: inherit; font-size: 15px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-toggle > .ti-chevron-down { font-size: 12px; transition: transform .15s ease; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-toggle[aria-expanded="true"] > .ti-chevron-down { transform: rotate(180deg); }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-toggle > span {
        min-width: 0; max-width: 148px; overflow: hidden; text-overflow: ellipsis;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker.is-variants .ams-generation-picker-toggle > span,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker.is-duration .ams-generation-picker-toggle > span {
        max-width: 54px; font-variant-numeric: tabular-nums;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-menu {
        position: absolute; left: 0; right: auto; top: calc(100% + 8px); bottom: auto;
        z-index: 40; width: min(280px, calc(100vw - 42px)); margin: 0;
        padding: 6px; border: 0; border-radius: 16px;
        background: var(--ams-composer-pill); box-shadow: none;
        box-sizing: border-box;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker.is-model .ams-generation-picker-menu,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker.is-lyrics .ams-generation-picker-menu {
        width: min(320px, calc(100vw - 42px));
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-menu[hidden] { display: none !important; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-menu button {
        appearance: none; width: 100%; min-height: 40px; padding: 8px 9px; display: grid;
        grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; border: 0; border-radius: 12px;
        background: transparent; color: var(--ams-composer-ink-strong); text-align: left; font: inherit; cursor: pointer;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker.is-model .ams-generation-picker-menu button,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker.is-lyrics .ams-generation-picker-menu button {
        min-height: 52px; align-items: start;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-menu button:hover,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-menu button[aria-checked="true"] {
        background: color-mix(in srgb, var(--ams-composer-well) 70%, var(--ams-composer-pill));
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-menu button:disabled { opacity: .45; cursor: not-allowed; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-menu button > i { margin-top: 0; color: var(--ams-composer-ink); font-size: 16px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker.is-model .ams-generation-picker-menu button > i,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker.is-lyrics .ams-generation-picker-menu button > i { margin-top: 2px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-menu button span { min-width: 0; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-menu strong,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-menu small { display: block; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-menu strong { font-size: 12px; line-height: 17px; font-weight: 650; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-menu small { margin-top: 1px; color: var(--ams-composer-ink); font-size: 10px; line-height: 14px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-toggle:focus-visible,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-reset:focus-visible,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-ideas-refresh:focus-visible,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-suggestion:focus-visible,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-submit:focus-visible {
        outline: 2px solid var(--ams-focus); outline-offset: 2px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-submit-group {
        flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-submit {
        appearance: none; flex: 0 0 auto; width: 40px; height: 40px; min-height: 40px; margin: 0; padding: 0;
        display: inline-flex; flex-direction: row; align-items: center; justify-content: center; border: 0; border-radius: 50%;
        background: var(--ams-composer-submit); color: var(--ams-composer-submit-ink); font: inherit; font-size: 18px; cursor: pointer;
        box-shadow: none; transition: transform .15s ease, opacity .15s ease, background .15s ease;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-submit:hover:not(:disabled) {
        transform: translateY(-1px); opacity: .9;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-submit:disabled {
        opacity: .38; cursor: not-allowed; transform: none;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-submit.is-processing i { animation: dui-legacy-modules-aimusicstudio-ams-generation-spin .9s linear infinite; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-service-status {
        min-height: 28px; margin: 8px 8px 0; display: flex; align-items: center; gap: 8px;
        color: var(--ams-muted); font-size: 10px; line-height: 16px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-models-retry {
        appearance: none; min-height: 26px; padding: 3px 8px; border: 0; border-radius: 8px;
        background: var(--ams-surface); color: var(--ams-text); font: inherit; font-size: 10px; font-weight: 650; cursor: pointer;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-models-retry:hover { background: var(--ams-surface-2); }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-models-retry[hidden] { display: none !important; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-content-tabs {
        width: 100%; max-width: 1040px; margin: 0 auto 0;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generations-workspace {
        width: 100%; max-width: 1040px; margin: 0 auto; display: block;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-history { padding-top: 24px; border-top: 0; }
    #akicontenidonormal[data-module="aimusicstudio"] #amsPanelSaved,
    #akicontenidonormal[data-module="aimusicstudio"] #amsPanelExplore {
        width: 100%; max-width: 1040px; margin: 0 auto; padding-top: 24px;
    }

    /* === EXPLORE (public catalog) === */
    #akicontenidonormal[data-module="aimusicstudio"] .ams-explore-workspace { display: flex; flex-direction: column; gap: 18px; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-explore-cats {
        display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 2px 0 4px;
        overscroll-behavior-inline: contain; scrollbar-width: none;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-explore-cats::-webkit-scrollbar { display: none; }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-explore-cat {
        appearance: none; flex: 0 0 auto; min-height: 36px; padding: 8px 14px; border: 0;
        border-radius: 999px; background: var(--ams-surface); color: var(--ams-muted);
        font: inherit; font-size: 13px; font-weight: 550; white-space: nowrap; cursor: pointer;
        transition: color .12s, background .12s, border-color .12s;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-explore-cat:hover { color: var(--ams-text); background: var(--ams-surface-2); }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-explore-cat.active {
        color: var(--ams-text); border-color: var(--ams-border-strong); background: var(--ams-surface-2); font-weight: 650;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-explore-cat:focus-visible {
        outline: 2px solid var(--ams-focus); outline-offset: 2px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-explore-toolbar {
        display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-explore-toolbar .ams-generation-search {
        flex: 1 1 220px; min-width: 180px; max-width: 360px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-explore-filters {
        position: relative; z-index: 4; display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
        flex: 1 1 auto; min-width: 0; overflow: visible;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-explore-filters .ams-generation-picker-toggle {
        height: 36px; padding: 0 10px; border: 0; border-radius: 10px;
        background: var(--ams-surface); color: var(--ams-text); font-size: 13px;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-explore-filters .ams-generation-picker-toggle:hover,
    #akicontenidonormal[data-module="aimusicstudio"] .ams-explore-filters .ams-generation-picker-toggle[aria-expanded="true"] {
        background: var(--ams-surface-2); border-color: var(--ams-border-strong);
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-explore-filters .ams-generation-picker-menu {
        min-width: 168px; max-height: 260px; overflow: auto;
    }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-explore-count {
        margin-left: auto; color: var(--ams-muted); font-size: 12px; font-weight: 550; white-space: nowrap;
    }
    @media (max-width: 700px) {
        #akicontenidonormal[data-module="aimusicstudio"] .ams-explore-count { margin-left: 0; width: 100%; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-explore-toolbar .ams-generation-search { max-width: none; }
    }

    @media (max-width: 760px) {
        #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first { margin: 20px auto 26px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-prompt-card { padding: 10px; border-radius: 24px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-recommendations { padding: 0 2px 10px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-suggestion { flex: 0 0 auto; min-width: auto; max-width: none; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-prompt-well { border-radius: 18px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-prompt { min-height: 112px; padding-inline: 16px; font-size: 16px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-lyrics { font-size: 16px; line-height: 23px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-prompt-footer {
            align-items: center; flex-direction: row; gap: 8px;
        }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-compact-controls {
            flex: 1 1 auto; flex-wrap: wrap; overflow: visible;
        }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker { flex: 0 0 auto; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-toggle { font-size: 16px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-menu { left: auto; right: 0; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-submit-group { flex: 0 0 auto; }
    }
    @media (max-width: 480px) {
        #akicontenidonormal[data-module="aimusicstudio"] .ams-page { padding-inline: 12px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-title { font-size: 28px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-prompt-card { border-radius: 22px; padding: 9px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-prompt-well { border-radius: 16px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-toggle { padding-inline: 8px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker.is-model .ams-generation-picker-toggle > span { max-width: 96px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker.is-lyrics .ams-generation-picker-toggle > span { max-width: 84px; }
    }
    @container (max-width: 760px) {
        #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first { margin: 20px auto 26px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-prompt-card { padding: 10px; border-radius: 24px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-recommendations { padding: 0 2px 10px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-suggestion { flex: 0 0 auto; min-width: auto; max-width: none; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-prompt-well { border-radius: 18px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-prompt { min-height: 112px; padding-inline: 16px; font-size: 16px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-lyrics { font-size: 16px; line-height: 23px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-prompt-footer { align-items: center; flex-direction: row; gap: 8px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-compact-controls { flex: 1 1 auto; flex-wrap: wrap; overflow: visible; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker { flex: 0 0 auto; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-toggle { font-size: 16px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-menu { left: auto; right: 0; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-submit-group { flex: 0 0 auto; }
    }
    @container (max-width: 480px) {
        #akicontenidonormal[data-module="aimusicstudio"] .ams-page { padding-inline: 12px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-title { font-size: 28px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-prompt-card { border-radius: 22px; padding: 9px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-prompt-well { border-radius: 16px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-toggle { padding-inline: 8px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker.is-model .ams-generation-picker-toggle > span { max-width: 96px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker.is-lyrics .ams-generation-picker-toggle > span { max-width: 84px; }
    }
    @media (pointer: coarse) {
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-ideas-refresh,
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-reset { width: 44px; height: 44px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-suggestion { min-height: 40px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-picker-toggle { height: 44px; }
        #akicontenidonormal[data-module="aimusicstudio"] .ams-prompt-first .ams-generation-submit { width: 44px; height: 44px; min-height: 44px; }
    }
    /* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
       Música: el reproductor fijo y la tarjeta del prompt sin sombra (línea fina); el foco azul pasa al token de
       foco. Las carátulas en degradado de las pistas y los controles sobre ellas se quedan: son contenido. */
    :scope .ams-player { box-shadow: none; border-top: 1px solid var(--dt-border); }
    #akicontenidonormal[data-module="aimusicstudio"] .ams-generation-prompt-card { box-shadow: none; border-color: var(--dt-border); }

}
/* end dui-template-style modules/aimusicstudio:0 */
/* dui-template-style {"key":"modules/aimusicstudiocreate:0","bytes":43083,"sha256":"5a0ef69014ac314ae781a10c9d096f40a92d7cc55dbd702ac4c15069837e0330","media":null,"source_sha256":"ce4997ee9bdf72c14ff490d6e161f7991b025230cacfaa388d0e43b78e092beb"} */
@scope (:root:has(template[data-dui-legacy-style="modules/aimusicstudiocreate:0"])) {

    #akicontenidonormal[data-module="aimusicstudiocreate"] {
        --amsc-bg: var(--dt-app);
        --amsc-surface: var(--dt-surface);
        --amsc-soft: var(--el-bg-raised-2, #f6f6f5);
        --amsc-soft-2: var(--el-hover, #eeeeec);
        --amsc-line: var(--dt-border);
        --amsc-line-strong: var(--dt-border-strong);
        --amsc-text: var(--dt-text);
        --amsc-muted: var(--dt-muted);
        --amsc-faint: var(--dt-faint);
        --amsc-focus: var(--el-accent, #2563eb);
        --amsc-focus-ring: var(--el-accent-ring, rgba(37, 99, 235, .15));
        --amsc-shadow: 0 0 0 transparent; /* 26-10: sin sombras */
        --amsc-history-w: 304px;
        --amsc-header-h: 42px;
        --amsc-timeline-h: 154px;
        --amsc-lane-h: 56px;
        height: calc(100vh - var(--dt-topbar-h, 44px));
        height: calc(100dvh - var(--dt-topbar-h, 44px));
        min-height: 0;
        padding: 0 !important;
        overflow: hidden;
        position: relative;
        background: var(--amsc-bg);
        container-type: inline-size;
    }

    [data-bs-theme="dark"] #akicontenidonormal[data-module="aimusicstudiocreate"] {
        --amsc-bg: var(--dt-app);
        --amsc-surface: var(--dt-surface);
        --amsc-soft: var(--el-bg-raised-2, #222224);
        --amsc-soft-2: var(--el-hover, #303033);
        --amsc-line: var(--dt-border);
        --amsc-line-strong: var(--dt-border-strong);
        --amsc-text: var(--dt-text);
        --amsc-muted: var(--dt-muted);
        --amsc-faint: var(--dt-faint);
        --amsc-focus: var(--dt-focus, #60a5fa);
        --amsc-focus-ring: var(--dt-focus-ring, rgba(96, 165, 250, .18));
        --amsc-shadow: 0 0 0 transparent;
    }

    #akicontenidonormal[data-module="aimusicstudiocreate"] *,
    #akicontenidonormal[data-module="aimusicstudiocreate"] *::before,
    #akicontenidonormal[data-module="aimusicstudiocreate"] *::after { box-sizing: border-box; }

    #akicontenidonormal[data-module="aimusicstudiocreate"] button,
    #akicontenidonormal[data-module="aimusicstudiocreate"] input,
    #akicontenidonormal[data-module="aimusicstudiocreate"] textarea { font: inherit; }

    .amsc-editor {
        width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden;
        display: grid; grid-template-rows: var(--amsc-header-h) minmax(0, 1fr) var(--amsc-timeline-h);
        background: var(--amsc-bg); color: var(--amsc-text); font-family: inherit;
    }

    .amsc-header {
        min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--amsc-history-w);
        border-bottom: 1px solid var(--amsc-line); background: var(--amsc-surface); z-index: 30;
    }

    .amsc-projectbar {
        min-width: 0; height: var(--amsc-header-h); padding: 0 10px;
        display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr); align-items: center;
    }

    .amsc-header-left, .amsc-header-actions, .amsc-history-tabs,
    .amsc-toolbar-left, .amsc-transport, .amsc-toolbar-right,
    .amsc-inline, .amsc-tags, .amsc-section-tools, .amsc-composer-meta,
    .amsc-history-card-head, .amsc-history-prompt-row { display: flex; align-items: center; }

    .amsc-header-left { justify-content: flex-start; }
    .amsc-header-actions { justify-content: flex-end; gap: 2px; min-width: 0; }

    .amsc-icon-btn, .amsc-text-btn, .amsc-chip, .amsc-tiny-btn,
    .amsc-play-btn, .amsc-tool-btn, .amsc-action-btn, .amsc-send,
    .amsc-history-tab, .amsc-mobile-tab, .amsc-history-play,
    .amsc-clip, .amsc-add-clip, .amsc-section-control {
        appearance: none; -webkit-appearance: none; border: 0; margin: 0; cursor: pointer;
        color: inherit; background: transparent;
    }

    .amsc-icon-btn {
        width: 34px; height: 34px; padding: 0; border-radius: 8px;
        display: inline-flex; align-items: center; justify-content: center; color: var(--amsc-muted); font-size: 17px;
    }
    .amsc-icon-btn:hover { color: var(--amsc-text); background: var(--amsc-soft); }

    .amsc-project-title {
        min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap;
    }
    .amsc-project-title > span:first-child { overflow: hidden; text-overflow: ellipsis; }
    .amsc-model-badge {
        flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; background: var(--amsc-soft);
        color: var(--amsc-muted); font-size: 10px; font-weight: 650;
    }

    .amsc-text-btn {
        min-height: 32px; padding: 6px 9px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px;
        color: var(--amsc-text); font-size: 11px; font-weight: 600;
    }
    .amsc-text-btn:hover { background: var(--amsc-soft); }
    .amsc-text-btn .amsc-count {
        min-width: 17px; height: 17px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center;
        border-radius: 999px; background: var(--amsc-soft-2); color: var(--amsc-muted); font-size: 9px;
    }

    .amsc-history-tabs {
        height: var(--amsc-header-h); gap: 2px; padding: 0 10px; border-left: 1px solid var(--amsc-line);
    }
    .amsc-history-tab, .amsc-mobile-tab {
        position: relative; height: 100%; padding: 0 8px; color: var(--amsc-muted); font-size: 11px; font-weight: 550;
    }
    .amsc-history-tab:hover, .amsc-mobile-tab:hover { color: var(--amsc-text); }
    .amsc-history-tab.active, .amsc-mobile-tab.active { color: var(--amsc-text); font-weight: 650; }
    .amsc-history-tab.active::after, .amsc-mobile-tab.active::after {
        content: ""; position: absolute; left: 7px; right: 7px; bottom: -1px; height: 1.5px;
        border-radius: 2px; background: var(--amsc-text);
    }

    .amsc-body { min-width: 0; min-height: 0; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--amsc-history-w); }

    .amsc-canvas {
        min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain;
        padding: 26px 24px 154px; background: var(--amsc-bg); scrollbar-gutter: stable;
    }

    .amsc-stage { width: min(100%, 640px); min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; }

    .amsc-global { margin: 0 0 48px; color: var(--amsc-muted); }
    .amsc-global-title { margin: 0 0 9px; color: var(--amsc-muted) !important; font-size: 10px; font-weight: 550; }

    .amsc-section-list { display: flex; flex-direction: column; gap: 54px; }
    .amsc-empty-project {
        margin: 24px 0 40px; padding: 28px 22px; border: 1px dashed var(--amsc-line);
        border-radius: 14px; text-align: center; color: var(--amsc-muted);
    }
    .amsc-empty-project-title { margin: 0 0 8px; color: var(--amsc-text); font-size: 14px; font-weight: 650; }
    .amsc-empty-project-text { margin: 0 0 16px; font-size: 12px; line-height: 1.5; }
    .amsc-empty-project-cta {
        display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
        border: 0; border-radius: 9px; background: var(--amsc-surface);
        color: var(--amsc-text); font-size: 12px; font-weight: 600; cursor: pointer;
    }
    .amsc-empty-project-cta:hover { border-color: var(--amsc-line-strong); background: var(--amsc-soft); }

    .amsc-section {
        position: relative; padding: 0 0 0 18px; border-left: 2px solid transparent; outline: none;
        transition: border-color .14s ease, opacity .14s ease;
    }
    .amsc-section[aria-current="true"] { border-left-color: var(--amsc-line-strong); }
    .amsc-section.is-disabled { opacity: .48; }
    .amsc-section.is-collapsed .amsc-section-body { display: none; }
    .amsc-section-title {
        margin: 0; color: var(--amsc-text) !important; font-size: 12px !important; line-height: 18px; font-weight: 680;
    }
    .amsc-section-head { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .amsc-section-tools { gap: 2px; opacity: 0; transition: opacity .12s ease; }
    .amsc-section:hover .amsc-section-tools, .amsc-section:focus-within .amsc-section-tools { opacity: 1; }
    .amsc-tiny-btn {
        width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
        color: var(--amsc-muted); font-size: 14px;
    }
    .amsc-tiny-btn:hover { color: var(--amsc-text); background: var(--amsc-soft); }

    .amsc-section-rail {
        position: absolute; left: -23px; top: 22px; width: 24px; display: flex; flex-direction: column; align-items: center; gap: 5px;
    }
    .amsc-section-control {
        width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
        color: var(--amsc-muted); font-size: 12px;
    }
    .amsc-section-control:hover { color: var(--amsc-text); background: var(--amsc-soft); }

    .amsc-tags { min-width: 0; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
    .amsc-chip {
        min-height: 20px; max-width: 210px; padding: 2px 6px 2px 7px; border: 1px solid var(--amsc-line);
        border-radius: 999px; display: inline-flex; align-items: center; gap: 4px;
        background: var(--amsc-surface); color: var(--amsc-text); font-size: 9.5px; line-height: 14px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .amsc-chip:hover { border-color: var(--amsc-line-strong); background: var(--amsc-soft); }
    .amsc-chip i { flex: 0 0 auto; font-size: 10px; color: var(--amsc-faint); }
    .amsc-tag-add {
        width: 22px; height: 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
        border-radius: 50%; color: var(--amsc-muted); font-size: 13px;
    }
    .amsc-tag-add:hover { color: var(--amsc-text); background: var(--amsc-soft); }
    .amsc-tag-input {
        display: none; width: 150px; height: 24px; padding: 3px 8px; border: 1px solid var(--amsc-line-strong) !important;
        border-radius: 999px !important; outline: 0 !important; box-shadow: 0 0 0 3px var(--amsc-focus-ring) !important;
        background: var(--amsc-surface) !important; color: var(--amsc-text) !important; font-size: 10px !important;
    }
    .amsc-section.is-adding-tag .amsc-tag-input { display: block; }
    .amsc-section.is-adding-tag .amsc-tag-add { display: none; }

    .amsc-lyrics {
        min-height: 30px; margin-top: 17px; padding: 2px 0; border-radius: 6px; outline: 0;
        color: var(--amsc-text); font-size: 12px; line-height: 1.85; white-space: pre-line;
    }
    .amsc-lyrics:empty::before { content: attr(data-placeholder); color: var(--amsc-faint); }
    .amsc-lyrics:focus { box-shadow: 0 0 0 3px var(--amsc-focus-ring); }
    .amsc-lyrics-footer {
        margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
    }
    .amsc-lyrics-hint {
        margin: 0; flex: 1 1 180px; color: var(--amsc-faint); font-size: 10px; line-height: 1.4;
    }
    .amsc-regen-audio {
        flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
        border: 0; border-radius: 8px; background: var(--amsc-surface);
        color: var(--amsc-text); font-size: 11px; font-weight: 600; cursor: pointer;
    }
    .amsc-regen-audio:hover { border-color: var(--amsc-line-strong); background: var(--amsc-soft); }
    .amsc-regen-audio:disabled { opacity: .45; cursor: not-allowed; }
    .amsc-regen-audio.is-processing i { animation: dui-legacy-modules-aimusicstudiocreate-amsc-spin .8s linear infinite; }
    @keyframes dui-legacy-modules-aimusicstudiocreate-amsc-spin { to { transform: rotate(360deg); } }

    .amsc-composer-wrap {
        position: absolute; left: 0; right: var(--amsc-history-w); bottom: 14px; z-index: 20;
        margin: 0; padding: 28px 24px 0; display: flex; justify-content: center; pointer-events: none;
        background: linear-gradient(to bottom, transparent, var(--amsc-bg) 28%);
    }
    .amsc-composer {
        width: min(100%, 640px); min-height: 106px; overflow: hidden; pointer-events: auto; border: 0;
        border-radius: 16px; background: var(--amsc-surface); box-shadow: none;
    }
    .amsc-prompt {
        display: block; width: 100% !important; min-height: 62px !important; max-height: 128px; resize: none;
        margin: 0 !important; padding: 14px 16px 8px !important; border: 0 !important; border-radius: 0 !important;
        outline: 0 !important; box-shadow: none !important; background: transparent !important;
        color: var(--amsc-text) !important; font-size: 12px !important; line-height: 1.55;
    }
    .amsc-prompt::placeholder { color: var(--amsc-faint); }
    .amsc-composer-hint {
        margin: 0 0 8px; padding: 0 2px; color: var(--amsc-muted); font-size: 10px; line-height: 1.45;
    }
    .amsc-import-modal {
        position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
        padding: 18px; background: rgba(10, 10, 12, .42);
    }
    .amsc-import-modal[hidden] { display: none !important; }
    .amsc-import-panel {
        width: min(420px, 100%); max-height: min(70vh, 520px); overflow: auto; padding: 14px;
        border: 0; border-radius: 14px; background: var(--amsc-surface);
        box-shadow: none;
    }
    .amsc-import-panel h3 { margin: 0 0 8px; font-size: 13px; font-weight: 650; color: var(--amsc-text); }
    .amsc-import-panel p { margin: 0 0 12px; font-size: 11px; color: var(--amsc-muted); line-height: 1.45; }
    .amsc-import-list { display: flex; flex-direction: column; gap: 6px; }
    .amsc-import-item {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        width: 100%; padding: 8px 10px; border: 0; border-radius: 10px;
        background: var(--amsc-bg); color: var(--amsc-text); text-align: left; cursor: pointer;
    }
    .amsc-import-item:hover { border-color: var(--amsc-line-strong); background: var(--amsc-soft); }
    .amsc-import-item strong { display: block; font-size: 12px; font-weight: 600; }
    .amsc-import-item span { display: block; margin-top: 2px; font-size: 10px; color: var(--amsc-muted); }
    .amsc-import-close {
        margin-top: 12px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px;
        background: var(--amsc-surface); color: var(--amsc-text); font-size: 12px; font-weight: 600; cursor: pointer;
    }
    .amsc-composer:focus-within { border-color: var(--amsc-line-strong); box-shadow: var(--amsc-shadow), 0 0 0 3px var(--amsc-focus-ring); }
    .amsc-composer-footer {
        min-height: 43px; padding: 6px 9px 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    }
    .amsc-composer-meta { min-width: 0; gap: 10px; color: var(--amsc-muted); font-size: 10px; }
    .amsc-composer-meta > span, .amsc-variation-btn {
        min-width: 0; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    }
    .amsc-variation-btn { border: 0; padding: 3px 5px; border-radius: 7px; background: transparent; color: inherit; cursor: pointer; }
    .amsc-variation-btn:hover { background: var(--amsc-soft); color: var(--amsc-text); }
    .amsc-add-music-wrap { position: relative; flex: 0 0 auto; }
    .amsc-add-music-btn {
        border: 0; padding: 3px 7px; border-radius: 7px; background: transparent;
        color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
        font-size: 10px; font-weight: 600;
    }
    .amsc-add-music-btn:hover,
    .amsc-add-music-btn[aria-expanded="true"] { background: var(--amsc-soft); color: var(--amsc-text); }
    .amsc-add-music-menu {
        position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 40;
        min-width: 176px; padding: 4px; border: 0;
        border-radius: 10px; background: var(--amsc-surface); box-shadow: none;
        display: flex; flex-direction: column; gap: 2px;
    }
    .amsc-add-music-menu[hidden] { display: none !important; }
    .amsc-add-music-item {
        display: flex; align-items: center; gap: 8px; width: 100%;
        padding: 8px 10px; border: 0; border-radius: 8px; background: transparent;
        color: var(--amsc-text); font-size: 12px; font-weight: 550; text-align: left; cursor: pointer;
    }
    .amsc-add-music-item:hover { background: var(--amsc-soft); }
    .amsc-add-music-item i { font-size: 14px; color: var(--amsc-muted); }
    .amsc-composer-send { display: flex; align-items: center; gap: 8px; }
    .amsc-credits { color: var(--amsc-muted); font-size: 10px; white-space: nowrap; }
    .amsc-send {
        width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
        background: var(--amsc-text); color: var(--amsc-surface); font-size: 16px;
        transition: opacity .14s ease, transform .14s ease;
    }
    .amsc-send:hover:not(:disabled) { transform: translateY(-1px); }
    .amsc-send:disabled { opacity: .26; cursor: default; }
    .amsc-send.is-processing i { animation: dui-legacy-modules-aimusicstudiocreate-amsc-spin .8s linear infinite; }

    .amsc-history {
        min-width: 0; min-height: 0; overflow: auto; border-left: 1px solid var(--amsc-line);
        background: var(--amsc-surface); z-index: 22;
    }
    .amsc-history-mobilehead { display: none; }
    .amsc-history-content { padding: 14px 12px 28px; }
    .amsc-history-date { margin: 0 0 7px; color: var(--amsc-faint); font-size: 9px; }
    .amsc-history-prompt-row { align-items: flex-start; justify-content: space-between; gap: 8px; }
    .amsc-history-prompt { margin: 0; color: var(--amsc-text); font-size: 11px; line-height: 1.45; }
    .amsc-history-add { flex: 0 0 auto; width: 26px; height: 26px; }
    .amsc-history-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
    .amsc-history-card {
        padding: 9px; border-radius: 12px; background: var(--dt-surface); color: var(--dt-text); box-shadow: none;
    }
    .amsc-history-card-head { justify-content: space-between; gap: 8px; margin-bottom: 7px; font-size: 9px; font-weight: 650; }
    .amsc-current-badge {
        padding: 2px 5px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px;
        color: rgba(255,255,255,.86); font-size: 8px; line-height: 1;
    }
    .amsc-history-player { display: grid; grid-template-columns: 26px minmax(0, 1fr) 24px; align-items: center; gap: 6px; }
    .amsc-history-play {
        width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,.08); color: var(--dt-on-color);
    }
    .amsc-history-play:hover { background: rgba(255,255,255,.16); }
    .amsc-history-wave { display: block; width: 100%; height: 24px; }
    .amsc-history-fav { color: rgba(255,255,255,.64); }
    .amsc-history-fav { opacity: 0; transition: opacity .12s ease, color .12s ease; }
    .amsc-history-card:hover .amsc-history-fav,
    .amsc-history-card:focus-within .amsc-history-fav,
    .amsc-history-fav.active { opacity: 1; }
    .amsc-history-fav.active { color: #fbbf24; }
    .amsc-history-empty { padding: 54px 12px; text-align: center; color: var(--amsc-muted); font-size: 11px; line-height: 1.5; }
    .amsc-history-empty i { display: block; margin-bottom: 9px; color: var(--amsc-faint); font-size: 24px; }
    .amsc-backdrop { display: none; }

    .amsc-timeline {
        min-width: 0; min-height: 0; position: relative; z-index: 40; overflow: visible;
        display: grid; grid-template-rows: 44px minmax(0, 1fr);
        border-top: 1px solid var(--amsc-line); background: var(--amsc-surface);
    }
    .amsc-toolbar {
        min-width: 0; padding: 0 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center; gap: 8px; border-bottom: 1px solid var(--amsc-line);
    }
    .amsc-toolbar-left {
        min-width: 0; max-width: 100%; justify-content: flex-start; gap: 2px;
        overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: thin;
    }
    .amsc-toolbar-left::-webkit-scrollbar { height: 3px; }
    .amsc-toolbar-right { min-width: 0; justify-content: flex-end; gap: 8px; }
    .amsc-transport {
        position: relative; z-index: 3; justify-content: center; gap: 8px;
        padding: 0 8px; background: var(--amsc-surface);
    }
    .amsc-toolbar-label { flex: 0 0 auto; color: var(--amsc-muted); font-size: 10px; font-weight: 600; }
    .amsc-toolbar-sep { flex: 0 0 auto; width: 1px; height: 18px; margin: 0 5px; background: var(--amsc-line); }
    .amsc-tool-btn {
        flex: 0 0 auto; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 8px;
        display: inline-flex; align-items: center; justify-content: center; gap: 5px;
        color: var(--amsc-muted); font-size: 14px;
    }
    .amsc-tool-btn:hover { color: var(--amsc-text); background: var(--amsc-soft); }
    .amsc-tool-btn.active {
        color: var(--amsc-text); background: var(--amsc-soft);
        box-shadow: inset 0 0 0 1px var(--amsc-line-strong);
    }
    .amsc-tool-btn span { font-size: 10px; }
    .amsc-tool-btn.amsc-tool-icon { min-width: 32px; width: 32px; padding: 0; }
    .amsc-tool-btn.amsc-tool-icon span { display: none; }
    .amsc-clip-lane.is-cut-mode,
    .amsc-clip-lane.is-cut-mode .amsc-clip,
    .amsc-clip-lane.is-cut-mode .amsc-clip-main { cursor: cell; }
    .amsc-zoom-range {
        flex: 0 0 auto; width: 64px; height: 3px; margin: 0 3px; padding: 0 !important; border: 0 !important;
        appearance: none; -webkit-appearance: none; border-radius: 999px; outline: 0;
        background: var(--amsc-soft-2); accent-color: var(--amsc-text);
    }
    .amsc-zoom-range::-webkit-slider-thumb {
        appearance: none; -webkit-appearance: none; width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--amsc-text);
    }
    .amsc-zoom-range::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--amsc-text); }
    .amsc-time { min-width: 35px; color: var(--amsc-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
    .amsc-time:first-child { text-align: right; }
    .amsc-play-btn {
        width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
        background: var(--amsc-text); color: var(--amsc-surface); box-shadow: none;
    }
    .amsc-play-btn:hover { transform: scale(1.035); }
    .amsc-play-glyph { position: relative; display: block; width: 14px; height: 14px; }
    .amsc-play-glyph::before {
        content: ""; position: absolute; left: 54%; top: 50%; width: 0; height: 0;
        border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor;
        transform: translate(-43%, -50%);
    }
    .amsc-play-glyph::after { content: none; }
    .amsc-play-glyph.is-pause::before, .amsc-play-glyph.is-pause::after {
        content: ""; position: absolute; top: 1px; width: 3.5px; height: 13px;
        border: 0; border-radius: 999px; background: currentColor; transform: none;
    }
    .amsc-play-glyph.is-pause::before { left: 2px; }
    .amsc-play-glyph.is-pause::after { right: 2px; }

    .amsc-action-btn {
        min-height: 30px; padding: 0 8px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
        color: var(--amsc-muted); font-size: 13px;
    }
    .amsc-action-btn:hover { color: var(--amsc-text); background: var(--amsc-soft); }
    .amsc-action-btn span { font-size: 10px; }
    .amsc-action-btn.outlined { border: 0; color: var(--amsc-text); }
    .amsc-action-btn:disabled { opacity: .42; cursor: default; }
    .amsc-history-action {
        min-width: 88px; height: 32px; padding: 0 10px; border: 0;
        background: var(--amsc-surface); color: var(--amsc-text); gap: 6px;
    }
    .amsc-history-action span { font-size: 11px; }
    .amsc-history-action:disabled { color: var(--amsc-faint); background: var(--amsc-surface); opacity: .7; }

    .amsc-volume-wrap { position: relative; }
    .amsc-volume-popover {
        position: absolute; left: 50%; bottom: 36px; width: 142px; padding: 10px; transform: translateX(-50%);
        border: 0; border-radius: 10px; background: var(--amsc-surface); box-shadow: var(--dt-pop-shadow);
    }
    .amsc-volume-popover[hidden] { display: none !important; }
    .amsc-volume-range { width: 100%; accent-color: var(--amsc-text); }

    .amsc-timeline-scroll {
        min-width: 0; min-height: 0; overflow-x: auto; overflow-y: auto; position: relative;
        scrollbar-width: thin; scrollbar-color: var(--amsc-faint) transparent; overscroll-behavior: contain;
    }
    .amsc-timeline-content { position: relative; width: 100%; min-width: 100%; height: 100%; min-height: calc(31px + var(--amsc-lane-h)); user-select: none; touch-action: pan-x; }
    .amsc-ruler { position: absolute; inset: 0 0 auto; height: 25px; border-bottom: 1px solid var(--amsc-line); z-index: 2; background: var(--amsc-surface); }
    .amsc-tick { position: absolute; top: 0; height: 100%; border-left: 1px solid var(--amsc-line); color: var(--amsc-faint); font-size: 8px; }
    .amsc-tick span { position: absolute; top: 7px; left: 5px; white-space: nowrap; }
    .amsc-clip-lane { position: absolute; left: 0; right: 0; top: 31px; height: var(--amsc-lane-h); }
    .amsc-lane-row {
        position: absolute; left: 0; right: 0; height: var(--amsc-lane-h);
        border-bottom: 1px solid var(--amsc-line); pointer-events: none;
    }
    .amsc-clip {
        position: absolute; height: calc(var(--amsc-lane-h) - 6px); min-width: 34px; overflow: visible; padding: 0;
        border: 0; border-radius: 9px; background: var(--amsc-surface); text-align: left;
        touch-action: none; will-change: transform; container-type: inline-size; container-name: amsc-clip;
    }
    .amsc-clip-main {
        position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; overflow: hidden;
        border: 0; border-radius: 8px; appearance: none; background: transparent; color: inherit; text-align: left; cursor: grab;
    }
    .amsc-clip:hover .amsc-clip-main { background: var(--amsc-soft); }
    .amsc-clip:is(.active, .is-pending) {
        z-index: 3; border-color: #eeb900; background: #fff9d9;
        box-shadow: 0 0 0 1px rgba(238,185,0,.16), inset 0 0 0 1px rgba(255,255,255,.45);
    }
    .amsc-clip.active { z-index: 4; }
    .amsc-clip:is(.active, .is-pending) .amsc-clip-main {
        background-color: rgba(255,220,72,.16);
        background-image: repeating-linear-gradient(135deg, rgba(238,185,0,.13) 0 2px, transparent 2px 5px);
    }
    .amsc-clip:is(.active, .is-pending) .amsc-clip-wave { opacity: .42; border-bottom-color: rgba(202,148,0,.22); }
    .amsc-clip:is(.active, .is-pending) .amsc-clip-name { color: #a97300; }
    .amsc-clip.is-dragging {
        z-index: 12; opacity: .96;
        box-shadow: 0 10px 26px rgba(18,18,19,.18), inset 0 0 0 1px var(--amsc-line-strong);
    }
    .amsc-clip.is-dragging .amsc-clip-main { cursor: grabbing; }
    .amsc-clip.is-resizing, .amsc-clip.is-resizing .amsc-clip-main { cursor: ew-resize; }
    .amsc-timeline-content.is-dragging-clips .amsc-clip:not(.is-dragging) { opacity: .66; }
    .amsc-clip-wave { display: block; width: 100%; height: 30px; border-bottom: 1px solid var(--amsc-line); opacity: .82; }
    .amsc-clip-name {
        display: block; padding: 6px 38px 6px 7px; color: var(--amsc-muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .amsc-clip-time {
        position: absolute; right: 5px; bottom: 5px; max-width: 38px; padding: 1px 4px; overflow: hidden;
        border: 0; border-radius: 999px; background: var(--amsc-surface);
        background: color-mix(in srgb, var(--amsc-surface) 88%, transparent);
        color: var(--amsc-text); font-size: 8px; line-height: 13px; white-space: nowrap; text-overflow: ellipsis;
        opacity: 0; transform: translateY(2px); transition: opacity .12s ease, transform .12s ease; pointer-events: none;
    }
    .amsc-clip:is(:hover, .active, .is-dragging) .amsc-clip-time, .amsc-clip:focus-within .amsc-clip-time { opacity: 1; transform: translateY(0); }
    .amsc-clip-trim {
        position: absolute; z-index: 5; top: 15px; bottom: 19px; width: 20px; padding: 0;
        border: 0; appearance: none; background: transparent; opacity: 0; pointer-events: none; cursor: ew-resize; touch-action: none;
    }
    .amsc-clip-trim::before {
        content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; border-radius: 999px;
        background: var(--dt-surface); transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(255,255,255,.28);
    }
    .amsc-clip-trim[data-trim="start"] { left: -5px; }
    .amsc-clip-trim[data-trim="end"] { right: -5px; }
    .amsc-clip-delete, .amsc-clip-regenerate {
        position: absolute; z-index: 6; display: inline-flex; align-items: center; justify-content: center;
        padding: 0; border: 0; appearance: none; opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease;
    }
    .amsc-clip-delete {
        top: -11px; right: -11px; width: 24px; height: 24px; border-radius: 50%;
        background: var(--amsc-soft-2); color: var(--amsc-text); box-shadow: none; font-size: 13px;
    }
    .amsc-clip-delete:hover { background: var(--amsc-text); color: var(--amsc-surface); transform: scale(1.04); }
    .amsc-clip-regenerate {
        top: 9px; left: 50%; width: 26px; height: 26px; border-radius: 50%; transform: translateX(-50%);
        color: #d69f00; background: rgba(255,249,217,.82); font-size: 16px;
    }
    .amsc-clip-regenerate:hover { background: #fff4ba; color: #9b7200; transform: translateX(-50%) scale(1.05); }
    .amsc-clip-regenerate:active i { transform: rotate(90deg); }
    .amsc-clip.active :is(.amsc-clip-trim, .amsc-clip-delete, .amsc-clip-regenerate),
    .amsc-clip:focus-within :is(.amsc-clip-trim, .amsc-clip-delete, .amsc-clip-regenerate) {
        opacity: 1; pointer-events: auto;
    }
    .amsc-clip.is-pending .amsc-clip-regenerate { opacity: 1; pointer-events: auto; }
    [data-bs-theme="dark"] #akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-clip:is(.active, .is-pending) {
        border-color: #dba900; background: var(--dt-surface); box-shadow: 0 0 0 1px rgba(219,169,0,.18);
    }
    [data-bs-theme="dark"] #akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-clip:is(.active, .is-pending) .amsc-clip-main {
        background-color: rgba(219,169,0,.08);
        background-image: repeating-linear-gradient(135deg, rgba(234,179,8,.16) 0 2px, transparent 2px 5px);
    }
    [data-bs-theme="dark"] #akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-clip:is(.active, .is-pending) .amsc-clip-name { color: #e8bb47; }
    @container amsc-clip (max-width: 76px) {
        .amsc-clip-time { display: none; }
        .amsc-clip-regenerate { top: 11px; width: 22px; height: 22px; font-size: 14px; }
        .amsc-clip-name { padding-right: 7px; }
    }
    @container amsc-clip (max-width: 40px) {
        .amsc-clip-regenerate { display: none; }
    }
    .amsc-add-clip {
        position: absolute; top: 3px; width: 34px; height: calc(var(--amsc-lane-h) - 6px); border: 0; border-radius: 9px;
        background: var(--amsc-surface); color: var(--amsc-text); font-size: 17px;
    }
    .amsc-add-clip:hover { background: var(--amsc-soft); }
    .amsc-playhead {
        position: absolute; top: 0; bottom: 0; z-index: 9; width: 1px; background: var(--amsc-text); pointer-events: none;
    }
    .amsc-playhead::before {
        content: ""; position: absolute; top: 0; left: 50%; width: 10px; height: 10px;
        border-radius: 3px 3px 50% 50%; background: var(--amsc-text); transform: translateX(-50%);
    }
    .amsc-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

    #akicontenidonormal[data-module="aimusicstudiocreate"] :is(button, [tabindex], input, textarea, [contenteditable="true"]):focus-visible {
        outline: 2px solid var(--amsc-focus); outline-offset: 2px;
    }

    @keyframes dui-legacy-modules-aimusicstudiocreate-amsc-spin { to { transform: rotate(360deg); } }

    @container (max-width: 1100px) {
        #akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-header { grid-template-columns: minmax(0, 1fr); }
        #akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-history-tabs { display: none; }
        #akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-body { grid-template-columns: minmax(0, 1fr); }
        #akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-composer-wrap { right: 0; }
        #akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-history {
            position: absolute; top: var(--amsc-header-h); right: 0; bottom: var(--amsc-timeline-h); width: min(340px, 92%);
            border-left: 1px solid var(--amsc-line); box-shadow: none;
            transform: translateX(105%); visibility: hidden; transition: transform .18s ease, visibility 0s linear .18s;
        }
        #akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-history.open {
            transform: translateX(0); visibility: visible; transition-delay: 0s;
        }
        #akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-history-mobilehead {
            position: sticky; top: 0; z-index: 3; height: 44px; padding: 0 8px 0 12px;
            display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--amsc-line); background: var(--amsc-surface);
        }
        #akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-mobile-tabs { align-self: stretch; display: flex; align-items: center; }
        #akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-mobile-tab { height: 100%; }
        #akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-backdrop {
            position: absolute; inset: var(--amsc-header-h) 0 var(--amsc-timeline-h); z-index: 21;
            border: 0; background: rgba(0,0,0,.18); backdrop-filter: blur(1px); cursor: default;
        }
        #akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-backdrop:not([hidden]) { display: block; }
    }

    @media (max-width: 767px) {
        #akicontenidonormal[data-module="aimusicstudiocreate"] { --amsc-header-h: 46px; --amsc-timeline-h: 178px; }
        .amsc-projectbar { grid-template-columns: 42px minmax(0, 1fr) auto; padding: 0 6px; }
        .amsc-header-actions .amsc-text-btn > span:not(.amsc-count) { display: none; }
        .amsc-header-actions .amsc-text-btn { width: 34px; padding: 0; justify-content: center; }
        .amsc-header-actions .amsc-count { position: absolute; margin: -20px 0 0 22px; }
        .amsc-canvas { padding: 22px 14px 148px 38px; scrollbar-gutter: auto; }
        .amsc-global { margin-bottom: 38px; }
        .amsc-section-list { gap: 44px; }
        .amsc-section { padding-left: 12px; }
        .amsc-section-rail { left: -25px; }
        .amsc-section-tools { opacity: 1; }
        .amsc-tags { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
        .amsc-tags::-webkit-scrollbar { display: none; }
        .amsc-chip { flex: 0 0 auto; }
        .amsc-composer-wrap { bottom: 10px; padding: 20px 14px 0; }
        .amsc-composer-meta > span:last-child { display: none; }
        .amsc-timeline { grid-template-rows: 72px minmax(0, 1fr); }
        .amsc-toolbar {
            padding: 4px 9px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 32px 32px;
            grid-template-areas: "transport actions" "tools tools";
        }
        .amsc-transport { grid-area: transport; justify-content: flex-start; }
        .amsc-toolbar-right { grid-area: actions; }
        .amsc-toolbar-left { grid-area: tools; overflow-x: auto; scrollbar-width: none; }
        .amsc-toolbar-left::-webkit-scrollbar { display: none; }
        .amsc-toolbar-label:first-child, .amsc-toolbar-sep, .amsc-action-btn span, .amsc-tool-btn.amsc-fit-label span { display: none; }
        .amsc-action-btn { padding: 0 6px; }
        .amsc-history-action { min-width: 32px; width: 32px; padding: 0; }
        .amsc-history-action span { display: none; }
        .amsc-history { width: min(360px, 96%) !important; }
    }

    @media (max-width: 420px) {
        .amsc-project-title { font-size: 11px; gap: 5px; }
        .amsc-model-badge { display: none; }
        .amsc-canvas { padding-left: 38px; padding-right: 14px; }
        .amsc-credits { display: none; }
        .amsc-zoom-range { width: 60px; }
        .amsc-history { width: 100% !important; }
    }

    @media (prefers-reduced-motion: reduce) {
        #akicontenidonormal[data-module="aimusicstudiocreate"] *,
        #akicontenidonormal[data-module="aimusicstudiocreate"] *::before,
        #akicontenidonormal[data-module="aimusicstudiocreate"] *::after {
            animation-duration: .01ms !important; animation-iteration-count: 1 !important;
            transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important;
        }
    }
/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Editor de música: ya era monocromo; salen las sombras (token --amsc-shadow a 0: compositor, menú Add, volumen; además el
   anillo de foco del compositor, de la etiqueta y de la letra, el play, las tarjetas del historial, el cajón móvil y los botones
   del clip), el amarillo del clip elegido (borde #eeb900, fondo crema y rayas en degradado → borde en tinta sobre gris) y el del
   botón de regenerar. Un clip pendiente de regenerar (.is-pending) conserva su señal como tinte ámbar suave con borde discontinuo
   (los --dt-tint-warn-* del §14). El azul del foco pasa al gris de foco (tokens). Se quedan: las tarjetas del historial en
   oscuro (el JS dibuja su onda siempre en blanco), las ondas, la estrella ámbar de favoritos y el difuminado neutro bajo el
   compositor (hace de máscara del texto que pasa por debajo). CTA en tinta: el envío del compositor.
   Solo color, borde, sombra, radio y peso: ningún id, clase ni atributo que lea el JS cambia (.active, .is-pending, .is-dragging,
   .is-adding-tag, .open, aria-current, aria-expanded, data-wave-seed). */
#akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-composer,
#akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-composer:focus-within { box-shadow: none; }
#akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-composer:focus-within { border-color: var(--dt-focus); }
#akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-tag-input { box-shadow: none !important; border-color: var(--dt-focus) !important; }
#akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-lyrics:focus { box-shadow: none; }
#akicontenidonormal[data-module="aimusicstudiocreate"] :is(.amsc-add-music-menu, .amsc-volume-popover, .amsc-import-panel) { box-shadow: none; border-color: var(--amsc-line-strong); }
#akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-import-modal { background: var(--dt-backdrop); }
#akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-body .amsc-history { box-shadow: none; }
#akicontenidonormal[data-module="aimusicstudiocreate"] :is(.amsc-history-tab, .amsc-mobile-tab).active::after { height: 2px; border-radius: 0; }
#akicontenidonormal[data-module="aimusicstudiocreate"] :is(.amsc-count, .amsc-credits, .amsc-variation-btn) { font-variant-numeric: tabular-nums; }

/* envío (CTA) y play: tinta sin sombra ni salto */
#akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-send { background: var(--dt-cta); color: var(--dt-cta-fg); }
#akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-send:hover:not(:disabled) { background: var(--dt-cta-hover); transform: none; }
#akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-play-btn { box-shadow: none; }
#akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-play-btn:hover { transform: none; opacity: .9; }

/* historial: la tarjeta oscura se queda (onda blanca del JS) pero sin sombra y con línea fina */
#akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-history-card { box-shadow: none; border: 0; }

/* clips: elegido = borde en tinta sobre gris, sin crema, rayas ni halo; arrastrando sin sombra */
:scope #akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-clip.active { border-color: var(--amsc-text); background: var(--amsc-soft); box-shadow: none; }
:scope #akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-clip.active .amsc-clip-main { background-color: transparent; background-image: none; }
:scope #akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-clip.active .amsc-clip-name { color: var(--amsc-text); font-weight: 600; }
#akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-clip:is(.active, .is-pending) .amsc-clip-wave { opacity: .82; border-bottom-color: var(--amsc-line); }
/* pendiente de regenerar: tinte ámbar suave + borde discontinuo (sin rayas); si además está elegido, el borde vuelve a la tinta */
:scope #akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-clip.is-pending { border-style: dashed; border-color: var(--dt-tint-warn-tx); background: var(--dt-tint-warn-bg); box-shadow: none; }
:scope #akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-clip.is-pending .amsc-clip-main { background-color: transparent; background-image: none; }
:scope #akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-clip.is-pending .amsc-clip-name { color: var(--dt-tint-warn-tx); }
:scope #akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-clip.active.is-pending { border-style: solid; border-color: var(--amsc-text); }
#akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-clip.is-dragging { box-shadow: none; border-color: var(--amsc-line-strong); }

/* tiradores y botones del clip: gris con línea fina; borrar en rojo solo en el icono; regenerar ámbar solo en el icono */
#akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-clip-trim::before { background: var(--amsc-muted); box-shadow: none; outline: 1px solid var(--amsc-surface); }
#akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-clip-delete { background: var(--amsc-surface); color: var(--amsc-muted); border: 0; box-shadow: none; }
#akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-clip-delete:hover { background: var(--amsc-soft); color: var(--dt-danger); transform: none; }
#akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-clip-regenerate { background: var(--amsc-surface); color: var(--dt-tint-warn-tx); border: 0; }
#akicontenidonormal[data-module="aimusicstudiocreate"] .amsc-clip-regenerate:hover { background: var(--amsc-soft); color: var(--amsc-text); transform: translateX(-50%); }

}
/* end dui-template-style modules/aimusicstudiocreate:0 */
/* dui-template-style {"key":"modules/aisendlist:0","bytes":3112,"sha256":"7cf7e99b4f971dd6f8f06cf82aaa5d092e650dd02559a5e259c77758579d3cc5","media":null,"source_sha256":"7cf7e99b4f971dd6f8f06cf82aaa5d092e650dd02559a5e259c77758579d3cc5"} */
@scope (:root:has(template[data-dui-legacy-style="modules/aisendlist:0"])) {

                .bc-call-list{ display:flex; flex-direction:column; gap:12px; }
                .bc-call-empty{ padding:28px 8px; text-align:center; color:var(--bs-secondary-color,#a0a0a0); font-size:14px; }
                .bc-call-card{ border:0; border-radius:12px; overflow:hidden; background:var(--bs-body-bg,#0f0f10); }
                .bc-call-head{ display:flex; align-items:center; gap:12px; padding:11px 14px; background:var(--bs-secondary-bg,#1c1c1d); }
                .bc-call-avatar{ width:36px; height:36px; flex:0 0 36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; text-transform:uppercase; background:var(--dt-surface-2); color:var(--dt-muted); }
                .bc-call-id{ flex:1; min-width:0; }
                .bc-call-name{ font-weight:600; font-size:14px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
                .bc-call-sub{ font-size:12px; color:var(--bs-secondary-color,#a0a0a0); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
                .bc-call-meta{ text-align:right; font-size:11.5px; color:var(--bs-secondary-color,#a0a0a0); line-height:1.45; white-space:nowrap; min-width:60px; }
                .bc-badge{ font-size:11px; font-weight:600; padding:3px 9px; border-radius:8px; white-space:nowrap; }
                .bc-badge-ok{ background:var(--bs-success-bg-subtle, rgba(19,222,185,.14)); color:var(--bs-success,#13deb9); }
                .bc-badge-err{ background:var(--bs-danger-bg-subtle, rgba(250,137,107,.16)); color:var(--bs-danger,#fa896b); }
                .bc-badge-run{ background:var(--bc-info-bg, var(--dt-surface-2)); color:var(--bc-info-tx, var(--dt-muted)); }
                .bc-badge-wait{ background:var(--bs-tertiary-bg,#1c1c1d); color:var(--bs-secondary-color,#a0a0a0); }
                .bc-call-body{ padding:8px 12px; }
                .bc-trans-head{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--bs-secondary-color,#a0a0a0); margin:0 2px 5px; }
                .bc-trans-wrap{ display:flex; flex-direction:column; gap:6px; padding:2px; }
                .bc-trans-bubble{ max-width:82%; padding:7px 11px; border-radius:12px; font-size:13px; line-height:1.4; white-space:pre-wrap; word-break:break-word; }
                .bc-trans-bubble .bc-trans-who{ display:block; font-size:9.5px; font-weight:600; opacity:.65; margin-bottom:2px; text-transform:uppercase; letter-spacing:.04em; }
                .bc-trans-user{ align-self:flex-start; background:var(--bs-secondary-bg,#1c1c1d); color:var(--bs-body-color,#f5f5f7); border-bottom-left-radius:4px; }
                .bc-trans-bot{ align-self:flex-end; background:var(--dt-surface-2); color:var(--bs-body-color,#f5f5f7); border-bottom-right-radius:4px; }
                .bc-trans-body{ max-height:220px; overflow-y:auto; overflow-x:hidden; padding:4px 2px; }
                .bc-trans-empty{ font-size:12.5px; color:var(--bs-secondary-color,#a0a0a0); padding:6px 2px; }
            
}
/* end dui-template-style modules/aisendlist:0 */
/* dui-template-style {"key":"modules/aisendlist:1","bytes":30317,"sha256":"904b7bc8c720f91f9bb41affcc689ef316cf65ee28ee48f5d86d207a9cf5f9d8","media":null,"source_sha256":"8502a7ac7de6e4c29e125aaa418b848d340f1557ded0240c357644fb192bc7de"} */
@scope (:root:has(template[data-dui-legacy-style="modules/aisendlist:1"])) {

/* ===== Reset / Container ===== */
.bc-module { }
.bc-container {
  padding: 0 28px 28px;
  font-family: var(--font-sans);
  color: var(--text-color);
}
.bc-container *, .bc-container *::before, .bc-container *::after { box-sizing: border-box; }

/* ===== Header ===== */
.bc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 20px;
}
.bc-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.bc-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--text-color);
  letter-spacing: -0.02em;
}
.bc-running-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--dt-surface-2);
  color: var(--dt-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
}
.bc-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bc-btn-create {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--dt-cta);
  color: var(--dt-cta-fg);
  border: none;
  padding: 10px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none;
  text-decoration: none;
  line-height: 1.4;
}
.bc-btn-create:hover {
  background: var(--dt-cta-hover);
  box-shadow: none;
  transform: none;
}
.bc-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-color);
  color: var(--text-color);
  border: 0;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  line-height: 1.4;
}
.bc-btn-secondary:hover {
  border-color: var(--border-strong-color);
  background: var(--hover-color);
}

/* ===== Stat Cards ===== */
.bc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.bc-stat-card {
  background: var(--bg-color);
  border: 0;
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.bc-stat-card:hover {
  box-shadow: none;
  border-color: var(--border-strong-color);
}
.bc-stat-label {
  font-size: 13px;
  color: var(--text-secondary-color);
  font-weight: 500;
  margin-bottom: 6px;
}
.bc-stat-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--text-color);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.bc-stat-sub {
  font-size: 12px;
  color: var(--text-muted-color);
  margin-top: 4px;
  font-weight: 400;
}
.bc-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bc-stat-icon--blue   { background: var(--dt-surface-2); color: var(--dt-muted); }
.bc-stat-icon--green  { background: var(--dt-surface-2); color: var(--dt-muted); }
.bc-stat-icon--purple { background: var(--dt-surface-2); color: var(--dt-muted); }
.bc-stat-icon--orange { background: var(--dt-surface-2); color: var(--dt-muted); }
.bc-stat-icon svg { stroke: currentColor; }

/* ===== Toolbar (Tabs + Search) ===== */
.bc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  border-bottom: 2px solid var(--border-color);
  background: var(--bg-color);
  border-radius: 14px 14px 0 0;
  padding: 0 8px;
}
.bc-tabs {
  display: flex;
  gap: 0;
}
.bc-tab {
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary-color);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.bc-tab:hover { color: var(--text-color); }
.bc-tab.active {
  color: var(--dt-text);
  border-bottom-color: var(--dt-text);
}
.bc-tab-count {
  background: var(--bg-tertiary-color);
  color: var(--text-secondary-color);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  min-width: 24px;
  text-align: center;
}
.bc-tab.active .bc-tab-count {
  background: var(--dt-surface-2);
  color: var(--dt-muted);
}
.bc-search-box {
  position: relative;
  padding: 8px 12px 8px 0;
}
.bc-search-box > svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted-color);
  pointer-events: none;
}
.bc-search-box input {
  border: 0;
  border-radius: 8px;
  padding: 9px 14px 9px 38px;
  font-size: 14px;
  width: 240px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--input-color);
  color: var(--text-color);
  font-family: inherit;
}
.bc-search-box input:focus {
  border-color: var(--dt-focus);
  box-shadow: none;
  background: var(--bg-color);
}
.bc-search-box input::placeholder { color: var(--text-muted-color); }

/* ===== Table ===== */
.bc-table-wrap {
  background: var(--bg-color);
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  border: 0;
  border-top: none;
}
.bc-table-scroll { overflow-y: auto; }
.bc-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.bc-table thead th {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted-color);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary-color);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.bc-th-actions    { width: 60px; }
.bc-th-name       { width: 24%; }
.bc-th-status     { width: 12%; }
.bc-th-recipients { width: 10%; }
.bc-th-callerid   { width: 16%; }
.bc-th-agent      { width: 16%; }
.bc-th-created    { width: 14%; }
.bc-th-createdby  { width: 14%; }

.bc-pager{display:flex;align-items:center;gap:8px;font-size:.8rem}
.bc-pager button{padding:4px 8px;line-height:1}
.bc-pager button[disabled]{opacity:.4;pointer-events:none}
.bc-table tbody tr.bc-data-row {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.12s ease;
  cursor: default;
}
.bc-table tbody tr.bc-data-row:hover { background: var(--hover-color); }
.bc-table tbody tr.bc-data-row:last-child { border-bottom: none; }

.bc-table tbody td {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--datalyse-text-color);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Batch cell (icon + name) */
.bc-batch-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bc-batch-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bc-batch-icon--running   { background: var(--dt-surface-2); color: var(--dt-muted); }
.bc-batch-icon--paused    { background: var(--dt-surface-2); color: var(--dt-muted); }
.bc-batch-icon--queued    { background: var(--bg-tertiary-color); color: var(--text-muted-color); }
.bc-batch-icon--finished,
.bc-batch-icon--completed { background: var(--dt-surface-2); color: var(--dt-muted); }
.bc-batch-icon--failed    { background: var(--dt-surface-2); color: var(--dt-muted); }
.bc-batch-icon--stopped   { background: var(--bg-tertiary-color); color: var(--text-muted-color); }
.bc-batch-icon svg { stroke: currentColor; }

.bc-batch-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.bc-batch-name {
  font-weight: 600;
  color: var(--text-color);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status badges */
.bc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.bc-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bc-status--running         { color: #34d399; }
.bc-status--running::before { background: #34d399; }
.bc-status--paused          { color: #fbbf24; }
.bc-status--paused::before  { background: #fbbf24; }
.bc-status--queued          { color: var(--text-secondary-color); }
.bc-status--queued::before  { background: var(--text-secondary-color); }
.bc-status--finished,
.bc-status--completed          { color: #818cf8; }
.bc-status--finished::before,
.bc-status--completed::before  { background: #818cf8; }
.bc-status--failed          { color: #f87171; }
.bc-status--failed::before  { background: #f87171; }
.bc-status--stopped         { color: var(--text-muted-color); }
.bc-status--stopped::before { background: var(--text-muted-color); }
.bc-status--default         { color: var(--text-secondary-color); }
.bc-status--default::before { background: var(--text-secondary-color); }

/* Recipients */
.bc-recipients { font-weight: 600; color: var(--text-color); font-size: 14px; }

/* Caller ID */
.bc-callerid { color: var(--text-secondary-color); font-size: 13px; }
.bc-callerid-dynamic {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: var(--dt-surface-2);
  color: var(--dt-muted);
}

/* Agent */
.bc-agent { color: var(--text-secondary-color); font-size: 13px; }

/* Created */
.bc-created { color: var(--text-secondary-color); font-size: 13px; }

/* Created by */
.bc-createdby { color: var(--text-secondary-color); font-size: 13px; }

/* ===== Actions dropdown ===== */
.bc-actions-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 0;
  background: var(--bg-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary-color);
  transition: all 0.15s ease;
}
.bc-actions-btn:hover {
  background: var(--hover-color);
  border-color: var(--border-strong-color);
  color: var(--text-color);
}
.bc-actions-btn::after { display: none !important; } /* hide BS caret */
.bc-actions-btn svg { stroke: currentColor; }

.bc-dropdown-inner {
  padding: 6px 0;
  background: var(--bg-color);
  border-radius: 10px;
  min-width: 180px;
}
.bc-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease;
}
.bc-dropdown-item:hover {
  background: var(--hover-color);
  color: var(--text-color);
  text-decoration: none;
}
.bc-dropdown-item svg { stroke: currentColor; flex-shrink: 0; }
.bc-dropdown-item--danger { color: var(--bc-danger-tx, var(--dt-danger)); }
.bc-dropdown-item--danger:hover { background: var(--dt-hover); color: var(--bc-danger-tx, var(--dt-danger)); }
.bc-dropdown-divider {
  height: 1px;
  margin: 4px 12px;
  background: var(--border-color);
}

/* ===== Footer ===== */
.bc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--bg-color);
  border: 0;
  border-top: none;
  border-radius: 0 0 14px 14px;
  margin-top: -1px;
  font-size: 13px;
  color: var(--text-secondary-color);
}
.bc-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== Empty State ===== */
.bc-empty-state {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  text-align: center;
  background: var(--bg-color);
  border-radius: 14px;
  border: 0;
}
.bc-empty-state.visible { display: flex; }
.bc-empty-icon { margin-bottom: 16px; }
.bc-empty-iconwrap {
  width: 92px;
  height: 92px;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  line-height: 1;
  box-shadow: none;
}
.bc-empty-state h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.bc-empty-state p {
  font-size: 15px;
  color: var(--text-secondary-color);
  max-width: 440px;
  margin: 0;
  line-height: 1.6;
}

/* ===== Loading State ===== */
#batchLoading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-secondary-color);
  font-size: 14px;
  gap: 12px;
}

/* ===== Skeleton ===== */
.bc-skeleton-row {
  display: flex;
  align-items: center;
  padding: 6px 0;
  gap: 20px;
}
.bc-skel {
  height: 14px;
  background: var(--dt-surface-2);
  background-size: 200% 100%;
  animation: dui-legacy-modules-aisendlist-bc-shimmer 1.5s ease infinite;
  border-radius: 6px;
}
@keyframes dui-legacy-modules-aisendlist-bc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.bc-skeleton-tr td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border-color);
}

/* ===== Sortable headers ===== */
.bc-table thead th.sortable-th {
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease;
}
.bc-table thead th.sortable-th:hover {
  background: var(--hover-color);
}
.bc-sort-arrow {
  font-size: 0.8rem;
  margin-left: 3px;
}
.bc-sort-arrow--inactive { opacity: 0.35; }
.bc-sort-arrow--active {
  opacity: 1;
  color: var(--dt-text);
  font-weight: 700;
}

/* ===== Scrollbar ===== */
.bc-table-scroll::-webkit-scrollbar { width: 6px; }
.bc-table-scroll::-webkit-scrollbar-thumb {
  background: var(--scrolldark-color);
  border-radius: 3px;
}
.bc-table-scroll::-webkit-scrollbar-track { background: transparent; }

/* ===== Modal stat tiles ===== */
.stat-tile {
  border: 0;
  border-radius: .5rem;
  padding: .5rem .75rem;
  background: var(--bg-secondary-color);
}
.stat-label { font-size: .8rem; color: var(--text-secondary-color); }
.stat-value { font-weight: 600; font-size: 1.15rem; color: var(--text-color); }

/* ===== Responsive ===== */
@media (max-width: 1200px) {
  .bc-stats { grid-template-columns: repeat(2, 1fr); }
  .bc-th-callerid, .bc-td-callerid { display: none; }
  .bc-th-createdby, .bc-td-createdby { display: none; }
}
@media (max-width: 900px) {
  .bc-stats { grid-template-columns: 1fr 1fr; }
  .bc-toolbar { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .bc-tabs { overflow-x: auto; padding: 0 8px; }
  .bc-search-box { padding: 8px 12px; }
  .bc-search-box input { width: 100%; }
  .bc-th-agent, .bc-td-agent,
  .bc-th-created, .bc-td-created { display: none; }
}
@media (max-width: 640px) {
  .bc-container { padding: 0 16px 16px; }
  .bc-stats { grid-template-columns: 1fr; }
  .bc-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bc-header-right { width: 100%; }
  .bc-btn-create { width: 100%; justify-content: center; }
  .bc-btn-secondary { width: 100%; justify-content: center; }
  .bc-th-recipients, .bc-td-recipients { display: none; }
  .bc-footer { flex-direction: column; gap: 8px; align-items: flex-start; }
}

#batchCallsCard .bc-channel-control { display:flex; align-items:center; gap:8px; min-width:175px; }
#batchCallsCard .bc-channel-control > label { margin:0; font-size:12px; color:var(--dt-muted,#737373); }
#batchCallsCard .bc-channel-control > select, #batchCallsCard .bc-channel-control .dui-select { min-width:135px; }
@media(max-width:640px) { #batchCallsCard .bc-header-right { flex-wrap:wrap; } }

/* ═══════════ ElevenLabs v4 Skill Unified Theme ═══════════ */
#akialtopagina #batchCallsCard,
#modalDetail {
  --bc-ok-bg: var(--dt-chip-success);     --bc-ok-tx: #076b39;
  --bc-warn-bg: var(--dt-chip-warning);   --bc-warn-tx: #8a4d0a;
  --bc-info-bg: var(--dt-chip-channel);   --bc-info-tx: #005fa6;
  --bc-danger-bg: var(--dt-chip-danger); --bc-danger-tx: #a33232;
  --bc-control-h: 36px;
  --bc-radius: 10px;
  --bc-radius-lg: 16px;
}
:scope[data-bs-theme="dark"] #akialtopagina #batchCallsCard,
:scope[data-bs-theme="dark"] #modalDetail {
  --bc-ok-bg: var(--dt-chip-success);     --bc-ok-tx: #5fd58f;
  --bc-warn-bg: var(--dt-chip-warning);   --bc-warn-tx: #f0b45c;
  --bc-info-bg: var(--dt-chip-channel);   --bc-info-tx: #71c4f8;
  --bc-danger-bg: var(--dt-chip-danger); --bc-danger-tx: #f08a8a;
}
#akialtopagina #batchCallsCard,
#modalDetail.bc-campaign-detail .modal-dialog .modal-content {
  --vc-success: var(--dt-success);
  --vc-warning: var(--dt-warning);
  --vc-danger: var(--dt-danger);
  color: var(--el-ink, var(--dt-text));
  font-family: var(--font-sans);
}
#akialtopagina #batchCallsCard .bc-title { font-size: 20px; font-weight: 500; letter-spacing: -0.025em; color: var(--el-ink, var(--dt-text)); }
#akialtopagina #batchCallsCard .sb-section-trigger-text strong { font-size: 20px; font-weight: 500; letter-spacing: -0.025em; }
#akialtopagina #batchCallsCard .sb-section-trigger-icon { background: var(--el-card-stone, var(--dt-surface-2)); color: var(--el-ink-secondary, var(--dt-muted)); border: 0; }
#akialtopagina #batchCallsCard .bc-running-badge {
  height: 24px; padding: 0 10px; gap: 5px; border-radius: 999px;
  background: var(--el-card-stone, var(--dt-surface-2)); color: var(--el-ink-secondary, var(--dt-muted));
  border: 1px solid var(--el-border, var(--dt-border));
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
#akialtopagina #batchCallsCard .bc-running-badge svg { color: var(--el-accent, #ea3815); }
#akialtopagina #batchCallsCard .bc-channel-control > label { color: var(--el-ink-secondary, var(--dt-muted)); }

#akialtopagina #batchCallsCard .bc-btn-create,
#akialtopagina #batchCallsCard .bc-btn-secondary {
  height: var(--bc-control-h); min-height: var(--bc-control-h); padding: 0 15px; gap: 7px;
  border-radius: 9999px; font-size: 13px; font-weight: 500; line-height: 1;
  box-shadow: none; transform: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#akialtopagina #batchCallsCard .bc-btn-create { background: var(--el-cta-bg, var(--dt-cta)); border: 0; color: var(--el-cta-fg, var(--dt-cta-fg)); }
#akialtopagina #batchCallsCard .bc-btn-create:hover { background: var(--el-cta-hover, var(--dt-cta-hover)); border-color: var(--el-cta-hover, var(--dt-cta-hover)); color: var(--el-cta-fg, var(--dt-cta-fg)); box-shadow: none; transform: none; }
#akialtopagina #batchCallsCard .bc-btn-create svg { width: 16px; height: 16px; }
#akialtopagina #batchCallsCard .bc-btn-secondary { background: var(--el-stage-bg, transparent); border: 0; color: var(--el-ink, var(--dt-text)); }
#akialtopagina #batchCallsCard .bc-btn-secondary:hover { background: var(--el-card-stone, var(--dt-hover)); border-color: var(--el-border-strong, var(--dt-border-strong)); color: var(--el-ink, var(--dt-text)); }
#akialtopagina #batchCallsCard .bc-btn-secondary svg { width: 16px; height: 16px; color: var(--el-ink-secondary, var(--dt-muted)); }

#akialtopagina #batchCallsCard .bc-stat-card,
#akialtopagina #batchCallsCard .bc-stat-card:hover { border-color: var(--el-border, var(--dt-border)); border-radius: var(--bc-radius-lg); background: var(--el-card-stone, var(--dt-surface-2)); box-shadow: none; }
#akialtopagina #batchCallsCard .bc-stat-label { color: var(--el-ink-secondary, var(--dt-muted)); font-weight: 500; }
#akialtopagina #batchCallsCard .bc-stat-value { font-size: 26px; font-weight: 500; letter-spacing: -.025em; color: var(--el-ink, var(--dt-text)); font-variant-numeric: tabular-nums; }
#akialtopagina #batchCallsCard .bc-stat-sub { color: var(--el-ink-muted, var(--dt-faint)); }
#akialtopagina #batchCallsCard .bc-stat-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--el-stage-bg, var(--dt-surface)); color: var(--el-ink-secondary, var(--dt-muted)); border: 0; }
#akialtopagina #batchCallsCard .bc-stat-icon svg { width: 16px; height: 16px; }

#akialtopagina #batchCallsCard .bc-search-box > svg { color: var(--el-ink-muted, var(--dt-faint)); }
#akialtopagina #batchCallsCard .bc-search-box input {
  height: var(--bc-control-h); padding: 0 14px 0 36px; font-size: 13px;
  border: 0 !important; border-radius: 9999px;
  color: var(--el-ink, var(--dt-text)); background: var(--el-stage-bg, transparent) !important; box-shadow: none !important;
}
#akialtopagina #batchCallsCard .bc-search-box input:focus,
#akialtopagina #batchCallsCard .bc-search-box input:focus-visible { border-color: var(--el-ink, var(--dt-focus)) !important; outline: none !important; box-shadow: none !important; }
#akialtopagina #batchCallsCard .bc-search-box input::placeholder { color: var(--el-ink-muted, var(--dt-faint)); }
#akialtopagina #batchCallsCard .bc-toolbar { border-color: var(--el-border, var(--dt-border)); background: transparent; box-shadow: none; }
#akialtopagina #batchCallsCard .bc-tabs { border-bottom-color: var(--el-border, var(--dt-border)); }
#akialtopagina #batchCallsCard .bc-tab { color: var(--el-ink-secondary, var(--dt-muted)); font-size: 13px; font-weight: 500; border-radius: 0; background: transparent; transition: color .12s ease, border-color .12s ease; }
#akialtopagina #batchCallsCard .bc-tab:hover { color: var(--el-ink, var(--dt-text)); background: transparent; }
#akialtopagina #batchCallsCard .bc-tab.active { color: var(--el-ink, var(--dt-text)); border-bottom-color: var(--el-ink, var(--dt-text)); font-weight: 600; }
#akialtopagina #batchCallsCard .bc-tab-count,
#akialtopagina #batchCallsCard .bc-tab.active .bc-tab-count {
  display: inline-flex; align-items: center; justify-content: center; height: 18px; min-width: 18px; padding: 0 6px; border-radius: 999px;
  background: var(--el-card-stone, var(--dt-surface-2)); color: var(--el-ink-secondary, var(--dt-muted)); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}

#akialtopagina #batchCallsCard .bc-table-wrap { margin-top: 16px; border: 0; border-radius: var(--bc-radius-lg); background: var(--el-stage-bg, var(--dt-surface)); }
#akialtopagina #batchCallsCard .bc-table { font-variant-numeric: tabular-nums; }
#akialtopagina #batchCallsCard .bc-table thead th {
  height: 40px; padding: 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--el-ink-secondary, var(--dt-muted)); background: var(--el-card-stone, var(--dt-topbar)); border-bottom: 1px solid var(--el-border, var(--dt-border));
}
#akialtopagina #batchCallsCard .bc-table thead th.bc-th-actions { color: transparent; padding-left: 8px; padding-right: 8px; }
#akialtopagina #batchCallsCard .bc-table thead th.sortable-th:hover { background: var(--el-card-stone-hover, var(--dt-hover)); color: var(--el-ink, var(--dt-text)); }
#akialtopagina #batchCallsCard .bc-sort-arrow--active { color: var(--el-ink, var(--dt-text)); font-weight: 600; }
#akialtopagina #batchCallsCard .bc-sort-arrow--inactive { color: var(--el-ink-muted, var(--dt-faint)); opacity: 1; }
#akialtopagina #batchCallsCard .bc-table tbody td { height: 52px; padding: 8px 12px; font-size: 13px; color: var(--el-ink-secondary, var(--dt-muted)); }
#akialtopagina #batchCallsCard .bc-table tbody td.bc-td-actions { padding-left: 8px; padding-right: 8px; }
#akialtopagina #batchCallsCard .bc-table tbody tr.bc-data-row { border-bottom: 1px solid var(--el-border, var(--dt-border)); }
#akialtopagina #batchCallsCard .bc-table tbody tr.bc-data-row:last-child { border-bottom: 0; }
#akialtopagina #batchCallsCard .bc-table tbody tr.bc-data-row:hover { background: var(--el-card-stone, var(--dt-hover)); }
#akialtopagina #batchCallsCard .bc-skeleton-tr td { border-bottom-color: var(--el-border, var(--dt-border)); }
#akialtopagina #batchCallsCard .bc-skel { background: var(--el-card-stone, var(--dt-surface-2)); background-image: none; animation: none; }

#akialtopagina #batchCallsCard .bc-batch-icon { background: var(--el-card-stone, var(--dt-surface-2)); color: var(--el-ink-secondary, var(--dt-muted)); border: 0; border-radius: 8px; }
#akialtopagina #batchCallsCard .bc-batch-name { color: var(--el-ink, var(--dt-text)); font-size: 13px; font-weight: 500; }
#akialtopagina #batchCallsCard .bc-batch-name:hover { text-decoration: underline; text-underline-offset: 3px; }
#akialtopagina #batchCallsCard .bc-recipients { color: var(--el-ink, var(--dt-text)); font-weight: 500; font-variant-numeric: tabular-nums; }
#akialtopagina #batchCallsCard .bc-callerid,
#akialtopagina #batchCallsCard .bc-agent,
#akialtopagina #batchCallsCard .bc-created,
#akialtopagina #batchCallsCard .bc-createdby { color: var(--el-ink-secondary, var(--dt-muted)); font-size: 13px; }
#akialtopagina #batchCallsCard .bc-callerid-dynamic {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
  background: var(--el-card-stone, var(--dt-surface-2)); color: var(--el-ink-secondary, var(--dt-muted)); font-size: 11px; font-weight: 600;
}

#akialtopagina #batchCallsCard .bc-status {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border-radius: 999px;
  background: var(--el-card-stone, var(--dt-surface-2)); color: var(--el-ink-secondary, var(--dt-muted)); font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap;
}
#akialtopagina #batchCallsCard .bc-status::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#akialtopagina #batchCallsCard .bc-status--running { background: var(--bc-ok-bg); color: var(--bc-ok-tx); }
#akialtopagina #batchCallsCard .bc-status--paused { background: var(--bc-warn-bg); color: var(--bc-warn-tx); }
#akialtopagina #batchCallsCard .bc-status--finished,
#akialtopagina #batchCallsCard .bc-status--completed { background: var(--bc-info-bg); color: var(--bc-info-tx); }
#akialtopagina #batchCallsCard .bc-status--failed { background: var(--bc-danger-bg); color: var(--bc-danger-tx); }
#akialtopagina #batchCallsCard .bc-status--queued,
#akialtopagina #batchCallsCard .bc-status--stopped,
#akialtopagina #batchCallsCard .bc-status--default { background: var(--el-card-stone, var(--dt-surface-2)); color: var(--el-ink-secondary, var(--dt-muted)); }

#akialtopagina #batchCallsCard .bc-actions-btn { border: 0; border-radius: var(--bc-radius); background: transparent; color: var(--el-ink-secondary, var(--dt-muted)); }
#akialtopagina #batchCallsCard .bc-actions-btn:hover { background: var(--el-card-stone, var(--dt-hover)); border-color: var(--el-border-strong, var(--dt-border-strong)); color: var(--el-ink, var(--dt-text)); }
#akialtopagina #batchCallsCard .bc-actions-btn[aria-expanded="true"] { background: var(--el-card-stone-hover, var(--dt-active)); border-color: var(--el-border-strong, var(--dt-border-strong)); color: var(--el-ink, var(--dt-text)); }
#akialtopagina #batchCallsCard .bc-dropdown-inner { padding: 0; background: transparent; border-radius: 0; }
#akialtopagina #batchCallsCard .bc-dropdown-item { min-height: 32px; padding: 6px 9px; border-radius: 6px; color: var(--el-ink, var(--dt-text)); font-size: 12.5px; font-weight: 500; }
#akialtopagina #batchCallsCard .bc-dropdown-item:hover { background: var(--el-card-stone, var(--dt-hover)); color: var(--el-ink, var(--dt-text)); }
#akialtopagina #batchCallsCard .bc-dropdown-item svg { color: var(--el-ink-secondary, var(--dt-muted)); }
#akialtopagina #batchCallsCard .bc-dropdown-item--danger,
#akialtopagina #batchCallsCard .bc-dropdown-item--danger:hover { color: var(--bc-danger-tx); }
#akialtopagina #batchCallsCard .bc-dropdown-item--danger:hover { background: var(--el-card-stone, var(--dt-hover)); }
#akialtopagina #batchCallsCard .bc-dropdown-item--danger svg { color: inherit; }
#akialtopagina #batchCallsCard .bc-dropdown-divider { margin: 4px 0; background: var(--el-border, var(--dt-border)); }

#akialtopagina #batchCallsCard .bc-footer { border-color: var(--el-border, var(--dt-border)); background: transparent; color: var(--el-ink-muted, var(--dt-faint)); font-size: 12.5px; font-variant-numeric: tabular-nums; }
#akialtopagina #batchCallsCard .bc-pager { color: var(--el-ink-secondary, var(--dt-muted)); }
#akialtopagina #batchCallsCard .bc-pager .bc-btn-secondary { height: 30px; min-height: 30px; min-width: 30px; padding: 0 8px; border-color: var(--el-border, var(--dt-border)); color: var(--el-ink-secondary, var(--dt-muted)); }
#akialtopagina #batchCallsCard .bc-pager .bc-btn-secondary:hover { color: var(--el-ink, var(--dt-text)); }

#akialtopagina #batchCallsCard .bc-empty-state { border-color: var(--el-border, var(--dt-border)); border-radius: var(--bc-radius-lg); background: var(--el-card-stone, transparent); box-shadow: none; }
#akialtopagina #batchCallsCard #bc-empty-icon svg { stroke: var(--el-ink-muted, var(--dt-faint)); }
#akialtopagina #batchCallsCard .bc-empty-iconwrap {
  width: 56px; height: 56px; border-radius: 14px; font-size: 26px; box-shadow: none;
  background: var(--el-stage-bg, var(--dt-surface-2)) !important; color: var(--el-ink-secondary, var(--dt-muted)) !important; border: 0;
}
#akialtopagina #batchCallsCard .bc-empty-state h2 { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; color: var(--el-ink, var(--dt-text)); }
#akialtopagina #batchCallsCard .bc-empty-state p { color: var(--el-ink-secondary, var(--dt-muted)); font-size: 13px; }
#akialtopagina #batchCallsCard #batchLoading .spinner-border { color: var(--el-ink-secondary, var(--dt-muted)) !important; border-width: 2px; }

#modalDetail.bc-campaign-detail .modal-dialog .modal-content { box-shadow: none !important; border: 0 !important; border-radius: var(--bc-radius-lg) !important; background: var(--el-stage-bg, var(--dt-surface)) !important; }
#modalDetail.bc-campaign-detail .modal-dialog .modal-header,
#modalDetail.bc-campaign-detail .modal-dialog .modal-footer { border-color: var(--el-border, var(--dt-border)); }
#modalDetail.bc-campaign-detail .modal-dialog .modal-title { font-size: 16px; font-weight: 500; letter-spacing: -.015em; }
#modalDetail.bc-campaign-detail .modal-content .btn { min-height: 32px; border-radius: 9999px; font-size: 12.5px; font-weight: 500; box-shadow: none; }
#modalDetail .modal-content .stat-tile { border-color: var(--el-border, var(--dt-border)); border-radius: 12px; background: var(--el-card-stone, var(--dt-surface)); }
#modalDetail .modal-content .stat-label { color: var(--el-ink-secondary, var(--dt-muted)); }
#modalDetail .modal-content .stat-value { color: var(--el-ink, var(--dt-text)); font-variant-numeric: tabular-nums; }
#modalDetail .modal-content .progress { background: var(--el-card-stone, var(--dt-surface-2)); }
#modalDetail .modal-content .progress-bar { background: var(--el-cta-bg, var(--dt-cta)); }

}
/* end dui-template-style modules/aisendlist:1 */
/* dui-template-style {"key":"modules/aisendmasive:0","bytes":9173,"sha256":"be745046582337b5246317d4c1883224f756f9e0f192fd9f5baea33f42cd1f6f","media":null,"source_sha256":"be745046582337b5246317d4c1883224f756f9e0f192fd9f5baea33f42cd1f6f"} */
@scope (:root:has(template[data-dui-legacy-style="modules/aisendmasive:0"])) {

.bm{--bm-bg:var(--dt-app,#f8f8f7);--bm-surface:var(--dt-surface,#fff);--bm-muted:var(--dt-muted,#70706c);--bm-text:var(--dt-text,#181817);--bm-border:var(--dt-border,#e6e6e3);--bm-soft:var(--dt-surface-2,#f2f2f0);--bm-active:var(--dt-active,#ebebe8);color:var(--bm-text);font:13px var(--el-font,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);max-width:1240px;margin:auto;padding:28px 32px 48px;}
.bm *{box-sizing:border-box}.bm [hidden]{display:none!important}.bm-head{display:flex;align-items:center;gap:16px;margin-bottom:28px}.bm-head-copy{flex:1;min-width:0}.bm h1{font-size:25px;line-height:1.2;letter-spacing:-.6px;font-weight:600;margin:8px 0}.bm p{margin:0;color:var(--bm-muted);line-height:1.6}.bm-back{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--bm-muted);font:inherit;padding:6px 0;cursor:pointer}.bm-back:hover{color:var(--bm-text)}.bm-steps{display:flex;gap:24px;list-style:none;padding:0 0 20px;margin:0 0 24px;border-bottom:1px solid var(--bm-border);color:var(--bm-muted);font-size:12px}.bm-steps li{display:flex;gap:8px;align-items:center}.bm-steps b,.bm-number{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:50%;background:var(--bm-soft);color:var(--bm-muted);font-size:11px;font-weight:600}.bm-steps li.is-current{color:var(--bm-text)}.bm-steps li.is-current b{background:var(--bm-text);color:var(--bm-surface)}.bm-section-heading{display:flex;gap:10px;align-items:center;margin:0 0 15px}.bm-section-heading h2{font-size:16px;letter-spacing:-.15px;font-weight:600;margin:0}.bm-drop{position:relative;border:1px dashed var(--bm-border);border-radius:12px;background:var(--bm-surface);transition:background .15s,border-color .15s}.bm-drop.is-dragging{border-color:var(--bm-text);background:var(--bm-active)}.bm-upload{width:100%;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;padding:32px 20px;border:0;background:transparent;color:var(--bm-text);font:inherit;cursor:pointer}.bm-upload:disabled{cursor:wait;opacity:.65}.bm-upload-icon{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:12px;font-size:24px;background:var(--bm-soft)}.bm-upload strong{font-size:17px;font-weight:500;letter-spacing:-.2px}.bm-upload small{color:var(--bm-muted);font-size:12px}.bm-upload .bm-file-types{font-size:10px;letter-spacing:.08em;margin-top:6px}.bm.has-contacts .bm-upload{flex-direction:row;justify-content:flex-start;padding:18px 20px}.bm.has-contacts .bm-upload-icon{width:36px;height:36px;font-size:20px;flex:none}.bm.has-contacts .bm-upload strong{font-size:14px;text-align:left}.bm.has-contacts .bm-upload small:not(.bm-file-types){display:none}.bm.has-contacts .bm-upload .bm-file-types{margin:0 0 0 auto;white-space:nowrap}.bm-import-meta{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:12px 0 18px;flex-wrap:wrap}.bm-link{background:transparent;border:0;color:var(--bm-muted);font:inherit;cursor:pointer;padding:3px 0;display:inline-flex;gap:6px;align-items:center}.bm-link:hover{color:var(--bm-text);text-decoration:underline}.bm-file-status{display:flex;gap:7px;align-items:center;font-size:12px;color:var(--bm-muted);min-height:20px}.bm .bm-file-status.is-error{color:var(--dt-danger,#a33232)}.bm-table-wrap{border:0;border-radius:10px;background:var(--bm-surface);overflow:hidden;margin:0 0 28px}.bm-table-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--bm-border)}.bm-table-head strong{font-size:13px;font-weight:500}.bm-count{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:5px;background:var(--bm-soft);font-size:11px;color:var(--bm-muted)}.bm .table{--bs-table-bg:var(--bm-surface);--bs-table-color:var(--bm-text);--bs-table-striped-bg:transparent;--bs-table-striped-color:var(--bm-text);--bs-table-hover-bg:var(--bm-soft);--bs-table-hover-color:var(--bm-text);border-color:var(--bm-border);font-size:12px}.bm .table thead th{color:var(--bm-muted);font-weight:500;background:var(--bm-soft);padding:11px 14px;white-space:nowrap}.bm .table td{padding:10px 14px}.bm .table tfoot td{background:var(--bm-surface)}.bm .table-responsive{max-height:360px!important}.bm-table-wrap:not(.is-expanded) .table-responsive{display:none}.bm-table-wrap.is-expanded #batch-contact-toggle i{transform:rotate(180deg)}.bm-channels-section{margin-top:28px}.bm-channel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.bm-channel{border:0;border-radius:10px;padding:16px;background:var(--bm-surface);color:var(--bm-text);font:inherit;cursor:pointer;text-align:left;position:relative;display:flex;flex-direction:column;gap:9px;min-width:0}.bm-channel>i{font-size:22px;color:var(--bm-muted)}.bm-channel strong{font-weight:500}.bm-channel small{font-size:11px;color:var(--bm-muted);line-height:1.4}.bm-channel.active{background:var(--bm-soft);border-color:var(--bm-text)}.bm-channel.active:after{content:'✓';position:absolute;right:13px;top:13px;font-size:12px}.bm-channel:disabled{opacity:.55;cursor:default}.bm-hint{margin-top:10px;color:var(--bm-muted);font-size:12px;min-height:18px}.bm-config-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;margin-top:32px;padding-top:28px;border-top:1px solid var(--bm-border)}.bm-config-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.bm-config-fields #batchname-wrap{grid-column:1/-1}.bm .form-label{font-size:12px;font-weight:500;margin-bottom:7px}.bm .form-control,.bm .form-select{color:var(--bm-text);background-color:var(--bm-surface);border:0;border-radius:7px;min-height:36px;font:inherit;box-shadow:none}.bm .form-control:focus,.bm .form-select:focus{border-color:var(--bm-text);outline:2px solid var(--bm-active);outline-offset:1px}.bm .form-text{font-size:11px}.bm .btn{font:inherit;border-radius:7px}.bm .btn-primary{color:var(--bm-surface);background:var(--bm-text);border-color:var(--bm-text)}.bm .btn-outline-secondary{color:var(--bm-muted);border-color:var(--bm-border);background:var(--bm-surface)}.bm .btn-outline-secondary.active{color:var(--bm-text);background:var(--bm-active);border-color:var(--bm-border)}.bm .btn-outline-danger{color:var(--bm-muted);border-color:var(--bm-border)}.bm .btn-outline-danger:hover{color:var(--dt-danger,#a33232);background:var(--bm-soft)}.bm .badge{background:var(--bm-soft)!important;color:var(--bm-muted)!important;font-weight:500}.bm-message-context{display:flex;gap:12px;align-items:flex-start;padding:16px;margin-bottom:20px;border:0;border-radius:9px;background:var(--bm-surface)}.bm-message-context>i{font-size:22px}.bm-message-context p{font-size:12px}.bm-message-context strong{display:block;font-size:13px;font-weight:500;margin-bottom:4px}.bm-schedule-title{font-size:13px;font-weight:500;margin:18px 0 12px}.bm-summary{align-self:start;position:sticky;top:16px;border:0;border-radius:12px;padding:20px;background:var(--bm-surface)}.bm-summary h3{font-size:14px;font-weight:600;margin:0 0 18px}.bm-summary dl{display:grid;grid-template-columns:1fr auto;gap:13px;font-size:12px;margin:0 0 20px}.bm-summary dt{font-weight:400;color:var(--bm-muted)}.bm-summary dd{margin:0;text-align:right;max-width:160px;overflow-wrap:anywhere}.bm-summary-note{font-size:11px;line-height:1.5;margin-top:12px!important}.bm-summary .btn{min-height:38px}.bm-empty-next{padding:22px 0;color:var(--bm-muted);display:flex;align-items:center;gap:10px;font-size:12px}.bm-review-dialog{color:var(--dt-text,#181817);background:var(--dt-surface,#fff);width:min(480px,calc(100vw - 32px));padding:28px;border:0;border-radius:14px;box-shadow:none}.bm-review-dialog::backdrop{background:#0005}.bm-review-dialog h2{font-size:20px;margin:0 0 10px}.bm-review-dialog p{color:var(--dt-muted,#70706c);font-size:13px;line-height:1.5}.bm-review-dialog dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:13px;margin:22px 0}.bm-review-dialog dt{font-weight:400;color:var(--dt-muted,#70706c)}.bm-review-dialog dd{margin:0;text-align:right;overflow-wrap:anywhere}.bm-review-actions{display:flex;justify-content:flex-end;gap:8px}.bm button:focus-visible{outline:2px solid var(--bm-text);outline-offset:3px}.bm-review-dialog button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(max-width:900px){.bm{padding:22px 20px 40px}.bm-config-grid{grid-template-columns:minmax(0,1fr) 250px;gap:22px}.bm-channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.bm{padding:18px 16px 32px}.bm h1{font-size:22px}.bm-head{margin-bottom:20px}.bm-steps{gap:12px;font-size:10px}.bm-steps li{gap:5px}.bm-steps b{width:18px;height:18px;font-size:10px}.bm-upload{padding:28px 14px}.bm-upload strong{font-size:15px}.bm-config-grid{grid-template-columns:1fr;gap:24px}.bm-summary{position:static}.bm-config-fields{grid-template-columns:1fr}.bm.has-contacts .bm-upload{padding:14px;flex-wrap:wrap}.bm.has-contacts .bm-upload .bm-file-types{display:none}.bm-channel{padding:14px}.bm-import-meta{gap:8px}.bm-table-wrap .table{min-width:650px}}
@media(prefers-reduced-motion:reduce){.bm *{transition:none!important}}

}
/* end dui-template-style modules/aisendmasive:0 */
/* dui-template-style {"key":"modules/aivideostudio:0","bytes":79446,"sha256":"63cdb82f60aa5e3c21feb9efe70a025024e1298d97bd9a6cf6a67ea426003700","media":null,"source_sha256":"bcea984da5bc9fa4425fda79587d07a8fafe411cd9ae44647821b6be8774bc34"} */
@scope (:root:has(template[data-dui-legacy-style="modules/aivideostudio:0"])) {

    #akicontenidonormal[data-module="aivideostudio"] {
        --aivs-bg: var(--dt-app);
        --aivs-surface: var(--dt-surface);
        --aivs-surface-2: var(--dt-surface-2);
        --aivs-surface-3: var(--dt-surface-3);
        --aivs-line: var(--dt-border);
        --aivs-line-strong: var(--dt-border-strong);
        --aivs-text: var(--dt-text);
        --aivs-muted: var(--dt-muted);
        --aivs-faint: var(--dt-faint);
        --aivs-focus: var(--aivs-text);
        --aivs-black: var(--dt-cta);
        --aivs-danger: var(--dt-danger);
        --aivs-success: var(--dt-success);
        --aivs-shadow: 0 0 0 transparent; /* sin sombras (dirección 26-10) */
        --aivs-pop-shadow: var(--dt-pop-shadow, 0 0 0 transparent);
        --aivs-composer-h: 210px;
        --aivs-composer-space: var(--aivs-composer-h);
        height: calc(100vh - var(--dt-topbar-h, 44px));
        height: calc(100dvh - var(--dt-topbar-h, 44px));
        min-height: 0;
        padding: 0 !important;
        overflow: hidden;
        position: relative;
        container-type: inline-size;
        background: var(--aivs-bg);
    }

    [data-bs-theme="dark"] #akicontenidonormal[data-module="aivideostudio"] {
        --aivs-bg: var(--dt-app);
        --aivs-surface: var(--dt-surface);
        --aivs-surface-2: var(--dt-surface-2);
        --aivs-surface-3: var(--dt-surface-3);
        --aivs-line: var(--dt-border);
        --aivs-line-strong: var(--dt-border-strong);
        --aivs-text: var(--dt-text);
        --aivs-muted: var(--dt-muted);
        --aivs-faint: var(--dt-faint);
        --aivs-focus: var(--aivs-text);
        --aivs-black: var(--dt-cta);
        --aivs-shadow: 0 0 0 transparent;
        --aivs-pop-shadow: var(--dt-pop-shadow, 0 0 0 transparent);
    }

    #akicontenidonormal[data-module="aivideostudio"] *,
    #akicontenidonormal[data-module="aivideostudio"] *::before,
    #akicontenidonormal[data-module="aivideostudio"] *::after { box-sizing: border-box; }

    .aivs-app {
        width: 100%; height: 100%; min-width: 0; min-height: 0; position: relative;
        overflow: hidden; background: var(--aivs-bg); color: var(--aivs-text); font-family: inherit;
    }

    .aivs-scroll {
        width: 100%; height: 100%; overflow: auto; overscroll-behavior: contain;
        scrollbar-gutter: stable; scroll-padding-bottom: calc(var(--aivs-composer-space) + 54px);
    }

    .aivs-shell {
        width: min(100%, 1360px); min-height: 100%; margin: 0 auto;
        padding: 34px 32px calc(var(--aivs-composer-space) + 86px);
    }

    .aivs-heading { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
    .aivs-title {
        margin: 0; color: var(--aivs-text) !important; font-size: clamp(28px, 3vw, 36px) !important; line-height: 1.15;
        letter-spacing: -.045em; font-weight: 400;
    }
    .aivs-intro { margin: 0 0 25px; max-width: 60ch; color: var(--aivs-muted); font-size: 14px; line-height: 1.6; }
    .aivs-beta {
        display: inline-flex; align-items: center; height: 23px; padding: 0 8px; border-radius: 999px;
        background: var(--aivs-surface-2); color: var(--aivs-muted); font-size: 11px; font-weight: 650;
    }

    .aivs-tabs {
        width: fit-content; max-width: 100%; min-width: 0; display: flex; align-items: stretch; gap: 3px; min-height: 42px;
        padding: 4px; border: 0; border-radius: 999px; background: var(--aivs-surface-2); margin-bottom: 24px;
    }
    .aivs-tab {
        position: relative; appearance: none; border: 0; padding: 0 19px; margin: 0; border-radius: 999px;
        background: transparent; color: var(--aivs-muted); font: inherit; font-size: 14px; font-weight: 560; cursor: pointer;
    }
    .aivs-tab:first-child { padding-inline: 19px; }
    .aivs-tab:hover { color: var(--aivs-text); }
    .aivs-tab[aria-selected="true"] { color: var(--aivs-text); background: var(--aivs-surface); font-weight: 650; box-shadow: 0 2px 5px rgba(20, 30, 50, .07); }
    .aivs-tab[aria-selected="true"]::after {
        content: none;
    }
    .aivs-tab:first-child[aria-selected="true"]::after { right: 14px; }

    .aivs-panel[hidden] { display: none !important; }

    .aivs-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
    .aivs-search {
        flex: 1 1 auto; min-width: 0; height: 46px; display: flex; align-items: center; gap: 10px;
        padding: 0 17px; border: 0; border-radius: 999px;
        background: var(--aivs-surface); color: var(--aivs-muted); box-shadow: none; transition: box-shadow .15s;
    }
    .aivs-search:focus-within { box-shadow: inset 0 0 0 1px var(--aivs-line-strong), 0 0 0 3px color-mix(in srgb, var(--aivs-text) 9%, transparent); }
    .aivs-search > i { flex: 0 0 auto; font-size: 18px; }
    #akicontenidonormal[data-module="aivideostudio"] input.aivs-search-input {
        min-width: 0; width: 100%; height: 100%; padding: 0 !important; border: 0 !important; outline: 0 !important;
        box-shadow: none !important; background: transparent !important; color: var(--aivs-text) !important;
        font: inherit; font-size: 14px;
    }
    #akicontenidonormal[data-module="aivideostudio"] .aivs-search-input::placeholder {
        color: var(--aivs-faint) !important;
        -webkit-text-fill-color: var(--aivs-faint) !important;
        opacity: 1 !important;
    }
    .aivs-search-clear {
        flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
        border: 0; border-radius: 7px; padding: 0; background: transparent; color: var(--aivs-muted); cursor: pointer;
    }
    .aivs-search-clear:hover { background: var(--aivs-surface-2); color: var(--aivs-text); }
    .aivs-search-clear[hidden] { display: none; }

    .aivs-media-filters { min-width: 0; display: flex; align-items: center; gap: 8px; margin: 2px 0 17px; padding: 2px 1px; overflow-x: auto; scrollbar-width: none; }
    .aivs-media-filters::-webkit-scrollbar { display: none; }
    .aivs-media-filter {
        appearance: none; flex: 0 0 auto; min-height: 36px; padding: 0 15px; border: 1px solid var(--aivs-line); border-radius: 999px;
        background: transparent; color: var(--aivs-muted); box-shadow: none;
        display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 11px; font-weight: 620; line-height: 1; cursor: pointer;
        transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
    }
    .aivs-media-filter:hover { border-color: var(--aivs-line-strong); background: var(--aivs-surface-2); color: var(--aivs-text); }
    .aivs-media-filter:active { transform: translateY(0); }
    .aivs-media-filter-kind { width: 15px; color: var(--aivs-muted); font-size: 14px; text-align: center; transition: color .15s ease; }
    .aivs-media-filter-remove {
        width: 0; height: 18px; margin-left: -5px; border-radius: 6px; overflow: hidden; opacity: 0; transform: scale(.72);
        display: inline-flex; align-items: center; justify-content: center; color: var(--aivs-muted); font-size: 12px;
        transition: width .15s ease, margin .15s ease, opacity .15s ease, transform .15s ease, background .15s ease;
    }
    .aivs-media-filter[aria-pressed="true"] {
        border-color: var(--aivs-text); background: var(--aivs-text); color: var(--aivs-surface);
        box-shadow: none; font-weight: 650;
    }
    .aivs-media-filter[aria-pressed="true"] .aivs-media-filter-kind { color: inherit; }
    .aivs-media-filter[aria-pressed="true"] .aivs-media-filter-remove { width: 18px; margin-left: 1px; opacity: 1; transform: scale(1); background: transparent; color: inherit; }
    .aivs-media-filter[aria-pressed="true"]:hover .aivs-media-filter-remove { background: color-mix(in srgb, var(--aivs-surface) 20%, transparent); color: inherit; }

    #akicontenidonormal[data-module="aivideostudio"] select.aivs-sort {
        flex: 0 0 194px; width: 194px; height: 46px; padding: 0 38px 0 14px !important;
        border: 1px solid var(--aivs-line) !important; border-radius: 11px; outline: 0;
        background-color: var(--aivs-surface) !important; color: var(--aivs-text) !important;
        font: inherit; font-size: 14px; cursor: pointer; box-shadow: none !important;
    }
    #akicontenidonormal[data-module="aivideostudio"] select.aivs-sort:focus-visible {
        border-color: var(--aivs-line-strong) !important;
        box-shadow: none !important;
    }

    .aivs-results-note { min-height: 18px; margin: 0 0 14px; color: var(--aivs-muted); font-size: 11px; }

    .aivs-avatar-shelf {
        margin: 4px 0 24px; padding: 18px 0; border-radius: 0; background: transparent;
        display: grid; grid-template-columns: 224px minmax(0, 1fr) 32px; gap: 12px; align-items: center;
    }
    .aivs-avatar-shelf[hidden] { display: none; }
    .aivs-avatar-copy h2 { margin: 0 0 5px !important; color: var(--aivs-text) !important; font-size: 15px !important; font-weight: 700; }
    .aivs-avatar-copy p { margin: 0 0 11px; color: var(--aivs-muted); font-size: 11px; line-height: 1.4; }
    .aivs-avatar-all { min-height: 34px; padding: 0 14px; border: 1px solid var(--aivs-line); border-radius: 999px; background: var(--aivs-surface); color: var(--aivs-text); font: inherit; font-size: 11px; font-weight: 620; cursor: pointer; }
    .aivs-avatar-list { min-width: 0; display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
    .aivs-avatar-list::-webkit-scrollbar { display: none; }
    .aivs-avatar-card {
        position: relative; flex: 0 0 100px; width: 100px; height: 124px; padding: 0; overflow: hidden;
        border: 1px solid transparent; border-radius: 50px 50px 22px 22px; background: var(--aivs-surface); color: #fff; cursor: pointer;
    }
    .aivs-avatar-card:hover { border-color: var(--aivs-line-strong); }
    .aivs-avatar-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
    .aivs-avatar-card:hover img { transform: scale(1.035); }
    .aivs-avatar-card span { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 650; text-align: left; }
    .aivs-avatar-card:not(.is-new)::after { content: ""; position: absolute; inset: 44% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.72)); pointer-events: none; }
    .aivs-avatar-card.is-new { border-color: var(--aivs-line); background: var(--aivs-surface); color: var(--aivs-muted); display: grid; place-items: center; align-content: center; gap: 5px; }
    .aivs-avatar-card.is-new i { font-size: 21px; }
    .aivs-avatar-card.is-new span { position: static; color: var(--aivs-muted); text-align: center; }
    .aivs-avatar-next {
        width: 32px; height: 32px; padding: 0; border: 1px solid var(--aivs-line); border-radius: 50%;
        background: var(--aivs-surface); color: var(--aivs-text); display: inline-flex; align-items: center; justify-content: center;
        box-shadow: 0 3px 12px rgba(20,20,20,.08); cursor: pointer;
    }
    .aivs-avatar-next:hover { background: var(--aivs-surface-3); }

    .aivs-avatar-dialog,
    .aivs-dialog,
    .aivs-tts-dialog {
        position: fixed !important;
        inset: 0 !important;
        margin: auto !important;
    }

    .aivs-avatar-dialog {
        width: min(1200px, calc(100vw - 24px)); max-width: none; height: min(920px, calc(100dvh - 16px)); max-height: none;
        padding: 0; border: 1px solid var(--aivs-line-strong); border-radius: 22px; overflow: hidden;
        background: var(--aivs-surface); color: var(--aivs-text); box-shadow: 0 28px 90px rgba(20,20,20,.27);
    }
    .aivs-avatar-dialog::backdrop { background: rgba(20,20,20,.18); backdrop-filter: blur(7px); }
    .aivs-avatar-dialog[open] { display: flex; flex-direction: column; }
    .aivs-avatar-dialog-head {
        flex: 0 0 58px; min-width: 0; padding: 0 17px 0 24px; border-bottom: 1px solid var(--aivs-line);
        display: flex; align-items: center; justify-content: space-between; gap: 16px;
    }
    .aivs-avatar-dialog-title { min-width: 0; display: flex; align-items: center; gap: 8px; }
    .aivs-avatar-dialog-title > i { font-size: 19px; }
    .aivs-avatar-dialog-title h2 { margin: 0 !important; color: var(--aivs-text) !important; font-size: 14px !important; font-weight: 700; }
    .aivs-avatar-dialog-beta { height: 22px; padding: 0 8px; border-radius: 999px; background: var(--aivs-surface-2); color: var(--aivs-muted); display: inline-flex; align-items: center; font-size: 9px; font-weight: 650; }
    .aivs-avatar-dialog-close { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--aivs-text); font-size: 18px; cursor: pointer; }
    .aivs-avatar-dialog-close:hover { background: var(--aivs-surface-2); }
    .aivs-avatar-dialog-close:focus-visible, .aivs-avatar-create:focus-visible, .aivs-avatar-favorite-filter:focus-visible,
    .aivs-avatar-search-clear:focus-visible, .aivs-avatar-tile-main:focus-visible, .aivs-avatar-tile-favorite:focus-visible {
        outline: 3px solid color-mix(in srgb, var(--aivs-focus) 26%, transparent); outline-offset: 2px;
    }
    .aivs-avatar-dialog-body { flex: 1 1 auto; min-height: 0; padding: 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
    .aivs-avatar-toolbar { position: sticky; z-index: 4; top: 0; margin: -1px 0 0; padding: 1px 0 12px; background: var(--aivs-surface); }
    .aivs-avatar-toolbar-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
    .aivs-avatar-search {
        min-width: 0; height: 39px; padding: 0 11px; border: 1px solid var(--aivs-line); border-radius: 10px;
        display: flex; align-items: center; gap: 8px; background: var(--aivs-surface); color: var(--aivs-muted);
    }
    .aivs-avatar-search:focus-within { border-color: var(--aivs-line-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--aivs-text) 9%, transparent); }
    #akicontenidonormal[data-module="aivideostudio"] input.aivs-avatar-search-input {
        min-width: 0; width: 100%; height: 100%; padding: 0 !important; border: 0 !important; outline: 0 !important;
        background: transparent !important; color: var(--aivs-text) !important; box-shadow: none !important; font: inherit; font-size: 13px;
    }
    #akicontenidonormal[data-module="aivideostudio"] .aivs-avatar-search-input::placeholder {
        color: var(--aivs-faint) !important;
        -webkit-text-fill-color: var(--aivs-faint) !important;
        opacity: 1 !important;
    }
    .aivs-avatar-search-clear { width: 27px; height: 27px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--aivs-muted); cursor: pointer; }
    .aivs-avatar-search-clear:hover { background: var(--aivs-surface-2); color: var(--aivs-text); }
    .aivs-avatar-search-clear[hidden] { display: none; }
    .aivs-avatar-create {
        min-height: 39px; padding: 0 15px; border: 1px solid var(--aivs-text); border-radius: 10px;
        background: var(--aivs-text); color: var(--aivs-surface); display: inline-flex; align-items: center; justify-content: center; gap: 7px;
        font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
    }
    .aivs-avatar-dialog-filters { min-width: 0; display: flex; align-items: center; gap: 6px; margin-top: 9px; overflow-x: auto; padding: 0 0 2px; scrollbar-width: none; }
    .aivs-avatar-dialog-filters::-webkit-scrollbar { display: none; }
    .aivs-avatar-favorite-filter {
        flex: 0 0 auto; min-height: 27px; padding: 0 9px; border: 1px solid var(--aivs-line); border-radius: 8px;
        background: var(--aivs-surface); color: var(--aivs-text); display: inline-flex; align-items: center; gap: 5px;
        font: inherit; font-size: 10px; cursor: pointer;
    }
    .aivs-avatar-favorite-filter[aria-pressed="true"] { border-color: var(--aivs-text); background: var(--aivs-text); color: var(--aivs-surface); }
    #akicontenidonormal[data-module="aivideostudio"] select.aivs-avatar-filter {
        flex: 0 0 auto; width: auto; min-height: 27px; padding: 0 27px 0 9px !important; border: 1px solid var(--aivs-line) !important;
        border-radius: 8px; outline: 0; background-color: var(--aivs-surface) !important; color: var(--aivs-text) !important;
        box-shadow: none !important; font: inherit; font-size: 11px; cursor: pointer;
    }
    .aivs-avatar-result-count { margin-left: auto; flex: 0 0 auto; color: var(--aivs-muted); font-size: 10px; }
    .aivs-avatar-result-count.is-error { color: var(--aivs-danger); font-weight: 650; }
    .aivs-avatar-groups { display: grid; gap: 24px; }
    .aivs-avatar-group-title { margin: 0 0 12px !important; color: var(--aivs-text) !important; font-size: 13px !important; font-weight: 650; }
    .aivs-avatar-samples-status { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0; color: var(--aivs-muted); font-size: 12px; }
    .aivs-avatar-tile.is-sample { aspect-ratio: 4 / 5; }
    .aivs-avatar-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
    .aivs-avatar-tile {
        position: relative; min-width: 0; aspect-ratio: 3 / 4; overflow: hidden; border: 0; border-radius: 24px;
        background: var(--aivs-surface-2); color: #fff; isolation: isolate;
    }
    .aivs-avatar-tile-main { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
    .aivs-avatar-tile img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .25s ease, filter .2s ease; }
    .aivs-avatar-tile:hover img, .aivs-avatar-tile:focus-within img { transform: scale(1.025); filter: saturate(1.03); }
    .aivs-avatar-tile.is-image-error { background: var(--aivs-surface-3); }
    .aivs-avatar-tile.is-image-error img { display: none; }
    .aivs-avatar-tile-shade { position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.76)); pointer-events: none; }
    .aivs-avatar-tile-copy { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 13px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
    .aivs-avatar-tile-copy strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
    .aivs-avatar-tile-copy span { flex: 0 0 auto; color: rgba(255,255,255,.78); font-size: 11px; }
    .aivs-avatar-tile-favorite {
        position: absolute; z-index: 2; top: 9px; right: 9px; width: 31px; height: 31px; padding: 0; border: 1px solid rgba(255,255,255,.34);
        border-radius: 50%; background: rgba(20,20,20,.34); color: #fff; display: inline-flex; align-items: center; justify-content: center;
        opacity: 0; transform: translateY(-2px); backdrop-filter: blur(8px); cursor: pointer; transition: opacity .16s, transform .16s, background .16s;
    }
    .aivs-avatar-tile:hover .aivs-avatar-tile-favorite, .aivs-avatar-tile:focus-within .aivs-avatar-tile-favorite, .aivs-avatar-tile-favorite[aria-pressed="true"] { opacity: 1; transform: none; }
    .aivs-avatar-tile-favorite:hover { background: rgba(20,20,20,.62); }
    .aivs-avatar-tile-favorite[aria-pressed="true"] { color: #fbbf24; border-color: rgba(251, 191, 36, .65); }
    .aivs-avatar-tile.is-selected { box-shadow: 0 0 0 3px var(--aivs-surface), 0 0 0 5px var(--aivs-text); }
    .aivs-avatar-tile:focus-within { z-index: 1; box-shadow: inset 0 0 0 3px var(--aivs-focus); }
    .aivs-avatar-selected-mark { position: absolute; z-index: 2; top: 10px; left: 10px; width: 25px; height: 25px; border-radius: 50%; background: var(--aivs-surface); color: var(--aivs-text); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
    .aivs-avatar-dialog-empty { grid-column: 1 / -1; min-height: 300px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--aivs-muted); text-align: center; }
    .aivs-avatar-dialog-empty i { font-size: 28px; }
    .aivs-avatar-dialog-empty strong { color: var(--aivs-text); font-size: 14px; }
    .aivs-avatar-dialog-empty p { margin: 0; font-size: 11px; }

    .aivs-gallery { --aivs-gallery-gap: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 8px; column-gap: var(--aivs-gallery-gap); align-items: start; }
    #akicontenidonormal #aivsGallery.is-avatars { display: block; }
    .aivs-gallery > .aivs-empty { grid-column: 1 / -1; grid-row: span 44; }
    .aivs-avatar-explore-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 4px 0 20px; }
    .aivs-avatar-explore-head h2 { margin: 0 0 6px !important; color: var(--aivs-text); font-size: 23px !important; letter-spacing: -.03em; }
    .aivs-avatar-explore-head p { margin: 0; color: var(--aivs-muted); font-size: 13px; line-height: 1.5; }
    .aivs-avatar-explore-head .aivs-avatar-create { flex: 0 0 auto; border-radius: 999px; }
    .aivs-card {
        position: relative; width: 100%; margin: 0; grid-row-end: span var(--aivs-card-rows, 35); overflow: hidden;
        border-radius: 26px; background: var(--aivs-surface-2); isolation: isolate;
        box-shadow: none;
    }
    .aivs-card.is-dragging { opacity: .56; }
    .aivs-card-open {
        display: block; width: 100%; height: auto; min-height: 170px; padding: 0; border: 0;
        appearance: none; background: var(--aivs-card-art, linear-gradient(135deg, #0f766e, #7dd3fc));
        color: var(--dt-on-color); cursor: pointer; text-align: left;
    }
    .aivs-card.tall .aivs-card-open { aspect-ratio: 4 / 5; }
    .aivs-card.wide .aivs-card-open { aspect-ratio: 16 / 10; }
    .aivs-card.cinematic .aivs-card-open { aspect-ratio: 16 / 9; }
    .aivs-card.vertical .aivs-card-open { aspect-ratio: 9 / 14; }
    .aivs-card.square .aivs-card-open { aspect-ratio: 1 / 1; }
    .aivs-card.portrait .aivs-card-open { aspect-ratio: 3 / 4; }
    .aivs-card.is-image .aivs-card-open { aspect-ratio: var(--aivs-card-aspect, 1 / 1); min-height: 0; }
    .aivs-card img {
        position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover;
        transform: scale(1.001); transition: transform .36s ease, filter .24s ease;
    }
    .aivs-card video {
        position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover;
        transform: scale(1.001); transition: transform .36s ease, filter .24s ease;
    }
    .aivs-card:hover img, .aivs-card:focus-within img { transform: scale(1.025); filter: saturate(1.04); }
    .aivs-card:hover video, .aivs-card:focus-within video { transform: scale(1.025); filter: saturate(1.04); }
    .aivs-card.is-image-error img { display: none; }
    .aivs-card.is-image-error video { display: none; }
    .aivs-card-shade {
        position: absolute; inset: 0; pointer-events: none; opacity: 1;
        background: linear-gradient(180deg, transparent 48%, rgba(0,0,0,.65) 100%);
        transition: opacity .18s ease;
    }
    .aivs-card:hover .aivs-card-shade, .aivs-card:focus-within .aivs-card-shade { opacity: 1; }
    .aivs-card-play {
        position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
        display: inline-flex; align-items: center; justify-content: center; border: 0;
        border-radius: 50%; background: rgba(17,17,17,.42); color: var(--dt-on-color); backdrop-filter: blur(8px);
        opacity: 0; transform: scale(.92); pointer-events: none; transition: opacity .18s, transform .18s;
    }
    .aivs-card:hover .aivs-card-play, .aivs-card:focus-within .aivs-card-play { opacity: 1; transform: scale(1); }
    .aivs-card-info {
        position: absolute; left: 19px; right: 64px; bottom: 18px; z-index: 2; color: var(--dt-on-color);
        opacity: 1; pointer-events: none;
    }
    .aivs-card:hover .aivs-card-info, .aivs-card:focus-within .aivs-card-info { opacity: 1; transform: none; }
    .aivs-card-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 650; letter-spacing: -.015em; }
    .aivs-card-info span { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: rgba(255,255,255,.82); }
    .aivs-card-actions {
        position: absolute; z-index: 3; top: 9px; right: 9px; display: flex; align-items: center; gap: 5px;
        opacity: 0; transform: translateY(-3px); transition: opacity .18s, transform .18s;
    }
    .aivs-card:hover .aivs-card-actions, .aivs-card:focus-within .aivs-card-actions { opacity: 1; transform: none; }
    .aivs-card-action {
        width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
        border: 0; border-radius: 50%; background: rgba(255,255,255,.88);
        color: var(--dt-text); cursor: pointer; backdrop-filter: blur(9px); box-shadow: none;
    }
    .aivs-card-action:hover { background: var(--dt-surface); }
    .aivs-card-action[data-card-action="favorite"] { color: var(--dt-text); }
    .aivs-card-action[data-card-action="favorite"] .aivs-fav-star {
        width: 17px; height: 17px; display: block; flex: 0 0 auto;
        fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round;
    }
    .aivs-card-action[data-card-action="favorite"].is-active,
    .aivs-card-action[data-card-action="favorite"][aria-pressed="true"] {
        color: #fbbf24 !important;
    }
    .aivs-card-action[data-card-action="favorite"].is-active .aivs-fav-star,
    .aivs-card-action[data-card-action="favorite"][aria-pressed="true"] .aivs-fav-star {
        fill: #fbbf24;
        stroke: #f59e0b;
    }
    .aivs-duration {
        position: absolute; z-index: 2; right: 15px; bottom: 19px; height: 23px; padding: 0 7px;
        display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
        background: rgba(15,15,15,.56); color: var(--dt-on-color); font-size: 9px; backdrop-filter: blur(7px);
    }

    .aivs-empty {
        min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center;
        padding: 32px; text-align: center; color: var(--aivs-muted);
    }
    .aivs-empty-icon {
        width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center;
        border-radius: 17px; background: var(--aivs-surface-2); color: var(--aivs-text); font-size: 25px;
    }
    .aivs-empty h3 { margin: 15px 0 5px; color: var(--aivs-text) !important; font-size: 16px !important; font-weight: 680; }
    .aivs-empty p { max-width: 360px; margin: 0; font-size: 13px; line-height: 1.5; }
    .aivs-empty button {
        margin-top: 16px; height: 38px; padding: 0 15px; border: 0; border-radius: 10px;
        background: var(--aivs-text); color: var(--aivs-surface); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer;
    }

    .aivs-history { display: flex; flex-direction: column; gap: 34px; }
    .aivs-day-title { margin: 3px 0 12px; color: var(--aivs-muted); font-size: 13px; font-weight: 600; }
    .aivs-generation {
        display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 16px; padding-bottom: 26px;
        border-bottom: 1px solid var(--aivs-line);
    }
    .aivs-output-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .aivs-output {
        position: relative; min-height: 210px; aspect-ratio: 16 / 10; overflow: hidden;
        border-radius: 10px; background: var(--aivs-surface-2); isolation: isolate;
    }
    .aivs-output img, .aivs-output canvas {
        position: absolute; inset: 0; width: 100%; height: 100%; display: block;
        object-fit: cover; background: #101011;
    }
    .aivs-output canvas { pointer-events: none; }
    .aivs-output-open {
        position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; padding: 0; border: 0;
        appearance: none; background: transparent; color: inherit; cursor: pointer;
    }
    .aivs-output-actions {
        position: absolute; z-index: 3; inset: 9px 9px auto; display: flex; justify-content: space-between; pointer-events: none;
        opacity: 0; transition: opacity .16s;
    }
    .aivs-output:hover .aivs-output-actions, .aivs-output:focus-within .aivs-output-actions { opacity: 1; }
    .aivs-output-actions button { pointer-events: auto; }
    .aivs-fav-btn {
        color: var(--dt-text);
        transition: color .12s ease, border-color .12s ease, background .12s ease;
    }
    /* SVG propio: la fuente Tabler del CRM no incluye el icono star-filled (el glifo desaparecía). */
    .aivs-fav-btn .aivs-fav-star {
        width: 18px; height: 18px; display: block; flex: 0 0 auto;
        fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round;
    }
    .aivs-fav-btn[aria-pressed="true"], .aivs-fav-btn.is-active {
        color: #fbbf24 !important;
        border-color: rgba(251, 191, 36, .55);
        background: rgba(255, 255, 255, .95);
    }
    .aivs-fav-btn[aria-pressed="true"] .aivs-fav-star,
    .aivs-fav-btn.is-active .aivs-fav-star {
        fill: #fbbf24;
        stroke: #f59e0b;
    }
    /* Como music: la estrella activa permanece visible aunque no haya hover. */
    .aivs-output.is-favorite .aivs-output-actions { opacity: 1; }
    .aivs-output.is-favorite:not(:hover):not(:focus-within) .aivs-output-actions > :not(.aivs-fav-btn) {
        visibility: hidden;
        pointer-events: none;
    }
    .aivs-output-bottom {
        position: absolute; z-index: 3; left: 50%; bottom: 10px; display: flex; gap: 5px; transform: translateX(-50%);
        opacity: 0; transition: opacity .16s;
    }
    .aivs-output:hover .aivs-output-bottom, .aivs-output:focus-within .aivs-output-bottom { opacity: 1; }
    .aivs-output > .aivs-card-play {
        z-index: 2; width: 42px; height: 42px; margin: -21px 0 0 -21px; opacity: .88; transform: none;
    }
    .aivs-output:hover > .aivs-card-play, .aivs-output:focus-within > .aivs-card-play { opacity: 1; transform: scale(1.04); }
    .aivs-light-btn {
        min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px;
        background: rgba(255,255,255,.9); color: var(--dt-text); font: inherit; font-size: 10px; font-weight: 650;
        display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; backdrop-filter: blur(8px);
    }
    .aivs-light-btn.icon { width: 36px; padding: 0; font-size: 16px; }
    .aivs-generation-meta { min-width: 0; padding: 3px 4px; }
    .aivs-generation-meta p { margin: 0 0 13px; color: var(--aivs-text); font-size: 14px; line-height: 1.45; }
    .aivs-meta-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .aivs-meta-chip {
        min-height: 24px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px;
        background: var(--aivs-surface-2); color: var(--aivs-muted); font-size: 10px; font-weight: 550;
    }
    .aivs-generating {
        position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
        background: var(--aivs-surface-2);
        color: var(--aivs-text);
    }
    .aivs-generating-spinner {
        width: 30px; height: 30px; border: 2px solid var(--aivs-line); border-top-color: var(--aivs-text); border-radius: 50%; animation: dui-legacy-modules-aivideostudio-aivs-spin .8s linear infinite;
    }
    .aivs-generating span { margin-top: 12px; font-size: 11px; }
    .aivs-progress { width: min(180px, 70%); height: 3px; margin-top: 9px; border-radius: 99px; background: var(--aivs-line); overflow: hidden; }
    .aivs-progress i { display: block; height: 100%; border-radius: inherit; background: var(--aivs-text); transition: width .25s; }
    .aivs-interrupted-icon {
        width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
        border-radius: 11px; background: var(--aivs-surface); color: var(--aivs-muted); font-size: 17px;
    }
    .aivs-generating .aivs-retry {
        min-height: 34px; margin-top: 12px; padding: 0 11px; border: 0; border-radius: 9px;
        background: var(--aivs-surface); color: var(--aivs-text); font: inherit; font-size: 10px; font-weight: 650; cursor: pointer;
    }

    .aivs-composer-dock {
        position: absolute; z-index: 35; left: 0; right: 0; bottom: 0; min-height: calc(var(--aivs-composer-h) + 34px);
        display: flex; align-items: flex-end; justify-content: center; padding: 32px 20px 20px; pointer-events: none;
        background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--aivs-bg) 84%, transparent) 24%, var(--aivs-bg) 100%);
    }
    .aivs-composer {
        position: relative; width: min(980px, 100%); min-height: var(--aivs-composer-h); pointer-events: auto;
        display: grid; grid-template-rows: 77px minmax(66px, auto) 54px;
        border: 0; border-radius: 30px; background: color-mix(in srgb, var(--aivs-surface) 95%, transparent);
        box-shadow: none; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
        transition: border-color .16s ease, box-shadow .16s ease;
    }
    .aivs-composer.is-dragover { border-color: var(--aivs-focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--aivs-focus) 15%, transparent), var(--aivs-shadow); }
    .aivs-composer.is-processing { opacity: .94; }
    .aivs-composer-top { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 12px 0; }
    .aivs-refs { min-width: 0; display: flex; align-items: stretch; gap: 7px; overflow-x: auto; scrollbar-width: none; }
    .aivs-composer.has-input-hint { grid-template-rows: minmax(100px, auto) minmax(66px, auto) 54px; }
    .aivs-composer.has-input-hint .aivs-composer-top { flex-wrap: wrap; row-gap: 5px; }
    .aivs-composer.has-input-hint .aivs-refs { flex: 1 1 0; }
    .aivs-ref-hint { flex: 0 0 100%; padding: 0 3px 4px; color: var(--aivs-muted); font-size: 11px; line-height: 1.4; }
    .aivs-ref-hint[hidden] { display: none !important; }
    .aivs-refs::-webkit-scrollbar, .aivs-settings-scroll::-webkit-scrollbar { display: none; }
    .aivs-ref-slot {
        position: relative; flex: 0 0 132px; width: 132px; height: 67px; overflow: hidden; border: 0;
        border-radius: 19px; background: var(--aivs-surface-2); color: var(--aivs-muted);
    }
    button.aivs-ref-slot {
        appearance: none; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
        font: inherit; font-size: 11px; cursor: pointer;
    }
    button.aivs-ref-slot:hover, .aivs-ref-slot.is-over { border-color: var(--aivs-line-strong); color: var(--aivs-text); background: var(--aivs-surface-3); }
    .aivs-ref-slot img, .aivs-ref-slot canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
    .aivs-ref-slot.is-lipsync-media { flex-basis: 154px; width: 154px; }
    .aivs-ref-slot.is-audio {
        flex-basis: 212px; width: 212px; padding: 0 34px 0 9px; display: flex; align-items: center; gap: 8px;
        background: var(--aivs-surface-2);
    }
    button.aivs-ref-slot.is-audio { padding: 0 11px; justify-content: center; }
    .aivs-audio-play {
        flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center; background: var(--aivs-text); color: var(--aivs-surface); cursor: pointer;
    }
    .aivs-audio-detail { min-width: 0; flex: 1 1 auto; display: grid; gap: 5px; }
    .aivs-audio-detail strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--aivs-text); font-size: 10px; font-weight: 650; }
    .aivs-audio-detail small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--aivs-muted); font-size: 9px; }
    .aivs-audio-wave { height: 13px; display: flex; align-items: center; gap: 2px; overflow: hidden; }
    .aivs-audio-wave i { flex: 1 1 2px; min-width: 2px; max-width: 3px; border-radius: 99px; background: var(--aivs-faint); }
    .aivs-ref-label {
        position: absolute; left: 7px; bottom: 6px; max-width: calc(100% - 14px); height: 20px; padding: 0 7px;
        display: inline-flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        border-radius: 7px; background: rgba(15,15,15,.6); color: var(--dt-on-color); font-size: 9px; backdrop-filter: blur(7px);
    }
    .aivs-ref-remove {
        position: absolute; top: 5px; right: 5px; width: 23px; height: 23px; padding: 0; border: 0; border-radius: 7px;
        display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.9); color: var(--dt-text); cursor: pointer;
    }
    .aivs-ref-slot.is-incompatible { border-color: #d97706; box-shadow: none; }
    .aivs-ref-slot.is-incompatible .aivs-ref-label { background: rgba(146,64,14,.88); }
    .aivs-mode {
        flex: 0 0 auto; display: flex; align-items: center; padding: 3px; border-radius: 999px; background: var(--aivs-surface-2);
    }
    .aivs-mode-btn {
        height: 38px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent;
        color: var(--aivs-muted); font: inherit; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    }
    .aivs-mode-btn.is-active {
        border-color: var(--aivs-line); background: var(--aivs-surface); color: var(--aivs-text); box-shadow: 0 1px 3px rgba(0,0,0,.07);
    }
    .aivs-mode-btn[data-mode="image"] span { display: inline; }

    #akicontenidonormal[data-module="aivideostudio"] textarea.aivs-prompt {
        width: 100%; min-height: 66px; max-height: 150px; resize: none; overflow-y: auto; padding: 14px 20px 8px !important;
        border: 0 !important; outline: 0 !important; border-radius: 0; background: transparent !important;
        color: var(--aivs-text) !important; box-shadow: none !important; font: inherit; font-size: 18px; line-height: 1.45;
    }
    /* color !important del textarea pisa ::placeholder si no lleva !important (Chrome/WebKit). */
    #akicontenidonormal[data-module="aivideostudio"] textarea.aivs-prompt::placeholder {
        color: var(--aivs-faint) !important;
        -webkit-text-fill-color: var(--aivs-faint) !important;
        opacity: 1 !important;
    }

    .aivs-composer-footer { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 5px 10px 10px 14px; }
    .aivs-settings-scroll { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 1px; overflow-x: auto; scrollbar-width: none; }
    .aivs-setting {
        flex: 0 0 auto; height: 34px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent;
        color: var(--aivs-muted); font: inherit; font-size: 11px; font-weight: 560; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap;
    }
    .aivs-setting[hidden] { display: none !important; }
    .aivs-setting:first-child { background: var(--aivs-surface-2); color: var(--aivs-text); }
    .aivs-setting:hover, .aivs-setting[aria-expanded="true"] { background: var(--aivs-surface-2); color: var(--aivs-text); }
    .aivs-setting i { font-size: 15px; }
    .aivs-composer-send { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; padding-left: 5px; }
    .aivs-cost {
        height: 36px; padding: 0 10px; border-radius: 999px;
        display: inline-flex; align-items: center; gap: 6px; background: var(--aivs-surface-2); color: var(--aivs-muted); font-size: 11px; font-variant-numeric: tabular-nums;
    }
    .aivs-cost i { font-size: 12px; }
    .aivs-generate {
        width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center; background: var(--aivs-black); color: var(--aivs-surface);
        font-size: 19px; cursor: pointer; box-shadow: none; transition: transform .15s, opacity .15s;
    }
    [data-bs-theme="dark"] .aivs-generate { color: var(--dt-text); }
    .aivs-generate:hover:not(:disabled) { transform: scale(1.035); }
    .aivs-generate:disabled { opacity: .34; cursor: default; box-shadow: none; }
    .aivs-generate.is-loading i { animation: dui-legacy-modules-aivideostudio-aivs-spin .8s linear infinite; }

    .aivs-popover {
        position: absolute; z-index: 8; left: 13px; bottom: 54px; width: 310px; max-height: min(740px, calc(100dvh - var(--dt-topbar-h, 44px) - 86px)); overflow: auto;
        border: 0; border-radius: 13px; background: var(--aivs-surface);
        color: var(--aivs-text); box-shadow: var(--dt-pop-shadow); overscroll-behavior: contain;
    }
    .aivs-popover[hidden] { display: none !important; }
    .aivs-popover.is-model { width: min(550px, calc(100% - 26px)); }
    .aivs-popover-head {
        position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
        min-height: 43px; padding: 0 12px; border-bottom: 1px solid var(--aivs-line); background: color-mix(in srgb, var(--aivs-surface) 96%, transparent); backdrop-filter: blur(12px);
    }
    .aivs-popover-head strong { font-size: 12px; font-weight: 680; }
    .aivs-popover-close { width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--aivs-muted); cursor: pointer; }
    .aivs-popover-close:hover { background: var(--aivs-surface-2); color: var(--aivs-text); }
    .aivs-popover-body { padding: 8px; }
    .aivs-popover-group { margin: 3px 5px 7px; color: var(--aivs-muted); font-size: 10px; font-weight: 650; }
    .aivs-model-option {
        width: 100%; min-height: 91px; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 11px;
        padding: 8px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer;
    }
    .aivs-model-option:hover, .aivs-model-option[aria-checked="true"] { background: var(--aivs-surface-2); }
    .aivs-model-option.is-coming-soon {
        cursor: default; opacity: .92; pointer-events: none;
        box-shadow: none;
        background: var(--aivs-surface-2);
    }
    .aivs-model-option.is-coming-soon .aivs-model-copy > span { white-space: normal; overflow: visible; text-overflow: unset; }
    .aivs-model-thumb { position: relative; height: 75px; overflow: hidden; border-radius: 8px; background: var(--aivs-surface-3); }
    .aivs-model-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
    .aivs-model-audio {
        position: absolute; top: 5px; left: 5px; width: 21px; height: 21px; display: inline-flex; align-items: center; justify-content: center;
        border-radius: 50%; background: rgba(255,255,255,.88); color: var(--dt-text); font-size: 11px;
    }
    .aivs-model-copy { min-width: 0; align-self: center; }
    .aivs-model-copy strong { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 680; }
    .aivs-model-copy > span { display: block; color: var(--aivs-muted); font-size: 11px; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; }
    .aivs-model-copy > .aivs-model-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
    .aivs-model-copy > .aivs-model-tariff { margin-top: 5px; }
    .aivs-model-thumb > .aivs-model-placeholder { height: 100%; display: grid; place-items: center; color: var(--aivs-muted); font-size: 30px; }
    .aivs-model-thumb.is-cinema { background: #182b36; }
    .aivs-model-thumb.is-cinema img { object-fit: contain; }
    .aivs-model-badge {
        min-height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; gap: 3px;
        background: var(--aivs-surface-3); color: var(--aivs-muted); font-size: 8px;
    }
    .aivs-model-badge.cost { background: var(--aivs-text); color: var(--aivs-surface); }
    .aivs-model-badge.tier-low { background: rgba(115, 115, 112, .16); color: var(--aivs-muted); }
    .aivs-model-badge.tier-mid { background: rgba(22, 130, 93, .14); color: var(--aivs-success); }
    .aivs-model-badge.tier-high { background: rgba(37, 99, 235, .14); color: #2563eb; }
    [data-bs-theme="dark"] .aivs-model-badge.tier-high { color: #93c5fd; }
    .aivs-popover-hint { margin: 0 0 10px; color: var(--aivs-muted); font-size: 11px; line-height: 1.35; }
    .aivs-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
    .aivs-option {
        min-height: 40px; padding: 0 11px; border: 0; border-radius: 9px; background: var(--aivs-surface-2);
        color: var(--aivs-muted); font: inherit; font-size: 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer;
    }
    .aivs-option:hover, .aivs-option[aria-checked="true"] { border-color: var(--aivs-line-strong); color: var(--aivs-text); background: var(--aivs-surface); }
    .aivs-option[aria-checked="true"]::after { content: "✓"; font-size: 11px; }

    .aivs-dialog {
        width: min(1160px, calc(100vw - 38px)); max-width: none; height: min(720px, calc(100dvh - 46px)); max-height: none;
        padding: 0; border: 0; border-radius: 16px; overflow: hidden;
        background: var(--aivs-surface); color: var(--aivs-text); box-shadow: var(--dt-pop-shadow);
    }
    .aivs-dialog::backdrop { background: rgba(10,10,10,.58); backdrop-filter: blur(4px); }
    .aivs-dialog[open] { display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
    .aivs-preview-media { position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; background: #101011; overflow: hidden; }
    .aivs-preview-media img, .aivs-preview-media video, .aivs-preview-media canvas { width: 100%; height: 100%; display: block; object-fit: contain; background: #101011; }
    .aivs-preview-media.is-video-preview > img, .aivs-preview-media > canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
    .aivs-preview-media video[hidden], .aivs-preview-media img[hidden], .aivs-preview-media canvas[hidden] { display: none !important; }
    .aivs-preview-media:fullscreen { width: 100%; height: 100%; background: #101011; }
    .aivs-preview-media:-webkit-full-screen { width: 100%; height: 100%; background: #101011; }
    .aivs-preview-play {
        position: absolute; z-index: 3; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%;
        display: grid; place-items: center; background: rgba(255,255,255,.94); color: var(--dt-text); box-shadow: none;
        backdrop-filter: blur(12px); cursor: pointer; transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
    }
    .aivs-preview-play:hover { transform: scale(1.055); background: var(--dt-surface); box-shadow: none; }
    .aivs-preview-play:active { transform: scale(.97); }
    .aivs-preview-play[hidden] { display: none !important; }
    .aivs-preview-glyph { position: relative; display: block; width: 20px; height: 20px; color: currentColor; }
    .aivs-preview-glyph::before {
        content: ""; position: absolute; top: 2px; left: 6px; width: 0; height: 0;
        border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid currentColor;
    }
    .aivs-preview-play:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; }
    /* Vista previa de video = dUI.Player (variante video, datalyse-player.css). Envuelve #aivsPreviewVideo en un .dpl--video que ocupa
       toda la zona de medios, sin fondo propio, y que no existe en las vistas de imagen. */
    .aivs-preview-media .dpl--video { position: relative; z-index: 2; width: 100%; height: 100%; min-width: 0; min-height: 0; border-radius: 0; background: transparent !important; }
    .aivs-preview-media:not(.is-video-preview) .dpl--video { display: none !important; }
    /* La miniatura ya capturada (canvas) o el poster quedan debajo (z 1) y se ven a traves del video hasta el primer fotograma (.has-frame). */
    .aivs-preview-media .dpl--video > video { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .16s ease; }
    .aivs-preview-media.has-frame .dpl--video > video { opacity: 1; }
    .aivs-preview-side { min-width: 0; display: flex; flex-direction: column; padding: 16px; overflow-y: auto; }
    .aivs-dialog-close {
        align-self: flex-end; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px;
        background: var(--aivs-surface-2); color: var(--aivs-text); font-size: 17px; cursor: pointer;
    }
    .aivs-preview-side h2 { margin: 28px 0 8px; color: var(--aivs-text) !important; font-size: 19px !important; font-weight: 700; }
    .aivs-preview-side p { margin: 0; color: var(--aivs-muted); font-size: 13px; line-height: 1.55; }
    .aivs-preview-settings { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
    .aivs-preview-actions { margin-top: auto; display: grid; gap: 7px; padding-top: 24px; }
    .aivs-dialog-status {
        padding: 9px 11px; border: 1px solid var(--aivs-line); border-radius: 9px;
        background: var(--aivs-surface-2); color: var(--aivs-muted); font-size: 11px; line-height: 1.4;
    }

    .aivs-tts-dialog {
        width: min(1200px, calc(100vw - 56px)); max-width: none; height: min(880px, calc(100dvh - 56px)); max-height: none;
        padding: 0; border: 0; border-radius: 20px; overflow: hidden;
        background: var(--aivs-surface); color: var(--aivs-text); box-shadow: var(--dt-pop-shadow);
    }
    .aivs-tts-dialog::backdrop { background: rgba(18,18,18,.24); backdrop-filter: blur(6px); }
    .aivs-tts-dialog[open] { display: flex; flex-direction: column; }
    .aivs-tts-head { flex: 0 0 58px; padding: 0 14px 0 20px; border-bottom: 1px solid var(--aivs-line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .aivs-tts-head h2 { margin: 0 !important; color: var(--aivs-text) !important; font-size: 15px !important; font-weight: 650; }
    .aivs-tts-close { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: var(--aivs-surface); color: var(--aivs-text); font-size: 18px; box-shadow: none; cursor: pointer; }
    .aivs-tts-body { flex: 1 1 auto; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(360px, .96fr); overflow: hidden; }
    .aivs-tts-main { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; border-right: 1px solid var(--aivs-line); }
    .aivs-tts-voice-box { padding: 20px; border-bottom: 1px solid var(--aivs-line); display: grid; gap: 8px; }
    .aivs-tts-field { display: grid; gap: 7px; color: var(--aivs-text); font-size: 12px; font-weight: 650; }
    .aivs-tts-voice-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px 40px; gap: 10px; }
    .aivs-voice-picker { position: relative; min-width: 0; }
    .aivs-voice-trigger {
        width: 100%; height: 48px; min-width: 0; padding: 0 12px; border: 0; border-radius: 12px;
        background: var(--aivs-surface); color: var(--aivs-text); display: grid; grid-template-columns: 30px minmax(0, 1fr) 16px;
        align-items: center; gap: 10px; text-align: left; font: inherit; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
    }
    .aivs-voice-trigger:hover, .aivs-voice-trigger[aria-expanded="true"] { border-color: var(--aivs-line-strong); background: var(--aivs-surface-2); }
    .aivs-voice-trigger[aria-expanded="true"] { box-shadow: none; }
    .aivs-voice-trigger-copy { min-width: 0; display: grid; gap: 2px; }
    .aivs-voice-trigger-copy strong, .aivs-voice-trigger-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .aivs-voice-trigger-copy strong { font-size: 12px; font-weight: 680; }
    .aivs-voice-trigger-copy small { color: var(--aivs-muted); font-size: 10px; }
    .aivs-voice-trigger > i { color: var(--aivs-muted); font-size: 14px; transition: transform .16s ease; }
    .aivs-voice-trigger[aria-expanded="true"] > i { transform: rotate(180deg); }
    .aivs-voice-orb {
        --aivs-voice-hue: 224; position: relative; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; overflow: hidden;
        background: radial-gradient(circle at 32% 28%, hsl(calc(var(--aivs-voice-hue) + 42) 92% 88%), transparent 24%),
        radial-gradient(circle at 68% 72%, hsl(calc(var(--aivs-voice-hue) - 34) 78% 48%), transparent 42%),
        conic-gradient(from 25deg, hsl(var(--aivs-voice-hue) 76% 56%), hsl(calc(var(--aivs-voice-hue) + 74) 84% 63%), hsl(calc(var(--aivs-voice-hue) - 36) 72% 42%), hsl(var(--aivs-voice-hue) 76% 56%));
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.36), 0 2px 8px color-mix(in srgb, hsl(var(--aivs-voice-hue) 70% 52%) 38%, transparent);
    }
    .aivs-voice-orb::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; filter: blur(.2px); }
    .aivs-voice-orb.is-playing { animation: dui-legacy-modules-aivideostudio-aivs-voice-pulse 1.05s ease-in-out infinite; }
    .aivs-voice-popover {
        position: absolute; z-index: 24; top: calc(100% + 8px); left: 0; width: min(480px, calc(100vw - 72px));
        padding: 10px; border: 0; border-radius: 15px; background: var(--aivs-surface);
        box-shadow: var(--dt-pop-shadow); color: var(--aivs-text);
    }
    .aivs-voice-popover[hidden] { display: none !important; }
    .aivs-voice-search { height: 40px; padding: 0 11px; border: 0; border-radius: 10px; display: flex; align-items: center; gap: 8px; color: var(--aivs-muted); background: var(--aivs-surface-2); }
    .aivs-voice-search:hover,
    .aivs-voice-search:focus,
    .aivs-voice-search:focus-visible,
    .aivs-voice-search:focus-within,
    .aivs-voice-search:active {
        border-color: var(--aivs-line);
        outline: 0;
        box-shadow: none;
        background: var(--aivs-surface-2);
    }
    #akicontenidonormal[data-module="aivideostudio"] input.aivs-voice-search-input,
    #akicontenidonormal[data-module="aivideostudio"] input.aivs-voice-search-input:hover,
    #akicontenidonormal[data-module="aivideostudio"] input.aivs-voice-search-input:focus,
    #akicontenidonormal[data-module="aivideostudio"] input.aivs-voice-search-input:focus-visible,
    #akicontenidonormal[data-module="aivideostudio"] input.aivs-voice-search-input:active {
        min-width: 0; width: 100%; height: 100%; padding: 0 !important; border: 0 !important; outline: 0 !important;
        outline-color: transparent !important; appearance: none; -webkit-appearance: none;
        background: transparent !important; box-shadow: none !important; color: var(--aivs-text) !important; font: inherit; font-size: 12px;
    }
    .aivs-voice-toolbar { display: grid; grid-template-columns: minmax(150px, 1fr) repeat(3, minmax(88px, auto)); gap: 6px; margin: 8px 0; }
    .aivs-voice-tabs { min-width: 0; height: 34px; padding: 3px; border-radius: 9px; background: var(--aivs-surface-2); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
    .aivs-voice-tab { min-width: 0; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--aivs-muted); font: inherit; font-size: 10px; white-space: nowrap; cursor: pointer; }
    .aivs-voice-tab[aria-pressed="true"] { background: var(--aivs-surface); color: var(--aivs-text); box-shadow: none; font-weight: 650; }
    #akicontenidonormal[data-module="aivideostudio"] select.aivs-voice-filter {
        min-width: 0; width: 100%; height: 34px; padding: 0 26px 0 9px !important; border: 1px solid var(--aivs-line) !important; border-radius: 9px !important;
        background-color: var(--aivs-surface) !important; color: var(--aivs-text) !important; box-shadow: none !important; font: inherit; font-size: 10px;
    }
    .aivs-voice-results { max-height: min(360px, 45dvh); padding: 2px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
    .aivs-voice-section-title { margin: 9px 7px 5px; color: var(--aivs-muted); font-size: 9px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
    .aivs-voice-option { min-width: 0; margin: 2px 0; padding: 4px; border-radius: 11px; display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 4px; }
    .aivs-voice-option:hover, .aivs-voice-option:has(.aivs-voice-option-main:focus-visible) { background: var(--aivs-surface-2); }
    .aivs-voice-option.is-selected { background: color-mix(in srgb, var(--aivs-focus) 8%, var(--aivs-surface-2)); }
    .aivs-voice-option-main { min-width: 0; min-height: 48px; padding: 5px 7px; border: 0; border-radius: 8px; background: transparent; color: var(--aivs-text); display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 9px; text-align: left; font: inherit; cursor: pointer; }
    .aivs-voice-option-copy { min-width: 0; display: grid; gap: 3px; }
    .aivs-voice-option-copy strong, .aivs-voice-option-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .aivs-voice-option-copy strong { font-size: 11px; font-weight: 680; }
    .aivs-voice-option-copy small { color: var(--aivs-muted); font-size: 9px; }
    .aivs-voice-option-main > i { opacity: 0; color: var(--aivs-focus); }
    .aivs-voice-option.is-selected .aivs-voice-option-main > i { opacity: 1; }
    .aivs-voice-option-preview { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--aivs-surface); color: var(--aivs-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
    .aivs-voice-option-preview:disabled { opacity: .35; cursor: default; }
    .aivs-voice-empty { margin: 8px 2px 2px; padding: 28px 16px; border-radius: 11px; background: var(--aivs-surface-2); color: var(--aivs-muted); text-align: center; font-size: 11px; line-height: 1.5; }
    .aivs-tts-voice-play, .aivs-tts-gear { width: 40px; height: 48px; padding: 0; border: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--aivs-surface); color: var(--aivs-text); cursor: pointer; }
    .aivs-tts-voice-play:hover, .aivs-tts-gear:hover { background: var(--aivs-surface-2); border-color: var(--aivs-line-strong); }
    .aivs-tts-voice-play[aria-pressed="true"] { border-color: var(--aivs-text); background: var(--aivs-text); color: var(--aivs-surface); }
    .aivs-tts-gear { width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--aivs-surface); color: var(--aivs-text); }
    .aivs-tts-voice-row > .aivs-tts-gear { height: 48px; border-radius: 12px; }
    .aivs-tts-voice-alert { min-height: 43px; padding: 6px 8px 6px 12px; border-radius: 10px; background: var(--aivs-surface-2); display: flex; align-items: center; gap: 8px; color: var(--aivs-text); font-size: 12px; }
    .aivs-tts-voice-alert[hidden] { display: none !important; }
    .aivs-tts-voice-alert span { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .aivs-tts-mini { min-height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--aivs-surface); color: var(--aivs-text); font: inherit; font-size: 11px; cursor: pointer; }
    .aivs-tts-mini.icon { width: 30px; padding: 0; border: 0; background: transparent; }
    .aivs-tts-editor { min-height: 0; padding: 20px; display: flex; }
    #akicontenidonormal[data-module="aivideostudio"] textarea.aivs-tts-script {
        width: 100%; height: 100%; min-height: 220px; resize: none; padding: 0 !important; border: 0 !important;
        border-radius: 0; outline: 0 !important; background: transparent !important; color: var(--aivs-text) !important;
        box-shadow: none !important; font: inherit; font-size: 15px; line-height: 1.58;
    }
    #akicontenidonormal[data-module="aivideostudio"] textarea.aivs-tts-script::placeholder {
        color: var(--aivs-faint) !important;
        -webkit-text-fill-color: var(--aivs-faint) !important;
        opacity: 1 !important;
    }
    .aivs-tts-main-footer { min-width: 0; min-height: 70px; padding: 12px 20px 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
    .aivs-tts-stats { min-width: 0; color: var(--aivs-muted); font-size: 10px; line-height: 1.65; }
    .aivs-tts-stats span { display: block; }
    .aivs-tts-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
    .aivs-tts-action { min-height: 38px; padding: 0 13px; border: 0; border-radius: 10px; background: var(--aivs-surface); color: var(--aivs-text); font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; }
    .aivs-tts-action.primary { border-color: var(--aivs-text); background: var(--aivs-text); color: var(--aivs-surface); }
    .aivs-tts-action:disabled { opacity: .42; cursor: default; }
    .aivs-tts-side { min-width: 0; min-height: 0; padding: 13px 20px 18px; display: flex; flex-direction: column; overflow: hidden; }
    .aivs-tts-tabs { flex: 0 0 40px; display: flex; align-items: flex-start; gap: 18px; border-bottom: 1px solid var(--aivs-line); }
    .aivs-tts-tab { position: relative; height: 40px; padding: 0; border: 0; background: transparent; color: var(--aivs-muted); font: inherit; font-size: 12px; cursor: pointer; }
    .aivs-tts-tab[aria-selected="true"] { color: var(--aivs-text); font-weight: 650; }
    .aivs-tts-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--aivs-text); }
    .aivs-tts-panel { flex: 1 1 auto; min-width: 0; min-height: 0; padding-top: 16px; overflow: auto; }
    .aivs-tts-panel[hidden] { display: none; }
    .aivs-tts-history-tools { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 16px; }
    .aivs-tts-history-search { height: 38px; padding: 0 10px; border: 0; border-radius: 10px; display: flex; align-items: center; gap: 7px; color: var(--aivs-muted); }
    .aivs-tts-history-search:focus-within { border-color: var(--aivs-line-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--aivs-text) 9%, transparent); }
    #akicontenidonormal[data-module="aivideostudio"] input.aivs-tts-history-input { width: 100%; height: 100%; padding: 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--aivs-text) !important; font: inherit; font-size: 12px; }
    .aivs-tts-history-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
    .aivs-tts-history-filters span { flex: 0 0 auto; min-height: 25px; padding: 0 8px; border: 0; border-radius: 8px; background: var(--aivs-surface); color: var(--aivs-text); display: inline-flex; align-items: center; font-size: 10px; }
    .aivs-tts-day { width: max-content; margin: 0 auto 10px; padding: 4px 9px; border-radius: 999px; background: var(--aivs-surface-2); color: var(--aivs-muted); font-size: 10px; }
    .aivs-tts-history-list { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .aivs-tts-history-item { min-width: 0; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--aivs-text); text-align: left; font: inherit; cursor: pointer; }
    .aivs-tts-history-item:hover { background: var(--aivs-surface-2); }
    .aivs-tts-history-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 560; }
    .aivs-tts-history-item small { display: block; margin-top: 5px; color: var(--aivs-muted); font-size: 10px; }
    .aivs-tts-history-item small i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: var(--aivs-muted); }
    .aivs-tts-controls { display: grid; gap: 18px; }
    .aivs-tts-setting { display: grid; gap: 8px; }
    .aivs-tts-setting-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--aivs-text); font-size: 11px; font-weight: 650; }
    .aivs-tts-setting-head span { display: inline-flex; align-items: center; gap: 7px; }
    .aivs-tts-setting-head output { min-width: 42px; padding: 4px 7px; border-radius: 7px; background: var(--aivs-surface-2); color: var(--aivs-text); font-size: 10px; font-variant-numeric: tabular-nums; text-align: center; }
    .aivs-tts-slider-row { min-height: 32px; display: flex; align-items: center; }
    .aivs-tts-slider-row input { width: 100%; accent-color: var(--aivs-text); cursor: pointer; }
    .aivs-tts-setting-scale { display: flex; justify-content: space-between; color: var(--aivs-muted); font-size: 9px; }
    .aivs-tts-language { padding: 12px; border: 0; border-radius: 11px; background: var(--aivs-surface-2); display: grid; gap: 11px; }
    .aivs-tts-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--aivs-text); font-size: 11px; font-weight: 650; cursor: pointer; }
    .aivs-tts-toggle-row input { width: 34px; height: 18px; accent-color: var(--aivs-text); }
    .aivs-tts-language-field { display: grid; gap: 6px; color: var(--aivs-muted); font-size: 10px; }
    .aivs-tts-language-field[hidden] { display: none !important; }
    #akicontenidonormal[data-module="aivideostudio"] select.aivs-tts-language-select {
        width: 100%; height: 38px; padding: 0 30px 0 10px !important; border: 1px solid var(--aivs-line) !important; border-radius: 9px !important;
        background-color: var(--aivs-surface) !important; color: var(--aivs-text) !important; box-shadow: none !important; font: inherit; font-size: 11px;
    }
    .aivs-tts-reset { width: max-content; min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--aivs-surface); color: var(--aivs-text); font: inherit; font-size: 10px; cursor: pointer; }
    .aivs-tts-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--aivs-surface-2); color: var(--aivs-muted); font-size: 10px; line-height: 1.45; }
    .aivs-tts-intro { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .aivs-preview-action {
        min-height: 42px; padding: 0 13px; border: 0; border-radius: 10px;
        background: var(--aivs-surface); color: var(--aivs-text); font: inherit; font-size: 12px; font-weight: 620;
        display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
    }
    .aivs-preview-action:hover { background: var(--aivs-surface-2); }
    .aivs-preview-action.primary { border-color: var(--aivs-text); background: var(--aivs-text); color: var(--aivs-surface); }

    .aivs-toast {
        position: absolute; z-index: 60; top: 14px; left: 50%; max-width: min(440px, calc(100% - 28px));
        padding: 10px 13px; border: 1px solid var(--aivs-line-strong); border-radius: 10px;
        background: var(--aivs-surface); color: var(--aivs-text); box-shadow: var(--aivs-pop-shadow);
        font-size: 11px; line-height: 1.4; opacity: 0; transform: translate(-50%, -8px); pointer-events: none; transition: opacity .18s, transform .18s;
    }
    .aivs-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
    .aivs-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

    #akicontenidonormal[data-module="aivideostudio"] :is(button, input, select, textarea, [tabindex]):focus-visible {
        outline: 2px solid var(--aivs-focus) !important; outline-offset: 2px;
    }

    #akicontenidonormal[data-module="aivideostudio"] textarea.aivs-prompt:is(:focus, :focus-visible) {
        outline: 0 !important; outline-offset: 0 !important; box-shadow: none !important;
    }

    #akicontenidonormal[data-module="aivideostudio"] .aivs-composer:not(.is-dragover):has(> textarea.aivs-prompt:is(:focus, :focus-visible)) {
        border-color: color-mix(in srgb, var(--aivs-focus) 38%, var(--aivs-line-strong));
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--aivs-focus) 8%, transparent), var(--aivs-shadow);
    }

    #akicontenidonormal[data-module="aivideostudio"] :is(input.aivs-search-input, input.aivs-avatar-search-input, input.aivs-tts-history-input):is(:focus, :focus-visible) {
        outline: 0 !important; box-shadow: none !important;
    }

    #akicontenidonormal[data-module="aivideostudio"] button.aivs-preview-play:focus-visible {
        outline: 2px solid #fff !important; outline-offset: 2px;
    }

    @keyframes dui-legacy-modules-aivideostudio-aivs-spin { to { transform: rotate(360deg); } }
    @keyframes dui-legacy-modules-aivideostudio-aivs-voice-pulse { 0%,100% { transform: scale(1); filter: saturate(1); } 50% { transform: scale(1.1); filter: saturate(1.3); } }
    @media (prefers-reduced-motion: reduce) { .aivs-voice-orb.is-playing { animation: none; } .aivs-preview-media .dpl--video > video { transition: none; } }

    @container (max-width: 1024px) {
        #akicontenidonormal[data-module="aivideostudio"] .aivs-shell { padding-inline: 20px; }
        #akicontenidonormal[data-module="aivideostudio"] .aivs-gallery { columns: 3 210px; }
        #akicontenidonormal[data-module="aivideostudio"] .aivs-avatar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        #akicontenidonormal[data-module="aivideostudio"] .aivs-generation { grid-template-columns: minmax(0, 1fr) 260px; }
        #akicontenidonormal[data-module="aivideostudio"] .aivs-composer { width: min(900px, 100%); }
    }

    @container (max-width: 960px) {
        .aivs-tts-dialog { width: min(760px, calc(100vw - 28px)); height: min(900px, calc(100dvh - 28px)); }
        .aivs-tts-body { display: block; overflow-y: auto; }
        .aivs-tts-main { min-height: 620px; border-right: 0; border-bottom: 1px solid var(--aivs-line); }
        .aivs-tts-side { min-height: 420px; overflow: visible; }
        .aivs-tts-panel { overflow: visible; }
        .aivs-voice-popover { width: min(520px, calc(100vw - 64px)); }
    }

    @container (max-width: 767px) {
        .aivs-app { --aivs-composer-h: 218px; }
        .aivs-scroll { scrollbar-gutter: auto; }
        .aivs-shell { padding: 20px 14px calc(var(--aivs-composer-h) + 74px); }
        .aivs-title { font-size: 28px !important; }
        .aivs-intro { font-size: 12px; margin-bottom: 18px; }
        .aivs-heading { margin-bottom: 13px; }
        .aivs-tabs { height: 42px; margin-bottom: 18px; }
        .aivs-controls { align-items: stretch; }
        #akicontenidonormal[data-module="aivideostudio"] select.aivs-sort { flex-basis: 108px; width: 108px; padding: 0 28px 0 10px !important; font-size: 11px; }
        .aivs-gallery { --aivs-gallery-gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .aivs-avatar-shelf { grid-template-columns: minmax(0, 1fr) 32px; padding: 11px; }
        .aivs-avatar-copy { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
        .aivs-avatar-copy p { display: none; }
        .aivs-avatar-copy h2 { margin: 0 !important; }
        .aivs-avatar-card { flex-basis: 88px; width: 88px; height: 108px; }
        .aivs-card { border-radius: 20px; }
        .aivs-card-open { min-height: 140px; }
        .aivs-card-actions { opacity: 1; }
        .aivs-card-action { width: 31px; height: 31px; }
        .aivs-card-info { display: block; left: 12px; right: 12px; bottom: 13px; }
        .aivs-card-info strong { font-size: 12px; }
        .aivs-card-info span { font-size: 9px; }
        .aivs-duration { top: 11px; right: auto; left: 11px; bottom: auto; }
        .aivs-avatar-explore-head { align-items: flex-start; }
        .aivs-avatar-explore-head h2 { font-size: 21px !important; }
        .aivs-avatar-explore-head p { font-size: 12px; }
        .aivs-card-play { width: 38px; height: 38px; margin: -19px 0 0 -19px; opacity: .92; transform: none; }
        .aivs-generation { grid-template-columns: minmax(0, 1fr); gap: 11px; }
        .aivs-output-grid { grid-template-columns: 1fr; }
        .aivs-output { min-height: 190px; }
        .aivs-generation-meta { padding: 0 1px; }
        .aivs-composer-dock { min-height: calc(var(--aivs-composer-h) + 17px); padding: 25px 8px 8px; }
        .aivs-composer { min-height: var(--aivs-composer-h); grid-template-rows: 72px minmax(70px, auto) 58px; border-radius: 26px; }
        .aivs-composer.has-input-hint { grid-template-rows: minmax(112px, auto) minmax(70px, auto) 58px; }
        .aivs-composer-top { padding: 8px 8px 0; }
        .aivs-ref-slot { flex-basis: 116px; width: 116px; height: 62px; }
        .aivs-ref-slot.is-lipsync-media { flex-basis: 126px; width: 126px; }
        .aivs-ref-slot.is-audio { flex-basis: 174px; width: 174px; }
        .aivs-mode-btn { height: 36px; padding: 0 9px; }
        .aivs-mode-btn span { display: none; }
        #akicontenidonormal[data-module="aivideostudio"] textarea.aivs-prompt { padding: 11px 14px 7px !important; font-size: 16px; }
        .aivs-composer-footer { padding: 5px 8px 9px 10px; }
        .aivs-voice-popover { width: calc(100vw - 28px); }
        .aivs-voice-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .aivs-voice-tabs { grid-column: 1 / -1; }
        .aivs-setting { padding: 0 7px; }
        .aivs-setting span.aivs-setting-label { display: none; }
        .aivs-cost span:last-child { display: none; }
        .aivs-popover { position: absolute; z-index: 90; left: 8px; right: 8px; bottom: 56px; width: auto; max-height: 70dvh; border-radius: 16px; }
        .aivs-popover.is-model { width: auto; }
        .aivs-model-option { grid-template-columns: 112px minmax(0, 1fr); }
        .aivs-model-thumb { height: 68px; }
        .aivs-dialog { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
        .aivs-dialog[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(260px, 55dvh) minmax(0, 1fr); }
        .aivs-preview-play { width: 56px; height: 56px; }
        .aivs-avatar-dialog { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
        .aivs-avatar-dialog-head { padding-inline: 14px 10px; }
        .aivs-avatar-dialog-body { padding: 12px; scrollbar-gutter: auto; }
        .aivs-avatar-toolbar { top: 0; }
        #akicontenidonormal[data-module="aivideostudio"] .aivs-avatar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
        .aivs-avatar-tile { border-radius: 21px; }
        .aivs-avatar-result-count { display: none; }
        .aivs-avatar-result-count.is-error { display: inline; }
        .aivs-tts-dialog { width: 100vw; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
        .aivs-tts-body { display: block; overflow-y: auto; }
        .aivs-tts-main { min-height: calc(100dvh - 58px); border-right: 0; border-bottom: 1px solid var(--aivs-line); }
        .aivs-tts-side { min-height: 68dvh; overflow: visible; }
        .aivs-tts-panel { overflow: visible; }
        .aivs-tts-voice-box, .aivs-tts-editor { padding-inline: 14px; }
        .aivs-tts-main-footer { padding-inline: 14px; flex-wrap: wrap; }
        .aivs-tts-stats { flex: 1 1 180px; }
        .aivs-tts-actions { flex: 1 1 auto; }
        .aivs-tts-action { min-width: 0; }
        .aivs-preview-side { padding: 13px 14px 18px; }
        .aivs-preview-side h2 { margin-top: 10px; }
        .aivs-preview-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @container (min-width: 560px) and (max-width: 820px) {
        #akicontenidonormal[data-module="aivideostudio"] .aivs-avatar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @container (max-width: 480px) {
        .aivs-tts-voice-row { gap: 7px; }
        .aivs-voice-trigger { padding-inline: 9px; gap: 8px; }
        .aivs-voice-trigger-copy small { display: none; }
        .aivs-tts-main-footer { align-items: stretch; flex-direction: column; }
        .aivs-tts-actions { width: 100%; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
        .aivs-tts-action { padding-inline: 8px; }
    }

    @container (max-width: 350px) {
        .aivs-gallery { columns: 1; }
        .aivs-beta { display: none; }
        .aivs-search { padding-inline: 10px; }
        .aivs-ref-slot { flex-basis: 102px; width: 102px; }
        .aivs-tts-main-footer { align-items: stretch; flex-direction: column; }
        .aivs-tts-actions { display: grid; grid-template-columns: 1fr 1.25fr; }
        .aivs-avatar-create span { display: none; }
        .aivs-avatar-create { width: 40px; padding: 0; }
        .aivs-avatar-dialog-beta { display: none; }
    }

    @media (hover: none) {
        .aivs-avatar-tile-favorite { opacity: 1; transform: none; }
    }

    @media (prefers-reduced-motion: reduce) {
        #akicontenidonormal[data-module="aivideostudio"] *,
        #akicontenidonormal[data-module="aivideostudio"] *::before,
        #akicontenidonormal[data-module="aivideostudio"] *::after {
            animation-duration: .01ms !important; animation-iteration-count: 1 !important;
            transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important;
        }
    }
    .aivs-video-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #101011; color: rgba(255,255,255,.42); }
    .aivs-video-ph .ti { font-size: 34px; }
    .aivs-video-ph.is-mini .ti { font-size: 20px; }
    .aivs-video-thumb { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
    .aivs-video-thumb canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
       Galería de vídeo e imagen: las pestañas y botones activos con línea fina en vez de sombra; sin sombra en "siguiente",
       Generar y los diálogos (línea fina fuerte); la insignia del modelo alto en gris. Las sombras y degradados SOBRE imágenes
       y vídeos (velos del texto, controles de la vista previa, carátulas) se quedan: son contenido. */
    :scope .aivs-tab[aria-selected="true"], :scope .aivs-voice-tab[aria-pressed="true"], :scope .aivs-mode-btn.is-active { box-shadow: inset 0 0 0 1px var(--dt-border-strong); }
    :scope .aivs-avatar-next, :scope .aivs-generate { box-shadow: none; }
    :scope .aivs-dialog, :scope .aivs-avatar-dialog, :scope .aivs-tts-dialog { box-shadow: none; border: 1px solid var(--dt-border-strong); }
    :scope .aivs-model-badge.tier-high { background: var(--dt-surface-2); color: var(--dt-text); }
    /* 06-11 (skill elevenlabs-v4-design): titulares ligeros con tracking negativo en los diálogos */
    :scope .aivs-avatar-copy h2, :scope .aivs-avatar-dialog-title h2, :scope .aivs-preview-side h2, :scope .aivs-tts-head h2 { font-weight: 500; letter-spacing: -.02em; }

}
/* end dui-template-style modules/aivideostudio:0 */
/* dui-template-style {"key":"modules/aivideostudiocreate:0","bytes":53025,"sha256":"ab861f9b245339933d44c79fc8e9c95d5798b7784748586286d4deb80f76e7fd","media":null,"source_sha256":"dc5c335d96372ca89d2ab3ae92fc300fa01748712cb3b609cd7f8f637368453e"} */
@scope (:root:has(template[data-dui-legacy-style="modules/aivideostudiocreate:0"])) {

    #akicontenidonormal[data-module="aivideostudiocreate"] {
        --aivc-bg: var(--dt-app);
        --aivc-panel: var(--dt-surface);
        --aivc-soft: var(--el-bg-raised-2, #f5f5f3);
        --aivc-soft-2: #ececea;
        --aivc-border: var(--dt-border);
        --aivc-border-strong: var(--dt-border-strong);
        --aivc-text: var(--dt-text);
        --aivc-muted: var(--dt-muted);
        --aivc-faint: var(--dt-faint);
        --aivc-blue: #2f7bff;
        --aivc-focus: var(--bs-primary, #2563eb);
        --aivc-shadow: 0 0 0 transparent; /* 26-10: sin sombras */
        height: calc(100vh - var(--dt-topbar-h, 44px));
        height: calc(100dvh - var(--dt-topbar-h, 44px));
        min-height: 0;
        padding: 0 !important;
        overflow: hidden;
        position: relative;
        container-type: inline-size;
        background: var(--aivc-bg);
    }

    [data-bs-theme="dark"] #akicontenidonormal[data-module="aivideostudiocreate"] {
        --aivc-bg: var(--dt-app);
        --aivc-panel: var(--dt-surface);
        --aivc-soft: #232325;
        --aivc-soft-2: #303033;
        --aivc-border: var(--dt-border);
        --aivc-border-strong: var(--dt-border-strong);
        --aivc-text: var(--dt-text);
        --aivc-muted: var(--dt-muted);
        --aivc-faint: var(--dt-faint);
        --aivc-blue: #5596ff;
        --aivc-focus: var(--dt-focus, #72a7ff);
        --aivc-shadow: 0 0 0 transparent;
    }

    #akicontenidonormal[data-module="aivideostudiocreate"] *,
    #akicontenidonormal[data-module="aivideostudiocreate"] *::before,
    #akicontenidonormal[data-module="aivideostudiocreate"] *::after { box-sizing: border-box; }

    .aivc-studio {
        --aivc-play-progress: 0deg;
        width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden;
        display: grid; grid-template-rows: 42px minmax(0, 1fr) 213px;
        background: var(--aivc-bg); color: var(--aivc-text); font-family: inherit;
    }
    .aivc-studio.timeline-collapsed { grid-template-rows: 42px minmax(0, 1fr) 59px; }
    .aivc-studio.timeline-single-track:not(.track-drop-open):not(.timeline-collapsed) { grid-template-rows: 42px minmax(0, 1fr) 155px; }
    .aivc-studio button, .aivc-studio input, .aivc-studio textarea, .aivc-studio select { font-family: inherit; }
    .aivc-studio button { color: inherit; }

    .aivc-topbar {
        min-width: 0; padding: 0 8px; border-bottom: 1px solid var(--aivc-border);
        display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(340px, 1fr); align-items: center; gap: 10px;
        background: var(--aivc-panel); z-index: 40;
    }
    .aivc-top-left, .aivc-top-right, .aivc-project-title { min-width: 0; display: flex; align-items: center; }
    .aivc-top-left { justify-content: flex-start; gap: 3px; }
    .aivc-top-right { justify-content: flex-end; gap: 7px; }
    .aivc-project-title { justify-content: center; }
    .aivc-project-title button {
        max-width: min(470px, 45vw); height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; cursor: pointer;
    }
    .aivc-project-title button:hover { background: var(--aivc-soft); }
    .aivc-divider { width: 1px; height: 19px; margin: 0 6px; background: var(--aivc-border); }
    .aivc-icon-btn {
        width: 31px; height: 31px; padding: 0; border: 0; border-radius: 8px; flex: 0 0 auto;
        display: inline-flex; align-items: center; justify-content: center; background: transparent;
        color: var(--aivc-text); font-size: 17px; cursor: pointer;
    }
    .aivc-icon-btn:hover { background: var(--aivc-soft); }
    .aivc-icon-btn:disabled { opacity: .34; cursor: default; }
    .aivc-credits { display: inline-flex; align-items: center; gap: 7px; color: var(--aivc-muted); font-size: 11px; white-space: nowrap; }
    .aivc-credit-ring { width: 16px; height: 16px; border: 0; border-top-color: var(--aivc-text); border-radius: 50%; }
    .aivc-top-text, .aivc-primary {
        min-height: 32px; padding: 0 12px; border-radius: 9999px; font-size: 11px; font-weight: 500; cursor: pointer;
    }
    .aivc-top-text { border: 0; background: transparent; }
    .aivc-top-text:hover { background: var(--aivc-soft); }
    .aivc-primary { border: 0; background: var(--aivc-text); color: var(--aivc-panel) !important; }
    .aivc-primary:hover { opacity: .88; }

    .aivc-workspace {
        min-width: 0; min-height: 0; position: relative; overflow: hidden;
        display: grid; grid-template-columns: 56px 374px minmax(420px, 1fr);
        background: var(--aivc-bg);
    }

    .aivc-rail {
        min-width: 0; min-height: 0; padding: 9px 3px; border-right: 1px solid var(--aivc-border);
        display: flex; flex-direction: column; align-items: stretch; gap: 2px; overflow-y: auto; scrollbar-width: none;
        background: var(--aivc-panel); z-index: 18;
    }
    .aivc-rail::-webkit-scrollbar { display: none; }
    .aivc-tool {
        min-height: 64px; padding: 5px 1px; border: 0; border-radius: 9px; background: transparent; color: var(--aivc-muted);
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
        font-size: 9px; line-height: 1; cursor: pointer;
    }
    .aivc-tool i { font-size: 18px; }
    .aivc-tool:hover { background: var(--aivc-soft); color: var(--aivc-text); }
    .aivc-tool.active { color: var(--aivc-text); font-weight: 650; }
    .aivc-tool.active i { transform: scale(1.04); }

    .aivc-inspector {
        min-width: 0; min-height: 0; border-right: 1px solid var(--aivc-border); overflow: hidden;
        background: var(--aivc-panel); position: relative; z-index: 17;
    }
    .aivc-inspector-panel { height: 100%; min-height: 0; display: flex; flex-direction: column; }
    .aivc-inspector-panel[hidden] { display: none !important; }
    .aivc-panel-head {
        flex: 0 0 44px; min-width: 0; padding: 0 11px 0 15px; border-bottom: 1px solid var(--aivc-border);
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
    }
    .aivc-panel-head h2 { margin: 0 !important; color: var(--aivc-text) !important; font-size: 12px !important; font-weight: 670; }
    .aivc-mobile-close { display: none; }
    .aivc-panel-scroll { flex: 1 1 auto; min-height: 0; padding: 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
    .aivc-section { margin-bottom: 18px; }
    .aivc-section-title { margin: 0 0 10px; font-size: 12px; font-weight: 670; }

    .aivc-control-row {
        min-width: 0; min-height: 38px; display: grid; grid-template-columns: 64px 34px minmax(60px, 1fr) 57px; align-items: center; gap: 7px;
    }
    .aivc-control-label { min-width: 0; color: var(--aivc-muted); font-size: 11px; line-height: 1.15; }
    .aivc-control-icon { width: 31px; height: 31px; border: 0; border-radius: 8px; display: grid; place-items: center; font-size: 16px; }
    .aivc-control-symbol { width: 31px; display: grid; place-items: center; color: var(--aivc-muted); font-size: 14px; }
    .aivc-value-box {
        height: 30px; min-width: 0; padding: 0 7px; border: 0; border-radius: 8px;
        display: flex; align-items: center; justify-content: flex-end; gap: 4px; background: var(--aivc-panel); color: var(--aivc-muted); font-size: 10px;
    }
    #akicontenidonormal[data-module="aivideostudiocreate"] input.aivc-number {
        min-width: 0; width: 30px; height: 100%; padding: 0 !important; border: 0 !important; outline: 0;
        background: transparent !important; color: var(--aivc-text) !important; box-shadow: none !important; text-align: right; font-size: 10px;
        appearance: textfield; -moz-appearance: textfield;
    }
    input.aivc-number::-webkit-inner-spin-button { display: none; }
    #akicontenidonormal[data-module="aivideostudiocreate"] input.aivc-range,
    #akicontenidonormal[data-module="aivideostudiocreate"] input.aivc-zoom {
        appearance: none; -webkit-appearance: none; width: 100%; height: 3px; padding: 0 !important; border: 0 !important; border-radius: 999px;
        outline: 0; background: var(--aivc-soft-2) !important; box-shadow: none !important; cursor: pointer;
    }
    #akicontenidonormal[data-module="aivideostudiocreate"] input.aivc-range::-webkit-slider-thumb,
    #akicontenidonormal[data-module="aivideostudiocreate"] input.aivc-zoom::-webkit-slider-thumb {
        appearance: none; -webkit-appearance: none; width: 11px; height: 11px; border: 0; border-radius: 50%; background: var(--aivc-text); cursor: grab;
    }
    #akicontenidonormal[data-module="aivideostudiocreate"] input.aivc-range::-moz-range-thumb,
    #akicontenidonormal[data-module="aivideostudiocreate"] input.aivc-zoom::-moz-range-thumb {
        width: 11px; height: 11px; border: 0; border-radius: 50%; background: var(--aivc-text); cursor: grab;
    }
    .aivc-range:disabled { opacity: .32; }

    .aivc-animation-row {
        min-height: 40px; display: grid; grid-template-columns: 54px 102px minmax(52px, 1fr) 57px; align-items: center; gap: 7px;
    }
    #akicontenidonormal[data-module="aivideostudiocreate"] select.aivc-select {
        width: 100%; height: 31px; padding: 0 26px 0 9px !important; border: 1px solid var(--aivc-border) !important; border-radius: 8px;
        outline: 0; background-color: var(--aivc-panel) !important; color: var(--aivc-text) !important; box-shadow: none !important; font-size: 10px;
    }
    .aivc-animation-row.is-disabled { opacity: .42; }

    .aivc-ai-list { border: 0; border-radius: 10px; overflow: hidden; }
    .aivc-ai-action {
        width: 100%; min-height: 51px; padding: 7px 11px; border: 0; border-bottom: 1px solid var(--aivc-border); background: transparent;
        display: grid; grid-template-columns: 29px minmax(0, 1fr); align-items: center; gap: 9px; text-align: left; cursor: pointer;
    }
    .aivc-ai-action:last-child { border-bottom: 0; }
    .aivc-ai-action:hover { background: var(--aivc-soft); }
    .aivc-ai-icon { width: 27px; height: 27px; border-radius: 7px; display: grid; place-items: center; color: var(--dt-on-color); font-size: 16px; }
    .aivc-ai-icon.green { background: #2eb76c; }
    .aivc-ai-icon.purple { background: #a63be0; }
    .aivc-ai-icon.blue { background: #3478e8; }
    .aivc-ai-icon.orange { background: #e96824; }
    .aivc-ai-copy { min-width: 0; }
    .aivc-ai-copy strong, .aivc-ai-copy span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .aivc-ai-copy strong { font-size: 11px; font-weight: 670; }
    .aivc-ai-copy span { margin-top: 2px; color: var(--aivc-muted); font-size: 8.5px; }

    .aivc-search, .aivc-field {
        width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 9px;
        display: flex; align-items: center; gap: 8px; background: var(--aivc-panel); color: var(--aivc-muted);
    }
    #akicontenidonormal[data-module="aivideostudiocreate"] .aivc-search input,
    #akicontenidonormal[data-module="aivideostudiocreate"] .aivc-field input {
        min-width: 0; width: 100%; height: 100%; padding: 0 !important; border: 0 !important; outline: 0;
        background: transparent !important; color: var(--aivc-text) !important; box-shadow: none !important; font-size: 10px;
    }
    .aivc-dropzone { min-height: 115px; margin-top: 10px; border: 1px dashed var(--aivc-border-strong); border-radius: 10px; display: grid; place-items: center; align-content: center; gap: 6px; color: var(--aivc-muted); text-align: center; cursor: pointer; }
    .aivc-dropzone i { color: var(--aivc-text); font-size: 24px; }
    .aivc-dropzone strong { color: var(--aivc-text); font-size: 10px; }
    .aivc-dropzone span { font-size: 8px; }
    .aivc-hidden-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
    .aivc-media-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
    .aivc-media-tile { min-width: 0; padding: 0; border: 1px solid var(--aivc-border); border-radius: 9px; overflow: hidden; background: var(--aivc-soft); cursor: pointer; }
    .aivc-media-tile img { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; }
    .aivc-media-tile span { display: block; padding: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; text-align: left; }
    .aivc-textarea {
        width: 100%; min-height: 100px; padding: 10px !important; resize: vertical; border: 0 !important; border-radius: 10px;
        outline: 0; background: var(--aivc-panel) !important; color: var(--aivc-text) !important; box-shadow: none !important; font-size: 10px; line-height: 1.45;
    }
    .aivc-panel-button { width: 100%; min-height: 38px; margin-top: 8px; border: 0; border-radius: 9999px; background: var(--aivc-text); color: var(--aivc-panel) !important; font-size: 10px; font-weight: 670; cursor: pointer; }
    .aivc-chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
    .aivc-chip { min-height: 25px; padding: 0 8px; border: 1px solid var(--aivc-border); border-radius: 999px; background: var(--aivc-panel); font-size: 8px; cursor: pointer; }
    .aivc-chip:hover, .aivc-chip.active { border-color: var(--aivc-text); background: var(--aivc-text); color: var(--aivc-panel); }
    .aivc-fade-color-row { flex: 1 1 auto; margin: 0; min-width: 0; }
    #aivcFadeColorRow .aivc-chip { flex: 1 1 0; justify-content: center; font-size: 10px; font-weight: 650; }

    .aivc-caption-tool { margin-bottom: 19px; }
    .aivc-caption-tool .aivc-ai-action { min-height: 52px; border-bottom: 0; }
    .aivc-style-none {
        width: 100%; height: 51px; padding: 0 16px; margin-bottom: 12px; border: 0; border-radius: 11px;
        display: flex; align-items: center; gap: 9px; background: var(--aivc-panel); font-size: 11px; text-align: left; cursor: pointer;
    }
    .aivc-style-none.active { box-shadow: inset 0 0 0 1px var(--aivc-text); }
    .aivc-caption-styles { display: grid; gap: 12px; }
    .aivc-caption-style { width: 100%; padding: 4px; border: 0; border-radius: 11px; background: var(--aivc-panel); text-align: left; cursor: pointer; overflow: hidden; }
    .aivc-caption-style:hover, .aivc-caption-style.active { border-color: var(--aivc-text); }
    .aivc-caption-preview { height: 108px; border-radius: 8px; position: relative; display: block; overflow: hidden; background: var(--dt-surface); }
    .aivc-caption-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
    .aivc-caption-sample { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dt-on-color); font-weight: 850; font-size: 17px; line-height: 1; text-transform: uppercase; text-shadow: 0 2px 3px rgba(0,0,0,.9); }
    .aivc-clip-frame-empty { flex: 1 0 28px; min-width: 28px; height: 100%; background: rgba(255,255,255,.06); }
    .aivc-clip.is-audio { background: color-mix(in srgb, var(--aivc-blue) 12%, var(--aivc-soft)); border-color: color-mix(in srgb, var(--aivc-blue) 45%, #9b9b9d); }
    .aivc-clip.is-audio .aivc-clip-film { display: none; }
    .aivc-clip.is-audio .aivc-clip-wave { inset: 0; height: auto; background: transparent; }
    .aivc-clip.is-audio .aivc-clip-label { position: absolute; z-index: 2; left: 10px; top: 8px; right: 10px; font-size: 10px; font-weight: 700; color: var(--aivc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
    .aivc-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 6px; }
    .aivc-filter-card { min-height: 54px; padding: 8px 6px; border: 0; border-radius: 9px; background: var(--aivc-soft); color: var(--aivc-text); font-size: 10px; font-weight: 650; cursor: pointer; }
    .aivc-filter-card.active, .aivc-filter-card[aria-pressed="true"] { border-color: var(--aivc-blue); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aivc-blue) 40%, transparent); }
    .aivc-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
    .aivc-chip[data-preset] { cursor: pointer; }
    .aivc-media-selection.filter-warm video, .aivc-media-selection.filter-warm img { filter: contrast(1.05) saturate(1.18) sepia(.18) brightness(1.03); }
    .aivc-media-selection.filter-cool video, .aivc-media-selection.filter-cool img { filter: contrast(1.06) saturate(.92) hue-rotate(188deg) brightness(1.02); }
    .aivc-media-selection.filter-bw video, .aivc-media-selection.filter-bw img { filter: grayscale(1) contrast(1.12); }
    .aivc-media-selection.filter-vivid video, .aivc-media-selection.filter-vivid img { filter: saturate(1.45) contrast(1.1) brightness(1.04); }
    .aivc-media-selection.filter-cinema video, .aivc-media-selection.filter-cinema img { filter: contrast(1.16) saturate(.88) brightness(.96) sepia(.08); }
    .aivc-media-selection.filter-fade video, .aivc-media-selection.filter-fade img { filter: contrast(.92) saturate(.78) brightness(1.08); }
    .aivc-media-selection.filter-noir video, .aivc-media-selection.filter-noir img { filter: grayscale(1) contrast(1.35) brightness(.9); }
    .aivc-caption-sample .accent { padding: 2px 4px; border-radius: 3px; background: #e42f65; }
    .aivc-caption-sample.slam { color: var(--dt-text); font-size: 14px; transform: rotate(-2deg); text-shadow: 2px 2px 0 #6e204c, 0 0 10px #fa73be; }
    .aivc-caption-style-foot { min-height: 39px; padding: 5px 7px; display: flex; align-items: center; gap: 6px; }
    .aivc-caption-style-foot strong { min-width: 0; margin-right: auto; font-size: 11px; font-weight: 520; }
    .aivc-caption-style-foot i { color: var(--aivc-muted); font-size: 16px; }

    .aivc-transcript-intro { margin: 0 0 12px; color: var(--aivc-muted); font-size: 10px; line-height: 1.45; }
    .aivc-transcript-card { padding: 13px; border: 0; border-radius: 12px; background: var(--aivc-panel); }
    .aivc-transcript-status { margin-bottom: 11px; display: flex; align-items: center; gap: 7px; color: var(--aivc-muted); font-size: 9px; }
    .aivc-transcript-dot { width: 7px; height: 7px; border-radius: 50%; background: #28a966; box-shadow: none; }
    .aivc-transcript-card.is-playing .aivc-transcript-dot { animation: dui-legacy-modules-aivideostudiocreate-aivcPulse 1.25s ease-in-out infinite; }
    .aivc-transcript-words { min-height: 105px; max-height: 188px; margin: 0 0 14px; overflow-y: auto; color: var(--aivc-muted); font-size: 13px; line-height: 1.75; scroll-behavior: smooth; }
    .aivc-transcript-word { margin: 0; padding: 1px 2px; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; line-height: inherit; cursor: pointer; transition: background .13s, color .13s; }
    .aivc-transcript-word:hover { background: var(--aivc-soft); color: var(--aivc-text); }
    .aivc-transcript-word.spoken { color: var(--aivc-text); }
    .aivc-transcript-word.current { background: var(--aivc-text); color: var(--aivc-panel); }
    .aivc-transcript-scrub { position: relative; margin-bottom: 6px; }
    .aivc-transcript-progress { position: absolute; z-index: 0; left: 0; top: 50%; width: var(--transcript-progress, 0%); height: 3px; border-radius: 999px; transform: translateY(-50%); background: var(--aivc-text); pointer-events: none; }
    #akicontenidonormal[data-module="aivideostudiocreate"] input.aivc-transcript-range { position: relative; z-index: 1; width: 100%; height: 16px; margin: 0; opacity: 0; cursor: pointer; }
    .aivc-transcript-track { position: absolute; left: 0; right: 0; top: 50%; height: 3px; border-radius: 999px; transform: translateY(-50%); background: var(--aivc-soft-2); pointer-events: none; }
    .aivc-transcript-times { margin-bottom: 11px; display: flex; justify-content: space-between; color: var(--aivc-muted); font-size: 8px; font-variant-numeric: tabular-nums; }
    .aivc-transcript-play { width: 100%; min-height: 42px; border: 0; border-radius: 9px; background: var(--aivc-text); color: var(--aivc-panel) !important; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 10px; font-weight: 650; cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease; }
    .aivc-transcript-play:hover { opacity: .9; box-shadow: none; }
    .aivc-transcript-play:active { transform: scale(.985); }
    .aivc-transcript-play.is-playing { box-shadow: none; }
    .aivc-transcript-actions { margin-top: 10px; display: flex; gap: 6px; }
    .aivc-transcript-actions button { flex: 1; min-height: 30px; border: 0; border-radius: 8px; background: var(--aivc-panel); font-size: 9px; cursor: pointer; }
    @keyframes dui-legacy-modules-aivideostudiocreate-aivcPulse { 50% { opacity: .35; transform: scale(.8); } }

    .aivc-canvas {
        min-width: 0; min-height: 0; position: relative; overflow: hidden; background: var(--aivc-bg);
        display: flex; flex-direction: column; align-items: stretch;
    }
    .aivc-canvas-mobilebar { display: none; position: absolute; z-index: 12; top: 9px; left: 9px; right: 9px; justify-content: space-between; pointer-events: none; }
    .aivc-canvas-mobilebar button { pointer-events: auto; border: 1px solid var(--aivc-border); background: color-mix(in srgb, var(--aivc-panel) 92%, transparent); box-shadow: 0 3px 13px rgba(0,0,0,.06); }
    .aivc-stage {
        min-width: 0; min-height: 0; position: relative; flex: 1 1 auto;
        display: flex; align-items: center; justify-content: center;
        padding: 18px 24px 8px; overflow: hidden; touch-action: none;
    }
    .aivc-media-selection {
        position: relative; width: min(92%, 760px); max-width: 100%;
        height: auto; max-height: min(52vh, 100%);
        aspect-ratio: 16 / 9; flex: 0 1 auto;
        transform: translate3d(calc(var(--move-x, 0px) + var(--anim-x, 0px)), var(--move-y, 0px), 0) rotate(var(--rotation, 0deg)) scale(var(--anim-scale, 1));
        transform-origin: center; outline: 2px solid var(--aivc-blue); cursor: move; user-select: none;
        background: #0b0b0c;
    }
    .aivc-media-selection:not(.selected) { outline-color: transparent; cursor: default; }
    .aivc-media-selection > img:not([hidden]),
    .aivc-media-selection > video:not([hidden]) {
        width: 100%; height: 100%; display: block !important; object-fit: contain;
        pointer-events: none; background: #0b0b0c; visibility: visible !important;
    }
    .aivc-media-selection > img[hidden],
    .aivc-media-selection > video[hidden] { display: none !important; }
    .aivc-handle { position: absolute; z-index: 4; width: 8px; height: 8px; border: 0; background: var(--aivc-panel); border-radius: 2px; }
    .aivc-media-selection:not(.selected) .aivc-handle, .aivc-media-selection:not(.selected) .aivc-rotate { display: none; }
    .aivc-media-selection.caption-editing .aivc-handle, .aivc-media-selection.caption-editing .aivc-rotate { display: none; }
    .aivc-handle.nw { left: -5px; top: -5px; cursor: nwse-resize; }
    .aivc-handle.n { left: 50%; top: -5px; transform: translateX(-50%); cursor: ns-resize; }
    .aivc-handle.ne { right: -5px; top: -5px; cursor: nesw-resize; }
    .aivc-handle.e { right: -5px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
    .aivc-handle.se { right: -5px; bottom: -5px; cursor: nwse-resize; }
    .aivc-handle.s { left: 50%; bottom: -5px; transform: translateX(-50%); cursor: ns-resize; }
    .aivc-handle.sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
    .aivc-handle.w { left: -5px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
    .aivc-rotate { position: absolute; z-index: 4; left: 50%; top: -36px; width: 23px; height: 23px; transform: translateX(-50%); border: 0; border-radius: 50%; background: var(--aivc-panel); color: var(--aivc-blue); display: grid; place-items: center; font-size: 13px; cursor: grab; }
    .aivc-rotate::after { content: ""; position: absolute; left: 50%; top: 21px; width: 1px; height: 13px; background: var(--aivc-blue); }
    .aivc-fade-overlay {
        position: absolute; inset: 0; z-index: 2; pointer-events: none;
        background: var(--dt-surface); opacity: 0; transition: none;
    }
    .aivc-caption-overlay { position: absolute; z-index: 3; left: 8%; right: 8%; bottom: 7%; padding: 5px 8px; border-radius: 5px; background: rgba(0,0,0,.72); color: var(--dt-on-color); font-size: 12px; text-align: center; pointer-events: none; }
    .aivc-caption-overlay[hidden] { display: none; }
    .aivc-caption-overlay.style-quick { left: 22%; right: 22%; bottom: 11%; padding: 0; background: transparent; font-size: 23px; font-weight: 850; text-transform: uppercase; text-shadow: 0 2px 4px rgba(0,0,0,.95); }
    .aivc-caption-overlay.style-hype { left: 15%; right: 15%; bottom: 10%; background: rgba(5,5,5,.8); font-size: 19px; font-weight: 850; text-transform: uppercase; }
    .aivc-caption-overlay.style-hype .accent { padding: 1px 5px; border-radius: 4px; background: #e42f65; color: var(--dt-on-color); }
    .aivc-caption-overlay.style-slam { left: 16%; right: 16%; bottom: 10%; background: transparent; color: var(--dt-text); font-size: 20px; font-weight: 900; text-transform: uppercase; text-shadow: 2px 2px 0 #7b2455, 0 0 13px #ff7bc5; transform: rotate(-2deg); }
    .aivc-canvas-switch { margin-top: 12px; display: flex; align-items: flex-start; justify-content: center; }
    .aivc-segment { height: 42px; padding: 3px; border: 0; border-radius: 10px; display: inline-flex; background: var(--aivc-panel); }
    .aivc-segment button { min-width: 105px; height: 34px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 10px; cursor: pointer; }
    .aivc-segment button.active { background: var(--aivc-soft); }

    .aivc-timeline { min-width: 0; min-height: 0; border-top: 1px solid var(--aivc-border); background: var(--aivc-panel); overflow: hidden; z-index: 35; }
    .aivc-transport { height: 58px; padding: 0 14px; border-bottom: 1px solid var(--aivc-border); display: grid; grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr); align-items: center; gap: 10px; background: var(--aivc-panel); }
    .aivc-transport-left, .aivc-transport-center, .aivc-transport-right { min-width: 0; display: flex; align-items: center; }
    .aivc-transport-left { justify-content: flex-start; }
    .aivc-transport-center { justify-content: center; gap: 3px; padding: 4px 8px; border: 0; border-radius: 17px; background: color-mix(in srgb, var(--aivc-soft) 62%, transparent); box-shadow: none; }
    .aivc-transport-right { justify-content: flex-end; gap: 4px; }
    .aivc-transport .aivc-icon-btn { width: 32px; height: 32px; border-radius: 9px; transition: background-color .14s, color .14s, transform .12s, opacity .14s; }
    .aivc-transport .aivc-icon-btn:hover:not(:disabled) { background: var(--aivc-panel); box-shadow: none; }
    .aivc-transport .aivc-icon-btn[aria-pressed="true"], .aivc-transport .aivc-icon-btn[aria-pressed="true"]:hover:not(:disabled) { background: var(--aivc-text); color: var(--aivc-panel); box-shadow: none; }
    .aivc-transport button:not(.aivc-play):active:not(:disabled) { transform: translateY(1px); }
    .aivc-speed { min-width: 48px; height: 32px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; font-size: 10px; font-weight: 650; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .14s, border-color .14s, transform .12s; }
    .aivc-speed:hover { border-color: var(--aivc-border); background: var(--aivc-panel); }
    .aivc-play { position: relative; isolation: isolate; width: 46px; height: 46px; margin: -2px 3px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(var(--aivc-text), var(--aivc-text)) padding-box, conic-gradient(from -90deg, var(--aivc-blue) var(--aivc-play-progress), var(--aivc-border-strong) 0) border-box; color: var(--aivc-panel) !important; box-shadow: none; font-size: 19px; cursor: pointer; transition: transform .14s ease, box-shadow .16s ease, filter .14s ease; }
    .aivc-play:hover { transform: scale(1.045); box-shadow: none; }
    .aivc-transport .aivc-play:active:not(:disabled) { transform: scale(.96); }
    .aivc-play-glyph { position: relative; z-index: 1; display: block; color: inherit; pointer-events: none; transition: transform .16s cubic-bezier(.2,.8,.2,1); }
    .aivc-play:not(.is-playing) .aivc-play-glyph { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid currentColor; transform: translateX(2px); }
    .aivc-play.is-playing .aivc-play-glyph { width: 5px; height: 16px; border: 0; border-radius: 1.5px; background: currentColor; box-shadow: none; transform: translateX(-4.5px); }
    .aivc-play.is-playing { filter: saturate(1.12); box-shadow: none; }
    #akicontenidonormal[data-module="aivideostudiocreate"] .aivc-play:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--aivc-panel), 0 0 0 4px var(--aivc-focus), 0 5px 14px rgba(20,20,20,.2); }
    .aivc-time { min-width: 80px; height: 32px; padding: 0 8px; border-left: 1px solid var(--aivc-border); display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .aivc-time strong { min-width: 27px; font-weight: 700; }
    .aivc-time span { color: var(--aivc-muted); }
    .aivc-zoom { width: 76px !important; height: 4px; accent-color: var(--aivc-text); cursor: pointer; }
    .aivc-timeline-body { height: 154px; min-height: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); overflow: hidden; }
    .timeline-single-track:not(.track-drop-open) .aivc-timeline-body,
    .timeline-single-track:not(.track-drop-open) .aivc-timeline-scroll { height: 96px; }
    .timeline-single-track:not(.track-drop-open) .aivc-timeline-content { height: 82px; }
    .timeline-collapsed .aivc-timeline-body { display: none; }
    .aivc-lane-labels { padding-top: 25px; border-right: 1px solid var(--aivc-border); background: var(--aivc-panel); }
    .aivc-lane-label { height: 56px; display: grid; place-items: center; border-bottom: 1px solid var(--aivc-border); }
    .aivc-lane-label button { font-size: 15px; }
    .aivc-lane-label.muted button { opacity: .35; }
    .aivc-timeline-scroll { min-width: 0; height: 154px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; overscroll-behavior-y: none; scrollbar-width: thin; scrollbar-color: var(--aivc-border-strong) transparent; }
    .aivc-timeline-scroll::-webkit-scrollbar { width: 0; height: 10px; }
    .aivc-timeline-scroll::-webkit-scrollbar-track { background: transparent; }
    .aivc-timeline-scroll::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: var(--aivc-border-strong); background-clip: padding-box; }
    .aivc-timeline-content { --timeline-width: 1700px; position: relative; width: var(--timeline-width); min-width: 100%; height: 138px; }
    .aivc-ruler { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 25px; border-bottom: 1px solid var(--aivc-border); color: var(--aivc-faint); font-size: 8px; cursor: crosshair; }
    .aivc-ruler-mark { position: absolute; bottom: 5px; transform: translateX(-50%); }
    .aivc-ruler-mark::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 1px; height: 3px; background: var(--aivc-border-strong); }
    .aivc-track { position: absolute; left: 0; right: 0; height: 56px; border-bottom: 1px solid var(--aivc-border); transition: background-color .12s, box-shadow .12s; }
    .aivc-track.track-1 { top: 25px; }
    .aivc-track.track-2 { top: 81px; }
    .timeline-single-track:not(.track-drop-open) .aivc-lane-label[data-lane-label="2"],
    .timeline-single-track:not(.track-drop-open) .aivc-track.track-2 { display: none; }
    .track-drop-active .aivc-track { background: color-mix(in srgb, var(--aivc-soft) 55%, transparent); }
    .track-drop-active .aivc-track.drop-target { background: color-mix(in srgb, var(--aivc-blue) 10%, var(--aivc-panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aivc-blue) 55%, transparent); }
    .track-drop-active .aivc-track.drop-target::after { content: attr(data-drop-label); position: absolute; z-index: 6; right: 12px; top: 50%; transform: translateY(-50%); padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--aivc-blue) 38%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--aivc-panel) 90%, transparent); color: var(--aivc-blue); box-shadow: 0 2px 7px rgba(20,20,20,.1); font-size: 8px; font-weight: 700; pointer-events: none; }
    .track-drop-active .aivc-lane-label.drop-target { background: color-mix(in srgb, var(--aivc-blue) 10%, var(--aivc-panel)); }
    .aivc-clip { position: absolute; top: 6px; height: 49px; min-width: 45px; border: 0; border-radius: 7px; overflow: hidden; background: var(--aivc-soft-2); cursor: grab; user-select: none; touch-action: none; }
    .aivc-clip.selected { z-index: 3; border: 2px solid var(--aivc-blue); box-shadow: 0 0 0 1px rgba(47,123,255,.14); }
    .track-drop-active .aivc-clip.selected { cursor: grabbing; opacity: .94; }
    .aivc-clip-film { position: absolute; inset: 0 0 14px; display: flex; overflow: hidden; background: var(--aivc-soft-2); pointer-events: none; }
    .aivc-clip-film img,
    .aivc-clip-film video { flex: 0 0 72px; width: 72px; height: 100%; object-fit: cover; border-right: 1px solid rgba(255,255,255,.52); background: #111; pointer-events: none; }
    .aivc-clip-film img.aivc-filmstrip { flex: 1 1 100%; width: 100%; border-right: 0; object-fit: cover; object-position: left center; }
    .aivc-clip-wave { position: absolute; inset: auto 0 0; height: 15px; background: var(--aivc-soft); pointer-events: none; }
    .aivc-clip-wave::before { content: ""; position: absolute; inset: 2px 0 0; background: var(--aivc-faint); clip-path: polygon(0 55%,2% 30%,4% 76%,6% 43%,8% 67%,10% 22%,12% 73%,14% 47%,16% 82%,18% 35%,20% 65%,22% 28%,24% 71%,26% 40%,28% 78%,30% 25%,32% 69%,34% 45%,36% 80%,38% 37%,40% 64%,42% 21%,44% 75%,46% 49%,48% 83%,50% 31%,52% 68%,54% 27%,56% 74%,58% 43%,60% 79%,62% 24%,64% 70%,66% 39%,68% 77%,70% 29%,72% 66%,74% 23%,76% 72%,78% 42%,80% 81%,82% 34%,84% 69%,86% 26%,88% 76%,90% 45%,92% 73%,94% 30%,96% 67%,98% 43%,100% 63%,100% 100%,0 100%); }
    .aivc-trim { position: absolute; z-index: 5; top: 3px; bottom: 3px; width: 5px; border-radius: 3px; background: var(--aivc-blue); cursor: ew-resize; touch-action: none; }
    .aivc-trim.left { left: 3px; }
    .aivc-trim.right { right: 3px; }
    .aivc-clip-tools { position: absolute; z-index: 5; top: 2px; left: 4px; display: none; gap: 3px; }
    .aivc-clip.selected .aivc-clip-tools { display: flex; }
    .aivc-clip-tools button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: rgba(24,24,24,.72); color: var(--dt-cta-fg) !important; font-size: 11px; cursor: pointer; }
    .aivc-playhead { position: absolute; z-index: 8; top: 15px; bottom: 0; width: 1px; background: var(--aivc-text); pointer-events: none; }
    .aivc-playhead::before { content: attr(data-time); position: absolute; top: -14px; left: 0; transform: translateX(-50%); min-width: 31px; height: 16px; padding: 0 4px; border-radius: 5px; display: grid; place-items: center; background: var(--aivc-text); color: var(--aivc-panel); font-size: 8px; }

    .aivc-backdrop { display: none; position: absolute; z-index: 55; inset: 0; padding: 0; border: 0; background: rgba(20,20,20,.24); backdrop-filter: blur(2px); }
    .aivc-backdrop:not([hidden]) { display: block; }
    .aivc-toast { position: absolute; z-index: 140; left: 50%; bottom: 238px; min-height: 38px; max-width: calc(100% - 24px); padding: 0 13px; border-radius: 10px; background: var(--aivc-text); color: var(--aivc-panel); display: flex; align-items: center; gap: 8px; box-shadow: var(--aivc-shadow); font-size: 10px; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .16s, transform .16s; }
    .aivc-toast.show { opacity: 1; transform: translate(-50%, 0); }
    .timeline-collapsed .aivc-toast { bottom: 74px; }
    .timeline-single-track:not(.track-drop-open):not(.timeline-collapsed) .aivc-toast { bottom: 182px; }

    .aivc-dialog { width: min(500px, calc(100vw - 28px)); max-width: none; padding: 0; border: 0; border-radius: 15px; overflow: hidden; background: var(--aivc-panel); color: var(--aivc-text); box-shadow: var(--dt-pop-shadow); }
    .aivc-dialog::backdrop { background: rgba(20,20,20,.25); backdrop-filter: blur(5px); }
    .aivc-dialog-head { min-height: 52px; padding: 0 12px 0 17px; border-bottom: 1px solid var(--aivc-border); display: flex; align-items: center; justify-content: space-between; }
    .aivc-dialog-head h2 { margin: 0 !important; color: var(--aivc-text) !important; font-size: 13px !important; }
    .aivc-dialog-body { padding: 17px; }
    .aivc-dialog-body p { margin: 0 0 13px; color: var(--aivc-muted); font-size: 10px; line-height: 1.5; }
    .aivc-link-row { min-height: 40px; padding-left: 10px; border: 0; border-radius: 9px; display: flex; align-items: center; overflow: hidden; }
    .aivc-link-row input { min-width: 0; flex: 1; border: 0 !important; background: transparent !important; color: var(--aivc-muted) !important; box-shadow: none !important; font-size: 9px; }
    .aivc-link-row button { align-self: stretch; padding: 0 12px; border: 0; border-left: 1px solid var(--aivc-border); background: var(--aivc-soft); font-size: 9px; cursor: pointer; }
    .aivc-export-option { min-height: 50px; padding: 8px 10px; margin-bottom: 7px; border: 0; border-radius: 9px; display: flex; align-items: center; gap: 9px; cursor: pointer; }
    .aivc-export-option:has(input:checked) { border-color: var(--aivc-text); box-shadow: inset 0 0 0 1px var(--aivc-text); }
    .aivc-export-option strong, .aivc-export-option span { display: block; }
    .aivc-export-option strong { font-size: 10px; }
    .aivc-export-option span { margin-top: 2px; color: var(--aivc-muted); font-size: 8px; }
    .aivc-dialog-foot { min-height: 56px; padding: 9px 14px; border-top: 1px solid var(--aivc-border); display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
    .aivc-secondary { min-height: 32px; padding: 0 11px; border: 0; border-radius: 9999px; background: var(--aivc-panel); font-size: 10px; cursor: pointer; }
    .aivc-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

    #akicontenidonormal[data-module="aivideostudiocreate"] :is(button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--aivc-focus); outline-offset: 2px; }

    @container (max-width: 1420px) {
        .aivc-workspace { grid-template-columns: 60px 330px minmax(400px, 1fr); }
        .aivc-control-row { grid-template-columns: 60px 32px minmax(50px,1fr) 54px; gap: 6px; }
        .aivc-stage { padding-inline: 28px; }
    }
    @container (max-width: 1190px) {
        .aivc-workspace { grid-template-columns: 60px 320px minmax(0, 1fr); }
        .aivc-project-title button { max-width: 34vw; }
    }
    @container (max-width: 860px) {
        .aivc-studio { grid-template-rows: 42px minmax(0, 1fr) 179px; }
        .aivc-studio.timeline-collapsed { grid-template-rows: 42px minmax(0, 1fr) 55px; }
        .aivc-studio.timeline-single-track:not(.track-drop-open):not(.timeline-collapsed) { grid-template-rows: 42px minmax(0, 1fr) 137px; }
        .aivc-workspace { grid-template-columns: 58px minmax(0, 1fr); }
        .aivc-inspector { display: none; position: absolute; z-index: 66; top: 0; bottom: 0; left: 58px; width: min(340px, calc(100% - 58px)); box-shadow: none; }
        .aivc-inspector.open { display: block; }
        .aivc-mobile-close { display: inline-flex; }
        .aivc-canvas { grid-column: 2; }
        .aivc-canvas-mobilebar { display: flex; justify-content: flex-start; }
        .aivc-canvas-mobilebar [data-action="open-inspector"] { display: inline-flex; }
        .aivc-stage { padding: 52px 18px 5px; }
        .aivc-topbar { grid-template-columns: auto minmax(0,1fr) auto; }
        .aivc-top-left [data-action="undo"], .aivc-top-left [data-action="redo"], .aivc-top-left .aivc-divider, .aivc-credits, .aivc-top-text { display: none; }
        .aivc-project-title button { max-width: 46vw; }
        .aivc-timeline-body { height: 124px; }
        .aivc-timeline-scroll { height: 124px; }
        .aivc-timeline-content { height: 110px; }
        .timeline-single-track:not(.track-drop-open) .aivc-timeline-body,
        .timeline-single-track:not(.track-drop-open) .aivc-timeline-scroll { height: 82px; }
        .timeline-single-track:not(.track-drop-open) .aivc-timeline-content { height: 68px; }
        .aivc-track { height: 42px; }
        .aivc-track.track-2 { top: 67px; }
        .aivc-clip { height: 38px; top: 3px; }
        .aivc-clip-film { bottom: 11px; }
        .aivc-clip-wave { height: 11px; }
        .aivc-lane-label { height: 42px; }
        .aivc-transport { height: 54px; padding-inline: 8px; grid-template-columns: minmax(34px, 1fr) auto minmax(104px, 1fr); gap: 6px; }
        .aivc-transport-center { padding-block: 3px; }
        .aivc-toast { bottom: 188px; }
        .timeline-single-track:not(.track-drop-open):not(.timeline-collapsed) .aivc-toast { bottom: 146px; }
    }
    @container (max-width: 600px) {
        .aivc-studio { grid-template-rows: 42px minmax(0, 1fr) 159px; }
        .aivc-studio.timeline-collapsed { grid-template-rows: 42px minmax(0, 1fr) 52px; }
        .aivc-studio.timeline-single-track:not(.track-drop-open):not(.timeline-collapsed) { grid-template-rows: 42px minmax(0, 1fr) 123px; }
        .aivc-workspace { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 54px minmax(0,1fr); }
        .aivc-rail { grid-row: 1; padding: 3px 5px; border-right: 0; border-bottom: 1px solid var(--aivc-border); flex-direction: row; overflow-x: auto; overflow-y: hidden; }
        .aivc-tool { flex: 0 0 55px; min-height: 46px; gap: 3px; }
        .aivc-tool i { font-size: 16px; }
        .aivc-tool span { font-size: 7px; }
        .aivc-inspector { top: 54px; left: 0; width: min(340px, 92vw); }
        .aivc-canvas { grid-row: 2; grid-column: 1; }
        .aivc-stage { padding: 48px 10px 4px; }
        .aivc-media-selection { width: 95%; }
        .aivc-canvas-switch { align-items: flex-start; }
        .aivc-segment { height: 32px; }
        .aivc-segment button { min-width: 82px; height: 24px; font-size: 9px; }
        .aivc-topbar { padding-inline: 5px; }
        .aivc-project-title button { max-width: 48vw; font-size: 10px; }
        .aivc-primary { min-height: 30px; padding-inline: 9px; font-size: 9px; }
        .aivc-transport { height: 51px; padding-inline: 6px; grid-template-columns: auto minmax(0,1fr) auto; gap: 3px; }
        .aivc-transport-left .aivc-icon-btn:not([data-action="collapse-timeline"]), .aivc-transport-center .aivc-speed, .aivc-transport-center [data-action="queue"], .aivc-transport-right input, .aivc-transport-right [data-action="fit-timeline"] { display: none; }
        .aivc-transport-center { padding: 2px 5px; }
        .aivc-play { width: 44px; height: 44px; margin-inline: 2px; }
        .aivc-time { min-width: 66px; height: 30px; padding-inline: 6px; font-size: 8px; }
        .aivc-timeline-body, .aivc-timeline-scroll { height: 107px; }
        .aivc-timeline-content { height: 93px; }
        .timeline-single-track:not(.track-drop-open) .aivc-timeline-body,
        .timeline-single-track:not(.track-drop-open) .aivc-timeline-scroll { height: 71px; }
        .timeline-single-track:not(.track-drop-open) .aivc-timeline-content { height: 57px; }
        .aivc-lane-labels { padding-top: 20px; }
        .aivc-ruler { height: 20px; }
        .aivc-track { height: 36px; }
        .aivc-track.track-1 { top: 20px; }
        .aivc-track.track-2 { top: 56px; }
        .aivc-clip { height: 33px; top: 2px; }
        .aivc-lane-label { height: 36px; }
        .aivc-playhead { top: 12px; }
        .aivc-toast { bottom: 166px; }
        .timeline-single-track:not(.track-drop-open):not(.timeline-collapsed) .aivc-toast { bottom: 130px; }
    }
    @media (hover: none), (pointer: coarse) {
        .aivc-transport-center > .aivc-icon-btn { width: 38px; height: 38px; }
        .aivc-transport-center .aivc-play { width: 44px; height: 44px; }
    }
    @media (prefers-reduced-motion: reduce) {
        #akicontenidonormal[data-module="aivideostudiocreate"] *,
        #akicontenidonormal[data-module="aivideostudiocreate"] *::before,
        #akicontenidonormal[data-module="aivideostudiocreate"] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
    }
/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Editor de vídeo: ya era monocromo; aquí salen las sombras (token --aivc-shadow a 0, transporte, play, botones pulsados, barra
   móvil), el azul #2f7bff de la selección del lienzo (contorno, tiradores, rotar), del clip elegido, de los recortes, del filtro
   activo, del destino al arrastrar y del anillo de progreso del play (todo pasa a tinta o gris), los cuadrados de color de las
   herramientas IA (verde, morado, azul, naranja → cuadrado neutro) y los chips que se rellenaban de tinta al pasar. "Play audio" de
   la transcripción pasa a ghost: el CTA en tinta es Export (y Download en su diálogo; "Generate and add" en los paneles SFX y Music).
   Se quedan como están: miniaturas, onda y tinte azul de los clips de audio (contenido), vistas previas de subtítulos y sus acentos,
   el negro del lienzo y los filtros de imagen. El linear-gradient del play es solo el relleno macizo de tinta bajo el anillo.
   Solo color, borde, sombra, radio y peso: ningún id, clase ni atributo que lea el JS cambia (.selected, .active, aria-pressed,
   .is-playing, .track-drop-active, .drop-target, data-drop-label, .open). */
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-primary,
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-panel-button { background: var(--dt-cta); border-color: var(--dt-cta); color: var(--dt-cta-fg) !important; font-weight: 500; }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-primary:hover,
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-panel-button:hover { opacity: 1; background: var(--dt-cta-hover); border-color: var(--dt-cta-hover); }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-tool.active { background: var(--aivc-soft); }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-icon-btn[data-action="delete-project"]:hover { color: var(--dt-danger); }

/* herramientas IA: cuadrado neutro en vez de verde, morado, azul y naranja */
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-ai-icon { background: var(--dt-surface-2); color: var(--dt-muted); border: 1px solid var(--dt-border); }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-ai-action:hover .aivc-ai-icon { color: var(--dt-text); }

/* chips: al pasar, gris; el elegido, borde en tinta sobre gris (antes relleno de tinta) */
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-chip:hover { border-color: var(--aivc-border-strong); background: var(--aivc-soft); color: var(--aivc-text); }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-chip.active { border-color: var(--aivc-text); background: var(--aivc-soft); color: var(--aivc-text); font-weight: 600; }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-filter-card:is(.active, [aria-pressed="true"]) { border-color: var(--aivc-text); box-shadow: none; }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-style-none { border-color: var(--aivc-border); }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-style-none.active { border-color: var(--aivc-text); box-shadow: none; }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-export-option:has(input:checked) { box-shadow: none; }

/* transcripción: punto verde sin halo; "Play audio" ghost de 34 px */
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-transcript-dot { background: var(--dt-success); box-shadow: none; }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-transcript-play { min-height: 34px; border: 1px solid var(--aivc-border-strong); background: var(--aivc-panel); color: var(--aivc-text) !important; font-weight: 600; }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-transcript-play:hover { opacity: 1; background: var(--aivc-soft); box-shadow: none; }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-transcript-play.is-playing { background: var(--dt-active); box-shadow: none; }

/* lienzo: selección, tiradores y rotar en tinta (antes azul); barra móvil sin sombra */
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-media-selection.selected:not(:focus-visible) { outline: 1px solid var(--aivc-text); }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-handle { border: 1px solid var(--aivc-text); background: var(--aivc-panel); }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-rotate { border: 1px solid var(--aivc-text); color: var(--aivc-text); background: var(--aivc-panel); }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-rotate::after { background: var(--aivc-text); }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-canvas-mobilebar button { background: var(--aivc-panel); box-shadow: none; }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-segment button.active { font-weight: 600; }

/* transporte: cápsula con línea fina sin sombra; pulsados en gris activo (antes relleno de tinta con sombra); play sin sombra ni
   escalado, anillo de progreso en gris sobre la pista de línea fina */
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-transport-center { background: transparent; box-shadow: none; }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-transport .aivc-icon-btn:hover:not(:disabled) { background: var(--aivc-soft); box-shadow: none; }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-transport .aivc-icon-btn[aria-pressed="true"],
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-transport .aivc-icon-btn[aria-pressed="true"]:hover:not(:disabled) { background: var(--dt-active); color: var(--aivc-text); box-shadow: inset 0 0 0 1px var(--aivc-border-strong); }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-play { background: linear-gradient(var(--aivc-text), var(--aivc-text)) padding-box, conic-gradient(from -90deg, var(--dt-faint) var(--aivc-play-progress), var(--aivc-border-strong) 0) border-box; box-shadow: none; }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-play:hover { transform: none; box-shadow: none; }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-play.is-playing { filter: none; box-shadow: none; }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-play:focus-visible,
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-play.is-playing:focus-visible { box-shadow: 0 0 0 2px var(--aivc-panel), 0 0 0 4px var(--aivc-focus); }

/* línea de tiempo: clip elegido y recortes en tinta; borde de clip con el gris del tema; destino al arrastrar en gris activo con
   etiqueta de línea fina (antes azul con sombra). El tinte azul de los clips de audio se queda (distingue el tipo de clip) */
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-clip:not(.is-audio) { border-color: var(--aivc-border-strong); }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-clip.selected { border: 2px solid var(--aivc-text); box-shadow: none; }
#akicontenidonormal[data-module="aivideostudiocreate"] .aivc-trim { background: var(--aivc-text); }
#akicontenidonormal[data-module="aivideostudiocreate"] .track-drop-active .aivc-track.drop-target { background: var(--dt-active); box-shadow: inset 0 0 0 1px var(--aivc-border-strong); }
#akicontenidonormal[data-module="aivideostudiocreate"] .track-drop-active .aivc-track.drop-target::after { border-color: var(--aivc-border-strong); background: var(--aivc-panel); color: var(--aivc-text); box-shadow: none; }
#akicontenidonormal[data-module="aivideostudiocreate"] .track-drop-active .aivc-lane-label.drop-target { background: var(--dt-active); }

/* capas: diálogo, toast y panel lateral móvil sin sombra (además del token --aivc-shadow a 0) */
#akicontenidonormal[data-module="aivideostudiocreate"] :is(.aivc-dialog, .aivc-toast, .aivc-inspector) { box-shadow: none; }

}
/* end dui-template-style modules/aivideostudiocreate:0 */
/* dui-template-style {"key":"modules/appclientsconfig:0","bytes":5796,"sha256":"c3fd3aaeda2438bfbe7e5cf9b84ec35f98a4d099f89438ae049fb4ed3407de03","media":null,"source_sha256":"3a907e11787d1a3888cc4cf6bbe22e1445e8aec711591d73ca3fc2aa1625c919"} */
@scope (:root:has(template[data-dui-legacy-style="modules/appclientsconfig:0"])) {


  /* 2026: tarjetas de la lista "Sections in the panel" */
  .appcli-sections{display:flex;flex-direction:column;gap:10px;padding:4px 2px;max-width:900px;}
  .appcli-section{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:0;border-radius:10px;padding:12px 16px;background:var(--el-bg-raised,var(--white-color,#fff));transition:border-color .15s ease,box-shadow .15s ease;}
  .appcli-section:hover{border-color:var(--el-border-strong,var(--border-strong-color,#d4d4d4));box-shadow:none;}
  .appcli-section--new{outline:2px solid var(--el-accent,#2563eb);}
  .appcli-section__icon{flex:0 0 auto;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:rgba(0,0,0,.03);}
  .appcli-section__icon i{font-size:22px;color:var(--el-text,var(--text-color,#111827));}
  :scope[data-bs-theme="dark"] .appcli-section__icon{background:rgba(255,255,255,.05);}
  .appcli-section__info{flex:1 1 auto;min-width:0;}
  .appcli-section__name{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .appcli-section__badge{font-size:10px;text-transform:uppercase;letter-spacing:.05em;vertical-align:middle;}
  .appcli-section__meta{display:flex;gap:14px;font-size:12px;color:var(--dt-muted);margin-top:2px;}
  :scope[data-bs-theme="dark"] .appcli-section__meta{color:var(--dt-muted);}
  .appcli-section__meta i{font-size:12px;margin-right:2px;}
  .appcli-section__actions{flex:0 0 auto;display:flex;gap:8px;}

  /* 2026: icon picker (copiado de control-entities.html) */
  .ent-iconpicker { position: relative; display: inline-block; }
  .ent-iconpicker__btn {
      display: flex; align-items: center; gap: 6px; border: 0;
      background: var(--input-color); color: var(--text-color); border-radius: 6px; padding: 6px 10px; cursor: pointer;
  }
  .ent-iconpicker__btn i { font-size: 20px; }
  .ent-iconpicker__panel {
      position: absolute; z-index: 60; top: 100%; left: 0; margin-top: 4px; width: 320px; max-width: 80vw;
      background: var(--white-color, #fff); border: 0; border-radius: 8px;
      padding: 8px; box-shadow:none;
  }
  .ent-iconpicker__panel input {
      width: 100%; border: 0; background: var(--input-color); color: var(--text-color);
      height: 30px; border-radius: 6px; padding: 0 8px; font-size: 12px; margin-bottom: 8px;
  }
  .ent-iconpicker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 4px; max-height: 220px; overflow-y: auto; }
  .ent-iconpicker__grid i { font-size: 20px; padding: 6px; border-radius: 6px; cursor: pointer; text-align: center; }
  .ent-iconpicker__grid i:hover { background: rgba(37, 99, 235, .1); }
  .ent-iconpicker__grid i.is-active { outline: 2px solid var(--brand-color, #2563eb); }

  .textareaemail-container{
    height: 400px !important;
    min-height:400px !important;
    position: relative !important;
  }


.akihayfieldextranodee{
vertical-align: middle;
min-height:50px;
}
.akihaybuttonextranodee{
vertical-align: middle;
min-height:50px;
}
.table-list-accions{
min-width:300px;
max-width:300px;
}
.table-list-numnode{
min-width:70px;
max-width:70px;
}
.table-list-namestatus{
min-width:120px;
max-width:120px;
padding-left:10px;
}
.table-list-callbacktime{
min-width:110px;
max-width:110px;
}
.namefirstpadd{
padding-left:10px;

}
.table-list__header{
justify-content: normal;
}

.is-hidden,.novisible{
display:none;
}
/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Panel de clientes: tarjetas de sección sin sombra al pasar (línea fuerte), la recién creada marcada con línea de tinta (no azul),
   icono en cuadrado neutro y gris, meta en gris del sistema y botones Edit/Delete a 30 px; el selector de iconos sin sombra y con
   hover y activo en grises en vez de azul. Los #999 que escribe el JS se ganan con [style*=]. */
#akicontenidonormal .appcli-section { background: var(--dt-surface); border-color: var(--dt-border); }
#akicontenidonormal .appcli-section:hover { border-color: var(--dt-border-strong); box-shadow: none; }
#akicontenidonormal .appcli-section--new { outline: 1px solid var(--dt-text); outline-offset: -1px; }
#akicontenidonormal .appcli-section__icon { width: 36px; height: 36px; border-radius: 10px; background: var(--dt-surface-2); border-color: var(--dt-border); }
#akicontenidonormal .appcli-section__icon i { font-size: 18px; color: var(--dt-muted); }
#akicontenidonormal .appcli-section__meta { color: var(--dt-muted); }
#akicontenidonormal .appcli-section__actions .btn-sm { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; font-size: 13px; font-weight: 500; border-radius: var(--dt-radius); }
#akicontenidonormal .ent-iconpicker__btn { background: transparent; color: var(--dt-text); border-color: var(--dt-border-strong); border-radius: var(--dt-radius); }
#akicontenidonormal .ent-iconpicker__btn:hover { background: var(--dt-hover); }
#akicontenidonormal .ent-iconpicker__btn [style*='color:#999'] { color: var(--dt-faint) !important; }
#akicontenidonormal .ent-iconpicker__panel { background: var(--dt-overlay); border-color: var(--dt-border-strong); border-radius: var(--dt-radius-lg); box-shadow: none; }
#akicontenidonormal .ent-iconpicker__grid i { color: var(--dt-muted); }
#akicontenidonormal .ent-iconpicker__grid i:hover { background: var(--dt-hover); color: var(--dt-text); }
#akicontenidonormal .ent-iconpicker__grid i.is-active { outline: 1px solid var(--dt-text); outline-offset: -1px; background: var(--dt-active); color: var(--dt-text); }
#akicontenidonormal .ent-iconpicker__grid [style*='color:#999'] { color: var(--dt-faint) !important; }

}
/* end dui-template-style modules/appclientsconfig:0 */
/* dui-template-style {"key":"modules/billing-usage:0","bytes":9577,"sha256":"3584ba201c8643f935d414356e1fd8041df569d7b5559128ef423aeaccc6548d","media":null,"source_sha256":"f63fe22250ce560d3ecd598a658f2a6bb9ce9e7b3b494dcafd7b66691ad8a619"} */
@scope (:root:has(template[data-dui-legacy-style="modules/billing-usage:0"])) {

/* Subscription workspace: neutral surfaces follow the shared light/dark theme. */
:scope, [data-bs-theme="light"], [data-bs-theme="dark"] {
    --bu-accent: var(--dt-text, #111110);
    --bu-accent-light: var(--dt-surface-2, #f1f1ef);
    --bu-border: var(--dt-border, rgba(15,15,15,.10));
    --bu-card-bg: var(--dt-surface, #fff);
    --bu-bar-bg: var(--dt-surface-2, #eeeeec);
    --bu-text: var(--dt-text, #111110);
    --bu-text-muted: var(--dt-muted, #5f5f5c);
    --bu-overage: #b86513;
    --bu-overage-bg: var(--dt-chip-warning);
    --bu-badge-bg: var(--dt-surface-2, #eeeeec);
    --bu-badge-text: var(--dt-muted, #5f5f5c);
    --bu-primary-bg: var(--dt-chip-channel);
    --bu-primary-text: var(--dt-text);
    --bu-action-text: var(--dt-surface, #fff);
}
[data-bs-theme="dark"] {
    --bu-overage: #f0b45c;
    --bu-overage-bg: var(--dt-chip-warning);
    --bu-primary-bg: var(--dt-chip-channel);
    --bu-primary-text: var(--dt-text);
}
.bu-workspace {
    width:100%; max-width:1320px; margin-inline:auto; padding:24px 28px 40px;
    color:var(--bu-text); font-family:var(--el-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}
.bu-workspace .bu-header { gap:20px; padding:0 0 22px; margin-top:0!important; margin-bottom:22px!important; border-bottom:1px solid var(--bu-border); }
.bu-header h4 { color:var(--bu-text); font-size:clamp(23px, 2.5vw, 26px); font-weight:400; letter-spacing:-.035em; line-height:1.25; }
.bu-estimate { padding:10px 14px; border:0; border-radius:10px; background:var(--bu-card-bg); min-width:170px; }
.bu-estimate #bu_estimated { margin-top:5px; font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.bu-trial { padding:20px; border:0; border-radius:12px; background:var(--bu-card-bg); color:var(--bu-text); }
.bu-trial-main { gap:20px; flex-wrap:wrap; }
.bu-trial-title { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; }
.bu-trial-title i { font-size:18px; color:var(--bu-text-muted); }
#bu_trial_text { margin-top:5px; max-width:70ch; color:var(--bu-text-muted); font-size:13px; line-height:1.55; }
#bu_trial_days { font-size:38px; font-weight:600; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums; }
.bu-trial-days-label { font-size:12px; color:var(--bu-text-muted); line-height:1.4; }
.bu-trial-track { height:3px; background:var(--bu-bar-bg); border-radius:4px; margin-top:18px; overflow:hidden; }
#bu_trial_bar { height:100%; background:color-mix(in srgb,var(--bu-text) 22%,var(--bu-card-bg)); border-radius:inherit; }
.bu-card, .bu-workspace .card { border:0!important; border-radius:12px; background:var(--bu-card-bg)!important; box-shadow:none!important; }
.bu-workspace .card-header { padding:17px 20px; color:var(--bu-text); background:transparent!important; border-bottom:1px solid var(--bu-border)!important; }
.bu-workspace .card-header h6 { color:var(--bu-text); font-size:13px; font-weight:600; }
.bu-workspace .card-body { padding:20px; }
.bu-workspace .bu-card .card-body { padding:20px!important; }
.bu-workspace .bu-account-divider { border-top:1px solid var(--bu-border); }
.bu-bar-track { background:var(--bu-bar-bg); }
.bu-bar-fill { background:var(--bu-accent); }
.bu-text { color:var(--bu-text)!important; }
.bu-muted { color:var(--bu-text-muted)!important; }
.bu-accent { color:var(--bu-accent)!important; }
.bu-accent-bg { background:var(--bu-accent)!important; }
.bu-workspace .btn { font-weight:500; border-radius:8px!important; box-shadow:none!important; }
.bu-workspace .btn-sm { min-height:32px; font-size:12px; }
.bu-btn-active, .bu-workspace .btn-primary, .bu-workspace .bu-primary-action, #billingusage_noplan .btn {
    background:var(--bu-accent)!important; color:var(--bu-action-text)!important; border:1px solid var(--bu-accent)!important;
}
.bu-workspace :is(.bu-btn-active, .btn-primary, .bu-primary-action):hover:not(:disabled) { opacity:.85; }
.bu-btn-inactive, .bu-workspace .btn-outline-primary {
    background:var(--bu-card-bg)!important; color:var(--bu-text)!important; border-color:var(--bu-border)!important;
}
.bu-workspace .btn-outline-primary:hover:not(:disabled), .bu-workspace .bu-btn-inactive:hover:not(:disabled) { background:var(--bu-accent-light)!important; }
.bu-workspace .btn:focus-visible { outline:2px solid var(--dt-focus, currentColor); outline-offset:3px; }
.bu-select { background:var(--bu-card-bg); color:var(--bu-text); border:0; }
.bu-period-toolbar { gap:14px; flex-wrap:wrap; margin-top:26px; }
.bu-period-options { padding:4px; gap:3px!important; border:0; border-radius:10px; background:var(--bu-accent-light); flex-wrap:wrap; }
.bu-workspace .bu_period_btn { min-height:32px; padding:5px 12px!important; border-radius:7px!important; border-color:transparent!important; }
.bu-workspace .bu_period_btn.bu-btn-inactive { background:transparent!important; }
.bu-workspace .bu_period_btn.bu-btn-active .bu-accent { color:inherit!important; opacity:.8; }
#bu_currency_select { height:36px; min-width:100px; padding:5px 12px!important; border-radius:8px!important; }
#bu_plans_cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:16px; margin:0 0 24px; }
#bu_plans_cards > .col { width:auto; min-width:0; padding:0; margin:0; }
.bu-plan-card { border:0; border-radius:12px; background:var(--bu-card-bg); }
.bu-workspace .bu-plan-card-current { border-color:var(--bu-border)!important; box-shadow:none!important; }
#bu_plans_cards .card-body { padding:22px!important; }
#bu_plans_cards .card-body > .fw-semibold { font-size:16px!important; letter-spacing:-.02em; }
#bu_plans_cards .btn { min-height:36px; }
#bu_plans_cards .card-body > div:last-child { line-height:1.9!important; }
.bu-plan-card-current .btn:disabled { opacity:1; background:var(--bu-accent-light)!important; color:var(--bu-text)!important; }
.bu-plan-card-disabled { opacity:.6; filter:none; }
.bu-plan-card-disabled .bu-btn-active, .bu-plan-card-disabled .bu-btn-inactive { pointer-events:none; }
#bu_payment_method .ti-credit-card { color:var(--bu-text)!important; }
.bu-workspace .table { color:var(--bu-text); }
.bu-workspace .table > thead > tr > th { background:var(--bu-accent-light); color:var(--bu-text-muted); font-size:11px; font-weight:500; letter-spacing:.025em; padding-block:12px; }
.bu-workspace .table > :not(caption) > * > * { border-color:var(--bu-border); vertical-align:middle; }
.bu-workspace .table > tbody > tr > td { padding-block:12px; }
@media(max-width:767px) {
    .bu-workspace { padding:18px 16px 30px; }
    .bu-header h4 { font-size:23px; }
    .bu-estimate { text-align:left!important; min-width:150px; }
    .bu-period-options { width:100%; }
    .bu-period-options .bu_period_btn { flex:1 1 auto; }
    .bu-trial { padding:16px; }
    .bu-workspace .card-header { padding:16px; }
    #bu_plans_cards .card-body { padding:20px!important; }
}
/* Restrained field focus, scoped to Subscription. */
.bu-workspace :is(input.form-control,textarea.form-control,select.form-select):focus {
    border-color:color-mix(in srgb,var(--bu-text) 24%,var(--bu-card-bg))!important;
    background:var(--bu-card-bg)!important; box-shadow:none!important;
}
/* ElevenLabs v4 Subscription Tabs, Corner-Glow Featured Plan & Agents Pricing Matrix */
.el-sub-tabs {
    display:flex; align-items:center; gap:22px; border-bottom:1px solid var(--bu-border);
    margin-bottom:22px; overflow-x:auto; scrollbar-width:none;
}
.el-sub-tab {
    appearance:none; background:transparent; border:0; border-bottom:2px solid transparent;
    padding:8px 2px 11px; font-size:13.5px; font-weight:500; color:var(--bu-text-muted);
    cursor:pointer; white-space:nowrap; transition:color .15s ease, border-color .15s ease;
}
.el-sub-tab:hover { color:var(--bu-text); }
.el-sub-tab.is-active { color:var(--bu-text); font-weight:600; border-bottom-color:var(--bu-text); }
#bu_plans_cards > .col:nth-child(3) .bu-plan-card,
#bu_plans_cards > div:nth-child(3) .bu-plan-card {
    position:relative; overflow:hidden;
    border-color:var(--dt-border-strong)!important;
}
.el-agents-matrix-card {
    border:0; border-radius:14px; background:var(--bu-card-bg);
    padding:26px 24px; margin-bottom:24px;
}
.el-agents-matrix-table {
    width:100%; border-collapse:collapse; font-size:12.5px;
}
.el-agents-matrix-table th,
.el-agents-matrix-table td {
    padding:12px 10px; border-bottom:1px solid var(--bu-border); vertical-align:top;
}
.el-agents-matrix-table th {
    font-weight:600; color:var(--bu-text); text-align:right; font-size:13px; border-bottom-width:1px;
}
.el-agents-matrix-table th:first-child,
.el-agents-matrix-table td:first-child {
    text-align:left; font-weight:500; color:var(--bu-text);
}
.el-agents-matrix-table td {
    text-align:right; color:var(--bu-text-muted); font-variant-numeric:tabular-nums;
}
.el-agents-matrix-table td:nth-child(2) {
    color:var(--bu-text); font-weight:600;
}
.el-agents-matrix-cat td {
    padding-top:20px; padding-bottom:8px; font-size:12px; font-weight:600!important;
    color:var(--bu-text)!important; border-bottom:1px solid var(--bu-border);
}
.el-faq-item {
    border-bottom:1px solid var(--bu-border); padding:14px 0;
}
.el-faq-q {
    display:flex; align-items:center; justify-content:space-between; width:100%;
    background:transparent; border:0; padding:0; text-align:left; font-size:13.5px;
    font-weight:600; color:var(--bu-text); cursor:pointer;
}
.el-faq-a {
    font-size:12.5px; color:var(--bu-text-muted); line-height:1.55; margin-top:8px; display:none;
}
.el-faq-item.is-open .el-faq-a { display:block; }

}
/* end dui-template-style modules/billing-usage:0 */
/* dui-template-style {"key":"modules/calendar:0","bytes":31602,"sha256":"74c82f5c99c525b04173a5f231981df113a5afe908c6c3709dffe02eb67d880f","media":null,"source_sha256":"def2773296eecd37076476eeaa8e59020fa99825597d59fa7e20c66d761e441f"} */
@scope (:root:has(template[data-dui-legacy-style="modules/calendar:0"])) {

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   Calendario (03-11-2026, 292271591): motor propio en vanilla JS + CSS, sin la librería anterior.
   Dirección 26-10 (Marc: «minimalista, moderno y futurista como ElevenLabs, y mejor»): una superficie, líneas de 1 px,
   sin sombras ni degradados, jerarquía por peso y grises, CTA en tinta, tokens --dt-* (oscuro automático), radios 6/8/12.
   Prefijo cal-, ámbito #calroot. Los popovers (.cal-pop) son hijos de #calroot: mueren con el innerHTML del router.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
#akicontenidonormal:has(> #calroot){display:flex;flex-direction:column;padding:0 !important;height:calc(100vh - var(--dt-topbar-h,44px));height:calc(100dvh - var(--dt-topbar-h,44px));min-height:0;overflow:hidden}
#calroot{
  --cal-hourh:56px;--cal-tint:12%;
  --cal-p1:#2f6fe4;--cal-p2:#6f52d8;--cal-p3:#b5680f;--cal-p4:#0f8a5f;--cal-p5:#c93f3f;--cal-p6:#0e7490;--cal-p7:#b8386f;--cal-p8:#5b6b84;
  position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0;
  background:var(--dt-surface);color:var(--dt-text);font-size:13px;line-height:1.45;letter-spacing:-.01em;
}
[data-bs-theme="dark"] #calroot{--cal-tint:18%;--cal-p1:#4f8ff0;--cal-p2:#8b6ff5;--cal-p3:#c9761f;--cal-p4:#17a673;--cal-p5:#e05252;--cal-p6:#22a3c4;--cal-p7:#e35d9a;--cal-p8:#8ea0bd}
#calroot *,#calroot *::before,#calroot *::after{box-sizing:border-box}
#calroot .u-hidden{display:none !important}

/* ── §1 Cabecera ── */
#calroot .cal-head{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;min-height:56px;padding:10px 20px 10px 14px;border-bottom:1px solid var(--dt-border);flex:0 0 auto;container-type:inline-size}
#calroot .cal-head-l,#calroot .cal-head-r{display:flex;align-items:center;gap:8px;min-width:0}
#calroot .cal-head-l{flex:1 1 auto}
#calroot .cal-head-r{flex:0 0 auto;margin-left:auto}
#calroot .cal-head [data-section-nav],#calroot .cal-navgrp,#calroot .cal-goto{flex:0 0 auto}
#calroot .cal-navgrp{display:inline-flex;align-items:center;gap:4px}
#calroot .cal-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 12px;margin:0;border:0;border-radius:var(--dt-radius,8px);background:transparent;color:var(--dt-text);font:inherit;font-size:12.5px;font-weight:600;line-height:1;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;-webkit-appearance:none;appearance:none;transition:background-color var(--dt-dur-1,110ms) var(--dt-ease,ease),border-color var(--dt-dur-1,110ms) var(--dt-ease,ease),color var(--dt-dur-1,110ms) var(--dt-ease,ease)}
#calroot .cal-btn:hover{background:var(--dt-hover);color:var(--dt-text)}
#calroot .cal-btn:focus-visible{outline:2px solid var(--dt-focus);outline-offset:2px}
#calroot .cal-btn[aria-pressed="true"]{background:var(--dt-active)}
#calroot .cal-ibtn{width:34px;padding:0;color:var(--dt-muted);border-color:var(--dt-border)}
#calroot .cal-ibtn:hover{color:var(--dt-text)}
#calroot .cal-ibtn .ti{font-size:16px}
#calroot .cal-btn--primary{background:var(--dt-cta);border-color:var(--dt-cta);color:var(--dt-cta-fg)}
#calroot .cal-btn--primary:hover{background:var(--dt-cta-hover);border-color:var(--dt-cta-hover);color:var(--dt-cta-fg)}
#calroot .cal-btn--primary .ti{font-size:15px}
#calroot .cal-title{display:flex;align-items:baseline;gap:10px;margin:0 2px 0 6px;flex:0 1 auto;min-width:36px;overflow:hidden;font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
#calroot .cal-title > span:first-child{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis}
#calroot .cal-title > span:first-child::first-letter{text-transform:uppercase}
#calroot .cal-title-sub{font-size:12.5px;font-weight:500;color:var(--dt-muted);letter-spacing:0}
#calroot .cal-title-sub:empty{display:none}
#calroot .cal-goto{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin:0;border:0;border-radius:var(--dt-radius,8px);color:var(--dt-muted);cursor:pointer;overflow:hidden}
#calroot .cal-goto:hover{background:var(--dt-hover);color:var(--dt-text)}
#calroot .cal-goto .dui-date{position:absolute !important;inset:0 !important;width:100% !important;margin:0 !important}
#calroot .cal-goto input{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;min-height:0 !important;margin:0 !important;padding:0 !important;border:0 !important;opacity:0 !important;cursor:pointer;font-size:16px}
#calroot .cal-goto .ti{font-size:16px;pointer-events:none}
#calroot .cal-goto .dui-date::after{content:none} /* el kit pinta su propio ti-calendar: aquí ya hay icono */
#calroot .cal-goto:has(input:focus-visible){outline:2px solid var(--dt-focus);outline-offset:2px}
#calroot .cal-goto:has(.dui-date.is-open){background:var(--dt-active);color:var(--dt-text)}
#calroot .cal-people{padding:0 10px 0 6px;gap:8px;border-color:var(--dt-border);max-width:260px}
#calroot .cal-people-txt{overflow:hidden;text-overflow:ellipsis;min-width:0}
#calroot .cal-people .ti-chevron-down{font-size:12px;opacity:.6;flex:0 0 auto}
#calroot .cal-avpila{display:inline-flex;align-items:center}
#calroot .cal-avpila .cal-av{outline:2px solid var(--dt-surface)}
#calroot .cal-avpila .cal-av + .cal-av{margin-left:-6px}
#calroot .cal-avpila:empty{display:none}
#calroot .dui-seg__opt > span{white-space:nowrap}
#calroot .dui-seg{padding:2px} /* 34 px (sm: 30) como los botones de 34 */
#calroot .dui-seg__thumb{top:2px;left:2px}

/* ── §2 Avatares (color estable por persona: --cal-pc) ── */
#calroot .cal-av{--cal-pc:var(--cal-p8);position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;border-radius:8px;overflow:hidden;background:color-mix(in srgb,var(--cal-pc) var(--cal-tint),var(--dt-surface));color:var(--cal-pc);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase;line-height:1}
#calroot .cal-av--s{width:22px;height:22px;border-radius:7px;font-size:9.5px}
#calroot .cal-av--xs{width:16px;height:16px;border-radius:5px;font-size:7.5px}
#calroot .cal-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#calroot .cal-av--un{background:var(--dt-surface-2);color:var(--dt-muted)}
#calroot .cal-av--un .ti{font-size:14px}
#calroot .cal-av--n{background:var(--dt-surface-2);color:var(--dt-muted);font-size:10px;text-transform:none}

/* ── §3 Cuerpo, busy, vista ── */
#calroot .cal-body{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#calroot .cal-busy{position:relative;flex:0 0 2px;height:2px;margin-top:-1px;overflow:hidden;z-index:1}
#calroot .cal-busy[hidden]{display:none}
#calroot .cal-busy::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;background:var(--dt-text);opacity:.3;animation:dui-legacy-modules-calendar-calBusy 1.1s var(--dt-ease,ease) infinite}
@keyframes dui-legacy-modules-calendar-calBusy{to{left:100%}}
#calroot .cal-view{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
#calroot .cal-in-n{animation:dui-legacy-modules-calendar-calSlideN var(--dt-dur-2,160ms) var(--dt-ease-out,ease) both}
#calroot .cal-in-p{animation:dui-legacy-modules-calendar-calSlideP var(--dt-dur-2,160ms) var(--dt-ease-out,ease) both}
#calroot .cal-in-f{animation:dui-legacy-modules-calendar-calFade var(--dt-dur-2,160ms) var(--dt-ease-out,ease) both}
@keyframes dui-legacy-modules-calendar-calSlideN{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
@keyframes dui-legacy-modules-calendar-calSlideP{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes dui-legacy-modules-calendar-calFade{from{opacity:0}to{opacity:1}}

/* ── §4 Chips, barras, puntos, «+N más» ── */
#calroot .cal-chip,#calroot .cal-bar{position:relative;display:flex;align-items:center;gap:5px;height:22px;padding:0 6px 0 9px;border:1px solid var(--dt-border);border-radius:5px;background:var(--dt-surface-2);color:var(--dt-text);font-size:12px;font-weight:500;line-height:1;white-space:nowrap;overflow:hidden;cursor:pointer;user-select:none;-webkit-user-select:none;--cal-st:var(--dt-faint);transition:border-color var(--dt-dur-1,110ms) var(--dt-ease,ease)}
#calroot .cal-chip::before,#calroot .cal-bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cal-st)}
#calroot .cal-chip:hover,#calroot .cal-bar:hover{border-color:var(--dt-border-strong)}
#calroot .cal-chip:focus-visible,#calroot .cal-bar:focus-visible,#calroot .cal-blk:focus-visible,#calroot .cal-lrow:focus-visible{outline:2px solid var(--dt-focus);outline-offset:1px}
#calroot .cal-t{font-size:11px;color:var(--dt-muted);font-variant-numeric:tabular-nums;flex:0 0 auto}
#calroot .cal-s{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
#calroot .cal-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cal-sd,var(--dt-faint));flex:0 0 auto}
#calroot .cal-bar{position:absolute;height:22px}
#calroot .cal-more{display:inline-flex;align-items:center;height:20px;padding:0 6px;margin:0;border:0;border-radius:6px;background:transparent;color:var(--dt-muted);font:inherit;font-size:11.5px;font-weight:600;line-height:1;cursor:pointer;align-self:flex-start;white-space:nowrap}
#calroot .cal-more:hover{color:var(--dt-text);background:var(--dt-active)}
#calroot .is-pending{border-style:dashed !important}
#calroot .is-ghost{opacity:.35}
#calroot .cal-skel{height:22px;border-radius:5px;background:var(--dt-surface-2);animation:dui-legacy-modules-calendar-calPulse 1.4s var(--dt-ease,ease) infinite alternate}
@keyframes dui-legacy-modules-calendar-calPulse{from{opacity:.45}to{opacity:1}}

/* ── §5 Mes ── */
#calroot .cal-month{overflow:hidden}
#calroot .cal-mhead{display:grid;grid-template-columns:repeat(var(--cal-ncol,7),minmax(0,1fr));flex:0 0 32px;border-bottom:1px solid var(--dt-border)}
#calroot .cal-mhead > div{display:flex;align-items:center;padding:0 10px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--dt-muted);border-left:1px solid var(--dt-border)}
#calroot .cal-mhead > div:first-child{border-left:0}
#calroot .cal-mhead > div.is-today{color:var(--dt-text)}
#calroot .cal-mweeks{flex:1 1 auto;min-height:0;display:grid;grid-template-rows:repeat(var(--cal-weeks,6),minmax(0,1fr))}
#calroot .cal-mweek{position:relative;display:grid;grid-template-columns:repeat(var(--cal-ncol,7),minmax(0,1fr));min-height:0;border-bottom:1px solid var(--dt-border)}
#calroot .cal-mweek:last-child{border-bottom:0}
#calroot .cal-mcell{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;padding:4px 6px;border-left:1px solid var(--dt-border);overflow:hidden;cursor:pointer;transition:background-color var(--dt-dur-1,110ms) var(--dt-ease,ease)}
#calroot .cal-mcell:first-child{border-left:0}
#calroot .cal-mcell:hover{background:var(--dt-hover)}
#calroot .cal-mcell.is-drop{background:var(--dt-active)}
#calroot .cal-mnum{display:inline-flex;align-items:center;justify-content:center;gap:4px;align-self:flex-start;min-width:24px;height:24px;padding:0 7px;border-radius:999px;font-size:12.5px;font-weight:500;color:var(--dt-muted);font-variant-numeric:tabular-nums;cursor:pointer;flex:0 0 auto}
#calroot .cal-mnum small{font-size:11px;font-weight:500;text-transform:lowercase}
#calroot .cal-mnum:hover{background:var(--dt-active);color:var(--dt-text)}
#calroot .cal-mcell.is-other .cal-mnum{color:var(--dt-faint)}
#calroot .cal-mcell.is-today .cal-mnum{background:var(--dt-text);color:var(--dt-surface);font-weight:600}
#calroot .cal-mcell.is-today .cal-mnum:hover{background:var(--dt-cta-hover);color:var(--dt-cta-fg)}
#calroot .cal-mitems{display:flex;flex-direction:column;gap:2px;margin-top:2px;min-height:0;overflow:hidden}
#calroot .cal-mlanes{position:absolute;left:0;right:0;top:30px;height:0;pointer-events:none;z-index:1}
#calroot .cal-mlanes .cal-bar{pointer-events:auto}
#calroot .cal-mdots{display:flex;align-items:center;gap:3px;margin-top:4px;padding-left:4px}
#calroot .cal-mdots small{font-size:10px;color:var(--dt-muted);font-weight:600}

/* ── §6 Rejilla horaria (Semana, Día, Equipo · Día) ── */
#calroot .cal-tg{overflow:hidden}
#calroot .cal-tg-scroll{flex:1 1 auto;min-height:0;overflow:auto;position:relative;overscroll-behavior:contain;touch-action:pan-x pan-y}
#calroot .cal-tg-inner{min-width:100%;width:max-content;display:flex;flex-direction:column}
#calroot .cal-tg-grid{display:grid;grid-template-columns:56px repeat(var(--cal-cols,7),minmax(var(--cal-colmin,0px),1fr))}
#calroot .cal-tg-head{position:sticky;top:0;z-index:4;background:var(--dt-surface);border-bottom:1px solid var(--dt-border);height:52px;min-height:52px}
#calroot .cal-tg-corner,#calroot .cal-tg-adlabel,#calroot .cal-tg-gutter{position:sticky;left:0;z-index:3;background:var(--dt-surface);border-right:1px solid var(--dt-border);margin-right:-1px}
#calroot .cal-tg-dh{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:5px 4px;border-left:1px solid var(--dt-border);min-width:0}
#calroot .cal-tg-dh small{font-size:11px;line-height:1;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--dt-muted)}
#calroot .cal-tg-dh b{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 6px;border-radius:999px;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--dt-text)}
#calroot .cal-tg-dh.is-today small{color:var(--dt-text)}
#calroot .cal-tg-dh.is-today b{background:var(--dt-text);color:var(--dt-surface)}
#calroot .cal-tg-ph{display:flex;align-items:center;gap:10px;padding:8px 12px;border-left:1px solid var(--dt-border);min-width:0;cursor:pointer}
#calroot .cal-tg-ph:hover{background:var(--dt-hover)}
#calroot .cal-tg-ph[data-agent="unassigned"]{cursor:default}
#calroot .cal-tg-ph[data-agent="unassigned"]:hover{background:transparent}
#calroot .cal-tg-phn,#calroot .cal-tw-pn{min-width:0;flex:1 1 auto}
#calroot .cal-tg-phn{contain:inline-size}
#calroot .cal-tg-phn b,#calroot .cal-tw-pn b{display:block;font-size:13px;line-height:1.3;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#calroot .cal-tg-phn small,#calroot .cal-tw-pn small{display:block;font-size:11.5px;line-height:1.3;color:var(--dt-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#calroot .cal-tg-allday{position:sticky;top:52px;z-index:4;background:var(--dt-surface);border-bottom:1px solid var(--dt-border)}
#calroot .cal-tg-allday.is-empty{display:none}
#calroot .cal-tg-adlabel{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:4px 8px 4px 0;font-size:11px;color:var(--dt-muted)}
#calroot .cal-tg-adcol{position:relative;display:flex;flex-direction:column;gap:2px;min-height:var(--cal-ad-h,0px);padding:3px 2px;border-left:1px solid var(--dt-border);min-width:0}
#calroot .cal-tg-adlanes{position:absolute;left:56px;right:0;top:3px;bottom:0;pointer-events:none}
#calroot .cal-tg-adlanes .cal-bar{pointer-events:auto}
#calroot .cal-tg-body{position:relative;height:calc(24 * var(--cal-hourh));isolation:isolate}
#calroot .cal-tg-gutter{position:sticky;left:0}
#calroot .cal-tg-h{position:absolute;right:8px;transform:translateY(-50%);font-size:11px;font-weight:500;line-height:1;color:var(--dt-faint);font-variant-numeric:tabular-nums;white-space:nowrap}
#calroot .cal-tg-lines{position:absolute;left:56px;right:0;top:0;bottom:0;display:flex;flex-direction:column;pointer-events:none}
#calroot .cal-hrow{position:relative;flex:1 1 0;border-top:1px solid var(--dt-border)}
#calroot .cal-hrow:first-child{border-top-color:transparent}
#calroot .cal-hrow::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed color-mix(in srgb,var(--dt-border) 60%,transparent)}
#calroot .cal-tg-col{position:relative;min-width:0;border-left:1px solid var(--dt-border)}
#calroot .cal-tg-col.is-today{background:color-mix(in srgb,var(--dt-text) 3%,transparent)}
#calroot .cal-tg-off{position:absolute;left:0;right:0;background:color-mix(in srgb,var(--dt-text) 2.5%,transparent);pointer-events:none}
#calroot .cal-now{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--dt-danger);pointer-events:none;z-index:2}
#calroot .cal-now::before{content:"";position:absolute;left:-4px;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--dt-danger)}
#calroot .cal-blk{position:absolute;display:flex;flex-direction:column;gap:1px;padding:3px 6px 3px 9px;border:0;border-radius:6px;background:var(--dt-surface-2);color:var(--dt-text);font-size:12.5px;line-height:1.3;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;--cal-st:var(--dt-faint);z-index:1;transition:border-color var(--dt-dur-1,110ms) var(--dt-ease,ease)}
#calroot .cal-blk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cal-st)}
#calroot .cal-blk:hover{border-color:var(--dt-border-strong);z-index:2}
#calroot .cal-blk .cal-s{flex:0 0 auto;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#calroot .cal-blk .cal-m{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--dt-muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
#calroot .cal-blk.is-short{flex-direction:row;align-items:center;gap:6px;padding-top:0;padding-bottom:0}
#calroot .cal-blk.is-short .cal-s{flex:1 1 auto;min-width:0;font-weight:500}
#calroot .cal-blk.is-short .cal-m{flex:0 0 auto;font-size:11px}
#calroot .cal-blk-rs{position:absolute;left:0;right:0;bottom:0;height:8px;cursor:ns-resize}
#calroot .cal-blk.is-dragging{opacity:.92;border-color:var(--dt-border-strong);z-index:6;transition:none;cursor:grabbing}
#calroot .cal-sel{position:absolute;left:2px;right:2px;border:1px dashed var(--dt-border-strong);border-radius:6px;background:var(--dt-active);pointer-events:none;z-index:1}
#calroot .cal-tg-col .cal-skel{position:absolute;left:4px;right:4px}
body.cal-dragging{user-select:none;-webkit-user-select:none;cursor:grabbing}
#calroot .cal-ghost{position:fixed;left:0;top:0;z-index:1038;pointer-events:none;opacity:.92;border-color:var(--dt-border-strong)}

/* ── §7 Equipo · Semana (planning) ── */
#calroot .cal-tw{overflow:auto;position:relative;display:block}
#calroot .cal-tw-inner{display:grid;grid-template-columns:220px repeat(var(--cal-twd,7),minmax(120px,1fr));grid-template-rows:44px;grid-auto-rows:minmax(84px,auto);min-width:100%;width:max-content;align-content:start}
#calroot .cal-tw-corner{position:sticky;top:0;left:0;z-index:5;display:flex;align-items:center;padding:0 12px;min-height:44px;background:var(--dt-surface);border-bottom:1px solid var(--dt-border);border-right:1px solid var(--dt-border);margin-right:-1px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--dt-muted)}
#calroot .cal-tw-h{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 6px;background:var(--dt-surface);border-left:1px solid var(--dt-border);border-bottom:1px solid var(--dt-border)}
#calroot .cal-tw-h small{font-size:11px;line-height:1;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--dt-muted)}
#calroot .cal-tw-h b{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 5px;border-radius:999px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
#calroot .cal-tw-h.is-today small{color:var(--dt-text)}
#calroot .cal-tw-h.is-today b{background:var(--dt-text);color:var(--dt-surface)}
#calroot .cal-tw-p{position:sticky;left:0;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--dt-surface);border-bottom:1px solid var(--dt-border);border-right:1px solid var(--dt-border);margin-right:-1px;cursor:pointer;min-width:0}
#calroot .cal-tw-p:hover{background:var(--dt-hover)}
#calroot .cal-tw-p[data-agent="unassigned"]{cursor:default}
#calroot .cal-tw-p[data-agent="unassigned"]:hover{background:var(--dt-surface)}
#calroot .cal-twcell{display:flex;flex-direction:column;gap:2px;padding:6px;border-left:1px solid var(--dt-border);border-bottom:1px solid var(--dt-border);min-width:0;cursor:pointer;transition:background-color var(--dt-dur-1,110ms) var(--dt-ease,ease)}
#calroot .cal-twcell,#calroot .cal-tg-adcol{contain:inline-size} /* bajo width:max-content las celdas con texto nowrap no dictan el ancho de las pistas 1fr */
#calroot .cal-twcell:hover{background:var(--dt-hover)}
#calroot .cal-twcell.is-today{background:color-mix(in srgb,var(--dt-text) 3%,transparent)}
#calroot .cal-twcell.is-drop{background:var(--dt-active)}
#calroot .cal-tw-h.is-we,#calroot .cal-twcell.is-we{opacity:.72}

/* ── §8 Lista ── */
#calroot .cal-list{overflow:auto;display:block}
#calroot .cal-lday{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;height:36px;padding:0 20px;background:var(--dt-surface);border-bottom:1px solid var(--dt-border);font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--dt-text)}
#calroot .cal-lday::first-letter{text-transform:uppercase}
#calroot .cal-lday.is-past{color:var(--dt-muted)}
#calroot .cal-lday.is-today::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dt-text)}
#calroot .cal-lrow{position:relative;display:flex;align-items:center;gap:14px;min-height:44px;padding:0 20px 0 28px;border-bottom:1px solid var(--dt-border);cursor:pointer;--cal-st:var(--dt-faint);transition:background-color var(--dt-dur-1,110ms) var(--dt-ease,ease)}
#calroot .cal-lrow::before{content:"";position:absolute;left:16px;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--cal-st)}
#calroot .cal-lrow:hover{background:var(--dt-hover)}
#calroot .cal-lrow .cal-t{flex:0 0 118px;font-size:12px}
#calroot .cal-lrow .cal-s{font-weight:500;white-space:nowrap}
#calroot .cal-lrow .cal-st{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--dt-muted);white-space:nowrap}
#calroot .cal-lskel{display:flex;flex-direction:column;gap:10px;padding:16px 20px}
#calroot .cal-lskel .cal-skel{width:60%}
#calroot .cal-lskel .cal-skel:nth-child(2n){width:40%}

/* ── §9 Vacío, popovers, toast ── */
#calroot .cal-empty{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:40px 20px;text-align:center;min-height:200px}
#calroot .cal-empty-ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:8px;border-radius:12px;background:var(--dt-surface-2);color:var(--dt-muted);font-size:20px}
#calroot .cal-empty b{font-size:13px;font-weight:600}
#calroot .cal-empty span{font-size:12.5px;color:var(--dt-muted)}
#calroot .cal-empty .cal-btn{margin-top:12px}
#calroot .cal-pop{position:fixed;z-index:1038;background:var(--dt-overlay);border:0;border-radius:var(--dt-radius-lg,12px);color:var(--dt-text);font-size:13px;animation:dtOpen var(--dt-dur-2,160ms) var(--dt-ease-out,ease) both;max-height:calc(100vh - 24px);overflow:hidden;display:flex;flex-direction:column}
#calroot .cal-pop{transform-origin:top center}
#calroot .cal-pop.is-closing{pointer-events:none;animation:dtClose var(--dt-dur-1,110ms) var(--dt-ease-in,ease) both !important}
#calroot .cal-pop--people,#calroot .cal-pop--keys{transform-origin:top right}
#calroot .cal-pop--hover{width:280px;padding:10px 14px 11px;pointer-events:auto;--cal-st:var(--dt-faint);transform-origin:bottom center;z-index:999}
#calroot .cal-hp-title{position:relative;padding-left:10px;font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin-bottom:6px;word-break:break-word}
#calroot .cal-hp-title::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:2px;background:var(--cal-st)}
#calroot .cal-hp-badge{display:inline-flex;align-items:center;height:20px;padding:0 8px;margin:0 0 6px 10px;border-radius:999px;font-size:10.5px;font-weight:600;color:var(--dt-text);border:1px solid color-mix(in srgb,var(--cal-sc,var(--dt-faint)) 35%,var(--dt-border));background:color-mix(in srgb,var(--cal-sc,var(--dt-faint)) 12%,var(--dt-overlay))}
#calroot .cal-hp-meta{display:flex;align-items:center;gap:6px;padding-left:10px;font-size:11.5px;color:var(--dt-muted);font-variant-numeric:tabular-nums;margin-bottom:2px}
#calroot .cal-hp-meta .ti{font-size:13px;color:var(--dt-faint)}
#calroot .cal-hp-desc{margin:6px 0 0 10px;font-size:11.5px;color:var(--dt-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
#calroot .cal-pop--people{width:300px}
#calroot .cal-pp-search{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-bottom:1px solid var(--dt-border);color:var(--dt-faint);flex:0 0 auto}
#calroot .cal-pp-search .ti{font-size:15px}
#calroot .cal-pp-search input{flex:1 1 auto;min-width:0;height:36px !important;min-height:0 !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;outline:0 !important;color:var(--dt-text);font:inherit;font-size:13px}
#calroot .cal-pp-list{flex:1 1 auto;min-height:0;overflow:auto;padding:6px}
#calroot .cal-pp-row{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:0 8px;margin:0;border:0;border-radius:6px;background:transparent;color:var(--dt-text);font:inherit;font-size:13px;text-align:left;cursor:pointer}
#calroot .cal-pp-row:hover{background:var(--dt-hover)}
#calroot .cal-pp-row[hidden]{display:none}
#calroot .cal-pp-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#calroot .cal-pp-me,#calroot .cal-pp-n{font-size:11.5px;color:var(--dt-faint);font-weight:500}
#calroot .cal-pp-row .ti-check{font-size:14px;color:var(--dt-cta);opacity:0}
#calroot .cal-pp-row.is-on .ti-check{opacity:1}
#calroot .cal-pp-row.is-on{font-weight:600}
#calroot .cal-pp-empty{padding:14px 12px;font-size:12.5px;color:var(--dt-muted)}
#calroot .cal-pp-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 12px;border-top:1px solid var(--dt-border);flex:0 0 auto}
#calroot .cal-link{height:28px;padding:0 6px;margin:0;border:0;border-radius:6px;background:transparent;color:var(--dt-muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
#calroot .cal-link:hover{color:var(--dt-text);background:var(--dt-hover)}
#calroot .cal-pop--day{width:320px}
#calroot .cal-pop--keys{width:280px}
#calroot .cal-pd-head{display:flex;align-items:center;justify-content:space-between;gap:8px;height:40px;padding:0 8px 0 14px;border-bottom:1px solid var(--dt-border);font-size:12.5px;font-weight:600;flex:0 0 auto}
#calroot .cal-pd-head::first-letter{text-transform:uppercase}
#calroot .cal-pd-x{width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:var(--dt-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
#calroot .cal-pd-x:hover{background:var(--dt-hover);color:var(--dt-text)}
#calroot .cal-pd-list{flex:1 1 auto;min-height:0;overflow:auto;padding:6px}
#calroot .cal-prow{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:0 8px 0 16px;margin:0;border:0;border-radius:6px;background:transparent;color:var(--dt-text);font:inherit;font-size:12.5px;text-align:left;cursor:pointer;--cal-st:var(--dt-faint)}
#calroot .cal-prow::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--cal-st)}
#calroot .cal-prow:hover{background:var(--dt-hover)}
#calroot .cal-prow .cal-t{flex:0 0 auto;width:92px}
#calroot .cal-prow .cal-s{font-weight:500;white-space:nowrap}
#calroot .cal-keys{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;padding:10px 14px 12px;font-size:12.5px;color:var(--dt-muted)}
#calroot .cal-keys kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 6px;border:0;border-radius:5px;font:inherit;font-size:11px;font-weight:600;color:var(--dt-text);background:var(--dt-surface-2)}
#calroot .cal-toastwrap{position:fixed;left:0;right:0;bottom:22px;z-index:1038;display:flex;justify-content:center;pointer-events:none}
#calroot .cal-toast{display:flex;align-items:center;gap:10px;height:40px;padding:0 6px 0 14px;border:1px solid var(--dt-border-strong);border-radius:12px;background:var(--dt-overlay);font-size:12.5px;pointer-events:auto;animation:dtOpenUp var(--dt-dur-2,160ms) var(--dt-ease-out,ease) both;max-width:calc(100vw - 24px)}
#calroot .cal-toast .cal-btn{height:28px;padding:0 10px;font-size:12px}
#calroot .cal-toast .cal-ibtn{width:28px}

/* ── §10 Responsive y movimiento reducido ── */
@media (max-width:1100px){
  #calroot .dui-seg__opt > span{display:none}
  #calroot .cal-people-txt{display:none}
  #calroot .cal-btn--primary > span{display:none}
  #calroot .cal-btn--primary{width:34px;padding:0}
}
@media (min-width:768px) and (max-width:899.98px){
  #calroot .cal-head{flex-wrap:wrap}
  #calroot .cal-head-r{flex:1 1 100%;margin-left:0}
}
@media (max-width:420px){
  #calroot .cal-head [data-section-nav] .sb-section-trigger-text{display:none}
}
@media (max-width:767px){
  #calroot .cal-head{padding:8px 12px;gap:6px;min-height:0;flex-wrap:wrap}
  #calroot .cal-head-l{flex:1 1 100%;width:100%;gap:6px;flex-wrap:wrap}
  #calroot .cal-head-r{flex:1 1 100%;width:100%;margin-left:0;flex-wrap:wrap;justify-content:flex-start;row-gap:6px}
  #calroot .cal-btn--primary{margin-left:auto}
  #calroot .cal-title{font-size:16px;margin-left:2px}
  #calroot .cal-title-sub{display:none}
  #calroot .cal-mcell{padding:3px 2px}
  #calroot .cal-mnum{min-width:22px;height:22px;font-size:12px}
  #calroot .cal-tw-inner{grid-template-columns:140px repeat(var(--cal-twd,7),minmax(110px,1fr))}
  #calroot .cal-tw-p{padding:8px}
  #calroot .cal-lrow{padding-left:22px;gap:10px}
  #calroot .cal-lrow .cal-t{flex-basis:96px;font-size:11.5px}
  #calroot .cal-lrow .cal-st{display:none}
  #calroot .cal-pop--people,#calroot .cal-pop--day{width:min(320px,calc(100vw - 16px))}
}
@media (pointer:coarse){
  #calroot .cal-blk-rs{height:14px;touch-action:none}
}
@media (prefers-reduced-motion:reduce){
  #calroot *,#calroot *::before,#calroot *::after{animation:none !important;transition:none !important}
  #calroot .cal-busy::after{left:0;width:100%;opacity:.18}
}
/* etiquetas según el ancho real de la cabecera (la sidebar quita 260 px): primero modo y personas, después vistas y CTA */
@container (max-width:1480px){
  #calroot .dui-seg--sm .dui-seg__opt > span{display:none}
  #calroot .cal-people-txt{display:none}
}
@container (max-width:1180px){
  #calroot .dui-seg__opt > span{display:none}
  #calroot .cal-btn--primary > span{display:none}
  #calroot .cal-btn--primary{width:34px;padding:0}
}

}
/* end dui-template-style modules/calendar:0 */
/* dui-template-style {"key":"modules/calendarwidget:0","bytes":7794,"sha256":"03d9502cec92d3f28b9ad15f13f70d2cd1c9aba275d37cdafedea32e41505321","media":null,"source_sha256":"03d9502cec92d3f28b9ad15f13f70d2cd1c9aba275d37cdafedea32e41505321"} */
@scope (:root:has(template[data-dui-legacy-style="modules/calendarwidget:0"])) {

/* Meeting Scheduler: a single list of booking calendars, with details on demand. */
.cw { color: var(--dt-text); }
.cw-layout { display: flex; align-items: flex-start; width: 100%; gap: 0; }
.cw-main { flex: 1; min-width: 0; }
.cw-layout.has-panel { gap: 24px; }
.cw .cw-header { align-items: center; }
.cw-header__left { min-width: 0; }
.cw-header__title { display: flex; align-items: center; gap: 10px; }
.cw-header__title-icon,
.cw-card__icon,
.cw-empty__icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: var(--dt-radius-sm);
  background: var(--dt-surface-2); color: var(--dt-muted); font-size: 18px;
}
.cw button { font-family: inherit; }
.cw-header__btn,
.cw-empty__btn,
.cw-panel__btn,
.cw-panel__action-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 8px 13px; border: 0;
  border-radius: var(--dt-radius-sm); background: var(--dt-surface); color: var(--dt-text);
  font-size: 13px; font-weight: 500; line-height: 1.3; cursor: pointer;
}
.cw-header__btn,
.cw-empty__btn,
.cw-panel__btn--primary { background: var(--dt-cta); border-color: var(--dt-cta); color: var(--dt-cta-fg); }
.cw-header__btn:hover,
.cw-empty__btn:hover,
.cw-panel__btn--primary:hover { background: var(--dt-cta-hover); border-color: var(--dt-cta-hover); }
.cw-panel__btn--outline:hover,
.cw-panel__action-btn:hover { background: var(--dt-hover); }
.cw-panel__action-btn--delete { color: var(--dt-danger); }
.cw-layout.has-panel .cw-header__btn,
.cw-main:has(> #cwEmptyState:not(.cw-hidden)) .cw-header__btn {
  background: transparent; border-color: var(--dt-border); color: var(--dt-text);
}
.cw button:focus-visible,
.cw a:focus-visible,
.cw summary:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 3px; }
.cw-controls { border-bottom: 1px solid var(--dt-border); }
.cw-tabs { display: flex; align-items: center; gap: 8px; color: var(--dt-muted); font-size: 13px; }
.cw-tab__count { color: var(--dt-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cw-search { position: relative; min-width: 0; }
.cw-search__icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--dt-muted); pointer-events: none; }
.cw-search__input {
  width: 240px; max-width: 100%; height: 36px; padding: 0 12px 0 34px;
  border: 0; border-radius: var(--dt-radius-sm);
  background: var(--dt-surface); color: var(--dt-text); font: inherit; font-size: 13px;
}
.cw-search__input::placeholder { color: var(--dt-faint); }
.cw-search__input:focus { outline: none; border-color: var(--dt-focus); box-shadow: none; }
.cw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.cw-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 18px; background: var(--dt-surface); border: 0;
  border-radius: var(--dt-radius); cursor: pointer;
}
.cw-card:hover { border-color: var(--dt-border-strong); }
.cw-card.is-selected { border-color: var(--dt-focus); background: var(--dt-surface-2); }
.cw-card__header {
  display: flex; align-items: center; gap: 10px; width: calc(100% - 28px); min-width: 0;
  padding: 0; border: 0; background: transparent; color: var(--dt-text); text-align: left; cursor: pointer;
}
.cw-card__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.cw-card__desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0; color: var(--dt-muted); font-size: 13px; line-height: 1.5;
}
.cw-card__actions { position: absolute; top: 16px; right: 12px; }
.cw-card__actions-btn,
.cw-panel__close {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  padding: 0; border: 0; border-radius: var(--dt-radius-sm); background: transparent;
  color: var(--dt-muted); font-size: 17px; cursor: pointer;
}
.cw-card__actions-btn:hover,
.cw-card__actions-btn.show,
.cw-panel__close:hover { color: var(--dt-text); background: var(--dt-hover); }
.cw-card__actions-btn.dropdown-toggle::after { display: none; }
.cw-card__actions .dropdown-menu { padding: 4px; min-width: 180px; background: var(--dt-surface); border: 0; box-shadow: none; }
.cw-card__actions .dropdown-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--dt-radius-sm); color: var(--dt-text); font-size: 13px; }
.cw-card__actions .dropdown-item:hover,
.cw-card__actions .dropdown-item:focus { background: var(--dt-hover); }
.cw-card__actions .cw-danger { color: var(--dt-danger); }
#cwLoading { grid-column: 1 / -1; }
.cw-panel { width: 0; min-width: 0; visibility: hidden; overflow: hidden; flex-shrink: 0; }
.cw-panel.is-open { width: 340px; visibility: visible; }
.cw-panel__inner {
  position: sticky; top: 0; width: 340px; padding: 20px;
  background: var(--dt-surface); border: 0; border-radius: var(--dt-radius);
  max-height: var(--app-page-height); overflow-y: auto;
}
.cw-panel__close { position: absolute; top: 10px; right: 10px; }
.cw-panel__name { margin: 0 28px 16px 0; color: var(--dt-text); font-size: 17px; font-weight: 500; overflow-wrap: anywhere; }
.cw-panel__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cw-panel__action-btn { padding: 7px 10px; }
.cw-panel__details { padding: 22px 0; }
.cw-panel__desc-title { margin-bottom: 7px; color: var(--dt-muted); font-size: 12px; font-weight: 500; }
.cw-panel__desc-box { color: var(--dt-text); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.cw-panel__technical { margin-top: 18px; border-top: 1px solid var(--dt-border); padding-top: 12px; }
.cw-panel__technical summary { color: var(--dt-muted); font-size: 12px; cursor: pointer; }
.cw-panel__row-value { display: block; margin-top: 8px; color: var(--dt-text); font-size: 12px; overflow-wrap: anywhere; }
.cw-panel__footer { display: flex; flex-direction: column; gap: 8px; }
.cw-empty { padding: 56px 20px; text-align: center; }
.cw-empty__icon { width: 48px; height: 48px; font-size: 23px; margin-bottom: 16px; }
.cw-empty__title { margin-bottom: 8px; font-size: 18px; font-weight: 500; }
.cw-empty__text { max-width: 48ch; margin: 0 auto 20px; color: var(--dt-muted); font-size: 13px; line-height: 1.6; }
.cw-noresults { display: none; padding: 48px 20px; text-align: center; color: var(--dt-muted); font-size: 13px; }
.cw-noresults.is-visible { display: block; }
.cw-noresults > i { display: block; margin-bottom: 10px; font-size: 22px; }
.cw-hidden { display: none !important; }
.cw-panel-backdrop { display: none; }
@media (max-width: 1000px) {
  .cw-layout.has-panel { gap: 0; }
  .cw-panel,
  .cw-panel.is-open { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1050; width: min(390px, 100%); }
  .cw-panel:not(.is-open) { display: none; }
  .cw-panel__inner { position: relative; width: 100%; height: 100%; max-height: 100dvh; border-radius: 0; border-width: 0 0 0 1px; padding: 24px; }
  .cw-panel-backdrop.is-visible { display: block; position: fixed; inset: 0; z-index: 1049; background: var(--dt-backdrop); }
}
@media (max-width: 600px) {
  .cw .cw-header { align-items: flex-start; }
  .cw .cw-controls { align-items: stretch; }
  .cw-search { width: 100%; }
  .cw-search__input { width: 100%; }
  .cw-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
  .cw button:focus-visible,
  .cw a:focus-visible,
  .cw summary:focus-visible,
  .cw-search__input:focus { outline: 2px solid Highlight; outline-offset: 2px; }
}

}
/* end dui-template-style modules/calendarwidget:0 */
/* dui-template-style {"key":"modules/calendarwidget-add:0","bytes":2996,"sha256":"12f071fbe79dc9eae30282d45f4a4f9f6d85ac34c4fb09a4d819c978ce46a64a","media":null,"source_sha256":"12f071fbe79dc9eae30282d45f4a4f9f6d85ac34c4fb09a4d819c978ce46a64a"} */
@scope (:root:has(template[data-dui-legacy-style="modules/calendarwidget-add:0"])) {

  #formCalendar { margin-bottom: 0.2%; }
  .cw-day-row { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-color, #e9ecef); }
  .cw-day-row:last-child { border-bottom:none; }
  .cw-day-label { width:100px; flex-shrink:0; font-weight:600; font-size:14px; padding-top:8px; display:flex; align-items:center; gap:8px; }
  .cw-day-toggle { min-width:18px; min-height:18px; accent-color:var(--dt-cta); cursor:pointer; }
  .cw-day-ranges { flex:1; display:flex; flex-direction:column; gap:8px; }
  .cw-range-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .cw-range-row select { padding:6px 8px; border-radius:6px; border:1px solid var(--border-color, #dee2e6); font-size:13px; min-width:80px; background:var(--bs-body-bg, #fff); color:var(--bs-body-color, #212529); }
  .cw-range-row .cw-range-sep { font-size:12px; color:var(--text-muted, #6c757d); }
  .cw-range-del { background:none; border:none; color:var(--dt-danger, #dc3545); cursor:pointer; font-size:16px; padding:4px 6px; border-radius:4px; line-height:1; }
  .cw-range-del:hover { background:var(--dt-hover); }
  .cw-add-range { background:none; border:1px dashed var(--dt-border-strong); color:var(--dt-text); cursor:pointer; font-size:12px; padding:4px 10px; border-radius:6px; display:inline-flex; align-items:center; gap:4px; }
  .cw-add-range:hover { background:var(--dt-hover); border-color:var(--dt-border-strong); }
  .cw-day-off { opacity:.5; }
  .cw-day-off .cw-day-ranges { display:none; }
  .cw-copy-btn { background:none; border:none; color:var(--text-muted, #6c757d); cursor:pointer; font-size:11px; padding:2px 6px; border-radius:4px; white-space:nowrap; }
  .cw-copy-btn:hover { background:var(--dt-hover); color:var(--dt-text); }
  .cw-overlap-msg { color:var(--dt-danger, #dc3545); font-size:11px; margin-top:2px; }
/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Calendario (alta y edición): los azules #5d87ff del horario ya se cambian en sus reglas de arriba (token_edits). Aquí: las casillas
   con accent-color:var(--primary) en línea (variable que no existe: salían en azul del navegador) pasan a tinta; los avatares de
   iniciales de colores que pinta el JS, a círculo neutro; y «Create calendar» de btn-lg a 34 px. */
#formCalendar input[type='checkbox'][style*='accent-color'] { accent-color: var(--dt-cta) !important; }
#agentsCalendarDIV div[style*='border-radius:50%;background:#'] { background: var(--dt-surface-2) !important; border: 0; }
#agentsCalendarDIV div[style*='border-radius:50%;background:#'] > span[style*='color:#fff'] { color: var(--dt-muted) !important; }
#akicontenidonormal #btnSendCalendar.btn-lg { height: 34px; padding: 0 16px; font-size: 13px; font-weight: 600; border-radius: var(--dt-radius); }
#akicontenidonormal .cw-range-row select { border-color: var(--dt-border-strong); border-radius: var(--dt-radius-sm); }

}
/* end dui-template-style modules/calendarwidget-add:0 */
/* dui-template-style {"key":"modules/chats:0","bytes":33961,"sha256":"854546f8480a8e13001c888508ccdbd7014a44ab8b9e7bcd172d397c8462dfb5","media":"not all","source_sha256":"823ff29f3a2da25f5ca946f149e8bb9e36713fde09eab275249a04a822526d04"} */
@scope (:root:has(template[data-dui-legacy-style="modules/chats:0"])) {
@media not all {

/* =========================================================
   CHATS MODULE - Modern Design + Dark Theme
   ========================================================= */

/* ===== Avatars ===== */
.avatar { position: relative; display: inline-block; flex-shrink: 0; }
.avatar-m { height: 1.75rem; width: 1.75rem; }
.avatar-xl { height: 2rem; width: 2rem; }
.avatar-2xl { height: 2.5rem; width: 2.5rem; }
.avatar img, .avatar .avatar-name { width: 100%; height: 100%; display: block; object-fit: cover; }
.siesdatalyse { border-radius: 0px !important; }

/* ===== Layout ===== */
.chats-layout { min-height: 60vh; }

/* ===== Composer Card ===== */
.chats-composer {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: none;
}
.chats-composer__header {
    padding: 14px 18px;
    background: var(--bg-secondary-color);
    border-bottom: 1px solid var(--border-color);
}
.chats-composer__input {
    min-height: 100px;
    padding: 14px 18px;
    border: none;
    outline: none;
    color: var(--text-color);
    font-size: 0.9rem;
    line-height: 1.6;
    background: transparent;
}
.chats-composer__input:empty:before {
    content: attr(data-placeholder);
    opacity: 0.45;
    pointer-events: none;
}
.chats-composer__input:focus {
    outline: none;
}
.chats-composer__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px 14px;
    border-top: 1px solid var(--border-color);
}
.chats-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: 20px;
    border: 0;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    transition: all .15s ease;
}
.chats-toolbar-btn:hover {
    background: var(--hover-color);
    border-color: var(--border-strong-color);
}
.chats-tag-members {
    padding: 12px 18px 16px;
    border-top: 1px solid var(--border-color);
}

/* ===== Post Cards ===== */
.chats-post {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: none;
    transition: box-shadow .2s ease, transform .2s ease;
}
.chats-post:hover {
    box-shadow: none;
}
.chats-post__header {
    padding: 14px 18px;
    background: var(--bg-secondary-color);
    border-bottom: 1px solid var(--border-color);
}
.chats-post__author {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 600;
}
.chats-post__author:hover {
    color: var(--falcon-primary, #2c7be5);
}
.chats-post__time {
    color: var(--text-secondary-color);
    font-size: 0.78rem;
}
.chats-post__menu-btn {
    color: var(--text-secondary-color);
    opacity: 0.6;
    transition: opacity .15s ease;
}
.chats-post__menu-btn:hover {
    opacity: 1;
}
.chats-post__body {
    padding: 16px 18px;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-color);
    overflow: hidden;
}
.chats-post__body p { margin-bottom: 0.5rem; }
.chats-post__body p:last-child { margin-bottom: 0; }
.chats-post__footer {
    padding: 0 18px 14px;
    border-top: 1px solid var(--border-color);
    background: var(--falcon-card-bg);
}
.chats-post__stats {
    padding: 10px 0;
    font-size: 0.78rem;
    color: var(--text-secondary-color);
    border-bottom: 1px solid var(--border-color);
}
.chats-post__stats a {
    color: var(--text-secondary-color);
    text-decoration: none;
}
.chats-post__stats a:hover {
    color: var(--falcon-primary, #2c7be5);
}
.chats-post__actions {
    display: flex;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}
.chats-post__action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary-color);
    text-decoration: none;
    transition: all .12s ease;
}
.chats-post__action-btn:hover {
    background: var(--hover-color);
    color: var(--falcon-primary, #2c7be5);
}
.chats-liked { color: var(--falcon-primary, #2c7be5); }

/* ===== Comments ===== */
.chats-comment__bubble {
    padding: 8px 14px;
    background: var(--bg-secondary-color);
    border-radius: 12px;
    border: 0;
    line-height: 1.5;
    word-break: break-word;
}
.chats-comment__author {
    color: var(--text-color) !important;
    text-decoration: none;
}
.chats-comment__author:hover {
    color: var(--falcon-primary, #2c7be5) !important;
}
.chats-comment__meta {
    padding: 4px 14px;
    font-size: 0.72rem;
    color: var(--text-secondary-color);
}
.chats-comment__meta a {
    color: var(--text-secondary-color);
    text-decoration: none;
}
.chats-comment__meta a:hover {
    color: var(--falcon-primary, #2c7be5);
}
.chats-comment-form {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    position: relative;
}
.chats-load-more-comments {
    color: var(--falcon-primary, #2c7be5);
    font-weight: 500;
}

/* ===== Channels Sidebar ===== */
.chats-channel-actions {
    border: 0;
    border-radius: 12px;
}
.chats-channels-card {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: none;
}
.chats-channels-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    background: var(--bg-secondary-color);
    border-bottom: 1px solid var(--border-color);
}
.chats-channels-card__body {
    padding: 16px 18px;
    max-height: 55vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scrolldark-color) transparent;
}

/* Channel list items */
.chats-channel-item {
    display: flex;
    align-items: flex-start;
    padding: 4px 0;
}
.chats-channel-item__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 42px;
    padding: 6px 4px;
    background: var(--bg-secondary-color);
    border: 0;
    border-radius: 8px;
    text-align: center;
    line-height: 1;
}
.chats-channel-item__month {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--falcon-primary, #2c7be5);
    letter-spacing: 0.03em;
}
.chats-channel-item__day {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
    margin-top: 1px;
}
.chats-channel-item__name {
    color: var(--text-color);
    text-decoration: none;
}
.chats-channel-item__name:hover {
    color: var(--falcon-primary, #2c7be5);
}
.chats-channel-item__desc {
    color: var(--text-secondary-color);
    margin-bottom: 4px !important;
}
.chats-channel-item__divider {
    border-bottom: 1px dashed var(--border-color);
    margin: 14px 0;
}
#akiulchatssla > div:last-of-type .soybarraseparadora {
    display: none;
}

/* ===== Misc ===== */
.absolutright {
    position: absolute;
    right: 30px;
    margin-top: -13px;
}
.absolutrightnew {
    position: absolute;
    right: 1px;
    margin-top: 1px;
}
.btn-plain12px {
    font-size: 12px;
    text-wrap: nowrap;
}
.driveimagextensionCHATS {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: 0 0 28px;
}
.tagmiembro {
    color: var(--falcon-primary, #2c7be5);
    font-weight: 500;
}
.yacomentarioscargados a {
    color: var(--falcon-primary, #2c7be5);
}
.yacomentarioscargados {
    color: var(--text-color);
}

/* ===== Animations ===== */
.SCALEANIMA {
    animation: dui-legacy-modules-chats-chatsFadeIn .35s ease both;
}
.SHADOWESNUEVO {
    box-shadow: none !important;
    animation: dui-legacy-modules-chats-chatsFadeIn .35s ease both, dui-legacy-modules-chats-chatsNewGlow 2s ease-out forwards;
}
@keyframes dui-legacy-modules-chats-chatsFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes dui-legacy-modules-chats-chatsNewGlow {
    0% { box-shadow: 0 0 0 2px var(--falcon-primary, #2c7be5), var(--falcon-box-shadow-sm); }
    100% { box-shadow: var(--falcon-box-shadow-sm); }
}

/* ===== Dark theme specific ===== */
[data-bs-theme=dark] .chats-post:hover {
    box-shadow: none;
}
[data-bs-theme=dark] .chats-toolbar-btn:hover {
    background: var(--bg-tertiary-color);
}
[data-bs-theme=dark] .chats-post__action-btn:hover {
    background: var(--bg-tertiary-color);
}

/* ===== Slack-style workspace shell (final layer) ===== */
#akicontenidonormal[data-module="chats"] {
    height: calc(100vh - var(--dt-topbar-h, 44px));
    height: calc(100dvh - var(--dt-topbar-h, 44px));
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
}
.chats-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    grid-template-areas: "main rail";
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    color: var(--dt-text);
    background: var(--dt-surface);
    border-top: 1px solid var(--dt-border);
}
.chats-rail {
    grid-area: rail;
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    color: var(--dt-on-color);
    background: #3f0e40;
    border-left: 1px solid rgba(0, 0, 0, .16);
}
.chats-rail-view,
.chats-thread-view {
    width: 100%;
    height: 100%;
    min-height: 0;
}
.chats-rail-view {
    display: flex;
    flex-direction: column;
}
.chats-workspace.is-thread-open {
    grid-template-columns: minmax(0, 1fr) 380px;
}
.chats-rail__header {
    display: flex;
    min-height: 64px;
    padding: 11px 12px 10px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.chats-rail__eyebrow {
    display: block;
    margin-bottom: 1px;
    color: rgba(255, 255, 255, .65);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.chats-rail__header h2 {
    margin: 0;
    color: var(--dt-on-color) !important;
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -.02em;
}
.chats-icon-btn {
    display: inline-flex;
    width: 32px;
    height: 32px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--dt-muted);
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}
.chats-icon-btn:hover { color: var(--dt-text); background: var(--dt-hover); }
.chats-icon-btn--primary { color: #3f0e40; background: var(--dt-surface); }
.chats-icon-btn--primary:hover { color: #3f0e40; background: rgba(255,255,255,.88); }
.chats-icon-btn--danger:hover { color: var(--dt-danger); }
.chats-channel-search {
    display: flex;
    min-height: 34px;
    margin: 10px 12px 8px;
    padding: 0 10px;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.68);
    background: rgba(255,255,255,.12);
    border: 0;
    border-radius: 7px;
}
.chats-channel-search:focus-within {
    background: rgba(255,255,255,.17);
    border-color: rgba(255,255,255,.42);
}
.chats-channel-search i { flex: 0 0 auto; font-size: 15px; }
.chats-channel-search input {
    min-width: 0;
    width: 100%;
    padding: 0;
    color: var(--dt-on-color);
    background: transparent;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 12.5px;
}
.chats-channel-search input::placeholder { color: rgba(255,255,255,.58); }
.chats-rail__section-label {
    display: flex;
    min-height: 30px;
    padding: 3px 12px 3px 16px;
    align-items: center;
    justify-content: space-between;
    color: rgba(255,255,255,.66);
    font-size: 11.5px;
    font-weight: 600;
}
.chats-rail__section-label button {
    display: inline-flex;
    width: 26px;
    height: 26px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 6px;
}
.chats-rail__section-label button:hover { color: var(--dt-cta-fg); background: rgba(255,255,255,.12); }
.chats-channels-card__body {
    min-height: 0;
    max-height: none;
    padding: 0 8px 12px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: rgba(255,255,255,.28) transparent;
}
.chats-channel-item {
    display: block;
    padding: 0;
}
.chats-channel-item__link {
    position: relative;
    display: flex;
    min-height: 32px;
    padding: 5px 9px;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.78) !important;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 450;
    line-height: 1.25;
    text-decoration: none !important;
    transition: color .12s ease, background-color .12s ease;
}
.chats-channel-item__link:hover { color: var(--dt-on-color) !important; background: rgba(255,255,255,.10); }
.chats-channel-item__link.is-active,
.chats-channel-item__link[aria-current="page"] {
    color: var(--dt-text) !important;
    background: var(--dt-surface);
    font-weight: 600;
}
.chats-channel-item__icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: .82;
}
.chats-channel-item__label {
    min-width: 0;
    overflow: hidden;
    flex: 1 1 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chats-channel-item__public {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    color: currentColor;
    font-size: 12px;
    opacity: .62;
}
.chats-channel-empty {
    padding: 18px 12px;
    color: rgba(255,255,255,.66);
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}
.chats-rail__loading { display: flex; padding: 16px; justify-content: center; gap: 4px; }
.chats-rail__loading span { width: 5px; height: 5px; background: rgba(255,255,255,.55); border-radius: 50%; animation: dui-legacy-modules-chats-chatsPulse 1s infinite alternate; }
.chats-rail__loading span:nth-child(2) { animation-delay: .16s; }
.chats-rail__loading span:nth-child(3) { animation-delay: .32s; }
@keyframes dui-legacy-modules-chats-chatsPulse { to { opacity: .25; transform: translateY(-2px); } }

.chats-thread-view {
    display: flex;
    min-width: 0;
    flex-direction: column;
    color: var(--dt-text);
    background: var(--dt-surface);
}
.chats-thread-header {
    display: grid;
    min-height: 64px;
    padding: 8px 10px;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--dt-border);
}
.chats-thread-header h2 {
    margin: 0;
    color: var(--dt-text) !important;
    font-size: 15px;
    font-weight: 650;
}
.chats-thread-header span {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    color: var(--dt-faint);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chats-thread-back,
.chats-thread-close {
    display: inline-flex;
    width: 34px;
    height: 34px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--dt-muted);
    background: transparent;
    border: 0;
    border-radius: 7px;
}
.chats-thread-back:hover,
.chats-thread-close:hover { color: var(--dt-text); background: var(--dt-hover); }
.chats-thread-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--dt-border-strong) transparent;
}
.chats-thread-parent {
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--dt-border);
}
.chats-thread-message {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
}
.chats-thread-message__avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
}
.chats-thread-message__meta {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 6px;
}
.chats-thread-message__author {
    overflow: hidden;
    color: var(--dt-text);
    font-size: 13px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chats-thread-message__time { flex: 0 0 auto; color: var(--dt-faint); font-size: 10.5px; }
.chats-thread-message__body {
    margin-top: 3px;
    color: var(--dt-text);
    font-size: 12.5px;
    line-height: 1.48;
    overflow-wrap: anywhere;
}
.chats-thread-message__media { margin-top: 8px; }
.chats-thread-divider {
    display: flex;
    padding: 12px 16px 6px;
    align-items: center;
    gap: 8px;
    color: var(--dt-faint);
    font-size: 11px;
    font-weight: 550;
}
.chats-thread-divider::after { content: ""; height: 1px; flex: 1 1 auto; background: var(--dt-border); }
.chats-thread-load {
    display: inline-flex;
    align-self: center;
    margin: 2px auto 8px;
    padding: 5px 9px;
    align-items: center;
    gap: 5px;
    color: var(--dt-muted);
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: 11px;
}
.chats-thread-load:hover { color: var(--dt-text); background: var(--dt-hover); }
.chats-thread-replies { padding: 0 0 12px; }
.chats-thread-reply {
    position: relative;
    display: grid;
    padding: 8px 16px;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 9px;
    transition: background-color .12s ease;
}
.chats-thread-reply:hover { background: var(--dt-hover); }
.chats-thread-reply .chats-thread-message__avatar { width: 32px; height: 32px; border-radius: 7px; }
.chats-thread-reply__delete {
    position: absolute;
    top: 5px;
    right: 8px;
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    color: var(--dt-faint);
    background: var(--dt-surface);
    border: 0;
    border-radius: 6px;
    opacity: 0;
}
.chats-thread-reply:hover .chats-thread-reply__delete,
.chats-thread-reply__delete:focus-visible { opacity: 1; }
.chats-thread-reply__like {
    display: inline-flex;
    margin-top: 5px;
    padding: 3px 5px;
    align-items: center;
    gap: 4px;
    color: var(--dt-faint);
    border-radius: 5px;
    font-size: 10.5px;
    text-decoration: none;
}
.chats-thread-reply__like:hover { color: var(--dt-text); background: var(--dt-hover); }
.chats-thread-empty { padding: 28px 16px; color: var(--dt-faint); font-size: 12px; text-align: center; }
.chats-thread-composer {
    flex: 0 0 auto;
    margin: 8px 10px 10px;
    background: var(--dt-surface);
    border: 0;
    border-radius: 8px;
}
.chats-thread-input {
    min-height: 54px;
    max-height: 130px;
    padding: 10px 11px 5px;
    overflow-y: auto;
    color: var(--dt-text);
    font-size: 12.5px;
    line-height: 1.45;
    outline: 0;
}
.chats-thread-input:empty::before { content: attr(data-placeholder); color: var(--dt-faint); pointer-events: none; }
.chats-thread-input:focus { box-shadow: inset 0 0 0 1px var(--dt-focus); border-radius: 7px 7px 0 0; }
.chats-thread-composer__toolbar {
    display: flex;
    min-height: 34px;
    padding: 3px 5px 5px;
    align-items: center;
    gap: 5px;
}
.chats-thread-composer__toolbar > span { flex: 1 1 auto; color: var(--dt-faint); font-size: 10px; }
.chats-thread-tool,
.chats-thread-send {
    display: inline-flex;
    width: 28px;
    height: 27px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
}
.chats-thread-tool { color: var(--dt-muted); background: transparent; }
.chats-thread-tool:hover { color: var(--dt-text); background: var(--dt-hover); }
.chats-thread-send { color: var(--dt-cta-fg); background: var(--dt-cta); }
.chats-thread-send:hover { background: var(--dt-cta-hover); }

.chats-main {
    grid-area: main;
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    background: var(--dt-surface);
}
.chats-channel-header {
    display: flex;
    min-height: 64px;
    padding: 9px 16px 9px 20px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--dt-surface);
    border-bottom: 1px solid var(--dt-border);
}
.chats-channel-header__identity { display: flex; min-width: 0; align-items: center; gap: 10px; }
.chats-channel-header__hash {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    color: var(--dt-muted);
    background: var(--dt-hover);
    border: 0;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 550;
}
.chats-channel-header__copy { min-width: 0; }
.chats-channel-header__titleline { display: flex; min-width: 0; align-items: center; gap: 8px; }
.chats-channel-header h1 {
    overflow: hidden;
    margin: 0;
    color: var(--dt-text) !important;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chats-channel-header p {
    overflow: hidden;
    max-width: 620px;
    margin: 2px 0 0;
    color: var(--dt-faint);
    font-size: 11.5px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chats-channel-header__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.chats-member-count {
    margin-right: 4px;
    padding: 4px 8px;
    color: var(--dt-muted);
    background: var(--dt-hover);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 550;
}
.chats-visibility-badge {
    display: inline-flex;
    padding: 2px 6px;
    align-items: center;
    color: var(--dt-muted);
    background: var(--dt-hover);
    border: 1px solid var(--dt-border);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
}
.chats-feed-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--dt-border-strong) transparent;
}
.chats-message-stream {
    display: flex;
    width: 100%;
    max-width: 980px;
    min-height: 100%;
    margin: 0 auto;
    padding: 18px 0 24px;
    flex-direction: column;
    justify-content: flex-end;
}
.chats-date-divider {
    display: flex;
    margin: 13px 18px 10px;
    align-items: center;
    gap: 10px;
    color: var(--dt-faint);
    font-size: 10.5px;
    font-weight: 600;
}
.chats-date-divider::before,
.chats-date-divider::after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    background: var(--dt-border);
}
.chats-date-divider span {
    padding: 3px 8px;
    background: var(--dt-surface);
    border: 0;
    border-radius: 999px;
    white-space: nowrap;
}
.chats-empty-state {
    display: grid;
    min-height: 320px;
    padding: 48px 24px;
    place-items: center;
    align-content: center;
    color: var(--dt-muted);
    text-align: center;
}
.chats-empty-state__icon {
    display: inline-flex;
    width: 50px;
    height: 50px;
    margin-bottom: 12px;
    align-items: center;
    justify-content: center;
    color: var(--dt-muted);
    background: var(--dt-hover);
    border-radius: 14px;
    font-size: 24px;
}
.chats-empty-state h3 { margin: 0; color: var(--dt-text) !important; font-size: 16px; }
.chats-empty-state p { margin: 5px 0 0; font-size: 12px; }
.chats-load-more { margin: 10px 20px 20px; }

.chats-post.card {
    position: relative;
    margin: 0 !important;
    padding: 8px 22px 9px;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    transition: background-color .12s ease;
}
.chats-post.card,
.chats-post.card > :is(.card-header, .card-body, .card-footer) {
    background-image: none !important;
    box-shadow: none !important;
}
.chats-post.card:hover { background: var(--dt-hover) !important; box-shadow: none !important; }
.chats-post.card.is-grouped { padding-top: 2px; }
.chats-post.is-grouped .chats-post__header { height: 0; min-height: 0; }
.chats-post.is-grouped .chats-post__header > .d-flex > .d-flex.align-items-center { display: none !important; }
.chats-post.is-grouped .chats-post__body { padding-top: 0; }
.chats-post__header {
    padding: 0;
    background: transparent !important;
    background-color: transparent !important;
    border: 0;
}
.chats-post__header > .d-flex { min-height: 36px; }
.chats-post__header .ms-2 {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 6px;
}
.chats-post__header .ms-2 > p { margin: 0 !important; }
.chats-post__header .avatar-2xl { width: 36px; height: 36px; }
.chats-post__header .avatar img { border-radius: 8px !important; }
.chats-post__author { color: var(--dt-text) !important; font-size: 13px; font-weight: 650; }
.chats-post__time { display: inline; margin-left: 5px !important; color: var(--dt-faint); font-size: 10.5px; }
.chats-post__menu-btn {
    position: absolute;
    top: 5px;
    right: 18px;
    width: 30px;
    height: 28px;
    color: var(--dt-muted);
    background: var(--dt-surface) !important;
    border: 0 !important;
    border-radius: 6px;
    opacity: 0;
}
.chats-post:hover .chats-post__menu-btn,
.chats-post__menu-btn:focus-visible { opacity: 1; }
.chats-post .dropdown-menu {
    min-width: 150px;
    padding: 5px !important;
    background: var(--dt-overlay);
    border: 0;
    border-radius: 8px;
    box-shadow: var(--dt-pop-shadow);
}
.chats-post .dropdown-item {
    display: flex;
    min-height: 32px;
    padding: 6px 8px;
    align-items: center;
    color: var(--dt-text);
    border-radius: 6px;
    font-size: 12px;
}
.chats-post .dropdown-item:hover { background: var(--dt-hover); }
.chats-post .dropdown-item .ti { width: 16px; flex: 0 0 16px; font-size: 15px; }
.chats-post__body {
    padding: 2px 38px 0 46px;
    color: var(--dt-text);
    font-size: 13px;
    line-height: 1.48;
    overflow-wrap: anywhere;
}
.chats-post__body > p { margin: 0 0 5px; }
.chats-post__body .row.mx-n1,
.chats-thread-message__media .row.mx-n1 {
    display: flex;
    width: min(100%, 610px);
    max-width: 610px;
    margin: 8px 0 4px !important;
    flex-wrap: wrap;
}
.chats-post__body .row.mx-n1 > [class*="col-"],
.chats-thread-message__media .row.mx-n1 > [class*="col-"] {
    padding: 3px !important;
}
.chats-tile,
.activity-media-link {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    background: var(--dt-app);
    border: 1px solid var(--dt-border);
    border-radius: 10px;
}
.activity-media-img,
.activity-media-video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 360px !important;
    margin: 0 auto;
    object-fit: contain;
    background: var(--dt-app);
}
.activity-video-play {
    position: absolute;
    inset: 50% auto auto 50%;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(12, 10, 9, .20);
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 50%;
    backdrop-filter: blur(5px);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.activity-video-play .ti { font-size: 20px; }
.chats-post__body > a,
.chats-thread-message__media > a {
    display: block;
    width: min(100%, 460px);
    margin: 6px 0;
    text-decoration: none;
}
.chats-post__body > a .btn-plain12px,
.chats-thread-message__media > a .btn-plain12px {
    display: flex;
    width: 100%;
    min-height: 42px;
    padding: 8px 10px 8px 38px !important;
    align-items: center;
    color: var(--dt-text);
    background: var(--dt-app);
    border: 1px solid var(--dt-border);
    border-radius: 8px;
    text-align: left;
}
.chats-post__body > a .btn-plain12px:hover,
.chats-thread-message__media > a .btn-plain12px:hover {
    background: var(--dt-hover);
    border-color: var(--dt-border-strong);
}
.chats-post__footer {
    padding: 2px 38px 0 46px;
    background: transparent !important;
    border: 0;
}
.chats-post__stats { padding: 4px 0 2px; border: 0; font-size: 10.5px; }
.chats-post__actions {
    position: absolute;
    top: 5px;
    right: 52px;
    z-index: 3;
    display: flex;
    min-height: 28px;
    padding: 2px;
    gap: 2px;
    background: var(--dt-surface);
    border: 0;
    border-radius: 7px;
    box-shadow: none;
    opacity: 0;
    transition: opacity .12s ease;
}
.chats-post:hover .chats-post__actions,
.chats-post__actions:focus-within { opacity: 1; }
.chats-post__action-btn { padding: 4px 7px; border: 0; border-radius: 6px; font-size: 11.5px; }
.chats-post__action-btn .ti { font-size: 15px !important; }
.chats-post__action-btn:hover { color: var(--dt-text); background: var(--dt-surface); border-color: var(--dt-border); }
.chats-thread-summary {
    display: inline-flex;
    min-height: 30px;
    margin: 4px 0 2px;
    padding: 4px 8px 4px 5px;
    align-items: center;
    gap: 6px;
    color: var(--dt-cta);
    background: transparent;
    border: 0;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 600;
}
.chats-thread-summary:hover {
    background: color-mix(in srgb, var(--dt-cta) 7%, transparent);
    border-color: color-mix(in srgb, var(--dt-cta) 18%, var(--dt-border));
}
.chats-thread-summary__avatars {
    display: inline-flex;
    width: 24px;
    height: 22px;
    align-items: center;
    justify-content: center;
    color: var(--dt-cta);
    background: color-mix(in srgb, var(--dt-cta) 11%, transparent);
    border-radius: 6px;
}
.chats-thread-summary > .ti-chevron-right { margin-left: 2px; font-size: 12px; opacity: .65; }
.chats-comment__bubble { background: var(--dt-app); border-color: var(--dt-border); border-radius: 8px; font-size: 12px; }
.chats-comment-form { border-top: 0; }

.chats-composer {
    position: relative;
    flex: 0 0 auto;
    margin: 0 18px 14px;
    overflow: visible;
    background: var(--dt-surface);
    border: 0;
    border-radius: 9px;
    box-shadow: none;
}
.chats-composer__form { margin: 0; }
.chats-composer__input {
    min-height: 56px;
    max-height: 150px;
    padding: 11px 13px 7px;
    overflow-y: auto;
    color: var(--dt-text);
    font-size: 13px;
    line-height: 1.45;
}
.chats-composer__input:focus { box-shadow: inset 0 0 0 1px var(--dt-focus); border-radius: 8px 8px 0 0; }
.chats-composer__toolbar {
    min-height: 38px;
    padding: 4px 6px 5px;
    border-top: 0;
}
.chats-composer__tools { display: flex; align-items: center; gap: 2px; }
.chats-toolbar-btn {
    width: 30px;
    height: 28px;
    padding: 0;
    justify-content: center;
    color: var(--dt-muted);
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: 15px;
}
.chats-toolbar-btn:hover { color: var(--dt-text); background: var(--dt-hover); border-color: transparent; }
.chats-composer__hint { color: var(--dt-faint); font-size: 10.5px; }
.chats-send-btn {
    display: inline-flex;
    min-height: 29px;
    padding: 5px 10px;
    align-items: center;
    gap: 5px;
    color: var(--dt-cta-fg);
    background: var(--dt-cta);
    border: 0;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 650;
}
.chats-send-btn:hover { background: var(--dt-cta-hover); }
.chats-composer__context { padding: 0 10px 7px; color: var(--dt-faint); font-size: 10px; }
.chats-composer__context strong { color: var(--dt-muted); font-weight: 550; }
.chats-tag-members {
    position: absolute;
    right: 8px;
    bottom: calc(100% + 7px);
    z-index: 20;
    width: min(300px, calc(100vw - 40px));
    max-height: 280px;
    padding: 8px;
    overflow-y: auto;
    background: var(--dt-overlay);
    border: 1px solid var(--dt-border-strong);
    border-radius: 9px;
    box-shadow: var(--dt-pop-shadow);
}
.chats-tag-members__header { display: flex; padding: 3px 4px 7px; align-items: center; justify-content: space-between; }
.chats-tag-members__header button { color: var(--dt-muted); background: transparent; border: 0; }
.chats-tag-members .btn-plain12px { display: flex; width: 100%; padding: 6px 8px; align-items: center; border-radius: 6px; }
.chats-tag-members .btn-plain12px:hover { background: var(--dt-hover); }
.chats-tag-members .btn-plain12px img { width: 26px; height: 26px; flex: 0 0 26px; margin-right: 9px; border-radius: 7px; object-fit: cover; }
.chats-tag-members .btn-plain12px span { overflow: hidden; color: var(--dt-text); text-overflow: ellipsis; white-space: nowrap; }
.tagmiembro { color: var(--dt-cta); background: color-mix(in srgb, var(--dt-cta) 10%, transparent); border-radius: 3px; }

[data-bs-theme="light"] .chats-rail { background: #4a154b; }
[data-bs-theme="dark"] .chats-rail { background: #2f0b30; }
[data-bs-theme="dark"] .chats-post.card:hover { background: rgba(255,255,255,.035) !important; }
[data-bs-theme="dark"] .chats-post__actions,
[data-bs-theme="dark"] .chats-post__menu-btn { box-shadow: none; }

@media (max-width: 900px) {
    .chats-workspace { grid-template-columns: minmax(0, 1fr) 220px; }
    .chats-workspace.is-thread-open { grid-template-columns: minmax(0, 1fr) 330px; }
    .chats-composer__hint { display: none; }
}
@media (max-width: 700px) {
    #akicontenidonormal[data-module="chats"] { overflow: auto; }
    .chats-workspace {
        grid-template-columns: 1fr;
        grid-template-rows: 190px minmax(520px, 1fr);
        grid-template-areas:
            "rail"
            "main";
        height: auto;
        min-height: 100%;
        overflow: visible;
    }
    .chats-workspace.is-thread-open {
        position: relative;
        display: block;
        min-height: 100%;
    }
    .chats-workspace.is-thread-open .chats-main { min-height: 100%; }
    .chats-workspace.is-thread-open .chats-rail {
        position: absolute;
        inset: 0;
        z-index: 40;
        min-height: 100%;
        border: 0;
    }
    .chats-rail { border-left: 0; border-bottom: 1px solid rgba(0,0,0,.18); }
    .chats-rail__header { min-height: 52px; }
    .chats-main { min-height: 520px; }
    .chats-channel-header { padding-left: 12px; }
    .chats-message-stream { padding-top: 10px; }
    .chats-post.card { padding-right: 12px; padding-left: 12px; }
    .chats-post__body, .chats-post__footer { padding-right: 0; }
    .chats-composer { margin: 0 8px 8px; }
}

}
}
/* end dui-template-style modules/chats:0 */
/* dui-template-style {"key":"modules/chats:1","bytes":61872,"sha256":"deb302569573e66f0a25ee99ce1e2a7e2acd5035002c871c9cfcdea6b70420ff","media":null,"source_sha256":"b413fac02d20d86dccda4e80b89c309cc510e72fe18c94e7ab2ce48953134a68"} */
@scope (:root:has(template[data-dui-legacy-style="modules/chats:1"])) {

/* =========================================================
   Datalyse Chats — 2026 redesign
   This is the only active stylesheet for the module.
   ========================================================= */
#chatsWorkspace {
    --chat-app: var(--dt-app, #f5f7fa);
    --chat-surface: var(--dt-surface, #ffffff);
    --chat-surface-raised: var(--dt-overlay, #ffffff);
    --chat-rail: var(--dt-surface, #ffffff);
    --chat-rail-hover: var(--dt-hover, #f4f4f3);
    --chat-text: var(--dt-text, #17191c);
    --chat-muted: var(--dt-muted, #626a75);
    --chat-faint: var(--dt-faint, #8a929e);
    --chat-border: var(--dt-border, #e2e6eb);
    --chat-border-strong: var(--dt-border-strong, #cdd3db);
    --chat-hover: var(--dt-hover, #f2f4f7);
    --chat-accent: var(--dt-cta, #1769e0);
    --chat-accent-hover: var(--dt-cta-hover, #0f5ac6);
    --chat-accent-fg: var(--dt-cta-fg, #ffffff);
    --chat-accent-soft: var(--dt-active, #efefee);
    --chat-danger: var(--dt-danger, #d92d20);
    --chat-focus: var(--dt-focus-ring, rgba(15, 15, 15, .12));
    --chat-shadow-sm: none;
    --chat-shadow-md: none;
    --chat-radius-sm: 7px;
    --chat-radius: 11px;
    --chat-radius-lg: 15px;
    color: var(--chat-text);
}

#akicontenidonormal[data-module="chats"] {
    height: calc(100vh - var(--dt-topbar-h, 44px));
    height: calc(100dvh - var(--dt-topbar-h, 44px));
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
    background: var(--chat-app);
}

.chats-workspace {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) clamp(218px, 17vw, 248px);
    grid-template-areas: "main rail";
    overflow: hidden;
    background: var(--chat-surface);
    border-top: 1px solid var(--chat-border);
}

/* Shared controls */
.chats-icon-btn,
.chats-mobile-rail-button,
.chats-thread-back,
.chats-thread-close,
.chats-thread-tool,
.chats-thread-send,
.chats-toolbar-btn,
.chats-send-btn,
.chats-thread-load,
.chats-thread-reply__delete {
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.chats-icon-btn {
    display: inline-flex;
    width: 34px;
    height: 34px;
    padding: 0;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    color: var(--chat-muted);
    background: transparent;
    border: 0;
    border-radius: 9px;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.chats-icon-btn:hover {
    color: var(--chat-text);
    background: var(--chat-hover);
    border-color: var(--chat-border);
}

.chats-icon-btn:active,
.chats-mobile-rail-button:active,
.chats-toolbar-btn:active,
.chats-send-btn:active {
    transform: translateY(1px);
}

.chats-icon-btn:focus-visible,
.chats-mobile-rail-button:focus-visible,
.chats-thread-back:focus-visible,
.chats-thread-close:focus-visible,
.chats-toolbar-btn:focus-visible,
.chats-send-btn:focus-visible,
.chats-thread-tool:focus-visible,
.chats-thread-send:focus-visible {
    outline: 3px solid var(--chat-focus);
    outline-offset: 1px;
}

.chats-icon-btn--primary {
    color: var(--chat-accent-fg);
    background: var(--chat-accent);
    border-color: var(--chat-accent);
    box-shadow: none;
}

.chats-icon-btn--primary:hover {
    color: var(--chat-accent-fg);
    background: var(--chat-accent-hover);
    border-color: var(--chat-accent-hover);
}

.chats-icon-btn--danger:hover {
    color: var(--chat-danger);
    background: color-mix(in srgb, var(--chat-danger) 8%, transparent);
    border-color: color-mix(in srgb, var(--chat-danger) 18%, transparent);
}

/* Channel rail */
.chats-rail {
    grid-area: rail;
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    color: var(--chat-text);
    background: var(--chat-rail);
    border-left: 1px solid var(--chat-border);
}

.chats-rail-view,
.chats-thread-view {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.chats-rail-view {
    display: flex;
    flex-direction: column;
}

.chats-rail__header {
    display: flex;
    min-height: 72px;
    padding: 13px 14px 12px 16px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: color-mix(in srgb, var(--chat-rail) 92%, var(--chat-surface));
    border-bottom: 1px solid var(--chat-border);
}

.chats-rail__title,
.chats-rail__actions {
    display: flex;
    min-width: 0;
    align-items: center;
}

.chats-rail__title {
    gap: 10px;
}

.chats-rail__actions {
    gap: 5px;
}

.chats-rail__mark {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    color: var(--chat-accent);
    background: var(--chat-accent-soft);
    border: 0;
    border-radius: 10px;
    font-size: 18px;
}

.chats-rail__eyebrow {
    display: block;
    margin-bottom: 1px;
    color: var(--chat-faint);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1.15;
    text-transform: uppercase;
}

.chats-rail__header h2 {
    overflow: hidden;
    margin: 0;
    color: var(--chat-text) !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chats-rail__mobile-close {
    display: none;
}

.chats-channel-search {
    display: flex;
    min-height: 34px;
    margin: 10px 10px 7px;
    padding: 0 10px;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    color: var(--chat-faint);
    background: var(--chat-rail-hover);
    border: 0;
    border-radius: 6px;
    box-shadow: none;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.chats-channel-search:hover:not(:focus-within) {
    color: var(--chat-muted);
    background: color-mix(in srgb, var(--chat-rail-hover) 70%, var(--chat-surface));
}

.chats-channel-search:focus-within {
    color: var(--chat-accent);
    background: var(--chat-surface);
    box-shadow: inset 0 0 0 1px var(--chat-accent), 0 0 0 2px var(--chat-focus);
}

.chats-channel-search > i {
    flex: 0 0 auto;
    font-size: 15px;
}

.chats-channel-search input[type="search"],
.chats-channel-search input[type="search"]:hover,
.chats-channel-search input[type="search"]:focus,
.chats-channel-search input[type="search"]:focus-visible,
.chats-channel-search input[type="search"]:active,
#chatsChannelSearch,
#chatsChannelSearch:hover,
#chatsChannelSearch:focus,
#chatsChannelSearch:focus-visible,
#chatsChannelSearch:active {
    -webkit-appearance: none !important;
    appearance: none !important;
    min-width: 0;
    width: 100%;
    height: 34px;
    padding: 0 !important;
    color: var(--chat-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-width: 0 !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    font: inherit;
    font-size: 12px;
}

.chats-channel-search input[type="search"]::placeholder {
    color: var(--chat-faint);
    opacity: 1;
}

.chats-channel-search__shortcut {
    display: none;
}

.chats-rail__section-label {
    display: flex;
    min-height: 32px;
    padding: 5px 14px 5px 17px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--chat-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.chats-rail__section-label > span:first-child {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
}

.chats-rail__section-label i {
    font-size: 12px;
}

.chats-rail__count {
    display: inline-flex;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    align-items: center;
    justify-content: center;
    color: var(--chat-faint);
    background: color-mix(in srgb, var(--chat-text) 5%, transparent);
    border-radius: 999px;
    font-size: 9.5px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.chats-channels-card__body {
    min-height: 0;
    max-height: none;
    padding: 2px 9px 16px;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--chat-border-strong) transparent;
}

.chats-channel-item {
    display: block;
    padding: 1px 0;
}

.chats-channel-item__link {
    position: relative;
    display: flex;
    min-height: 36px;
    padding: 7px 9px 7px 10px;
    align-items: center;
    gap: 9px;
    color: var(--chat-muted) !important;
    border: 0;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 520;
    line-height: 1.3;
    text-decoration: none !important;
    transition: color .12s ease, background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.chats-channel-item__link:hover {
    color: var(--chat-text) !important;
    background: var(--chat-rail-hover);
}

.chats-channel-item__link.is-active,
.chats-channel-item__link[aria-current="page"] {
    color: var(--chat-text) !important;
    background: var(--chat-surface);
    border-color: var(--chat-border);
    box-shadow: var(--chat-shadow-sm);
    font-weight: 650;
}

.chats-channel-item__link.is-active::before,
.chats-channel-item__link[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: -1px;
    width: 3px;
    background: var(--chat-accent);
    border-radius: 0 4px 4px 0;
}

.chats-channel-item__icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    color: var(--chat-faint);
    background: color-mix(in srgb, var(--chat-text) 4%, transparent);
    border-radius: 6px;
    font-size: 13px;
}

.chats-channel-item__link.is-active .chats-channel-item__icon {
    color: var(--chat-accent);
    background: var(--chat-accent-soft);
}

.chats-channel-item__label {
    min-width: 0;
    overflow: hidden;
    flex: 1 1 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chats-channel-item__public {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    color: var(--chat-faint);
    font-size: 12px;
}

.chats-channel-empty {
    margin: 10px 5px;
    padding: 24px 12px;
    color: var(--chat-faint);
    background: color-mix(in srgb, var(--chat-surface) 70%, transparent);
    border: 1px dashed var(--chat-border-strong);
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

.chats-rail__loading {
    display: flex;
    padding: 20px;
    justify-content: center;
    gap: 5px;
}

.chats-rail__loading span {
    width: 5px;
    height: 5px;
    background: var(--chat-faint);
    border-radius: 50%;
    animation: dui-legacy-modules-chats-chatsPulse .9s ease-in-out infinite alternate;
}

.chats-rail__loading span:nth-child(2) { animation-delay: .14s; }
.chats-rail__loading span:nth-child(3) { animation-delay: .28s; }

@keyframes dui-legacy-modules-chats-chatsPulse {
    to { opacity: .25; transform: translateY(-2px); }
}

.chats-rail-backdrop {
    display: none;
}

/* Main conversation */
.chats-main {
    grid-area: main;
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    background: var(--chat-surface);
}

.chats-channel-header {
    position: relative;
    z-index: 8;
    display: flex;
    min-height: 72px;
    padding: 10px 17px 10px 22px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: color-mix(in srgb, var(--chat-surface) 94%, transparent);
    border-bottom: 1px solid var(--chat-border);
    backdrop-filter: blur(12px);
}

.chats-channel-header__identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}

.chats-mobile-rail-button {
    display: none;
    width: 36px;
    height: 36px;
    padding: 0;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    color: var(--chat-muted);
    background: transparent;
    border: 0;
    border-radius: 9px;
}

.chats-channel-header__hash {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    color: var(--chat-accent);
    background: var(--chat-accent-soft);
    border: 0;
    border-radius: var(--chat-radius);
    font-size: 19px;
}

.chats-channel-header__copy {
    min-width: 0;
}

.chats-channel-header__titleline {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

.chats-channel-header h1 {
    overflow: hidden;
    margin: 0;
    color: var(--chat-text) !important;
    font-size: 15px;
    font-weight: 720;
    letter-spacing: -.018em;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chats-channel-header p {
    overflow: hidden;
    max-width: min(58vw, 680px);
    margin: 3px 0 0;
    color: var(--chat-faint);
    font-size: 10.5px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chats-visibility-badge {
    display: inline-flex;
    min-height: 20px;
    padding: 2px 7px;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    color: var(--chat-muted);
    background: var(--chat-app);
    border: 1px solid var(--chat-border);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.chats-visibility-badge i {
    font-size: 10px;
}

.chats-channel-header__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
}

.chats-member-count {
    display: inline-flex;
    min-height: 30px;
    padding: 4px 9px 4px 6px;
    align-items: center;
    gap: 7px;
    color: var(--chat-muted);
    background: var(--chat-app);
    border: 0;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 650;
    white-space: nowrap;
}

.chats-member-stack {
    display: inline-flex;
    min-width: 22px;
    align-items: center;
    padding-left: 5px;
}

.chats-member-count__text {
    color: var(--chat-muted);
}

.chats-agent-avatar {
    --chats-agent-color: #6b7280;
    position: relative;
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    background: var(--chats-agent-color);
    border: 0;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.chats-agent-avatar > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    object-fit: cover;
    background: transparent;
}

.chats-agent-avatar--header {
    width: 22px;
    height: 22px;
    margin-left: -5px;
    flex-basis: 22px;
    border: 2px solid var(--chat-surface);
    font-size: 7.5px;
    box-shadow: 0 0 0 1px var(--chat-border);
}

.chats-agent-avatar--all {
    color: var(--chat-accent);
    background: var(--chat-accent-soft);
    border: 1px solid color-mix(in srgb, var(--chat-accent) 18%, var(--chat-border));
    font-size: 16px;
}

.chats-agent-avatar--message {
    display: inline-flex !important;
    border: 0;
    box-shadow: none;
}

.chats-agent-avatar--brand > img {
    padding: 5px !important;
    object-fit: contain;
    background: var(--chat-surface);
}

.chats-channel-header__divider {
    width: 1px;
    height: 22px;
    margin: 0 3px;
    background: var(--chat-border);
}

.chats-feed-scroll {
    position: relative;
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--chat-border-strong) transparent;
    background:
        var(--chat-surface);
}

.chats-message-stream {
    display: flex;
    width: 100%;
    max-width: none;
    min-height: 100%;
    margin: 0;
    padding: 22px 0 28px;
    flex-direction: column;
    justify-content: flex-end;
}

.chats-date-divider {
    display: flex;
    margin: 17px 24px 14px;
    align-items: center;
    gap: 12px;
    color: var(--chat-faint);
    font-size: 9.5px;
    font-weight: 650;
}

.chats-date-divider::before,
.chats-date-divider::after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    background: var(--chat-border);
}

.chats-date-divider span {
    padding: 4px 9px;
    background: var(--chat-surface);
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    white-space: nowrap;
}

.chats-channel-intro {
    display: flex;
    width: min(760px, calc(100% - 40px));
    margin: 8px 20px 20px;
    padding: 17px 18px;
    align-items: flex-start;
    gap: 13px;
    color: var(--chat-text);
    background: color-mix(in srgb, var(--chat-app) 74%, var(--chat-surface));
    border: 0;
    border-radius: 12px;
}

.chats-channel-intro__icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    color: var(--chat-accent);
    background: var(--chat-accent-soft);
    border: 0;
    border-radius: var(--chat-radius);
    font-size: 20px;
}

.chats-channel-intro__copy {
    min-width: 0;
}

.chats-channel-intro__eyebrow {
    display: block;
    margin-bottom: 2px;
    color: var(--chat-faint);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.chats-channel-intro h2 {
    margin: 0;
    color: var(--chat-text) !important;
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -.02em;
}

.chats-channel-intro p {
    max-width: 620px;
    margin: 4px 0 8px;
    color: var(--chat-muted);
    font-size: 11px;
    line-height: 1.45;
}

.chats-channel-intro__start {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--chat-faint);
    font-size: 9.5px;
}

.chats-channel-intro__start i {
    color: var(--chat-accent);
    font-size: 12px;
}

.chats-empty-state {
    display: grid;
    min-height: 340px;
    padding: 54px 24px;
    place-items: center;
    align-content: center;
    color: var(--chat-muted);
    text-align: center;
}

.chats-empty-state__icon {
    display: inline-flex;
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
    align-items: center;
    justify-content: center;
    color: var(--chat-accent);
    background: var(--chat-accent-soft);
    border: 0;
    border-radius: 16px;
    font-size: 24px;
}

.chats-empty-state h3 {
    margin: 0;
    color: var(--chat-text) !important;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.chats-empty-state p {
    max-width: 340px;
    margin: 6px 0 0;
    color: var(--chat-faint);
    font-size: 11px;
    line-height: 1.5;
}

.chats-load-more {
    order: -1;
    margin: 4px 20px 16px;
}

.chats-load-more .btn {
    min-height: 31px;
    padding: 5px 10px;
    color: var(--chat-muted);
    background: var(--chat-surface);
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    font-size: 10.5px;
}

.chats-load-more .btn:hover {
    color: var(--chat-text);
    background: var(--chat-hover);
    border-color: var(--chat-border-strong);
}

/* Messages */
.avatar {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
}

.avatar-2xl {
    width: 38px;
    height: 38px;
}

.avatar img,
.avatar .avatar-name {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.siesdatalyse {
    padding: 5px;
    object-fit: contain !important;
    background: var(--chat-surface);
}

.chats-post.card {
    position: relative;
    margin: 0 !important;
    padding: 9px 24px 9px 78px;
    overflow: visible;
    color: var(--chat-text);
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    transition: background-color .12s ease;
}

.chats-post.card,
.chats-post.card > :is(.card-header, .card-body, .card-footer) {
    background-image: none !important;
    box-shadow: none !important;
}

.chats-post.card:hover {
    background: var(--chat-hover) !important;
}

.chats-post__header {
    position: relative;
    min-height: 21px;
    padding: 0;
    background: transparent !important;
    border: 0;
}

.chats-post__header > .d-flex {
    min-height: 21px;
}

.chats-post__header > .d-flex > .d-flex.align-items-center {
    min-width: 0;
}

.chats-post__header .avatar-2xl {
    position: absolute;
    top: 1px;
    left: -54px;
    width: 38px;
    height: 38px;
}

.chats-post__header .avatar img {
    border: 0;
    border-radius: 50% !important;
}

.chats-post__header .ms-2 {
    display: flex;
    min-width: 0;
    margin-left: 0 !important;
    align-items: baseline;
    gap: 6px;
}

.chats-post__header .ms-2 > p {
    margin: 0 !important;
}

.chats-post__author {
    overflow: hidden;
    color: var(--chat-text) !important;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -.005em;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chats-post__author:hover {
    color: var(--chat-accent) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.chats-post__time {
    display: inline;
    flex: 0 0 auto;
    margin-left: 0 !important;
    color: var(--chat-faint);
    font-size: 9.5px;
    line-height: 1.3;
}

.chats-post__menu-btn {
    position: absolute;
    top: -4px;
    right: -7px;
    display: inline-flex;
    width: 29px;
    height: 28px;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    color: var(--chat-muted);
    background: var(--chat-surface) !important;
    border: 0 !important;
    border-radius: var(--chat-radius-sm);
    box-shadow: none;
    opacity: 0;
    transition: opacity .12s ease, color .12s ease, background-color .12s ease;
}

.chats-post:hover .chats-post__menu-btn,
.chats-post__menu-btn:focus-visible,
.chats-post__menu-btn[aria-expanded="true"] {
    opacity: 1;
}

.chats-post__menu-btn:hover {
    color: var(--chat-text);
    background: var(--chat-hover) !important;
}

.chats-post .dropdown-menu {
    z-index: 40;
    min-width: 158px;
    max-height: min(240px, calc(100vh - 90px));
    padding: 5px !important;
    overflow-y: auto;
    color: var(--chat-text);
    background: var(--chat-surface-raised);
    border: 0;
    border-radius: 10px;
    box-shadow: var(--dt-pop-shadow);
}

.chats-post__menu.dropup .dropdown-menu {
    position: absolute !important;
    inset: auto 0 calc(100% + 6px) auto !important;
    margin: 0 !important;
    transform: none !important;
}

.chats-post .dropdown-item {
    display: flex;
    min-height: 32px;
    padding: 6px 8px;
    align-items: center;
    color: var(--chat-text);
    border-radius: var(--chat-radius-sm);
    font-size: 11px;
}

.chats-post .dropdown-item:hover {
    background: var(--chat-hover);
}

.chats-post .dropdown-item .ti {
    width: 17px;
    flex: 0 0 17px;
    font-size: 14px;
}

.chats-post__body {
    padding: 2px 42px 0 0;
    color: var(--chat-text);
    font-size: 12.5px;
    line-height: 1.52;
    overflow-wrap: anywhere;
}

.chats-post__body > p {
    margin: 0 0 5px;
}

.chats-post__body a:not(.activity-media-link) {
    color: var(--chat-accent);
}

.chats-post__footer {
    padding: 2px 42px 0 0;
    background: transparent !important;
    border: 0;
}

.chats-post__actions {
    position: absolute;
    top: -5px;
    right: 29px;
    z-index: 3;
    display: flex;
    min-height: 28px;
    padding: 2px;
    align-items: center;
    gap: 1px;
    background: var(--chat-surface);
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .12s ease, transform .12s ease;
}

.chats-post:hover .chats-post__actions,
.chats-post__actions:focus-within {
    opacity: 1;
    transform: translateY(0);
}

.chats-post__action-btn {
    display: inline-flex;
    min-height: 24px;
    padding: 3px 6px;
    align-items: center;
    gap: 3px;
    color: var(--chat-muted);
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}

.chats-post__action-btn:hover {
    color: var(--chat-text);
    background: var(--chat-hover);
}

.chats-post__action-btn--danger:hover {
    color: var(--chat-danger);
    background: color-mix(in srgb, var(--chat-danger) 9%, transparent);
}

.chats-post__action-btn .ti {
    font-size: 14px !important;
}

.chats-liked {
    color: var(--chat-accent) !important;
}

.chats-post.card.is-grouped {
    padding-top: 3px;
    padding-bottom: 4px;
}

.chats-post.is-grouped .chats-post__header {
    height: 0;
    min-height: 0;
}

.chats-post.is-grouped .chats-post__header > .d-flex {
    min-height: 0;
}

.chats-post.is-grouped .chats-post__header > .d-flex > .d-flex.align-items-center {
    display: none !important;
}

.chats-post.is-grouped .chats-post__body {
    padding-top: 0;
}

/* El feed usa filas de conversación, nunca tarjetas Bootstrap. La
   especificidad alta evita que los estilos globales de .card-header creen
   franjas oscuras detrás del nombre del agente. */
#chatsWorkspace .chats-post.card {
    margin: 1px 10px !important;
    padding: 8px 14px 8px 64px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

#chatsWorkspace .chats-post.card:hover {
    background: var(--chat-hover) !important;
}

#chatsWorkspace .chats-post.card > .chats-post__header,
#chatsWorkspace .chats-post.card > .chats-post__body,
#chatsWorkspace .chats-post.card > .chats-post__footer,
#chatsWorkspace .chats-post__header > .d-flex {
    color: var(--chat-text) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

#chatsWorkspace .chats-post__header {
    min-height: 19px;
    padding: 0 !important;
}

#chatsWorkspace .chats-post__header > .d-flex {
    min-height: 19px;
}

#chatsWorkspace .chats-post__header .avatar-2xl {
    top: 0;
    left: -47px;
    width: 35px;
    height: 35px;
}

#chatsWorkspace .chats-post__header .avatar img {
    border-radius: 50% !important;
}

#chatsWorkspace .chats-post__author {
    font-size: 12px;
    line-height: 1.35;
}

#chatsWorkspace .chats-post__time {
    font-size: 9px;
}

#chatsWorkspace .chats-post__body {
    max-width: 960px;
    padding: 3px 46px 0 0 !important;
    font-size: 12.5px;
    line-height: 1.5;
}

#chatsWorkspace .chats-post__footer {
    padding: 2px 46px 0 0 !important;
}

#chatsWorkspace .chats-post.card.is-grouped {
    margin-top: 0 !important;
    padding-top: 3px !important;
    padding-bottom: 4px !important;
}

.chats-thread-summary {
    display: inline-flex;
    min-height: 30px;
    margin: 5px 0 1px;
    padding: 4px 8px 4px 5px;
    align-items: center;
    gap: 6px;
    color: var(--chat-accent);
    background: var(--chat-accent-soft);
    border: 0;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 650;
    transition: background-color .12s ease, border-color .12s ease;
}

.chats-thread-summary:hover {
    background: color-mix(in srgb, var(--chat-accent) 14%, transparent);
    border-color: color-mix(in srgb, var(--chat-accent) 24%, transparent);
}

.chats-thread-summary__avatars {
    display: inline-flex;
    width: 22px;
    height: 20px;
    align-items: center;
    justify-content: center;
    color: var(--chat-accent);
    background: color-mix(in srgb, var(--chat-accent) 12%, var(--chat-surface));
    border-radius: 6px;
    font-size: 12px;
}

.chats-thread-summary > .ti-chevron-right {
    margin-left: 1px;
    font-size: 11px;
    opacity: .65;
}

/* Message attachments */
.chats-post__body .row.mx-n1,
.chats-thread-message__media .row.mx-n1 {
    display: flex;
    width: min(100%, 590px);
    max-width: 590px;
    margin: 8px 0 4px !important;
    flex-wrap: wrap;
}

.chats-post__body .row.mx-n1 > [class*="col-"],
.chats-thread-message__media .row.mx-n1 > [class*="col-"] {
    padding: 3px !important;
}

.chats-tile,
.activity-media-link {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    background:
        var(--chat-app);
    border: 1px solid var(--chat-border);
    border-radius: 12px;
    box-shadow: var(--chat-shadow-sm);
}

.activity-media-img,
.activity-media-video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 370px !important;
    margin: 0 auto;
    object-fit: contain;
    background: var(--chat-app);
}

.chats-post__body .col-6 .activity-media-img,
.chats-post__body .col-6 .activity-media-video,
.chats-thread-message__media .col-6 .activity-media-img,
.chats-thread-message__media .col-6 .activity-media-video {
    height: 210px;
    object-fit: cover;
}

.chats-post__body .col-4 .activity-media-img,
.chats-post__body .col-4 .activity-media-video,
.chats-thread-message__media .col-4 .activity-media-img,
.chats-thread-message__media .col-4 .activity-media-video {
    height: 160px;
    object-fit: cover;
}

.activity-video-play {
    position: absolute;
    inset: 50% auto auto 50%;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(18, 22, 29, .72);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    backdrop-filter: blur(6px);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.activity-video-play .ti {
    margin-left: 2px;
    font-size: 19px;
}

.chats-post__body > a,
.chats-thread-message__media > a {
    display: block;
    width: min(100%, 470px);
    margin: 7px 0;
    text-decoration: none;
}

.chats-post__body > a .btn-plain12px,
.chats-thread-message__media > a .btn-plain12px {
    display: flex;
    width: 100%;
    min-height: 48px;
    padding: 8px 11px !important;
    align-items: center;
    gap: 10px;
    color: var(--chat-text);
    background: var(--chat-app);
    border: 1px solid var(--chat-border);
    border-radius: 10px;
    box-shadow: var(--chat-shadow-sm);
    text-align: left;
    transition: background-color .12s ease, border-color .12s ease;
}

.chats-post__body > a .btn-plain12px:hover,
.chats-thread-message__media > a .btn-plain12px:hover {
    background: var(--chat-hover);
    border-color: var(--chat-border-strong);
}

.driveimagextensionCHATS {
    position: static;
    display: block;
    width: 28px;
    height: 28px;
    margin: 0;
    flex: 0 0 28px;
    object-fit: contain;
}

.btn-plain12px b {
    overflow: hidden;
    min-width: 0;
    flex: 1 1 auto;
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-plain12px small {
    flex: 0 0 auto;
    color: var(--chat-faint);
}

/* Composer */
.chats-composer {
    position: relative;
    width: auto;
    margin: 0 16px 14px;
    flex: 0 0 auto;
    overflow: visible;
    background: var(--chat-surface-raised);
    border: 0;
    border-radius: 13px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.chats-composer:focus-within {
    border-color: color-mix(in srgb, var(--chat-accent) 52%, var(--chat-border));
    box-shadow: 0 0 0 3px var(--chat-focus);
}

.chats-composer__form {
    margin: 0;
}

.chats-composer__input {
    min-height: 64px;
    max-height: 160px;
    padding: 12px 14px 8px;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--chat-text);
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 12.5px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.chats-composer__input:empty::before,
.chats-thread-input:empty::before {
    content: attr(data-placeholder);
    color: var(--chat-faint);
    pointer-events: none;
}

.chats-composer__toolbar {
    display: flex;
    min-height: 42px;
    padding: 5px 6px 6px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid color-mix(in srgb, var(--chat-border) 70%, transparent);
}

.chats-composer__tools {
    display: flex;
    align-items: center;
    gap: 2px;
}

.chats-toolbar-btn {
    display: inline-flex;
    width: 31px;
    height: 30px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--chat-muted);
    background: transparent;
    border: 0;
    border-radius: var(--chat-radius-sm);
    font-size: 15px;
    transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}

.chats-toolbar-btn:hover {
    color: var(--chat-text);
    background: var(--chat-hover);
    border-color: var(--chat-border);
}

.chats-composer__hint {
    overflow: hidden;
    flex: 1 1 auto;
    color: var(--chat-faint);
    font-size: 9px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chats-composer__hint kbd {
    padding: 1px 4px;
    color: var(--chat-muted);
    background: var(--chat-app);
    border: 0;
    border-radius: 4px;
    box-shadow: none;
    font: inherit;
    font-size: 8.5px;
}

.chats-send-btn {
    display: inline-flex;
    min-height: 31px;
    padding: 5px 11px;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    color: var(--chat-accent-fg);
    background: var(--chat-accent);
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    font-size: 10.5px;
    font-weight: 700;
    transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
}

.chats-send-btn:hover {
    color: var(--chat-accent-fg);
    background: var(--chat-accent-hover);
    border-color: var(--chat-accent-hover);
}

.chats-composer__context {
    padding: 0 12px 8px;
    color: var(--chat-faint);
    font-size: 9px;
}

.chats-composer__context strong {
    color: var(--chat-muted);
    font-weight: 650;
}

.chats-tag-members {
    position: absolute;
    right: 8px;
    bottom: calc(100% + 8px);
    z-index: 30;
    width: min(350px, calc(100vw - 40px));
    max-height: 340px;
    padding: 7px;
    overflow-y: auto;
    color: var(--chat-text);
    background: var(--chat-surface-raised);
    border: 1px solid var(--chat-border-strong);
    border-radius: var(--chat-radius);
    box-shadow: var(--chat-shadow-md);
}

.chats-tag-members__header {
    display: flex;
    min-height: 38px;
    padding: 4px 5px 7px 7px;
    align-items: center;
    justify-content: space-between;
    color: var(--chat-text);
    font-size: 11px;
}

.chats-tag-members__header button {
    display: inline-flex;
    width: 27px;
    height: 27px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--chat-muted);
    background: transparent;
    border: 0;
    border-radius: 6px;
}

.chats-tag-members__header button:hover {
    color: var(--chat-text);
    background: var(--chat-hover);
}

#akiponagentescanal2 {
    display: grid;
    gap: 2px;
}

.chats-tag-members .btn-plain12px {
    display: flex;
    width: 100%;
    min-height: 46px;
    padding: 6px 8px;
    align-items: center;
    gap: 10px;
    color: var(--chat-text);
    background: transparent;
    border: 0;
    border-radius: var(--chat-radius-sm);
    font-size: 11px;
    text-align: left;
}

.chats-tag-members .btn-plain12px:hover {
    background: var(--chat-hover);
}

.chats-agent-option__copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
}

.chats-agent-option__name {
    overflow: hidden;
    color: var(--chat-text);
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chats-agent-option__meta {
    overflow: hidden;
    color: var(--chat-faint);
    font-size: 9.5px;
    font-weight: 450;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tagmiembro {
    display: inline-block;
    padding: 0 3px;
    color: var(--chat-accent);
    background: var(--chat-accent-soft);
    border-radius: 4px;
    font-weight: 650;
}

#formfilesaaaCHAT,
#iframupCHAT {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Thread panel */
.chats-workspace.is-thread-open {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 380px);
}

.chats-thread-view {
    display: flex;
    flex-direction: column;
    color: var(--chat-text);
    background: var(--chat-surface);
}

.chats-thread-header {
    display: grid;
    min-height: 72px;
    padding: 9px 10px;
    flex: 0 0 auto;
    grid-template-columns: 35px minmax(0, 1fr) 35px;
    align-items: center;
    gap: 8px;
    background: color-mix(in srgb, var(--chat-surface) 94%, transparent);
    border-bottom: 1px solid var(--chat-border);
}

.chats-thread-header > div {
    min-width: 0;
}

.chats-thread-header__eyebrow {
    display: block;
    margin: 0 0 1px !important;
    color: var(--chat-faint) !important;
    font-size: 8.5px !important;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.chats-thread-header h2 {
    margin: 0;
    color: var(--chat-text) !important;
    font-size: 14px;
    font-weight: 720;
    letter-spacing: -.012em;
}

.chats-thread-header #chatsThreadChannelName {
    display: block;
    overflow: hidden;
    margin-top: 1px;
    color: var(--chat-faint);
    font-size: 9.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chats-thread-back,
.chats-thread-close {
    display: inline-flex;
    width: 34px;
    height: 34px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--chat-muted);
    background: transparent;
    border: 0;
    border-radius: 8px;
}

.chats-thread-back:hover,
.chats-thread-close:hover {
    color: var(--chat-text);
    background: var(--chat-hover);
    border-color: var(--chat-border);
}

.chats-thread-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--chat-border-strong) transparent;
}

.chats-thread-parent {
    padding: 18px 16px 15px;
    background: color-mix(in srgb, var(--chat-app) 48%, var(--chat-surface));
    border-bottom: 1px solid var(--chat-border);
}

.chats-thread-message {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
}

.chats-thread-message__avatar {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
}

.chats-thread-message__meta {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 6px;
}

.chats-thread-message__author {
    overflow: hidden;
    color: var(--chat-text) !important;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chats-thread-message__time {
    flex: 0 0 auto;
    color: var(--chat-faint);
    font-size: 9px;
}

.chats-thread-message__body {
    margin-top: 3px;
    color: var(--chat-text);
    font-size: 11.5px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.chats-thread-message__media {
    margin-top: 8px;
}

.chats-thread-divider {
    display: flex;
    padding: 13px 16px 7px;
    align-items: center;
    gap: 9px;
    color: var(--chat-faint);
    font-size: 9.5px;
    font-weight: 650;
}

.chats-thread-divider::after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    background: var(--chat-border);
}

.chats-thread-load {
    display: inline-flex;
    align-self: center;
    min-height: 30px;
    margin: 2px auto 8px;
    padding: 5px 9px;
    align-items: center;
    gap: 5px;
    color: var(--chat-muted);
    background: var(--chat-surface);
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    font-size: 9.5px;
}

.chats-thread-load:hover {
    color: var(--chat-text);
    background: var(--chat-hover);
}

.chats-thread-replies {
    padding: 0 0 12px;
}

.chats-thread-reply {
    position: relative;
    display: grid;
    padding: 9px 16px;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 9px;
    transition: background-color .12s ease;
}

.chats-thread-reply:hover {
    background: var(--chat-hover);
}

.chats-thread-reply .chats-thread-message__avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 50%;
}

.chats-thread-reply__delete {
    position: absolute;
    top: 6px;
    right: 8px;
    display: inline-flex;
    width: 28px;
    height: 28px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--chat-faint);
    background: var(--chat-surface);
    border: 0;
    border-radius: var(--chat-radius-sm);
    box-shadow: none;
    opacity: 0;
}

.chats-thread-reply:hover .chats-thread-reply__delete,
.chats-thread-reply__delete:focus-visible {
    opacity: 1;
}

.chats-thread-reply__delete:hover {
    color: var(--chat-danger);
    background: color-mix(in srgb, var(--chat-danger) 7%, var(--chat-surface));
}

.chats-thread-reply__like {
    display: inline-flex;
    min-height: 23px;
    margin-top: 5px;
    padding: 3px 5px;
    align-items: center;
    gap: 4px;
    color: var(--chat-faint);
    border-radius: 6px;
    font-size: 9.5px;
    text-decoration: none;
}

.chats-thread-reply__like:hover {
    color: var(--chat-text);
    background: var(--chat-hover);
}

.chats-thread-empty {
    padding: 34px 16px;
    color: var(--chat-faint);
    font-size: 10.5px;
    text-align: center;
}

.chats-thread-composer {
    flex: 0 0 auto;
    margin: 9px 10px 11px;
    background: var(--chat-surface-raised);
    border: 0;
    border-radius: var(--chat-radius);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.chats-thread-composer:focus-within {
    border-color: color-mix(in srgb, var(--chat-accent) 50%, var(--chat-border));
    box-shadow: 0 0 0 3px var(--chat-focus);
}

.chats-thread-input {
    min-height: 58px;
    max-height: 140px;
    padding: 10px 11px 6px;
    overflow-y: auto;
    color: var(--chat-text);
    font-size: 11.5px;
    line-height: 1.48;
    outline: 0;
}

.chats-thread-composer__toolbar {
    display: flex;
    min-height: 36px;
    padding: 3px 5px 5px;
    align-items: center;
    gap: 5px;
    border-top: 1px solid color-mix(in srgb, var(--chat-border) 70%, transparent);
}

.chats-thread-composer__toolbar > span {
    flex: 1 1 auto;
    color: var(--chat-faint);
    font-size: 8.5px;
}

.chats-thread-tool,
.chats-thread-send {
    display: inline-flex;
    width: 29px;
    height: 28px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--chat-radius-sm);
}

.chats-thread-tool {
    color: var(--chat-muted);
    background: transparent;
}

.chats-thread-tool:hover {
    color: var(--chat-text);
    background: var(--chat-hover);
    border-color: var(--chat-border);
}

.chats-thread-send {
    color: var(--chat-accent-fg);
    background: var(--chat-accent);
    border-color: var(--chat-accent);
}

.chats-thread-send:hover {
    background: var(--chat-accent-hover);
    border-color: var(--chat-accent-hover);
}

/* Motion */
.SCALEANIMA {
    animation: dui-legacy-modules-chats-chatsMessageIn .22s ease both;
}

.SHADOWESNUEVO {
    animation: dui-legacy-modules-chats-chatsMessageIn .22s ease both, dui-legacy-modules-chats-chatsNewMessage 1.8s ease-out both;
}

@keyframes dui-legacy-modules-chats-chatsMessageIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes dui-legacy-modules-chats-chatsNewMessage {
    0%, 30% { background: var(--chat-accent-soft); }
    100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .SCALEANIMA,
    .SHADOWESNUEVO,
    .chats-rail__loading span {
        animation: none !important;
    }

    #chatsWorkspace *,
    #chatsWorkspace *::before,
    #chatsWorkspace *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Dark theme */
[data-bs-theme="dark"] #chatsWorkspace {
    --chat-rail: var(--dt-surface, #191919);
    --chat-rail-hover: var(--dt-hover, rgba(255, 255, 255, .055));
    --chat-shadow-sm: none;
    --chat-shadow-md: none;
}

[data-bs-theme="dark"] .chats-channel-search,
[data-bs-theme="dark"] .chats-channel-item__link.is-active,
[data-bs-theme="dark"] .chats-channel-item__link[aria-current="page"] {
    background: color-mix(in srgb, var(--chat-surface) 88%, #fff 2%);
}

[data-bs-theme="dark"] .chats-post__actions,
[data-bs-theme="dark"] .chats-post__menu-btn {
    box-shadow: none;
}

/* Responsive */
@media (max-width: 1120px) {
    .chats-workspace {
        grid-template-columns: minmax(0, 1fr) 220px;
    }

    .chats-workspace.is-thread-open {
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    .chats-message-stream {
        max-width: none;
    }

    .chats-composer__hint {
        display: none;
    }
}

@media (max-width: 840px) {
    .chats-workspace,
    .chats-workspace.is-thread-open {
        display: block;
    }

    .chats-main {
        width: 100%;
        height: 100%;
    }

    .chats-rail {
        position: absolute;
        inset: 0 0 0 auto;
        z-index: 55;
        width: min(360px, calc(100vw - 44px));
        height: 100%;
        border-left: 1px solid var(--chat-border);
        box-shadow: none;
        transform: translateX(102%);
        transition: transform .2s ease;
    }

    .chats-workspace.is-rail-open .chats-rail,
    .chats-workspace.is-thread-open .chats-rail {
        transform: translateX(0);
    }

    .chats-rail-backdrop {
        position: absolute;
        inset: 0;
        z-index: 50;
        display: block;
        background: rgba(15, 23, 42, .28);
        border: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
        backdrop-filter: blur(1px);
    }

    .chats-workspace.is-rail-open .chats-rail-backdrop,
    .chats-workspace.is-thread-open .chats-rail-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .chats-rail__mobile-close,
    .chats-mobile-rail-button {
        display: inline-flex;
    }

    .chats-channel-header {
        padding-left: 12px;
    }

    .chats-channel-header__hash {
        display: none;
    }

    .chats-channel-header p {
        max-width: 48vw;
    }
}

@media (max-width: 600px) {
    #akicontenidonormal[data-module="chats"] {
        height: calc(100dvh - var(--dt-topbar-h, 44px));
    }

    .chats-channel-header {
        min-height: 64px;
        padding: 8px 9px;
        gap: 8px;
    }

    .chats-channel-header__identity {
        gap: 8px;
    }

    .chats-channel-header p,
    .chats-visibility-badge,
    .chats-channel-header__divider {
        display: none !important;
    }

    .chats-member-count {
        width: auto;
        height: 32px;
        min-height: 32px;
        padding: 4px 6px;
        justify-content: center;
        overflow: hidden;
        font-size: 0;
    }

    .chats-member-count__text {
        display: none;
    }

    .chats-agent-avatar--header {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }

    .chats-message-stream {
        padding-top: 13px;
        padding-bottom: 18px;
    }

    .chats-post.card {
        padding-right: 12px;
        padding-left: 62px;
    }

    .chats-post__header .avatar-2xl {
        left: -47px;
        width: 34px;
        height: 34px;
    }

    .chats-post__body,
    .chats-post__footer {
        padding-right: 4px;
    }

    .chats-post__actions {
        position: static;
        width: fit-content;
        margin: 5px 0 1px;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        opacity: 1;
        transform: none;
    }

    .chats-post__action-btn {
        background: var(--chat-app);
        border-color: var(--chat-border);
    }

    .chats-post__menu-btn {
        right: -2px;
        opacity: 1;
    }

    .chats-date-divider {
        margin-right: 12px;
        margin-left: 12px;
    }

    .chats-channel-intro {
        width: calc(100% - 24px);
        margin: 6px 12px 16px;
        padding: 14px;
    }

    .chats-composer {
        width: calc(100% - 16px);
        margin-bottom: 8px;
        border-radius: var(--chat-radius);
    }

    .chats-composer__input {
        min-height: 55px;
    }

    .chats-send-btn span,
    .chats-composer__context {
        display: none;
    }

    .chats-send-btn {
        width: 32px;
        padding: 0;
        justify-content: center;
    }

    .chats-rail {
        width: min(340px, calc(100vw - 28px));
    }

    .chats-post__body .col-4 .activity-media-img,
    .chats-post__body .col-4 .activity-media-video,
    .chats-post__body .col-6 .activity-media-img,
    .chats-post__body .col-6 .activity-media-video {
        height: 130px;
    }
}
/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Capa final del chat interno, todo bajo #chatsWorkspace: gana por id a las reglas de una clase y a las
   [data-bs-theme="dark"] de arriba. Solo color, borde, sombra, radio, peso y tamaño de letra. Ninguna clase, id ni atributo
   que lea el JS cambia (is-active, is-grouped, is-thread-open, is-rail-open, chats-liked, u-hidden, SCALEANIMA,
   SHADOWESNUEVO, data-thread-summary, data-imglike, data-akichacosla). No se toca el display de nada que las media
   queries de arriba oculten (hash de la cabecera, pista del teclado, insignia de visibilidad, texto del botón Enviar).
   Un solo CTA en tinta: Enviar. Referencia: modules/control-phonenumbers.html (.pn-set-ic, .pn-action-btn). */

/* una sola superficie: carril, cabeceras y conversación sin sombra, sin translucidez ni desenfoque */
#chatsWorkspace .chats-rail{background:var(--dt-surface);box-shadow:none}
#chatsWorkspace .chats-rail__header,
#chatsWorkspace .chats-channel-header,
#chatsWorkspace .chats-thread-header{background:var(--dt-surface);-webkit-backdrop-filter:none;backdrop-filter:none}
#chatsWorkspace .chats-feed-scroll{background:var(--dt-surface)}
#chatsWorkspace .chats-rail-backdrop{background:var(--dt-backdrop);-webkit-backdrop-filter:none;backdrop-filter:none}

/* foco de teclado: anillo de 2 px en tinta en lugar del halo de 3 px */
#chatsWorkspace :is(.chats-icon-btn,.chats-mobile-rail-button,.chats-thread-back,.chats-thread-close,.chats-toolbar-btn,.chats-send-btn,.chats-thread-tool,.chats-thread-send):focus-visible{outline:2px solid var(--dt-focus);outline-offset:1px}

/* botones fantasma: el + de crear canal deja de ser CTA; borrar en rojo solo en icono */
#chatsWorkspace .chats-icon-btn--primary{color:var(--dt-text);background:transparent;border-color:var(--dt-border-strong);box-shadow:none}
#chatsWorkspace .chats-icon-btn--primary:hover{color:var(--dt-text);background:var(--dt-hover);border-color:var(--dt-border-strong)}
#chatsWorkspace .chats-icon-btn--danger:hover{color:var(--dt-danger);background:var(--dt-hover);border-color:var(--dt-border)}
#chatsWorkspace .chats-post__action-btn--danger:hover,
#chatsWorkspace .chats-thread-reply__delete:hover{color:var(--dt-danger);background:var(--dt-hover)}

/* cabecera del carril: cuadrado neutro y título sin antetítulo decorativo (Team space) */
#chatsWorkspace .chats-rail__mark{width:32px;height:32px;flex-basis:32px;color:var(--dt-muted);background:var(--dt-surface-2);border:0;border-radius:8px;font-size:16px}
#chatsWorkspace .chats-rail__eyebrow{display:none}
#chatsWorkspace .chats-rail__header h2{font-size:15px;font-weight:600;letter-spacing:-.01em}

/* búsqueda de canales: línea fina, sin halo */
#chatsWorkspace .chats-channel-search{color:var(--dt-faint);background:transparent;border:0;border-radius:8px;box-shadow:none}
#chatsWorkspace .chats-channel-search:hover:not(:focus-within){color:var(--dt-muted);background:var(--dt-hover)}
#chatsWorkspace .chats-channel-search:focus-within{color:var(--dt-muted);background:transparent;border-color:var(--dt-border-strong);box-shadow:none}
#chatsWorkspace #chatsChannelSearch{height:32px;font-size:13px}

/* etiqueta de sección y contador: sin versalitas, gris, cifras tabulares */
#chatsWorkspace .chats-rail__section-label{color:var(--dt-faint);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
#chatsWorkspace .chats-rail__count{color:var(--dt-faint);background:transparent;font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}

/* lista de canales: activo = gris activo + peso 600, sin barra lateral ni sombra; iconos sin cuadrado */
#chatsWorkspace .chats-channel-item__link{border-radius:8px;font-size:13px;font-weight:500}
#chatsWorkspace .chats-channel-item__link:hover{background:var(--dt-hover)}
#chatsWorkspace .chats-channel-item__link.is-active,
#chatsWorkspace .chats-channel-item__link[aria-current="page"]{background:var(--dt-active);border-color:transparent;box-shadow:none;font-weight:600}
#chatsWorkspace .chats-channel-item__link.is-active::before,
#chatsWorkspace .chats-channel-item__link[aria-current="page"]::before{content:none;display:none}
#chatsWorkspace .chats-channel-item__icon{color:var(--dt-faint);background:transparent;font-size:14px}
#chatsWorkspace .chats-channel-item__link:hover .chats-channel-item__icon{color:var(--dt-muted)}
#chatsWorkspace .chats-channel-item__link.is-active .chats-channel-item__icon,
#chatsWorkspace .chats-channel-item__link[aria-current="page"] .chats-channel-item__icon{color:var(--dt-text);background:transparent}
#chatsWorkspace .chats-channel-empty{background:transparent;border:0;font-size:12px}

/* cabecera del canal */
#chatsWorkspace .chats-channel-header__hash{width:36px;height:36px;flex-basis:36px;color:var(--dt-muted);background:var(--dt-surface-2);border:0;border-radius:9px;font-size:18px}
#chatsWorkspace .chats-channel-header h1{font-weight:600;letter-spacing:-.01em}
#chatsWorkspace .chats-channel-header p{color:var(--dt-faint);font-size:12px}
#chatsWorkspace .chats-visibility-badge{color:var(--dt-muted);background:transparent;border-color:var(--dt-border);font-size:11px;font-weight:500;letter-spacing:0;text-transform:none}
#chatsWorkspace .chats-member-count{color:var(--dt-muted);background:transparent;border-color:var(--dt-border);font-weight:500;font-variant-numeric:tabular-nums}
#chatsWorkspace .chats-member-count__text{font-size:12px}

/* avatares de iniciales en gris neutro: el color por nombre llega como variable inline, se pisa la propiedad */
#chatsWorkspace .chats-agent-avatar{color:var(--dt-muted);background:var(--dt-surface-2);font-weight:600}
#chatsWorkspace .chats-agent-avatar--all{color:var(--dt-muted);background:var(--dt-surface-2);border:1px solid var(--dt-border)}

/* presentación del canal y estado vacío: cuadrados neutros; el icono ti-sparkles no existe en la fuente y se oculta */
#chatsWorkspace .chats-channel-intro{background:transparent;border-color:var(--dt-border);border-radius:12px}
#chatsWorkspace .chats-channel-intro__icon{width:38px;height:38px;flex-basis:38px;color:var(--dt-muted);background:var(--dt-surface-2);border:0;border-radius:10px;font-size:18px}
#chatsWorkspace .chats-channel-intro__eyebrow{color:var(--dt-faint);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
#chatsWorkspace .chats-channel-intro h2{font-weight:600;letter-spacing:-.01em}
#chatsWorkspace .chats-channel-intro p{font-size:13px}
#chatsWorkspace .chats-channel-intro__start{color:var(--dt-faint);font-size:12px}
#chatsWorkspace .chats-channel-intro__start i{display:none}
#chatsWorkspace .chats-empty-state__icon{width:44px;height:44px;color:var(--dt-muted);background:var(--dt-surface-2);border:0;border-radius:10px;font-size:20px}
#chatsWorkspace .chats-empty-state h3{font-size:15px;font-weight:600}
#chatsWorkspace .chats-empty-state p{font-size:13px}

/* separador de fecha: texto gris entre líneas, sin píldora */
#chatsWorkspace .chats-date-divider{color:var(--dt-faint);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}
#chatsWorkspace .chats-date-divider span{padding:0 2px;background:transparent;border:0;box-shadow:none}

/* cargar mensajes anteriores: fantasma */
#chatsWorkspace .chats-load-more .btn{background:transparent;box-shadow:none;font-size:12px}
#chatsWorkspace .chats-load-more .btn:hover{color:var(--dt-text);background:var(--dt-hover);border-color:var(--dt-border-strong)}

/* mensajes */
#chatsWorkspace .chats-post__author{font-size:13px;font-weight:600}
#chatsWorkspace .chats-post__time{font-size:11px;font-variant-numeric:tabular-nums}
#chatsWorkspace .chats-post__body a:not(.activity-media-link){color:var(--dt-link)}
#chatsWorkspace .chats-post__menu-btn{box-shadow:none}
#chatsWorkspace .chats-post .dropdown-menu{background:var(--dt-overlay);box-shadow:none}
#chatsWorkspace .chats-post .dropdown-item{font-size:12.5px}
#chatsWorkspace .chats-post__actions{box-shadow:none}
#chatsWorkspace .chats-post__action-btn{font-size:11px;font-weight:500}

/* resumen del hilo: botón fantasma con línea fina, sin tinte */
#chatsWorkspace .chats-thread-summary{color:var(--dt-text);background:transparent;border-color:var(--dt-border);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}
#chatsWorkspace .chats-thread-summary:hover{background:var(--dt-hover);border-color:var(--dt-border-strong)}
#chatsWorkspace .chats-thread-summary__avatars{color:var(--dt-muted);background:var(--dt-surface-2)}

/* menciones: tinte suave del azul de enlace */
#chatsWorkspace .tagmiembro{color:var(--dt-link);background:rgba(var(--dt-link-rgb),.1);font-weight:500}

/* adjuntos: cuadro gris con línea fina, sin degradado ni sombra (solo dentro del chat; whatsapp.css usa las mismas clases) */
#chatsWorkspace :is(.chats-tile,.activity-media-link){background:var(--dt-surface-2);border-color:var(--dt-border);box-shadow:none}
#chatsWorkspace :is(.activity-media-img,.activity-media-video){background:var(--dt-surface-2)}
#chatsWorkspace .activity-video-play{box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#chatsWorkspace :is(.chats-post__body,.chats-thread-message__media) > a .btn-plain12px{background:transparent;border-color:var(--dt-border);box-shadow:none}
#chatsWorkspace :is(.chats-post__body,.chats-thread-message__media) > a .btn-plain12px:hover{background:var(--dt-hover);border-color:var(--dt-border-strong)}

/* compositor: línea fina, foco = borde más oscuro, sin halo; Enviar es el único CTA en tinta; "Posting in" fuera */
#chatsWorkspace .chats-composer{border-color:var(--dt-border-strong);border-radius:12px;box-shadow:none}
#chatsWorkspace .chats-composer:focus-within{border-color:var(--dt-faint);box-shadow:none}
#chatsWorkspace .chats-composer__input{font-size:13px}
#chatsWorkspace .chats-composer__toolbar{border-top-color:var(--dt-border)}
#chatsWorkspace .chats-composer__hint{font-size:11px}
#chatsWorkspace .chats-composer__hint kbd{color:var(--dt-muted);background:transparent;font-size:10px}
#chatsWorkspace .chats-composer__context{display:none}
#chatsWorkspace .chats-send-btn{min-height:32px;border-radius:8px;box-shadow:none;font-size:12px;font-weight:600}
#chatsWorkspace .chats-tag-members{background:var(--dt-overlay);box-shadow:none}
#chatsWorkspace .chats-tag-members__header{font-size:12.5px}
#chatsWorkspace .chats-agent-option__name{font-size:12.5px;font-weight:500}
#chatsWorkspace .chats-agent-option__meta{font-size:11px}

/* panel del hilo: sin antetítulo decorativo (Conversation), raíz sin fondo propio, enviar respuesta en fantasma */
#chatsWorkspace .chats-thread-header__eyebrow{display:none}
#chatsWorkspace .chats-thread-header h2{font-weight:600;letter-spacing:-.01em}
#chatsWorkspace #chatsThreadChannelName{font-size:11.5px}
#chatsWorkspace .chats-thread-parent{background:transparent}
#chatsWorkspace .chats-thread-message__author{font-size:12.5px;font-weight:600}
#chatsWorkspace .chats-thread-message__time{font-size:11px;font-variant-numeric:tabular-nums}
#chatsWorkspace .chats-thread-message__body{font-size:12.5px}
#chatsWorkspace .chats-thread-divider{font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}
#chatsWorkspace .chats-thread-load{box-shadow:none;font-size:12px}
#chatsWorkspace .chats-thread-reply__delete{box-shadow:none}
#chatsWorkspace .chats-thread-reply__like{font-size:11px;font-variant-numeric:tabular-nums}
#chatsWorkspace .chats-thread-empty{font-size:12px}
#chatsWorkspace .chats-thread-composer{box-shadow:none}
#chatsWorkspace .chats-thread-composer:focus-within{border-color:var(--dt-faint);box-shadow:none}
#chatsWorkspace .chats-thread-input{font-size:12.5px}
#chatsWorkspace .chats-thread-composer__toolbar{border-top-color:var(--dt-border)}
#chatsWorkspace .chats-thread-composer__toolbar > span{font-size:11px}
#chatsWorkspace .chats-thread-send{color:var(--dt-text);background:transparent;border-color:var(--dt-border-strong)}
#chatsWorkspace .chats-thread-send:hover{color:var(--dt-cta-fg);background:var(--dt-cta);border-color:var(--dt-cta)}

/* móvil: las acciones del mensaje pasan a fantasmas con línea fina (antes con el fondo app) */
@media (max-width: 600px){
  #chatsWorkspace .chats-post__action-btn{background:transparent;border-color:var(--dt-border)}
}

}
/* end dui-template-style modules/chats:1 */
/* dui-template-style {"key":"modules/cloudservers:0","bytes":62185,"sha256":"46e0f4d7dcd0dd023ee3d384f20104ce6536aca0daee777e95d7d3078ae01f3f","media":null,"source_sha256":"1e7768368dde1b623ef6593bcbc8e12d4f7faf98f1612793bd6853faeb0afd0c"} */
@scope (:root:has(template[data-dui-legacy-style="modules/cloudservers:0"])) {

#cloudserverspage{--cs-bg:var(--dt-surface,#fff);--cs-bg2:var(--dt-app,#f7f9fc);--cs-text:var(--dt-text,#18324c);--cs-muted:var(--dt-muted,#77818b);--cs-border:var(--dt-border,#e3e7ec);--cs-blue:var(--dt-link,#1686ef);--cs-orange:#ff9800;--cs-hover:var(--dt-hover,#f5f9ff);font-family:var(--el-font,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);font-size:13px;color:var(--cs-text);background:var(--cs-bg);min-height:calc(100vh - 125px);padding:26px 34px 34px;box-sizing:border-box}
#cloudserverspage *{box-sizing:border-box}#cloudserverspage [hidden]{display:none!important}#cloudserverspage button,#cloudserverspage input,#cloudserverspage select,#cloudserverspage textarea{font:inherit}#cloudserverspage button{cursor:pointer}#cloudserverspage button:disabled{opacity:.45;cursor:not-allowed}#cloudserverspage button:focus-visible,#cloudserverspage input:focus-visible,#cloudserverspage select:focus-visible,#cloudserverspage textarea:focus-visible{outline:2px solid var(--cs-blue);outline-offset:3px}#cloudserverspage h1,#cloudserverspage h2,#cloudserverspage h3,#cloudserverspage p{margin:0}#cloudserverspage h1{font-size:22px;font-weight:600;letter-spacing:-.5px}#cloudserverspage h2{font-size:17px;font-weight:500}#cloudserverspage h3{font-size:14px;font-weight:600}
#cloudserverspage .cs-heading,#cloudserverspage .cs-flex,#cloudserverspage .cs-toolbar,#cloudserverspage .cs-dialog-head,#cloudserverspage .cs-dialog-foot{display:flex;align-items:center;gap:12px}#cloudserverspage .cs-heading{justify-content:space-between;margin-bottom:22px}#cloudserverspage .cs-sub{color:var(--cs-muted);font-size:12px;line-height:1.6;margin-top:5px!important}#cloudserverspage .cs-heading-icon{display:inline-flex;align-items:center;justify-content:center;width:41px;height:41px;background:var(--cs-hover);color:var(--cs-blue);border-radius:11px;font-size:23px}#cloudserverspage .cs-online{font-size:12px;color:var(--cs-muted);display:flex;align-items:center;gap:7px}#cloudserverspage .cs-online span,#cloudserverspage .cs-status:before{content:'';width:6px;height:6px;display:inline-block;border-radius:50%;background:currentColor}#cloudserverspage .cs-online span{color:#20b574}#cloudserverspage .cs-tabs{display:flex;gap:0;overflow-x:auto;border-bottom:1px solid var(--cs-border);margin-bottom:22px}#cloudserverspage .cs-tab{position:relative;border:0;background:none;color:var(--cs-muted);white-space:nowrap;padding:14px 21px 17px;font-weight:500!important}#cloudserverspage .cs-tab[aria-selected=true]{color:var(--cs-blue)}#cloudserverspage .cs-tab[aria-selected=true]:after{position:absolute;content:'';bottom:0;left:0;right:0;height:2px;background:var(--cs-orange)}#cloudserverspage .cs-tab i{margin-right:6px;font-size:15px}#cloudserverspage .cs-toolbar{justify-content:space-between;margin:0 0 18px;min-height:42px;flex-wrap:wrap}#cloudserverspage .cs-count{font-size:12px;color:var(--cs-muted)}#cloudserverspage .cs-tools{display:flex;gap:14px;align-items:center;margin-left:auto}#cloudserverspage .cs-search{display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--cs-border);color:var(--cs-muted)}#cloudserverspage .cs-search input{width:185px;padding:8px 0;border:0;background:transparent;color:var(--cs-text);outline:0!important}#cloudserverspage .cs-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:35px;padding:8px 13px;border-radius:5px;background:var(--cs-bg);border:0;color:var(--cs-text);text-decoration:none;font-weight:500!important}#cloudserverspage .cs-btn:hover{background:var(--cs-hover)}#cloudserverspage .cs-btn-primary{background:var(--cs-blue);border-color:var(--cs-blue);color:var(--dt-cta-fg)}#cloudserverspage .cs-btn-primary:hover{filter:brightness(.95);background:var(--cs-blue)}#cloudserverspage .cs-btn-danger{color:#ca3d3d;border-color:#ebbbbb}#cloudserverspage .cs-icon-btn{width:34px;height:34px;border:0;background:none;color:var(--cs-text);display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:19px}#cloudserverspage .cs-icon-btn:hover{background:var(--cs-hover)}#cloudserverspage .cs-add{width:41px;height:41px;background:var(--cs-orange);color:var(--dt-on-color);box-shadow:none}#cloudserverspage .cs-add:hover{background:#f08f00}#cloudserverspage .cs-link{border:0;padding:0;background:none;color:var(--cs-blue);text-align:left}#cloudserverspage .cs-table-wrap{width:100%;overflow-x:auto}#cloudserverspage .cs-table{width:100%;border-collapse:collapse;text-align:left}#cloudserverspage .cs-table th{font-size:12px;color:var(--cs-muted);font-weight:500;padding:17px 16px;border-bottom:1px solid var(--cs-border);white-space:nowrap}#cloudserverspage .cs-table td{padding:16px;border-bottom:1px solid var(--cs-border);vertical-align:middle;font-size:12px}#cloudserverspage .cs-table tr:hover td{background:var(--cs-hover)}#cloudserverspage .cs-table th:first-child,#cloudserverspage .cs-table td:first-child{padding-left:21px}#cloudserverspage .cs-server-name{font-size:15px;font-weight:500;display:block;margin-bottom:9px}#cloudserverspage .cs-tags{display:flex;gap:5px;flex-wrap:wrap}#cloudserverspage .cs-tag{border:1px solid var(--cs-border);border-radius:4px;font-size:10px;padding:3px 7px;color:var(--cs-blue);white-space:nowrap}#cloudserverspage .cs-mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;overflow-wrap:anywhere}#cloudserverspage .cs-status{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--cs-muted)}#cloudserverspage .cs-status-ok{color:#16b657}#cloudserverspage .cs-status-pending{color:#d58b09}#cloudserverspage .cs-status-error{color:#dc4c4c}#cloudserverspage .cs-actions{display:flex;align-items:center;gap:5px;justify-content:flex-end}#cloudserverspage .cs-pagination{display:flex;justify-content:flex-end;align-items:center;gap:17px;padding:15px 10px;color:var(--cs-muted);font-size:11px}#cloudserverspage .cs-pagination select{padding:4px;background:var(--cs-bg);color:var(--cs-muted);border:0}#cloudserverspage .cs-empty{text-align:center;padding:66px 20px 74px;color:var(--cs-muted)}#cloudserverspage .cs-empty-symbol{display:inline-flex;align-items:center;justify-content:center;width:66px;height:66px;background:var(--cs-hover);color:var(--cs-blue);font-size:31px;border-radius:18px;margin-bottom:16px}#cloudserverspage .cs-empty h3{color:var(--cs-text);font-size:16px!important;margin-bottom:8px!important}#cloudserverspage .cs-empty p{margin-bottom:20px!important}#cloudserverspage .cs-notice{padding:11px 14px;border:0;border-left:3px solid var(--cs-blue);background:var(--cs-hover);border-radius:4px;line-height:1.5;margin-bottom:18px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}#cloudserverspage .cs-notice-error{border-left-color:#d65353}#cloudserverspage .cs-notice-success{border-left-color:#18ab68}#cloudserverspage .cs-spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--cs-border);border-top-color:var(--cs-blue);border-radius:50%;animation:cs-spin .8s linear infinite}@keyframes cs-spin{to{transform:rotate(360deg)}}#cloudserverspage .cs-loading{text-align:center;padding:65px;color:var(--cs-muted)}
#cloudserverspage .cs-create-head{display:flex;align-items:center;justify-content:space-between;padding:0 0 22px;gap:15px}#cloudserverspage .cs-config{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:32px;align-items:start;max-width:1250px;margin:0 auto}#cloudserverspage .cs-config>*{min-width:0}#cloudserverspage .cs-section{padding:21px 0 26px;border-bottom:1px solid var(--cs-border)}#cloudserverspage .cs-section:first-child{padding-top:0}#cloudserverspage .cs-section h2{margin-bottom:22px!important}#cloudserverspage .cs-fields{display:grid;grid-template-columns:1fr 1fr;gap:22px}#cloudserverspage .cs-field{display:flex;flex-direction:column;gap:7px}#cloudserverspage .cs-field>span,#cloudserverspage .cs-label{font-size:12px;color:var(--cs-muted)}#cloudserverspage .cs-field input,#cloudserverspage .cs-field select,#cloudserverspage .cs-field textarea,#cloudserverspage .cs-input{width:100%;min-height:38px;padding:9px 10px;border:0;border-radius:4px;background:var(--cs-bg);color:var(--cs-text)}#cloudserverspage .cs-field textarea{min-height:92px;resize:vertical}#cloudserverspage .cs-line-input input{border:0;border-bottom:1px solid var(--cs-border);border-radius:0;padding-left:0}#cloudserverspage .cs-line-input input:focus{border-bottom:2px solid var(--cs-blue);outline:none!important}#cloudserverspage .cs-line-input>span{color:var(--cs-blue)}#cloudserverspage .cs-products{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-bottom:24px}#cloudserverspage .cs-product{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--cs-bg);border:0;border-radius:7px;color:var(--cs-text);text-align:left}#cloudserverspage .cs-product>i{color:var(--cs-muted);font-size:26px}#cloudserverspage .cs-product[aria-pressed=true]{border-color:var(--cs-blue);background:var(--cs-hover)}#cloudserverspage .cs-product[aria-pressed=true]>i{color:var(--cs-blue)}#cloudserverspage .cs-product>span{min-width:0}#cloudserverspage .cs-product small{display:block;color:var(--cs-muted);font-size:11px;margin-top:4px}#cloudserverspage .cs-source-tabs{margin-bottom:20px}#cloudserverspage .cs-source-tabs .cs-tab{padding:9px 15px 13px;font-size:12px}#cloudserverspage .cs-images{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}#cloudserverspage .cs-image{border:1px solid var(--cs-border);border-radius:1px;min-width:0;background:var(--cs-bg);text-align:center;position:relative;transition:border-color .15s}#cloudserverspage .cs-image.selected{border-color:var(--cs-blue);box-shadow:0 0 0 1px var(--cs-blue)}#cloudserverspage .cs-image-choose{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:11px;width:100%;min-height:117px;padding:15px 6px 12px;color:var(--cs-text);background:none;border:0}#cloudserverspage .cs-image-choose svg{width:53px;height:53px;color:#8d9399}#cloudserverspage .cs-image.selected svg{color:var(--cs-blue)}#cloudserverspage .cs-image-choose span{font-size:13px}#cloudserverspage .cs-image select{max-width:100%;width:100%;border:0;border-top:1px solid var(--cs-border);padding:8px 5px;color:var(--cs-muted);background:var(--cs-bg);font-size:11px!important;text-overflow:ellipsis}#cloudserverspage .cs-image-check{position:absolute;top:7px;right:7px;color:var(--cs-blue);font-size:14px}#cloudserverspage .cs-selection{display:flex;gap:8px;align-items:center;color:var(--cs-blue);font-size:12px;margin-top:16px;min-height:19px}#cloudserverspage .cs-range-row{display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:24px;align-items:center;margin-top:21px}#cloudserverspage .cs-range-row strong{display:block;margin-bottom:12px;font-size:13px}#cloudserverspage .cs-range{display:flex;gap:10px;align-items:center}#cloudserverspage .cs-range input[type=range]{width:100%;accent-color:var(--cs-blue);cursor:pointer}#cloudserverspage .cs-step{padding:0;border:0;border-radius:50%;width:23px;height:23px;background:var(--cs-bg);color:#21bd84;font-size:20px!important;flex-shrink:0;line-height:1}#cloudserverspage .cs-resource-value{font-size:13px;color:var(--cs-text);display:flex;align-items:center;gap:12px;padding-top:22px}#cloudserverspage .cs-resource-value b{color:var(--cs-blue);font-size:16px;min-width:30px}#cloudserverspage .cs-checks{display:flex;align-items:center;gap:18px;flex-wrap:wrap}#cloudserverspage .cs-checks label,#cloudserverspage .cs-check{display:flex;align-items:center;gap:7px;color:var(--cs-text);font-size:12px}#cloudserverspage .cs-check input,#cloudserverspage .cs-checks input{accent-color:var(--cs-blue);width:16px;height:16px;flex-shrink:0}#cloudserverspage .cs-summary{position:sticky;top:20px;border:0;border-radius:8px;overflow:hidden;background:var(--cs-bg)}#cloudserverspage .cs-summary-head{padding:21px;border-bottom:1px solid var(--cs-border)}#cloudserverspage .cs-summary-body{padding:20px}#cloudserverspage .cs-period{display:flex;gap:13px;align-items:center;margin-top:16px;font-size:12px}#cloudserverspage .cs-toggle{width:33px;height:17px;appearance:none;background:#a9d4fa;border-radius:12px;position:relative;cursor:pointer;margin:0}#cloudserverspage .cs-toggle:before{content:'';width:20px;height:20px;position:absolute;border-radius:50%;top:-1.5px;left:0;background:var(--cs-blue);transition:left .15s}#cloudserverspage .cs-toggle:checked:before{left:14px}#cloudserverspage .cs-cost-line{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:14px;font-size:12px;color:var(--cs-muted)}#cloudserverspage .cs-cost-line strong{font-weight:500;color:var(--cs-text);white-space:nowrap}#cloudserverspage .cs-cost-total{padding-top:17px;margin-top:17px;border-top:1px solid var(--cs-border);display:flex;align-items:center;justify-content:space-between}#cloudserverspage .cs-cost-total strong{font-size:25px;font-weight:500;color:var(--cs-blue);letter-spacing:-.6px}#cloudserverspage .cs-credits{font-size:12px;color:var(--cs-muted);margin-top:9px;text-align:right}#cloudserverspage .cs-summary-footer{padding:17px 20px;background:var(--cs-bg2);border-top:1px solid var(--cs-border)}#cloudserverspage .cs-summary-footer .cs-btn{width:100%;margin-top:15px;min-height:41px}#cloudserverspage .cs-summary-note{font-size:11px;line-height:1.65;color:var(--cs-muted);margin-top:14px!important}#cloudserverspage .cs-snapshot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}#cloudserverspage .cs-snapshot-card{display:flex;flex-direction:column;gap:9px;padding:18px;border:0;border-radius:6px;background:var(--cs-bg);color:var(--cs-text);text-align:left}#cloudserverspage .cs-snapshot-card.selected{border-color:var(--cs-blue);background:var(--cs-hover)}#cloudserverspage .cs-snapshot-card i{font-size:26px;color:var(--cs-blue)}#cloudserverspage .cs-snapshot-card small{font-size:11px;color:var(--cs-muted)}#cloudserverspage .cs-dialog{border:0;border-radius:10px;background:var(--cs-bg);color:var(--cs-text);padding:0;width:min(650px,calc(100% - 30px));max-height:88vh;box-shadow:none}#cloudserverspage .cs-dialog::backdrop{background:#11223365}#cloudserverspage .cs-dialog-head{justify-content:space-between;padding:19px 24px;border-bottom:1px solid var(--cs-border)}#cloudserverspage .cs-dialog-body{padding:23px 24px;overflow-y:auto}#cloudserverspage .cs-dialog-body .cs-field{margin-bottom:16px}#cloudserverspage .cs-dialog-foot{justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--cs-border)}#cloudserverspage .cs-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}#cloudserverspage .cs-detail-grid dt{font-size:11px;color:var(--cs-muted);font-weight:400;margin-bottom:7px}#cloudserverspage .cs-detail-grid dd{margin:0;font-size:13px;overflow-wrap:anywhere}#cloudserverspage .cs-divider{border:0;border-top:1px solid var(--cs-border);margin:23px 0}#cloudserverspage .cs-resource-select{width:100%;min-height:80px}#cloudserverspage .cs-admin-help{margin-bottom:17px!important;font-size:12px;color:var(--cs-muted);line-height:1.7}#cloudserverspage .cs-catalog-name{font-weight:500}#cloudserverspage .cs-catalog-name small{display:block;font-weight:400;margin-top:5px;color:var(--cs-muted);font-size:10px}#cloudserverspage .cs-warning{color:#b8760b;font-size:12px;line-height:1.6}#cloudserverspage .cs-rule{display:grid;grid-template-columns:85px 1fr 80px 80px 32px;gap:7px;margin:9px 0;align-items:end}#cloudserverspage .cs-rule .cs-field{margin:0}#cloudserverspage .cs-rule .cs-field>span{font-size:10px}#cloudserverspage .cs-dialog-error{margin:0 24px 15px;color:#c44;font-size:12px;line-height:1.5}
@media(min-width:1500px){#cloudserverspage{padding:30px 48px}#cloudserverspage .cs-config{gap:50px;grid-template-columns:minmax(0,1fr) 300px}#cloudserverspage .cs-images{gap:13px}}
@media(max-width:1050px){#cloudserverspage{padding:22px}#cloudserverspage .cs-config{grid-template-columns:minmax(0,1fr) 240px;gap:22px}#cloudserverspage .cs-images{grid-template-columns:repeat(3,minmax(0,1fr))}#cloudserverspage .cs-tab{padding-left:13px;padding-right:13px}#cloudserverspage .cs-tab i{display:none}}
@media(max-width:760px){#cloudserverspage{padding:18px 14px}#cloudserverspage .cs-heading{margin-bottom:12px}#cloudserverspage .cs-online{display:none}#cloudserverspage .cs-tabs{margin-bottom:17px}#cloudserverspage .cs-tab{padding:13px 12px}#cloudserverspage .cs-config{grid-template-columns:minmax(0,1fr)}#cloudserverspage .cs-summary{position:static}#cloudserverspage .cs-images{grid-template-columns:repeat(3,minmax(0,1fr))}#cloudserverspage .cs-fields{grid-template-columns:1fr;gap:18px}#cloudserverspage .cs-tools{gap:6px}#cloudserverspage .cs-search input{width:130px}#cloudserverspage .cs-pagination{gap:8px;flex-wrap:wrap}#cloudserverspage .cs-create-head h1{font-size:18px!important}#cloudserverspage .cs-products{gap:9px}#cloudserverspage .cs-product{padding:12px 10px}#cloudserverspage .cs-product>i{font-size:23px}#cloudserverspage .cs-detail-grid{gap:15px}#cloudserverspage .cs-rule{grid-template-columns:72px 1fr 60px 60px 25px;gap:4px}#cloudserverspage .cs-dialog-body{padding:19px 16px}#cloudserverspage .cs-rule input{padding:7px 5px}#cloudserverspage .cs-source-tabs .cs-tab{padding-left:11px;padding-right:11px}}
#cloudserverspage .cs-status::before{box-sizing:border-box;flex:0 0 10px;width:10px;height:10px;border:2px solid transparent;background-clip:content-box}
#cloudserverspage .cs-status-busy::before{background:none;border-color:currentColor;border-right-color:transparent;animation:cs-spin .9s linear infinite}
#cloudserverspage .cs-status-waiting::before{animation:dui-legacy-modules-cloudservers-cs-status-pulse 1.6s ease-in-out infinite}
@keyframes dui-legacy-modules-cloudservers-cs-status-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){#cloudserverspage *,#cloudserverspage *::before,#cloudserverspage *::after{animation:none!important;transition:none!important}}
/* Module controls retain their layout inside the CRM's global form styles. */
#cloudserverspage{line-height:1.5;scroll-margin-top:calc(var(--dt-topbar-h,44px) + 20px);--cs-soft-blue:color-mix(in srgb,var(--cs-blue) 6%,var(--cs-bg))}
#cloudserverspage .cs-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#cloudserverspage .cs-heading{margin-bottom:25px}
#cloudserverspage .cs-heading-icon{width:44px;height:44px;background:var(--cs-soft-blue);border:0}
#cloudserverspage .cs-heading h1{font-size:21px;line-height:1.3;font-weight:600}
#cloudserverspage .cs-heading-icon{flex-shrink:0}
#cloudserverspage .cs-tab{font-size:13px;line-height:20px;transition:color .15s,background .15s}
#cloudserverspage .cs-tab:hover{background:var(--cs-soft-blue);color:var(--cs-blue)}
#cloudserverspage .cs-toolbar{margin-bottom:12px;padding:3px 0}
#cloudserverspage .cs-icon-btn{flex-shrink:0;font-size:20px;line-height:1}
#cloudserverspage .cs-icon-btn i{font-size:inherit;line-height:1}
#cloudserverspage .cs-add{width:42px;height:42px;font-size:24px;box-shadow:none}
#cloudserverspage .cs-search{min-height:37px;transition:border-color .15s}
#cloudserverspage .cs-search:focus-within{border-color:var(--dt-focus,var(--cs-blue))}
#cloudserverspage .cs-search input{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:8px 0;font-size:13px;min-width:0}
#cloudserverspage .cs-table th{height:55px;color:var(--cs-text);font-size:12px;font-weight:500;text-transform:none!important;letter-spacing:0}
#cloudserverspage .cs-table td{padding-top:16px;padding-bottom:16px;font-size:13px;line-height:1.55}
#cloudserverspage .cs-table td:first-child{min-width:210px}
#cloudserverspage .cs-table td:last-child{width:72px}
#cloudserverspage .cs-table[data-kind=servers] td:nth-child(3){white-space:nowrap}
#cloudserverspage .cs-table[data-kind=servers] td:nth-child(5){white-space:nowrap;font-variant-numeric:tabular-nums}
#cloudserverspage .cs-server-name{font-size:15px;font-weight:500;line-height:1.5;margin-bottom:8px;overflow-wrap:anywhere}
#cloudserverspage .cs-tag{font-size:10px;padding:2px 7px;line-height:1.6;color:var(--cs-blue);border-color:color-mix(in srgb,var(--cs-blue) 18%,var(--cs-bg))}
#cloudserverspage .cs-table td .cs-icon-btn{vertical-align:middle;font-size:17px}
#cloudserverspage .cs-pagination{font-size:12px;padding-top:17px;gap:14px}
#cloudserverspage .cs-pagination select{width:auto;min-width:45px;border:0!important;background:transparent!important;border-radius:0!important}
#cloudserverspage .cs-config{max-width:1160px;grid-template-columns:minmax(0,1fr) 280px;gap:32px}
#cloudserverspage .cs-create-head{max-width:1160px;margin:0 auto;padding-bottom:27px}
#cloudserverspage .cs-section{padding-top:24px;padding-bottom:27px}
#cloudserverspage .cs-section:first-child{padding-top:0}
#cloudserverspage .cs-section h2{font-size:17px;font-weight:500;line-height:1.5;margin-bottom:20px!important}
#cloudserverspage .cs-products{gap:12px;margin-bottom:25px}
#cloudserverspage .cs-product{min-height:66px;padding:14px;border-radius:6px;background:var(--cs-bg)!important;color:var(--cs-text)!important;transition:border-color .15s,background .15s}
#cloudserverspage .cs-product:hover{border-color:var(--cs-blue)}
#cloudserverspage .cs-product[aria-pressed=true]{background:var(--cs-soft-blue)!important}
#cloudserverspage .cs-field input,#cloudserverspage .cs-field select,#cloudserverspage .cs-field textarea{color:var(--cs-text)!important;background:var(--cs-bg)!important;border:0!important;border-radius:5px!important;min-height:41px;line-height:1.5}
#cloudserverspage .cs-field input:focus,#cloudserverspage .cs-field select:focus,#cloudserverspage .cs-field textarea:focus{border-color:var(--dt-focus,var(--cs-blue))!important;box-shadow:none!important}
#cloudserverspage .cs-line-input input{border:0!important;border-bottom:1px solid var(--cs-border)!important;border-radius:0!important;padding-left:0}
#cloudserverspage .cs-line-input input:focus{border-bottom:2px solid var(--cs-blue)!important}
#cloudserverspage .cs-image{border-radius:3px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
#cloudserverspage .cs-image:hover{border-color:var(--cs-blue)}
#cloudserverspage .cs-image.selected{background:var(--cs-soft-blue);box-shadow:0 0 0 1px var(--cs-blue)}
#cloudserverspage .cs-image-choose{min-height:120px;padding:18px 7px 14px;gap:13px}
#cloudserverspage .cs-image-choose svg{width:51px;height:51px;flex-shrink:0}
#cloudserverspage .cs-image-choose span{font-size:14px;line-height:1.4}
#cloudserverspage .cs-image select{min-height:36px;border:0!important;border-top:1px solid var(--cs-border)!important;border-radius:0!important;background:var(--cs-bg)!important;color:var(--cs-muted)!important;font-size:11px!important;padding:8px 5px;line-height:1.5}
#cloudserverspage .cs-image.selected select{color:var(--cs-blue)!important}
#cloudserverspage .cs-selection{font-size:12px;line-height:1.6}
#cloudserverspage .cs-source-empty{padding:28px 24px;border:1px dashed var(--cs-border);border-radius:6px;background:var(--cs-bg2);display:flex;gap:14px;align-items:flex-start}
#cloudserverspage .cs-source-empty>i{font-size:27px;color:var(--cs-muted)}
#cloudserverspage .cs-source-empty .cs-btn{margin-top:13px}
#cloudserverspage .cs-range-row{gap:20px;margin-top:23px}
#cloudserverspage .cs-resource-value{justify-content:flex-end;font-variant-numeric:tabular-nums}
#cloudserverspage .cs-range input[type=range]{appearance:none;height:6px!important;border:0;border-radius:10px;margin:10px 0;padding:0;background:linear-gradient(to right,var(--cs-blue) 0%,var(--cs-blue) var(--cs-range-progress,0%),color-mix(in srgb,var(--cs-blue) 25%,var(--cs-bg)) var(--cs-range-progress,0%),color-mix(in srgb,var(--cs-blue) 25%,var(--cs-bg)) 100%)!important}
#cloudserverspage .cs-range input[type=range]::-webkit-slider-runnable-track{height:6px;background:transparent}
#cloudserverspage .cs-range input[type=range]::-webkit-slider-thumb{appearance:none;width:20px!important;height:20px!important;margin-top:-7px;border:0;border-radius:50%;background:var(--cs-blue)!important;box-shadow:none}
#cloudserverspage .cs-range input[type=range]::-moz-range-track{height:6px;background:transparent}
#cloudserverspage .cs-range input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--cs-blue);box-shadow:none}
#cloudserverspage .cs-step{width:25px;height:25px;box-shadow:none;font-size:21px!important}
#cloudserverspage .cs-step:disabled,#cloudserverspage .cs-range input[type=range]:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
#cloudserverspage .cs-summary{top:calc(var(--dt-topbar-h,44px) + 18px);border-radius:7px;box-shadow:none}
#cloudserverspage .cs-summary-head{padding:22px}
#cloudserverspage .cs-summary-body{padding:22px}
#cloudserverspage .cs-period{justify-content:space-between;gap:9px}
#cloudserverspage input.cs-toggle{flex-shrink:0;display:inline-block;vertical-align:middle;width:34px!important;height:17px!important;padding:0;border:0!important;border-radius:20px!important;appearance:none!important;background:color-mix(in srgb,var(--cs-blue) 35%,var(--cs-bg))!important;box-shadow:none!important}
#cloudserverspage input.cs-toggle:before{content:'';display:block;position:absolute;inset:auto;left:0;top:-1.5px;width:20px;height:20px;background:var(--cs-blue);border-radius:50%;transform:none;clip-path:none;box-shadow:none}
#cloudserverspage input.cs-toggle:checked:before{left:14px}
#cloudserverspage input.cs-toggle:after{display:none!important}
#cloudserverspage input.cs-toggle:focus-visible{outline:2px solid var(--cs-blue)!important;outline-offset:4px}
#cloudserverspage .cs-btn-primary{background:#087bd5;border-color:#087bd5;color:var(--dt-cta-fg)}
#cloudserverspage .cs-btn-primary:hover{background:#087bd5}
#cloudserverspage .cs-cost-total{align-items:baseline}
#cloudserverspage .cs-cost-total strong{font-size:27px;font-variant-numeric:tabular-nums}
#cloudserverspage .cs-cost-periods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:17px;padding-top:15px;border-top:1px solid var(--cs-border)}
#cloudserverspage .cs-cost-period{display:flex;flex-direction:column;gap:5px;color:var(--cs-muted);font-size:11px}
#cloudserverspage .cs-cost-period strong{font-size:16px;font-weight:600;color:var(--cs-blue);font-variant-numeric:tabular-nums;white-space:nowrap}
#cloudserverspage .cs-cost-setup{margin-top:12px;color:var(--cs-text);font-size:12px}
#cloudserverspage .cs-cost-setup strong{float:right;color:var(--cs-blue);font-variant-numeric:tabular-nums}
#cloudserverspage .cs-summary-footer{padding:19px 22px}
#cloudserverspage .cs-summary-footer .cs-check{align-items:flex-start;line-height:1.6}
#cloudserverspage .cs-summary-footer .cs-check input{margin-top:2px}
#cloudserverspage .cs-summary-footer .cs-btn{font-size:13px}
#cloudserverspage .cs-dialog{inset:0;margin:auto;max-height:88dvh;max-width:calc(100vw - 30px)}
#cloudserverspage .cs-dialog[open]{display:flex;flex-direction:column}
#cloudserverspage .cs-dialog form{display:flex;flex-direction:column;min-height:0;overflow:hidden}
#cloudserverspage .cs-dialog-head,#cloudserverspage .cs-dialog-foot{flex-shrink:0}
#cloudserverspage .cs-dialog-body{min-height:0;overscroll-behavior:contain}
#cloudserverspage .cs-dialog-foot{background:var(--cs-bg2)}
#cloudserverspage .cs-empty{padding:70px 24px 85px;line-height:1.7}
#cloudserverspage .cs-empty p{max-width:440px;margin-left:auto;margin-right:auto}
#cloudserverspage .cs-empty-symbol{width:72px;height:72px;border-radius:20px;background:var(--cs-soft-blue);font-size:33px}
@media(max-width:1250px){
  #cloudserverspage .cs-config{grid-template-columns:minmax(0,1fr) 250px;gap:24px}
  #cloudserverspage .cs-images{grid-template-columns:repeat(3,minmax(0,1fr))}
  #cloudserverspage .cs-main-tabs .cs-tab{padding-inline:13px}
}
@media(max-width:1000px){
  #cloudserverspage .cs-config{grid-template-columns:minmax(0,1fr);gap:24px}
  #cloudserverspage .cs-summary{position:static;max-width:none}
  #cloudserverspage .cs-create-head>.cs-count{display:none}
  #cloudserverspage .cs-online{display:none}
  #cloudserverspage .cs-fields{grid-template-columns:1fr;gap:20px}
  #cloudserverspage .cs-dialog .cs-fields{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  #cloudserverspage .cs-heading{margin-bottom:17px}
  #cloudserverspage .cs-heading h1{font-size:20px}
  #cloudserverspage .cs-heading-icon{width:39px;height:39px}
  #cloudserverspage .cs-config{grid-template-columns:minmax(0,1fr);gap:24px}
  #cloudserverspage .cs-toolbar{gap:12px}
  #cloudserverspage .cs-count{font-size:11px}
  #cloudserverspage .cs-search input{width:115px}
  #cloudserverspage .cs-tools{gap:8px}
  #cloudserverspage .cs-images{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  #cloudserverspage .cs-products{grid-template-columns:1fr}
  #cloudserverspage .cs-product{min-height:60px}
  #cloudserverspage .cs-section{padding-top:22px;padding-bottom:24px}
  #cloudserverspage .cs-range-row{grid-template-columns:minmax(0,1fr) 88px;gap:13px}
  #cloudserverspage .cs-resource-value{font-size:12px;gap:6px}
  #cloudserverspage .cs-range{gap:7px}
  #cloudserverspage .cs-pagination{display:grid;grid-template-columns:minmax(0,1fr) 40px auto 28px 28px;gap:6px;padding:16px 0;font-size:11px}
  #cloudserverspage .cs-pagination .cs-icon-btn{width:28px;height:34px}
  #cloudserverspage .cs-pagination [data-action=first-page],#cloudserverspage .cs-pagination [data-action=last-page]{display:none}
  #cloudserverspage .cs-table[data-kind=servers] thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #cloudserverspage .cs-table[data-kind=servers] tbody{display:grid;gap:12px}
  #cloudserverspage .cs-table[data-kind=servers] tr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 16px;padding:17px;border:0;border-radius:7px}
  #cloudserverspage .cs-table[data-kind=servers] td{display:block;border:0;padding:0;min-width:0;width:auto;font-size:12px;white-space:normal}
  #cloudserverspage .cs-table[data-kind=servers] td:before{content:attr(data-label);display:block;font-size:10px;color:var(--cs-muted);margin-bottom:5px}
  #cloudserverspage .cs-table[data-kind=servers] td:first-child{grid-column:1/-1;padding-right:20px}
  #cloudserverspage .cs-table[data-kind=servers] td:first-child:before,#cloudserverspage .cs-table[data-kind=servers] td:last-child:before{display:none}
  #cloudserverspage .cs-table[data-kind=servers] td:last-child{position:absolute;top:12px;right:8px}
  #cloudserverspage .cs-table[data-kind=servers] .cs-mono{font-size:11px}
  #cloudserverspage .cs-table[data-kind=servers] td:nth-child(3) .cs-icon-btn{width:24px;height:23px;font-size:14px}
  #cloudserverspage .cs-rule{grid-template-columns:80px minmax(0,1fr) minmax(0,1fr) 28px;gap:8px}
  #cloudserverspage .cs-rule>.cs-field:nth-child(2){grid-column:2/4}
  #cloudserverspage .cs-rule>.cs-field:nth-child(3){grid-row:2;grid-column:1/2}
  #cloudserverspage .cs-rule>.cs-field:nth-child(4){grid-row:2;grid-column:2/4}
  #cloudserverspage .cs-rule>.cs-icon-btn{grid-column:4;grid-row:1/3}
  #cloudserverspage .cs-dialog .cs-fields{grid-template-columns:1fr}
}
#cloudserverspage .cs-template-action{font-size:12px;color:var(--cs-blue);margin-top:4px}
#cloudserverspage .cs-image.cs-os-snapshot{display:flex;flex-direction:column}
#cloudserverspage .cs-os-snapshot .cs-image-choose{flex:1}
#cloudserverspage .cs-os-edition{display:block;width:100%;min-height:36px;padding:8px 5px;border:0;border-top:1px solid var(--cs-border);background:var(--cs-bg);color:var(--cs-muted);font-size:11px!important;text-align:center}
#cloudserverspage .cs-os-description{display:block;margin-top:4px;font-size:11px;line-height:1.4;white-space:normal}
#cloudserverspage .cs-os-snapshot.selected .cs-os-edition{color:var(--cs-blue)}

/* A short setup flow, with technical controls available on demand. */
#cloudserverspage .cs-add{width:auto;min-width:42px;border-radius:6px;padding:0 14px;gap:7px;font-size:19px;background:var(--cs-blue)}
#cloudserverspage .cs-add span{font-size:12px;font-weight:500;white-space:nowrap}
#cloudserverspage{--cs-create-bg:var(--dt-surface);--cs-create-hover:var(--dt-hover);--cs-create-text:var(--dt-text)}
#cloudserverspage :is(#cs-add,#cs-create-submit,#cs-mb-submit){background:var(--cs-create-bg);border:0;color:var(--cs-create-text);border-radius:8px;box-shadow:none;font-weight:600!important;transition:background .15s,box-shadow .15s}
#cloudserverspage :is(#cs-add,#cs-create-submit,#cs-mb-submit):hover:not(:disabled){background:var(--cs-create-hover);border-color:var(--cs-create-hover);filter:none;box-shadow:none}
#cloudserverspage :is(#cs-add,#cs-create-submit,#cs-mb-submit):focus-visible{outline:2px solid var(--cs-text);outline-offset:3px}
#cloudserverspage :is(#cs-add,#cs-create-submit,#cs-mb-submit):disabled{opacity:1;background:color-mix(in srgb,var(--cs-create-bg) 18%,var(--cs-bg));border-color:var(--cs-border);color:var(--cs-muted);box-shadow:none;cursor:not-allowed}
#cloudserverspage .cs-section h2{display:flex;align-items:center;gap:10px;font-weight:600;margin-bottom:18px!important}
#cloudserverspage .cs-section-number{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50%;background:var(--cs-soft-blue);color:var(--cs-blue);font-size:12px;flex-shrink:0}
#cloudserverspage .cs-product .cs-product-check{margin-left:auto;font-size:19px;visibility:hidden}
#cloudserverspage .cs-product[aria-pressed=true] .cs-product-check{visibility:visible}
#cloudserverspage .cs-products{margin-bottom:18px}
#cloudserverspage .cs-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#cloudserverspage .cs-preset{border:0;border-radius:7px;padding:16px 12px;background:var(--cs-bg);color:var(--cs-text);text-align:left;display:flex;flex-direction:column;gap:7px;min-width:0}
#cloudserverspage .cs-preset[aria-pressed=true]{border-color:var(--cs-blue);box-shadow:none;background:var(--cs-soft-blue)}
#cloudserverspage .cs-preset strong{font-size:13px}
#cloudserverspage .cs-preset small{color:var(--cs-muted);font-size:11px;line-height:1.6}
#cloudserverspage .cs-preset span{font-size:11px;color:var(--cs-text);line-height:1.7}
#cloudserverspage .cs-advanced{margin-top:18px;border:0;border-radius:7px}
#cloudserverspage .cs-advanced summary,#cloudserverspage .cs-cost-details summary{cursor:pointer;color:var(--cs-blue);font-size:12px;padding:13px 15px;list-style-position:inside}
#cloudserverspage .cs-advanced summary:focus-visible,#cloudserverspage .cs-cost-details summary:focus-visible{outline:2px solid var(--cs-blue);outline-offset:3px}
#cloudserverspage .cs-advanced summary span{display:block;color:var(--cs-muted);font-size:11px;margin:3px 0 0 15px}
#cloudserverspage .cs-advanced[open]>summary{border-bottom:1px solid var(--cs-border)}
#cloudserverspage .cs-advanced-body{padding:20px}
#cloudserverspage .cs-network-options .cs-fields{margin-top:20px}
#cloudserverspage .cs-summary h2{margin-top:6px;font-size:18px;font-weight:600;overflow-wrap:anywhere}
#cloudserverspage .cs-summary .cs-tags{margin-top:14px;gap:6px}
#cloudserverspage .cs-summary .cs-tag{color:var(--cs-text);padding:4px 7px;background:var(--cs-bg2)}
#cloudserverspage .cs-cost-details summary{padding:0;color:var(--cs-muted)}
#cloudserverspage .cs-cost-breakdown{padding-top:15px}
#cloudserverspage .cs-cost-breakdown .cs-period{margin:0 0 20px}
#cloudserverspage .cs-password-wrap{position:relative;display:block}
#cloudserverspage .cs-password-wrap input{padding-right:42px}
#cloudserverspage .cs-password-wrap button{position:absolute;right:3px;top:4px}
#cloudserverspage #cs-images strong{overflow-wrap:anywhere}
#cloudserverspage .cs-selection{line-height:1.6}
#cloudserverspage .cs-network-options{margin-bottom:15px}
#cloudserverspage .cs-firewall-included{padding:10px 12px;margin-bottom:14px!important;border:0;border-radius:5px;background:var(--cs-soft-blue);color:var(--cs-text)}
@media(max-width:760px){#cloudserverspage .cs-presets{gap:8px}#cloudserverspage .cs-preset{padding:13px 9px}#cloudserverspage .cs-products{grid-template-columns:1fr 1fr}#cloudserverspage .cs-product{padding:12px 10px;gap:8px;align-items:flex-start}#cloudserverspage .cs-product>i{font-size:20px}#cloudserverspage .cs-product .cs-product-check{display:none}#cloudserverspage .cs-product small{line-height:1.5}#cloudserverspage .cs-product>span{font-size:12px}#cloudserverspage .cs-add{padding:0 10px}#cloudserverspage .cs-advanced-body{padding:16px}}

#cloudserverspage .cs-firewall-heading{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
#cloudserverspage .cs-firewall-profile{font-weight:600;margin:10px 0 5px!important;font-size:14px}
#cloudserverspage .cs-firewall-services{display:flex;gap:8px 16px;flex-wrap:wrap;margin-top:12px;font-size:12px}
#cloudserverspage .cs-firewall-services>span{display:flex;align-items:center;gap:5px}
#cloudserverspage .cs-firewall-services i{color:var(--cs-green,#178b62)}
#cloudserverspage .cs-firewall-note{margin-top:10px!important}
#cloudserverspage .cs-firewall-rules{margin-top:12px;font-size:12px}
#cloudserverspage .cs-firewall-rules summary{cursor:pointer;color:var(--cs-blue);padding:6px 0;font-weight:500}
#cloudserverspage .cs-firewall-rules ul{padding:0!important;margin:8px 0!important;list-style:none}
#cloudserverspage .cs-firewall-rules li{display:flex;gap:5px 12px;align-items:center;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--cs-border);overflow-wrap:anywhere}
#cloudserverspage .cs-firewall-rules li>span{flex:1 1 180px}
#cloudserverspage .cs-firewall-rules small{color:var(--cs-muted)}

#cloudserverspage .dui-select{min-width:0;width:100%}
#cloudserverspage .cs-image .dui-select__trigger{min-height:36px;border:0;border-top:1px solid var(--cs-border);border-radius:0;font-size:11px;padding:8px 6px}
#cloudserverspage .cs-image .dui-select__value{min-width:0;white-space:normal}
#cloudserverspage .cs-pagination .dui-select{width:75px}
.cs-key-dropdown .dui-select__options{max-height:170px}
/* 2026-09-12 (Marc): logos reales, precio en vivo, selector hour/dia/month, firewall propio, aviso Windows, resize */
#cloudserverspage .cs-image-choose img.cs-logo{width:51px;height:51px;object-fit:contain;flex-shrink:0}
#cloudserverspage .cs-image.selected img.cs-logo{filter:drop-shadow(0 0 1px var(--cs-blue))}
#cloudserverspage .cs-period-switch{display:flex;gap:4px;padding:3px;border:1px solid var(--cs-border);border-radius:999px;background:var(--cs-bg2);margin-bottom:16px}
#cloudserverspage .cs-period-btn{flex:1;border:0;border-radius:999px;background:transparent;color:var(--cs-muted);font-size:12px;padding:7px 6px;cursor:pointer;transition:background .15s,color .15s}
#cloudserverspage .cs-period-btn[aria-pressed=true]{background:var(--cs-bg);color:var(--cs-blue);box-shadow:none;font-weight:600}
#cloudserverspage .cs-cost-breakdown{margin-top:14px;padding-top:12px;border-top:1px solid var(--cs-border)}
#cloudserverspage .cs-cost-periods{grid-template-columns:1fr 1fr 1fr}
#cloudserverspage .cs-live-cost{margin-top:22px;border-top:1px solid var(--cs-border);padding-top:14px}
#cloudserverspage .cs-live-cost table{width:100%;border-collapse:collapse;font-size:12px}
#cloudserverspage .cs-live-cost th{font-weight:500;color:var(--cs-muted);text-align:right;padding:4px 0 8px;font-size:11px}
#cloudserverspage .cs-live-cost th:first-child,#cloudserverspage .cs-live-cost td:first-child{text-align:left}
#cloudserverspage .cs-live-cost td{padding:6px 0;text-align:right;font-variant-numeric:tabular-nums;border-top:1px solid color-mix(in srgb,var(--cs-border) 60%,transparent)}
#cloudserverspage .cs-live-cost td small{display:block;color:var(--cs-muted);font-size:10px}
#cloudserverspage .cs-live-cost tr.cs-live-total td{font-weight:600;color:var(--cs-blue);border-top:2px solid var(--cs-border)}
#cloudserverspage .cs-live-cost .cs-live-note{margin-top:8px;font-size:11px;color:var(--cs-muted)}
#cloudserverspage .cs-os-notice{margin-top:14px;padding:13px 15px;border:0;border-radius:7px;background:color-mix(in srgb,#b8760b 7%,var(--cs-bg));font-size:12px;line-height:1.6;color:var(--cs-text);display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
#cloudserverspage .cs-os-notice>i{font-size:20px;color:#b8760b;flex-shrink:0}
#cloudserverspage .cs-os-notice>div{flex:1 1 260px}
#cloudserverspage .cs-os-notice .cs-btn{margin-top:8px}
#cloudserverspage .cs-fw-mode{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0 4px}
#cloudserverspage .cs-fw-mode label{display:flex;align-items:center;gap:7px;font-size:12px;cursor:pointer}
#cloudserverspage .cs-fw-mode input{accent-color:var(--cs-blue)}
#cloudserverspage .cs-fw-custom{margin-top:8px;font-size:12px}
#cloudserverspage .cs-fw-custom .cs-link{margin-left:8px}
#cloudserverspage .cs-preset .cs-preset-badge{display:inline-block;font-size:10px;padding:1px 7px;border-radius:999px;background:var(--cs-blue);color:#fff;margin-left:6px;vertical-align:middle}
#cloudserverspage .cs-resize-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:22px;align-items:start}
#cloudserverspage .cs-resize-side{border:1px solid var(--cs-border);border-radius:8px;padding:16px;background:var(--cs-bg2)}
#cloudserverspage .cs-resize-side h3{font-size:13px;margin:0 0 10px}
#cloudserverspage .cs-resize-current{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
#cloudserverspage .cs-resize-total{font-size:22px;font-weight:600;color:var(--cs-blue);font-variant-numeric:tabular-nums;margin-top:6px}
@media(max-width:760px){#cloudserverspage .cs-resize-grid{grid-template-columns:1fr}#cloudserverspage .cs-cost-periods{grid-template-columns:1fr 1fr 1fr}}
.dui-select__dropdown .cs-dd-action{display:block;width:100%;padding:11px 12px;border:0;border-top:1px solid var(--dt-border,#dfe5eb);background:transparent;color:var(--dt-text,#18324c);text-align:left;font-size:13px;font-weight:600;cursor:pointer}
.dui-select__dropdown .cs-dd-action[hidden]{display:none!important}
.dui-select__dropdown .cs-dd-action:hover:not(:disabled){background:var(--dt-hover,#eaf5ff)}
.dui-select__dropdown .cs-dd-action:focus-visible{outline:2px solid var(--dt-text,#18324c);outline-offset:-2px;border-radius:6px}
.dui-select__dropdown .cs-dd-action:disabled{opacity:.6;cursor:wait}
/* Diseño "Contratación Cloud Servers" (Marc 2026-09-12, canvas 434c7033): recomendación en la tarjeta, precio en los packs,
   resumen PEGADO (sticky + cinturón JS position:fixed) y barra inferior en móvil. Naming: Virtual PC / Server. */
#cloudserverspage .cs-section h2{display:flex;align-items:center;gap:10px}
#cloudserverspage .cs-section h2 .cs-section-hint{margin-left:auto;font-size:12px;font-weight:400;color:var(--cs-muted)}
#cloudserverspage .cs-image-name{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:14px;line-height:1.4}
#cloudserverspage .cs-image-rec{display:flex;flex-direction:column;gap:1px;font-size:11px;line-height:1.5;color:var(--cs-muted);font-weight:400}
#cloudserverspage .cs-logo-tile{background:var(--cs-text);border-radius:12px;padding:9px}
#cloudserverspage .cs-logo-tile-sm{border-radius:5px;padding:4px}
#cloudserverspage .cs-preset .cs-pack-price{display:flex;align-items:baseline;gap:5px;margin-top:6px;padding-top:11px;border-top:1px solid var(--cs-border);font-variant-numeric:tabular-nums;line-height:1.2}
#cloudserverspage .cs-pack-price b{font-size:20px;font-weight:600;color:var(--cs-blue);letter-spacing:-.4px}
#cloudserverspage .cs-pack-price em{font-style:normal;font-size:12px;color:var(--cs-muted)}
#cloudserverspage .cs-preset .cs-pack-month{font-size:11px;color:var(--cs-muted)}
#cloudserverspage #cs-summary-image{display:flex;align-items:center;gap:7px}
#cloudserverspage #cs-summary-image img{width:20px;height:20px;object-fit:contain;flex-shrink:0}
#cloudserverspage .cs-summary-slot{min-width:0;align-self:start}
#cloudserverspage .cs-summary.is-fixed{position:fixed;z-index:20;overflow:auto;overscroll-behavior:contain}
#cloudserverspage .cs-mobile-bar{display:none}
@media(max-width:1000px){
  #cloudserverspage .cs-mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:1030;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--cs-border);background:var(--cs-bg);box-shadow:none;min-width:0}
  #cloudserverspage .cs-mobile-bar .cs-mb-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
  #cloudserverspage .cs-mobile-bar .cs-mb-name{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;line-height:1.35;min-width:0}
  #cloudserverspage .cs-mobile-bar .cs-mb-name img{width:20px;height:20px;object-fit:contain;flex-shrink:0}
  #cloudserverspage .cs-mobile-bar .cs-mb-name>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #cloudserverspage .cs-mobile-bar .cs-mb-price{font-size:12px;color:var(--cs-muted);line-height:1.4;font-variant-numeric:tabular-nums}
  #cloudserverspage .cs-mobile-bar .cs-mb-price b{font-weight:600;color:var(--cs-blue)}
  #cloudserverspage .cs-mobile-bar .cs-btn-primary{flex-shrink:0;padding:8px 13px;max-width:55%}
  #cloudserverspage #cs-create-view{padding-bottom:calc(var(--cs-mobile-bar-height,68px) + 16px)}
  #cloudserverspage .cs-summary.is-fixed{position:static;max-height:none}
}
/* 2026-09-13 (Marc, corte 1): ficha del machine como centro of gestion, aviso/banner of emergencia, detalle of firewall con reglas */
#cloudserverspage .cs-dialog.cs-dialog-wide{width:min(980px,calc(100% - 30px))}
#cloudserverspage .cs-ficha-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
#cloudserverspage .cs-ficha-head .cs-flex{flex-wrap:wrap;gap:8px;min-width:0}
#cloudserverspage .cs-ficha-head img.cs-logo{width:22px;height:22px;object-fit:contain}
#cloudserverspage .cs-ficha-tabs{margin-bottom:18px}
#cloudserverspage .cs-ficha-tabs .cs-tab{padding:9px 14px 12px;font-size:12px}
#cloudserverspage .cs-ficha-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
#cloudserverspage .cs-ficha-section h3{margin:18px 0 10px!important}
#cloudserverspage .cs-ficha-section .cs-detail-grid dd{min-width:0}
#cloudserverspage .cs-notice-info{margin:0 0 16px;border-color:color-mix(in srgb,var(--cs-blue) 30%,var(--cs-bg));background:var(--cs-soft-blue)}
#cloudserverspage .cs-notice-info>i{color:var(--cs-blue)}
#cloudserverspage .cs-emergency{margin:0 0 16px;border-color:color-mix(in srgb,#dc4c4c 35%,var(--cs-bg));background:color-mix(in srgb,#dc4c4c 6%,var(--cs-bg))}
#cloudserverspage .cs-emergency>i{color:#dc4c4c}
#cloudserverspage .cs-emergency .cs-ficha-actions,#cloudserverspage .cs-notice-info .cs-ficha-actions{margin-top:10px}
#cloudserverspage .cs-kv{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--cs-muted);margin-top:10px}
#cloudserverspage .cs-kv b{color:var(--cs-text);font-weight:500;overflow-wrap:anywhere}
#cloudserverspage .cs-kv .cs-icon-btn{width:24px;height:24px;font-size:14px;vertical-align:middle}
#cloudserverspage .cs-port{border:0;border-radius:7px;padding:14px 16px;margin-bottom:12px;background:var(--cs-bg);min-width:0}
#cloudserverspage .cs-port-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
#cloudserverspage .cs-port ul,#cloudserverspage .cs-attach{list-style:none;margin:0!important;padding:0!important}
#cloudserverspage .cs-port li,#cloudserverspage .cs-attach li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 0;border-top:1px solid var(--cs-border);font-size:12px}
#cloudserverspage .cs-port li>span:first-child,#cloudserverspage .cs-attach li>span:first-child{flex:1 1 160px;overflow-wrap:anywhere}
#cloudserverspage .cs-port li.cs-port-ext>span:first-child{flex:0 0 auto}
#cloudserverspage .cs-tag-muted{color:var(--cs-muted);border-color:var(--cs-border)}
#cloudserverspage .cs-dialog-head h2{min-width:0;overflow-wrap:anywhere}
#cloudserverspage .cs-mini-table th:last-child{text-align:right}
#cloudserverspage .cs-mini-table{width:100%;border-collapse:collapse;font-size:12px}
#cloudserverspage .cs-mini-table th{text-align:left;font-weight:500;color:var(--cs-muted);font-size:11px;padding:6px 8px;border-bottom:1px solid var(--cs-border);white-space:nowrap}
#cloudserverspage .cs-mini-table td{padding:9px 8px;border-bottom:1px solid var(--cs-border);vertical-align:middle;overflow-wrap:anywhere}
#cloudserverspage .cs-mini-table td:last-child{text-align:right;white-space:nowrap}
#cloudserverspage .cs-mini-table tr.is-off td{color:var(--cs-muted)}
#cloudserverspage .cs-mini-table .cs-btn{min-height:30px;padding:5px 10px;font-size:12px}
#cloudserverspage .cs-mini-table input.cs-toggle{position:relative}
#cloudserverspage .cs-rule-form{display:grid;grid-template-columns:90px minmax(0,1fr) 80px 80px minmax(0,1.4fr) auto;gap:8px;align-items:end;margin-top:14px}
#cloudserverspage .cs-rule-form .cs-field{margin:0!important;min-width:0}
#cloudserverspage .cs-rule-form .cs-field>span{font-size:10px}
#cloudserverspage .cs-armed{background:var(--dt-surface-2)!important;border-color:#ca3d3d!important;color:#ca3d3d!important}
#cloudserverspage .cs-ficha-loading{padding:26px;text-align:center;color:var(--cs-muted)}
#cloudserverspage .cs-dialog-body[aria-busy=true]{opacity:.6;pointer-events:none}
#cloudserverspage .cs-ficha-back{margin-bottom:14px;font-size:12px}
/* 2026-09-13 (Marc, corte 2): firewalls por puerto editables, copias of seguridad, reinstalacion, VPC, llaves, limites of cuenta */
#cloudserverspage .cs-fw-list{list-style:none;margin:0!important;padding:0!important}
#cloudserverspage .cs-fw-list li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 0;border-top:1px solid var(--cs-border);font-size:12px}
#cloudserverspage .cs-fw-list li>label{flex:1 1 160px;min-width:0;overflow-wrap:anywhere;margin:0}
#cloudserverspage .cs-port .cs-port-warn{margin-top:8px}
#cloudserverspage .cs-port .cs-port-ext{margin:8px 0 0!important}
#cloudserverspage .cs-bk-state{padding:14px 16px;border:0;border-radius:7px;background:var(--cs-bg2);margin-bottom:14px}
#cloudserverspage .cs-bk-grid{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:20px;align-items:center;margin:14px 0 18px}
#cloudserverspage .cs-bk-grid strong{display:block;margin-bottom:12px;font-size:13px}
#cloudserverspage .cs-radios{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px}
#cloudserverspage .cs-radios label{display:flex;align-items:center;gap:7px;font-size:12px;cursor:pointer}
#cloudserverspage .cs-radios input{accent-color:var(--cs-blue)}
#cloudserverspage .cs-ri-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
#cloudserverspage .cs-ri-grid .cs-field{margin-bottom:0!important}
#cloudserverspage .cs-quote-box{padding:12px 14px;border:0;border-radius:7px;background:var(--cs-bg2);margin:14px 0;font-size:12px;line-height:1.6}
#cloudserverspage .cs-quote-box strong{font-size:16px;color:var(--cs-blue);font-variant-numeric:tabular-nums}
#cloudserverspage .cs-keep{display:flex;gap:8px 16px;flex-wrap:wrap;font-size:12px;margin:10px 0 14px}
#cloudserverspage .cs-keep span{display:flex;align-items:center;gap:5px}
#cloudserverspage .cs-keep i{color:#178b62}
#cloudserverspage .cs-onetime{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
#cloudserverspage .cs-onetime output{font-size:14px;font-weight:600;overflow-wrap:anywhere}
#cloudserverspage textarea.cs-key-text{width:100%;min-height:110px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;resize:vertical}
#cloudserverspage .cs-limits{margin:0 0 22px;padding:16px 18px;border:0;border-radius:8px;background:var(--cs-bg)}
#cloudserverspage .cs-limits-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:12px}
#cloudserverspage .cs-limit{border:0;border-radius:7px;padding:12px 14px;background:var(--cs-bg2);min-width:0}
#cloudserverspage .cs-limit-head{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-bottom:8px}
#cloudserverspage .cs-limit-head b{font-variant-numeric:tabular-nums;white-space:nowrap}
#cloudserverspage .cs-limit-bar{height:6px;border-radius:6px;background:color-mix(in srgb,var(--cs-blue) 18%,var(--cs-bg));overflow:hidden}
#cloudserverspage .cs-limit-bar span{display:block;height:100%;background:var(--cs-blue);border-radius:6px}
#cloudserverspage .cs-limit-bar.is-warn span{background:#d58b09}
#cloudserverspage .cs-limit-bar.is-full span{background:#dc4c4c}
#cloudserverspage .cs-limit small{display:block;margin-top:6px;color:var(--cs-muted);font-size:11px;overflow-wrap:anywhere}
#cloudserverspage .cs-limits h3{margin:18px 0 8px!important}
@media(max-width:760px){#cloudserverspage .cs-ri-grid{grid-template-columns:1fr}#cloudserverspage .cs-bk-grid{grid-template-columns:minmax(0,1fr) 90px;gap:12px}#cloudserverspage .cs-limits-grid{grid-template-columns:1fr 1fr}#cloudserverspage .cs-limits{padding:14px}}
@media(max-width:760px){#cloudserverspage .cs-rule-form{grid-template-columns:1fr 1fr}#cloudserverspage .cs-rule-form .cs-field:nth-child(5),#cloudserverspage .cs-rule-form>.cs-btn{grid-column:1/-1}#cloudserverspage .cs-ficha-head{margin-bottom:12px}#cloudserverspage .cs-dialog .cs-detail-grid{grid-template-columns:1fr}#cloudserverspage .cs-ficha-tabs .cs-tab{padding:9px 10px 12px}}
/* A compact empty state: choose a machine without a second promotional page. */
#cloudserverspage .cs-welcome{max-width:800px;margin:0 auto;padding:30px 0 44px}
#cloudserverspage.cs-welcome-active .cs-toolbar .cs-search,#cloudserverspage.cs-welcome-active .cs-toolbar .cs-count,#cloudserverspage.cs-welcome-active .cs-toolbar .cs-add{display:none}
#cloudserverspage .cs-welcome-heading{margin-bottom:20px}
#cloudserverspage .cs-welcome-heading h2{font-size:20px;line-height:1.3;font-weight:500;letter-spacing:-.35px}
#cloudserverspage .cs-welcome-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#cloudserverspage .cs-welcome-card{display:flex;align-items:flex-start;gap:16px;min-width:0;padding:22px;text-align:left;border:0;border-radius:12px;background:var(--dt-surface);color:var(--dt-text)}
#cloudserverspage .cs-welcome-card:hover:not(:disabled){border-color:var(--dt-border-strong);background:var(--dt-hover)}
#cloudserverspage .cs-welcome-card:focus-visible{outline:2px solid var(--dt-focus);outline-offset:3px}
#cloudserverspage .cs-welcome-card:disabled{opacity:.58;cursor:not-allowed}
#cloudserverspage .cs-welcome-icon{display:flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;border:0;border-radius:9px;color:var(--dt-muted);font-size:22px}
#cloudserverspage .cs-welcome-copy{display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start}
#cloudserverspage .cs-welcome-card-name{font-size:16px;font-weight:500;line-height:1.4}
#cloudserverspage .cs-welcome-description{display:block;margin-top:5px;color:var(--dt-muted);font-size:13px;line-height:1.5}
#cloudserverspage .cs-welcome-cta{display:block;margin-top:16px;font-size:12px;font-weight:500;color:var(--dt-text)}
#cloudserverspage .cs-welcome-permission{display:flex;align-items:center;gap:8px;margin:20px 0 0!important;color:var(--dt-muted);font-size:12px;line-height:1.6}
#cloudserverspage .cs-welcome-permission i{font-size:17px;flex-shrink:0}
#cloudserverspage .cs-price-details{margin-top:16px;border-top:1px solid var(--dt-border);padding-top:12px}
#cloudserverspage .cs-price-details summary{cursor:pointer;color:var(--dt-muted);font-size:12px}
#cloudserverspage .cs-price-details summary:focus-visible{outline:2px solid var(--dt-focus);outline-offset:3px}
#cloudserverspage .cs-price-details .cs-cost-breakdown{border-top:0;margin-top:0}
@media(max-width:760px){
  #cloudserverspage .cs-welcome{padding:16px 0 28px}
  #cloudserverspage .cs-welcome-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  #cloudserverspage .cs-welcome-card{padding:18px}
}
@media(forced-colors:active){
  #cloudserverspage .cs-welcome-card:focus-visible,#cloudserverspage .cs-price-details summary:focus-visible{outline:2px solid Highlight}
}

#cloudserverspage .cs-dialog.cs-dialog-machine{width:min(800px,calc(100% - 24px));max-width:calc(100% - 24px);max-height:88dvh;border-radius:10px}
#cloudserverspage .cs-dialog-machine .cs-dialog-head{padding:13px 18px;gap:10px}
#cloudserverspage .cs-dialog-machine .cs-dialog-head h2{font-size:16px;line-height:1.4}
#cloudserverspage .cs-dialog-machine .cs-dialog-body{padding:16px 18px}
#cloudserverspage .cs-dialog-machine .cs-dialog-foot{padding:11px 18px}
#cloudserverspage .cs-dialog-machine .cs-ficha-head{gap:8px;margin-bottom:12px}
#cloudserverspage .cs-dialog-machine .cs-ficha-head .cs-flex{gap:6px}
#cloudserverspage .cs-dialog-machine .cs-ficha-tabs{margin-bottom:14px}
#cloudserverspage .cs-dialog-machine .cs-ficha-tabs .cs-tab{padding:7px 10px 10px;font-size:12px}
#cloudserverspage .cs-dialog-machine .cs-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin:0}
#cloudserverspage .cs-dialog-machine .cs-detail-grid>div{min-width:0}
#cloudserverspage .cs-dialog-machine .cs-detail-grid dt{margin-bottom:3px;font-size:11px;line-height:1.4}
#cloudserverspage .cs-dialog-machine .cs-detail-grid dd{font-size:12px;line-height:1.5;overflow-wrap:anywhere}
#cloudserverspage .cs-dialog-machine .cs-ficha-actions{gap:6px;margin-top:12px}
#cloudserverspage .cs-dialog-machine .cs-btn{min-height:32px;padding:6px 10px;font-size:12px}
#cloudserverspage .cs-dialog-machine .cs-ficha-section h3{margin:13px 0 8px!important;font-size:13px}
#cloudserverspage .cs-dialog-machine .cs-divider{margin:14px 0}
#cloudserverspage .cs-dialog-machine .cs-port,#cloudserverspage .cs-dialog-machine .cs-bk-state{padding:12px;margin-bottom:10px}
#cloudserverspage .cs-dialog-machine .cs-os-notice{padding:11px 12px;margin-bottom:12px;gap:9px;font-size:12px}
#cloudserverspage .cs-dialog-machine .cs-access-connect,#cloudserverspage .cs-dialog-machine .cs-access-password-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
#cloudserverspage .cs-dialog-machine .cs-access-connect{margin-bottom:14px}
#cloudserverspage .cs-dialog-machine .cs-access-note{margin:10px 0 0!important;font-size:11px;line-height:1.65}
#cloudserverspage .cs-dialog-machine .cs-access-password{margin-top:14px;padding-top:14px;border-top:1px solid var(--cs-border)}
#cloudserverspage .cs-dialog-machine .cs-access-password-row output{min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:pre-wrap;font-size:12px}
#cloudserverspage .cs-dialog-machine .cs-access-password-row output:empty{display:none}
#cloudserverspage .cs-dialog-machine #cs-reset-box{margin:12px 0 0}
#cloudserverspage .cs-dialog-machine #cs-reset-box>div{min-width:0}
#cloudserverspage .cs-dialog-machine .cs-onetime{gap:6px;margin-top:7px}
#cloudserverspage .cs-dialog-machine .cs-onetime output{min-width:0;max-width:100%;font-size:12px}
#cloudserverspage .cs-dialog-machine .cs-access-advanced{margin-top:14px;border:0;border-radius:6px}
#cloudserverspage .cs-dialog-machine .cs-access-advanced>summary{padding:10px 12px;color:var(--cs-blue);font-size:12px;cursor:pointer;list-style-position:inside}
#cloudserverspage .cs-dialog-machine .cs-access-advanced>summary:focus-visible{outline:2px solid var(--cs-blue);outline-offset:2px}
#cloudserverspage .cs-dialog-machine .cs-access-advanced[open]>summary{border-bottom:1px solid var(--cs-border)}
#cloudserverspage .cs-dialog-machine .cs-access-advanced-body{padding:12px}
#cloudserverspage .cs-dialog-machine .cs-access-advanced-body>h3:first-child{margin-top:0!important}
#cloudserverspage .cs-dialog-machine .cs-access-advanced-body .cs-ficha-actions{margin-top:0}
#cloudserverspage .cs-dialog-machine .cs-access-dns th:last-child,#cloudserverspage .cs-dialog-machine .cs-access-dns td:last-child{text-align:left;white-space:normal}
@media(max-width:600px){
  #cloudserverspage .cs-dialog-machine .cs-dialog-head,#cloudserverspage .cs-dialog-machine .cs-dialog-foot{padding:12px 14px}
  #cloudserverspage .cs-dialog-machine .cs-dialog-body{padding:14px}
  #cloudserverspage .cs-dialog-machine .cs-detail-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  #cloudserverspage .cs-dialog-machine .cs-ficha-tabs .cs-tab{padding:7px 8px 9px}
}

#cloudserverspage .cs-table td:last-child{width:1%;white-space:nowrap}
/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Cloud Servers: el acento --cs-blue (pestaña, selección, totales) y el naranja (subrayado, botón crear) pasan a tinta; los
   enlaces siguen azules (--dt-link); sin sombras, sin elevación ni degradados en las tarjetas de bienvenida; iconos en cuadrado
   neutro. La consola (#cs-console-dialog, oscura) conserva un azul claro propio para no quedar tinta sobre negro. */
#cloudserverspage{--cs-blue:var(--dt-text,#111110);--cs-orange:var(--dt-text,#111110);--cs-soft-blue:var(--dt-hover);--cs-create-bg:var(--dt-cta,#111110);--cs-create-hover:var(--dt-cta-hover,#2b2b29);--cs-create-text:var(--dt-cta-fg,#fff)}
#cs-console-dialog{--cs-blue:#71c4f8}
#cloudserverspage .cs-link{color:var(--dt-link)}
#cloudserverspage .cs-btn-primary{background:var(--dt-cta);border-color:var(--dt-cta);color:var(--dt-cta-fg)}
#cloudserverspage .cs-btn-primary:hover{background:var(--dt-cta-hover);border-color:var(--dt-cta-hover);filter:none}
#cloudserverspage :is(#cs-add,#cs-create-submit,#cs-mb-submit),#cloudserverspage :is(#cs-add,#cs-create-submit,#cs-mb-submit):hover:not(:disabled){box-shadow:none}
#cloudserverspage .cs-add,#cloudserverspage .cs-step,#cloudserverspage .cs-summary,#cloudserverspage .cs-dialog{box-shadow:none}
#cloudserverspage .cs-heading-icon,#cloudserverspage .cs-empty-symbol{background:var(--dt-surface-2);color:var(--dt-muted);border:0}
#cloudserverspage .cs-tag{color:var(--dt-muted)}

}
/* end dui-template-style modules/cloudservers:0 */
/* dui-template-style {"key":"modules/configaccount:0","bytes":7655,"sha256":"bf4170042488284ed459546fc166809c15eb76b1b25abcec3169e186ae0de2dd","media":null,"source_sha256":"bf4170042488284ed459546fc166809c15eb76b1b25abcec3169e186ae0de2dd"} */
@scope (:root:has(template[data-dui-legacy-style="modules/configaccount:0"])) {

#el_cfg_stage {max-width:1200px;margin:0 auto;padding:28px 24px 64px;color:var(--dt-text);font-family:var(--font-sans);box-sizing:border-box;}
#el_cfg_stage * {box-sizing:border-box;}
#el_cfg_stage .cfg-header {display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:32px;}
#el_cfg_stage .cfg-eyebrow {margin:0 0 8px;color:var(--dt-muted);font-size:12px;}
#el_cfg_stage h1 {margin:0;font-size:clamp(28px,3.2vw,40px);font-weight:500;letter-spacing:-.04em;line-height:1.15;}
#el_cfg_stage .cfg-intro {margin:10px 0 0;max-width:58ch;color:var(--dt-muted);font-size:14px;line-height:1.6;}
#el_cfg_stage .cfg-header-link {display:inline-flex;align-items:center;gap:7px;padding:9px 12px;white-space:nowrap;border:1px solid var(--dt-border);border-radius:999px;color:var(--dt-text);text-decoration:none;font-size:12px;}
#el_cfg_stage .cfg-layout {display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:start;}
#el_cfg_stage .el-cfg-catpills {display:flex;flex-direction:column;gap:5px;position:sticky;top:20px;}
#el_cfg_stage .el-cfg-catpill {display:flex;align-items:center;gap:9px;width:100%;min-height:40px;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:var(--dt-muted);font:inherit;font-size:13px;text-align:left;cursor:pointer;}
#el_cfg_stage .el-cfg-catpill:hover {background:var(--dt-hover);color:var(--dt-text);}
#el_cfg_stage .el-cfg-catpill.is-active {background:var(--dt-active);color:var(--dt-text);font-weight:600;}
#el_cfg_stage .cfg-main {min-width:0;}
#el_cfg_stage .cfg-search {display:flex;align-items:center;gap:10px;border:1px solid var(--dt-border-strong);border-radius:12px;padding:0 14px;min-height:44px;background:var(--dt-surface);color:var(--dt-muted);margin-bottom:28px;}
#el_cfg_stage .cfg-search:focus-within {border-color:var(--dt-text);}
#el_cfg_stage #buscador {width:100%;min-width:0;padding:11px 0;background:transparent!important;color:var(--dt-text);border:0!important;border-radius:0!important;box-shadow:none!important;outline:0;font:inherit;font-size:13px;}
#el_cfg_stage #buscador::placeholder {color:var(--dt-muted);}
#el_cfg_stage .category-container {margin:0 0 28px!important;}
#el_cfg_stage .category-title {margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.035em;color:var(--dt-muted);}
#el_cfg_stage .row.flex-equal-height {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;}
#el_cfg_stage .divdeconfig {display:flex;min-width:0;width:auto;padding:0;margin:0!important;}
#el_cfg_stage .ocultar {display:none!important;}
#el_cfg_stage .divdeconfig>.card,#el_cfg_stage .divdeconfig>.btnhoverlink>.card {width:100%;height:100%;margin:0!important;border:1px solid var(--dt-border)!important;border-radius:16px!important;background:var(--dt-surface)!important;box-shadow:none!important;overflow:hidden;}
#el_cfg_stage .card-header {padding:18px 18px 0;background:transparent!important;border:0!important;}
#el_cfg_stage .card-header .row {margin:0;}
#el_cfg_stage .card-header .col-auto {padding:0;display:flex;align-items:center;gap:10px;min-width:0;}
#el_cfg_stage .card-header .fs-8 {display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border:1px solid var(--dt-border);border-radius:9px;background:var(--dt-surface-2);color:var(--dt-text);}
#el_cfg_stage .card-header .fs-8>span {font-size:16px!important;margin:0!important;color:inherit!important;}
#el_cfg_stage .card-header h5 {margin:0;font-size:14px;font-weight:600;line-height:1.4;}
#el_cfg_stage .card-body {padding:12px 18px 16px;}
#el_cfg_stage .card-text {margin:0;color:var(--dt-muted);font-size:12px;line-height:1.6;}
#el_cfg_stage .btnhoverlink {color:inherit;text-decoration:none;display:block;height:auto;}
#el_cfg_stage .card-body>.mt-2 {margin-top:14px!important;padding-top:10px!important;border-color:var(--dt-border)!important;}
#el_cfg_stage .linkmarc {display:flex;align-items:center;gap:8px;min-height:34px;padding:7px 8px!important;margin-inline:-8px;border-radius:7px;font-size:12px;font-weight:400;color:var(--dt-text);text-decoration:none;}
#el_cfg_stage .linkmarc .ti {margin:0!important;color:var(--dt-muted);}
#el_cfg_stage .linkmarc:hover {background:var(--dt-hover);}
#el_cfg_stage .linkmarc-text {min-width:0;overflow-wrap:anywhere;}
#el_cfg_stage #nohayresultsconfig {margin:0 0 24px;padding:32px 20px;border:1px dashed var(--dt-border-strong);border-radius:14px;text-align:center;color:var(--dt-muted);font-size:13px;}
#el_cfg_stage .cfg-assistant {margin-top:32px;border:1px solid var(--dt-border);border-radius:16px;background:var(--dt-surface);overflow:hidden;}
#el_cfg_stage .cfg-assistant summary {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px;cursor:pointer;list-style:none;}
#el_cfg_stage .cfg-assistant summary::-webkit-details-marker {display:none;}
#el_cfg_stage .cfg-assistant summary strong {display:block;font-size:13px;font-weight:600;}
#el_cfg_stage .cfg-assistant summary small {display:block;margin-top:4px;font-size:12px;line-height:1.5;color:var(--dt-muted);}
#el_cfg_stage .cfg-assistant[open] summary>.ti {transform:rotate(180deg);}
#el_cfg_stage .cfg-assistant-body {padding:0 18px 18px;}
#el_cfg_stage .el-cfg-composer {border:1px solid var(--dt-border-strong);border-radius:12px;padding:12px;background:var(--dt-surface);}
#el_cfg_stage .el-cfg-composer:focus-within {border-color:var(--dt-text);}
#el_cfg_stage #el_cfg_prompt {display:block;width:100%;min-height:68px;resize:vertical;border:0;background:transparent;color:var(--dt-text);font:inherit;font-size:13px;line-height:1.6;outline:0;box-shadow:none;}
#el_cfg_stage .el-cfg-composer-bar {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px;}
#el_cfg_stage .el-cfg-composer-left {display:flex;gap:5px;flex-wrap:wrap;}
#el_cfg_stage .el-cfg-chip {border:1px solid var(--dt-border);border-radius:999px;background:var(--dt-surface);color:var(--dt-muted);font:inherit;font-size:11px;padding:5px 8px;cursor:pointer;}
#el_cfg_stage .el-cfg-send {border:1px solid var(--dt-cta);border-radius:999px;background:var(--dt-cta);color:var(--dt-cta-fg);font:inherit;font-size:12px;padding:8px 12px;cursor:pointer;}
#el_cfg_stage .cfg-assistant-link {display:inline-block;margin-top:12px;font-size:12px;color:var(--dt-muted);text-underline-offset:3px;}
#el_cfg_stage .cfg-shortcuts {margin-top:24px;}
#el_cfg_stage .cfg-shortcuts summary {font-size:12px;color:var(--dt-muted);cursor:pointer;}
#el_cfg_stage .el-cfg-dock {display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
#el_cfg_stage .el-cfg-dock-item {display:inline-flex;align-items:center;gap:6px;border:1px solid var(--dt-border);border-radius:8px;padding:7px 10px;color:var(--dt-text);font-size:12px;text-decoration:none;}
#el_cfg_stage :is(button,a,summary):focus-visible {outline:2px solid var(--dt-text);outline-offset:3px;}
@media(max-width:900px){#el_cfg_stage .cfg-layout{grid-template-columns:1fr;gap:18px;}#el_cfg_stage .el-cfg-catpills{position:static;flex-direction:row;flex-wrap:wrap;}#el_cfg_stage .el-cfg-catpill{width:auto;}#el_cfg_stage .cfg-search{margin-bottom:22px;}}
@media(max-width:560px){#el_cfg_stage{padding:20px 14px 40px;}#el_cfg_stage .cfg-header{flex-direction:column;gap:16px;margin-bottom:24px;}#el_cfg_stage .row.flex-equal-height{grid-template-columns:1fr;}#el_cfg_stage .el-cfg-catpill{font-size:12px;padding:8px 10px;min-height:36px;}#el_cfg_stage .card-header{padding:16px 16px 0;}#el_cfg_stage .card-body{padding:10px 16px 14px;}}
@media(forced-colors:active){#el_cfg_stage :is(#buscador,#el_cfg_prompt):focus{outline:2px solid Highlight;}}

}
/* end dui-template-style modules/configaccount:0 */
/* dui-template-style {"key":"modules/configemail:0","bytes":20826,"sha256":"dd757953b7b3b85a88ee19bde6f4223d6964fc6562fdfe30085152d5a4644b8b","media":null,"source_sha256":"8d345b82c7f01206b142cc0f76718207f063c230a8cc37cccb4d33550acd00e4"} */
@scope (:root:has(template[data-dui-legacy-style="modules/configemail:0"])) {

    /* ── Config Email — design system propio (variables del theme, mismo estilo claro/oscuro) ── */
    .cfgmail-wrap { max-width: 980px; margin: 0 auto; }
    .cfgmail-wrap.cfgmail-permission-pending { min-height: 260px; }
    .cfgmail-wrap.cfgmail-permission-pending > * { visibility: hidden; }

    /* Header */
    .cfgmail-header { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
    .cfgmail-header__icon {
        width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
        background: var(--dt-surface-2);
        display: flex; align-items: center; justify-content: center;
    }
    .cfgmail-header__icon i { font-size: 22px; color: var(--dt-on-color); }
    .cfgmail-header h3 { margin: 0; font-weight: 700; font-size: 1.65rem; letter-spacing: -0.5px; color: var(--text-color); }
    .cfgmail-header__sub { font-size: 0.92rem; color: var(--text-secondary-color); margin: 0 0 26px 56px; line-height: 1.5; }

    /* Selector de modo: dos tarjetas grandes */
    .cfgmail-choices {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
        gap: 16px; margin-bottom: 26px;
    }
    .cfgmail-choice {
        display: flex; align-items: flex-start; gap: 14px; text-align: left;
        background: var(--module-color);
        border: 0;
        border-radius: 14px; padding: 20px;
        cursor: pointer; transition: all .2s;
        font-family: inherit; width: 100%;
    }
    .cfgmail-choice:hover { border-color: #93c5fd; box-shadow: none; transform: translateY(-1px); }
    .cfgmail-choice.is-active { border-color: #2563eb; box-shadow: none; background: rgba(37,99,235,.03); }
    .cfgmail-choice__icon {
        width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        background: var(--dt-surface-2);
        color: var(--dt-text); font-size: 1.35rem;
        opacity: .55; filter: grayscale(35%); transition: all .2s;
    }
    .cfgmail-choice:hover .cfgmail-choice__icon,
    .cfgmail-choice.is-active .cfgmail-choice__icon { opacity: 1; filter: none; }
    .cfgmail-choice__body { flex: 1; min-width: 0; }
    .cfgmail-choice__title { display: block; font-weight: 700; font-size: 0.98rem; color: var(--text-color); letter-spacing: -0.2px; }
    .cfgmail-choice__desc { display: block; font-size: 0.81rem; color: var(--text-secondary-color); margin-top: 5px; line-height: 1.45; }
    .cfgmail-choice__radio {
        width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
        border: 2px solid var(--border-color); background: transparent; transition: all .2s;
    }
    .cfgmail-choice.is-active .cfgmail-choice__radio {
        border-color: #2563eb; background: #2563eb;
        box-shadow: none;
    }

    /* Paneles */
    .cfgmail-panel { display: none; }
    .cfgmail-panel.is-visible { display: block; animation: dui-legacy-modules-configemail-cfgmailFadeIn .18s ease-out; }
    @keyframes dui-legacy-modules-configemail-cfgmailFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

    /* Bloques */
    .cfgmail-block {
        background: var(--module-color);
        border: 0;
        border-radius: 14px; padding: 22px 24px; margin-bottom: 16px;
        box-shadow: none;
    }
    .cfgmail-block__title {
        font-size: 0.95rem; font-weight: 700; color: var(--text-color);
        display: flex; align-items: center; gap: 10px; margin-bottom: 4px; letter-spacing: -0.2px;
    }
    .cfgmail-block__title i {
        width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        background: rgba(37,99,235,.1); color: #2563eb; font-size: 1rem;
    }
    .cfgmail-block__subtitle { font-size: 0.82rem; color: var(--text-secondary-color); margin: 0 0 18px 40px; line-height: 1.5; }

    /* Barra tipo "composer" (input + botón integrados) */
    .cfgmail-bar {
        display: flex; align-items: stretch; overflow: hidden;
        border: 0; border-radius: 10px;
        background: var(--bg-secondary-color);
        transition: border-color .15s, box-shadow .15s;
    }
    .cfgmail-bar:focus-within { border-color: #2563eb; box-shadow: none; }
    .cfgmail-bar input {
        flex: 1; min-width: 0; border: none; outline: none;
        padding: 11px 14px; font-size: 0.9rem; font-family: inherit;
        background: transparent; color: var(--text-color);
    }
    /* neutraliza los estilos globales de input/select del theme dentro de la barra */
    .cfgmail-bar input, .cfgmail-bar select {
        border: none !important; background-color: transparent !important;
        box-shadow: none !important; border-radius: 0 !important; outline: none !important;
        margin: 0 !important; height: auto !important;
    }
    .cfgmail-bar input::placeholder { color: var(--text-muted-color); }
    .cfgmail-bar__at {
        display: flex; align-items: center; padding: 0 4px;
        color: var(--text-muted-color); font-weight: 700; font-size: 0.95rem;
    }
    .cfgmail-bar select {
        border: none; outline: none; cursor: pointer;
        background: transparent; color: var(--text-color);
        font-size: 0.9rem; font-weight: 600; font-family: inherit;
        padding: 0 30px 0 6px; max-width: 46%;
        appearance: none; -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right 10px center;
    }
    /* El select nativo de dominios se conserva como fuente de datos y dUI.Select
       lo convierte en un dropdown accesible, buscable y coherente con el theme. */
    .cfgmail-bar > .dui-select {
        flex: 0 1 46%; align-self: stretch;
        width: auto; min-width: 190px; max-width: 46%;
    }
    .cfgmail-bar > .dui-select .dui-select__trigger {
        height: 100%; min-height: 42px;
        padding: 8px 12px 8px 8px;
        border: none; border-radius: 0; box-shadow: none;
        background: transparent; color: var(--text-color);
        font-size: 0.9rem; font-weight: 600;
    }
    .cfgmail-bar > .dui-select .dui-select__trigger:hover { background: var(--hover-color); }
    .cfgmail-bar > .dui-select.dui-select--open .dui-select__trigger {
        border: none; box-shadow: none; background: var(--hover-color);
    }
    .cfgmail-bar > .dui-select .dui-select__arrow { transition: transform .18s, color .18s; }
    .cfgmail-bar > .dui-select.dui-select--open .dui-select__arrow {
        color: #2563eb; transform: rotate(180deg);
    }
    .cfgmail-bar > .dui-select.dui-select--disabled .dui-select__trigger { background: transparent; }
    .cfgmail-bar__btn {
        border: none; cursor: pointer; white-space: nowrap;
        background: #2563eb; color: var(--dt-cta-fg);
        font-size: 0.88rem; font-weight: 600; font-family: inherit;
        padding: 0 22px; display: flex; align-items: center; gap: 6px;
        transition: opacity .15s;
    }
    .cfgmail-bar__btn:hover { opacity: .9; }
    .cfgmail-bar__btn:disabled { opacity: .5; cursor: not-allowed; }

    /* Botones */
    .cfgmail-btn {
        display: inline-flex; align-items: center; gap: 8px;
        border: none; border-radius: 10px; cursor: pointer;
        background: #2563eb; color: var(--dt-cta-fg);
        padding: 10px 24px; font-size: 0.88rem; font-weight: 600; font-family: inherit;
        transition: all .15s;
    }
    .cfgmail-btn:hover { opacity: .9; }
    .cfgmail-btn:disabled { opacity: .5; cursor: not-allowed; }
    .cfgmail-btn--ghost {
        background: transparent; color: #2563eb;
        border: 0;
    }
    .cfgmail-btn--ghost:hover { background: rgba(37,99,235,.08); opacity: 1; }
    .cfgmail-btn-locked { opacity: 0.5; cursor: not-allowed !important; }

    /* CTA comprar dominio */
    .cfgmail-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
    .cfgmail-cta .cfgmail-block__subtitle { margin-bottom: 0; }

    /* Metodo para configurar un correo externo */
    .cfgmail-external-methods {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px; margin-bottom: 16px;
    }
    .cfgmail-external-method {
        display: flex; align-items: center; gap: 11px; width: 100%;
        border: 0; border-radius: 11px;
        padding: 13px 15px; text-align: left; cursor: pointer;
        background: var(--module-color); color: var(--text-color);
        font: inherit; transition: border-color .15s, box-shadow .15s, background .15s;
    }
    .cfgmail-external-method:hover {
        border-color: #93c5fd; background: rgba(37,99,235,.03);
    }
    .cfgmail-external-method.is-active {
        border-color: #2563eb; background: rgba(37,99,235,.06);
        box-shadow: none;
    }
    .cfgmail-external-method__icon {
        width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        background: rgba(37,99,235,.1); color: #2563eb; font-size: 1rem;
    }
    .cfgmail-external-method__body { min-width: 0; }
    .cfgmail-external-method__title {
        display: block; font-size: .86rem; font-weight: 700; line-height: 1.25;
    }
    .cfgmail-external-method__desc {
        display: block; margin-top: 3px; color: var(--text-secondary-color);
        font-size: .75rem; line-height: 1.35;
    }

    /* Formulario SMTP / IMAP */
    .cfgmail-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .cfgmail-field { margin-bottom: 14px; }
    .cfgmail-label {
        font-size: 0.74rem; font-weight: 600; color: var(--text-secondary-color);
        margin-bottom: 5px; display: block; letter-spacing: 0.3px;
    }
    .cfgmail-input {
        width: 100%; padding: 10px 12px; box-sizing: border-box;
        border: 0; border-radius: 8px;
        font-size: 0.85rem; font-family: inherit;
        background: var(--bg-secondary-color); color: var(--text-color);
        outline: none; transition: border-color .2s, box-shadow .2s;
    }
    .cfgmail-input:focus { border-color: #2563eb; box-shadow: none; }
    .cfgmail-input[readonly] { opacity: .6; cursor: not-allowed; background: var(--hover-color); }
    .cfgmail-input[readonly]:focus { border-color: var(--border-color); box-shadow: none; }

    /* Ojito mostrar/ocultar contraseña */
    .cfgmail-passwrap { position: relative; }
    .cfgmail-passwrap .cfgmail-input { padding-right: 40px; }
    .cfgmail-passeye {
        position: absolute; top: 0; right: 0; height: 100%; width: 38px;
        border: none; background: transparent; cursor: pointer; padding: 0;
        display: flex; align-items: center; justify-content: center;
        color: var(--text-muted-color); font-size: 1.05rem; transition: color .15s;
    }
    .cfgmail-passeye:hover { color: var(--text-color); }
    select.cfgmail-input {
        appearance: none; -webkit-appearance: none; cursor: pointer;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right 10px center; padding-right: 34px;
    }
    .cfgmail-hostrow { display: grid; grid-template-columns: 1fr 110px; gap: 10px; }

    /* Interruptores */
    .cfgmail-switches { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-color); }
    .cfgmail-switch {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        font-size: 0.82rem; color: var(--text-secondary-color);
        min-height: 40px; margin: 0; cursor: pointer;
    }

    /* Aviso Mailjet */
    .cfgmail-note {
        display: flex; align-items: flex-start; gap: 10px;
        background: rgba(37,99,235,.08); border: 0;
        color: var(--text-color); border-radius: 10px;
        padding: 12px 14px; font-size: 0.84rem; line-height: 1.5; margin-bottom: 16px;
    }
    .cfgmail-note i { color: #2563eb; font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

    .cfgmail-save { display: flex; justify-content: flex-end; margin: 4px 0 10px 0; }

    /* Estado bloqueado: el agente ya tiene una conexion valida y solo su admin puede cambiarla. */
    .cfgmail-agent-email-lock {
        min-height: 260px; padding: 42px 28px;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        text-align: center; background: var(--module-color);
        border: 0; border-radius: 16px;
        box-shadow: none;
    }
    .cfgmail-agent-email-lock__icon {
        width: 58px; height: 58px; margin-bottom: 18px; border-radius: 16px;
        display: flex; align-items: center; justify-content: center;
        background: rgba(37,99,235,.1); color: #2563eb; font-size: 1.7rem;
    }
    .cfgmail-agent-email-lock h3 {
        margin: 0 0 9px; color: var(--text-color); font-size: 1.2rem; font-weight: 700;
    }
    .cfgmail-agent-email-lock p {
        max-width: 560px; margin: 0; color: var(--text-secondary-color);
        font-size: .92rem; line-height: 1.6;
    }

    @media (max-width: 767px) {
        .cfgmail-header__sub { margin-left: 0; }
        .cfgmail-external-methods { grid-template-columns: 1fr; }
        .cfgmail-grid2 { grid-template-columns: 1fr; }
        .cfgmail-block__subtitle { margin-left: 0; }
        .cfgmail-bar { flex-direction: column; }
        .cfgmail-bar select { max-width: 100%; padding: 11px 34px 11px 14px; }
        .cfgmail-bar > .dui-select {
            flex: none; align-self: stretch;
            width: 100%; min-width: 0; max-width: 100%;
            border-top: 1px solid var(--border-color);
        }
        .cfgmail-bar > .dui-select .dui-select__trigger { min-height: 42px; padding: 10px 14px; }
        .cfgmail-bar__btn { justify-content: center; padding: 11px 14px; }
        .cfgmail-bar__at { display: none; }
    }
/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Email Settings: fuera el azul #2563eb, el degradado azul-violeta de los iconos y las sombras. Iconos en cuadrado neutro,
   tarjetas de modo y de método con línea de 1 px (seleccionada = línea en tinta, sin halo ni salto), "Create email", "Search
   settings" y "Save" en tinta (uno por panel), "Open Web Services" ghost de 34 px, foco con la línea de foco gris, avisos de
   Mailjet y Cloudflare en superficie con línea fina e interruptores con pista gris o tinta y pulgar plano. Ámbito: #cfgmail-root.
   Ninguna clase ni id que lea el JS cambia (is-active, is-visible, d-none, cfgmail-btn-locked, cfgmail-is-agent-email-locked,
   dui-select--open, hidden). Las reglas del @media de móvil (padding del botón de la barra, columnas) no se tocan aquí. */

/* cabecera: cuadrado neutro de 42 px con el glifo en gris */
#cfgmail-root .cfgmail-header__icon { background: var(--dt-surface-2); border: 0; border-radius: 10px; }
#cfgmail-root .cfgmail-header__icon i { color: var(--dt-muted); font-size: 20px; }

/* selector de modo: línea de 1 px (padding +1 para que nada se mueva), sin elevación; activa = línea en tinta */
#cfgmail-root .cfgmail-choice { border: 0; border-radius: var(--dt-radius-lg); padding: 21px; transition: border-color .15s ease, background-color .15s ease; }
#cfgmail-root .cfgmail-choice:hover { border-color: var(--dt-border-strong); box-shadow: none; transform: none; }
#cfgmail-root .cfgmail-choice.is-active { border-color: var(--dt-text); box-shadow: none; background: var(--module-color); }
#cfgmail-root .cfgmail-choice__icon { border-radius: 10px; background: var(--dt-surface-2); border: 0; color: var(--dt-muted); font-size: 1.2rem; opacity: 1; filter: none; }
#cfgmail-root .cfgmail-choice:hover .cfgmail-choice__icon, #cfgmail-root .cfgmail-choice.is-active .cfgmail-choice__icon { color: var(--dt-text); }
#cfgmail-root .cfgmail-choice__title { font-weight: 600; }
#cfgmail-root .cfgmail-choice__radio { border: 1px solid var(--dt-border-strong); }
#cfgmail-root .cfgmail-choice.is-active .cfgmail-choice__radio { border: 5px solid var(--dt-surface); background: var(--dt-cta); outline: 1px solid var(--dt-cta); box-shadow: none; }

/* bloques: superficie con línea fina y sin sombra; icono del título en cuadrado neutro */
#cfgmail-root .cfgmail-block { border-color: var(--dt-border); border-radius: var(--dt-radius-lg); box-shadow: none; }
#cfgmail-root .cfgmail-block__title { font-weight: 600; }
#cfgmail-root .cfgmail-block__title i { background: var(--dt-surface-2); border: 0; color: var(--dt-muted); }

/* barra composer: línea fina fuerte, foco gris sin halo azul; flecha del dUI.Select abierto en tinta; botón integrado en tinta */
#cfgmail-root .cfgmail-bar { border-color: var(--dt-border-strong); border-radius: var(--dt-radius); }
#cfgmail-root .cfgmail-bar:focus-within { border-color: var(--dt-focus); box-shadow: none; }
#cfgmail-root .cfgmail-bar > .dui-select.dui-select--open .dui-select__arrow { color: var(--dt-text); }
#cfgmail-root .cfgmail-bar__btn { background: var(--dt-cta); color: var(--dt-cta-fg); font-size: 13px; transition: background-color .15s ease, opacity .15s ease; }
#cfgmail-root .cfgmail-bar__btn:hover:not(:disabled) { background: var(--dt-cta-hover); opacity: 1; }

/* botones: Save en tinta de 34 px; "Open Web Services" ghost con línea fina fuerte. El hover no pisa la opacidad de
   :disabled ni de .cfgmail-btn-locked (agentes sin permiso) */
#cfgmail-root .cfgmail-btn { height: 34px; padding: 0 16px; border-radius: var(--dt-radius); background: var(--dt-cta); color: var(--dt-cta-fg); font-size: 13px; transition: background-color .15s ease, opacity .15s ease; }
#cfgmail-root .cfgmail-btn:hover:not(:disabled):not(.cfgmail-btn-locked) { background: var(--dt-cta-hover); opacity: 1; }
#cfgmail-root .cfgmail-btn--ghost { background: transparent; color: var(--dt-text); border: 0; }
#cfgmail-root .cfgmail-btn--ghost:hover:not(:disabled):not(.cfgmail-btn-locked) { background: var(--dt-hover); color: var(--dt-text); }

/* método del correo externo: misma tarjeta que el selector de modo, a menor escala */
#cfgmail-root .cfgmail-external-method { border-color: var(--dt-border); border-radius: 10px; }
#cfgmail-root .cfgmail-external-method:hover { border-color: var(--dt-border-strong); background: var(--module-color); }
#cfgmail-root .cfgmail-external-method.is-active { border-color: var(--dt-text); background: var(--module-color); box-shadow: none; }
#cfgmail-root .cfgmail-external-method__icon { background: var(--dt-surface-2); border: 0; color: var(--dt-muted); }
#cfgmail-root .cfgmail-external-method.is-active .cfgmail-external-method__icon { color: var(--dt-text); }
#cfgmail-root .cfgmail-external-method__title { font-weight: 600; }

/* campos SMTP e IMAP: línea fina fuerte, foco con la línea de foco gris y sin halo */
#cfgmail-root .cfgmail-input { border-color: var(--dt-border-strong); }
#cfgmail-root .cfgmail-input:focus { border-color: var(--dt-focus); box-shadow: none; }
#cfgmail-root .cfgmail-input[readonly], #cfgmail-root .cfgmail-input[readonly]:focus { border-color: var(--dt-border); box-shadow: none; }

/* Mismo interruptor compartido que Seguridad en profile.html: form-switch + form-check-input.
   El estado marcado, el pulgar, el foco y el movimiento vienen del tema global. */
#cfgmail-root .cfgmail-switches { border-top: 1px solid var(--dt-border); }
#cfgmail-root .cfgmail-switch .form-check { flex-shrink: 0; margin-bottom: 0; }
#cfgmail-root .cfgmail-switch .form-check-input:not(:checked) {
    background-color: var(--dt-surface-2) !important;
    border-color: var(--dt-border-strong) !important;
}

/* avisos de Mailjet y Cloudflare: superficie con línea fina fuerte, icono gris (como .alert en §14) */
#cfgmail-root .cfgmail-note { background: var(--module-color); border: 0; border-radius: var(--dt-radius); }
#cfgmail-root .cfgmail-note i { color: var(--dt-muted); }

/* agente bloqueado: sin sombra, candado en cuadrado neutro */
#cfgmail-root .cfgmail-agent-email-lock { border-color: var(--dt-border); border-radius: var(--dt-radius-lg); box-shadow: none; }
#cfgmail-root .cfgmail-agent-email-lock__icon { border-radius: 12px; background: var(--dt-surface-2); border: 0; color: var(--dt-muted); }
#cfgmail-root .cfgmail-agent-email-lock h3 { font-weight: 600; }

}
/* end dui-template-style modules/configemail:0 */
/* dui-template-style {"key":"modules/connectors:0","bytes":798,"sha256":"27389f95b32fda60aeaccc049a0bd1cbf9d6273df3ccb10ab88f4e644fef2b4d","media":null,"source_sha256":"27389f95b32fda60aeaccc049a0bd1cbf9d6273df3ccb10ab88f4e644fef2b4d"} */
@scope (:root:has(template[data-dui-legacy-style="modules/connectors:0"])) {

#cn_page{ --cn-pri:var(--dt-cta); --cn-bg:var(--dt-surface); --cn-bor:var(--dt-border); }
#cn_page .cn-apps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:16px; }
#cn_page .cn-app{ border:0; border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:12px; background:var(--cn-bg); }
#cn_page .cn-app-top{ display:flex; align-items:center; gap:12px; }
#cn_page .cn-app-ico{ width:40px; height:40px; border-radius:10px; background:var(--dt-surface-2); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex:0 0 40px; }
#cn_page .cn-app h5{ margin:0; font-size:1rem; }
#cn_page .cn-app p{ color:var(--dt-muted); margin:0; font-size:.875rem; line-height:1.5; flex:1; }
#cn_page .cn-app button{ align-self:flex-start; }

}
/* end dui-template-style modules/connectors:0 */
/* dui-template-style {"key":"modules/control-add_leads_file:0","bytes":21774,"sha256":"f48f613cca1496de37698d583ab915390636d72ed326961ddd4e35a46f1ca665","media":null,"source_sha256":"831466620d058457f3f2612efc00cd776ef84b1a58d70cafe4c635405f701de6"} */
@scope (:root:has(template[data-dui-legacy-style="modules/control-add_leads_file:0"])) {

/* File import uses the CRM's Inter typography and shared light/dark tokens. */
.ei{--ei-surface:var(--dt-surface,#fff);--ei-text:var(--dt-text,#171717);--ei-muted:var(--dt-muted,#616161);--ei-border:var(--dt-border,rgba(15,15,15,.12));--ei-soft:var(--dt-hover,#f4f4f3);max-width:1160px;margin:0 auto;padding:32px 36px 56px;color:var(--ei-text);font-family:var(--font-sans);font-size:13px;line-height:1.5}
.ei *{box-sizing:border-box}.ei [hidden]{display:none!important}.ei h1,.ei h2,.ei h3,.ei p{margin:0}.ei h1{font-size:27px;font-weight:600;letter-spacing:-.6px;line-height:1.25}.ei h2{font-size:18px;font-weight:600;letter-spacing:-.25px;margin-bottom:8px}.ei h3{font-size:15px;font-weight:600;margin-bottom:6px}.ei p{color:var(--ei-muted);max-width:78ch}.ei-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:28px}.ei-header p{margin-top:7px}.ei-link{display:inline-flex;align-items:center;gap:6px;color:var(--ei-muted);background:none;border:0;padding:3px 0;font:inherit;cursor:pointer;text-decoration:none}.ei-link:hover{color:var(--ei-text);text-decoration:underline}.ei-steps{display:flex;gap:32px;padding:0 0 20px;margin:0 0 28px;list-style:none;border-bottom:1px solid var(--ei-border);color:var(--ei-muted)}.ei-steps li{display:flex;gap:8px;align-items:center}.ei-steps li>span:first-child{display:grid;place-items:center;width:24px;height:24px;background:var(--ei-soft);border:0;border-radius:50%;font-size:11px}.ei-steps [aria-current=step]{color:var(--ei-text);font-weight:500}.ei-steps [aria-current=step]>span:first-child{background:var(--ei-text);color:var(--ei-surface);border-color:var(--ei-text)}
.ei-drop{border:1px dashed var(--ei-border);border-radius:12px;background:var(--ei-surface);margin:20px 0 24px}.ei-drop.is-dragging{background:var(--ei-soft);border-color:var(--ei-text)}.ei-upload{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;width:100%;padding:34px 24px;background:none;border:0;color:inherit;font:inherit;cursor:pointer}.ei-upload>i{font-size:35px;color:var(--ei-muted);margin-bottom:6px}.ei-upload strong{font-size:16px;font-weight:500}.ei-upload>span{color:var(--ei-muted);font-size:12px}.ei-file-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0 20px;border-bottom:1px solid var(--ei-border);margin-bottom:24px}.ei-file-meta strong{overflow-wrap:anywhere;font-weight:500}.ei-file-meta p{font-size:12px;margin-top:3px}.ei-setup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 24px}.ei-field{min-width:0}.ei-field label{display:block;font-weight:500;margin-bottom:7px}.ei-field p{font-size:12px;margin-top:7px}.ei-full{grid-column:1/-1}.ei input:not([type=checkbox]),.ei select,.ei textarea{display:block;width:100%;min-height:38px;padding:8px 10px;border:1px solid var(--ei-border);border-radius:7px;color:var(--ei-text);background:var(--ei-surface);font:inherit;line-height:1.4;box-shadow:none}.ei textarea{resize:vertical;min-height:72px}.ei textarea::placeholder,.ei input::placeholder{color:var(--ei-muted);opacity:.8}.ei select{padding-right:28px}.ei button:focus-visible,.ei a:focus-visible,.ei summary:focus-visible,.ei input:focus-visible,.ei select:focus-visible,.ei textarea:focus-visible{outline:2px solid var(--dt-focus,var(--ei-text));outline-offset:3px}.ei button:disabled,.ei select:disabled,.ei input:disabled,.ei textarea:disabled{opacity:.5;cursor:default}.ei-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:8px 15px;border:0;border-radius:7px;background:var(--ei-surface);color:var(--ei-text);font:inherit;font-weight:500;cursor:pointer}.ei-button:hover:not(:disabled){background:var(--ei-soft)}.ei-button.ei-primary{background:var(--ei-text);color:var(--ei-surface);border-color:var(--ei-text)}.ei-button.ei-primary:hover:not(:disabled){opacity:.9}.ei-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:24px}.ei-actions>.ei-note{margin-right:auto}.ei-note{color:var(--ei-muted);font-size:12px}.ei-message{padding:13px 16px;border:0;border-left:3px solid var(--dt-blue,#0081e0);border-radius:6px;background:var(--ei-surface);margin:0 0 22px;white-space:pre-line;overflow-wrap:anywhere}.ei-message.is-error{border-left-color:var(--dt-danger,#d94949)}
.ei-preview{margin-top:22px;border-top:1px solid var(--ei-border);border-bottom:1px solid var(--ei-border)}.ei summary{cursor:pointer;font-weight:500;padding:13px 0}.ei-preview h3{margin:12px 0 8px}.ei-table-scroll{width:100%;overflow:auto;margin-bottom:15px;border:0;border-radius:8px}.ei table{border-collapse:collapse;width:100%;text-align:left;font-size:12px}.ei th{font-weight:500;color:var(--ei-muted);background:var(--ei-soft);white-space:nowrap}.ei th,.ei td{padding:10px 12px;border-bottom:1px solid var(--ei-border);vertical-align:top}.ei tr:last-child td{border-bottom:0}.ei-preview td{max-width:280px;min-width:100px;overflow-wrap:anywhere;white-space:pre-wrap}.ei-preview .ei-row-number{min-width:45px;color:var(--ei-muted);font-variant-numeric:tabular-nums}.ei-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.ei-warnings{border-left:3px solid var(--dt-warning,#b86513);padding:10px 15px;margin-bottom:22px;background:var(--ei-soft);border-radius:4px}.ei-warnings p+p{margin-top:6px}.ei-questions{border:0;border-radius:10px;background:var(--ei-surface);padding:22px;margin:0 0 26px}.ei-questions .ei-field{margin-top:18px}.ei-questions .ei-button{margin-top:18px}.ei-question-options{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0}.ei-question-options button{font-weight:400;min-height:30px;padding:5px 10px;font-size:12px}.ei-group{padding:0 0 22px;margin:0 0 24px;border-bottom:1px solid var(--ei-border)}.ei-group-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 14px}.ei-group-header h3{font-size:16px;margin:0}.ei-group-header p{font-size:12px;margin-top:4px}.ei-group-destination{max-width:280px;min-width:180px}.ei-tag{font-size:11px;padding:3px 7px;border-radius:5px;background:var(--ei-soft);color:var(--ei-muted);display:inline-block;font-weight:400;margin-left:8px}.ei-mapping{min-width:650px}.ei-mapping th:nth-child(1){width:34%}.ei-mapping th:nth-child(2){width:38%}.ei-mapping th:nth-child(3){width:22%}.ei-mapping select,.ei-mapping input{font-size:12px;min-height:34px}.ei-mapping .ei-new-field{margin-top:7px}.ei-mapping .ei-remove{padding:7px;min-height:32px;color:var(--ei-muted)}.ei-related{display:block;margin-top:4px;color:var(--ei-muted);font-size:11px}.ei-refine{margin-top:4px}.ei-refine .ei-button{margin-top:10px}.ei-import-review{margin-top:26px;padding-top:22px;border-top:1px solid var(--ei-border);display:flex;align-items:center;justify-content:space-between;gap:26px}.ei-import-review p{font-size:12px;margin-top:5px}.ei-import-review .ei-button{flex:none}.ei-import-review strong{font-weight:500}.ei progress{display:block;width:100%;height:8px;appearance:none;border:0;border-radius:8px;overflow:hidden;background:var(--ei-soft);accent-color:var(--ei-text)}.ei progress::-webkit-progress-bar{background:var(--ei-soft)}.ei progress::-webkit-progress-value{background:var(--ei-text);border-radius:8px}.ei progress::-moz-progress-bar{background:var(--ei-text)}#ei-progress-count{margin-top:10px}.ei-counters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:28px 0;padding-bottom:25px;border-bottom:1px solid var(--ei-border)}.ei-counters dt{color:var(--ei-muted);font-size:12px;font-weight:400}.ei-counters dd{font-size:26px;font-weight:500;font-variant-numeric:tabular-nums;margin:4px 0 0}.ei-progress-actions{justify-content:flex-start}.ei-results{margin-top:24px}.ei-results td{overflow-wrap:anywhere}.ei-results .is-error{color:var(--dt-danger,#d94949)}.ei-empty{padding:18px 0;color:var(--ei-muted)}
@media(max-width:760px){.ei{padding:22px 18px 36px}.ei-header{gap:12px}.ei-header h1{font-size:24px}.ei-header>.ei-link{font-size:11px;text-align:right}.ei-steps{gap:20px}.ei-setup{grid-template-columns:1fr}.ei-full{grid-column:auto}.ei-section-head,.ei-group-header,.ei-import-review{flex-direction:column;gap:12px}.ei-group-destination{max-width:none;width:100%}.ei-import-review .ei-button{width:100%}.ei-counters{gap:12px}.ei-counters dd{font-size:22px}.ei-questions{padding:16px}.ei-file-meta{align-items:flex-start}.ei-file-meta .ei-link{flex:none;font-size:11px}.ei-actions>.ei-note{width:100%}.ei-upload{padding:28px 16px}}
.ei-mapping .ei-related{max-width:300px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:4.5em;overflow:auto}
.ei-group-operation{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:16px}.ei-group-operation p{font-size:12px;margin-top:6px}.ei-counters{grid-template-columns:repeat(5,minmax(0,1fr))}
.ei-column-review{margin:0 0 26px;padding:20px;border:0;border-left:3px solid var(--dt-warning,#b86513);border-radius:8px;background:var(--ei-surface)}.ei-column-review h4{font-size:13px;font-weight:600;margin:20px 0 8px}.ei-column-review>p{font-size:12px}.ei-column-decision{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,1.25fr) auto;gap:16px;align-items:start;padding:14px 0;border-top:1px solid var(--ei-border)}.ei-column-info strong,.ei-column-omitted strong{font-size:12px;font-weight:500;overflow-wrap:anywhere}.ei-column-info .ei-related{white-space:pre-wrap;overflow-wrap:anywhere;max-height:4.5em;overflow:auto}.ei-column-assignment{display:grid;gap:7px}.ei-column-assignment select,.ei-column-assignment input{min-height:34px;font-size:12px}.ei-column-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.ei-column-actions .ei-button{font-size:12px;min-height:34px}.ei-column-actions .ei-link{font-size:12px}.ei-column-omitted{display:flex;justify-content:space-between;gap:16px;align-items:start;padding:12px 0;border-top:1px solid var(--ei-border)}.ei-column-omitted p{font-size:12px;margin-top:6px}.ei-column-omitted .ei-link{flex:none;font-size:12px}
@media(max-width:760px){.ei-group-header{align-items:flex-start}.ei-group-operation{grid-template-columns:1fr}.ei-counters{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.ei-column-review{padding:16px}.ei-column-decision{grid-template-columns:1fr;gap:10px}.ei-column-actions{flex-direction:row;align-items:center;justify-content:space-between}}
@media(prefers-reduced-motion:reduce){.ei *{scroll-behavior:auto!important;transition:none!important}}

/* A single workspace keeps the file, destination and review in one reading order. */
.ei {
  max-width: 1100px;
  padding: 28px 30px 48px;
}
.ei-header { margin-bottom: 24px; }
.ei-header p { font-size: 14px; }
.ei-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 0;
  margin-bottom: 24px;
  border: 0;
}
.ei-steps li { min-width: 0; gap: 10px; }
.ei-steps li:not(:last-child)::after {
  content: "";
  flex: 1;
  min-width: 12px;
  height: 1px;
  margin-left: 6px;
  background: var(--ei-border);
}
.ei-steps li > span:first-child {
  flex: none;
  width: 28px;
  height: 28px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ei-steps [aria-current=step] { font-weight: 600; }
.ei > section {
  min-width: 0;
  padding: 26px;
  border: 0;
  border-radius: 14px;
  background: var(--ei-surface);
}
.ei-drop {
  margin: 18px 0 24px;
  border-radius: 10px;
  background: var(--ei-soft);
}
.ei-drop:focus-within,
.ei-drop:hover:has(.ei-upload:not(:disabled)),
.ei-drop.is-dragging { border-color: var(--ei-text); }
.ei-upload {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 4px;
  padding: 24px;
  text-align: left;
}
.ei-upload > i {
  grid-row: 1 / 3;
  align-self: center;
  margin: 0;
  font-size: 34px;
  color: var(--ei-text);
}
.ei-upload strong { align-self: end; font-size: 15px; font-weight: 600; }
.ei-upload > span { align-self: start; font-size: 13px; }
.ei-file-meta {
  padding: 16px 18px;
  margin: 18px 0 24px;
  border: 0;
  border-radius: 10px;
  background: var(--ei-soft);
}
.ei-file-meta > div { min-width: 0; }
.ei-file-meta strong { display: block; font-size: 14px; font-weight: 600; }
.ei-file-meta .ei-link { flex: none; }
.ei-setup { gap: 20px; }
.ei-field label { font-weight: 600; }
.ei-field p { line-height: 1.6; }
.ei input:not([type=checkbox]),
.ei select,
.ei textarea { min-height: 42px; padding: 10px 12px; border-radius: 8px; }
.ei select { padding-right: 28px; }
.ei textarea { min-height: 84px; }
.ei input:not([type=checkbox]):enabled:hover,
.ei select:enabled:hover,
.ei textarea:enabled:hover { border-color: var(--ei-muted); }
.ei-button { min-height: 42px; padding: 10px 16px; border-radius: 8px; }
.ei-button.ei-primary { font-weight: 600; }
.ei-actions { padding-top: 18px; border-top: 1px solid var(--ei-border); }
.ei-actions > .ei-note:empty { display: none; }
.ei-preview { border-bottom: 0; }
.ei-preview summary { padding: 14px 0; }
.ei-table-scroll { scrollbar-width: thin; }
.ei th { font-weight: 600; }
.ei-mapping select,
.ei-mapping input { min-height: 36px; padding: 8px 10px; }
.ei-mapping select { padding-right: 28px; }
.ei-refine { padding-top: 4px; }
.ei-import-review strong { font-weight: 600; }
/* Keep decisions compact; the selected option supplies the answer directly. */
.ei-warnings {
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--dt-warning, #b86513) 24%, var(--ei-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--dt-warning, #b86513) 5%, var(--ei-surface));
}
.ei-warnings summary { padding: 12px 0; font-size: 12px; }
#ei-warning-items { padding: 0 0 14px; }
.ei-questions {
  padding: 20px;
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--dt-cta, #006fbe) 25%, var(--ei-border));
  background: color-mix(in srgb, var(--dt-cta, #006fbe) 3%, var(--ei-surface));
}
.ei-questions > p { font-size: 12px; }
.ei-question { padding: 0; margin: 20px 0 0; border: 0; }
.ei-question + .ei-question { padding-top: 18px; border-top: 1px solid var(--ei-border); }
.ei-question legend { float: left; width: 100%; margin: 0 0 10px; font: inherit; font-weight: 500; line-height: 1.6; }
.ei-question legend + * { clear: both; }
.ei-question-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ei-question .ei-question-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 12px;
  max-width: 100%;
  border: 0;
  border-radius: 9px;
  background: var(--ei-surface);
  color: var(--ei-muted);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
}
.ei-question-option span { overflow-wrap: anywhere; }
.ei-question .ei-question-option:has(:checked) {
  color: var(--ei-text);
  border-color: var(--dt-cta, #006fbe);
  background: color-mix(in srgb, var(--dt-cta, #006fbe) 10%, var(--ei-surface));
}
.ei-question .ei-question-option:has(:focus-visible) { outline: 2px solid var(--dt-focus, var(--ei-text)); outline-offset: 3px; }
.ei-question .ei-question-option:hover { border-color: var(--ei-muted); }
.ei-question .ei-question-option input[type=radio] { appearance: auto; flex: none; width: 15px; height: 15px; min-height: 0; padding: 0; margin: 0; accent-color: var(--dt-cta, #006fbe); }
.ei-question textarea { min-height: 62px; margin-top: 10px; }
.ei-questions > .ei-button { margin-top: 20px; }
.ei-new-fields-review { margin: 18px 0; padding: 15px 17px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--dt-cta, #006fbe) 3%, var(--ei-surface)); }
.ei-new-fields-review fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ei-new-fields-review legend { padding: 0; margin: 0 0 5px; font-weight: 600; }
.ei-new-fields-review p { font-size: 12px; line-height: 1.55; }
.ei-new-fields-review .ei-new-field-list { margin: 9px 0 12px; overflow-wrap: anywhere; color: var(--ei-text); }
.ei-new-field-options { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
.ei-new-field-options label { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 0; padding: 9px 12px; border: 0; border-radius: 8px; background: var(--ei-surface); cursor: pointer; font-size: 12px; }
.ei-new-field-options label:has(:checked) { border-color: var(--dt-cta, #006fbe); background: color-mix(in srgb, var(--dt-cta, #006fbe) 10%, var(--ei-surface)); }
.ei-new-field-options label:has(:focus-visible) { outline: 2px solid var(--dt-focus, var(--ei-text)); outline-offset: 3px; }
.ei-new-field-options input[type=radio] { flex: none; width: 15px; height: 15px; min-height: 0; padding: 0; margin: 0; accent-color: var(--dt-cta, #006fbe); }
.ei-new-fields-review .ei-field-action-help { margin-top: 10px; }
.ei[data-busy=analyze] #ei-analyze { opacity: .8; }
.ei[data-busy=analyze] #ei-analyze > i {
  flex: none;
  width: 15px;
  height: 15px;
  border: 0;
  border-right-color: transparent;
  border-radius: 50%;
  animation: dui-legacy-modules-control-add_leads_file-ei-analysis-spin .8s linear infinite;
}
.ei[data-busy=analyze] #ei-analyze > i::before { display: none; }
@keyframes dui-legacy-modules-control-add_leads_file-ei-analysis-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  .ei { padding: 20px 14px 32px; }
  .ei-header { margin-bottom: 20px; }
  .ei-header h1 { font-size: 24px; }
  .ei-header p { font-size: 13px; }
  .ei-steps { gap: 10px; margin-bottom: 20px; font-size: 12px; }
  .ei-steps li { gap: 6px; }
  .ei-steps li:not(:last-child)::after { margin-left: 0; min-width: 6px; }
  .ei-steps li > span:first-child { width: 24px; height: 24px; }
  .ei > section { padding: 18px 16px; border-radius: 10px; }
  .ei-upload { padding: 20px 16px; column-gap: 12px; }
  .ei-upload > i { font-size: 28px; }
  .ei-upload strong { font-size: 14px; }
  .ei-upload > span { font-size: 12px; }
  .ei-file-meta { padding: 14px; flex-wrap: wrap; gap: 8px; }
  .ei-file-meta .ei-link { min-height: 32px; font-size: 12px; }
  .ei-actions { gap: 8px; }
  .ei-actions > .ei-button { flex: 1; }
  .ei-counters { row-gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ei[data-busy=analyze] #ei-analyze > i { animation: none; }
}

/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Importar un archivo: ya iba con los tokens --dt-*; aquí solo se quitan los restos de color. La barra izquierda azul (--dt-blue)
   del aviso #ei-message y las barras ámbar de 3 px de .ei-warnings y .ei-column-review pasan a la línea fina (el error lleva el
   rojo en el texto y en un borde suave, los avisos el ámbar en el texto o en un punto), las mezclas de --dt-cta de las preguntas,
   opciones marcadas y campos nuevos quedan en superficie + línea (la marcada en tinta), el CTA usa --dt-cta, --dt-cta-fg y
   --dt-cta-hover, y botones y selects bajan a 34 y 36 px. El botón de quitar fila (.ei-remove) y los radios no se tocan. */
#entity-file-import > section { border-radius: var(--dt-radius-lg); }
#entity-file-import .ei-message { border-left-width: 1px; border-left-color: var(--ei-border); border-radius: var(--dt-radius); }
#entity-file-import .ei-message.is-error { border-color: color-mix(in srgb, var(--dt-danger) 35%, var(--ei-border)); color: var(--dt-tint-danger-tx, var(--dt-danger)); }
#entity-file-import .ei-warnings { border-color: var(--dt-border-strong); background: var(--ei-surface); border-radius: var(--dt-radius-lg); }
#entity-file-import .ei-warnings summary { color: var(--dt-tint-warn-tx, var(--dt-warning)); font-weight: 500; }
#entity-file-import .ei-column-review { border: 0; border-radius: var(--dt-radius-lg); background: var(--ei-surface); }
#entity-file-import .ei-column-review > h3::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--dt-warning); vertical-align: middle; }
#entity-file-import .ei-questions { border-color: var(--ei-border); background: var(--ei-surface); border-radius: var(--dt-radius-lg); }
#entity-file-import .ei-question .ei-question-option { border-radius: var(--dt-radius); }
#entity-file-import .ei-question .ei-question-option:hover { border-color: var(--dt-border-strong); }
#entity-file-import .ei-question .ei-question-option:has(:checked) { color: var(--dt-text); border-color: var(--dt-text); background: var(--dt-surface-2); }
#entity-file-import .ei-new-fields-review { border-color: var(--ei-border); background: var(--ei-surface); border-radius: var(--dt-radius-lg); }
#entity-file-import .ei-new-field-options label { border-radius: var(--dt-radius); }
#entity-file-import .ei-new-field-options label:has(:checked) { border-color: var(--dt-text); background: var(--dt-surface-2); }
#entity-file-import .ei-button:not(.ei-remove) { min-height: 34px; padding: 0 14px; border-radius: var(--dt-radius); }
#entity-file-import .ei-button:hover:not(:disabled) { background: var(--dt-hover); }
#entity-file-import .ei-button.ei-primary { background: var(--dt-cta); color: var(--dt-cta-fg); border-color: var(--dt-cta); }
#entity-file-import .ei-button.ei-primary:hover:not(:disabled) { background: var(--dt-cta-hover); border-color: var(--dt-cta-hover); opacity: 1; }
#entity-file-import input:not([type=checkbox]):not([type=radio]):not([type=file]),
#entity-file-import select { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
#entity-file-import .ei-counters dd,
#entity-file-import #ei-progress-count { font-variant-numeric: tabular-nums; }
/* ti-sparkles no existe en v2tabler.css: el botón Analizar salía sin icono; glifo de ti-wand (\ebcb) */
#entity-file-import #ei-analyze .ti-sparkles::before { content: "\ebcb"; }

}
/* end dui-template-style modules/control-add_leads_file:0 */
/* dui-template-style {"key":"modules/control-add_leads_filev2:0","bytes":22171,"sha256":"cd7ba779f68e60d436f3dc2f8abb9c40e50675d9c0394b2fc5c3ee82b3093196","media":null,"source_sha256":"43a7ecb4a71e64cfe19281caef78d50419da7032351293c8712c8896bfa88ca5"} */
@scope (:root:has(template[data-dui-legacy-style="modules/control-add_leads_filev2:0"])) {

/* File import uses the CRM's Inter typography and shared light/dark tokens. */
.ei{--ei-surface:var(--dt-surface,#fff);--ei-text:var(--dt-text,#171717);--ei-muted:var(--dt-muted,#616161);--ei-border:var(--dt-border,rgba(15,15,15,.12));--ei-soft:var(--dt-hover,#f4f4f3);max-width:1160px;margin:0 auto;padding:32px 36px 56px;color:var(--ei-text);font-family:var(--font-sans,Inter,sans-serif);font-size:13px;line-height:1.5}
.ei *{box-sizing:border-box}.ei [hidden]{display:none!important}.ei h1,.ei h2,.ei h3,.ei p{margin:0}.ei h1{font-size:27px;font-weight:600;letter-spacing:-.6px;line-height:1.25}.ei h2{font-size:18px;font-weight:600;letter-spacing:-.25px;margin-bottom:8px}.ei h3{font-size:15px;font-weight:600;margin-bottom:6px}.ei p{color:var(--ei-muted);max-width:78ch}.ei-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:28px}.ei-header p{margin-top:7px}.ei-link{display:inline-flex;align-items:center;gap:6px;color:var(--ei-muted);background:none;border:0;padding:3px 0;font:inherit;cursor:pointer;text-decoration:none}.ei-link:hover{color:var(--ei-text);text-decoration:underline}.ei-steps{display:flex;gap:32px;padding:0 0 20px;margin:0 0 28px;list-style:none;border-bottom:1px solid var(--ei-border);color:var(--ei-muted)}.ei-steps li{display:flex;gap:8px;align-items:center}.ei-steps li>span:first-child{display:grid;place-items:center;width:24px;height:24px;background:var(--ei-soft);border:1px solid var(--ei-border);border-radius:50%;font-size:11px}.ei-steps [aria-current=step]{color:var(--ei-text);font-weight:500}.ei-steps [aria-current=step]>span:first-child{background:var(--ei-text);color:var(--ei-surface);border-color:var(--ei-text)}
.ei-drop{border:1px dashed var(--ei-border);border-radius:12px;background:var(--ei-surface);margin:20px 0 24px}.ei-drop.is-dragging{background:var(--ei-soft);border-color:var(--ei-text)}.ei-upload{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;width:100%;padding:34px 24px;background:none;border:0;color:inherit;font:inherit;cursor:pointer}.ei-upload>i{font-size:35px;color:var(--ei-muted);margin-bottom:6px}.ei-upload strong{font-size:16px;font-weight:500}.ei-upload>span{color:var(--ei-muted);font-size:12px}.ei-file-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0 20px;border-bottom:1px solid var(--ei-border);margin-bottom:24px}.ei-file-meta strong{overflow-wrap:anywhere;font-weight:500}.ei-file-meta p{font-size:12px;margin-top:3px}.ei-setup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 24px}.ei-field{min-width:0}.ei-field label{display:block;font-weight:500;margin-bottom:7px}.ei-field p{font-size:12px;margin-top:7px}.ei-full{grid-column:1/-1}.ei input:not([type=checkbox]),.ei select,.ei textarea{display:block;width:100%;min-height:38px;padding:8px 10px;border:1px solid var(--ei-border);border-radius:7px;color:var(--ei-text);background:var(--ei-surface);font:inherit;line-height:1.4;box-shadow:none}.ei textarea{resize:vertical;min-height:72px}.ei textarea::placeholder,.ei input::placeholder{color:var(--ei-muted);opacity:.8}.ei select{padding-right:28px}.ei button:focus-visible,.ei a:focus-visible,.ei summary:focus-visible,.ei input:focus-visible,.ei select:focus-visible,.ei textarea:focus-visible{outline:2px solid var(--dt-focus,var(--ei-text));outline-offset:3px}.ei button:disabled,.ei select:disabled,.ei input:disabled,.ei textarea:disabled{opacity:.5;cursor:default}.ei-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:8px 15px;border:1px solid var(--ei-border);border-radius:7px;background:var(--ei-surface);color:var(--ei-text);font:inherit;font-weight:500;cursor:pointer}.ei-button:hover:not(:disabled){background:var(--ei-soft)}.ei-button.ei-primary{background:var(--ei-text);color:var(--ei-surface);border-color:var(--ei-text)}.ei-button.ei-primary:hover:not(:disabled){opacity:.9}.ei-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:24px}.ei-actions>.ei-note{margin-right:auto}.ei-note{color:var(--ei-muted);font-size:12px}.ei-message{padding:13px 16px;border:1px solid var(--ei-border);border-left:3px solid var(--dt-blue,#0081e0);border-radius:6px;background:var(--ei-surface);margin:0 0 22px;white-space:pre-line;overflow-wrap:anywhere}.ei-message.is-error{border-left-color:var(--dt-danger,#d94949)}
.ei-preview{margin-top:22px;border-top:1px solid var(--ei-border);border-bottom:1px solid var(--ei-border)}.ei summary{cursor:pointer;font-weight:500;padding:13px 0}.ei-preview h3{margin:12px 0 8px}.ei-table-scroll{width:100%;overflow:auto;margin-bottom:15px;border:1px solid var(--ei-border);border-radius:8px}.ei table{border-collapse:collapse;width:100%;text-align:left;font-size:12px}.ei th{font-weight:500;color:var(--ei-muted);background:var(--ei-soft);white-space:nowrap}.ei th,.ei td{padding:10px 12px;border-bottom:1px solid var(--ei-border);vertical-align:top}.ei tr:last-child td{border-bottom:0}.ei-preview td{max-width:280px;min-width:100px;overflow-wrap:anywhere;white-space:pre-wrap}.ei-preview .ei-row-number{min-width:45px;color:var(--ei-muted);font-variant-numeric:tabular-nums}.ei-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.ei-warnings{border-left:3px solid var(--dt-warning,#b86513);padding:10px 15px;margin-bottom:22px;background:var(--ei-soft);border-radius:4px}.ei-warnings p+p{margin-top:6px}.ei-questions{border:1px solid var(--ei-border);border-radius:10px;background:var(--ei-surface);padding:22px;margin:0 0 26px}.ei-questions .ei-field{margin-top:18px}.ei-questions .ei-button{margin-top:18px}.ei-question-options{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0}.ei-question-options button{font-weight:400;min-height:30px;padding:5px 10px;font-size:12px}.ei-group{padding:0 0 22px;margin:0 0 24px;border-bottom:1px solid var(--ei-border)}.ei-group-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 14px}.ei-group-header h3{font-size:16px;margin:0}.ei-group-header p{font-size:12px;margin-top:4px}.ei-group-destination{max-width:280px;min-width:180px}.ei-tag{font-size:11px;padding:3px 7px;border-radius:5px;background:var(--ei-soft);color:var(--ei-muted);display:inline-block;font-weight:400;margin-left:8px}.ei-mapping{min-width:650px}.ei-mapping th:nth-child(1){width:34%}.ei-mapping th:nth-child(2){width:38%}.ei-mapping th:nth-child(3){width:22%}.ei-mapping select,.ei-mapping input{font-size:12px;min-height:34px}.ei-mapping .ei-new-field{margin-top:7px}.ei-mapping .ei-remove{padding:7px;min-height:32px;color:var(--ei-muted)}.ei-related{display:block;margin-top:4px;color:var(--ei-muted);font-size:11px}.ei-refine{margin-top:4px}.ei-refine .ei-button{margin-top:10px}.ei-import-review{margin-top:26px;padding-top:22px;border-top:1px solid var(--ei-border);display:flex;align-items:center;justify-content:space-between;gap:26px}.ei-import-review p{font-size:12px;margin-top:5px}.ei-import-review .ei-button{flex:none}.ei-import-review strong{font-weight:500}.ei progress{display:block;width:100%;height:8px;appearance:none;border:0;border-radius:8px;overflow:hidden;background:var(--ei-soft);accent-color:var(--ei-text)}.ei progress::-webkit-progress-bar{background:var(--ei-soft)}.ei progress::-webkit-progress-value{background:var(--ei-text);border-radius:8px}.ei progress::-moz-progress-bar{background:var(--ei-text)}#ei-progress-count{margin-top:10px}.ei-counters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:28px 0;padding-bottom:25px;border-bottom:1px solid var(--ei-border)}.ei-counters dt{color:var(--ei-muted);font-size:12px;font-weight:400}.ei-counters dd{font-size:26px;font-weight:500;font-variant-numeric:tabular-nums;margin:4px 0 0}.ei-progress-actions{justify-content:flex-start}.ei-results{margin-top:24px}.ei-results td{overflow-wrap:anywhere}.ei-results .is-error{color:var(--dt-danger,#d94949)}.ei-empty{padding:18px 0;color:var(--ei-muted)}
@media(max-width:760px){.ei{padding:22px 18px 36px}.ei-header{gap:12px}.ei-header h1{font-size:24px}.ei-header>.ei-link{font-size:11px;text-align:right}.ei-steps{gap:20px}.ei-setup{grid-template-columns:1fr}.ei-full{grid-column:auto}.ei-section-head,.ei-group-header,.ei-import-review{flex-direction:column;gap:12px}.ei-group-destination{max-width:none;width:100%}.ei-import-review .ei-button{width:100%}.ei-counters{gap:12px}.ei-counters dd{font-size:22px}.ei-questions{padding:16px}.ei-file-meta{align-items:flex-start}.ei-file-meta .ei-link{flex:none;font-size:11px}.ei-actions>.ei-note{width:100%}.ei-upload{padding:28px 16px}}
.ei-mapping .ei-related{max-width:300px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:4.5em;overflow:auto}
.ei-group-operation{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:16px}.ei-group-operation p{font-size:12px;margin-top:6px}.ei-counters{grid-template-columns:repeat(5,minmax(0,1fr))}
.ei-column-review{margin:0 0 26px;padding:20px;border:1px solid var(--ei-border);border-left:3px solid var(--dt-warning,#b86513);border-radius:8px;background:var(--ei-surface)}.ei-column-review h4{font-size:13px;font-weight:600;margin:20px 0 8px}.ei-column-review>p{font-size:12px}.ei-column-decision{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,1.25fr) auto;gap:16px;align-items:start;padding:14px 0;border-top:1px solid var(--ei-border)}.ei-column-info strong,.ei-column-omitted strong{font-size:12px;font-weight:500;overflow-wrap:anywhere}.ei-column-info .ei-related{white-space:pre-wrap;overflow-wrap:anywhere;max-height:4.5em;overflow:auto}.ei-column-assignment{display:grid;gap:7px}.ei-column-assignment select,.ei-column-assignment input{min-height:34px;font-size:12px}.ei-column-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.ei-column-actions .ei-button{font-size:12px;min-height:34px}.ei-column-actions .ei-link{font-size:12px}.ei-column-omitted{display:flex;justify-content:space-between;gap:16px;align-items:start;padding:12px 0;border-top:1px solid var(--ei-border)}.ei-column-omitted p{font-size:12px;margin-top:6px}.ei-column-omitted .ei-link{flex:none;font-size:12px}
@media(max-width:760px){.ei-group-header{align-items:flex-start}.ei-group-operation{grid-template-columns:1fr}.ei-counters{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.ei-column-review{padding:16px}.ei-column-decision{grid-template-columns:1fr;gap:10px}.ei-column-actions{flex-direction:row;align-items:center;justify-content:space-between}}
@media(prefers-reduced-motion:reduce){.ei *{scroll-behavior:auto!important;transition:none!important}}

/* A single workspace keeps the file, destination and review in one reading order. */
.ei {
  max-width: 1100px;
  padding: 28px 30px 48px;
}
.ei-header { margin-bottom: 24px; }
.ei-header p { font-size: 14px; }
.ei-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 0;
  margin-bottom: 24px;
  border: 0;
}
.ei-steps li { min-width: 0; gap: 10px; }
.ei-steps li:not(:last-child)::after {
  content: "";
  flex: 1;
  min-width: 12px;
  height: 1px;
  margin-left: 6px;
  background: var(--ei-border);
}
.ei-steps li > span:first-child {
  flex: none;
  width: 28px;
  height: 28px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ei-steps [aria-current=step] { font-weight: 600; }
.ei > section {
  min-width: 0;
  padding: 26px;
  border: 1px solid var(--ei-border);
  border-radius: 14px;
  background: var(--ei-surface);
}
.ei-drop {
  margin: 18px 0 24px;
  border-radius: 10px;
  background: var(--ei-soft);
}
.ei-drop:focus-within,
.ei-drop:hover:has(.ei-upload:not(:disabled)),
.ei-drop.is-dragging { border-color: var(--ei-text); }
.ei-upload {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 4px;
  padding: 24px;
  text-align: left;
}
.ei-upload > i {
  grid-row: 1 / 3;
  align-self: center;
  margin: 0;
  font-size: 34px;
  color: var(--ei-text);
}
.ei-upload strong { align-self: end; font-size: 15px; font-weight: 600; }
.ei-upload > span { align-self: start; font-size: 13px; }
.ei-file-meta {
  padding: 16px 18px;
  margin: 18px 0 24px;
  border: 1px solid var(--ei-border);
  border-radius: 10px;
  background: var(--ei-soft);
}
.ei-file-meta > div { min-width: 0; }
.ei-file-meta strong { display: block; font-size: 14px; font-weight: 600; }
.ei-file-meta .ei-link { flex: none; }
.ei-setup { gap: 20px; }
.ei-field label { font-weight: 600; }
.ei-field p { line-height: 1.6; }
.ei input:not([type=checkbox]),
.ei select,
.ei textarea { min-height: 42px; padding: 10px 12px; border-radius: 8px; }
.ei select { padding-right: 28px; }
.ei textarea { min-height: 84px; }
.ei input:not([type=checkbox]):enabled:hover,
.ei select:enabled:hover,
.ei textarea:enabled:hover { border-color: var(--ei-muted); }
.ei-button { min-height: 42px; padding: 10px 16px; border-radius: 8px; }
.ei-button.ei-primary { font-weight: 600; }
.ei-actions { padding-top: 18px; border-top: 1px solid var(--ei-border); }
.ei-actions > .ei-note:empty { display: none; }
.ei-preview { border-bottom: 0; }
.ei-preview summary { padding: 14px 0; }
.ei-table-scroll { scrollbar-width: thin; }
.ei th { font-weight: 600; }
.ei-mapping select,
.ei-mapping input { min-height: 36px; padding: 8px 10px; }
.ei-mapping select { padding-right: 28px; }
.ei-refine { padding-top: 4px; }
.ei-import-review strong { font-weight: 600; }
/* Keep decisions compact; the selected option supplies the answer directly. */
.ei-warnings {
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--dt-warning, #b86513) 24%, var(--ei-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--dt-warning, #b86513) 5%, var(--ei-surface));
}
.ei-warnings summary { padding: 12px 0; font-size: 12px; }
#ei-warning-items { padding: 0 0 14px; }
.ei-questions {
  padding: 20px;
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--dt-cta, #006fbe) 25%, var(--ei-border));
  background: color-mix(in srgb, var(--dt-cta, #006fbe) 3%, var(--ei-surface));
}
.ei-questions > p { font-size: 12px; }
.ei-question { padding: 0; margin: 20px 0 0; border: 0; }
.ei-question + .ei-question { padding-top: 18px; border-top: 1px solid var(--ei-border); }
.ei-question legend { float: left; width: 100%; margin: 0 0 10px; font: inherit; font-weight: 500; line-height: 1.6; }
.ei-question legend + * { clear: both; }
.ei-question-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ei-question .ei-question-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 12px;
  max-width: 100%;
  border: 1px solid var(--ei-border);
  border-radius: 9px;
  background: var(--ei-surface);
  color: var(--ei-muted);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
}
.ei-question-option span { overflow-wrap: anywhere; }
.ei-question .ei-question-option:has(:checked) {
  color: var(--ei-text);
  border-color: var(--dt-cta, #006fbe);
  background: color-mix(in srgb, var(--dt-cta, #006fbe) 10%, var(--ei-surface));
}
.ei-question .ei-question-option:has(:focus-visible) { outline: 2px solid var(--dt-focus, var(--ei-text)); outline-offset: 3px; }
.ei-question .ei-question-option:hover { border-color: var(--ei-muted); }
.ei-question .ei-question-option input[type=radio] { appearance: auto; flex: none; width: 15px; height: 15px; min-height: 0; padding: 0; margin: 0; accent-color: var(--dt-cta, #006fbe); }
.ei-question textarea { min-height: 62px; margin-top: 10px; }
.ei-questions > .ei-button { margin-top: 20px; }
.ei-new-fields-review { margin: 18px 0; padding: 15px 17px; border: 1px solid color-mix(in srgb, var(--dt-cta, #006fbe) 22%, var(--ei-border)); border-radius: 10px; background: color-mix(in srgb, var(--dt-cta, #006fbe) 3%, var(--ei-surface)); }
.ei-new-fields-review fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ei-new-fields-review legend { padding: 0; margin: 0 0 5px; font-weight: 600; }
.ei-new-fields-review p { font-size: 12px; line-height: 1.55; }
.ei-new-fields-review .ei-new-field-list { margin: 9px 0 12px; overflow-wrap: anywhere; color: var(--ei-text); }
.ei-new-field-options { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
.ei-new-field-options label { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 0; padding: 9px 12px; border: 1px solid var(--ei-border); border-radius: 8px; background: var(--ei-surface); cursor: pointer; font-size: 12px; }
.ei-new-field-options label:has(:checked) { border-color: var(--dt-cta, #006fbe); background: color-mix(in srgb, var(--dt-cta, #006fbe) 10%, var(--ei-surface)); }
.ei-new-field-options label:has(:focus-visible) { outline: 2px solid var(--dt-focus, var(--ei-text)); outline-offset: 3px; }
.ei-new-field-options input[type=radio] { flex: none; width: 15px; height: 15px; min-height: 0; padding: 0; margin: 0; accent-color: var(--dt-cta, #006fbe); }
.ei-new-fields-review .ei-field-action-help { margin-top: 10px; }
.ei[data-busy=analyze] #ei-analyze { opacity: .8; }
.ei[data-busy=analyze] #ei-analyze > i {
  flex: none;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: dui-legacy-modules-control-add_leads_filev2-ei-analysis-spin .8s linear infinite;
}
.ei[data-busy=analyze] #ei-analyze > i::before { display: none; }
@keyframes dui-legacy-modules-control-add_leads_filev2-ei-analysis-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  .ei { padding: 20px 14px 32px; }
  .ei-header { margin-bottom: 20px; }
  .ei-header h1 { font-size: 24px; }
  .ei-header p { font-size: 13px; }
  .ei-steps { gap: 10px; margin-bottom: 20px; font-size: 12px; }
  .ei-steps li { gap: 6px; }
  .ei-steps li:not(:last-child)::after { margin-left: 0; min-width: 6px; }
  .ei-steps li > span:first-child { width: 24px; height: 24px; }
  .ei > section { padding: 18px 16px; border-radius: 10px; }
  .ei-upload { padding: 20px 16px; column-gap: 12px; }
  .ei-upload > i { font-size: 28px; }
  .ei-upload strong { font-size: 14px; }
  .ei-upload > span { font-size: 12px; }
  .ei-file-meta { padding: 14px; flex-wrap: wrap; gap: 8px; }
  .ei-file-meta .ei-link { min-height: 32px; font-size: 12px; }
  .ei-actions { gap: 8px; }
  .ei-actions > .ei-button { flex: 1; }
  .ei-counters { row-gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ei[data-busy=analyze] #ei-analyze > i { animation: none; }
}

/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Importar un archivo: ya iba con los tokens --dt-*; aquí solo se quitan los restos de color. La barra izquierda azul (--dt-blue)
   del aviso #ei-message y las barras ámbar de 3 px de .ei-warnings y .ei-column-review pasan a la línea fina (el error lleva el
   rojo en el texto y en un borde suave, los avisos el ámbar en el texto o en un punto), las mezclas de --dt-cta de las preguntas,
   opciones marcadas y campos nuevos quedan en superficie + línea (la marcada en tinta), el CTA usa --dt-cta, --dt-cta-fg y
   --dt-cta-hover, y botones y selects bajan a 34 y 36 px. El botón de quitar fila (.ei-remove) y los radios no se tocan. */
#entity-file-import > section { border-radius: var(--dt-radius-lg); }
#entity-file-import .ei-message { border-left-width: 1px; border-left-color: var(--ei-border); border-radius: var(--dt-radius); }
#entity-file-import .ei-message.is-error { border-color: color-mix(in srgb, var(--dt-danger) 35%, var(--ei-border)); color: var(--dt-tint-danger-tx, var(--dt-danger)); }
#entity-file-import .ei-warnings { border-color: var(--dt-border-strong); background: var(--ei-surface); border-radius: var(--dt-radius-lg); }
#entity-file-import .ei-warnings summary { color: var(--dt-tint-warn-tx, var(--dt-warning)); font-weight: 500; }
#entity-file-import .ei-column-review { border: 1px solid var(--dt-border-strong); border-radius: var(--dt-radius-lg); background: var(--ei-surface); }
#entity-file-import .ei-column-review > h3::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--dt-warning); vertical-align: middle; }
#entity-file-import .ei-questions { border-color: var(--ei-border); background: var(--ei-surface); border-radius: var(--dt-radius-lg); }
#entity-file-import .ei-question .ei-question-option { border-radius: var(--dt-radius); }
#entity-file-import .ei-question .ei-question-option:hover { border-color: var(--dt-border-strong); }
#entity-file-import .ei-question .ei-question-option:has(:checked) { color: var(--dt-text); border-color: var(--dt-text); background: var(--dt-surface-2); }
#entity-file-import .ei-new-fields-review { border-color: var(--ei-border); background: var(--ei-surface); border-radius: var(--dt-radius-lg); }
#entity-file-import .ei-new-field-options label { border-radius: var(--dt-radius); }
#entity-file-import .ei-new-field-options label:has(:checked) { border-color: var(--dt-text); background: var(--dt-surface-2); }
#entity-file-import .ei-button:not(.ei-remove) { min-height: 34px; padding: 0 14px; border-radius: var(--dt-radius); }
#entity-file-import .ei-button:hover:not(:disabled) { background: var(--dt-hover); }
#entity-file-import .ei-button.ei-primary { background: var(--dt-cta); color: var(--dt-cta-fg); border-color: var(--dt-cta); }
#entity-file-import .ei-button.ei-primary:hover:not(:disabled) { background: var(--dt-cta-hover); border-color: var(--dt-cta-hover); opacity: 1; }
#entity-file-import input:not([type=checkbox]):not([type=radio]):not([type=file]),
#entity-file-import select { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
#entity-file-import .ei-counters dd,
#entity-file-import #ei-progress-count { font-variant-numeric: tabular-nums; }
/* ti-sparkles no existe en v2tabler.css: el botón Analizar salía sin icono; glifo de ti-wand (\ebcb) */
#entity-file-import #ei-analyze .ti-sparkles::before { content: "\ebcb"; }

}
/* end dui-template-style modules/control-add_leads_filev2:0 */
/* dui-template-style {"key":"modules/control-companyconfig:0","bytes":28683,"sha256":"2ff15cbafb798d27a18de33b7603a587fbe2a8cfd3111477556e9b2fde585ffa","media":null,"source_sha256":"2ff15cbafb798d27a18de33b7603a587fbe2a8cfd3111477556e9b2fde585ffa"} */
@scope (:root:has(template[data-dui-legacy-style="modules/control-companyconfig:0"])) {

.handlersortable {
cursor: grab;
}

.select-container select[disabled] {
cursor: not-allowed;
color: var(--dt-muted);
}

input[disabled] {
cursor: not-allowed;
color: var(--dt-muted);
}

#inpuselect_optionsdiv {
padding: 10px;
margin-top: 10px;
background: var(--hover-color);
}
.divoption_for_select {
    margin-bottom:5px;
}

#inpuselect_optionsdivya {
padding: 5px;
}

.profile-sidebar__user-data {
position: relative;
padding: 20px 20px 16px 20px;
text-align: center;
}

.profile-sidebar__username {
position: relative;
display: inline-block;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100%;
padding: 16px 0px 0px;
overflow: hidden;
font-size: var(--font-size-3);
margin-top: var(--spacing-1);
}

.profile-sidebar__email {
position: relative;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100%;
font-size: var(--font-size-2);
padding: 8px 0px 13px;
overflow: hidden;
}

.profile-sidebar__type {
position: relative;
}

.profile-sidebar__type>span {
display: inline-block;
font-family: 'Varela Round';
font-size: var(--font-size-1);
line-height: 20px;
color: var(--white-color);
background: var(--brand-color);
padding: 0 7px;
border-radius: 3px;
white-space: nowrap;
text-overflow: ellipsis;
text-transform: uppercase;
overflow: hidden;
}

.profile-sidebar {
position: relative;
display: flex;
flex-flow: column nowrap;
width: 100%;
height: 100%;
padding: 0;
background: transparent;
}

.addinputxt {
background: var(--input-color);
border: 0;
}

.profile-sidebar__drag-handle {
position: absolute;
right: 0;
left: auto;
width: 4px;
height: 100%;
border-right: 1px solid rgba(0, 0, 0, 0.1);
box-sizing: border-box;
z-index: 10;
}

.profile-sidebar__header {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 40px;
color: var(--white-color);
background: rgba(69, 77, 92, 0.7);
}

.profile-sidebar__header>span {
font-size: var(--font-size-3);
font-weight: 500;
}

.profile-sidebar__account {
display: flex;
width: 100%;
height: auto;
background: transparent;
}

.profile-sidebar__account-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
transform: translate3d(0, 0, 0);
}

.profile-sidebar__account-bg>span {
background-size: cover;
background-position: center;
width: 110%;
height: 110%;
left: -5%;
top: -5%;
display: block;
position: absolute;
filter: blur(10px);
}

.profile-sidebar__account-bg::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: transparent;
}

.profile-sidebar__account-avatar {
position: relative;
width: 136px;
height: 136px;
padding: 4px;
margin: 0 auto;
background-color: var(--white-color);
border-radius: 100%;
cursor: pointer;
}

.profile-sidebar__account-avatar>img {
display: block;
width: 128px;
height: 128px;
object-fit: cover;
border-radius: 100%;
}

.profile-sidebar__nav {
display: flex;
flex-flow: column nowrap;
}

.profile-sidebar__nav-item {
display: flex;
flex-flow: row nowrap;
align-items: center;
font-size: var(--font-size-2);
line-height: 50px;
padding: 0 var(--spacing-1);
color: var(--text-color);
background: transparent;
cursor: pointer;
transition: background 200ms ease-in-out;
user-select: none;
}

.profile-sidebar__nav-item:hover {
background: var(--white-color);
}

.profile-sidebar__nav-item.is-active {
color: var(--white-color);
background: rgba(69, 77, 92, 0.7);
}

.profile-sidebar__nav-item svg {
width: 24px;
height: 24px;
margin-right: var(--spacing-1);
}

.profile-content {
display: flex;
flex-flow: column nowrap;
padding: 0;
background: var(--white-color);
}

.profile__header {
position: relative;
display: block;
padding: var(--spacing-2) var(--spacing-2) 0;

border-bottom: 1px solid #eaeaea;
border-color: var(--white-color);
overflow-x: auto;
overflow-y: hidden;

}

.profile__header::-webkit-scrollbar {
height: 4px;
width: 4px;
}

.profile__header::-webkit-scrollbar-thumb {
background: rgba(0, 75, 236, 0.15);
}

.soyinpptt {
text-overflow: ellipsis;
white-space: nowrap;
}

.profile__nav {
display: flex;
flex-flow: row nowrap;
}

.profile__nav-item {
position: relative;
height: 35px;
font-size: var(--font-size-2);
padding: var(--spacing-05) var(--spacing-1) 0 var(--spacing-1);
margin-right: var(--spacing-1);
cursor: pointer;
user-select: none;

}

.profile__nav-item.is-active::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 2px solid var(--brand-color);
}

.profile__body {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}

.profile__body>.row {
height: auto;
}

.profile-block {
padding: var(--spacing-2) var(--spacing-3);
}

.profile-block__header {
font-size: var(--font-size-2);
color: var(--text-color);
margin: var(--spacing-05) 0;
}

.profile-control {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
margin-top: var(--spacing-1);
}

.profile-control__label {
display: block;
flex: 0 0 auto;
width: 100px;
font-size: var(--font-size-1);
padding-right: 15px;
white-space: nowrap;
}

.profile-control__label span {
color: var(--red-color);
}

.profile-control__text {
padding: var(--spacing-05) 0;
}

.profile-control__input {
position: relative;
width: 235px;
box-shadow: none;
background-color: var(--dt-surface-2);
height: 32px;
position: relative;
border-radius: 3px;
transition: box-shadow 200ms ease-in-out;
}

.profile-control__input input {
width: 100%;
box-sizing: border-box;
line-height: 31px;
font-size: var(--font-size-1);
height: 31px;
color: var(--dt-text);
background-color: transparent;
padding: 0px 35px 0px 10px;
margin: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
border-image: initial;
border-radius: 3px;
text-overflow: ellipsis;
transition: color 200ms ease-in-out;
}

.profile-control__input input:focus {
outline: 0;
}

.profile-control__input input:hover,
.profile-control__input input:focus {
box-shadow: 0 0 0 1px var(--dt-focus);
}

.profile-control__input input[disabled] {
color: var(--dt-muted);
}

.profile-control__input input~svg {
position: absolute;
top: 7px;
right: 10px;
width: 16px;
height: 16px;
opacity: 0;
pointer-events: none;
}

.profile-control__input:not(.profile-control__input--email) input:hover~svg {
opacity: 0.8;
}

.profile-control__select-block {
display: flex;
flex-flow: row wrap;
align-items: center;
width: 235px;
font-size: var(--font-size-1);
}

.profile-control__select-block .profile-control__select {
flex: 1 1 0;
width: auto;
}

.profile-control__select-block.is-birthdate .profile-control__select {
float: left;
min-width: 24px;
margin-right: 5px;
}

.profile-control__select-block.is-birthdate .profile-control__select:last-child {
min-width: 85px;
margin-right: 0;
}

.profile-control__select-block.is-birthdate .menu-option {
padding-right: 0 !important;
padding-left: 0 !important;
text-align: center;
}

.profile-control__select-block.is-birthdate .menu-option.is-selected {
background: var(--dt-surface-2);
}

.profile-control__select-block.is-birthdate .menu-option.is-selected::before {
content: none !important;
}

.profile-control__select button {
border: 0;
border-radius: 3px;
line-height: 32px;
padding-left: 10px;
text-align: left;
transition: border-color .1s;
width: 100%;
height: 35px;
}

.profile-control__select button svg {
float: right;
margin: 10px;
}

.profile-control__select .menu {
max-height: 200px;
border: 0;
border-radius: 3px;
overflow-x: hidden;
overflow-y: auto;
}

.profile-save-btn {
margin: 0 !important;
}



/* NOTIFICATIONS TAB
------------------------------- */
.notifications--module-color {
height: 100%;
background-color: var(--white-color);
}

.profile-control--notifications {
position: absolute;
top: 2px;
right: 5px;
}

.notifications__wrapper {
position: relative;
text-align: center;
padding: 0;
margin-top: var(--spacing-2);
}

.notifications__wrapper:nth-of-type(even) {
padding-right: var(--spacing-1);
}

.notifications__wrapper:nth-of-type(odd) {
padding-left: var(--spacing-1);
}


.notifications__switchers--email {
background-color: var(--white-color);
border: solid #eaeaea 1px;
border-radius: 5px;
transition: all .3s ease-in-out;
opacity: 1;
text-transform: capitalize;
position: relative;
}

.notifications__switchers--master {
padding: var(--spacing-1);
margin-top: var(--spacing-4);
}

.notifications__switchers--email:not(.notifications__switchers--master) {
padding: var(--spacing-1);
}



.notifications__switchers--email.disabled {
box-shadow: none;
opacity: 0.2;
background-color: var(--module-color);
}

.formgroup__header {
padding-bottom: var(--spacing-1);
}



.formgroup__switchers {
text-align: left;
height: 45px;
position: relative;
}

.switch__wrapper {
display: inline-flex;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 85px;
flex-direction: column;
justify-content: center;
text-align: center;
}

.switch__wrapper input[type="checkbox"] {
display: none;
}

.formgroup__switchers>* {
padding: 0 var(--spacing-1);
}

.formgroup__switchers div:last-of-type {
display: inline-flex;
flex-direction: column;
justify-content: center;
text-align: center;
position: absolute;
left: 85px;
top: 0;
bottom: 0;
}


/* SWITCH PROPERTIES*/
.switch {
position: relative;
display: inline-block;
max-width: 55px;
min-width: 55px;
height: 28px;
}

/* SLIDE PROPERTIES */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--dt-surface);
}

.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background-color: var(--dt-surface);
-webkit-transition: .4s;
transition: .4s;
}

input:checked+.slider {
background: var(--dt-cta);
}

input:focus+.slider {
outline: 2px solid var(--dt-focus-ring);
}

input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

/* SLIDER ROUNDING */
.slider--round {
border-radius: 34px;
}

.slider--round:before {
border-radius: 50%;
}


.theme__container {
background-color: var(--module-color);
padding: var(--spacing-3);
height: 100%;
}


.theme__formgroup {
border: 0;
border-radius: 3px;

background-color: var(--white-color);
padding: var(--spacing-2) var(--spacing-3);
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
text-align: center;
margin: 70px 20px 0 20px;
min-height: 300px;
max-height: 300px;
}

.formgroup__wrapper {
height: 34px;
position: relative;
display: inline-flex;
flex-direction: column;
justify-content: center;
text-align: center;
margin: 0 var(--spacing-05);
}

.theme__formgroup .formgroup__colorbar {
width: 220px;
height: 18px;
background-color: green;
display: flex;
flex-direction: row;

}

.theme__formgroup .formgroup:first-of-type {
display: flex;
flex-direction: row;
min-height: 50px;
max-height: 50px;
justify-content: center;
}

.theme__formgroup .formgroup:first-of-type .formgroup__wrapper:first-of-type {
margin-left: -4px;
}

.theme__formgroup .formgroup:nth-of-type(2) {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}

.formgroup {
border-bottom: solid #eaeaea 2px;
}

.formgroup img {
height: auto;
width: 100%;
max-height: 150px;
max-width: 280px;
border: 0;
border-radius: 3px;
margin: auto;
}

.theme__formgroup .colorbar__split {
flex: 1;
}

.theme__formgroup:first-of-type .colorbar__split:nth-of-type(1) {
background-color: var(--brand-color);
border: solid var(--brand-color) 1px;
}

.theme__formgroup:first-of-type .colorbar__split:nth-of-type(2) {
background-color: var(--white-color);
border: solid var(--brand-color) 1px;
}

.theme__formgroup:first-of-type .colorbar__split:nth-of-type(3) {
background-color: var(--accent-color);
border: solid var(--accent-color) 1px;
}

.theme__formgroup:last-of-type .colorbar__split:nth-of-type(1) {
background-color: black;
border: solid black 1px;
}

.theme__formgroup:last-of-type .colorbar__split:nth-of-type(2) {
background-color: orangered;
border: solid orangered 1px;
}

.theme__formgroup:last-of-type .colorbar__split:nth-of-type(3) {
background-color: var(--white-color);
border: solid orangered 1px;
}

@media only screen and (max-width:770px) {

.profile-sidebar {
    max-height: 570px;
}

.profile-sidebar__nav-item {

    min-height: 50px;
    max-height: 50px;

}

.module__content {
    overflow-y: scroll;
}

.profile-control {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: var(--spacing-1);

}

.profile-control__input {
    width: 100%;
}

.profile-control label {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-05);
}

.notifications__switchers--email:not(.notifications__switchers--master) {
    padding: var(--spacing-1) var(--spacing-1);
}

.notifications__wrapper:nth-of-type(even) {
    padding-right: 0;
}

.notifications__wrapper:nth-of-type(odd) {
    padding-left: 0;
}

.formgroup__switchers div:last-of-type {
    text-align: left;

}

.profile-control--notifications {
    position: absolute;
    top: -90px;
    left: 0;
    right: 0;
    text-align: center;
}

.profile-control--notifications label {
    margin: auto;
}

.theme__formgroup .formgroup:first-of-type {
    display: flex;
    flex-direction: column;
    min-height: 90px;
    max-height: 90px;
    justify-content: center;
}

.theme__formgroup .formgroup:first-of-type .formgroup__wrapper:first-of-type {
    margin: auto;
}

.theme__container {
    padding-top: 0;
    margin-top: -10px;
}


}

.opcore {
background: var(--white-color);
border: 0;
border-radius: 2px;
display: flex;
}

.opcoreadd {
display: flex;
background: var(--white-color);
border: 0;
border-radius: 2px;
}

.wowedittext {
border: 0;
background: var(--input-color);
color: var(--text-color);
height: 30px;
width: 100%;
margin-top: 0px;
}

.opcoreadd input {
margin: 6px;
background: var(--input-color);
height: 30px;
width: calc(100% - 150px);
}

.texoppp {
/* float: left; */
width: calc(100% - 100px);
margin-top: 15px;
margin-left: 5px;
height: 30px;
line-height: 24px;
max-height: 30px;
overflow: hidden;
display: inline-block;
}

.spaaoppp {
margin-top: 15px;
margin-left: 5px;
display: inline-block;
/* float: left; */
}

.fright {
float: right;
}

.ico16 {
margin: 5px;
width: 16px;
height: 16px;
cursor: pointer;
}

.filter-wrapper .menu {
max-height: 145px;
overflow: hidden;
overflow-y: auto;
}

.sales-listing {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}

.sales-listing.is-expanded {
flex-basis: 100%;
max-width: 100% !important;
}

.table-list {
height: auto;
min-height: 41px;
max-height: 100%;
overflow: hidden;
background: var(--white-color);
}

.table-list__body {
overflow-y: auto;
}

.table-list-chevron>svg {
width: 20px;
height: 20px;
color: var(--text-color);
}

.sales-listing .table-list-icon {
flex-basis: 15px;
min-width: 15px;
width: 15px;
}

.table-list {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}

.table-list__header {
position: relative;
display: flex;
flex: 0 0 auto;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
height: 60px;
padding: 0 var(--spacing-1);
background: var(--accent-color);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: var(--white-color);
}

.table-list__header-title {
position: relative;
font-family: 'Varela Round', sans-serif;
font-size: var(--font-size-5);
color: var(--white-color);
}

.table-list__header-title>span {
vertical-align: middle;
}

.table-list__header-title .table-list__header-btn {
display: inline-block;
width: 30px;
height: 35px;
margin-left: var(--spacing-05);
vertical-align: middle;
}

.table-list__header-buttons {
display: inline-flex;
flex-direction: row;
align-items: center;
height: 100%;
background-color: transparent;
}

.table-list__header-item {
color: var(--white-color);
}

.table-list-name {
line-height: 1.4em;
font-size: 0.9em;
padding: 0.2em;
}

h1 {
font-size: 1.5em;
margin-bottom: 20px;
}
/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Company config (control/companyconfig). Solo color, borde, sombra, radio, espaciado, peso y tipografía: ningún id, clase ni
   atributo que lea el JS cambia (.soyinpptt, .is-active, nav-type, .soyocontenaa, .u-hidden, #comco_navmenu, #akipontemplates,
   #comco_menuconfig, #comco_servicesprices, .opcore, .opcoreadd, .texoppp, .editando, data-editn, .addinputxt[data-addn],
   .wowedittext, data-btntypp, .fright, data-type="modal-toggle-button", aria-owns). Ámbito: la cabecera de pestañas por
   .profile__header:has(#comco_navmenu) y el contenido por los ids #ver-templates, #ver-menuconfig y #ver-servicesprices (únicos de
   este módulo). Pestañas de 40 px con subrayado en tinta sobre una línea fina; contenido a 24 px; tablas en tarjeta de línea fina
   con cabecera gris; botones de fila ghost de 30 px (rojo solo en el texto de Delete); grupos del Menu en banda neutra con icono en
   cuadrado neutro; Services and prices como lista de filas de 48 px sobre rejilla; un solo CTA en tinta por pestaña
   (Create new template, Add). Referencia: modules/control-phonenumbers.html (.pn-tabs, .pn-group-ic, .pn-action-btn). */

/* pestañas: línea base visible (antes pintada del color de la superficie), 40 px, gris → tinta, subrayado de 2 px en tinta */
.profile__header:has(#comco_navmenu) { padding: 4px 24px 0; background: transparent; border-bottom: 1px solid var(--dt-border); scrollbar-width: thin; scrollbar-color: var(--dt-border-strong) transparent; }
.profile__header:has(#comco_navmenu)::-webkit-scrollbar { height: 3px; }
.profile__header:has(#comco_navmenu)::-webkit-scrollbar-thumb { background: var(--dt-border-strong); border-radius: 3px; }
.profile__header:has(#comco_navmenu) .profile__nav { gap: 20px; }
.profile__header:has(#comco_navmenu) .profile__nav-item { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 40px; padding: 0 2px; margin: 0; font-size: 13px; font-weight: 600; line-height: 1; color: var(--dt-muted); white-space: nowrap; transition: color .12s ease; }
.profile__header:has(#comco_navmenu) .profile__nav-item:hover { color: var(--dt-text); }
.profile__header:has(#comco_navmenu) .profile__nav-item.is-active { color: var(--dt-text); box-shadow: inset 0 -2px var(--dt-text); }
.profile__header:has(#comco_navmenu) .profile__nav-item.is-active::after { display: none; }
.profile__header:has(#comco_navmenu) .profile__nav-item .ti { font-size: 15px; color: inherit; }
.profile__header:has(#comco_navmenu) .lockimage { width: 13px; height: 13px; opacity: .6; }

/* secciones: 20/24 en vez de var(--spacing-3) */
#ver-templates, #ver-menuconfig, #ver-servicesprices { padding: 20px 24px; font-size: 13px; color: var(--dt-text); }

/* Templates: el CTA (ya en tinta por §06) a 34 px, a la derecha, encima de la tarjeta; icono de 15 px */
#ver-templates { align-items: flex-end; gap: 12px; }
#ver-templates > .row { align-self: stretch; }
#ver-templates > .btn-primary { display: inline-flex; align-items: center; gap: 7px; height: 34px; min-height: 34px; padding: 0 13px; font-size: 13px; font-weight: 600; line-height: 1; }
#ver-templates > .btn-primary .btn__icon { display: inline-flex; width: 15px; height: 15px; top: 0 !important; }
#ver-templates > .btn-primary .btn__icon > svg { display: block; width: 15px; height: 15px; }

/* tarjetas de tabla: la línea fina ya la pone .card (§06); cuerpo sin relleno, la tabla llega al borde */
#ver-templates .card, #ver-menuconfig .card { overflow: hidden; margin-bottom: 0; }
#ver-templates .card-body, #ver-menuconfig .card-body { padding: 0; }
#ver-templates .card .header-title { display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 12px 16px; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--dt-text); border-bottom: 1px solid var(--dt-border); }
#ver-templates .card .header-title::before { content: "\eb39"; font-family: tabler-icons; font-weight: 400; font-style: normal; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--dt-surface-2); border: 1px solid var(--dt-border); color: var(--dt-muted); font-size: 14px; line-height: 1; }
/* cabecera de tabla: sin la banda #2a2a2a del modo oscuro (165_app.css, !important) */
:is(#ver-templates, #ver-menuconfig) .table > thead > tr > th { height: 38px; padding: 0 16px !important; vertical-align: middle; white-space: nowrap; background: transparent !important; color: var(--dt-muted) !important; border-bottom: 1px solid var(--dt-border) !important; }
:is(#akipontemplates, #comco_menuconfig) > tr > td { height: 48px; padding: 8px 16px; vertical-align: middle; font-size: 13px; }
:is(#akipontemplates, #comco_menuconfig) > tr:last-child > td { border-bottom: 0 !important; }
:is(#akipontemplates, #comco_menuconfig) > tr:not(.table-light):hover > td { background: var(--dt-hover) !important; }

/* Templates: nombre en tinta, tipo en gris, acciones a la derecha; fila vacía en gris */
#akipontemplates > tr > td:first-child { font-weight: 500; }
#akipontemplates > tr > td:nth-child(2) { color: var(--dt-muted) !important; }
#ver-templates .table > thead > tr > th:last-child, #akipontemplates > tr > td:last-child { width: 1%; white-space: nowrap; text-align: right; }
#akipontemplates > tr:not(:has(.btn)) > td { color: var(--dt-muted) !important; font-weight: 400; }
/* Edit (.btn-default = relleno --bs-primary) y Delete (.btn-danger teñido): ghost de 30 px; rojo solo en el texto de Delete */
#akipontemplates .btn { display: inline-flex; align-items: center; justify-content: center; height: 30px; min-height: 30px; padding: 0 10px; font-size: 12.5px; font-weight: 600; line-height: 1; border-radius: var(--dt-radius); background: transparent !important; color: var(--dt-text) !important; border: 0 !important; box-shadow: none; }
#akipontemplates .btn + .btn { margin-left: 4px !important; }
#akipontemplates .btn:hover { background: var(--dt-hover) !important; }
#akipontemplates .btn-danger { color: var(--dt-danger) !important; }
#akipontemplates .btn-danger:hover { background: rgba(248, 113, 113, .10) !important; }

/* Menu: grupos (.table-light = #f6f9fc/#000 de Bootstrap) en banda neutra con icono en cuadrado neutro de 26 px;
   módulos sangrados bajo el nombre del grupo, icono gris sin la opacidad inline; interruptor (ya en tinta) a la derecha */
#ver-menuconfig .table > thead > tr > th:last-child { text-align: right; }
#comco_menuconfig > tr.table-light > td { height: 44px; padding: 0 16px; font-size: 13px; font-weight: 600; background: var(--dt-topbar) !important; color: var(--dt-text) !important; border-top: 1px solid var(--dt-border); border-bottom: 1px solid var(--dt-border) !important; }
#comco_menuconfig > tr.table-light:first-child > td { border-top: 0; }
#comco_menuconfig > tr.table-light > td > .ti { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 10px !important; vertical-align: middle; border-radius: 7px; background: var(--dt-surface-2); border: 0; color: var(--dt-muted); font-size: 14px; }
#comco_menuconfig > tr:not(.table-light) > td:first-child { padding-left: 52px; }
#comco_menuconfig > tr:not(.table-light) > td:first-child > .ti { opacity: 1 !important; margin-right: 10px !important; font-size: 15px; color: var(--dt-muted); vertical-align: -2px; }
#comco_menuconfig > tr:not(.table-light) > td[colspan] { color: var(--dt-muted) !important; font-size: 12.5px; }
#comco_menuconfig > tr > td:last-child:not([colspan]) { text-align: right; }
#comco_menuconfig .form-switch { display: inline-flex; align-items: center; min-height: 0; margin: 0; padding-left: 0; vertical-align: middle; }
#comco_menuconfig .form-switch .form-check-input { float: none; margin: 0; cursor: pointer; }

/* Services and prices: título de sección 15/600 (gana a la regla h1 suelta del bloque anterior) */
#ver-servicesprices > h1 { margin: 0 0 14px; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--dt-text); }
#comco_servicesprices > br { display: none; }
/* filas: rejilla de 5 celdas + papelera + Edit, unidas en una lista de línea fina; la fila de alta va aparte en línea discontinua */
#comco_servicesprices .opcore, #comco_servicesprices .opcoreadd { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(72px, .7fr) minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(0, 1.4fr) 30px minmax(72px, max-content); gap: 8px; align-items: center; min-height: 48px; padding: 8px 12px; background: var(--dt-surface); border: 0; border-radius: 0; }
#comco_servicesprices .opcore + .opcore { border-top: 0; }
#comco_servicesprices .opcore:first-child { border-top-left-radius: var(--dt-radius-lg); border-top-right-radius: var(--dt-radius-lg); }
#comco_servicesprices .opcore:has(+ .opcoreadd) { border-bottom-left-radius: var(--dt-radius-lg); border-bottom-right-radius: var(--dt-radius-lg); }
#comco_servicesprices .opcore:hover { background: var(--dt-hover); }
#comco_servicesprices .opcoreadd { margin-top: 12px; background: transparent; border-style: dashed; border-color: var(--dt-border-strong); border-radius: var(--dt-radius-lg); }
#comco_servicesprices .opcoreadd:first-child { margin-top: 0; }
#comco_servicesprices .spaaoppp { display: none; }
#comco_servicesprices .texoppp { display: block; width: auto; min-width: 0; height: auto; max-height: none; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; font-size: 12.5px; color: var(--dt-muted); }
#comco_servicesprices .texoppp[data-editn="name"] { font-size: 13px; font-weight: 500; color: var(--dt-text); }
#comco_servicesprices .texoppp[data-editn="price"] { color: var(--dt-text); font-variant-numeric: tabular-nums; text-align: right; }
#comco_servicesprices .texoppp.editando { overflow: visible; }
/* campos (borde, fondo y radio ya vienen de datalyse-modern §controles): 32 px, sin los márgenes ni el ancho calc() antiguos */
#comco_servicesprices .addinputxt, #comco_servicesprices .wowedittext { display: block; width: 100%; min-width: 0; height: 32px; margin: 0; padding: 0 10px; font-size: 13px; line-height: 30px; }
#comco_servicesprices .addinputxt[data-addn="price"], #comco_servicesprices .wowedittext[data-editn="price"] { text-align: right; font-variant-numeric: tabular-nums; }
#comco_servicesprices .addinputxt::placeholder, #comco_servicesprices .wowedittext::placeholder { color: var(--dt-faint); }
/* botones: Edit ghost de 30 px, papelera cuadrada con el rojo solo en el icono, Add = el CTA en tinta de la pestaña */
#comco_servicesprices .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; float: none; height: 30px; min-height: 30px; padding: 0 10px; margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1; border-radius: var(--dt-radius); background: transparent; color: var(--dt-text); border: 0; }
#comco_servicesprices .btn:hover { background: var(--dt-hover); }
#comco_servicesprices .btn-outline-danger { width: 30px; padding: 0; color: var(--dt-danger) !important; border-color: var(--dt-border-strong) !important; }
#comco_servicesprices .btn-outline-danger:hover { background: rgba(248, 113, 113, .10) !important; }
#comco_servicesprices .btn-outline-danger .ti { font-size: 15px; }
#comco_servicesprices .opcoreadd > .btn { grid-column: 6 / -1; justify-self: stretch; height: 32px; min-height: 32px; color: var(--dt-cta-fg); background: var(--dt-cta); border-color: var(--dt-cta); }
#comco_servicesprices .opcoreadd > .btn:hover { background: var(--dt-cta-hover); border-color: var(--dt-cta-hover); }

/* móvil: 16 px de margen, pestañas más juntas, filas de servicios apiladas (celdas vacías fuera, acciones a la derecha) */
@media (max-width: 767px) {
  .profile__header:has(#comco_navmenu) { padding: 4px 16px 0; }
  .profile__header:has(#comco_navmenu) .profile__nav { gap: 16px; }
  #ver-templates, #ver-menuconfig, #ver-servicesprices { padding: 16px; }
  #comco_menuconfig > tr:not(.table-light) > td:first-child { padding-left: 16px; }
  #comco_servicesprices .opcore, #comco_servicesprices .opcoreadd { display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 10px 12px; }
  #comco_servicesprices .texoppp, #comco_servicesprices .addinputxt { flex: 1 1 100%; }
  #comco_servicesprices .texoppp:empty { display: none; }
  #comco_servicesprices .texoppp[data-editn="price"] { text-align: left; }
  #comco_servicesprices .opcore > .btn-outline-danger { margin-left: auto; }
  #comco_servicesprices .opcoreadd > .btn { flex: 1 1 100%; }
}

}
/* end dui-template-style modules/control-companyconfig:0 */
/* dui-template-style {"key":"modules/control-departments:0","bytes":8533,"sha256":"1942fc4e4c3d135205a7a1ea902bf5170ff72e2f4e440846b44e949268054b21","media":null,"source_sha256":"1942fc4e4c3d135205a7a1ea902bf5170ff72e2f4e440846b44e949268054b21"} */
@scope (:root:has(template[data-dui-legacy-style="modules/control-departments:0"])) {

  .tablewithresults{margin-top:1rem;}

/* ═══════════ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══════════
   Bloque añadido al final: solo color, borde, sombra, radio y peso; ningún id/clase que lea el JS cambia. */
/* ═══════════ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══════════
     Solo color, borde, sombra, radio, espaciado y peso: ningún id, clase ni atributo que lea el JS cambia (#adddepartmentbtnadd,
     #tableDepartmentsTABLE / #tableDepartments y sus data-*, #deptEmptyState, .tablewithresults, .u-hidden, data-iddeptoedit,
     data-iddeletedept). No hay DataTables.net en index.html: datatablesmarc() pasa por el shim de datalyse-ui.js, que pinta una
     dUI.DataTable (.dui-dt-*) con la barra del botón CSV delante y deja la tabla original oculta. Ámbito: .card:has(#tableDepartmentsTABLE)
     y .tablewithresults (clase que solo usa este módulo). Referencia: modules/control-phonenumbers.html y el bloque de Employees
     (#agents-table en datalyse-modern.css §13). */

  /* la .card exterior deja de ser marco (la única superficie es la tarjeta de la tabla, como en Employees): cabecera = título 20/600 + CTA */
  .card:has(#tableDepartmentsTABLE) { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  .card:has(#tableDepartmentsTABLE) > .card-header { padding: 0 0 16px !important; }
  .card:has(#tableDepartmentsTABLE) > .card-header .row { align-items: center; }
  .card:has(#tableDepartmentsTABLE) h5 { font-size: 20px; font-weight: 400; line-height: 1.25; letter-spacing: -.02em; color: var(--dt-text); }
  .card:has(#tableDepartmentsTABLE) > .card-body { padding: 0 !important; }
  .card:has(#tableDepartmentsTABLE) > .card-body > .table-responsive.scrollbar { overflow: visible; }
  .tablewithresults { margin-top: 0; }

  /* un solo CTA en tinta (ya lo es por .btn-primary de datalyse-modern.css): 34 px, radio 8; el "+" literal pasa a ser el glifo ti-plus.
     :not(.u-hidden) para no pisar el display:none con el que el JS lo esconde a los planes < 2 */
  #adddepartmentbtnadd:not(.u-hidden) { display: inline-flex; align-items: center; gap: 7px; height: 34px; min-height: 34px; padding: 0 13px; font-size: 13px; font-weight: 600; border-radius: var(--dt-radius); white-space: nowrap; }
  #adddepartmentbtnadd > span:first-child { font-size: 0; line-height: 1; }
  #adddepartmentbtnadd > span:first-child::before { content: "\eb0b"; font-family: tabler-icons; font-size: 16px; line-height: 1; }

  /* barra del shim: el <div> sin clase con el botón CSV (va delante de .dui-dt) sube a la fila del buscador, a la derecha; buscador y CSV ghost de 34 px */
  .tablewithresults .table-responsive > div:has(> .dui-dt) { position: relative; }
  .tablewithresults .table-responsive > div:has(> .dui-dt) > div:first-child:not(.dui-dt) { position: absolute; top: 0; right: 0; margin: 0 !important; z-index: 1; }
  .tablewithresults .dui-dt-toolbar .dui-dt-search { height: 34px; padding: 0 10px; background: transparent; border-color: var(--dt-border-strong); border-radius: var(--dt-radius); }
  .tablewithresults .dui-dt-toolbar .dui-dt-search:focus-within { border-color: var(--dt-focus); }
  .tablewithresults .dui-dt-toolbar .dui-dt-search i { color: var(--dt-faint); }
  .tablewithresults .dui-dt-toolbar .dui-dt-search input::placeholder { color: var(--dt-faint); }
  .tablewithresults .btn-outline-secondary { display: inline-flex; align-items: center; gap: 6px; height: 34px; min-height: 34px; padding: 0 12px; font-size: 13px; font-weight: 600; border-radius: var(--dt-radius); background: transparent !important; border-color: var(--dt-border-strong) !important; color: var(--dt-text) !important; }
  .tablewithresults .btn-outline-secondary:hover { background: var(--dt-hover) !important; }
  .tablewithresults .btn-outline-secondary .ti { font-size: 16px; line-height: 1; }
  @media (max-width: 900px) {
    .tablewithresults .table-responsive > div:has(> .dui-dt) > div:first-child:not(.dui-dt) { position: static; margin: 0 0 8px !important; }
  }

  /* tabla: una superficie con línea fina, sin scroll interno; cabecera gris 600 con línea fina fuerte; filas de 46 px; ruta en gris y
     el departamento (el <b>) en tinta 600; última columna (acciones) a la derecha: el shim copia el innerHTML de las celdas y el .text-end original no llega */
  .tablewithresults .dui-dt > .dui-dt-card { background: var(--dt-surface); border-color: var(--dt-border); border-radius: var(--dt-radius-lg); max-height: none; }
  .tablewithresults .dui-dt-table thead { border-bottom-color: var(--dt-border-strong); }
  .tablewithresults .dui-dt-th { height: 40px; padding: 0 16px; font-size: 11.5px; letter-spacing: .05em; color: var(--dt-muted); }
  .tablewithresults .dui-dt-th.sortable:hover, .tablewithresults .dui-dt-th.sorted-asc, .tablewithresults .dui-dt-th.sorted-desc { color: var(--dt-text); }
  .tablewithresults .dui-dt-sort-icon { color: var(--dt-faint); opacity: 1; }
  .tablewithresults .dui-dt-th.sorted-asc .dui-dt-sort-icon, .tablewithresults .dui-dt-th.sorted-desc .dui-dt-sort-icon { color: var(--dt-text); }
  .tablewithresults .dui-dt-th:last-child, .tablewithresults .dui-dt-row > td:last-child { text-align: right; }
  .tablewithresults .dui-dt-row { border-bottom-color: var(--dt-border); }
  .tablewithresults .dui-dt-row:hover { background: var(--dt-hover); }
  .tablewithresults .dui-dt-row > td { height: 46px; padding: 6px 16px; font-size: 13px; color: var(--dt-muted); }
  .tablewithresults .dui-dt-row > td b { color: var(--dt-text); font-weight: 600; }
  .tablewithresults .dui-dt-empty { color: var(--dt-muted); font-size: 13px; }

  /* Edit / Delete: ghost de 30 px, gris; el rojo solo en el texto (tinte suave únicamente al pasar), fuera los rellenos azul e info */
  .tablewithresults .dui-dt-row .btn { display: inline-flex; align-items: center; height: 30px; min-height: 30px; padding: 0 11px; font-size: 12.5px; font-weight: 600; line-height: 1; border-radius: var(--dt-radius); vertical-align: middle; }
  .tablewithresults .dui-dt-row .btn-info { background: transparent !important; border-color: var(--dt-border) !important; color: var(--dt-muted) !important; }
  .tablewithresults .dui-dt-row .btn-info:hover { background: var(--dt-hover) !important; border-color: var(--dt-border-strong) !important; color: var(--dt-text) !important; }
  .tablewithresults .dui-dt-row .btn-danger { background: transparent !important; border-color: var(--dt-border) !important; color: var(--dt-danger) !important; }
  .tablewithresults .dui-dt-row .btn-danger:hover { background: color-mix(in srgb, var(--dt-danger) 10%, transparent) !important; border-color: color-mix(in srgb, var(--dt-danger) 35%, transparent) !important; color: var(--dt-danger) !important; }

  /* pie: texto gris, página actual en tinta 600, botones de página y selector ghost de 30 px */
  .tablewithresults .dui-dt-footer { color: var(--dt-muted); }
  .tablewithresults .dui-dt-footer .dui-dt-page-btn { width: 30px; height: 30px; background: transparent; border-color: var(--dt-border); border-radius: var(--dt-radius-sm); color: var(--dt-muted); }
  .tablewithresults .dui-dt-footer .dui-dt-page-btn:hover:not([disabled]) { background: var(--dt-hover); color: var(--dt-text); border-color: var(--dt-border-strong); }
  .tablewithresults .dui-dt-footer .dui-dt-page-info { color: var(--dt-text); font-weight: 600; }
  .tablewithresults .dui-dt-footer .dui-dt-pagesize { height: 30px; padding: 0 8px; background: transparent; border-color: var(--dt-border-strong); border-radius: var(--dt-radius); color: var(--dt-text); }

  /* vacío: fuera el ":(" gigante girado; su <span> pasa a ser el cuadrado de icono neutro (ti-users, el icono de Teams en el leftbar) y el texto en gris pleno */
  #deptEmptyState { padding: 56px 20px; gap: 12px; }
  #deptEmptyState .module-state__title { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--dt-surface-2); border: 0; color: var(--dt-muted); font-size: 0; opacity: 1; transform: none; }
  #deptEmptyState .module-state__title::before { content: "\ebf2"; font-family: tabler-icons; font-size: 22px; line-height: 1; }
  #deptEmptyState .module-state__description { font-size: 13px; color: var(--dt-muted); opacity: 1; }

}
/* end dui-template-style modules/control-departments:0 */
/* dui-template-style {"key":"modules/control-entities:0","bytes":14679,"sha256":"0f83209b7c3a3c119475345f067beff85c2ef2a5f2023a01bdb19a3593130662","media":null,"source_sha256":"0f83209b7c3a3c119475345f067beff85c2ef2a5f2023a01bdb19a3593130662"} */
@scope (:root:has(template[data-dui-legacy-style="modules/control-entities:0"])) {

    .ent-layout { padding: 12px; }
    .ent-main { min-width: 0; }
    .ent-selectbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 12px 0 12px; }
    .ent-selectbar > i { font-size: 22px; }
    .ent-selectbar select {
        border: 0; background: var(--input-color); color: var(--text-color);
        height: 36px; border-radius: 6px; padding: 0 10px; font-size: 14px; font-weight: 600; min-width: 180px; max-width: 320px;
    }
    .ent-badge-sys { font-size: 10px; background: #e7effd; color: #2563eb; border-radius: 4px; padding: 1px 6px; text-transform: uppercase; }
    .ent-badge-cust { font-size: 10px; background: #e6f7ef; color: #059669; border-radius: 4px; padding: 1px 6px; text-transform: uppercase; }
    .ent-props-table { width: 100%; border-collapse: collapse; }
    .ent-props-table th { text-align: left; font-size: 12px; color: var(--dt-muted); padding: 6px 8px; border-bottom: 2px solid var(--border-color, #e3e6f0); }
    .ent-props-table td { padding: 7px 8px; border-bottom: 1px solid var(--border-color, #e3e6f0); font-size: 13px; vertical-align: middle; }
    .ent-props-table tr:hover td { background: rgba(37, 99, 235, .04); }
    .ent-ident { font-family: monospace; font-size: 11px; color: var(--dt-muted); }
    .ent-actions { white-space: nowrap; }
    .ent-actions .btn { padding: 2px 8px; font-size: 11px; }
    .ccs-section { margin-bottom: 28px; }
    .ccs-section__title {
        font-size: 16px; font-weight: 700; margin-bottom: 12px; padding-bottom: 8px;
        border-bottom: 2px solid var(--brand-color, #2563eb); display: flex; align-items: center; gap: 8px;
    }
    .ccs-section__title i { font-size: 20px; color: var(--brand-color, #2563eb); }
    .ccs-section__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
    .ccs-status-card {
        background: var(--white-color, #fff); border: 1px solid var(--border-color, #e3e6f0);
        border-radius: 8px; padding: 12px 14px; display: flex; align-items: center; gap: 10px;
        transition: box-shadow .15s, border-color .15s;
    }
    .ccs-status-card:hover { border-color: var(--dt-border-strong); }
    .ccs-status-card.is-archived { opacity: .45; }
    .ccs-status-card__name { flex: 1; font-size: 14px; font-weight: 500; min-width: 0; }
    .ccs-status-card__name input[type=text] { border: 1px solid var(--border-color); background: var(--input-color); color: var(--text-color); height: 28px; width: 100%; border-radius: 4px; padding: 0 6px; font-size: 13px; }
    .ccs-status-card__actions { display: flex; gap: 4px; flex-shrink: 0; align-items: center; }
    .ccs-status-card__actions .btn { padding: 2px 8px; font-size: 11px; }
    .ccs-status-card input[type=color] { width: 26px; height: 26px; border: none; background: none; padding: 0; cursor: pointer; flex-shrink: 0; }
    .ccs-add-row {
        background: var(--white-color, #fff); border: 2px dashed var(--border-color, #e3e6f0);
        border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; gap: 8px;
    }
    .ccs-add-row input { flex: 1; border: 0; background: var(--input-color); color: var(--text-color); height: 32px; border-radius: 6px; padding: 0 10px; font-size: 13px; }
    .ccs-add-row .btn { flex-shrink: 0; }
    .ent-assoc-card {
        background: var(--white-color, #fff); border: 0;
        border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; font-size: 13px;
    }
    .ent-lockinfo { font-size: 12px; color: var(--dt-muted); margin-left: 8px; font-weight: 400; }
    .ent-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
    .ent-toolbar input[type=text], .ent-toolbar select {
        border: 0; background: var(--input-color); color: var(--text-color);
        height: 34px; border-radius: 6px; padding: 0 10px; font-size: 13px;
    }
    .ent-toolbar input[type=text] { flex: 1; min-width: 150px; }
    .ent-toolbar select { max-width: 170px; }
    .ent-count { font-size: 12px; color: var(--dt-muted); white-space: nowrap; }
    .ent-props-table th { white-space: nowrap; }
    .ent-props-table th.ent-sortable { cursor: pointer; user-select: none; }
    .ent-props-table th.ent-sortable:hover { color: var(--brand-color, #2563eb); }
    .ent-table-scroll { overflow-x: auto; }
    .ent-drag span { cursor: grab; color: var(--dt-muted); }
    .ent-props-table tr.is-dragging td { opacity: .4; }
    .ent-props-table tr.ent-drop-before td { box-shadow: inset 0 3px 0 var(--brand-color, #2563eb); }
    .ent-grptabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
    .ent-grptab {
        background: var(--white-color, #fff); border: 0;
        border-radius: 16px; padding: 5px 12px; display: flex; align-items: center; gap: 6px;
        cursor: pointer; font-size: 12px; transition: box-shadow .15s, border-color .15s; user-select: none;
    }
    .ent-grptab:hover { border-color: var(--dt-border-strong); }
    .ent-grptab.is-active { border-color: var(--dt-border-strong); font-weight: 600; }
    .ent-grptab.ent-drop-hover { border-color: var(--dt-text); background: var(--dt-hover); }
    .ent-grptab .ent-grptab__n { font-size: 10px; color: var(--dt-muted); }
    .ent-grptab i { font-size: 13px; }
    .ent-grptab input { border: none; background: transparent; color: var(--text-color); font-size: 12px; width: 110px; outline: none; }
    .ent-grptabs__hint { font-size: 11px; color: var(--dt-muted); }
    .ent-iconpicker { position: relative; display: inline-block; }
    .ent-iconpicker__btn {
        display: flex; align-items: center; gap: 6px; border: 0;
        background: var(--input-color); color: var(--text-color); border-radius: 6px; padding: 6px 10px; cursor: pointer;
    }
    .ent-iconpicker__btn i { font-size: 20px; }
    .ent-iconpicker__panel {
        position: absolute; z-index: 60; top: 100%; left: 0; margin-top: 4px; width: 320px; max-width: 80vw;
        background: var(--white-color, #fff); border: 0; border-radius: 8px;
        padding: 8px;
    }
    .ent-iconpicker__panel input {
        width: 100%; border: 0; background: var(--input-color); color: var(--text-color);
        height: 30px; border-radius: 6px; padding: 0 8px; font-size: 12px; margin-bottom: 8px;
    }
    .ent-iconpicker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 4px; max-height: 220px; overflow-y: auto; }
    .ent-iconpicker__grid i { font-size: 20px; padding: 6px; border-radius: 6px; cursor: pointer; text-align: center; }
    .ent-iconpicker__grid i:hover { background: rgba(37, 99, 235, .1); }
    .ent-iconpicker__grid i.is-active { outline: 2px solid var(--brand-color, #2563eb); }
    @media (max-width: 920px) {
        .ent-toolbar select { max-width: none; flex: 1; }
        .ent-selectbar select { max-width: none; flex: 1; }
    }
/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Entities (Customization): el azul de las insignias Sys y "via property", el hover azulado de la tabla, la sombra de las tarjetas,
   de las pestañas de grupo y del panel de iconos, y las líneas de 2 px pasan a grises con línea fina. Pestañas con subrayado de
   2 px en tinta sobre línea de 1 px; "New entity" ghost (el CTA en tinta es el de cada pestaña: Create new property, Create
   association property, Save) y los "+" de añadir estado ghost. Ámbito: #akicontenidonormal (este <style> solo existe con el
   módulo cargado) y .ent-iconpicker (el picker también se monta en el modal entities-newentity-modal, fuera del contenedor).
   Ninguna clase, id ni atributo que lea el JS cambia (soyenttab, soyentpanel, is-active, u-hidden, ent-grptab, ent-drop-hover,
   is-dragging, ent-drop-before, data-propident, data-icon, nav-type). Los colores de estados y de la entidad (insignias de las
   opciones, muestras, input color, icono del picker) son datos del cliente y se quedan. */

/* barra: icono de la entidad en gris solo cuando lleva el azul por defecto (#2563eb en el HTML, rgb(37, 99, 235) tras
   ico.style.color); el color que elige el cliente se respeta. Selector de 34 px. "New entity" ghost */
#akicontenidonormal #ent-sel-icon[style*="#2563eb"], #akicontenidonormal #ent-sel-icon[style*="rgb(37, 99, 235)"] { color: var(--dt-muted) !important; }
#akicontenidonormal .ent-selectbar select { height: 34px; border-color: var(--dt-border-strong); border-radius: var(--dt-radius); font-size: 13px; }
#akicontenidonormal .ent-selectbar > .btn-primary { background: transparent !important; color: var(--dt-text) !important; border: 0 !important; box-shadow: none !important; }
#akicontenidonormal .ent-selectbar > .btn-primary:hover { background: var(--dt-hover) !important; color: var(--dt-text) !important; border-color: var(--dt-border-strong) !important; }

/* pestañas: línea base de 1 px (antes 2 px) y subrayado de 2 px en tinta; gris → tinta, 600 */
#akicontenidonormal .profile__header:has(#ent-tabs) { border-bottom: 1px solid var(--dt-border); }
#akicontenidonormal #ent-tabs .profile__nav-item { margin-bottom: -1px; color: var(--dt-muted); font-weight: 600; }
#akicontenidonormal #ent-tabs .profile__nav-item:hover { color: var(--dt-text); }
#akicontenidonormal #ent-tabs .profile__nav-item.is-active { color: var(--dt-text); border-bottom-color: var(--dt-text); }
#akicontenidonormal #ent-tabs .profile__nav-item.is-active::after { display: none; }

/* barra de filtros: campos de línea fina fuerte; contadores y ayudas en gris claro con números tabulares */
#akicontenidonormal .ent-toolbar input[type=text], #akicontenidonormal .ent-toolbar select { border-color: var(--dt-border-strong); border-radius: var(--dt-radius); }
#akicontenidonormal .ent-count, #akicontenidonormal .ent-grptabs__hint, #akicontenidonormal .ent-lockinfo { color: var(--dt-faint); }
#akicontenidonormal .ent-count { font-variant-numeric: tabular-nums; }

/* insignias: Sys, Shared y System en gris neutro con línea fina; Custom con tinte suave de éxito; "via property" (azul en línea) gris */
#akicontenidonormal .ent-badge-sys { background: var(--dt-surface-2); color: var(--dt-muted); border: 1px solid var(--dt-border); font-weight: 600; letter-spacing: .02em; }
#akicontenidonormal .ent-badge-cust { background: var(--dt-tint-ok-bg); color: var(--dt-tint-ok-tx); font-weight: 600; letter-spacing: .02em; }
#akicontenidonormal .ent-assoc-card .badge[style*="#e7effd"] { background: var(--dt-surface-2) !important; color: var(--dt-muted) !important; }

/* tabla de propiedades: cabecera gris de 1 px fuerte (como las tablas de §12), filas de línea fina, hover gris, asa y
   identificador en gris claro, marca de soltar en tinta de 2 px */
#akicontenidonormal .ent-props-table th { color: var(--dt-muted); font-weight: 600; border-bottom: 1px solid var(--dt-border-strong); }
#akicontenidonormal .ent-props-table td { border-bottom-color: var(--dt-border); font-variant-numeric: tabular-nums; }
#akicontenidonormal .ent-props-table tr:hover td { background: var(--dt-hover); }
#akicontenidonormal .ent-props-table th.ent-sortable:hover { color: var(--dt-text); }
#akicontenidonormal .ent-ident, #akicontenidonormal .ent-drag span { color: var(--dt-faint); }
#akicontenidonormal .ent-props-table tr.ent-drop-before td { box-shadow: inset 0 2px 0 var(--dt-text); }
#akicontenidonormal .ent-main [style*="color:#999"] { color: var(--dt-faint) !important; }

/* grupos (chips): línea fina sin sombra; activo en gris de superficie; destino de soltar con línea en tinta, sin halo azul */
#akicontenidonormal .ent-grptab { background: transparent; border-color: var(--dt-border); color: var(--dt-muted); transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
#akicontenidonormal .ent-grptab:hover { box-shadow: none; border-color: var(--dt-border-strong); color: var(--dt-text); }
#akicontenidonormal .ent-grptab.is-active { background: var(--dt-surface-2); border-color: var(--dt-border-strong); color: var(--dt-text); }
#akicontenidonormal .ent-grptab.ent-drop-hover { background: var(--dt-hover); border-color: var(--dt-text); box-shadow: none; }
#akicontenidonormal .ent-grptab .ent-grptab__n { color: var(--dt-faint); font-variant-numeric: tabular-nums; }
#akicontenidonormal .ent-grptab .ti-trash[style*="#dc2626"] { color: var(--dt-danger) !important; }

/* estados: título de sección con línea de 1 px e icono gris; tarjetas de línea fina sin sombra; fila de añadir en discontinua
   de 1 px (padding +1) con el "+" ghost */
#akicontenidonormal .ccs-section__title { font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--dt-border); }
#akicontenidonormal .ccs-section__title > i { color: var(--dt-muted); font-size: 17px; }
#akicontenidonormal .ccs-status-card { background: var(--dt-surface); border-color: var(--dt-border); }
#akicontenidonormal .ccs-status-card:hover { box-shadow: none; border-color: var(--dt-border-strong); }
#akicontenidonormal .ccs-add-row { background: transparent; border: 1px dashed var(--dt-border-strong); padding: 11px 15px; }
#akicontenidonormal .ccs-add-row input { border-color: var(--dt-border-strong); border-radius: var(--dt-radius); }
#akicontenidonormal .ccs-add-row .btn-primary { background: transparent !important; color: var(--dt-text) !important; border: 0 !important; box-shadow: none !important; }
#akicontenidonormal .ccs-add-row .btn-primary:hover { background: var(--dt-hover) !important; color: var(--dt-text) !important; }

/* asociaciones: tarjeta de línea fina, icono de enlace gris */
#akicontenidonormal .ent-assoc-card { background: var(--dt-surface); border-color: var(--dt-border); }
#akicontenidonormal .ent-assoc-card > .ti-link { color: var(--dt-muted); }

/* selector de iconos (página y modal): botón de línea fina fuerte, panel sobre --dt-overlay sin sombra, hover gris y activo
   con contorno de 1 px en tinta; los glifos siguen tintados con el color de la entidad (dato del cliente) */
.ent-iconpicker .ent-iconpicker__btn { border-color: var(--dt-border-strong); border-radius: var(--dt-radius); }
.ent-iconpicker .ent-iconpicker__btn:hover { background: var(--dt-hover); }
.ent-iconpicker .ent-iconpicker__panel { background: var(--dt-overlay); border-color: var(--dt-border); box-shadow: none; }
.ent-iconpicker .ent-iconpicker__grid i:hover { background: var(--dt-hover); }
.ent-iconpicker .ent-iconpicker__grid i.is-active { outline: 1px solid var(--dt-text); background: var(--dt-surface-2); }
.ent-iconpicker [style*="color:#999"] { color: var(--dt-faint) !important; }

}
/* end dui-template-style modules/control-entities:0 */
/* dui-template-style {"key":"modules/control-payments:0","bytes":34642,"sha256":"185604b9af67fc979aec9116c3ca577c866b4762db6165bd5805dd88d84082f5","media":null,"source_sha256":"185604b9af67fc979aec9116c3ca577c866b4762db6165bd5805dd88d84082f5"} */
@scope (:root:has(template[data-dui-legacy-style="modules/control-payments:0"])) {

/* =========================================================
   PAYMENTS MODULE — Workflows-style Design
   Uses 165_varsfusion.css variables for light/dark compat
   ========================================================= */

/* ===== Reset / Container ===== */
.py-container {
  padding: 0 28px 28px;
  font-family: var(--font-sans);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.py-container *, .py-container *::before, .py-container *::after { box-sizing: border-box; }

/* ===== Header ===== */
.py-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 20px;
}
.py-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.py-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--text-color);
  letter-spacing: -0.02em;
}
.py-running-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--dt-surface-2);
  color: var(--dt-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
}
.py-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.py-btn-csv {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--dt-cta);
  color: var(--dt-cta-fg);
  border: none;
  padding: 10px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none;
  text-decoration: none;
  line-height: 1.4;
  font-family: inherit;
}
.py-btn-csv:hover {
  background: var(--dt-hover);
  box-shadow: none;
  transform: none;
}

/* ===== Stat Cards ===== */
.py-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.py-stat-card {
  background: var(--bg-color);
  border: 0;
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.py-stat-card:hover {
  border-color: var(--border-strong-color);
}
.py-stat-label {
  font-size: 13px;
  color: var(--text-secondary-color);
  font-weight: 500;
  margin-bottom: 6px;
}
.py-stat-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--text-color);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.py-stat-sub {
  font-size: 12px;
  color: var(--text-muted-color);
  margin-top: 4px;
  font-weight: 400;
}
.py-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.py-stat-icon--blue   { background: var(--dt-surface-2); color: var(--dt-muted); }
.py-stat-icon--purple { background: var(--dt-surface-2); color: var(--dt-muted); }
.py-stat-icon--green  { background: var(--dt-surface-2); color: var(--dt-muted); }
.py-stat-icon--orange { background: var(--dt-surface-2); color: var(--dt-muted); }
.py-stat-icon svg { stroke: currentColor; }

/* ===== Toolbar Area ===== */
.py-toolbar-area {
  background: var(--bg-color);
  border: 0;
  border-radius: 14px 14px 0 0;
  border-bottom: 2px solid var(--border-color);
  position: relative;
  z-index: 3;
}
.py-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  gap: 12px;
}
.py-search-box {
  position: relative;
  flex: 1;
  max-width: 380px;
}
.py-search-box > svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted-color);
  pointer-events: none;
}
.py-search-box input {
  border: 0;
  border-radius: 8px;
  padding: 9px 14px 9px 38px;
  font-size: 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--input-color);
  color: var(--text-color);
  font-family: inherit;
}
.py-search-box input:focus {
  border-color: var(--dt-focus);
  box-shadow: none;
  background: var(--bg-color);
}
.py-search-box input::placeholder { color: var(--text-muted-color); }

.py-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  border: 0;
  background: var(--bg-color);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-secondary-color);
  font-family: inherit;
  white-space: nowrap;
}
.py-filter-btn:hover {
  background: var(--hover-color);
  border-color: var(--border-strong-color);
  color: var(--text-color);
}

/* ===== Filter Panel ===== */
.py-toolbar-area .filter-wrapper {
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary-color);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  border: 0;
  border-top: none;
  border-radius: 0 0 10px 10px;
}
.filter-wrapper.is-visible {
  overflow: auto !important;
  max-height: 400px;
}

/* ===== Table ===== */
.py-table-wrap {
  background: var(--bg-color);
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  border: 0;
  border-top: none;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.py-table-scroll {
  overflow-x: auto;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--scrolldark-color) transparent;
}
.py-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.py-table thead th {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted-color);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary-color);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
/* payments-th classes for dynamically created columns */
.payments-th {
  padding: 12px 16px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-muted-color) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  border-bottom: 1px solid var(--border-color) !important;
  border-top: none !important;
  background: var(--bg-secondary-color) !important;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.payments-th--actions {
  min-width: 170px;
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--bg-secondary-color) !important;
  border-right: 2px solid var(--border-color) !important;
}

.py-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.12s ease;
  cursor: default;
}
.py-table tbody tr:not(.u-hidden):hover { background: var(--hover-color); }
.py-table tbody tr:last-child { border-bottom: none; }

.py-table tbody td {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--datalyse-text-color);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* payments-td classes for dynamically created cells */
.payments-td {
  padding: 11px 16px !important;
  vertical-align: middle !important;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-color) !important;
  border-top: none !important;
  transition: background .12s ease;
  background: var(--bg-color);
}
.payments-td--actions {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-color) !important;
  border-right: 2px solid var(--border-color) !important;
}

/* Row hover for payment rows */
.py-table tbody tr:not(.u-hidden):hover > .payments-td {
  background: var(--hover-color) !important;
}
.py-table tbody tr:not(.u-hidden):hover > .payments-td--actions {
  background: var(--hover-color) !important;
}

/* Zebra striping */
.py-table tbody tr:not(.u-hidden):nth-child(even) > .payments-td {
  background: var(--bg-secondary-color);
}
.py-table tbody tr:not(.u-hidden):nth-child(even) > .payments-td--actions {
  background: var(--bg-secondary-color) !important;
}
.py-table tbody tr:not(.u-hidden):nth-child(even):hover > .payments-td {
  background: var(--hover-color) !important;
}
.py-table tbody tr:not(.u-hidden):nth-child(even):hover > .payments-td--actions {
  background: var(--hover-color) !important;
}

/* ===== Cell Content ===== */
.payments-cell-content {
  min-width: 120px;
  max-width: 300px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Highlight key columns */
.payments-cell-content[data-aki_identifier="name"],
.payments-cell-content[data-aki_identifier="mt4user"] {
  font-weight: 600;
  color: var(--text-color);
}
.payments-cell-content[data-aki_identifier="amount_received"],
.payments-cell-content[data-aki_identifier="amount_usd"],
.payments-cell-content[data-aki_identifier="amount_eur"] {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-color);
}
.payments-cell-content[data-aki_identifier="status"] {
  font-weight: 500;
}

/* Link-style cells */
.payments-cell-content.link,
[data-aki_identifier].link {
  color: var(--dt-text);
  cursor: pointer;
  font-weight: 500;
}
.payments-cell-content.link:hover,
[data-aki_identifier].link:hover {
  text-decoration: underline;
  filter: brightness(1.15);
}

/* ===== Action Buttons ===== */
.payments-actions-cell {
  display: flex;
  gap: 6px;
  align-items: center;
}
.payments-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  font-size: 0.73rem;
  font-weight: 500;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
  line-height: 1.4;
}
.payments-action-btn i { font-size: 0.68rem; }
.payments-action-btn--danger {
  background: transparent;
  color: var(--dt-text);
  border-color: var(--dt-border);
}
.payments-action-btn--danger:hover {
  background: var(--dt-danger);
  color: var(--dt-cta-fg);
  border-color: var(--dt-border-strong);
  box-shadow: none;
}
.payments-action-btn--info {
  background: transparent;
  color: var(--dt-text);
  border-color: var(--dt-border);
}
.payments-action-btn--info:hover {
  background: var(--dt-cta);
  color: var(--dt-cta-fg);
  border-color: var(--dt-border-strong);
  box-shadow: none;
}

/* ===== Inline Edit Fields ===== */
.campoinvisible {
  background: transparent;
  color: var(--text-color);
  border: 0;
  border-radius: 6px;
  min-width: 140px;
  height: 32px;
  padding: 4px 8px;
  font-size: inherit;
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  resize: none;
}
.campoinvisible:hover { border-color: var(--border-color); }
.campoinvisible:focus {
  border-color: var(--dt-focus);
  background: var(--input-color);
  outline: none;
  box-shadow: none;
}

/* Select inside cells */
.py-table select.campoinvisible {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235e6e82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}

/* ===== Empty State ===== */
.py-empty-state {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  text-align: center;
  background: var(--bg-color);
  border-radius: 14px;
  border: 0;
  margin-top: 16px;
}
.py-empty-state:not(.u-hidden) { display: flex; }
.py-empty-icon { margin-bottom: 16px; }
.py-empty-state h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.py-empty-state p {
  font-size: 15px;
  color: var(--text-secondary-color);
  max-width: 440px;
  margin: 0;
  line-height: 1.6;
}

/* ===== Footer ===== */
.py-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--bg-color);
  border: 0;
  border-top: none;
  border-radius: 0 0 14px 14px;
  margin-top: -1px;
  font-size: 13px;
  color: var(--text-secondary-color);
}
.py-footer-left { display: flex; align-items: center; gap: 8px; }
.py-footer-center { display: flex; align-items: center; gap: 8px; }
.py-footer-right { display: flex; align-items: center; gap: 8px; }
.py-footer-center .menu-wrapper .menu {
  top: auto;
  bottom: 40px;
}

.py-results-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 0;
  background: var(--bg-color);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-secondary-color);
  text-decoration: none;
}
.py-results-btn:hover {
  background: var(--hover-color);
  border-color: var(--border-strong-color);
  color: var(--text-color);
  text-decoration: none;
}

.py-page-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 0;
  background: var(--bg-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--datalyse-text-color);
  transition: all 0.15s ease;
  text-decoration: none;
}
.py-page-btn:hover:not(.btn--disabled) {
  background: var(--hover-color);
  border-color: var(--border-strong-color);
  text-decoration: none;
}
.py-page-btn.btn--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.py-page-btn svg { stroke: currentColor; }

/* ===== Scrollbar ===== */
.py-table-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.py-table-scroll::-webkit-scrollbar-thumb {
  background: var(--scrolldark-color);
  border-radius: 3px;
}
.py-table-scroll::-webkit-scrollbar-track { background: transparent; }

/* ===== Misc ===== */
.noscrollbar::-webkit-scrollbar {
  width: unset !important;
  height: unset !important;
}

/* ===== Skeleton (from py-table area) ===== */
.py-table-wrap .wf-skeleton-row {
  display: flex;
  align-items: center;
  padding: 6px 0;
  gap: 20px;
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
  .py-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .py-stats { grid-template-columns: 1fr 1fr; }
  .py-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .py-search-box { max-width: 100%; }
}
@media (max-width: 640px) {
  .py-container { padding: 0 16px 16px; }
  .py-stats { grid-template-columns: 1fr; }
  .py-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .py-header-right { width: 100%; }
  .py-btn-csv { width: 100%; justify-content: center; }
  .py-footer { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* =========================================================
   DARK THEME OVERRIDES
   ========================================================= */
[data-bs-theme=dark] .py-table-scroll {
  scrollbar-color: var(--scrolldark-color) transparent;
}
[data-bs-theme=dark] .py-table-scroll::-webkit-scrollbar-thumb {
  background: var(--scrolldark-color);
}
[data-bs-theme=dark] .py-table-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--dt-border-strong);
}
[data-bs-theme=dark] .payments-th {
  background: var(--bg-tertiary-color) !important;
  color: var(--text-muted-color) !important;
  border-bottom-color: var(--border-strong-color) !important;
}
[data-bs-theme=dark] .payments-th--actions {
  background: var(--bg-tertiary-color) !important;
  border-right-color: var(--border-strong-color) !important;
}
[data-bs-theme=dark] .payments-td {
  background: var(--bg-color);
  border-bottom-color: var(--border-color) !important;
  color: var(--text-color);
}
[data-bs-theme=dark] .payments-td--actions {
  background: var(--bg-color) !important;
  border-right-color: var(--border-color) !important;
}
[data-bs-theme=dark] .py-table tbody tr:not(.u-hidden):hover > .payments-td {
  background: var(--bg-tertiary-color) !important;
}
[data-bs-theme=dark] .py-table tbody tr:not(.u-hidden):hover > .payments-td--actions {
  background: var(--bg-tertiary-color) !important;
}
[data-bs-theme=dark] .py-table tbody tr:not(.u-hidden):nth-child(even) > .payments-td {
  background: var(--bg-secondary-color);
}
[data-bs-theme=dark] .py-table tbody tr:not(.u-hidden):nth-child(even) > .payments-td--actions {
  background: var(--bg-secondary-color) !important;
}
[data-bs-theme=dark] .py-table tbody tr:not(.u-hidden):nth-child(even):hover > .payments-td {
  background: var(--bg-tertiary-color) !important;
}
[data-bs-theme=dark] .py-table tbody tr:not(.u-hidden):nth-child(even):hover > .payments-td--actions {
  background: var(--bg-tertiary-color) !important;
}
[data-bs-theme=dark] .payments-action-btn--danger {
  background: transparent;
  color: var(--dt-text);
  border-color: var(--dt-border);
}
[data-bs-theme=dark] .payments-action-btn--danger:hover {
  background: var(--dt-danger);
  color: var(--dt-cta-fg);
  box-shadow: none;
}
[data-bs-theme=dark] .payments-action-btn--info {
  background: transparent;
  color: var(--dt-text);
  border-color: var(--dt-border);
}
[data-bs-theme=dark] .payments-action-btn--info:hover {
  background: var(--dt-cta);
  color: var(--dt-cta-fg);
  box-shadow: none;
}
[data-bs-theme=dark] .campoinvisible { color: var(--text-color); }
[data-bs-theme=dark] .campoinvisible:hover { border-color: var(--border-strong-color); }
[data-bs-theme=dark] .campoinvisible:focus {
  background: var(--input-color);
  border-color: var(--dt-focus);
  box-shadow: none;
}
[data-bs-theme=dark] .py-table select.campoinvisible {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b4b4b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
[data-bs-theme=dark] .payments-cell-content.link,
[data-bs-theme=dark] [data-aki_identifier].link {
  color: var(--dt-text);
}
[data-bs-theme=dark] .payments-cell-content.link:hover,
[data-bs-theme=dark] [data-aki_identifier].link:hover {
  color: var(--dt-text);
}
[data-bs-theme=dark] .payments-cell-content[data-aki_identifier="name"],
[data-bs-theme=dark] .payments-cell-content[data-aki_identifier="mt4user"],
[data-bs-theme=dark] .payments-cell-content[data-aki_identifier="amount_received"],
[data-bs-theme=dark] .payments-cell-content[data-aki_identifier="amount_usd"],
[data-bs-theme=dark] .payments-cell-content[data-aki_identifier="amount_eur"] {
  color: var(--dt-text);
}

/* ═══════════ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══════════
   Bloque añadido al final: solo color, borde, sombra, radio y peso; ningún id/clase que lea el JS cambia. */
/* ═══════════ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══════════
   Bloque añadido al final del <style> del módulo: solo color, borde, sombra, radio, espaciado y peso. Ningún id, clase ni
   atributo que lea el JS cambia (.payments-th/.payments-td/--actions, .removepayment/.viewthislead, .campoinvisible,
   [data-aki_identifier], .link, .u-hidden, .is-visible, .actionbar__pagination-*, [data-resultspage], .btn--disabled).
   Ámbito .py-module (raíz de ESTE módulo; #akialtopagina lo comparten workflows, aisendlist y control-scripts). Tokens
   --dt-* de datalyse-modern.css (oscuro automático): gana a los bloques [data-bs-theme=dark] de arriba por ir después
   con la misma especificidad. !important solo donde la regla original ya lo lleva (cabecera, celdas y columna fija).
   Referencia: modules/control-phonenumbers.html (.pn-title/.pn-count, .pn-btn, .pn-group-ic, .pn-empty-ic). */

.py-module .py-container {
  color: var(--dt-text);
  font-family: var(--font-sans);
}

/* ── Cabecera: título 20/600, contador en pastilla gris (como .pn-count, sin icono), exportar = ghost de 34 px ── */
.py-module .py-header { padding: 18px 0 16px; }
.py-module .py-title { font-size: 20px; font-weight: 400; letter-spacing: -.02em; color: var(--dt-text); }
.py-module .py-running-badge {
  height: 22px; padding: 0 9px; gap: 0; border-radius: 999px;
  background: var(--dt-surface-2); color: var(--dt-muted); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.py-module .py-running-badge svg { display: none; }
.py-module .py-btn-csv {
  height: 34px; padding: 0 13px; gap: 7px; border-radius: var(--dt-radius);
  background: transparent; color: var(--dt-text); border: 0;
  font-size: 13px; font-weight: 600; line-height: 1; box-shadow: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.py-module .py-btn-csv:hover { background: var(--dt-hover); color: var(--dt-text); box-shadow: none; transform: none; }

/* ── Tarjetas de resumen: línea fina, sin sombra al pasar, cifras 24/600 tabulares, icono en cuadrado neutro ── */
.py-module .py-stats { gap: 12px; margin-bottom: 20px; }
.py-module .py-stat-card {
  background: var(--dt-surface); border: 0; border-radius: var(--dt-radius-lg);
  padding: 16px 18px; transition: border-color .15s ease;
}
.py-module .py-stat-card:hover { box-shadow: none; border-color: var(--dt-border-strong); }
.py-module .py-stat-label { font-size: 12.5px; font-weight: 500; color: var(--dt-muted); margin-bottom: 4px; }
.py-module .py-stat-value { font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--dt-text); font-variant-numeric: tabular-nums; }
.py-module .py-stat-sub { font-size: 12px; color: var(--dt-faint); font-variant-numeric: tabular-nums; }
.py-module .py-stat-icon,
.py-module .py-stat-icon--blue, .py-module .py-stat-icon--purple, .py-module .py-stat-icon--green, .py-module .py-stat-icon--orange {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--dt-surface-2); color: var(--dt-muted); border: 1px solid var(--dt-border);
}
.py-module .py-stat-icon svg { width: 16px; height: 16px; }

/* ── Barra de herramientas sobre el fondo de la app (ya no es la tapa de la tarjeta): buscador y Filtros ghost de 34 px.
      El fondo/borde/radio del buscador los fija datalyse-theme.css con !important (input[type=search]): aquí solo medidas. ── */
.py-module .py-toolbar-area { background: transparent; border: 0; border-radius: 0; }
.py-module .py-toolbar { padding: 0 0 12px; }
.py-module .py-search-box > svg { color: var(--dt-faint); }
.py-module .py-search-box input { height: 34px; padding: 0 12px 0 36px; font-size: 13px; }
.py-module .py-search-box input:focus { border-color: var(--dt-focus); box-shadow: none; }
.py-module .py-filter-btn {
  height: 34px; padding: 0 13px; gap: 7px; border-radius: var(--dt-radius);
  border: 0; background: transparent; color: var(--dt-text);
  font-size: 13px; font-weight: 600; line-height: 1;
}
.py-module .py-filter-btn:hover { background: var(--dt-hover); border-color: var(--dt-border-strong); color: var(--dt-text); }
.py-module .py-filter-btn svg { color: var(--dt-muted); }

/* ── Cajón de filtros: capa flotante con línea fina fuerte, sin sombra (--dt-pop-shadow = none); dentro, los controles
      Bootstrap/legacy a 34 px. El botón "Field type" (.menu-wrapper.is-select > .btn-plain) ya lo pinta datalyse-modern.css;
      el <select class="btn-default"> de zona horaria venía con relleno azul --bs-primary y texto blanco → superficie + línea fina. ── */
.py-module .py-toolbar-area .filter-wrapper {
  top: calc(100% - 6px); margin-top: 0; padding: 14px 16px 16px;
  background: var(--dt-overlay); border: 0; border-radius: var(--dt-radius-lg);
  box-shadow: none;
}
.py-module .filter-wrapper .filter__label { color: var(--dt-faint); font-size: 12px; font-weight: 600; letter-spacing: .02em; margin-left: 0; margin-bottom: 6px; }
.py-module .filter-wrapper .filter__section { margin-bottom: 16px; }
.py-module .filter-wrapper .form-check-label { font-size: 13px; color: var(--dt-text); }
.py-module .filter-wrapper .form-group { margin-bottom: 10px; }
.py-module .filter-wrapper .input-container,
.py-module .filter-wrapper .select-container { margin-bottom: 0; border-radius: var(--dt-radius); }
.py-module .filter-wrapper .input-container input,
.py-module .filter-wrapper .select-container select,
.py-module .filter-wrapper select.btn-default {
  min-height: 34px; height: 34px; padding: 0 30px 0 10px; font-size: 13px; font-weight: 500; border-radius: var(--dt-radius);
  background-color: var(--dt-surface); color: var(--dt-text); border: 0; box-shadow: none;
}
.py-module .filter-wrapper .input-container input { padding-right: 10px; }
.py-module .filter-wrapper .input-container input:focus,
.py-module .filter-wrapper .select-container select:focus,
.py-module .filter-wrapper select.btn-default:focus { border-color: var(--dt-focus); box-shadow: none; }
.py-module .filter-wrapper .select-container:after { border-color: var(--dt-muted); }

/* ── Tabla: UNA tarjeta con línea fina (la barra y el pie ya no la prolongan); cabecera gris 600 sobre --dt-topbar;
      columna fija de acciones con borde de 1 px (era 2 px). Mismos !important que las reglas originales. ── */
.py-module .py-table-wrap {
  margin-top: 0; background: var(--dt-surface); border: 0; border-radius: var(--dt-radius-lg);
}
.py-module .py-table { font-size: 13px; font-variant-numeric: tabular-nums; }
.py-module .py-table thead th { color: var(--dt-muted); background: var(--dt-topbar); border-bottom-color: var(--dt-border-strong); }
.py-module .payments-th {
  padding: 11px 16px !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .05em;
  color: var(--dt-muted) !important; background: var(--dt-topbar) !important;
  border-bottom: 1px solid var(--dt-border-strong) !important;
}
.py-module .payments-th--actions { background: var(--dt-topbar) !important; border-right: 1px solid var(--dt-border) !important; }

.py-module .py-table tbody tr { border-bottom-color: var(--dt-border); }
.py-module .py-table tbody tr:not(.u-hidden):hover { background: transparent; }
.py-module .py-table tbody td { font-size: 13px; color: var(--dt-text); }
.py-module .payments-td {
  padding: 10px 16px !important; font-size: 13px; color: var(--dt-text);
  background: var(--dt-surface); border-bottom: 1px solid var(--dt-border) !important;
}
.py-module .payments-td--actions { background: var(--dt-surface) !important; border-right: 1px solid var(--dt-border) !important; }
.py-module .py-table tbody tr:last-child > .payments-td { border-bottom-color: transparent !important; }
/* sin cebra: todas las filas sobre la misma superficie (la columna fija necesita fondo opaco, nunca transparente) */
.py-module .py-table tbody tr:not(.u-hidden):nth-child(even) > .payments-td { background: var(--dt-surface); }
.py-module .py-table tbody tr:not(.u-hidden):nth-child(even) > .payments-td--actions { background: var(--dt-surface) !important; }
/* hover: velo gris; en la columna fija el velo va SOBRE la superficie para seguir opaco (en oscuro --dt-hover es translúcido) */
.py-module .py-table tbody tr:not(.u-hidden):hover > .payments-td,
.py-module .py-table tbody tr:not(.u-hidden):nth-child(even):hover > .payments-td { background: var(--dt-hover) !important; }
.py-module .py-table tbody tr:not(.u-hidden):hover > .payments-td--actions,
.py-module .py-table tbody tr:not(.u-hidden):nth-child(even):hover > .payments-td--actions {
  background: linear-gradient(var(--dt-hover), var(--dt-hover)) var(--dt-surface) !important;
}

/* ── Celdas: columnas clave en tinta por peso; enlace (mt4user) subrayado con línea fina, sin índigo ni filtro de brillo ── */
.py-module .payments-cell-content[data-aki_identifier="name"],
.py-module .payments-cell-content[data-aki_identifier="mt4user"],
.py-module .payments-cell-content[data-aki_identifier="amount_received"],
.py-module .payments-cell-content[data-aki_identifier="amount_usd"],
.py-module .payments-cell-content[data-aki_identifier="amount_eur"] { color: var(--dt-text); font-weight: 600; }
.py-module .payments-cell-content.link,
.py-module [data-aki_identifier].link {
  color: var(--dt-text); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--dt-border-strong); text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.py-module .payments-cell-content.link:hover,
.py-module [data-aki_identifier].link:hover { color: var(--dt-text); text-decoration-color: var(--dt-text); filter: none; }
/* estado: pastilla gris con punto de 6 px (como .pn-status-badge); el <a> vacío (sin valor) no pinta pastilla.
   El color del punto sale del valor que el JS deja en aria-label; un valor desconocido queda en gris. */
.py-module .payments-cell-content[data-aki_identifier="status"] { font-weight: 500; }
.py-module .payments-cell-content[data-aki_identifier="status"] > a:not(:empty) {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px;
  background: var(--dt-surface-2); color: var(--dt-muted); font-size: 12px; font-weight: 600; line-height: 1;
}
.py-module .payments-cell-content[data-aki_identifier="status"] > a:not(:empty)::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--dt-faint);
}
.py-module .payments-cell-content[data-aki_identifier="status"] > a:is([aria-label="ok" i], [aria-label="succeeded" i], [aria-label="paid" i], [aria-label="completed" i], [aria-label="complete" i], [aria-label="approved" i])::before { background: var(--dt-success); }
.py-module .payments-cell-content[data-aki_identifier="status"] > a:is([aria-label="pending" i], [aria-label="processing" i], [aria-label="requires_action" i])::before { background: var(--dt-warning); }
.py-module .payments-cell-content[data-aki_identifier="status"] > a:is([aria-label="failed" i], [aria-label="canceled" i], [aria-label="cancelled" i], [aria-label="refunded" i], [aria-label="rejected" i])::before { background: var(--dt-danger); }

/* ── Acciones por fila: ghost de 30 px (como .pn-btn--sm); el rojo solo en el icono/texto de Quitar; sin rellenos ni sombras ── */
.py-module .payments-action-btn,
.py-module .payments-action-btn--danger,
.py-module .payments-action-btn--info {
  height: 30px; padding: 0 10px; gap: 6px; border-radius: var(--dt-radius);
  background: transparent; color: var(--dt-text); border: 1px solid var(--dt-border);
  font-size: 12.5px; font-weight: 600; line-height: 1; box-shadow: none;
}
.py-module .payments-action-btn:hover,
.py-module .payments-action-btn--danger:hover,
.py-module .payments-action-btn--info:hover { background: var(--dt-hover); color: var(--dt-text); border-color: var(--dt-border-strong); box-shadow: none; }
.py-module .payments-action-btn i { font-size: 12px; color: var(--dt-muted); }
.py-module .payments-action-btn--danger i { color: var(--dt-danger); }
.py-module .payments-action-btn--danger:hover { color: var(--dt-danger); }

/* ── Edición en línea (textarea/select .campoinvisible): línea fina al pasar; el foco lo fija datalyse-modern.css (--dt-focus, sin anillo) ── */
.py-module .campoinvisible { color: var(--dt-text); border-radius: var(--dt-radius-sm); }
.py-module .campoinvisible:hover { border-color: var(--dt-border-strong); }
.py-module .campoinvisible:focus { background: var(--dt-surface-2); border-color: var(--dt-focus); box-shadow: none; }

/* ── Vacío: tarjeta con línea fina, icono en cuadrado neutro de 44 px (como .pn-empty-ic; el stroke="#c7d2fe" del SVG lo pisa
      la propiedad CSS), título 15/600 ── */
.py-module .py-empty-state { background: var(--dt-surface); border: 0; border-radius: var(--dt-radius-lg); padding: 40px 20px; }
.py-module .py-empty-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--dt-surface-2); border: 0; color: var(--dt-muted); margin-bottom: 12px;
}
.py-module .py-empty-icon svg { width: 22px; height: 22px; stroke: currentColor; }
.py-module .py-empty-state h2 { font-size: 15px; font-weight: 600; color: var(--dt-text); margin: 0 0 4px; letter-spacing: 0; }
.py-module .py-empty-state p { font-size: 13px; color: var(--dt-muted); }

/* ── Pie: paginación sobre el fondo de la app (sin tarjeta pegada a la tabla), botones ghost de 30 px, números tabulares ── */
.py-module .py-footer { background: transparent; border: 0; border-radius: 0; margin-top: 0; padding: 12px 0 0; color: var(--dt-muted); font-size: 12.5px; }
.py-module .py-footer .actionbar__pagination-number { font-variant-numeric: tabular-nums; }
.py-module .py-footer .datespagination { color: var(--dt-faint); }
.py-module .py-results-btn {
  height: 30px; padding: 0 10px; border-radius: var(--dt-radius);
  border-color: var(--dt-border-strong); background: transparent; color: var(--dt-text); font-size: 12.5px; font-weight: 600;
}
.py-module .py-results-btn:hover { background: var(--dt-hover); border-color: var(--dt-border-strong); color: var(--dt-text); }
.py-module .py-results-btn svg { color: var(--dt-muted); }
.py-module .py-page-btn { width: 30px; height: 30px; border-radius: var(--dt-radius); border-color: var(--dt-border-strong); background: transparent; color: var(--dt-muted); }
.py-module .py-page-btn:hover:not(.btn--disabled) { background: var(--dt-hover); border-color: var(--dt-border-strong); color: var(--dt-text); }

/* ── Scroll de la tabla: pulgar en gris de línea fina (también en oscuro, donde iba #555) ── */
.py-module .py-table-scroll { scrollbar-color: var(--dt-border-strong) transparent; }
.py-module .py-table-scroll::-webkit-scrollbar-thumb,
.py-module .py-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--dt-border-strong); }

}
/* end dui-template-style modules/control-payments:0 */
/* dui-template-style {"key":"modules/control-phonenumbers:0","bytes":89957,"sha256":"5205c74ce7f11ed161e65a53c0973fd318045b090d102adb39c3d86404ecf9de","media":null,"source_sha256":"b0518b246b900eb6328c16de4126466d89fd671c593ffe16774781505358064a"} */
@scope (:root:has(template[data-dui-legacy-style="modules/control-phonenumbers:0"])) {

    /* ═══════════ Phone Numbers — rediseño visual 2026-09-12 ═══════════
       Tokens --pn-* → --dt-* de datalyse-modern.css (dark automático por [data-bs-theme="dark"]);
       los fallbacks son el tema claro. Mismo lenguaje que routing.html (.vp). Los ids/clases que lee el
       JS (pn-tab-active, pn-chip-on, pn-status-badge, pn-table-responsive/pn-scrolled, pn-row-check,
       ivr-block, ui-state-highlight, pn2-*...) NO cambian: solo su CSS. */
    #akicontenidonormal, #pn-pbx-overlay {
        --pn-app: var(--dt-app, #f7f7f6); --pn-surface: var(--dt-surface, #ffffff); --pn-surface2: var(--dt-surface-2, #eeeeec);
        --pn-topbar: var(--dt-topbar, #fafaf9); --pn-border: var(--dt-border, rgba(15,15,15,.08)); --pn-border-strong: var(--dt-border-strong, rgba(12, 10, 9, .09));
        --pn-text: var(--dt-text, #111110); --pn-muted: var(--dt-muted, #5f5f5c); --pn-faint: var(--dt-faint, #72726e);
        --pn-hover: var(--dt-hover, #f4f4f3); --pn-active: var(--dt-active, #efefee); --pn-ring: var(--dt-focus-ring, rgba(15,15,15,.12));
        --pn-cta: var(--dt-cta, #006fbe); --pn-cta-hover: var(--dt-cta-hover, #005fa6); --pn-cta-fg: var(--dt-cta-fg, #ffffff); --pn-link: var(--dt-link, #0068b5);
        --pn-pill-on: var(--dt-text, #111110); --pn-pill-on-fg: var(--dt-surface, #ffffff);
        --pn-ok-bg: var(--dt-chip-success); --pn-ok-tx: #076b39; --pn-warn-bg: var(--dt-chip-warning); --pn-warn-tx: #8a4d0a; --pn-info-bg: var(--dt-chip-channel); --pn-info-tx: #005fa6;
        --pn-danger-bg: var(--dt-chip-danger); --pn-danger-tx: #a33232; --pn-danger: var(--dt-danger, #d94949);
        --pn-shadow-xs: none; --pn-pop-shadow: var(--dt-pop-shadow, 0 18px 45px rgba(15,15,15,.14));
        --pn-radius: var(--dt-radius, 8px); --pn-radius-lg: var(--dt-radius-lg, 12px); --pn-control-h: 34px;
        --pn-font: var(--el-font, var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif));
    }
    :scope[data-bs-theme="dark"] #akicontenidonormal, :scope[data-bs-theme="dark"] #pn-pbx-overlay {
        --pn-ok-bg: var(--dt-chip-success); --pn-ok-tx: #5fd58f; --pn-warn-bg: var(--dt-chip-warning); --pn-warn-tx: #f0b45c; --pn-info-bg: var(--dt-chip-channel); --pn-info-tx: #71c4f8;
        --pn-danger-bg: var(--dt-chip-danger); --pn-danger-tx: #f08a8a; --pn-shadow-xs: none;
    }
    .pn-head, .pn-maintabs, #pn-list-section, #pn-buy-section, #pn-pbx-overlay, #akipongoavisonohaylineas, .profile__body-subscriptions {
        font-family: var(--pn-font); font-size: 13px; color: var(--pn-text);
    }

    /* ── Cabecera del módulo ── */
    .pn-head { padding: 18px 24px 0; width: 100%; box-sizing: border-box; overflow-x: hidden; }
    .pn-header-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
    .pn-head-text { display: flex; flex-direction: column; gap: 3px; min-width: 240px; }
    .pn-head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .pn-title { margin: 0; font-size: 20px; font-weight: 400; line-height: 1.25; letter-spacing: -.02em; color: var(--pn-text); }
    .pn-count { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--pn-surface2); color: var(--pn-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
    .pn-sub { font-size: 13px; color: var(--pn-muted); }
    .pn-head-actions { display: flex; gap: 8px; align-items: center; position: relative; }
    .pn-cart-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; min-width: 260px; max-width: 320px; background: var(--pn-surface); border: 0; border-radius: var(--pn-radius-lg); padding: 14px; box-shadow: none; }
    .pn-cart-pop-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
    .pn-cart-pop-label { color: var(--pn-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
    .pn-cart-pop-sub { color: var(--pn-muted); font-size: 12.5px; margin-bottom: 10px; }
    .pn-ic-ok { color: var(--pn-ok-tx); font-size: 1.15rem; flex-shrink: 0; }
    .pn-ic-muted { color: var(--pn-muted); }

    /* ── Botones (34px, radio 8): ghost / primary / danger / icon / sm / lg ── */
    .pn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--pn-control-h); padding: 0 13px; border-radius: var(--pn-radius);
        border: 0; background: transparent; color: var(--pn-text); font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
        cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
    .pn-btn:hover { background: var(--pn-hover); color: var(--pn-text); }
    .pn-btn.active { background: var(--pn-active); }
    .pn-btn i.ti { font-size: 16px; line-height: 1; }
    .pn-btn--primary { background: var(--pn-cta); border-color: var(--pn-cta); color: var(--pn-cta-fg); }
    .pn-btn--primary:hover { background: var(--pn-cta-hover); border-color: var(--pn-cta-hover); color: var(--pn-cta-fg); }
    .pn-btn--danger { color: var(--pn-danger-tx); border-color: color-mix(in srgb, var(--pn-danger-tx) 45%, transparent); }
    .pn-btn--danger:hover { background: var(--pn-danger-bg); color: var(--pn-danger-tx); }
    .pn-btn--sm { height: 30px; padding: 0 11px; font-size: 12.5px; }
    .pn-btn--sm i.ti { font-size: 15px; }
    .pn-btn--icon { width: 30px; height: 30px; padding: 0; border-color: var(--pn-border); color: var(--pn-muted); }
    .pn-btn--icon:hover { color: var(--pn-text); }
    .pn-btn--lg { height: 40px; padding: 0 22px; font-size: 14px; }
    .pn-btn--block { width: 100%; }
    .pn-btn:disabled, .pn-btn.is-busy { opacity: .55; pointer-events: none; }
    .pn-btn-n { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(255,255,255,.22); color: inherit; }
    .pn-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .pn-back { margin: 12px 0 16px; }
    /* botones de fila / de lista (misma clase que lee el JS): 30px ghost, con o sin texto */
    .pn-action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 30px; height: 30px; padding: 0 9px; border-radius: var(--pn-radius);
        border: 0; background: transparent; color: var(--pn-muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .12s, color .12s, border-color .12s; }
    .pn-action-btn i.ti { font-size: 15px; line-height: 1; }
    .pn-action-btn:hover { background: var(--pn-hover); color: var(--pn-text); }
    .pn-action-btn.pn-action-danger { color: var(--pn-danger-tx); border-color: color-mix(in srgb, var(--pn-danger-tx) 35%, transparent); }
    .pn-action-btn.pn-action-danger:hover { background: var(--pn-danger-bg); }
    .pn-action-btn:disabled { opacity: .55; pointer-events: none; }

    /* ── Tabs principales: segmented control ── */
    .pn-maintabs { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--pn-surface2); margin: 14px 24px 16px; max-width: calc(100% - 48px); overflow-x: auto; }
    .pn-tab-btn { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; border-bottom: 2px solid transparent; padding: 0 12px; height: 34px; font: inherit; font-size: 13px; font-weight: 600; color: var(--pn-muted); cursor: pointer; white-space: nowrap; transition: color .15s, background-color .15s; }
    .pn-tab-btn:hover { color: var(--pn-text); }
    .pn-tab-btn i.ti { font-size: 15px; }
    .pn-maintabs .pn-tab-btn { height: 30px; border-radius: 7px; border-bottom: none; }
    .pn-maintabs .pn-tab-btn.pn-tab-active { background: var(--pn-surface); color: var(--pn-text); box-shadow: var(--pn-shadow-xs); }
    .pn-tab-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; background: transparent; color: var(--pn-muted); }
    .pn-tab-btn.pn-tab-active .pn-tab-badge { background: var(--pn-surface2); color: var(--pn-muted); }
    /* tabs del overlay (Phone Numbers / Call Flow / Settings): subrayado */
    .pn-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--pn-border); overflow-x: auto; }
    .pn-tabs .pn-tab-btn { padding: 0 2px; height: 38px; margin-bottom: -1px; }
    .pn-tabs .pn-tab-btn.pn-tab-active { color: var(--pn-text); border-bottom-color: var(--pn-text); }
    .pn-tabpanel { padding-top: 20px; }

    /* ── Cards y tablas ── */
    .pn-card { background: var(--pn-surface); border: 0; border-radius: var(--pn-radius-lg); overflow: hidden; }
    .pn-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--pn-border); }
    .pn-table { width: 100%; border-collapse: collapse; }
    .pn-table thead th { height: 40px; padding: 0 16px; text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pn-muted); background: var(--pn-topbar); border-bottom: 1px solid var(--pn-border); white-space: nowrap; }
    .pn-table thead th.pn-th--r, .pn-table td.pn-td--r { text-align: right; white-space: nowrap; }
    .pn-table thead th.pn-th--chk, .pn-table td.pn-td--chk { width: 34px; padding-right: 6px; }
    .pn-table tbody td { height: 46px; padding: 6px 16px; border-bottom: 1px solid var(--pn-border); font-size: 13px; color: var(--pn-text); vertical-align: middle; }
    .pn-table tbody tr:last-child td { border-bottom: none; }
    .pn-table-row:hover td, .pn-table-row:hover { background: var(--pn-hover); }
    /* ── Lista agrupada por servicio (26-10): una cabecera por centralita y debajo sus numeros ── */
    .pn-table tbody tr.pn-group td { height: 44px; padding: 0 12px 0 10px; background: var(--pn-topbar); border-top: 1px solid var(--pn-border); border-bottom: 1px solid var(--pn-border); }
    .pn-table tbody tr.pn-group:first-child td { border-top: 0; }
    .pn-group-row { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; user-select: none; flex-wrap: wrap; }
    .pn-group-toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--pn-muted); cursor: pointer; }
    .pn-group-toggle i.ti { font-size: 15px; transition: transform .15s ease; }
    .pn-group-toggle:hover { background: var(--pn-active); color: var(--pn-text); }
    .pn-group--closed .pn-group-toggle i.ti { transform: rotate(-90deg); }
    .pn-group-ic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--pn-surface2); border: 0; color: var(--pn-muted); flex-shrink: 0; }
    .pn-group-ic i.ti { font-size: 14px; }
    .pn-group-name { font-size: 13px; font-weight: 600; color: var(--pn-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 48ch; }
    .pn-group-name--none { color: var(--pn-muted); font-weight: 500; }
    .pn-group-id { font-size: 12px; color: var(--pn-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .pn-group-n { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--pn-surface2); color: var(--pn-muted); white-space: nowrap; }
    .pn-group-flags { display: inline-flex; align-items: center; font-size: 12px; }
    .pn-group-flags .fi { border-radius: 3px; box-shadow: 0 0 0 1px var(--pn-border); margin-left: 5px; }
    .pn-group-more { font-size: 11px; color: var(--pn-faint); margin-left: 6px; }
    .pn-group-sp { flex: 1 1 auto; }
    .pn-group-cfg { opacity: .7; }
    .pn-group-row:hover .pn-group-cfg { opacity: 1; }
    @media (max-width: 767px) { .pn-group-cfg-t { display: none; } .pn-group-name { max-width: 22ch; } }
    /* servicio sin numeros: cabecera de grupo sin chevron ni plegado, con Añadir numero / Configurar / papelera */
    .pn-group--empty .pn-group-row { cursor: default; padding-left: 34px; }
    .pn-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .pn-nowrap { white-space: nowrap; }
    .pn-td--muted { color: var(--pn-muted); }
    .pn-td--num { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .pn-td--flag { font-size: 1.25rem; }
    .pn-num { font-weight: 600; color: var(--pn-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
    .pn-alias, .pn-id { font-size: 12px; color: var(--pn-faint); margin-top: 1px; }
    .pn-flag { margin-right: 8px; border-radius: 3px; box-shadow: 0 0 0 1px var(--pn-border); }
    .pn-country { color: var(--pn-text); }
    .pn-strong { font-weight: 600; color: var(--pn-text); }
    .pn-pbx-link { font-weight: 500; color: var(--pn-link) !important; }
    .pn-ident-none { display: inline-flex; align-items: center; gap: 5px; color: var(--pn-danger-tx); font-weight: 600; text-decoration: none; }
    /* identificador de llamada del usuario (26-10): chip en la celda de acciones; el boton «Usar como mi identificador» es un .pn-action-btn */
    .pn-td--r > .pn-cid-mine { margin-right: 6px; vertical-align: middle; }
    .pn-td--r > .pn-action-btn + .pn-action-btn, .pn-td--r > .pn-btn + .pn-btn { margin-left: 4px; }
    .pn-empty-inline { text-align: center; padding: 24px 20px; color: var(--pn-muted); }
    .pn-empty { text-align: center; padding: 40px 20px; color: var(--pn-muted); }
    .pn-empty-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--pn-surface2); color: var(--pn-muted); margin-bottom: 12px; }
    .pn-empty-ic i.ti { font-size: 22px; }
    .pn-empty-t { margin: 0 0 4px; font-weight: 600; font-size: 14px; color: var(--pn-text); }
    .pn-empty-s { margin: 0 0 16px; font-size: 13px; }

    /* ── Badges de estado (misma clase .pn-status-badge que lee el JS; variantes por color) ── */
    .pn-status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: currentColor; }
    .pn-status-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--pn-surface2); color: var(--pn-muted); }
    .pn-status-badge i.ti { font-size: 14px; }
    .pn-badge--ok { background: var(--pn-ok-bg); color: var(--pn-ok-tx); }
    .pn-badge--warn { background: var(--pn-warn-bg); color: var(--pn-warn-tx); }
    .pn-badge--info { background: var(--pn-info-bg); color: var(--pn-info-tx); }
    .pn-badge--danger { background: var(--pn-danger-bg); color: var(--pn-danger-tx); }
    .pn-badge--muted { background: var(--pn-surface2); color: var(--pn-muted); }
    .pn-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; margin-right: 4px; }
    /* linea comprada cuyo callback de activacion aun no llego */
    @keyframes dui-legacy-modules-control-phonenumbers-pnActivatingPulse {
        0%, 100% { opacity: 1; }
        50%      { opacity: .65; }
    }
    .pn-badge-activating { animation: dui-legacy-modules-control-phonenumbers-pnActivatingPulse 1.5s ease-in-out infinite; }

    /* ── Chips de estado con contador (monocromas; activa = tinta) + buscador ── */
    .pn-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
    .pn-chip-estado { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 6px 0 12px; border: 1px solid var(--pn-border-strong); border-radius: 999px;
        background: var(--pn-surface); color: var(--pn-text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background-color .12s, color .12s, border-color .12s; }
    .pn-chip-estado i.ti { font-size: 14px; }
    .pn-chip-estado:hover { background: var(--pn-hover); }
    .pn-chip-estado.pn-chip-on { background: var(--pn-pill-on); border-color: var(--pn-pill-on); color: var(--pn-pill-on-fg); }
    .pn-chip-num { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--pn-surface2); color: var(--pn-muted); }
    .pn-chip-estado.pn-chip-on .pn-chip-num { background: rgba(255,255,255,.18); color: var(--pn-pill-on-fg); }
    :scope[data-bs-theme="dark"] .pn-chip-estado.pn-chip-on .pn-chip-num { background: rgba(0,0,0,.2); }
    .pn-search { max-width: 340px; margin-left: auto; flex-wrap: nowrap; }
    .pn-search .input-group-text { height: var(--pn-control-h); background: var(--pn-surface); border: 0; border-right: none; border-radius: var(--pn-radius) 0 0 var(--pn-radius); color: var(--pn-faint); padding: 0 0 0 12px; }
    .pn-search .form-control { height: var(--pn-control-h); background: var(--pn-surface); border: 0; border-left: none; border-radius: 0 var(--pn-radius) var(--pn-radius) 0; color: var(--pn-text); font-size: 13px; box-shadow: none; }
    .pn-search .form-control:focus { box-shadow: none; border-color: var(--pn-border-strong); }
    .pn-search:focus-within .input-group-text, .pn-search:focus-within .form-control { border-color: var(--pn-text); }
    .pn-label { display: block; font-size: 12px; font-weight: 600; color: var(--pn-muted); letter-spacing: .02em; margin-bottom: 6px; }
    .pn-sel, #pn2_wrap .form-select, #pn2_wrap .form-control { height: var(--pn-control-h); width: auto; border-radius: var(--pn-radius); border: 0; background-color: var(--pn-surface); color: var(--pn-text); font-size: 13px; box-shadow: none; }
    .pn-sel--sm, #pn2_wrap .form-select-sm, #pn2_wrap .form-control-sm { height: 30px; font-size: 12.5px; padding-top: 0; padding-bottom: 0; }
    .pn-sel--sm { min-width: 120px; max-width: 170px; }
    .pn-qty { width: 60px; display: inline-block; vertical-align: middle; text-align: center; }
    #pn2_wrap .form-select:focus, #pn2_wrap .form-control:focus { border-color: var(--pn-text); box-shadow: 0 0 0 3px var(--pn-ring); }

    /* ── Edicion masiva: barra sticky (visible con seleccion > 0) ── */
    #pn-masivo-bar { display: none; position: sticky; top: 0; z-index: 5; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 44px;
        background: var(--pn-surface); border: 0; border-radius: 10px; padding: 6px 14px; margin-bottom: 10px; box-shadow: none; }
    .pn-masivo-count { font-weight: 600; color: var(--pn-text); padding-right: 10px; border-right: 1px solid var(--pn-border); }
    .pn-row-check, #pn-check-master { width: 16px; height: 16px; cursor: pointer; accent-color: var(--pn-pill-on); vertical-align: middle; margin: 0; }

    /* ── Tablas largas: scroll propio con cabecera sticky que se COMPACTA al scrollear ── */
    .pn-table-responsive { overflow: auto; max-height: calc(100vh - 140px); }
    .pn-table-responsive thead th { position: sticky; top: 0; z-index: 3; background: var(--pn-topbar); transition: padding .12s ease, height .12s ease; }
    /* scrolleando: solo MENOS ALTURA (el font-size NO se toca: reflowea las columnas) */
    .pn-table-responsive.pn-scrolled thead th { height: 30px !important; }
    .pn-th-sort { cursor: pointer; user-select: none; }
    .pn-th-sort:hover { color: var(--pn-text) !important; }
    .pn-th-sort .ti-chevron-up, .pn-th-sort .ti-chevron-down { font-size: 0.85rem; vertical-align: -1px; color: var(--pn-text); margin-left: 2px; }

    /* ── Secciones de la tab My Numbers ── */
    #pn-list-section { padding: 0 24px 18px; }
    /* avisos (pendientes de registro, info de compra) */
    .pn-alert { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--pn-radius-lg); border: 1px solid transparent; margin-bottom: 16px; font-size: 13px; }
    .pn-alert > .d-flex, .pn-alert > div.mb-2.d-flex { gap: 8px; }
    .pn-alert--warn { background: var(--pn-warn-bg); color: var(--pn-warn-tx); border-color: color-mix(in srgb, var(--pn-warn-tx) 20%, transparent); }
    .pn-alert--info { background: var(--pn-info-bg); color: var(--pn-info-tx); border-color: color-mix(in srgb, var(--pn-info-tx) 20%, transparent); }
    .pn-alert--danger { background: var(--pn-danger-bg); color: var(--pn-danger-tx); }
    .pn-alert-ic { font-size: 18px; margin-right: 8px; flex-shrink: 0; vertical-align: -3px; }
    .pn-alert .btn-close { position: absolute; right: 12px; top: 12px; }
    .pn-pend .pn-pend-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
    .pn-pend-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 12px; background: var(--pn-surface); border: 0; border-radius: 10px; width: 100%; color: var(--pn-text); }
    .pn-pend-l { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .pn-pend ul { color: var(--pn-text); }
    /* empty state de la cuenta sin lineas */
    .pn-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 340px; padding: 40px 24px; text-align: center; }
    .pn-hero-img { opacity: .87; margin-bottom: 18px; }
    .pn-hero-t { font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--pn-text); margin: 0 0 8px; }
    .pn-hero-p { max-width: 460px; font-size: 14px; color: var(--pn-muted); margin: 0 0 20px; line-height: 1.5; }
    .pn-hero-hl { color: var(--pn-text); font-weight: 600; }
    /* aviso "necesitas metodo de pago" */
    .profile__body-subscriptions .module__content--padded > div { background: var(--pn-warn-bg) !important; color: var(--pn-warn-tx); border-radius: var(--pn-radius-lg); padding: 12px 14px !important; margin: 0 24px 14px !important; width: auto !important; }
    .profile__body-subscriptions .link { color: var(--pn-link); }

    /* ── Tab COMPRAR (#pn-buy-section / pn2-*) ── */
    #pn-buy-section { margin: 0 24px 24px; background: var(--pn-surface); border: 0; border-radius: var(--pn-radius-lg); padding: 18px 20px; }
    .pn-buy-sub { margin: 0 0 12px; }
    #pn2_buyzone #pn2_titulo { display: none; }                 /* el titulo grande propio de la UI de compra sobra inline */
    #pn2_buyzone #pn2_wrap { padding: 0 !important; }
    #pn2_buyzone #pn2_cabecera { margin-bottom: 4px !important; }
    #pn2_buyzone #pn2_btn_carrito { display: none !important; } /* el carrito vive en la cabecera del modulo (#pn-header-cart) */
    #pn2_wrap .pn2-accent { color: var(--pn-text); font-weight: 700; }
    #pn2_wrap .pn2-subtitulo { color: var(--pn-muted); font-size: 13px; }
    .pn2-pais { margin-bottom: 4px; }
    .pn2-pais-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
    .pn2-pais-sel { min-width: 280px; flex: 1; max-width: 420px; }
    .pn2-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 12px; }
    .pn2-tab-btn { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 6px 0 12px; border: 0; border-radius: 999px; background: var(--pn-surface); color: var(--pn-text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .12s, color .12s, border-color .12s; }
    .pn2-tab-btn:hover:not(:disabled) { background: var(--pn-hover); }
    .pn2-tab-btn.pn2-tab-active { background: var(--pn-pill-on); border-color: var(--pn-pill-on); color: var(--pn-pill-on-fg); }
    .pn2-tab-btn:disabled { opacity: .4; cursor: not-allowed; }
    .pn2-tab-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--pn-surface2); color: var(--pn-muted); }
    .pn2-tab-btn.pn2-tab-active .pn2-tab-badge { background: rgba(255,255,255,.18); color: var(--pn-pill-on-fg); }
    :scope[data-bs-theme="dark"] .pn2-tab-btn.pn2-tab-active .pn2-tab-badge { background: rgba(0,0,0,.2); }
    .pn2-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
    .pn2-filtros .pn-search { margin-left: 0; }
    #pn2_wrap .table-responsive { background: var(--pn-surface); border: 0; border-radius: var(--pn-radius-lg); overflow: auto; max-height: calc(100vh - 150px); }
    .pn2-table { width: 100%; border-collapse: collapse; margin: 0; --bs-table-bg: transparent; color: var(--pn-text); }
    .pn2-table thead th { position: sticky; top: 0; z-index: 3; height: 40px; padding: 0 16px; text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--pn-muted); background: var(--pn-topbar); border: none; border-bottom: 1px solid var(--pn-border); white-space: nowrap; transition: height .12s ease; }
    .pn2-table thead th .pn2-th-sub { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--pn-faint); }
    .table-responsive.pn2-scrolled .pn2-table th { height: 30px; }
    .table-responsive.pn2-scrolled .pn2-table th .pn2-th-sub { display: none; }
    #pn2_wrap #pn2_paso_checkout .table-responsive { max-height: none; }
    .pn2-th-sort { cursor: pointer; user-select: none; }
    .pn2-th-sort:hover { color: var(--pn-text); }
    .pn2-th-sort .ti-chevron-up, .pn2-th-sort .ti-chevron-down { font-size: .85rem; vertical-align: -1px; color: var(--pn-text); }
    .pn-info-ic { margin-left: 5px; cursor: help; font-size: 13px; color: var(--pn-faint); vertical-align: -1px; }
    .pn2-table td { height: 52px; padding: 8px 16px; vertical-align: middle; border: none; border-bottom: 1px solid var(--pn-border); font-size: 13px; }
    .pn2-table tbody tr:last-child td { border-bottom: none; }
    .pn2-table tbody tr:hover { background: var(--pn-hover); }
    .pn2-prefijo { font-weight: 600; white-space: nowrap; font-size: 13px; color: var(--pn-text); font-variant-numeric: tabular-nums; }
    .pn2-prefijo--lg { font-size: 15px; }
    .pn2-area { color: var(--pn-faint); font-size: 12px; margin-top: 1px; }
    .pn2-feature { font-size: 16px; margin-right: 8px; vertical-align: middle; }
    .pn2-feat-on { color: var(--pn-text); }
    .pn2-feat-off { color: var(--pn-faint); opacity: .4; }
    .pn2-badge-mini { font-size: .62rem; font-weight: 700; border: 1px solid currentColor; border-radius: 4px; padding: 1px 4px; margin-right: 6px; display: inline-block; vertical-align: middle; }
    .pn2-free { color: var(--pn-ok-tx); font-weight: 600; white-space: nowrap; }
    .pn2-free i.ti { font-size: 14px; vertical-align: -2px; }
    .pn2-precio { font-size: 14px; font-weight: 700; white-space: nowrap; }
    .pn2-unit { font-weight: 400; font-size: 12px; }
    #pn2_wrap small.text-muted, #pn2_wrap .text-muted { color: var(--pn-faint) !important; }
    .pn2-status-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
    .pn2-status-badge i.ti { font-size: 14px; }
    .pn2-status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: currentColor; }
    .pn2-badge-amber { background: var(--pn-warn-bg); color: var(--pn-warn-tx); }
    .pn2-badge-green { background: var(--pn-ok-bg); color: var(--pn-ok-tx); }
    .pn2-badge-red { background: var(--pn-danger-bg); color: var(--pn-danger-tx); }
    .pn2-btncart { vertical-align: middle; }
    .pn2-paginador { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; color: var(--pn-muted); }
    .pn2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
    .pn2-chip input { display: none; }
    .pn2-chip span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid var(--pn-border-strong); border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 13px; transition: all .12s; color: var(--pn-text); background: var(--pn-surface); font-variant-numeric: tabular-nums; }
    .pn2-chip span:hover { background: var(--pn-hover); }
    .pn2-chip input:checked + span { border-color: var(--pn-pill-on); background: var(--pn-pill-on); color: var(--pn-pill-on-fg); }
    .pn2-resumen-grupo { background: var(--pn-surface); border: 0; border-radius: var(--pn-radius-lg); padding: 16px 18px; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
    .pn2-total { justify-content: space-between; margin-top: 16px; }
    .pn2-chk-st { margin-right: 8px; vertical-align: middle; }
    .pn2-doc-row { background: var(--pn-surface); display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 0; border-radius: var(--pn-radius-lg); margin-bottom: 8px; flex-wrap: wrap; }
    .pn2-doc-row .pn2-doc-nombre { font-weight: 600; min-width: 180px; }
    .pn2-ok { color: var(--pn-ok-tx); }
    .pn2-ko { color: var(--pn-danger-tx); }
    .pn2-ic-lg { font-size: 1.2rem; vertical-align: -3px; }
    .pn-file { max-width: 280px; }
    .pn-kv-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 13px; }
    .pn-kv { display: flex; justify-content: space-between; gap: 12px; }
    .pn-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
    .pn2-spin { display: inline-block; animation: dui-legacy-modules-control-phonenumbers-pn2spin 1s linear infinite; }
    @keyframes dui-legacy-modules-control-phonenumbers-pn2spin { to { transform: rotate(360deg); } }
    .pn2-req-box { background: var(--pn-surface2); border: 1.5px dashed var(--pn-border-strong); border-radius: var(--pn-radius-lg); padding: 14px 16px; margin-bottom: 14px; font-size: 13px; }
    .pn2-req-box ul { margin: 4px 0 8px 18px; padding: 0; }
    .pn2-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 14px; }
    @media (max-width: 600px) { .pn2-form-grid { grid-template-columns: 1fr; } }
    /* gate de verificacion de cuenta (sin cuenta verificada no se carga el catalogo) */
    .pn-gate { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 4px 0; }
    .pn-gate-ic { width: 44px; height: 44px; border-radius: var(--pn-radius-lg); background: var(--pn-info-bg); color: var(--pn-info-tx); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
    .pn-gate-body { flex: 1; min-width: 220px; }
    .pn-gate-t { font-weight: 600; color: var(--pn-text); }
    .pn-gate-s { color: var(--pn-muted); font-size: 13px; }

    /* ── Servicio seleccionado: navegación lateral y editor PBX existente ── */
    #pn-pbx-overlay { display: none; position: relative; inset: auto; background: var(--pn-app); padding: 0 24px 20px; min-width: 0; }
    .pn-ov-wrap { display: flex; flex-direction: column; max-height: 100%; min-height: 0; border: 0; border-radius: 12px; background: var(--pn-surface); overflow: hidden; }
    .pn-ov-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--pn-border); flex: none; }
    .pn-ov-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .pn-ov-avatar { width: 34px; height: 34px; border: 1px solid var(--pn-border); border-radius: 9px; background: var(--pn-surface2); color: var(--pn-text); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
    .pn-ov-text { min-width: 0; }
    .pn-ov-title { margin: 0; font-weight: 600; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pn-text); }
    .pn-ov-sub { font-size: 12px; color: var(--pn-muted); margin-top: 3px; overflow-wrap: anywhere; }
    .pn-ov-actions { display: flex; gap: 8px; align-items: center; flex: none; }
    /* cabecera del servicio = cabecera de su grupo en la lista (26-10): flecha a la izquierda, nombre, meta en gris */
    .pn-ov-back { width: 34px; height: 34px; padding: 0; border-color: var(--pn-border); color: var(--pn-muted); flex: none; }
    .pn-ov-back:hover { color: var(--pn-text); }
    #pn-pbx-overlay .pn-ov-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    #pn-pbx-overlay .pn-ov-title.pn-group-name--none { color: var(--pn-muted); font-weight: 500; }
    #pn-main-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
    /* pestañas horizontales con subrayado bajo la cabecera del servicio (26-10; antes columna lateral de 190 px) */
    #pn-main-content > .pn-tabs { display: flex; flex-direction: row; align-items: stretch; flex: none; gap: 18px; margin: 0; padding: 0 24px; border: 0; border-bottom: 1px solid var(--pn-border); background: transparent; }
    #pn-main-content > .pn-tabs .pn-tab-btn { height: 40px; min-height: 0; padding: 0 2px; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; white-space: nowrap; gap: 7px; font-size: 13px; font-weight: 600; line-height: 1; color: var(--pn-muted); flex: none; }
    #pn-main-content > .pn-tabs .pn-tab-btn > span[data-idi] { min-width: 0; white-space: nowrap; }
    #pn-main-content > .pn-tabs .pn-tab-btn i.ti { font-size: 15px; }
    #pn-main-content > .pn-tabs .pn-tab-btn:hover { color: var(--pn-text); }
    #pn-main-content > .pn-tabs .pn-tab-btn.pn-tab-active { color: var(--pn-text); background: transparent; box-shadow: inset 0 -2px var(--pn-text); }
    #pn-main-content > .pn-tabs .pn-tab-btn .pn-tab-badge { display: inline-flex; margin-left: 0; padding: 0 6px; }
    #pn-main-content > .pn-tabs .pn-tab-active .pn-tab-badge { color: var(--pn-muted); background: var(--pn-surface2); min-width: 0; }
    #pn-main-content > .pn-tabpanel { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; padding: 20px; }
    #pn-main-content > .pn-tabpanel:focus { outline: none; }
    #pn-main-content > .pn-tabpanel:focus-visible { outline: 2px solid var(--pn-border-strong); outline-offset: -2px; }
    #pn-tab-flow { background: var(--pn-app); }
    #organizador-ivr { container: pn-flow / inline-size; }
    .pn-flow-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 260px); gap: 24px; align-items: start; }
    .pn-flow-grid > div { min-width: 0; }
    #pn-tab-flow .pn-flow-head { min-height: 34px; margin-bottom: 14px; }
    .pn-flow-inactive { border-left: 1px solid var(--pn-border); padding-left: 24px; }
    .pn-flow-context { display: flex; align-items: flex-start; gap: 10px; padding: 0 0 16px; margin-bottom: 16px; color: var(--pn-muted); font-size: 12px; line-height: 1.5; border-bottom: 1px solid var(--pn-border); }
    .pn-flow-context i { font-size: 18px; flex: none; }
    .pn-flow-context span { max-width: 70ch; }
    .pn-service-picker { position: relative; min-width: 0; max-width: 360px; }
    .pn-service-trigger { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; color: var(--pn-text); background: var(--pn-surface); font: inherit; font-size: 13px; cursor: pointer; }
    .pn-service-trigger:hover, .pn-service-trigger[aria-expanded="true"] { background: var(--pn-hover); border-color: var(--pn-border-strong); }
    .pn-service-trigger:disabled { opacity: .55; cursor: default; }
    #pn-service-current { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .pn-service-trigger > .ti-chevron-down { font-size: 13px; color: var(--pn-muted); }
    .pn-service-pop { position: absolute; top: calc(100% + 8px); left: 0; width: 340px; max-width: calc(100vw - 40px); padding: 8px; border: 0; border-radius: 12px; background: var(--pn-surface); box-shadow: none; z-index: 40; }
    .pn-service-pop[hidden] { display: none; }
    .pn-service-search { display: flex; align-items: center; gap: 8px; margin: 2px 4px 8px; padding: 0 9px; height: 36px; border: 0; border-radius: 7px; color: var(--pn-faint); }
    .pn-service-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--pn-text); font: inherit; font-size: 13px; }
    #campaign-selector { display: flex; flex-direction: column; gap: 2px; max-height: min(340px, calc(100dvh - 230px)); overflow-y: auto; }
    .pn-service-option { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 48px; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--pn-text); cursor: pointer; font: inherit; text-align: left; }
    .pn-service-option:hover, .pn-service-option[aria-selected="true"] { background: var(--pn-active); }
    .pn-service-option > i { font-size: 17px; color: var(--pn-muted); }
    .pn-service-option > .ti-check { margin-left: auto; font-size: 15px; color: var(--pn-text); }
    .pn-service-option-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .pn-service-option-text strong { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pn-service-option-text small { font-size: 11.5px; color: var(--pn-muted); }
    .pn-service-empty { padding: 20px 12px; color: var(--pn-muted); font-size: 13px; text-align: center; }
    .pn-service-trigger:focus-visible, .pn-service-option:focus-visible, #pn-main-content .pn-tab-btn:focus-visible { outline: 2px solid var(--pn-text); outline-offset: 2px; }
    #pn-main-content .pn-tab-btn:focus-visible { outline-offset: -2px; }
    .pn-service-search:focus-within { border-color: var(--pn-text); }
    .pn-head { overflow: visible; position: relative; z-index: 4; }
    @media (min-width: 768px) {
        #akicontenidonormal:has(#pn-maintab-numbers.pn-tab-active) > #pn-pbx-overlay { flex: 0 1 auto; min-height: 0; overflow: hidden; }
    }
    @media (max-width: 1050px) {
        #pn-main-content > .pn-tabpanel { padding: 18px; }
    }
    @media (max-width: 767px) {
        #pn-pbx-overlay { padding: 0 16px 16px; }
        .pn-ov-head { padding: 14px; flex-wrap: wrap; }
        .pn-ov-actions { width: 100%; margin-left: 0; flex-wrap: wrap; }
        .pn-ov-actions .pn-btn { padding: 0 10px; font-size: 12px; }
        #pn-main-content > .pn-tabs { padding: 0 16px; gap: 8px; }
        #pn-main-content > .pn-tabs .pn-tab-btn { flex: 1 1 0; min-width: 0; height: auto; min-height: 42px; padding: 6px 2px; justify-content: center; text-align: center; white-space: normal; line-height: 1.25; font-size: 12px; }
        #pn-main-content > .pn-tabs .pn-tab-btn > span[data-idi] { white-space: normal; }
        #pn-main-content > .pn-tabs .pn-tab-btn .pn-tab-badge { display: none; }
        #pn-main-content > .pn-tabpanel { padding: 16px; overflow: visible; }
        .pn-service-picker { max-width: min(340px, calc(100vw - 36px)); }
        .pn-service-pop { width: min(340px, calc(100vw - 36px)); }
        .pn-flow-context { padding: 0 0 14px; }
        #pn-tab-flow .ivr-block-actions { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
        #pn-pbx-overlay *, .pn-service-picker * { animation: none !important; transition: none !important; }
    }
    .pn-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    @media (max-width: 1100px) { .pn-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 700px)  { .pn-settings-grid { grid-template-columns: 1fr; } }
    .pn-settings-card { background: var(--pn-surface); border: 0; border-radius: var(--pn-radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
    .pn-settings-card--danger { border-color: color-mix(in srgb, var(--pn-danger-tx) 35%, transparent); }
    .pn-set-head { display: flex; align-items: center; gap: 12px; }
    .pn-set-ic { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--pn-surface2); color: var(--pn-muted); border: 0; }
    .pn-set-ic i.ti { font-size: 19px; }
    .pn-set-ic--del   { background: var(--pn-danger-bg);  color: var(--pn-danger-tx); border-color: transparent; }
    .pn-set-t { font-weight: 600; font-size: 13.5px; color: var(--pn-text); }
    .pn-set-t--danger { color: var(--pn-danger-tx); }
    .pn-set-d { font-size: 12.5px; color: var(--pn-muted); }
    /* la tarjeta oculta del selector viejo de PBX (#campaign-selector, display:none) conserva sus clases */
    .pn-pbx-card { background: var(--pn-surface); border: 0; border-radius: var(--pn-radius-lg); padding: 18px; cursor: pointer; }
    .pn-pbx-card.pn-pbx-selected { border-color: var(--pn-text); }

    /* ── Call flow: bloques IVR (drag&drop jQuery UI: .ivrlist / .ivr-block / .ui-state-highlight) ── */
    .pn-flow-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
    .pn-flow-title { display: flex; align-items: center; gap: 10px; }
    .pn-h5 { margin: 0; font-size: 14px; font-weight: 600; color: var(--pn-text); }
    .ivr-block { cursor: move; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border-radius: var(--pn-radius-lg); border: 0;
        background: var(--pn-surface); color: var(--pn-text); box-shadow: none; transition: border-color .15s, box-shadow .15s; position: relative; margin-bottom: 0; font-size: 13px; }
    .ivr-block:hover { border-color: var(--pn-border-strong); }
    .ivr-block.active { background: var(--pn-surface); color: var(--pn-text); border-color: var(--pn-border-strong); }
    .ivr-block.inactive { background: var(--pn-surface); color: var(--pn-text); min-height: 50px; padding: 6px 12px; margin-bottom: 8px; }
    .ivr-drag-handle { color: var(--pn-faint); font-size: 1.05rem; cursor: grab; flex-shrink: 0; display: flex; align-items: center; }
    .ivr-block-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
    .ivr-block-icon i.ti { font-size: 17px; }
    .ivr-block-content { flex: 1; min-width: 0; }
    .ivr-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .ivr-name { font-weight: 600; font-size: 13px; color: var(--pn-text); }
    .ivr-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
    .ivr-type { font-size: 12px; color: var(--pn-faint); margin-top: 1px; }
    .ivr-block-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; flex-shrink: 0; }
    .ivr-block:hover .ivr-block-actions, .ivr-block:focus-within .ivr-block-actions { opacity: 1; }
    .ivr-connector { display: flex; padding-left: 26px; height: 24px; }
    .ivr-connector::before { content: ''; border-left: 2px dashed var(--pn-border-strong); }
    .ivrlist { min-height: 60px; border-radius: var(--pn-radius-lg); background: transparent; padding-bottom: 10px; transition: background .2s; }
    #inactiveList.ivrlist { border: 1.5px dashed var(--pn-border-strong); border-radius: var(--pn-radius-lg); min-height: 180px; padding: 10px; background: color-mix(in srgb, var(--pn-surface2) 40%, transparent); }
    .ivr-placeholder-text { color: var(--pn-faint) !important; text-align: center; transition: opacity .2s ease; }
    .pn-drop-hint { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 36px 20px; font-size: 13px; }
    .pn-drop-hint i.ti { font-size: 22px; opacity: .6; }
    .pn-drop-hint--sm { padding: 26px 10px; font-size: 12.5px; }
    /* Oculta el placeholder mientras el usuario arrastra un bloque encima */
    #activeList:has(.ui-state-highlight)  .ivr-placeholder-text,
    #inactiveList:has(.ui-state-highlight) .ivr-placeholder-text { display: none; pointer-events: none; }
    .ui-state-highlight { background: color-mix(in srgb, var(--pn-cta) 8%, transparent); border: 1.5px dashed color-mix(in srgb, var(--pn-cta) 55%, transparent); border-radius: var(--pn-radius-lg); margin-bottom: 8px; box-sizing: border-box; position: relative; list-style: none; animation: dui-legacy-modules-control-phonenumbers-ivrPlaceholderPulse 1.2s ease-in-out infinite; }
    .ui-state-highlight::after { content: ''; position: absolute; inset: 0; border-radius: 10px; pointer-events: none; }
    @keyframes dui-legacy-modules-control-phonenumbers-ivrPlaceholderPulse {
        0%, 100% { opacity: .7; }
        50%      { opacity: 1; }
    }
    #campaign-selector .dropdown-menu { max-width: 100% !important; width: 100% !important; min-width: 0 !important; overflow-x: hidden !important; box-sizing: border-box; }
    .form-group.col-md-1 { display: flex; }

    @media (max-width: 767px) {
        .pn-cards-grid { grid-template-columns: 1fr !important; }
        .pn-table-responsive { font-size: 0.85rem; }
        .pn-header-inner { flex-direction: column; align-items: flex-start !important; gap: 12px !important; }
        .pn-head { padding: 14px 16px 0; }
        .pn-maintabs { margin: 12px 16px 14px; max-width: calc(100% - 32px); }
        #pn-list-section { padding: 0 16px 16px; }
        #pn-buy-section { margin: 0 16px 16px; padding: 14px; }
        .pn-search { max-width: none; width: 100%; margin-left: 0; }
    }

    /* ── Alto 100% de la pagina disponible SOLO en la tab My Phone Numbers: la tabla scrollea DENTRO y la
          pagina nunca scrollea (adios doble scroll). La tab de compra NO entra aqui. Solo en desktop ── */
    @media (min-width: 768px){
        #akicontenidonormal:has(#pn-maintab-numbers.pn-tab-active){
            display:flex; flex-direction:column;
            height: var(--app-page-height, calc(100vh - 120px));
            overflow:hidden;
        }
        #akicontenidonormal:has(#pn-maintab-numbers.pn-tab-active) > *{ flex:none; }
        /* tab My Numbers: la seccion llena el alto restante */
        #akicontenidonormal:has(#pn-maintab-numbers.pn-tab-active) > #pn-list-section{
            flex:1 1 auto; min-height:0;
            display:flex; flex-direction:column; overflow:auto;
        }
        #pn-list-section > *{ flex:none; }
        /* min-height auto (NO 0): la caja nunca se aplasta por debajo de chips + card 220px;
           si el total no cabe, #pn-list-section scrollea en vez de solaparse el contenido */
        #pn-list-section > #pn-all-numbers{ flex:1 1 auto; display:flex; flex-direction:column; }
        #pn-all-numbers > *{ flex:none; }
        /* la card de la tabla: crece hasta su contenido, y si no cabe SE ENCOGE (la tabla scrollea dentro) */
        #pn-all-numbers > div:has(> .pn-table-responsive){ flex:0 1 auto; min-height:220px; display:flex; flex-direction:column; }
        #pn-list-section .pn-table-responsive{ flex:0 1 auto; min-height:0; max-height:none; }
    }

/* Communication workspace alignment and sequential call flow. */
.body-wrapper #akicontenidonormal:has(.pn-head) { width:100%!important; max-width:1400px!important; margin-inline:auto!important; padding-inline:16px!important; box-sizing:border-box; }
#akicontenidonormal .pn-head { padding-inline:0; }
#akicontenidonormal .pn-maintabs { margin-inline:0; max-width:100%; }
#akicontenidonormal #pn-pbx-overlay { padding-inline:0; }
#pn-tab-flow #activeList { width:100%; margin:0; padding:0 0 24px; min-height:220px; }
#pn-tab-flow .ivr-block { display:grid; grid-template-columns:14px 32px minmax(0,1fr) auto; gap:10px; padding:12px; box-shadow:none; }
#pn-tab-flow #activeList .ivr-block { grid-template-columns:28px 14px 32px minmax(0,1fr) auto; min-height:80px; border-radius:10px; padding:14px 12px; }
.pn-flow-step { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border:0; border-radius:50%; background:var(--pn-app); color:var(--pn-muted); font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
#pn-tab-flow .ivr-name-row { align-items:flex-start; gap:6px; }
#pn-tab-flow .ivr-name { overflow-wrap:anywhere; }
#pn-tab-flow #inactiveList.ivrlist { border:1px dashed var(--pn-border-strong); background:var(--pn-surface); min-height:132px; margin:0; padding:10px; }
#pn-tab-flow #inactiveList .ivr-block { grid-template-columns:14px 28px minmax(0,1fr); gap:8px; box-shadow:none; }
#pn-tab-flow #inactiveList .ivr-block:last-child { margin-bottom:0; }
#pn-tab-flow #inactiveList .ivr-block-icon { width:28px; height:28px; }
#pn-tab-flow #inactiveList .ivr-block-actions { grid-column:3; justify-self:end; }
#pn-tab-flow .ivr-block-actions { opacity:1; }
@container pn-flow (max-width:720px){
 .pn-flow-grid { grid-template-columns:minmax(0,1fr); gap:20px; }
 .pn-flow-inactive { border-left:0; border-top:1px solid var(--pn-border); padding:16px 0 0; }
 #pn-tab-flow #activeList { min-height:120px; padding-bottom:0; }
 #pn-tab-flow #inactiveList.ivrlist { min-height:100px; }
}
@container pn-flow (max-width:440px){
 #pn-tab-flow #activeList .ivr-block { grid-template-columns:24px 12px 28px minmax(0,1fr); gap:8px; padding:12px 10px; }
 #pn-tab-flow #activeList .pn-flow-step { width:24px; height:24px; }
 #pn-tab-flow #activeList .ivr-block-icon { width:28px; height:28px; }
 #pn-tab-flow #activeList .ivr-block-actions { grid-column:4; justify-self:end; }
 #pn-tab-flow .ivr-connector { padding-left:22px; }
}
@media(max-width:767px){
 .body-wrapper #akicontenidonormal:has(.pn-head) { padding-inline:8px!important; }
 #pn-tab-flow .pn-flow-head { flex-wrap:wrap; }
}

#pn-tab-flow .pn-flow-grid:has(.pn-editing) { grid-template-columns:minmax(0,1fr); }
#pn-tab-flow .pn-flow-grid:has(.pn-editing) .pn-flow-inactive { border-left:0; border-top:1px solid var(--pn-border); padding:16px 0 0; }
/* Inline editor: neutral controls, usable width and actions beside the title. */
#pn-tab-flow .ivr-block.pn-editing { cursor:default; border-color:var(--pn-border-strong); }
#pn-tab-flow .pn-editing > .ivr-block-actions { display:none; }
#pn-tab-flow #inactiveList .ivr-block.pn-editing { grid-template-columns:14px 28px minmax(0,1fr) auto; }
#pn-tab-flow .pn-editing .ivr-name-row { align-items:center; flex-wrap:nowrap; gap:10px; }
.pn-inline-controls { display:flex; align-items:center; justify-content:flex-end; gap:8px; grid-column:-2 / -1; grid-row:1; }
.pn-inline-controls .pn-btn { height:34px; padding:0 12px; font-size:12px; }
.pn-inline-controls .pn-btn--primary { background:var(--pn-text); border-color:var(--pn-text); color:var(--pn-surface); }
.pn-inline-controls .pn-btn--primary:hover { opacity:.85; }
.pn-inline-close { margin:0; }
.pn-inline-editor { grid-column:1 / -1; min-width:0; border-top:1px solid var(--pn-border); padding:20px 4px 4px; cursor:default; container:pn-editor / inline-size; }
.pn-inline-editor .modal__body-inner { padding:0!important; height:auto; max-height:none; overflow:visible!important; }
.pn-inline-editor .pbx-node-form { color:var(--pn-text); }
.pn-inline-editor .pbx-node-form .section-label { margin:0 0 9px; color:var(--pn-muted); font-size:10px; font-weight:600; letter-spacing:.07em; opacity:1; }
.pn-inline-editor .pbx-node-form .node-type-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-bottom:20px; }
.pn-inline-editor .pbx-node-form .node-type-card { min-width:0; min-height:42px; flex-direction:row; justify-content:flex-start; gap:8px; padding:9px 12px; border:0; border-radius:8px; background:var(--pn-surface); color:var(--pn-muted); font:inherit; text-align:left; transition:background .12s,border-color .12s; }
.pn-inline-editor .pbx-node-form .node-type-card:hover { background:var(--pn-hover); border-color:var(--pn-border-strong); }
.pn-inline-editor .pbx-node-form .node-type-card i { flex:none; font-size:17px; margin:0; color:inherit; opacity:1; }
.pn-inline-editor .pbx-node-form .node-type-card span { font-size:12px; line-height:1.35; font-weight:500; opacity:1; }
.pn-inline-editor .pbx-node-form .node-type-card.active { background:var(--pn-active); color:var(--pn-text); border-color:var(--pn-text); }
.pn-inline-editor .pbx-node-form .node-type-card.active i { color:var(--pn-text); }
.pn-inline-editor .pbx-node-form .node-type-card:focus-visible { outline:2px solid var(--pn-text); outline-offset:2px; }
.pn-inline-editor .pbx-node-form .divider { margin:0 0 18px; border-color:var(--pn-border); }
.pn-inline-editor .pbx-node-form .type-section-header { margin:0 0 14px; padding:0; border:0; font-size:13px; font-weight:600; letter-spacing:0; opacity:1; }
.pn-inline-editor .pbx-node-form .type-section-header i { color:var(--pn-muted); }
.pn-inline-editor .pbx-node-form label { font-size:12px; color:var(--pn-muted); }
.pn-inline-editor #tiponodotts { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:0 22px; max-width:none; }
.pn-inline-editor #tiponodotts > .type-section-header { grid-column:1 / -1; }
.pn-inline-editor #tiponodotts > .form-row { min-width:0; margin:0; }
.pn-inline-editor #tiponodotts .form-group { min-width:0; width:100%; max-width:none; padding:0; margin-bottom:0; }
.pn-inline-editor #messagetts { width:100%; min-height:198px; padding:12px 14px; font-size:14px; line-height:1.6; resize:vertical; border-radius:9px; }
.pn-inline-editor .pbx-voice-picker { max-width:none; }
.pn-inline-editor .pbx-voice-trigger { min-height:48px; }
.pn-inline-editor .pbx-voice-player { margin-top:10px; padding:12px; }
.pn-inline-title { display:block; flex:1; width:100%; min-width:0; padding:5px 0!important; border:0!important; border-bottom:1px solid transparent!important; border-radius:0!important; background:transparent!important; color:var(--pn-text); box-shadow:none!important; font:inherit; font-size:15px; font-weight:600; line-height:1.5; }
.pn-inline-title:hover,.pn-inline-title:focus { border-bottom-color:var(--pn-border-strong)!important; outline:0; }
.pn-inline-title:focus-visible { outline:2px solid var(--pn-text); outline-offset:3px; }
@container pn-editor (min-width:800px) { .pn-inline-editor .pbx-node-form .node-type-grid { grid-template-columns:repeat(7,minmax(0,1fr)); } }
@container pn-editor (max-width:580px) {
 .pn-inline-editor #tiponodotts { grid-template-columns:minmax(0,1fr); gap:14px; }
 .pn-inline-editor #tiponodotts > .type-section-header { margin-bottom:0; }
 .pn-inline-editor #messagetts { min-height:140px; }
 .pn-inline-editor .pbx-node-form .node-type-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container pn-flow (max-width:620px) {
 #pn-tab-flow .pn-editing .ivr-name-row { flex-wrap:wrap; gap:4px; }
 #pn-tab-flow .pn-editing > .pn-inline-controls { grid-column:1 / -1; grid-row:auto; justify-content:flex-end; }
 #pn-tab-flow .pn-editing .pn-inline-title { flex-basis:100%; }
}

/* Existing numbers can be reassigned without leaving their service detail. */
.pn-move-number { gap:5px; white-space:nowrap; }
.pn-move-dialog .pn-move-summary { margin:0 0 12px; color:var(--dt-text,#111110); font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.pn-move-dialog .pn-move-description { margin:0 0 16px; color:var(--dt-muted,#5f5f5c); font-size:12px; line-height:1.55; }
.pn-move-dialog .pn-move-search { display:flex; align-items:center; gap:8px; height:38px; padding:0 11px; border:0; border-radius:8px; color:var(--dt-muted,#5f5f5c); }
.pn-move-dialog .pn-move-search input { width:100%; min-width:0; height:100%; color:var(--dt-text,#111110); font:inherit; font-size:13px; }
.pn-move-dialog .pn-move-options { max-height:260px; overflow:auto; display:flex; flex-direction:column; gap:3px; margin-top:9px; }
.pn-move-dialog .pn-move-option { display:flex; align-items:center; gap:10px; width:100%; min-height:52px; padding:9px 11px; border:0; border-radius:8px; background:transparent; color:var(--dt-text,#111110); text-align:left; cursor:pointer; font:inherit; }
.pn-move-dialog .pn-move-option:hover { background:var(--dt-hover,#f4f4f3); }
.pn-move-dialog .pn-move-option[aria-pressed="true"] { border-color:var(--dt-border-strong,rgba(15,15,15,.2)); background:var(--dt-active,#efefee); }
.pn-move-dialog .pn-move-option:focus-visible { outline:2px solid var(--dt-focus,currentColor); outline-offset:-2px; }
.pn-move-dialog .pn-move-option > span { display:flex; min-width:0; flex:1; flex-direction:column; gap:3px; }
.pn-move-dialog .pn-move-option strong { font-size:13px; font-weight:500; overflow-wrap:anywhere; }
.pn-move-dialog .pn-move-option small { color:var(--dt-muted,#5f5f5c); font-size:11px; overflow-wrap:anywhere; }
.pn-move-dialog .pn-move-option[aria-pressed="false"] > .ti-check { visibility:hidden; }
.pn-move-dialog .pn-move-empty { padding:18px 8px; margin:0; font-size:13px; text-align:center; color:var(--dt-muted,#5f5f5c); }
.pn-move-dialog .pn-move-options [hidden] { display:none; }
.pn-move-dialog .bootbox-accept { max-width:100%; white-space:normal; overflow-wrap:anywhere; }

/* PBX workspace: visual hierarchy and a connected, editable call journey. */
#akicontenidonormal:has(.pn-head) {
    --pn-accent: var(--dt-cta);
    --pn-accent-soft: #edf3ff;
    --pn-canvas: var(--dt-app);
    --pn-dot: #dce3ef;
}
:scope[data-bs-theme="dark"] #akicontenidonormal:has(.pn-head) {
    --pn-accent: var(--dt-cta);
    --pn-accent-soft: #1b2942;
    --pn-canvas: var(--dt-app);
    --pn-dot: #2b3544;
}
.body-wrapper #akicontenidonormal:has(.pn-head) { max-width:1640px!important; padding-inline:28px!important; }
#akicontenidonormal .pn-head { padding-top:24px; padding-bottom:8px; }
#akicontenidonormal .pn-head-text { width:100%; gap:12px; }
#akicontenidonormal .pn-head-row { gap:12px; }
#akicontenidonormal .pn-head-row > [data-section-nav] { margin-right:auto; }
#akicontenidonormal .pn-head .sb-section-trigger { padding:0; gap:13px; }
#akicontenidonormal .pn-head .sb-section-trigger-icon { width:46px; height:46px; border-radius:14px; background:var(--pn-accent-soft); color:var(--pn-accent); font-size:23px; }
#akicontenidonormal .pn-head .sb-section-trigger-text small { font-size:11px; letter-spacing:.06em; margin-bottom:5px; }
#akicontenidonormal .pn-head .sb-section-trigger-text strong { font-size:22px; line-height:1.25; letter-spacing:-.025em; font-weight:400; }
#akicontenidonormal .pn-head .pn-sub { font-size:13px; line-height:1.6; }
#akicontenidonormal .pn-service-trigger { min-height:40px; padding:9px 13px; border-radius:10px; box-shadow:none; }
#akicontenidonormal .pn-service-trigger > .ti-building-broadcast-tower { color:var(--pn-accent); font-size:17px; }
#akicontenidonormal .pn-count { height:28px; padding:0 10px; font-size:11px; font-variant-numeric:tabular-nums; }
#akicontenidonormal .pn-maintabs { align-self:flex-start; gap:5px; padding:4px; margin-top:14px; margin-bottom:22px; background:var(--pn-surface2); border:0; border-radius:12px; }
#akicontenidonormal .pn-maintabs .pn-tab-btn { min-height:36px; padding:0 15px; border-radius:8px; }
#akicontenidonormal .pn-maintabs .pn-tab-active { color:var(--pn-accent); background:var(--pn-surface); }
#akicontenidonormal .pn-maintabs .pn-tab-active .pn-tab-badge { color:var(--pn-accent); background:var(--pn-accent-soft); }
#pn-pbx-overlay .pn-ov-wrap { border-radius:18px; }
#pn-pbx-overlay .pn-ov-head { padding:24px; gap:16px; }
#pn-pbx-overlay .pn-ov-avatar { width:48px; height:48px; border:0; border-radius:14px; background:var(--pn-accent-soft); color:var(--pn-accent); font-size:24px; }
#pn-pbx-overlay .pn-ov-id { gap:14px; }
#pn-pbx-overlay .pn-ov-title { font-size:21px; font-weight:650; letter-spacing:-.025em; }
#pn-pbx-overlay .pn-ov-sub { margin-top:5px; font-size:12px; }
#pn-pbx-overlay .pn-ov-actions .pn-btn { height:34px; border-color:var(--pn-border); background:var(--pn-surface); }
#pn-main-content > .pn-tabpanel { padding:24px; }
#pn-main-content > #pn-tab-flow { background-color:var(--pn-canvas); background-image:radial-gradient(var(--pn-dot) .8px,transparent .8px); background-size:18px 18px; }
#pn-tab-flow .pn-flow-context { background:var(--pn-surface); border:0; border-radius:10px; padding:12px 14px; margin-bottom:24px; font-size:12px; align-items:center; }
#pn-tab-flow .pn-flow-context i { color:var(--pn-accent); }
#pn-tab-flow .pn-flow-grid { grid-template-columns:minmax(0,1fr) 220px; gap:26px; }
#pn-tab-flow .pn-flow-head { margin-bottom:20px; min-height:36px; }
#pn-tab-flow .pn-h5 { font-size:13px; letter-spacing:-.01em; }
#pn-tab-flow .pn-flow-title .pn-status-badge { height:22px; padding:0 9px; font-size:10px; }
#pn-tab-flow .pn-flow-title .pn-status-badge::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
#pn-tab-flow .pn-flow-head > .pn-btn { height:34px; padding:0 13px; background:var(--pn-cta); color:var(--pn-cta-fg); border-color:var(--pn-cta); }
#pn-tab-flow .pn-flow-head > .pn-btn:hover { background:var(--pn-cta-hover); border-color:var(--pn-cta-hover); color:var(--pn-cta-fg); }
.pn-flow-entry { display:flex; align-items:center; gap:12px; padding:0 16px; min-height:48px; color:var(--pn-text); }
.pn-flow-entry > i { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--pn-ok-bg); color:var(--pn-ok-tx); border:0; font-size:18px; }
.pn-flow-entry strong { font-size:12px; font-weight:600; }
.pn-flow-entry-line { height:28px; margin-left:33px; border-left:2px solid color-mix(in srgb,var(--pn-accent) 35%,var(--pn-border)); }
#pn-tab-flow #activeList { min-height:210px; padding-bottom:28px; }
#pn-tab-flow #activeList .ivr-block { min-height:104px; grid-template-columns:28px 12px 42px minmax(0,1fr) auto; gap:12px; padding:18px 16px; border:1px solid color-mix(in srgb,var(--pn-accent) 22%,var(--pn-border)); border-radius:14px; }
#pn-tab-flow #activeList .ivr-block:hover { border-color:color-mix(in srgb,var(--pn-accent) 65%,var(--pn-border)); }
#pn-tab-flow .pn-flow-step { width:28px; height:28px; border:0; background:var(--pn-accent-soft); color:var(--pn-accent); font-size:11px; font-weight:700; }
#pn-tab-flow #activeList .ivr-block-icon { width:42px; height:42px; border-radius:12px; }
#pn-tab-flow #activeList .ivr-block-icon i { font-size:22px; }
#pn-tab-flow .ivr-name-row { align-items:center; gap:8px; }
#pn-tab-flow .ivr-name { font-size:14px; line-height:1.5; }
#pn-tab-flow .ivr-type { margin-top:6px; font-size:11px; }
#pn-tab-flow .ivr-tag { font-size:10px; border-radius:5px; height:19px; padding:0 6px; }
#pn-tab-flow .ivr-block-actions { gap:6px; }
#pn-tab-flow .ivr-block-actions .pn-action-btn { width:30px; height:30px; padding:0; border-radius:8px; background:var(--pn-surface); }
#pn-tab-flow .ivr-drag-handle { opacity:.65; }
#pn-tab-flow .ivr-connector { height:30px; padding-left:29px; }
#pn-tab-flow .ivr-connector::before { border-left:2px solid color-mix(in srgb,var(--pn-accent) 35%,var(--pn-border)); }
#pn-tab-flow .pn-flow-inactive { border:1px solid var(--pn-border); border-radius:14px; background:var(--pn-surface); padding:16px; }
#pn-tab-flow .pn-flow-inactive .pn-flow-head { min-height:24px; margin-bottom:16px; }
#pn-tab-flow #inactiveList.ivrlist { background:var(--pn-canvas); border-color:var(--pn-border-strong); min-height:168px; padding:8px; border-radius:10px; }
#pn-tab-flow .pn-drop-hint--sm { min-height:148px; padding:20px 10px; gap:12px; line-height:1.5; }
#pn-tab-flow .pn-drop-hint--sm i { width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:var(--pn-surface); border:0; border-radius:11px; font-size:19px; opacity:1; }
#pn-tab-flow #inactiveList .ivr-block { padding:10px 8px; border-radius:8px; }
#pn-tab-flow #inactiveList .ivr-name { font-size:12px; }
#pn-tab-flow .pn-flow-grid:has(.pn-editing) { grid-template-columns:minmax(0,1fr); }
#pn-tab-flow .pn-flow-grid:has(.pn-editing) .pn-flow-inactive { padding:16px; }
#pn-tab-flow #activeList .ivr-block.pn-editing { border-color:var(--pn-accent); }
#pn-tab-flow #activeList .pn-editing > .ivr-block-actions { display:none; }
#akicontenidonormal:has(#pn-main-content .pn-editing) { height:auto!important; min-height:var(--app-page-height,calc(100vh - 120px)); overflow:visible!important; }
#akicontenidonormal:has(.pn-editing) > #pn-pbx-overlay { flex:none!important; overflow:visible!important; }
#pn-pbx-overlay:has(.pn-editing) .pn-ov-wrap { max-height:none; }
#pn-pbx-overlay:has(.pn-editing) #pn-main-content { flex:none; grid-template-rows:auto; }
#pn-pbx-overlay:has(.pn-editing) #pn-main-content > .pn-tabpanel { overflow:visible; }
#pn-pbx-overlay .pn-btn:focus-visible,#pn-pbx-overlay .pn-action-btn:focus-visible { outline:2px solid var(--pn-accent); outline-offset:3px; }
@container pn-flow (max-width:760px) {
    #pn-tab-flow .pn-flow-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
    #pn-tab-flow .pn-flow-inactive { padding:16px; }
    #pn-tab-flow #inactiveList.ivrlist { min-height:90px; }
    #pn-tab-flow .pn-drop-hint--sm { min-height:72px; flex-direction:row; padding:12px; }
    #pn-tab-flow #activeList { min-height:140px; padding-bottom:0; }
}
@container pn-flow (max-width:480px) {
    #pn-tab-flow #activeList .ivr-block { grid-template-columns:24px 10px 32px minmax(0,1fr); padding:14px 10px; gap:8px; }
    #pn-tab-flow #activeList .ivr-block-icon { width:32px; height:32px; border-radius:9px; }
    #pn-tab-flow #activeList .ivr-block-icon i { font-size:18px; }
    #pn-tab-flow #activeList .ivr-block-actions { grid-column:4; justify-self:end; }
    #pn-tab-flow .ivr-name { font-size:13px; }
    #pn-tab-flow .ivr-connector { padding-left:22px; }
}
@media (max-width:1050px) {
    .body-wrapper #akicontenidonormal:has(.pn-head) { padding-inline:16px!important; }
    #pn-main-content > .pn-tabpanel { padding:18px; }
    #akicontenidonormal .pn-head .sb-section-trigger-text strong { font-size:19px; }
}
@media (max-width:767px) {
    .body-wrapper #akicontenidonormal:has(.pn-head) { padding-inline:10px!important; }
    #akicontenidonormal .pn-head { padding-top:16px; }
    #akicontenidonormal .pn-head-row > [data-section-nav] { flex-basis:100%; margin-bottom:6px; }
    #akicontenidonormal .pn-head .sb-section-trigger-text strong { font-size:18px; white-space:normal; }
    #akicontenidonormal .pn-maintabs { margin-bottom:16px; }
    #akicontenidonormal .pn-maintabs .pn-tab-btn { padding:0 10px; font-size:12px; }
    #pn-pbx-overlay .pn-ov-head { padding:16px; }
    #pn-pbx-overlay .pn-ov-title { font-size:19px; }
    #pn-main-content > .pn-tabpanel { padding:16px; }
}


/* Inline PBX editor polish. Append after the existing workspace/editor CSS.
   Layout only: native fields, values, names and conditional visibility are retained. */
.pn-inline-editor {
    padding: 22px 2px 4px;
}
.pn-inline-editor .pbx-node-form {
    --pn-field-height: 42px;
    font-size: 13px;
    line-height: 1.45;
}
.pn-inline-editor .pbx-node-form .form-row,
.pn-inline-editor .pbx-node-form .form-row > .row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: 14px 16px;
    margin: 0 0 18px;
    min-width: 0;
}
.pn-inline-editor .pbx-node-form .form-row > *,
.pn-inline-editor .pbx-node-form .form-row > .row > * {
    grid-column: 1 / -1;
    min-width: 0;
}
.pn-inline-editor .pbx-node-form .form-row > .row { margin-bottom: 0; }
.pn-inline-editor .pbx-node-form .form-row > [class*="col-"],
.pn-inline-editor .pbx-node-form .form-row > .row > [class*="col-"],
.pn-inline-editor .pbx-node-form .form-group {
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
    margin-bottom: 0;
}
.pn-inline-editor .pbx-node-form .form-row > .col-md-1 { grid-column: span 1; }
.pn-inline-editor .pbx-node-form .form-row > .col-md-2 { grid-column: span 2; }
.pn-inline-editor .pbx-node-form .form-row > .col-md-3 { grid-column: span 3; }
.pn-inline-editor .pbx-node-form .form-row > .col-md-4 { grid-column: span 4; }
.pn-inline-editor .pbx-node-form .form-row > .col-md-6,
.pn-inline-editor .pbx-node-form .form-row > .row > .col-md-6 { grid-column: span 6; }
.pn-inline-editor .pbx-node-form .form-row > .col-md-8 { grid-column: span 8; }
.pn-inline-editor .pbx-node-form .form-row > .col-md-9 { grid-column: span 9; }
.pn-inline-editor .pbx-node-form .form-row > .form-group:only-child { grid-column: 1 / -1; }
.pn-inline-editor .pbx-node-form label:not(.form-check-label) {
    display: block;
    min-height: 18px;
    margin: 0 0 7px;
    color: var(--pn-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}
.pn-inline-editor .pbx-node-form label:has(> .btn) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.pn-inline-editor .pbx-node-form :is(.form-control, .form-select):not([type="checkbox"]):not([type="radio"]) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: var(--pn-field-height);
    padding: 10px 12px;
    border: 1px solid var(--pn-border-strong);
    border-radius: 9px;
    background-color: var(--pn-surface);
    color: var(--pn-text);
    font: inherit;
    line-height: 1.5;
    transition: border-color 150ms, box-shadow 150ms, background-color 150ms;
}
.pn-inline-editor .pbx-node-form :is(.form-control, .form-select):hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--pn-accent) 45%, var(--pn-border-strong));
}
.pn-inline-editor .pbx-node-form :is(.form-control, .form-select):focus-visible {
    outline: 2px solid var(--pn-accent);
    outline-offset: 2px;
    border-color: var(--pn-accent);
    box-shadow: 0 0 0 4px var(--pn-accent-soft);
}
.pn-inline-editor .pbx-node-form :is(.form-control, .form-select):disabled {
    color: var(--pn-muted);
    background-color: var(--pn-surface2);
    cursor: not-allowed;
}
.pn-inline-editor .pbx-node-form input::placeholder { color: var(--pn-faint); opacity: 1; }
.pn-inline-editor .pbx-node-form .form-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 26px;
    padding: 0;
    margin: 0;
}
.pn-inline-editor .pbx-node-form .form-check-input {
    position: static;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--pn-accent);
    cursor: pointer;
}
.pn-inline-editor .pbx-node-form .form-check-input:checked {
    background-color: var(--pn-accent) !important;
    border-color: var(--pn-accent) !important;
}
.pn-inline-editor .pbx-node-form .form-check-label {
    margin: 0;
    color: var(--pn-text);
    font-size: 12px;
    cursor: pointer;
}
.pn-inline-editor .pbx-node-form .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: var(--pn-surface);
    color: var(--pn-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
}
.pn-inline-editor .pbx-node-form .btn:hover {
    background: var(--pn-hover);
    border-color: var(--pn-accent);
}
.pn-inline-editor .pbx-node-form :is(.btn, .node-type-card, .form-check-input):focus-visible {
    outline: 2px solid var(--pn-accent);
    outline-offset: 3px;
}
.pn-inline-editor .pbx-node-form .node-type-card {
    min-height: 48px;
    padding: 10px;
    border-radius: 10px;
}
.pn-inline-editor .pbx-node-form .node-type-card:hover {
    background: var(--pn-hover);
    border-color: var(--pn-border-strong);
}
.pn-inline-editor .pbx-node-form .node-type-card.active {
    border-color: var(--pn-accent);
    background: var(--pn-accent-soft);
    color: var(--pn-accent);
    box-shadow: inset 0 0 0 1px var(--pn-accent);
}
.pn-inline-editor .pbx-node-form .node-type-card.active i { color: var(--pn-accent); }
.pn-inline-editor .pbx-node-form .type-section-header {
    margin: 0 0 18px;
    color: var(--pn-text);
    font-size: 14px;
}
.pn-inline-editor .pbx-node-form .type-section-header i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--pn-accent-soft);
    color: var(--pn-accent);
}

/* Forwarding: audio settings above clearly separated destination cards. */
.pn-inline-editor #tiponododesvi > .form-row:has(#musica1desvi),
.pn-inline-editor #tiponododesvi > .form-row:has(#mdescolgado1) {
    display: inline-grid;
    width: calc(50% - 9px);
    vertical-align: top;
}
.pn-inline-editor #tiponododesvi > .form-row:has(#musica1desvi) { margin-right: 18px; }
.pn-inline-editor #tiponododesvi > .form-row:has(#musica1desvi) label,
.pn-inline-editor #tiponododesvi > .form-row:has(#mdescolgado1) label {
    display: flex;
    align-items: center;
    min-height: 32px;
}
.pn-inline-editor #tiponododesvi > .form-row:has(#musica1desvi) > .form-group:not(.u-hidden) {
    grid-column: 1 / -1;
}
.pn-inline-editor [id="2myDiv"] > .border {
    padding: 18px !important;
    margin: 0 0 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--pn-surface);
}
.pn-inline-editor [id="2myDiv"] > .border > .form-row:first-child {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--pn-border);
}
.pn-inline-editor [id="2myDiv"] > .border > .form-row:first-child > .col-12 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.pn-inline-editor [id="2myDiv"] > .border > .form-row:first-child label {
    margin: 0;
    color: var(--pn-text);
    font-size: 13px;
    font-weight: 600;
}
.pn-inline-editor [id="2myDiv"] > .border > .form-row.mt-2 { align-items: end; margin-top: 0 !important; }

/* Keep each native checkbox visible; its label remains a generous click target. */
.pn-inline-editor [id^="horario1_"] {
    padding: 16px 0 0 !important;
    margin: 0 !important;
    border-top: 1px solid var(--pn-border);
}
.pn-inline-editor [id^="horario1_"] > .form-row:first-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.pn-inline-editor [id^="horario1_"] > .form-row:first-child > .form-group { flex: 0 0 auto; }
.pn-inline-editor [id^="horario1_"] > .form-row:first-child .form-check {
    min-height: 36px;
    gap: 7px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: var(--pn-surface);
    transition: background-color 150ms, border-color 150ms;
}
.pn-inline-editor [id^="horario1_"] > .form-row:first-child .form-check:has(input:checked) {
    background: var(--pn-accent-soft);
    border-color: color-mix(in srgb, var(--pn-accent) 35%, var(--pn-border));
}
.pn-inline-editor [id^="horario1_"] > .form-row:first-child .form-check-label {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    font-weight: 500;
}
.pn-inline-editor [id^="horario1_"] > .form-row:first-child .form-check-label:empty { display: none; }
.pn-inline-editor [id^="horario1_"] > .form-row:first-child .btn {
    min-height: 28px;
    padding: 4px 0;
    border: 0;
    background: transparent;
}
.pn-inline-editor [id^="horario1_"] > .form-row.mt-3 {
    padding: 14px;
    margin: 0 !important;
    border-radius: 10px;
    background: color-mix(in srgb, var(--pn-surface2) 60%, var(--pn-surface));
}
.pn-inline-editor [id^="horario1_"] .form-group > .d-flex {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pn-inline-editor [id^="horario1_"] .form-group > .d-flex > .form-control {
    width: 56px !important;
    margin: 0 !important;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.pn-inline-editor [id^="horario1_"] .form-group > .d-flex > label { margin: 0 !important; }

/* DTMF key routing: compact rows with the existing toggle and destination. */
.pn-inline-editor #tiponododtmf .form-row > .row > .col-md-6 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    min-height: 60px;
    border: 0;
    border-radius: 9px;
    background: var(--pn-surface);
}
.pn-inline-editor #tiponododtmf .form-row > .row > .col-md-6 > .form-check { flex: 0 0 36px; }
.pn-inline-editor #tiponododtmf .form-row > .row > .col-md-6 > :is(select, .pbx-select-picker, .dui-select) {
    flex: 1 1 0;
    min-width: 0;
    margin-left: 0 !important;
}

/* The root supplies the one-line display input and retains the hidden canonical value. */
.pn-inline-editor #tiponodotts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.pn-inline-editor #tiponodotts > .type-section-header { margin-bottom: 0; }
.pn-inline-editor #tiponodotts > .form-row { margin: 0; }
.pn-inline-editor #messagetts-display {
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 10px 12px;
    border: 0;
    border-radius: 9px;
    background: var(--pn-surface);
    color: var(--pn-text);
    font: inherit;
    line-height: 1.5;
}
.pn-inline-editor #messagetts-display:focus-visible {
    outline: 2px solid var(--pn-accent);
    outline-offset: 2px;
}

@container pn-editor (max-width: 620px) {
    .pn-inline-editor .pbx-node-form .form-row > :is(.col-md-3, .col-md-4, .col-md-6, .col-md-8, .col-md-9),
    .pn-inline-editor .pbx-node-form .form-row > .row > .col-md-6 { grid-column: 1 / -1; }
    .pn-inline-editor #tiponododesvi > .form-row:has(#musica1desvi),
    .pn-inline-editor #tiponododesvi > .form-row:has(#mdescolgado1) { width: 100%; margin-right: 0; }
    .pn-inline-editor [id^="horario1_"] > .form-row.mt-3 > .col-md-6 { grid-column: span 6; }
    .pn-inline-editor [id="2myDiv"] > .border { padding: 14px !important; }
}
@container pn-editor (max-width: 340px) {
    .pn-inline-editor [id^="horario1_"] > .form-row.mt-3 > .col-md-6 { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .pn-inline-editor .pbx-node-form :is(.form-control, .form-select, .form-check, .node-type-card) { transition: none; }
}

.pn-bulk-agents{margin:16px 0;padding:16px;border:0;border-radius:12px;background:var(--pn-surface2,transparent)}
.pn-bulk-agents-heading{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin-bottom:12px}
.pn-bulk-agents-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pn-bulk-agents-label{font-size:12px;margin:0}
.pn-bulk-agents-controls .form-select{flex:1;min-width:180px;width:auto;max-width:420px}
.pn-bulk-agents-add{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;white-space:nowrap}
.pn-bulk-agents-hint,.pn-bulk-agents-status{font-size:12px;line-height:1.5;margin:10px 0 0;color:var(--pn-muted,#666)}
.pn-bulk-agents-status:empty{display:none}
@media(max-width:600px){.pn-bulk-agents-label{width:100%}.pn-bulk-agents-controls .form-select{max-width:none}.pn-bulk-agents-add{width:100%}}


/* PBX clean interface: restrained surfaces and soft separators. */
/* 06-11: la paleta "limpia" sale de los tokens --dt-* (una sola fuente; los literales de antes quedan como respaldo) */
:is(#akicontenidonormal:has(.pn-head),#pn-pbx-overlay,#akiiframmodalpbx) {
 --pn-app:var(--dt-app,#fff); --pn-surface:var(--dt-surface,#fff); --pn-surface2:var(--dt-surface-2,#f5f5f5); --pn-topbar:var(--dt-app,#fafafa);
 --pn-text:var(--dt-text,#202020); --pn-muted:var(--dt-muted,#717171); --pn-faint:var(--dt-faint,#808080);
 --pn-border:var(--dt-border,#ebebeb); --pn-border-strong:var(--dt-border-strong,#dedede); --pn-hover:var(--dt-hover,#f7f7f7); --pn-active:var(--dt-active,#f0f0f0);
 --pn-accent:var(--dt-muted,#626262); --pn-accent-soft:var(--dt-surface-2,#f1f1f1); --pn-canvas:var(--dt-surface-2,#fafafa); --pn-dot:transparent;
 --pn-cta:var(--dt-cta,#242424); --pn-cta-hover:var(--dt-cta-hover,#3c3c3c); --pn-cta-fg:var(--dt-cta-fg,#fff); --pn-link:var(--dt-text,#454545);
 --pn-shadow-xs:none; --pn-ring:var(--dt-focus-ring,rgb(0 0 0 / 7%));
 --pn-focus:color-mix(in srgb,var(--dt-text,#202020) 45%,transparent);
}
:scope[data-bs-theme="dark"] :is(#akicontenidonormal:has(.pn-head),#pn-pbx-overlay,#akiiframmodalpbx) {
 --pn-app:var(--dt-app,#161616); --pn-surface:var(--dt-surface,#1d1d1d); --pn-surface2:var(--dt-surface-2,#272727); --pn-topbar:var(--dt-app,#191919);
 --pn-text:var(--dt-text,#eee); --pn-muted:var(--dt-muted,#aaa); --pn-faint:var(--dt-faint,#999); --pn-border:var(--dt-border,#303030); --pn-border-strong:var(--dt-border-strong,#414141);
 --pn-hover:var(--dt-hover,#282828); --pn-active:var(--dt-active,#303030); --pn-accent:var(--dt-muted,#b8b8b8); --pn-accent-soft:var(--dt-surface-2,#2b2b2b);
 --pn-canvas:var(--dt-surface-2,#191919); --pn-cta:var(--dt-cta,#e7e7e7); --pn-cta-hover:var(--dt-cta-hover,#fff); --pn-cta-fg:var(--dt-cta-fg,#202020); --pn-link:var(--dt-text,#d6d6d6); --pn-focus:color-mix(in srgb,var(--dt-text,#eee) 45%,transparent);
}
#akicontenidonormal .pn-head { padding-top:20px; }
#akicontenidonormal .pn-head .sb-section-trigger-text strong { font-size:21px; font-weight:400; letter-spacing:-.025em; }
#akicontenidonormal .pn-head .sb-section-trigger-text small { letter-spacing:0; }
#akicontenidonormal .pn-head .sb-section-trigger-icon,
#pn-pbx-overlay .pn-ov-avatar { width:38px; height:38px; background:var(--pn-surface); color:var(--pn-muted); border:1px solid var(--pn-border); border-radius:10px; font-size:20px; }
#akicontenidonormal .pn-service-trigger { box-shadow:none; border-color:var(--pn-border); }
#akicontenidonormal .pn-maintabs { background:var(--pn-surface2); border-color:transparent; border-radius:10px; }
#akicontenidonormal .pn-maintabs .pn-tab-active { color:var(--pn-text); }
#pn-pbx-overlay .pn-ov-wrap { border-color:var(--pn-border); border-radius:14px; box-shadow:none; }
#pn-pbx-overlay .pn-ov-head { padding:20px; }
#pn-pbx-overlay .pn-ov-title { font-size:19px; font-weight:600; }
#pn-main-content > #pn-tab-flow { background:var(--pn-canvas); background-image:none; }
#pn-tab-flow .pn-flow-context { border:0; border-bottom:1px solid var(--pn-border); border-radius:0; background:transparent; padding:0 0 16px; margin-bottom:20px; }
#pn-tab-flow .pn-flow-head > .pn-btn { background:var(--pn-cta); color:var(--pn-cta-fg); border-color:transparent; box-shadow:none; }
#pn-tab-flow .pn-flow-head > .pn-btn:hover { background:var(--pn-cta-hover); border-color:transparent; }
#pn-tab-flow #activeList .ivr-block,
#pn-tab-flow #activeList .ivr-block:hover,
#pn-tab-flow #activeList .ivr-block.pn-editing { border-color:var(--pn-border)!important; border-radius:12px; }
#pn-tab-flow #activeList .ivr-block:not(.pn-editing) { min-height:88px; }
#pn-tab-flow .ivr-block-icon { background:var(--pn-surface2)!important; border:0; }
#pn-tab-flow .ivr-block-icon i { color:var(--pn-muted)!important; }
#pn-tab-flow .ivr-tag { color:var(--pn-muted)!important; background:var(--pn-surface2)!important; }
#pn-tab-flow .pn-flow-step { background:var(--pn-surface2); color:var(--pn-muted); font-weight:500; }
#pn-tab-flow .pn-flow-entry-line,#pn-tab-flow .ivr-connector::before { border-color:var(--pn-border-strong); }
#pn-tab-flow .pn-flow-inactive { border-color:var(--pn-border); box-shadow:none; border-radius:12px; }
#pn-tab-flow #inactiveList.ivrlist { border-color:var(--pn-border-strong); background:var(--pn-canvas); }
#akiiframmodalpbx .pbx-node-form .node-type-card { border:0!important; background:var(--pn-surface); color:var(--pn-muted); box-shadow:none!important; border-radius:8px; }
#akiiframmodalpbx .pbx-node-form .node-type-card.active { border-color:var(--pn-border-strong)!important; background:var(--pn-active); color:var(--pn-text); box-shadow:none!important; }
#akiiframmodalpbx .pbx-node-form .section-label { text-transform:none; letter-spacing:0; }
#akiiframmodalpbx .pbx-node-form :is(.form-control,.form-select):not([type="checkbox"]):not([type="radio"]) {
 border-color:var(--pn-border-strong)!important; border-width:1px!important; box-shadow:none!important;
}
#akiiframmodalpbx .pbx-node-form :is(.form-control,.form-select):focus { border-color:var(--pn-focus)!important; box-shadow:none!important; outline:none; }
#akiiframmodalpbx .pbx-node-form .btn { border-color:var(--pn-border)!important; box-shadow:none; }
#akiiframmodalpbx .pbx-node-form .node-type-card.active i { color:var(--pn-muted); }
#akiiframmodalpbx [id^="horario1_"] > .form-row:first-child .form-check { border-color:var(--pn-border)!important; }
#akiiframmodalpbx [id^="horario1_"] > .form-row:first-child .form-check:has(input:checked) { background:var(--pn-surface2); border-color:var(--pn-border)!important; }
#akiiframmodalpbx .pn-bulk-agents { background:var(--pn-canvas); border-color:var(--pn-border); }
#akiiframmodalpbx [id="2myDiv"] > .border { border-color:var(--pn-border)!important; }
#akiiframmodalpbx .pbx-voice-trigger { border-color:var(--pn-border-strong); box-shadow:none; }
#pn-pbx-overlay .pn-inline-controls .pn-btn { border-color:var(--pn-border); }
#pn-pbx-overlay .pn-inline-controls .pn-btn--primary { background:var(--pn-cta); color:var(--pn-cta-fg); border-color:transparent; }
#akiiframmodalpbx :is(input,select,button,.node-type-card):not(.dui-select__search):focus-visible,
#pn-pbx-overlay :is(.pn-btn,.pn-action-btn,.pn-inline-title):focus-visible { outline:2px solid var(--pn-focus)!important; outline-offset:3px; }
@media(max-height:800px) {
 #akicontenidonormal:has(.pn-head):has(#pn-tab-btn-flow.pn-tab-active) { height:auto!important; overflow:visible!important; }
 #akicontenidonormal:has(.pn-head) > #pn-pbx-overlay { flex:none!important; overflow:visible!important; }
 #pn-pbx-overlay .pn-ov-wrap { max-height:none; }
 #pn-pbx-overlay #pn-main-content { flex:none; grid-template-rows:auto; }
 #pn-pbx-overlay #pn-main-content > #pn-tab-flow { min-height:380px; overflow:visible; }
}


.pn-bulk-agents-controls > .dui-select--clean { flex:1 1 220px; width:auto; max-width:420px; }
@media(max-width:600px) { .pn-bulk-agents-controls > .dui-select--clean { flex-basis:100%; max-width:none; } }

/* review-pbx-checkbox-polish:start */
/* Native checkbox behavior remains intact; override the global CTA-colored skin only here. */
:is(#pn-pbx-overlay,#akiiframmodalpbx,#pn-list-section) input[type="checkbox"] {
    --pn-check-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8 2.5 2.5L12 5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --pn-check-mixed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    appearance:none!important; box-sizing:border-box; width:16px; height:16px; flex-shrink:0;
    border:1px solid var(--pn-border-strong,var(--dt-border-strong,#c9c9c9))!important;
    border-radius:4px; background-color:var(--pn-surface,var(--dt-surface,#fff))!important;
    background-image:none!important; background-size:14px 14px; background-position:center; background-repeat:no-repeat;
    box-shadow:none!important; vertical-align:middle;
}
[data-bs-theme="dark"] :is(#pn-pbx-overlay,#akiiframmodalpbx,#pn-list-section) input[type="checkbox"] {
    --pn-check-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8 2.5 2.5L12 5' fill='none' stroke='%23202020' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --pn-check-mixed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%23202020' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
:is(#pn-pbx-overlay,#akiiframmodalpbx,#pn-list-section) input[type="checkbox"]:not(:disabled):hover { border-color:var(--pn-muted,var(--dt-muted,#777))!important; }
:is(#pn-pbx-overlay,#akiiframmodalpbx,#pn-list-section) input[type="checkbox"]:is(:checked,:indeterminate) {
    border-color:var(--pn-text,var(--dt-text,#222))!important;
    background-color:var(--pn-text,var(--dt-text,#222))!important;
    background-image:var(--pn-check-mark)!important;
}
:is(#pn-pbx-overlay,#akiiframmodalpbx,#pn-list-section) input[type="checkbox"]:indeterminate { background-image:var(--pn-check-mixed)!important; }
:is(#pn-pbx-overlay,#akiiframmodalpbx,#pn-list-section) input[type="checkbox"]:focus-visible {
    outline:2px solid var(--pn-focus,var(--dt-focus,#888))!important; outline-offset:3px; box-shadow:none!important;
}
:is(#pn-pbx-overlay,#akiiframmodalpbx,#pn-list-section) input[type="checkbox"]:disabled { opacity:.45; cursor:not-allowed; }
@media(forced-colors:active) {
    :is(#pn-pbx-overlay,#akiiframmodalpbx,#pn-list-section) input[type="checkbox"],
    :is(#pn-pbx-overlay,#akiiframmodalpbx,#pn-list-section) input[type="checkbox"]:is(:checked,:indeterminate) {
        appearance:auto!important; background-image:none!important; forced-color-adjust:auto;
    }
}
/* review-pbx-checkbox-polish:end */


/* PBX reassignment search: no nested field borders or focus outline. */
.pn-move-dialog .dt-search-field.pn-move-search,
.pn-move-dialog .dt-search-field.pn-move-search:focus-within {
    border:0!important; outline:none!important; box-shadow:none!important;
    background:var(--dt-surface-2,#f5f5f5)!important;
}
.pn-move-dialog .pn-move-search input,
.pn-move-dialog .pn-move-search input:is(:focus,:focus-visible,:hover,:active) {
    border:0!important; border-radius:0!important; outline:none!important;
    box-shadow:none!important; background:transparent!important; padding:0!important;
}
@media(forced-colors:active) {
    .pn-move-dialog .dt-search-field.pn-move-search:focus-within { outline:2px solid Highlight!important; outline-offset:-2px; }
}


}
/* end dui-template-style modules/control-phonenumbers:0 */
/* dui-template-style {"key":"modules/control-scripts:0","bytes":18991,"sha256":"a63d73a5ca93d8fe4d4aac69ed9fc023d1354214ec8dcae73289fe91023d0a83","media":null,"source_sha256":"a63d73a5ca93d8fe4d4aac69ed9fc023d1354214ec8dcae73289fe91023d0a83"} */
@scope (:root:has(template[data-dui-legacy-style="modules/control-scripts:0"])) {

.forms-submissions .forms-selection-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:0 0 auto; min-width:0; }
.forms-submissions .forms-selection-bar .forms-button { height:34px; min-height:34px; padding:0 13px; gap:7px; border-radius:var(--dt-radius,8px); background:transparent; font-size:13px; font-weight:600; line-height:1; box-shadow:none; transform:none; }
.forms-submissions .forms-selection-bar .forms-button:focus-visible { outline:2px solid var(--dt-focus); outline-offset:2px; }
.forms-submissions .forms-picker { position:relative; flex:1 1 240px; min-width:0; max-width:520px; font-family:var(--el-font,inherit); font-size:13px; }
.forms-submissions .forms-button.forms-picker-toggle { width:100%; justify-content:space-between; text-align:left; }
.forms-submissions .forms-button.forms-picker-toggle[aria-expanded="true"] { border-color:var(--dt-border-strong); background:var(--dt-hover); }
.forms-submissions #forms-selected-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.forms-submissions .forms-picker-chevron { flex:none; color:var(--dt-muted); font-size:16px; transition:transform var(--dt-dur-1,110ms) var(--dt-ease,ease); }
.forms-submissions .forms-picker-toggle[aria-expanded="true"] .forms-picker-chevron { transform:rotate(180deg); }
.forms-submissions .forms-picker-panel, .forms-submissions .forms-more-panel { position:absolute; z-index:20; background:var(--dt-surface); border:0; border-radius:var(--dt-radius,6px); padding:8px; top:calc(100% + 4px); }
.forms-submissions .forms-picker-panel { left:0; right:0; top:calc(100% + 6px); padding:6px; border-radius:var(--dt-radius-lg,12px); box-shadow:none; }
.forms-submissions .forms-picker-search-row { display:flex; align-items:center; gap:7px; min-height:34px; margin:0 4px 6px; padding:0 6px 4px; border-bottom:1px solid var(--dt-border); }
.forms-submissions .forms-picker-search-row > i { flex:none; color:var(--dt-muted); font-size:15px; }
.forms-submissions .forms-picker-search-row:focus-within { outline:2px solid var(--dt-focus); outline-offset:-2px; border-radius:var(--dt-radius-sm,6px); }
/* Keep the integrated search clear of the CRM's global input borders and focus styles. */
.forms-submissions #forms-picker-search { flex:1; min-width:0; width:100%; height:28px; margin:0; padding:4px 0; border:0 !important; border-radius:0 !important; outline:0 !important; box-shadow:none !important; color:var(--dt-text); background:transparent !important; font:inherit; }
.forms-submissions #forms-picker-search::placeholder { color:var(--dt-muted); opacity:1; }
.forms-submissions #forms-picker-options { max-height:min(300px,45vh); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.forms-submissions .forms-picker-option { display:flex; align-items:center; gap:9px; box-sizing:border-box; width:100%; min-height:32px; margin:0; text-align:left; border:0; border-radius:var(--dt-radius-sm,6px); padding:6px 9px; background:transparent; color:var(--dt-text); font:inherit; font-weight:500; line-height:1.4; cursor:pointer; }
.forms-submissions .forms-picker-option:hover { background:var(--dt-hover); }
.forms-submissions .forms-picker-option[aria-selected="true"] { background:var(--dt-active); font-weight:600; }
.forms-submissions .forms-picker-option-label { flex:1; min-width:0; white-space:normal; overflow-wrap:anywhere; }
.forms-submissions .forms-picker-option-check { flex:none; width:16px; font-size:16px; text-align:center; visibility:hidden; }
.forms-submissions .forms-picker-option[aria-selected="true"] .forms-picker-option-check { visibility:visible; }
.forms-submissions .forms-picker .forms-picker-option:focus-visible { outline:2px solid var(--dt-focus); outline-offset:-2px; }
.forms-submissions .forms-picker-empty { margin:0; padding:24px 12px; color:var(--dt-muted); font-size:13px; line-height:1.5; text-align:center; overflow-wrap:anywhere; }
.forms-submissions .forms-more { position:relative; flex:none; }
.forms-submissions .forms-more-toggle > i { color:var(--dt-muted); font-size:16px; }
.forms-submissions .forms-button.forms-more-toggle[aria-expanded="true"] { border-color:var(--dt-border-strong); background:var(--dt-hover); }
.forms-submissions .forms-more-panel { right:0; top:calc(100% + 6px); width:224px; max-width:calc(100vw - 32px); padding:6px; border-radius:var(--dt-radius-lg,12px); box-shadow:none; font-family:var(--el-font,inherit); }
.forms-submissions .forms-action { position:relative; display:flex; align-items:center; gap:9px; box-sizing:border-box; width:100%; min-height:32px; margin:0; padding:6px 9px; border:0; border-radius:var(--dt-radius-sm,6px); background:transparent; color:var(--dt-text); font:inherit; font-size:13px; font-weight:500; line-height:1.4; text-align:left; cursor:pointer; }
.forms-submissions .forms-action > i { flex:none; width:16px; color:var(--dt-muted); font-size:16px; text-align:center; }
.forms-submissions .forms-action > span { min-width:0; white-space:normal; overflow-wrap:anywhere; }
.forms-submissions .forms-action:hover:not(:disabled) { background:var(--dt-hover); }
.forms-submissions .forms-more .forms-action:focus-visible { outline:2px solid var(--dt-focus); outline-offset:-2px; }
.forms-submissions .forms-action-danger { margin-top:10px; }
.forms-submissions .forms-action-danger > i { color:var(--dt-danger); }
.forms-submissions .forms-action-danger::before { content:''; position:absolute; top:-6px; left:4px; right:4px; height:1px; background:var(--dt-border); pointer-events:none; }
.forms-submissions .forms-button.forms-create { margin-left:auto; background:var(--dt-cta); color:var(--dt-cta-fg); border-color:var(--dt-cta); }
.forms-submissions .forms-button.forms-create:hover:not(:disabled) { background:var(--dt-cta-hover); color:var(--dt-cta-fg); border-color:var(--dt-cta-hover); }
.forms-submissions .forms-create > i { font-size:16px; }
.forms-submissions .forms-notice { flex:0 0 auto; border-left:3px solid var(--dt-border-strong); padding:8px 12px; font-size:13px; }
.forms-submissions .forms-notice .forms-button { margin-left:8px; }
@media(prefers-reduced-motion:reduce) {
    .forms-submissions .forms-picker-chevron { transition:none; }
}
@media(max-width:575px) {
    .forms-submissions .forms-picker { flex-basis:100%; max-width:none; }
    .forms-submissions .forms-more-panel { left:0; right:auto; max-width:calc(100vw - 32px); }
}

.forms-submissions {
    /* Match the module padding in datalyse-modern.css; the parent has an auto height. */
    --forms-page-padding:52px;
    display:flex; flex-direction:column; gap:16px; min-height:0; min-width:0; box-sizing:border-box;
    height:calc(100vh - var(--dt-topbar-h,44px) - var(--forms-page-padding));
    height:calc(100dvh - var(--dt-topbar-h,44px) - var(--forms-page-padding));
    color:var(--dt-text,var(--el-text)); padding:0 0 12px;
}
.forms-submissions [hidden], .forms-submission-drawer [hidden] { display:none !important; }
.forms-submissions .forms-heading { display:flex; align-items:center; gap:12px; min-width:0; flex:0 0 auto; }
.forms-submissions .forms-heading h1 { margin:0; padding:0; font-size:20px; line-height:1.35; font-weight:400; overflow-wrap:anywhere; }
.forms-submissions .forms-layout { display:flex; flex-direction:column; gap:12px; flex:1 1 auto; min-height:0; min-width:0; }
.forms-submissions .forms-toolbar { display:flex; flex-wrap:wrap; gap:10px 16px; margin:0; flex:0 0 auto; }
.forms-submissions .forms-toolbar-search { display:flex; flex:1 1 390px; gap:8px; min-width:0; }
.forms-submissions .forms-toolbar-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.forms-submissions .forms-field-picker { flex:0 1 200px; min-width:110px; margin:0; }
.forms-submissions .forms-field-picker select,
.forms-submissions .forms-filters input,
.forms-submissions .forms-filters select,
.forms-submissions .forms-page-size select {
    height:34px; min-height:34px; width:100%; padding:0 28px 0 10px; margin:0;
    border:0; border-radius:var(--dt-radius,6px);
    background-color:var(--dt-surface); color:var(--dt-text); font:inherit; font-size:13px;
}
.forms-submissions .forms-search { display:flex; flex:1 1 220px; min-width:120px; height:34px; margin:0; padding:0 10px; gap:8px; border:0; border-radius:var(--dt-radius,6px); background:transparent; }
.forms-submissions .forms-search input { min-width:0; width:100%; height:32px; padding:0; border:0 !important; box-shadow:none !important; background:transparent !important; font-size:13px; color:var(--dt-text); }
.forms-submissions .forms-search:focus-within { outline:2px solid var(--dt-text); outline-offset:2px; }
.forms-submissions .forms-search i { color:var(--dt-muted); font-size:16px; }
.forms-submissions .forms-button, .forms-submission-drawer .forms-button {
    display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:34px;
    padding:6px 11px; border:0; border-radius:var(--dt-radius,6px);
    background:var(--dt-surface); color:var(--dt-text); font:inherit; font-size:13px; font-weight:500;
    line-height:1.3; cursor:pointer; white-space:nowrap;
}
.forms-submissions .forms-button:hover:not(:disabled), .forms-submission-drawer .forms-button:hover:not(:disabled) { background:var(--dt-hover); }
.forms-submissions .forms-button-quiet { border-color:transparent; color:var(--dt-muted); background:transparent; }
.forms-submissions button:disabled, .forms-submissions input:disabled, .forms-submissions select:disabled { opacity:.45; cursor:not-allowed; }
.forms-submissions :is(button,select,input,[tabindex]):focus-visible,
.forms-submission-drawer :is(button,[tabindex]):focus-visible { outline:2px solid var(--dt-text); outline-offset:2px; }
.forms-submissions .forms-filters { display:grid; grid-template-columns:minmax(130px,180px) minmax(130px,180px) minmax(190px,1fr); gap:14px; flex:0 0 auto; padding:14px 16px; border:0; border-radius:var(--dt-radius-lg,8px); background:var(--dt-surface); }
.forms-submissions .forms-filters label { display:flex; flex-direction:column; gap:6px; margin:0; font-size:12px; color:var(--dt-muted); min-width:0; }
.forms-submissions .forms-filters .forms-date-mode { grid-column:1 / -1; flex-direction:row; align-items:center; gap:8px; color:var(--dt-text); cursor:pointer; }
.forms-submissions .forms-date-mode input { width:16px; height:16px; min-height:16px; margin:0; padding:0; accent-color:var(--dt-text); }
.forms-submissions .forms-table-scroll { position:relative; isolation:isolate; flex:0 1 auto; min-height:160px; max-height:none; overflow:auto; border:0; border-radius:var(--dt-radius-lg,8px); background:var(--dt-surface); scrollbar-width:thin; }
.forms-submissions .dui-dt-table { width:max-content; min-width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; font-variant-numeric:tabular-nums; margin:0; }
.forms-submissions .dui-dt-table thead { position:static; }
.forms-submissions .dui-dt-table .dui-dt-th { position:sticky; top:0; z-index:3; height:64px; padding:10px 16px; text-align:left; vertical-align:middle; background:var(--dt-topbar) !important; color:var(--dt-muted) !important; border:0; border-bottom:1px solid var(--dt-border-strong); font-size:12px; font-weight:500; line-height:1.4; letter-spacing:0; text-transform:none; cursor:default; }
.forms-submissions .forms-header-label { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; overflow-wrap:anywhere; white-space:normal; }
.forms-submissions .dui-dt-row { background:var(--dt-surface); }
.forms-submissions .dui-dt-row:hover { background:var(--dt-hover); }
.forms-submissions .dui-dt-row td { height:52px; padding:7px 16px; font-size:13px; line-height:1.4; vertical-align:middle; border:0; border-bottom:1px solid var(--dt-border); color:var(--dt-text); }
.forms-submissions .dui-dt-row:last-child td { border-bottom:0; }
.forms-submissions .forms-date-cell { width:190px; min-width:190px; max-width:190px; }
.forms-submissions .forms-contact-cell { width:155px; min-width:155px; max-width:155px; }
.forms-submissions .forms-answer-cell { width:250px; min-width:250px; max-width:250px; }
.forms-submissions .forms-cell-text { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:218px; }
.forms-submissions .forms-answer-cell .forms-cell-text { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:pre-line; overflow-wrap:anywhere; max-height:37px; }
.forms-submissions .forms-action-cell { position:sticky; right:0; z-index:2; width:150px; min-width:150px; max-width:150px; background:var(--dt-surface); box-shadow:none; }
.forms-submissions .dui-dt-table th.forms-action-cell { z-index:4; }
.forms-submissions .dui-dt-row:hover .forms-action-cell { background:var(--dt-hover); }
.forms-submissions .forms-text-button { border:0; background:transparent; color:var(--dt-text); font:inherit; font-weight:500; padding:4px 0; text-decoration:underline; text-underline-offset:3px; cursor:pointer; white-space:nowrap; }
.forms-submissions .forms-status { position:sticky; left:0; width:100%; min-height:170px; padding:34px 20px; text-align:center; color:var(--dt-text); font-size:14px; }
.forms-submissions .forms-status p { margin:0 0 8px; }
.forms-submissions .forms-status .forms-status-hint { color:var(--dt-muted); font-size:13px; }
.forms-submissions .forms-status .forms-button { margin-top:8px; }
.forms-submissions .dui-dt-footer { display:flex; flex:0 0 auto; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:0; padding:0; color:var(--dt-muted); font-size:12px; }
.forms-submissions .dui-dt-footer-left { display:flex; flex-wrap:wrap; gap:6px 14px; }
.forms-submissions #forms-applied-range { color:var(--dt-muted); }
.forms-submissions .forms-pagination-controls { position:static; left:auto; right:auto; top:auto; bottom:auto; transform:none; display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.forms-submissions .forms-page-size { display:flex; align-items:center; gap:8px; margin:0; white-space:nowrap; }
.forms-submissions .forms-page-size select { width:72px; height:30px; min-height:30px; }
.forms-submissions .forms-page-buttons { display:flex; align-items:center; gap:4px; }
.forms-submissions .dui-dt-page-btn { display:inline-flex; justify-content:center; align-items:center; width:30px; height:30px; padding:0; border:0; border-radius:var(--dt-radius-sm,5px); background:var(--dt-surface); color:var(--dt-text); cursor:pointer; }
.forms-submissions .dui-dt-page-btn:hover:not(:disabled) { background:var(--dt-hover); }
.forms-submissions .dui-dt-page-info { padding:0 8px; color:var(--dt-text); white-space:nowrap; font-weight:500; font-size:12px; }
.forms-submissions .forms-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.forms-submission-drawer.fixblockiz { width:100%; max-width:840px; top:var(--dt-topbar-h,44px) !important; height:calc(100% - var(--dt-topbar-h,44px)) !important; color:var(--dt-text); background:var(--dt-surface); border-left:1px solid var(--dt-border); visibility:hidden; }
.forms-submission-drawer.fixblockizshow { visibility:visible; }
.forms-submission-drawer .form100p { height:100%; min-height:0; }
.forms-submission-drawer .fixblockiztit { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:16px; min-height:60px; height:auto; padding:12px 24px; line-height:1.4; color:var(--dt-text); background:var(--dt-surface); border-bottom:1px solid var(--dt-border); letter-spacing:0; }
.forms-submission-drawer .closebtnfix { display:inline-flex; align-items:center; justify-content:center; flex:0 0 32px; float:none; width:32px; height:32px; padding:0; margin:0; border:0; border-radius:var(--dt-radius,6px); background:transparent; color:var(--dt-text); opacity:1; transform:none; font-size:18px; }
.forms-submission-drawer .closebtnfix:hover { background:var(--dt-hover); transform:none; }
.forms-submission-drawer .fixblockizdesc { height:auto; min-height:0; flex:1 1 auto; overflow:auto; padding:24px; line-height:1.6; }
.forms-submission-drawer .form-submission__title { font-size:16px; margin:4px 0 18px; }
.forms-submission-drawer .form-submission__answers.row { height:auto; margin:0 -8px; }
.forms-submission-drawer .form-submission__answer { min-width:0; padding:14px 8px; border-bottom:1px solid var(--dt-border); }
.forms-submission-drawer .form-submission__answer dt,
.forms-submission-drawer .form-submission__answer dd { overflow-wrap:anywhere; }
.forms-submission-drawer .form-submission__answer dd { white-space:pre-wrap; }
.forms-submission-drawer .form-submission__answer dt { font-size:12px; line-height:1.5; }
.forms-submission-drawer .form-submission__answer dd { font-size:14px; margin-top:6px; line-height:1.6; }
.forms-submission-drawer .form-submission-actions { padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--dt-border); }
.forms-submission-drawer .form-submission-date { margin-bottom:12px; }
@media (max-width:767.98px) {
    .forms-submissions { --forms-page-padding:36px; gap:12px; padding-bottom:8px; }
    .forms-submissions .forms-heading h1 { font-size:18px; }
    .forms-submissions .forms-toolbar { flex-direction:column; align-items:stretch; }
    .forms-submissions .forms-toolbar-search { flex-basis:auto; width:100%; }
    .forms-submissions .forms-toolbar-actions { justify-content:flex-start; width:100%; }
    .forms-submissions .forms-field-picker { flex:0 1 42%; min-width:100px; }
    .forms-submissions .forms-search { flex:1 1 58%; }
    .forms-submissions .forms-toolbar-actions .forms-button { padding:6px 8px; font-size:12px; }
    .forms-submissions .forms-filters { grid-template-columns:1fr 1fr; gap:10px; padding:12px; }
    .forms-submissions .forms-timezone { grid-column:1 / -1; }
    .forms-submissions .forms-action-cell { width:128px; min-width:128px; max-width:128px; }
    .forms-submissions .dui-dt-row td.forms-action-cell { padding:7px 8px; }
    .forms-submissions .forms-view-submission { width:100%; padding:6px; font-size:12px; white-space:normal; }
    .forms-submissions .forms-pagination-controls { gap:8px; width:100%; justify-content:space-between; }
    .forms-submissions .forms-page-size { gap:5px; font-size:11px; }
    .forms-submissions .forms-page-size select { width:72px; min-width:72px; }
    .forms-submissions .dui-dt-page-info { padding:0 3px; font-size:11px; }
    .forms-submissions .dui-dt-page-btn { width:27px; height:30px; }
    .forms-submissions .forms-page-buttons { gap:3px; }
    .forms-submission-drawer .fixblockiztit { padding:12px 16px; }
    .forms-submission-drawer .fixblockizdesc { padding:18px 16px; }
}
@media (prefers-reduced-motion:reduce) {
    .forms-submission-drawer.fixblockiz { transition:none; }
    .forms-submissions *, .forms-submission-drawer * { scroll-behavior:auto; }
}

}
/* end dui-template-style modules/control-scripts:0 */
/* dui-template-style {"key":"modules/control-scripts_edit:0","bytes":12045,"sha256":"56ff32a858164371df654ea4885aded4544d33b7a46fc88862d924a1335b8822","media":null,"source_sha256":"56ff32a858164371df654ea4885aded4544d33b7a46fc88862d924a1335b8822"} */
@scope (:root:has(template[data-dui-legacy-style="modules/control-scripts_edit:0"])) {

  /* ============================================
     Forms Builder — colores via tokens de la app
     (165_varsfusion.css / datalyse-modern.css), NO literales:
     asi light y dark salen solos y no hace falta un bloque
     [data-bs-theme="dark"] con colores a mano.
     ============================================ */

  /* --- Card de pregunta: fondo, bordes y sombra --- */
  .input-group-script {
    background-color: var(--falcon-card-bg, #fff) !important;
    border: 0 !important;
    border-radius: 0.5rem !important;
    overflow: visible !important;
    box-shadow: none;
    transition: box-shadow 0.2s ease;
    /* Ancla de los position:absolute internos (badge de seccion, "After section").
       Sin z-index a proposito: crearia un stacking context que encerraria al
       menu position:fixed que coloca el shim de datalyse-ui.js. */
    position: relative;
  }

  .input-group-script:hover {
    box-shadow: none;
    border-color: var(--dt-border-strong) !important;
  }

  .input-group-script .card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--border-color, #e5e5e5) !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    padding: 1rem;
  }

  .input-group-script .card-footer {
    background-color: var(--bg-tertiary-color, #f5f5f5) !important;
    border-top: 1px solid var(--border-color, #e5e5e5) !important;
    border-radius: 0 0 0.5rem 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
  }

  /* --- Inputs dentro de las preguntas --- */
  .input-group-script .form-control,
  .input-group-script .form-select,
  .input-group-script .soyanswer,
  .input-group-script .soyansweriranext,
  .input-group-script .textarea-container textarea {
    background-color: var(--falcon-input-bg, #fff) !important;
    border: 0 !important;
    color: var(--falcon-input-color, #1a1a1a) !important;
    border-radius: 0.25rem;
  }

  .input-group-script .form-control:focus,
  .input-group-script .form-select:focus,
  .input-group-script .soyanswer:focus,
  .input-group-script .textarea-container textarea:focus {
    border-color: var(--dt-focus, #006fbe) !important;
    box-shadow: none !important;
  }

  .input-group-script .form-control::placeholder,
  .input-group-script .textarea-container textarea::placeholder {
    color: var(--text-muted-color, rgba(0, 0, 0, 0.45)) !important;
  }

  .input-group-script .soyansweriranext {
    font-size: 0.8125rem;
  }

  /* --- Fix: quitar highlight amarillo de Chrome autofill --- */
  .input-group-script input:-webkit-autofill,
  .input-group-script input:-webkit-autofill:hover,
  .input-group-script input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--falcon-input-bg, #fff) inset !important;
    -webkit-text-fill-color: var(--falcon-input-color, #1a1a1a) !important;
    border: 1px solid var(--falcon-input-border-color, #e0e0e0) !important;
    transition: background-color 5000s ease-in-out 0s;
  }

  /* ==============================================
     Dropdown: SOLO colores aqui.

     OJO: el posicionamiento lo calcula datalyse-ui.js (Dropdown.reposition),
     que al abrir pone el menu en position:fixed + top/left/right en coordenadas
     de viewport + z-index inline. NO volver a declarar aqui position ni z-index
     (y menos con !important): un !important de hoja de estilos gana al style
     inline del shim y el menu acaba dibujado lejos del boton, "flotando".
     ============================================== */
  .input-group-script .dropdown {
    position: relative;
  }

  .input-group-script .dropdown-menu {
    background-color: var(--falcon-popover-bg, #fff) !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0.375rem !important;
  }

  .input-group-script .dropdown-item {
    color: var(--falcon-body-color, #666) !important;
    padding: 0.45rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
    margin: 0 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .input-group-script .dropdown-item:hover,
  .input-group-script .dropdown-item:focus {
    background-color: var(--hover-color, #f5f5f5) !important;
    color: var(--text-color, #1a1a1a) !important;
  }

  .input-group-script .dropdown-item.active {
    background-color: rgba(var(--el-accent-rgb, 0, 111, 190), 0.12) !important;
    color: var(--el-accent, #006fbe) !important;
  }

  .input-group-script .dropdown-toggle {
    background-color: var(--falcon-input-bg, #fff) !important;
    border: 0 !important;
    color: var(--falcon-input-color, #1a1a1a) !important;
    text-align: left !important;
  }

  .input-group-script .dropdown-divider {
    border-color: var(--border-color, #e5e5e5) !important;
    margin: 0.25rem 0;
  }

  /* ==============================================
     Footer: Requerido + botones alineados
     ============================================== */
  .input-group-script .card-footer .d-flex {
    align-items: center !important;
    gap: 0.5rem;
    min-height: 38px;
    flex-wrap: nowrap;
  }

  .input-group-script .card-footer .form-check {
    margin: 0 !important;
    padding-left: 2.5em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .input-group-script .card-footer .form-check-label {
    font-size: 0.8125rem;
    color: var(--falcon-body-color, #666);
    white-space: nowrap;
    margin-bottom: 0;
    line-height: 1;
    margin-right: 40px;
    cursor: pointer;
  }

  .input-group-script .card-footer .form-check-input {
    margin-top: 0;
  }

  .input-group-script .card-footer .btn-sm {
    padding: 0.25rem 0.5rem;
    line-height: 1.2;
  }

  /* --- Más opciones (3 dots) dropdown --- */
  .soybotonmasopciones .dropdown-menu {
    min-width: 220px;
  }

  .soybotonmasopciones .dropdown-item-text {
    color: var(--text-muted-color, rgba(0, 0, 0, 0.45)) !important;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* ==============================================
     Card de sección
     ============================================== */
  .card[data-cardsoysection] {
    background-color: var(--bg-secondary-color, #fafafa) !important;
    border: 0 !important;
    border-radius: 0.5rem !important;
    overflow: visible;
  }

  .card[data-cardsoysection] .card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--border-color, #e5e5e5) !important;
  }

  .card[data-cardsoysection] .soynombreseccion {
    margin-top: 20px;
    background-color: var(--falcon-input-bg, #fff) !important;
    border: 0 !important;
    color: var(--falcon-input-color, #1a1a1a) !important;
  }

  .card[data-cardsoysection] .card-footer {
    background-color: transparent !important;
    border-top: 1px solid var(--border-color, #e5e5e5) !important;
  }

  /* --- Badge sección --- */
  .card[data-cardsoysection] .badge.bg-primary {
    font-size: 0.75rem !important;
    padding: 0.35em 0.75em;
    border-radius: 0.25rem;
  }

  /* --- Card overlay sortable: invisible --- */
  .card[data-cardoverlaysection] {
    display: none !important;
  }

  /* ==============================================
     Header: título, descripción, mensaje
     ============================================== */
  .card > .card-body .form-floating .form-control {
    background-color: var(--falcon-input-bg, #fff) !important;
    border: 0 !important;
    color: var(--falcon-input-color, #1a1a1a) !important;
  }

  .card > .card-body .form-floating label {
    color: var(--text-muted-color, rgba(0, 0, 0, 0.45)) !important;
  }

  /* ==============================================
     Opciones múltiples / checkbox respuestas
     ============================================== */
  /* --- Fila de opción: alinear icono, input, trash --- */
  .input-group-script .div-inputs .row {
    align-items: center;
    margin-bottom: 0.35rem !important;
  }

  .input-group-script .div-inputs .row .col-md-1 {
    display: flex;
    justify-content: center;
  }

  .input-group-script .div-inputs .row .btn-light {
    background-color: transparent !important;
    border: none !important;
    color: var(--text-muted-color, rgba(0, 0, 0, 0.45));
    padding: 0.25rem 0.5rem;
    transition: color 0.2s ease;
  }

  .input-group-script .div-inputs .row .btn-light:hover {
    color: var(--error-color, #ef4444) !important;
  }

  /* Icono guia de la fila de respuesta (radio / checkbox) */
  .input-group-script .soyiconorespuesta {
    position: absolute;
    margin-top: 9px;
    margin-left: 6px;
    color: var(--text-muted-color, rgba(0, 0, 0, 0.45));
    pointer-events: none;
    font-size: 1rem;
    line-height: 1;
  }

  /* --- Botón "Añadir opción" centrado --- */
  .input-group-script .btnAddOptionAqui {
    margin-top: 0.25rem;
  }

  /* ==============================================
     Textarea (HTML block)
     ============================================== */
  .input-group-script .textarea-container textarea {
    width: 100%;
    min-height: 100px;
    padding: 0.5rem;
    font-family: monospace;
    font-size: 0.8125rem;
  }

  /* ==============================================
     "After section" selector
     ============================================== */
  .irasiguientedesdeaccionsinosoyprimera {
    color: var(--falcon-body-color, #666);
    font-size: 0.8125rem;
  }

  .irasiguientedesdeaccionsinosoyprimera .form-select {
    background-color: var(--falcon-input-bg, #fff) !important;
    border: 0 !important;
    color: var(--falcon-input-color, #1a1a1a) !important;
    font-size: 0.8125rem;
  }

  /* ==============================================
     Botones Add section / Add question
     ============================================== */
  .module__content .btn-secondary {
    border: 1px dashed var(--border-strong-color, #d4d4d4) !important;
    background-color: transparent !important;
    color: var(--falcon-body-color, #666) !important;
    transition: all 0.2s ease;
    font-weight: 500;
  }

  .module__content .btn-secondary:hover {
    border-color: var(--el-accent, #006fbe) !important;
    color: var(--el-accent, #006fbe) !important;
    background-color: rgba(var(--el-accent-rgb, 0, 111, 190), 0.06) !important;
  }

  /* --- div-inputs spacing --- */
  .div-inputs {
    margin-top: 0.75rem;
  }

  .div-inputs:empty {
    margin-top: 0;
  }
/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Formularios: las sombras de pregunta y de menú y el halo de foco ya se quitan en sus reglas de arriba (token_edits). Aquí: «Add option»
   de cada pregunta deja de ser CTA en tinta y pasa a ghost de 30 px (el único CTA es «Save form» de arriba); el «Save form» de abajo
   (ghost) baja de btn-lg a 34 px; el hover de Add section y Add question y la opción activa del menú, en grises. */
#akicontenidonormal .input-group-script .btn-primary.btnAddOptionAqui,
#akicontenidonormal .input-group-script .btn-primary.btnAddOptionAqui:focus { background: transparent !important; color: var(--dt-text) !important; border: 1px solid var(--dt-border-strong) !important; height: 30px; padding: 0 12px; font-size: 13px; font-weight: 500; border-radius: var(--dt-radius); }
#akicontenidonormal .input-group-script .btn-primary.btnAddOptionAqui:hover { background: var(--dt-hover) !important; color: var(--dt-text) !important; border-color: var(--dt-border-strong) !important; }
#akicontenidonormal #btnsaveformv3.btn-lg { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; font-size: 13px; font-weight: 600; border-radius: var(--dt-radius); }
#akicontenidonormal .module__content .btn-secondary:hover { border-color: var(--dt-border-strong) !important; color: var(--dt-text) !important; background-color: var(--dt-hover) !important; }
#akicontenidonormal .input-group-script .dropdown-item.active { background-color: var(--dt-active) !important; color: var(--dt-text) !important; font-weight: 600; }

}
/* end dui-template-style modules/control-scripts_edit:0 */
/* dui-template-style {"key":"modules/control-sendsms:0","bytes":497,"sha256":"20e534519b2f5d1a89d062e34a126a98fa090e9d3857c064734ab91e857ba660","media":null,"source_sha256":"bbe9b304315408c528a195e908517277bce533c3a0ea5ca57051764aee5277a0"} */
@scope (:root:has(template[data-dui-legacy-style="modules/control-sendsms:0"])) {

#sendSmsStatus[hidden] { display: none !important; }
#sendSmsStatus { color: var(--dt-muted); background: var(--dt-surface); border: 1px solid var(--dt-border); border-radius: 12px; }
  @keyframes dui-legacy-modules-control-sendsms-fadeInifravoz {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Aplica la animación al iframe */
#fravoice {
  opacity: 0; /* Estado inicial */
  animation: dui-legacy-modules-control-sendsms-fadeInifravoz 500ms ease 1s forwards;
}

}
/* end dui-template-style modules/control-sendsms:0 */
/* dui-template-style {"key":"modules/conversationsconfig:0","bytes":9324,"sha256":"7799a467279e14c8dbc0646b626ec90675b5c7853633713ecc1c50d36e958746","media":null,"source_sha256":"7799a467279e14c8dbc0646b626ec90675b5c7853633713ecc1c50d36e958746"} */
@scope (:root:has(template[data-dui-legacy-style="modules/conversationsconfig:0"])) {

    .nav-item-circle-parent::after  {
        display: none !important;
    }
    /* Modern channel config styles — uses 165_varsfusion.css variables */
    .cc-wrapper {
        max-width: 720px;
        margin: 0 auto;
        padding: 0 16px;
    }
    .cc-card {
        background: var(--bg-color);
        border-radius: 16px;
        box-shadow: none;
        overflow: hidden;
        border: 0;
    }
    .cc-header {
        padding: 28px 32px 0;
    }
    .cc-header h4 {
        font-size: 1.35rem;
        font-weight: 400;
        margin: 0;
        letter-spacing: -.02em;
        color: var(--text-color);
    }
    .cc-progress {
        height: 3px;
        background: var(--border-color);
        margin-top: 20px;
    }
    .cc-progress-bar {
        height: 100%;
        width: 0%;
        background: var(--dt-cta);
        border-radius: 3px;
        transition: width .4s cubic-bezier(.4,0,.2,1);
    }
    .cc-body {
        padding: 32px;
    }

    /* Channel cards */
    .cc-channel-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        margin-bottom: 8px;
    }
    .cc-channel-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 28px 16px;
        border-radius: 14px;
        border: 0;
        cursor: pointer;
        transition: all .2s ease;
        background: transparent;
    }
    .cc-channel-card:hover {
        border-color: var(--brand-color);
        background: var(--hover-color);
        transform: translateY(-2px);
        box-shadow: none;
    }
    .cc-channel-card.selected {
        border-color: var(--brand-color);
        background: var(--hover-color);
        box-shadow: none;
    }
    [data-bs-theme="dark"] .cc-channel-card.selected {
        box-shadow: none;
    }
    .cc-channel-card .cc-icon {
        font-size: 2rem;
        margin-bottom: 10px;
    }
    .cc-channel-card .cc-label {
        font-weight: 600;
        font-size: .92rem;
        color: var(--text-color);
    }
    /* "Radio" de seleccion de las cards: circulo siempre visible, vacio sin
       seleccionar y relleno con check al seleccionar */
    .cc-channel-card .cc-check {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 0;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .15s ease, border-color .15s ease;
    }
    .cc-channel-card:hover .cc-check {
        border-color: var(--brand-color);
    }
    .cc-channel-card.selected .cc-check {
        background: var(--brand-color);
        border-color: var(--brand-color);
    }
    /* Check con Tabler (ti ti-check); color con contraste segun tema porque el
       accent monocromo es casi negro en claro y casi blanco en oscuro */
    .cc-channel-card .cc-check .ti {
        font-size: 14px;
        line-height: 1;
        color: var(--dt-on-color);
        opacity: 0;
    }
    .cc-channel-card.selected .cc-check .ti {
        opacity: 1;
    }
    [data-bs-theme="dark"] .cc-channel-card .cc-check .ti {
        color: var(--dt-text);
    }

    /* Free trial banner */
    .cc-trial-banner {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 20px;
        border-radius: 12px;
        background: var(--dt-surface-2);
        border: 0;
        margin-top: 20px;
    }
    .cc-trial-icon {
        flex-shrink: 0;
        width: 42px;
        height: 42px;
        border-radius: 10px;
        background: rgba(16,185,129,.12);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }
    .cc-trial-text strong {
        display: block;
        color: var(--success-color);
        font-size: .95rem;
        margin-bottom: 2px;
    }
    .cc-trial-text small {
        color: var(--text-secondary-color);
        font-size: .82rem;
    }

    /* Price note */
    .cc-price-note {
        font-size: .85rem;
        color: var(--text-muted-color);
        margin-top: 8px;
    }

    /* Button */
    .cc-btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 32px;
        border-radius: 10px;
        background: var(--dt-cta);
        color: var(--dt-cta-fg);
        border: none;
        font-weight: 600;
        font-size: .95rem;
        cursor: pointer;
        transition: all .2s ease;
        box-shadow: none;
    }
    .cc-btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: none;
        background: var(--dt-cta-hover);
    }
    .cc-btn-primary.is-busy {
        opacity: .7;
        pointer-events: none;
    }

    @media (max-width: 576px) {
        .cc-channel-grid { grid-template-columns: 1fr; }
        .cc-body { padding: 20px; }
        .cc-header { padding: 20px 20px 0; }
    }
/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Connect a channel (asistente de WhatsApp, Instagram y Messenger): fuera los degradados índigo-violeta de la barra de progreso
   y del botón, la sombra de la tarjeta y el salto con sombra de las tarjetas de canal. Tarjeta con línea fina; canales con línea
   de 1 px (seleccionado = tinta, ya vía --brand-color = --dt-cta), círculo de selección en tinta; "Continue" y "Add" en tinta
   (uno por paso); iconos de los pasos de webhook y último paso en cuadrado neutro; Callback URL y Verify Token en código gris
   (no rosa de Bootstrap). Los logos de WhatsApp, Instagram y Messenger conservan su color de marca. Ámbito:
   #akicontenidonormal .cc-wrapper. Ninguna clase ni id que lea el JS cambia (selected, data-channel, data-wa-mode, is-busy,
   active de los tab-pane, width en línea de .cc-progress-bar, whatsbtnsiguientepaso4submittttttt,
   chat-createnewchannel-modal-submit). .cc-trial-banner no se pinta en ningún sitio y se deja. */

/* tarjeta y progreso: superficie con línea fina sin sombra; barra de 2 px en tinta */
#akicontenidonormal .cc-wrapper .cc-card { background: var(--dt-surface); border-color: var(--dt-border); border-radius: var(--dt-radius-lg); box-shadow: none; }
#akicontenidonormal .cc-wrapper .cc-header h4 { font-weight: 400; }
#akicontenidonormal .cc-wrapper .cc-progress { height: 2px; background: var(--dt-border); }
#akicontenidonormal .cc-wrapper .cc-progress-bar { background: var(--dt-cta); border-radius: 0; }

/* canales y modos de WhatsApp: línea de 1 px, sin salto ni sombra; hover línea fuerte, seleccionado línea en tinta */
#akicontenidonormal .cc-wrapper .cc-channel-card { border: 0; border-radius: var(--dt-radius-lg); transition: border-color .15s ease, background-color .15s ease; }
#akicontenidonormal .cc-wrapper .cc-channel-card:hover { border-color: var(--dt-border-strong); background: var(--dt-hover); transform: none; box-shadow: none; }
#akicontenidonormal .cc-wrapper .cc-channel-card.selected { border-color: var(--dt-text); background: var(--dt-hover); box-shadow: none; }
#akicontenidonormal .cc-wrapper .cc-channel-card .cc-check { border: 0; }
#akicontenidonormal .cc-wrapper .cc-channel-card:hover .cc-check { border-color: var(--dt-text); }
#akicontenidonormal .cc-wrapper .cc-channel-card.selected .cc-check { background: var(--dt-cta); border-color: var(--dt-cta); }
#akicontenidonormal .cc-wrapper .cc-channel-card .cc-check .ti { color: var(--dt-cta-fg); }

/* Continue y Add: CTA en tinta de 36 px, sin degradado, sombra ni salto (is-busy sigue a .7 de opacidad) */
#akicontenidonormal .cc-wrapper .cc-btn-primary { height: 36px; padding: 0 22px; border-radius: var(--dt-radius); background: var(--dt-cta); color: var(--dt-cta-fg); box-shadow: none; font-size: 13.5px; transition: background-color .15s ease, opacity .15s ease; }
#akicontenidonormal .cc-wrapper .cc-btn-primary:hover { background: var(--dt-cta-hover); transform: none; box-shadow: none; }

/* iconos de los pasos (en línea): cuadrado neutro; el enlace en gris, el check del último paso en verde solo en el glifo;
   "Finish!" en tinta */
#akicontenidonormal .cc-wrapper div[style*="rgba(99,102,241,.1)"], #akicontenidonormal .cc-wrapper div[style*="rgba(16,185,129,.1)"] { background: var(--dt-surface-2) !important; border: 0; border-radius: 12px !important; }
#akicontenidonormal .cc-wrapper div[style*="rgba(99,102,241,.1)"] > i { color: var(--dt-muted) !important; }
#akicontenidonormal .cc-wrapper div[style*="rgba(16,185,129,.1)"] > i { color: var(--dt-success) !important; }
#akicontenidonormal .cc-wrapper h4[style*="color:#059669"] { color: var(--dt-text) !important; }

/* Callback URL y Verify Token: código gris con línea fina */
#akicontenidonormal .cc-wrapper code { color: var(--dt-text); background: var(--dt-surface-2); border: 0; border-radius: 6px; padding: 2px 6px; word-break: break-all; }

}
/* end dui-template-style modules/conversationsconfig:0 */
/* dui-template-style {"key":"modules/costexplorer:0","bytes":10346,"sha256":"404f081b57a9e32b7c9bbc04fee270b6370f92ef0b0756501cecce9d1ce8b52d","media":null,"source_sha256":"404f081b57a9e32b7c9bbc04fee270b6370f92ef0b0756501cecce9d1ce8b52d"} */
@scope (:root:has(template[data-dui-legacy-style="modules/costexplorer:0"])) {

/* Cost reporting layout: all rules remain local to this module. */
#costUsageApp {
    --ce-surface:var(--dt-surface,#fff); --ce-surface2:var(--dt-surface-2,#f1f1ef);
    --ce-text:var(--dt-text,#111110); --ce-muted:var(--dt-muted,#5f5f5c);
    --ce-border:var(--el-hairline,var(--dt-border,rgba(12,10,9,.065))); --ce-hover:var(--dt-hover,#f4f4f3);
    width:100%; max-width:1440px; margin-inline:auto; padding:24px!important;
    color:var(--ce-text); font-family:var(--el-font,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif); font-size:13px;
}
#costUsageApp .el-v4-subnav { display:flex; align-items:center; gap:20px; border-bottom:1px solid var(--ce-border); margin-bottom:20px; flex-wrap:wrap; }
#costUsageApp .el-v4-subnav__item { display:inline-flex; align-items:center; gap:6px; padding:8px 2px 10px; border-bottom:2px solid transparent; margin-bottom:-1px; color:var(--ce-muted); font-size:13px; font-weight:500; text-decoration:none; transition:color .14s ease,border-color .14s ease; }
#costUsageApp .el-v4-subnav__item:hover { color:var(--ce-text); }
#costUsageApp .el-v4-subnav__item.is-active { color:var(--ce-text); font-weight:600; border-bottom-color:var(--ce-text); }
#costUsageApp .u-hidden { display:none!important; }
#costUsageApp .ce-header { gap:16px; flex-wrap:wrap; padding-bottom:22px; margin-bottom:22px!important; border-bottom:1px solid var(--ce-border); }
#costUsageApp .ce-header h4 { margin:0; font-size:24px; font-weight:600; line-height:1.25; letter-spacing:-.03em; color:var(--ce-text); }
#costUsageApp .ce-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:22px; margin:0; align-items:start; }
#costUsageApp .ce-layout > :is(.ce-main,.ce-sidebar) { width:auto; min-width:0; padding:0; }
#costUsageApp .ce-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 12px!important; }
#costUsageApp .ce-summary-grid > div { width:auto; min-width:0; padding:0; }
#costUsageApp .summary-card { display:flex; flex-direction:column; gap:9px; height:100%; min-height:118px; padding:18px; text-align:left; background:var(--ce-surface); border:0; border-radius:12px; }
#costUsageApp .summary-value { order:1; color:var(--ce-text); font-size:28px; font-weight:600; line-height:1.2; letter-spacing:-.04em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#costUsageApp .summary-label { order:0; font-size:12px; font-weight:500; line-height:1.4; color:var(--ce-muted); }
#costUsageApp .summary-card > small { order:2; font-size:11px; line-height:1.4; color:var(--ce-muted)!important; }
#costUsageApp .ce-summary-secondary { margin-bottom:22px!important; }
#costUsageApp .ce-summary-secondary .summary-card { min-height:92px; padding:16px 18px; background:transparent; }
#costUsageApp .ce-summary-secondary .summary-value { font-size:22px; }
#costUsageApp .card { min-width:0; border:0!important; border-radius:12px; background:var(--ce-surface)!important; box-shadow:none!important; }
#costUsageApp .card-header { gap:12px; flex-wrap:wrap; padding:16px 18px; border-bottom:1px solid var(--ce-border)!important; background:var(--ce-surface)!important; color:var(--ce-text); border-radius:12px 12px 0 0; }
#costUsageApp .card-header strong { font-size:13px; font-weight:600; }
#costUsageApp .card-header small { margin-top:4px; font-size:11.5px; line-height:1.4; }
#costUsageApp .card-body { padding:18px; }
#costUsageApp .text-muted, #costUsageApp .form-text { color:var(--ce-muted)!important; }
#costUsageApp .btn { min-height:34px; border-radius:8px; font-size:12px; font-weight:500; box-shadow:none!important; }
#costUsageApp :is(.btn-outline-primary,.btn-outline-secondary,.btn-success,.btn-light) { border:1px solid var(--ce-border)!important; background:var(--ce-surface)!important; color:var(--ce-text)!important; }
#costUsageApp :is(.btn-outline-primary,.btn-outline-secondary,.btn-success,.btn-light):hover { background:var(--ce-hover)!important; }
#costUsageApp .btn-primary { background:var(--ce-text)!important; border-color:var(--ce-text)!important; color:var(--ce-surface)!important; }
#costUsageApp .btn-primary:hover { opacity:.85; }
#costUsageApp .btn:focus-visible { outline:2px solid var(--dt-focus-ring,rgba(12,10,9,.06)); outline-offset:3px; }
#costUsageApp .btn-link { min-height:28px; color:var(--ce-muted)!important; text-decoration:none; font-size:11.5px; }
#costUsageApp .btn-link:hover { color:var(--ce-text)!important; text-decoration:underline; }
#costUsageApp .ce-chart-card .btn-group { gap:3px; padding:3px; border:1px solid var(--ce-border); border-radius:9px; background:var(--ce-surface2); }
#costUsageApp .ce-chart-card .btn-group .btn { min-height:28px; border-radius:6px!important; border-color:transparent!important; background:transparent!important; margin:0; }
#costUsageApp .ce-chart-card .btn-group .btn.active { background:var(--ce-surface)!important; color:var(--ce-text)!important; box-shadow:0 0 0 1px var(--ce-border)!important; }
#costUsageApp #echartMain { width:100%; min-width:0; }
#costUsageApp .ce-table-card .table-responsive { max-width:100%; overflow:auto; padding-bottom:0; border:0; border-radius:8px; }
#costUsageApp .ce-table-card .table-responsive:focus-visible { outline:2px solid var(--dt-focus-ring,rgba(12,10,9,.06)); outline-offset:3px; }
#costUsageApp #breakdownTable { min-width:100%; width:max-content; table-layout:auto; margin:0; color:var(--ce-text); font-size:12px; }
#costUsageApp #breakdownTable :is(th,td) { white-space:nowrap; }
#costUsageApp #breakdownTable thead th { position:sticky; top:0; z-index:1; background:var(--ce-surface2)!important; color:var(--ce-muted); font-size:11px; font-weight:500; letter-spacing:.02em; padding:11px 12px; border-bottom:1px solid var(--ce-border); white-space:nowrap; }
#costUsageApp #breakdownTable tbody td { padding:11px 12px; border-color:var(--ce-border); vertical-align:middle; font-variant-numeric:tabular-nums; }
#costUsageApp #breakdownTable tfoot :is(th,td) { padding:12px; border-top:1px solid var(--ce-border); background:var(--ce-surface2); color:var(--ce-text); font-weight:600; font-variant-numeric:tabular-nums; }
#costUsageApp #tableSubtitle { margin-bottom:12px!important; font-size:11.5px; line-height:1.5; }
#costUsageApp .ce-parameters { position:static; max-height:none; overflow:visible; }
#costUsageApp .ce-parameters > .card-header { position:static; }
#costUsageApp .ce-filter-section { margin-bottom:18px!important; padding-bottom:18px; border-bottom:1px solid var(--ce-border); min-width:0; }
#costUsageApp .ce-filter-section:last-child { margin-bottom:0!important; padding-bottom:0; border-bottom:0; }
#costUsageApp .ce-filter-section h6 { font-size:12px; font-weight:600; color:var(--ce-text); }
#costUsageApp .ce-filter-section .form-label { font-size:11.5px; font-weight:500; color:var(--ce-muted); }
#costUsageApp .ce-filter-section :is(.form-select,.form-control) { font-size:12px; min-height:34px; }
#costUsageApp .ce-filter-section .form-text { font-size:11px; line-height:1.5; }
#costUsageApp #serviceList { max-height:240px!important; border-color:var(--ce-border)!important; border-radius:8px!important; padding:8px 10px!important; scrollbar-width:thin; }
#costUsageApp .ce-filter-section .form-check { margin-bottom:7px; font-size:12px; }
#costUsageApp .ce-filter-section .form-check:last-child { margin-bottom:0; }
#costUsageApp .ce-agent-heading { gap:10px; flex-wrap:wrap; }
#costUsageApp .ce-agent-heading .form-switch { margin-bottom:0; }
#costUsageApp .ce-agent-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
#costUsageApp .ce-agent-controls > .input-group-text { display:none; }
#costUsageApp .ce-agent-controls > :is(.form-select,.dui-select) { width:100%!important; min-width:0; grid-column:1 / -1; border-radius:8px!important; }
#costUsageApp .ce-agent-controls > .btn { width:100%; min-width:0; border-radius:7px!important; margin:0!important; font-size:11px; }
#costUsageApp #agentList { border:0; border-radius:8px; scrollbar-width:thin; }
#costUsageApp .agent-item { display:flex; align-items:center; justify-content:flex-start; gap:8px; }
#costUsageApp .agent-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#costUsageApp .list-group-sm .list-group-item { padding:9px 10px; border-color:var(--ce-border); background:var(--ce-surface); color:var(--ce-text); font-size:12px; }
#costUsageApp .list-group-sm .list-group-item:hover { background:var(--ce-hover); }
#costUsageApp #groupBySection .form-check { display:inline-flex; align-items:center; gap:7px; padding:6px 9px; margin:0 4px 6px 0; border:0; border-radius:7px; }
#costUsageApp #groupBySection .form-check .form-check-input { position:static; float:none; margin:0; }
#costUsageApp #groupBySection .form-check:has(:checked) { background:var(--ce-surface2); border-color:var(--dt-border-strong,var(--ce-border)); }
@media(max-width:1100px) {
    #costUsageApp .ce-layout { grid-template-columns:minmax(0,1fr); gap:20px; }
    #costUsageApp .ce-sidebar { grid-row:1; }
    #costUsageApp .ce-parameters { position:static; max-height:none; overflow:visible; }
    #costUsageApp .ce-parameters > .card-header { position:static; }
    #costUsageApp .ce-parameter-body { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 22px; }
    #costUsageApp .ce-filter-section { margin:0!important; padding-bottom:16px; }
    #costUsageApp #serviceList { max-height:180px!important; }
}
@media(max-width:640px) {
    #costUsageApp { padding:16px!important; }
    #costUsageApp .ce-header { gap:12px; padding-bottom:16px; margin-bottom:16px!important; }
    #costUsageApp .ce-header h4 { font-size:21px; }
    #costUsageApp .ce-summary-grid { grid-template-columns:minmax(0,1fr); gap:9px; }
    #costUsageApp .summary-card { min-height:0; padding:15px; gap:7px; }
    #costUsageApp .ce-summary-secondary .summary-card { min-height:0; padding:14px 15px; }
    #costUsageApp .ce-parameter-body { grid-template-columns:minmax(0,1fr); gap:16px; }
    #costUsageApp .card-header, #costUsageApp .card-body { padding:15px; }
    #costUsageApp .ce-chart-card .btn-group { width:100%; }
    #costUsageApp .ce-chart-card .btn-group .btn { flex:1; }
}

}
/* end dui-template-style modules/costexplorer:0 */
/* dui-template-style {"key":"modules/costexplorer-calls:0","bytes":17437,"sha256":"111d88c35061a23ff315338057c42f4bfbe18770e96a871cfa227decc12bfd6f","media":null,"source_sha256":"af323d47ef40ca8936094ff4cb6008a0e483eccb4e6001e8e9145025f2cac389"} */
@scope (:root:has(template[data-dui-legacy-style="modules/costexplorer-calls:0"])) {

/* Presentation only: original filters, table data and export handlers stay unchanged. */
#callDetailsApp {
    --cd-surface:var(--dt-surface,#fff); --cd-app:var(--dt-app,#f7f7f6); --cd-soft:var(--dt-surface-2,#eeeeec);
    --cd-text:var(--dt-text,#111110); --cd-muted:var(--dt-muted,#5f5f5c); --cd-faint:var(--dt-faint,#72726e);
    --cd-border:var(--dt-border,rgba(15,15,15,.10)); --cd-strong:var(--dt-border-strong,rgba(12, 10, 9, .09));
    --cd-hover:var(--dt-hover,#f4f4f3); --cd-active:var(--dt-active,#efefee);
    --cd-positive:#16835b; --cd-negative:#bc4242; --cd-warning:var(--dt-warning);
    container:call-details / inline-size; padding:20px 0 28px!important; min-width:0;
    color:var(--cd-text); font-family:var(--font-sans,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif); font-size:13px;
}
:scope[data-bs-theme="dark"] #callDetailsApp { --cd-positive:#65c9a0; --cd-negative:#ed9292; --cd-warning:var(--dt-warning); }
#callDetailsApp .u-hidden { display:none!important; }
#callDetailsApp .cd-layout { display:grid; grid-template-columns:minmax(0,1fr) 286px; grid-template-areas:"head head" "kpis filters" "chart filters" "records filters";
    align-items:start; gap:20px; margin:0; --bs-gutter-x:0; --bs-gutter-y:0; }
#callDetailsApp .cd-layout > *,#callDetailsApp .cd-main > * { min-width:0; }
#callDetailsApp .cd-main { display:contents; }
#callDetailsApp .cd-header { grid-area:head; gap:20px; margin:0!important; padding:0 0 2px; flex-wrap:wrap; }
#callDetailsApp .cd-header > div:first-child { min-width:0; }
#callDetailsApp .cd-header h4 { font-size:22px; font-weight:650; line-height:1.25; letter-spacing:-.025em; color:var(--cd-text); }
#callDetailsApp #cdSubtitle { display:block; margin-top:6px; color:var(--cd-muted)!important; font-size:12.5px; line-height:1.45; }
#callDetailsApp .cd-header-actions { flex-wrap:wrap; align-items:center; gap:8px!important; }
#callDetailsApp .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:34px; padding:6px 11px;
    border:0; border-radius:8px; background:var(--cd-surface); color:var(--cd-text); font-size:12px; line-height:1.4; font-weight:500; box-shadow:none; }
#callDetailsApp .btn:hover:not(:disabled) { background:var(--cd-hover); border-color:var(--cd-strong); color:var(--cd-text); }
#callDetailsApp .btn:disabled { opacity:.42; cursor:default; }
#callDetailsApp .btn .ti { font-size:16px; }
#callDetailsApp #cdBtnApply { background:var(--cd-text); border-color:var(--cd-text); color:var(--cd-surface); min-width:88px; }
#callDetailsApp #cdBtnApply:hover { background:color-mix(in srgb,var(--cd-text) 86%,var(--cd-surface)); color:var(--cd-surface); }
#callDetailsApp :is(button,a,input,select,.cd-table-scroll):focus-visible { outline:2px solid var(--cd-muted); outline-offset:3px; }
#callDetailsApp .cd-kpis { grid-area:kpis; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0!important; --bs-gutter-x:0; --bs-gutter-y:0; }
#callDetailsApp .cd-kpi-slot { grid-area:auto!important; width:auto; margin:0; padding:0; }
#callDetailsApp .card { border:0!important; border-radius:12px; background:var(--cd-surface); box-shadow:none!important; color:var(--cd-text); }
#callDetailsApp .cd-kpi .card-body { display:grid; grid-template-columns:minmax(0,1fr) 30px; grid-template-areas:"label icon" "value value"; gap:13px 8px; padding:16px!important; text-align:left!important; }
#callDetailsApp .cd-kpi .card-body > div:first-child { grid-area:icon; display:grid; place-items:center; width:30px; height:30px; margin:0!important;
    border:0; border-radius:8px; background:var(--cd-app); color:var(--cd-muted)!important; }
#callDetailsApp .cd-kpi .card-body > div:first-child .ti { font-size:17px!important; }
#callDetailsApp .cd-kpi .card-body > div:nth-child(2) { grid-area:value; font-size:clamp(21px,2cqi,28px)!important; font-weight:600!important;
    line-height:1.2; letter-spacing:-.035em; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--cd-text); }
#callDetailsApp .cd-kpi .card-body > div:last-child { grid-area:label; align-self:center; color:var(--cd-muted)!important; font-size:12px; font-weight:500; line-height:1.4; }
#callDetailsApp .cd-chart { grid-area:chart; min-width:0; overflow:hidden; }
#callDetailsApp .cd-chart h3 { margin:0; font-size:13px; font-weight:600; color:var(--cd-text); }
#callDetailsApp .cd-chart .card-header p { margin:5px 0 0; font-size:11.5px; color:var(--cd-muted); }
#callDetailsApp .cd-chart .card-body { padding:20px 24px; }
#callDetailsApp .cd-chart [hidden] { display:none!important; }
#callDetailsApp #cdChartState { display:grid; place-items:center; min-height:174px; color:var(--cd-muted); text-align:center; font-size:12px; line-height:1.6; }
#callDetailsApp .cd-chart-content { display:flex; align-items:center; justify-content:center; gap:clamp(24px,5cqi,64px); min-height:174px; }
#callDetailsApp .cd-call-ring { position:relative; display:grid; place-items:center; flex:0 0 174px; width:174px; height:174px; border-radius:50%;
    background:conic-gradient(var(--cd-positive) 0 var(--cd-chart-a,0%),var(--cd-negative) var(--cd-chart-a,0%) var(--cd-chart-known,0%),var(--cd-faint) var(--cd-chart-known,0%) 100%); }
#callDetailsApp .cd-ring-center { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:138px; height:138px; border-radius:50%; background:var(--cd-surface); }
#callDetailsApp .cd-ring-center strong { font-size:28px; line-height:1.15; letter-spacing:-.035em; font-weight:600; font-variant-numeric:tabular-nums; color:var(--cd-text); }
#callDetailsApp .cd-ring-center span { color:var(--cd-muted); font-size:11px; }
#callDetailsApp .cd-chart-legend { flex:1 1 230px; max-width:360px; margin:0; min-width:0; }
#callDetailsApp .cd-chart-legend > div { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:13px 0; border-bottom:1px solid var(--cd-border); }
#callDetailsApp .cd-chart-legend > div:last-child { border-bottom:0; }
#callDetailsApp .cd-chart-legend dt { display:flex; align-items:center; gap:9px; color:var(--cd-muted); font-size:12px; font-weight:400; }
#callDetailsApp .cd-chart-legend dd { display:flex; align-items:baseline; gap:12px; margin:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
#callDetailsApp .cd-chart-legend dd strong { color:var(--cd-text); font-size:15px; font-weight:600; }
#callDetailsApp .cd-chart-legend dd span { min-width:40px; color:var(--cd-muted); font-size:11px; text-align:right; }
#callDetailsApp .cd-chart-dot { width:8px; height:8px; border-radius:50%; flex:none; }
#callDetailsApp .cd-dot-answered { background:var(--cd-positive); } #callDetailsApp .cd-dot-unanswered { background:var(--cd-negative); } #callDetailsApp .cd-dot-unknown { background:var(--cd-faint); }
@container call-details (max-width:520px) { #callDetailsApp .cd-chart-content { flex-direction:column; gap:12px; } #callDetailsApp .cd-chart-legend { width:100%; flex:auto; } }
#callDetailsApp .cd-records { grid-area:records; overflow:hidden; }
#callDetailsApp .card-header,#callDetailsApp .card-footer { border-color:var(--cd-border); background:var(--cd-surface)!important; padding:15px 16px!important; gap:12px; }
#callDetailsApp .card-header { border-radius:12px 12px 0 0; }
#callDetailsApp .card-header strong { font-size:13px; font-weight:600; color:var(--cd-text); }
#callDetailsApp .cd-records > .card-header { flex-wrap:wrap; }
#callDetailsApp #cdTableTitle { min-width:0; }
#callDetailsApp #cdPagination { flex-wrap:wrap; justify-content:flex-end; margin-left:auto; gap:6px!important; }
#callDetailsApp #cdPageInfo { padding-inline:4px; color:var(--cd-muted)!important; font-size:11.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
#callDetailsApp :is(#btnPrev,#btnNext) { width:30px; min-height:30px; padding:0; }
#callDetailsApp #cdPageSize { min-height:30px!important; width:65px!important; height:30px; padding:3px 24px 3px 8px!important; font-size:11.5px; }
#callDetailsApp .cd-table-scroll { min-height:250px; max-height:min(68vh,720px); overflow:auto; scrollbar-width:thin; scrollbar-color:var(--cd-strong) transparent; }
#callDetailsApp #cdTable { min-width:890px; --bs-table-bg:transparent; --bs-table-color:var(--cd-text); --bs-table-border-color:var(--cd-border);
    --bs-table-hover-bg:var(--cd-hover); --bs-table-hover-color:var(--cd-text); color:var(--cd-text); }
#callDetailsApp #cdTable thead th { position:sticky; top:0; z-index:1; padding:11px 12px; border-bottom:1px solid var(--cd-border);
    background:var(--cd-app)!important; color:var(--cd-muted); font-size:11.5px; font-weight:600; letter-spacing:0; text-transform:none; white-space:nowrap; }
#callDetailsApp #cdTable tbody td { padding:12px; vertical-align:middle; border-bottom:1px solid var(--cd-border); color:var(--cd-text); font-size:12px; line-height:1.5; }
#callDetailsApp #cdTable tbody tr:last-child td { border-bottom:0; }
#callDetailsApp #cdTable tbody tr:hover { background:var(--cd-hover); }
#callDetailsApp #cdTable tbody td:nth-child(3),#callDetailsApp #cdTable tbody td:nth-child(4),#callDetailsApp #cdTable tbody td:nth-child(6) { font-variant-numeric:tabular-nums; white-space:nowrap; }
#callDetailsApp #cdTable tbody td:nth-child(8),#callDetailsApp #cdTable tbody td:nth-child(9) { min-width:100px; max-width:190px; overflow-wrap:anywhere; }
#callDetailsApp #cdTable tbody td[colspan] { min-width:0; max-width:none; padding:48px 24px!important; color:var(--cd-muted); font-size:13px; }
#callDetailsApp .cd-records > .card-footer { flex-wrap:wrap; border-top:1px solid var(--cd-border); border-radius:0 0 12px 12px; }
#callDetailsApp #cdFooterInfo { color:var(--cd-muted)!important; font-size:11.5px; line-height:1.4; }
#callDetailsApp .cd-records > .card-footer > div { margin-left:auto; }
#callDetailsApp .cd-filters { grid-area:filters; width:auto; padding:0; }
#callDetailsApp .cd-filter-card > .card-header { min-height:65px; }
#callDetailsApp .cd-filter-fields { padding:16px; }
#callDetailsApp .cd-filter-fields > .mb-3 { margin-bottom:18px!important; padding-bottom:18px; border-bottom:1px solid var(--cd-border); }
#callDetailsApp .cd-filter-fields > .mb-3:last-child { padding-bottom:0; margin-bottom:0!important; border-bottom:0; }
#callDetailsApp .cd-filter-fields h6 { margin:0 0 9px!important; font-size:12px; font-weight:600; color:var(--cd-text); letter-spacing:0; }
#callDetailsApp .form-label { margin-bottom:6px!important; font-size:11px; font-weight:500; color:var(--cd-muted); }
#callDetailsApp .form-control,#callDetailsApp .form-select { min-height:36px; padding:7px 10px; border:0!important; border-radius:8px!important;
    background-color:var(--cd-surface)!important; color:var(--cd-text)!important; font-size:12px; line-height:1.4; box-shadow:none!important; }
#callDetailsApp .form-select { padding-right:30px; }
#callDetailsApp .form-control::placeholder { color:var(--cd-faint); opacity:1; }
#callDetailsApp #cdBtnDatePreset { min-height:36px; font-size:12px; }
#callDetailsApp .dropdown-menu { min-width:260px!important; padding:6px!important; border:0; border-radius:10px; background:var(--cd-surface); box-shadow:none; }
#callDetailsApp .dropdown-item { padding:8px 10px; border-radius:6px; color:var(--cd-text); font-size:12px; }
#callDetailsApp .dropdown-item:hover,#callDetailsApp .dropdown-item:focus { background:var(--cd-active); color:var(--cd-text); }
#callDetailsApp #cdCustomRange { padding:12px 4px 4px; }
#callDetailsApp #cdServiceList,#callDetailsApp #cdAgentList { padding:5px!important; max-height:210px!important; border:0!important; border-radius:8px!important;
    background:var(--cd-app); scrollbar-width:thin; scrollbar-color:var(--cd-strong) transparent; }
#callDetailsApp #cdAgentList { max-height:180px!important; }
#callDetailsApp #cdServiceList label,#callDetailsApp #cdAgentList label { min-height:32px; margin:0; padding:7px 8px!important; gap:8px!important; border-radius:5px; cursor:pointer;
    color:var(--cd-text); font-size:11.5px; line-height:1.4; }
#callDetailsApp #cdServiceList label:hover,#callDetailsApp #cdAgentList label:hover { background:var(--cd-hover); }
#callDetailsApp #cdServiceList label:has(input:checked),#callDetailsApp #cdAgentList label:has(input:checked) { background:var(--cd-active); }
#callDetailsApp .form-check-input { flex:none; width:15px; height:15px; margin:0; border-color:var(--cd-strong); box-shadow:none; accent-color:var(--cd-text); }
#callDetailsApp .form-check-input:checked { background-color:var(--cd-text)!important; border-color:var(--cd-text)!important; }
#callDetailsApp .form-check-input:checked { --bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m5 10 3 3 7-7'/%3e%3c/svg%3e"); }
:scope[data-bs-theme="dark"] #callDetailsApp .form-check-input:checked { filter:none; background-color:var(--dt-app)!important; border-color:#c9c9c5!important;
    --bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23202020' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m5 10 3 3 7-7'/%3e%3c/svg%3e"); }
#callDetailsApp .cd-filter-fields .btn-link { min-height:27px; padding:3px 4px!important; border:0; background:transparent; color:var(--cd-muted); font-size:11px; font-weight:500; }
#callDetailsApp .cd-filter-fields .btn-link:hover { color:var(--cd-text); background:var(--cd-hover); }
#callDetailsApp .cd-phone-search { display:flex; align-items:center; gap:8px; min-height:36px; padding:0 10px; border:0; border-radius:8px; background:var(--cd-surface); }
#callDetailsApp .cd-phone-search > .ti { flex:none; color:var(--cd-faint); font-size:15px; }
#callDetailsApp .cd-phone-search #cdPhoneSearch { min-width:0; min-height:34px; height:34px; margin:0; padding:0!important; border:0!important; background:transparent!important; outline:0!important; box-shadow:none!important; }
#callDetailsApp .cd-phone-search:focus-within { border-color:var(--cd-muted); }
#callDetailsApp .cd-badge,#callDetailsApp .cd-type-badge { display:inline-flex; align-items:center; min-height:23px; padding:3px 7px; border-radius:6px; font-size:10.5px; font-weight:500; line-height:1.3; white-space:nowrap; text-transform:none; }
#callDetailsApp .cd-badge-answer { color:var(--cd-positive); background:color-mix(in srgb,var(--cd-positive) 10%,transparent); }
#callDetailsApp .cd-badge-noanswer { color:var(--cd-negative); background:color-mix(in srgb,var(--cd-negative) 10%,transparent); }
#callDetailsApp .cd-badge-busy { color:var(--cd-warning); background:color-mix(in srgb,var(--cd-warning) 11%,transparent); }
#callDetailsApp .cd-badge-cancel,#callDetailsApp .cd-badge-unknown,#callDetailsApp .cd-type-badge { color:var(--cd-muted); background:var(--cd-active); }
@container call-details (max-width:1000px) {
    #callDetailsApp .cd-layout { grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "kpis" "chart" "filters" "records"; gap:16px; }
    #callDetailsApp .cd-filter-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
    #callDetailsApp .cd-filter-fields > .mb-3 { margin:0!important; padding:0; border-bottom:0; }
    #callDetailsApp .cd-filter-fields > .mb-3:last-child { grid-column:1 / -1; }
    #callDetailsApp #cdServiceList,#callDetailsApp #cdAgentList { max-height:154px!important; }
}
@container call-details (max-width:720px) {
    #callDetailsApp .cd-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    #callDetailsApp .cd-filter-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
    #callDetailsApp .cd-header { gap:14px; }
    #callDetailsApp .cd-header-actions { width:100%; }
    #callDetailsApp .cd-header-actions .btn { flex:1 1 auto; }
    #callDetailsApp .cd-header h4 { font-size:20px; }
    #callDetailsApp .cd-kpi .card-body { padding:14px!important; gap:10px 8px; }
    #callDetailsApp .cd-kpi .card-body > div:nth-child(2) { font-size:25px!important; }
    #callDetailsApp .cd-table-scroll { max-height:65vh; }
    #callDetailsApp .cd-records > .card-header { align-items:flex-start!important; flex-direction:column; }
    #callDetailsApp #cdPagination { width:100%; justify-content:space-between; margin-left:0; }
}
@container call-details (max-width:450px) {
    #callDetailsApp .cd-filter-fields { grid-template-columns:minmax(0,1fr); }
    #callDetailsApp .cd-filter-fields > .mb-3:last-child { grid-column:auto; }
    #callDetailsApp .card-header,#callDetailsApp .card-footer { padding:13px!important; }
    #callDetailsApp .cd-header-actions .btn { font-size:11.5px; padding-inline:8px; }
}
@media (prefers-reduced-motion:reduce) { #callDetailsApp * { scroll-behavior:auto!important; } }
.body-wrapper #akicontenidonormal:has(#callDetailsApp) { width:100%!important; max-width:1400px!important; margin-inline:auto!important; padding-inline:16px!important; box-sizing:border-box; }
#callDetailsApp { padding-inline:0; min-width:0; }
@media(max-width:767px){ .body-wrapper #akicontenidonormal:has(#callDetailsApp) { padding-inline:8px!important; } }
#callDetailsApp .cd-kpi.card { background:var(--el-card-stone,var(--cd-soft))!important; border-radius:16px!important; }
#callDetailsApp .btn { border-radius:9999px; }

}
/* end dui-template-style modules/costexplorer-calls:0 */
/* dui-template-style {"key":"modules/drive:0","bytes":21034,"sha256":"8d451560df6d4a3a094cf62af06da5eaf128bb9a32b1c7d68b17b264bafc223d","media":null,"source_sha256":"72c710fed3ece95c08d16a09943ccec49e6dee80962f2c59b259994306a83b5c"} */
@scope (:root:has(template[data-dui-legacy-style="modules/drive:0"])) {

.drive-module {
  width: 100%;
  min-height: 100%;
  padding: 20px 24px 32px;
}
.drive-shell {
  width: min(100%, 1480px);
  margin: 0 auto;
}
.drive-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border: 0;
  border-radius: 16px;
  background: var(--dt-surface);
  box-shadow: none;
}
.drive-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.drive-heading__icon {
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  color: var(--dt-cta);
  background: rgba(var(--dt-cta-rgb), .12);
}
.drive-heading__icon .ti {
  font-size: 27px;
}
.drive-heading h1 {
  margin: 0;
  color: var(--dt-text);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.15;
}
.drive-heading p {
  margin: 5px 0 0;
  color: var(--dt-muted);
  font-size: .9rem;
}
.drive-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.drive-toolbar .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  margin: 0;
  white-space: nowrap;
}
.drive-toolbar .ti {
  font-size: 18px;
}
.drive-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 54px;
  padding: 8px 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.drive_route {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  max-width: 260px;
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  color: var(--dt-muted);
  background: transparent;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}
.drive_route > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drive_route:hover {
  color: var(--dt-text);
  background: var(--dt-hover);
}
.drive-route-separator {
  display: inline-grid;
  flex: 0 0 22px;
  width: 22px;
  place-items: center;
  color: var(--dt-faint);
  font-size: 15px;
}
.drivestrong {
  color: var(--dt-text);
  font-weight: 700;
  cursor: default;
}
.drivestrong:hover {
  background: transparent;
}
.drive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(154px, 1fr));
  gap: 14px;
  min-height: 220px;
}
.drive_block {
  position: relative;
  display: flex;
  min-width: 0;
  height: 180px;
  margin: 0;
  padding: 16px 12px 13px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  color: var(--dt-text);
  background: var(--dt-surface);
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.drive_block:hover,
.drive_block:focus-visible {
  z-index: 1;
  border-color: var(--dt-border-strong);
  background: color-mix(in srgb, var(--dt-surface) 92%, var(--dt-hover));
  box-shadow: none;
  outline: none;
  transform: none;
}
.drive_blockcheck,
.drive_blockcheck:hover {
  border-color: var(--dt-cta);
  background: rgba(var(--dt-cta-rgb), .08);
  box-shadow: none;
}
.driveinputlabel {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  display: grid;
  width: 25px;
  height: 25px;
  margin: 0;
  padding: 0;
  place-items: center;
  border-radius: 8px;
  background: var(--dt-surface);
  box-shadow: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease;
}
.drive_block:hover > .driveinputlabel,
.drive_block:focus-within > .driveinputlabel,
.drive_blockcheck > .driveinputlabel {
  opacity: 1;
}
.driveinputsel {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--dt-cta);
  cursor: pointer;
}
.drive-shared-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  color: var(--dt-link);
  background: rgba(var(--dt-link-rgb), .10);
}
.drive-folder-visual,
.drive-file-visual {
  position: relative;
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  border-radius: 18px;
}
.drive-folder-visual {
  color: #c87900;
  background: rgba(245, 158, 11, .14);
}
.drive-folder-visual .ti {
  font-size: 46px;
}
.drive-file-visual {
  color: var(--dt-muted);
  background: var(--dt-surface-2);
}
.drive-file-visual .ti {
  font-size: 40px;
}
.drive-file-visual span {
  position: absolute;
  right: 6px;
  bottom: 6px;
  max-width: 58px;
  padding: 2px 5px;
  overflow: hidden;
  border-radius: 5px;
  color: var(--dt-text);
  background: var(--dt-surface);
  font-size: .58rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
}
.drive-file-visual--jpg,
.drive-file-visual--image {
  color: #8b5cf6;
  background: rgba(139, 92, 246, .13);
}
.drive-file-visual--jpg span,
.drive-file-visual--image span {
  background: #7c3aed;
}
.drive-file-visual--pdf {
  color: #dc2626;
  background: rgba(220, 38, 38, .11);
}
.drive-file-visual--pdf span {
  background: #dc2626;
}
.drive-file-visual--sheet {
  color: #16803c;
  background: rgba(22, 128, 60, .12);
}
.drive-file-visual--sheet span {
  background: #16803c;
}
.drive-file-visual--document {
  color: #2563eb;
  background: rgba(37, 99, 235, .12);
}
.drive-file-visual--document span {
  background: #2563eb;
}
.drive-file-visual--archive {
  color: #9a6700;
  background: rgba(202, 138, 4, .13);
}
.drive-file-visual--archive span {
  background: #9a6700;
}
.drive-file-visual--media {
  color: #db2777;
  background: rgba(219, 39, 119, .11);
}
.drive-file-visual--media span {
  background: #be185d;
}
.drivecambiaNAME {
  width: 100%;
  margin-top: 12px;
  color: var(--dt-text);
  font-size: .86rem;
  font-weight: 650;
  line-height: 1.25;
  word-break: break-word;
}
.drivecambiaNAME.marcnowrap2 {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.driveeseditinput {
  position: relative;
  z-index: 4;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}
.driveeseditinput input {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  color: var(--dt-text);
  background: var(--dt-surface);
}
.drive-empty {
  display: flex;
  grid-column: 1 / -1;
  min-height: 280px;
  padding: 34px 20px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px dashed var(--dt-border-strong);
  border-radius: 16px;
  color: var(--dt-muted);
  background: color-mix(in srgb, var(--dt-surface) 82%, transparent);
  text-align: center;
}
.drive-empty__icon {
  display: grid;
  width: 72px;
  height: 72px;
  margin-bottom: 17px;
  place-items: center;
  border-radius: 22px;
  color: var(--dt-cta);
  background: rgba(var(--dt-cta-rgb), .10);
}
.drive-empty__icon .ti {
  font-size: 37px;
}
.drive-empty h2 {
  margin: 0;
  color: var(--dt-text);
  font-size: 1.1rem;
}
.drive-empty p {
  max-width: 560px;
  margin: 8px 0 0;
  font-size: .9rem;
}
.drive-loading {
  display: flex;
  grid-column: 1 / -1;
  min-height: 220px;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.drive-loading span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dt-cta);
  animation: dui-legacy-modules-drive-drive-loading-pulse .9s infinite alternate;
}
.drive-loading span:nth-child(2) { animation-delay: .15s; }
.drive-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes dui-legacy-modules-drive-drive-loading-pulse {
  to { opacity: .25; transform: translateY(-5px); }
}
#dropzonediv.dz-drag-hover .drive-shell {
  outline: 3px solid rgba(var(--dt-cta-rgb), .24);
  outline-offset: 4px;
  border-radius: 18px;
}
.dz-preview {
  display: none;
}
@media (max-width: 767.98px) {
  .drive-module {
    padding: 12px 12px 24px;
  }
  .drive-header {
    align-items: stretch;
    padding: 16px;
    flex-direction: column;
  }
  .drive-toolbar {
    justify-content: stretch;
  }
  .drive-toolbar .btn {
    flex: 1 1 calc(50% - 4px);
  }
  .drive-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
  }
  .drive_block {
    height: 166px;
  }
}
@media (max-width: 420px) {
  .drive-heading p {
    display: none;
  }
  .drive-toolbar .btn {
    flex-basis: 100%;
  }
}

/* Diseño clásico de Drive */
.driveinputsel{
height:20px;
width:20px;
}
.driveinputlabel{
position:static;
display:block;
height:auto;
text-align:right;
width:calc(100% + 40px);
float:right;
visibility:hidden;
opacity:1;
padding:10px;
cursor:default;
margin-right:-19px;
margin-top:-9px;
border-radius:0;
background:transparent;
box-shadow:none;
}
.drive_block{
user-select:none;
display:inline-block;
margin:10px;
padding-left:20px;
padding-right:20px;
padding-bottom:20px;
padding-top:10px;
text-align:center;
width:160px;
min-width:0;
height:200px;
overflow:hidden;
cursor:pointer;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
transform:none;
transition:none;
}
.drive_block img{
width:90%;
}
.drive_block img.drive-personal-folder{
filter:hue-rotate(165deg) saturate(1.15);
}
.driveinputlabel.driveinputlabel--placeholder,
.drive_block:hover>.driveinputlabel.driveinputlabel--placeholder{
visibility:hidden;
pointer-events:none;
}
.drive_block:hover,
.drive_block:focus-visible{
background:var(--hover-color);
border:0;
box-shadow:none;
transform:none;
}
.drive_blockcheck,
.drive_blockcheck:hover{
background:var(--hover-color);
border:0;
box-shadow:none;
}
.drive_block:hover>.driveinputlabel,
.drive_block:focus-within>.driveinputlabel,
.drive_blockcheck>.driveinputlabel{
visibility:visible;
opacity:1;
}
#dropzonediv{
width:100%;
min-height:100%;
padding:0;
}
.drive_route{
padding:10px;
display:inline-block;
max-width:none;
cursor:pointer;
margin-right:20px;
border-radius:0;
color:inherit;
font-size:18px;
}
.drive_route:hover{
background:var(--hover-color);
}
.derecdrive{
position:absolute;
margin-left:-18px;
margin-top:11px;
}
#akidriveroute{
padding-bottom:20px;
padding-top:20px;
}
.drivestrong{
font-weight:bold;
cursor:default;
}
.drivestrong:hover{
background:transparent;
}
.drivecambiaNAME{
margin-top:0;
color:inherit;
font-size:inherit;
font-weight:normal;
line-height:normal;
}

/* ═══════════ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══════════
   Bloque añadido al final: solo color, borde, sombra, radio y peso; ningún id/clase que lea el JS cambia. */
/* ═══════════ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══════════
   Tercera capa, al final del <style>: gana por especificidad (ids propios del módulo) a la capa de tokens de arriba (muerta en
   su mayor parte: el JS nunca emite .drive-*) y al "Diseño clásico" (.drive_block/.drive_route). Solo color, borde, sombra,
   radio, espaciado y peso: ningún id, clase ni atributo que lea el JS cambia (.drive_block, .drive_blockcheck, .drivestrong,
   .driveinputlabel(--placeholder), .driveinputsel, .drivearchies/.drivefolders, [data-drivenum], .drivecambiaNAME,
   .driveeseditinput, .badge.text-bg-*). La casilla sigue mostrándose por visibility (clásico) y el --placeholder sigue oculto.
   Referencia: modules/control-phonenumbers.html (.pn-btn, .pn-status-badge, .pn-empty-ic). */
#dropzonediv{font-variant-numeric:tabular-nums}
#dropzonediv > br{display:none}

/* cabecera: título 20/600 junto al selector de sección */
#dropzonediv .module__header{display:flex;align-items:center;gap:12px;padding:18px 24px 10px}
#dropzonediv .module__header-title{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--dt-text)}

/* toolbar: ghost de 34 px con icono (el top:-5px inline del .btn__icon deja de contar al ser static), Subir = único CTA en
   tinta, Borrar con el icono en rojo (y el texto solo al pasar). .u-hidden sigue ganando (display:none !important). */
#akibotonesdrive{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:4px 24px 14px}
#akibotonesdrive .btn{display:inline-flex;align-items:center;gap:7px;height:34px;min-height:34px;margin:0;padding:0 13px;border:0;border-radius:var(--dt-radius);background:transparent;color:var(--dt-text);font-size:13px;font-weight:600;line-height:1;white-space:nowrap;transition:background-color .12s,border-color .12s,color .12s}
#akibotonesdrive .btn:hover{background:var(--dt-hover);border-color:var(--dt-border-strong);color:var(--dt-text)}
#akibotonesdrive .btn:focus-visible{outline:2px solid var(--dt-focus);outline-offset:2px}
#akibotonesdrive .btn .btn__icon{position:static;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:var(--dt-muted)}
#akibotonesdrive .btn:hover .btn__icon{color:var(--dt-text)}
#akibotonesdrive .btn .btn__icon svg{width:16px;height:16px}
#akibotonesdrive #adduploaddrivenow{background:var(--dt-cta);border-color:var(--dt-cta);color:var(--dt-cta-fg)}
#akibotonesdrive #adduploaddrivenow:hover{background:var(--dt-cta-hover);border-color:var(--dt-cta-hover);color:var(--dt-cta-fg)}
#akibotonesdrive #adduploaddrivenow .btn__icon,#akibotonesdrive #adduploaddrivenow:hover .btn__icon{color:var(--dt-cta-fg)}
#akibotonesdrive #deletedrivenow .btn__icon,#akibotonesdrive #deletedrivenow:hover .btn__icon{color:var(--dt-danger)}
#akibotonesdrive #deletedrivenow:hover{color:var(--dt-danger)}

/* ruta: migas de 13 px, actual en tinta 600, separador = glifo tabler en gris tenue (las flechas PNG .derecdrive se ocultan) */
#akidriveroute{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:0 24px 12px;min-height:0}
#akidriveroute:empty{padding-bottom:4px}
#akidriveroute .drive_route{position:relative;display:inline-block;height:28px;max-width:none;margin:0;padding:0 8px;border-radius:7px;background:transparent;color:var(--dt-muted);font-size:13px;font-weight:500;line-height:28px;white-space:nowrap;cursor:pointer;transition:background-color .12s,color .12s}
#akidriveroute .drive_route:not(.drivestrong){margin-right:20px}
#akidriveroute .drive_route:not(.drivestrong)::after{content:"\ea61";position:absolute;top:0;right:-17px;width:14px;height:28px;font-family:tabler-icons;font-size:12px;line-height:28px;text-align:center;color:var(--dt-faint);pointer-events:none}
#akidriveroute .drive_route:hover{background:var(--dt-hover);color:var(--dt-text)}
#akidriveroute .drivestrong,#akidriveroute .drivestrong:hover{background:transparent;color:var(--dt-text);font-weight:600;cursor:default}
#akidriveroute .derecdrive{display:none}

/* rejilla de tarjetas con línea fina: hover gris, seleccionada (.drive_blockcheck, la pone el JS) = gris activo + borde en tinta */
#akidriveblocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:0 24px 28px}
#akidriveblocks .drive_block{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:auto;min-width:0;height:auto;min-height:168px;margin:0;padding:34px 12px 14px;border:0;border-radius:var(--dt-radius-lg);background:var(--dt-surface);color:var(--dt-text);text-align:center;overflow:hidden;cursor:pointer;transition:background-color .12s,border-color .12s}
#akidriveblocks .drive_block > br{display:none}
#akidriveblocks .drive_block:hover{background:var(--dt-hover);border:0}
#akidriveblocks .drive_block:focus-visible{outline:2px solid var(--dt-focus);outline-offset:2px;background:var(--dt-hover);border:1px solid var(--dt-border-strong)}
#akidriveblocks .drive_blockcheck,#akidriveblocks .drive_blockcheck:hover{background:var(--dt-active);border:0}

/* icono de carpeta/formato: el PNG de color se vuelve neutro (grayscale) dentro de un cuadrado gris con línea fina;
   la carpeta personal pierde el hue-rotate */
#akidriveblocks .drive_block > img{display:block;flex:none;width:64px;height:64px;box-sizing:border-box;margin:0 0 12px;padding:14px;object-fit:contain;border:0;border-radius:14px;background:var(--dt-surface-2);filter:grayscale(1);opacity:.9;transition:opacity .12s}
#akidriveblocks .drive_block > img.drive-personal-folder{filter:grayscale(1)}
#akidriveblocks .drive_block:hover > img,#akidriveblocks .drive_blockcheck > img{opacity:1}

/* marcas de "compartida" (feather-share-2) y "personal" (feather-user): cuadrado neutro de 24 px arriba a la izquierda
   (el position:absolute inline no trae top/left; sin ellos caería al centro de la tarjeta flex) */
#akidriveblocks .drive_block > svg.feather{position:absolute;top:8px;left:8px;width:24px;height:24px;box-sizing:border-box;padding:5px;border:0;border-radius:7px;background:var(--dt-surface-2);color:var(--dt-muted);stroke-width:2}

/* casilla de selección arriba a la derecha (se sigue mostrando/ocultando por visibility con el clásico; el --placeholder
   de Personal Documents sigue hidden + pointer-events:none) */
#akidriveblocks .drive_block > .driveinputlabel{position:absolute;top:6px;right:6px;z-index:2;float:none;display:grid;place-items:center;width:28px;height:28px;margin:0;padding:0;border-radius:7px;background:transparent;box-shadow:none;text-align:center;cursor:pointer}
#akidriveblocks .drive_block > .driveinputlabel:hover{background:var(--dt-active)}
#akidriveblocks .driveinputsel{width:16px;height:16px;margin:0;accent-color:var(--dt-cta);cursor:pointer}

/* nombre 12.5/500 a dos líneas (.marcnowrap2 sigue recortando); renombrar = input de 28 px (fondo/borde los pone
   datalyse-theme.css con !important, se respetan) */
#akidriveblocks .drivecambiaNAME{width:100%;margin:0;color:var(--dt-text);font-size:12.5px;font-weight:500;line-height:1.3;word-break:break-word}
#akidriveblocks .driveeseditinput{z-index:4}
#akidriveblocks .driveeseditinput form{display:flex;align-items:center;justify-content:center;gap:2px;color:var(--dt-muted);font-size:12px}
#akidriveblocks .driveeseditinput input{height:28px;min-height:0;padding:0 8px;font:inherit;font-size:12.5px}

/* estado de firma (datasign): chip gris con punto de color, como .pn-status-badge/.pn-status-dot; el !important hace falta
   porque .text-bg-danger/.text-bg-success (v2datastrapp) pintan color y fondo con !important */
#akidriveblocks .drive_block .badge{display:inline-flex;align-items:center;gap:6px;height:22px;margin:8px 0 0;padding:0 9px 0 8px;border-radius:999px;font-size:11px;font-weight:600;line-height:1;white-space:nowrap;background:var(--dt-surface-2) !important;color:var(--dt-text) !important}
#akidriveblocks .drive_block .badge::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--dt-danger)}
#akidriveblocks .drive_block .badge.text-bg-success::before{background:var(--dt-success)}

/* vacío / bloqueada: caja punteada a todo el ancho (min-width gana al width:70% inline), icono en cuadrado neutro de 44 px
   (glifo tabler; la ilustración PNG folderempty.png se oculta), título 15/600 y texto 13 en gris */
#akidriveblocks .row{grid-column:1/-1;display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;min-width:100%;padding:56px 20px;border:1px dashed var(--dt-border-strong);border-radius:var(--dt-radius-lg);text-align:center}
#akidriveblocks .row .textdentrodestage{width:auto;max-width:460px;margin:0;padding:0}
#akidriveblocks .row .textdentrodestage h1{margin:0 0 4px;color:var(--dt-text);font-size:15px;font-weight:600;line-height:1.35}
#akidriveblocks .row .textdentrodestage h2{margin:0;color:var(--dt-muted);font-size:13px;font-weight:400;line-height:1.45}
#akidriveblocks .row .imagendentrodestage{display:grid;place-items:center;width:44px;height:44px;margin:0 0 14px;padding:0;border:1px solid var(--dt-border);border-radius:12px;background:var(--dt-surface-2);color:var(--dt-muted)}
#akidriveblocks .row .imagendentrodestage img{display:none}
#akidriveblocks .row .imagendentrodestage::before{content:"\eaad";font-family:tabler-icons;font-size:22px;line-height:1}

/* arrastrar ficheros encima (Dropzone pone .dz-drag-hover en #dropzonediv): marco punteado neutro, sin tinte */
#dropzonediv.dz-drag-hover{outline:2px dashed var(--dt-border-strong);outline-offset:-8px}

@media (max-width:767.98px){
  #dropzonediv .module__header{padding:14px 16px 8px}
  #akibotonesdrive{padding:4px 16px 12px}
  #akidriveroute{padding:0 16px 10px}
  #akidriveblocks{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;padding:0 16px 24px}
}

}
/* end dui-template-style modules/drive:0 */
/* dui-template-style {"key":"modules/hrattendance:0","bytes":20400,"sha256":"a419f7d4f6452d4e3db389cb834ef390d23a2a1eb8c83744367da454a9cebdbb","media":null,"source_sha256":"a419f7d4f6452d4e3db389cb834ef390d23a2a1eb8c83744367da454a9cebdbb"} */
@scope (:root:has(template[data-dui-legacy-style="modules/hrattendance:0"])) {

#akicontenidonormal[data-module="hrattendance"]{
display:flex;
flex-direction:column;
height:calc(100vh - var(--dt-topbar-h, 44px));
height:calc(100dvh - var(--dt-topbar-h, 44px));
min-height:0;
overflow:hidden;
}
#hrattendance-page{
display:flex;
flex:1 1 auto;
flex-direction:column;
min-height:0;
overflow:hidden;
}
#hrattendance-page > .card:not(#hrattendance-schedules-card),
#hrattendance-live-card{
flex:0 0 auto;
}
#hrattendance-page .hr-attendance-sticky{
position:static;
top:auto;
}
#hrattendance-schedules-card{
display:flex;
flex:1 1 auto;
flex-direction:column;
min-height:0;
margin-bottom:0;
overflow:hidden;
}
#hrattendance-schedules-card .card-header{
flex:0 0 auto;
}
#hrattendance-schedules-card .card-body{
display:flex;
flex:1 1 auto;
min-height:0;
overflow:hidden;
}
#hrattendance-schedules-scroll{
flex:1 1 auto;
width:100%;
min-height:0;
overflow:auto;
overscroll-behavior:contain;
scrollbar-gutter:stable;
}
#hrattendance-schedules-scroll table{
margin-bottom:0;
}
#hrattendance-schedules-scroll thead th{
position:sticky;
top:0;
z-index:2;
background:var(--dt-surface, var(--white-color, #fff)) !important;
}
#hrattendance-page .accordion-button{
width: 80px;
background: transparent;
box-shadow: none;
float: right;
outline: none;
transition: none;
color: #5e6e82;
}
#hrattendance-page .accordion-button:not(.collapsed){
width: 80px;
background: transparent;
box-shadow: none;
float: right;
outline: none;
transition: none;
color: #5e6e82;
}
#hrattendance-page .accordion-button:not(.collapsed)::after{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235e6e82'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}
#hrattendance-page .accordion-button:focus{
width: 80px;
background: transparent;
box-shadow: none;
float: right;
outline: none;
transition: none;
color: #5e6e82;
}

/* ═══════════ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══════════
   Bloque añadido al final: solo color, borde, sombra, radio y peso; ningún id/clase que lea el JS cambia. */
/* ═══════════ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══════════
   Bloque añadido al final del <style> del módulo: solo color, borde, sombra, radio, espaciado y peso; ningún id, clase ni
   atributo que lea el JS cambia (.calendar-back-btn/.calendar-forward-btn, .calendar-title__month/__year, a.accordion-button
   .collapsed, .multi-collapse/.collapse.show, [data-pondii*], [data-soyyyattendee], .dropdown-toggle/.dropdown-menu,
   .input-container input, .badge.bg-success, .badge.text-warning, .btn-falcon-default, .hr-attendance-live*).
   Ámbito: #hrattendance-page; el widget compartido HRAttendanceWidget se pisa SOLO bajo #hrattendance-live-card (la tarjeta
   del dashboard sigue con sus reglas de datalyse-modern.css). Tokens --dt-* (oscuro automático).
   Referencia: modules/control-phonenumbers.html (.pn-head, .pn-btn, .pn-table, .pn-status-badge). */

/* ── Cabecera: deja de ser tarjeta y pasa a encabezado de página (como .pn-head): título 20/600 + selector de empleado ── */
#hrattendance-page > .card:first-child {
    margin-bottom: 14px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}
#hrattendance-page > .card:first-child > .card-body { padding: 2px 0 0; }
#hrattendance-page > .card:first-child h3 {
    font-size: 20px; font-weight: 400; line-height: 1.25; letter-spacing: -.02em; color: var(--dt-text);
}
#hrattendance-page .hr-agent-filter__label { color: var(--dt-muted); font-size: 12px; font-weight: 600; }
#hrattendance-page .hr-agent-filter .dui-select__trigger { min-height: 34px; font-size: 13px; }

/* ── Navegación de mes "[‹] Oct 2026 [›]": las clases .calendar-title__* no tenían CSS en ninguna hoja (quedaban apiladas y
   centradas). display:contents en __top/__bottom + order intercala el año entre las flechas sin mover el DOM. ── */
#hrattendance-page .calendar-title {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; text-align: left;
}
#hrattendance-page .calendar-title__top,
#hrattendance-page .calendar-title__bottom { display: contents; }
#hrattendance-page .calendar-back-btn { order: 1; }
#hrattendance-page .calendar-title__month { order: 2; margin-left: 6px; text-transform: capitalize; }
#hrattendance-page .calendar-title__year { order: 3; margin-right: 6px; }
#hrattendance-page .calendar-title__fromto { order: 4; }
#hrattendance-page .calendar-forward-btn { order: 5; }
#hrattendance-page .calendar-title__month,
#hrattendance-page .calendar-title__year {
    color: var(--dt-text); font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
#hrattendance-page .calendar-title__fromto { color: var(--dt-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
#hrattendance-page .calendar-title__fromto:empty { display: none; }
#hrattendance-page .calendar-back-btn,
#hrattendance-page .calendar-forward-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
    border: 0; border-radius: var(--dt-radius); background: transparent; color: var(--dt-muted);
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
#hrattendance-page .calendar-back-btn:hover,
#hrattendance-page .calendar-forward-btn:hover { background: var(--dt-hover) !important; color: var(--dt-text); border-color: var(--dt-border-strong); }
#hrattendance-page .calendar-back-btn:focus-visible,
#hrattendance-page .calendar-forward-btn:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 2px; }
#hrattendance-page .calendar-back-btn svg,
#hrattendance-page .calendar-forward-btn svg { width: 15px; height: 15px; }

/* ── Tarjeta de fichaje (HRAttendanceWidget, solo en esta página): una superficie con línea fina de 1 px. Fuera la sombra
   de .hr-attendance-sticky, el filete de 4 px y el fondo teñido por estado; el color del estado queda SOLO en el icono
   (reglas compartidas .hr-attendance-live--<tono> .hr-attendance-live__status .ti, se dejan). La envoltura sticky aquí es estática: sin relleno,
   sin velo ni desenfoque. ── */
#hrattendance-page .hr-attendance-sticky { padding: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
#hrattendance-live-card .hr-attendance-live {
    padding: 16px 18px;
    background: var(--dt-surface);
    border: 0;
    border-radius: var(--dt-radius-lg);
    box-shadow: none !important;
}
#hrattendance-live-card .hr-attendance-live__status { font-size: 13px; font-weight: 600; }
#hrattendance-live-card .hr-attendance-live__status .ti { font-size: 17px; }
#hrattendance-live-card .hr-attendance-live__timezone { color: var(--dt-faint); font-size: 11px; font-weight: 600; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
#hrattendance-live-card .hr-attendance-live__metric-label { color: var(--dt-faint); font-size: 11px; letter-spacing: .05em; }
#hrattendance-live-card .hr-attendance-live__metric { font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.03em; }
#hrattendance-live-card .hr-attendance-live__details { color: var(--dt-muted); font-size: 12.5px; }
#hrattendance-live-card .hr-attendance-live__details strong { color: var(--dt-text); font-weight: 600; }
#hrattendance-live-card .hr-attendance-live__notice {
    color: var(--dt-text); background: var(--dt-surface-2); border: 0; border-radius: var(--dt-radius); font-weight: 500;
}
#hrattendance-live-card .hr-attendance-live__notice .ti { color: var(--dt-muted); }
/* el único CTA de la página: tinta, 36 px, ancho natural (antes 46 px a todo lo ancho); en estado "danger" también tinta
   (el rojo queda en el icono de estado; "Clock out" no es destructivo) */
#hrattendance-live-card .hr-attendance-live__action,
#hrattendance-live-card .hr-attendance-live--danger .hr-attendance-live__action {
    width: auto; min-width: 160px; min-height: 36px; margin-top: 14px; padding: 0 16px;
    border-radius: var(--dt-radius); font-size: 13px; font-weight: 600;
    color: var(--dt-cta-fg) !important; background: var(--dt-cta) !important; border-color: var(--dt-cta) !important;
}
#hrattendance-live-card .hr-attendance-live__action:hover,
#hrattendance-live-card .hr-attendance-live--danger .hr-attendance-live__action:hover {
    background: var(--dt-cta-hover) !important; border-color: var(--dt-cta-hover) !important;
}
#hrattendance-live-card .hr-attendance-live__action .ti { font-size: 16px; }
#hrattendance-live-card .hr-attendance-live__action:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 2px; }
#hrattendance-live-card .hr-attendance-live--error { color: var(--dt-danger); }
@media (max-width: 575.98px) {
    #hrattendance-live-card .hr-attendance-live__action { width: 100%; }
}

/* ── Tarjeta de horarios: cabecera con línea fina (datalyse-modern anula el .border-bottom del .card-header) y título 14/600;
   «Expand all» = botón fantasma de 30 px (btn-falcon-default no existe en ninguna hoja cargada: era un .btn pelado) ── */
#hrattendance-schedules-card > .card-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--dt-border) !important;
}
#hrattendance-schedules-card > .card-header h5 { color: var(--dt-text); font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
#hrattendance-schedules-card > .card-header p:empty { display: none; }
#hrattendance-schedules-card .btn-falcon-default {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 30px; min-height: 30px; padding: 0 11px; margin-top: 0 !important;
    border: 0; border-radius: var(--dt-radius) !important;
    background: transparent; color: var(--dt-text); font-size: 12.5px; font-weight: 600; line-height: 1;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
#hrattendance-schedules-card .btn-falcon-default:hover { background: var(--dt-hover); color: var(--dt-text); }
#hrattendance-schedules-card .btn-falcon-default:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 2px; }

/* ── Tabla: cabecera de 40 px en mayúsculas pequeñas (sigue pegajosa y opaca; la sombra interior de 1 px es la línea que
   acompaña al scroll, border-collapse no la mantiene), filas de 44 px, números tabulares, icono neutro ── */
#hrattendance-schedules-scroll thead th {
    height: 40px; padding: 0 16px !important;
    color: var(--dt-muted) !important; background: var(--dt-topbar, var(--dt-surface)) !important;
    border-bottom: 1px solid var(--dt-border) !important; box-shadow: none;
    font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
#hrattendance-schedules-scroll tbody > tr > td:not(.bg-light) {
    height: 44px; padding: 0 16px; vertical-align: middle;
    color: var(--dt-text); font-size: 13px; font-variant-numeric: tabular-nums;
}
#hrattendance-schedules-scroll tbody > tr > td:first-child { font-weight: 500; }
#hrattendance-schedules-scroll tbody > tr > td:not(.bg-light) .ti { color: var(--dt-muted); font-size: 14px; margin-right: 3px; vertical-align: -1px; }
#hrattendance-schedules-scroll tbody > tr > td [data-pondiiacumplidos],
#hrattendance-schedules-scroll tbody > tr > td [data-pondiiaturnos] { color: var(--dt-text); font-weight: 500; }
/* fila del día: gris al pasar y gris activo mientras está desplegada */
#hrattendance-schedules-scroll tbody > tr:has(> td > .accordion-button):hover > td { background-color: var(--dt-hover) !important; }
#hrattendance-schedules-scroll tbody > tr:has(> td > .accordion-button:not(.collapsed)) > td { background-color: var(--dt-active) !important; }

/* ── Fila de detalle: misma superficie. Plegada mide 0 y su borde inferior duplicaba la línea (2 px bajo cada día): solo
   lleva línea cuando está desplegada; la última fila no repite el borde de la tarjeta. ── */
#hrattendance-schedules-scroll tbody > tr > td.bg-light { background-color: transparent !important; border-bottom: 0 !important; }
#hrattendance-schedules-scroll tbody > tr > td.bg-light:has(.collapse.show) { border-bottom: 1px solid var(--dt-border) !important; }
#hrattendance-schedules-scroll tbody > tr:last-child > td,
#hrattendance-schedules-scroll tbody > tr:last-child > td.bg-light:has(.collapse.show) { border-bottom: 0 !important; }
#hrattendance-schedules-scroll .multi-collapse { padding: 12px 16px 16px !important; }
#hrattendance-schedules-scroll [data-bodypondiiacumplidos] { color: var(--dt-faint); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
#hrattendance-schedules-scroll [data-bodypondiiacumplidos] > .row { margin-top: 8px !important; color: var(--dt-text); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }

/* ── Turnos: horas en campos de 32 px con números tabulares (antes 38 px + 20 px de margen); «Now» = etiqueta gris con el
   punto verde (como los toasts de §12); «Pending» = chip gris con punto ámbar; papelera = 30 px fantasma, rojo solo en el icono ── */
#hrattendance-schedules-scroll .input-container { margin-bottom: 0; }
#hrattendance-schedules-scroll .input-container input {
    height: 32px; min-height: 32px; padding: 0 8px; text-align: center;
    font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums;
    color: var(--dt-text) !important; background: transparent !important;
    border: 0 !important; border-radius: var(--dt-radius) !important;
}
#hrattendance-schedules-scroll .badge.bg-success {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    height: 32px; padding: 0 10px !important; border-radius: var(--dt-radius) !important;
    background: var(--dt-surface-2) !important; color: var(--dt-text) !important;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
#hrattendance-schedules-scroll .badge.bg-success .ti-point { color: var(--dt-success); font-size: 14px; line-height: 1; }
#hrattendance-schedules-scroll .badge.text-warning {
    display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; margin-left: 4px; vertical-align: middle;
    border-radius: 999px; background: var(--dt-surface-2); color: var(--dt-muted) !important;
    font-size: 11px; font-weight: 600;
}
#hrattendance-schedules-scroll .badge.text-warning::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dt-warning); }
#hrattendance-schedules-scroll .btn-falcon-default.rounded-pill { width: 30px; padding: 0; border-color: var(--dt-border); color: var(--dt-danger); }
#hrattendance-schedules-scroll .btn-falcon-default.rounded-pill:hover { background: var(--dt-hover); border-color: var(--dt-border-strong); color: var(--dt-danger); }
#hrattendance-schedules-scroll .btn-falcon-default .ti-trash { font-size: 15px; }

/* ── «Add»: el desplegable pasa a fantasma de 30 px (había dos botones en tinta por día); la capa con línea fina fuerte y
   sin la tarjeta anidada con borde (datalyse-modern pisa su .border-0); campos de 34 px; el único CTA del formulario en tinta ── */
#hrattendance-schedules-scroll .btn-primary.dropdown-toggle {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; min-height: 30px; padding: 0 11px;
    border: 0 !important; border-radius: var(--dt-radius);
    background: transparent !important; color: var(--dt-text) !important; font-size: 12.5px; font-weight: 600; line-height: 1;
}
#hrattendance-schedules-scroll .btn-primary.dropdown-toggle:hover,
#hrattendance-schedules-scroll .btn-primary.dropdown-toggle:focus,
#hrattendance-schedules-scroll .btn-primary.dropdown-toggle.show { background: var(--dt-hover) !important; color: var(--dt-text) !important; border-color: var(--dt-border-strong) !important; }
#hrattendance-schedules-scroll .btn-primary.dropdown-toggle::after { margin-left: 2px; opacity: .7; }
#hrattendance-schedules-scroll .dropdown-menu {
    padding: 0 !important; background: var(--dt-overlay) !important;
    border: 0 !important; border-radius: var(--dt-radius-lg) !important; box-shadow: none !important;
}
#hrattendance-schedules-scroll .dropdown-menu .card { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
#hrattendance-schedules-scroll .dropdown-menu .card-body { padding: 14px; }
#hrattendance-schedules-scroll .dropdown-menu label { display: block; margin-bottom: 4px; color: var(--dt-muted); font-size: 12px; font-weight: 600; }
#hrattendance-schedules-scroll .dropdown-menu .mb-3 { margin-bottom: 12px !important; }
#hrattendance-schedules-scroll .dropdown-menu .mb-3:last-child { margin-bottom: 0 !important; }
#hrattendance-schedules-scroll .dropdown-menu .form-control {
    height: 34px; min-height: 34px; padding: 0 10px; font-size: 13px; font-variant-numeric: tabular-nums;
    color: var(--dt-text) !important; background: var(--dt-surface) !important;
    border: 0 !important; border-radius: var(--dt-radius) !important;
}
#hrattendance-schedules-scroll .dropdown-menu button[type="submit"].btn-primary {
    height: 34px; min-height: 34px; margin-top: 4px !important; padding: 0 14px; border-radius: var(--dt-radius);
    font-size: 13px; font-weight: 600;
    color: var(--dt-cta-fg) !important; background: var(--dt-cta) !important; border-color: var(--dt-cta) !important;
}
#hrattendance-schedules-scroll .dropdown-menu button[type="submit"].btn-primary:hover { background: var(--dt-cta-hover) !important; border-color: var(--dt-cta-hover) !important; }

/* ── Chevrón del día: botón cuadrado de 28 px (antes 80 px flotando a la derecha), color del tema con máscara + currentColor
   en vez del SVG gris fijo (#5e6e82) que datalyse-theme invertía; abierto = gris activo y giro de 180°. Pisa las reglas
   .accordion-button de arriba (sin ámbito) por especificidad; el pseudo ::after que gira Bootstrap se conserva. ── */
#hrattendance-page .accordion-button,
#hrattendance-page .accordion-button:not(.collapsed),
#hrattendance-page .accordion-button:focus {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; float: none; margin: 0; padding: 0 !important;
    border-radius: 6px; color: var(--dt-muted) !important; background: transparent !important; box-shadow: none !important;
    transition: background-color .12s ease, color .12s ease;
}
#hrattendance-page .accordion-button:hover { color: var(--dt-text) !important; background: var(--dt-hover) !important; }
#hrattendance-page .accordion-button:not(.collapsed) { color: var(--dt-text) !important; background: var(--dt-active) !important; }
#hrattendance-page .accordion-button:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 2px; }
#hrattendance-page .accordion-button::after,
#hrattendance-page .accordion-button:not(.collapsed)::after {
    width: 14px; height: 14px; margin-left: 0; filter: none;
    background-image: none; background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6l6 -6'/%3e%3c/svg%3e") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6l6 -6'/%3e%3c/svg%3e") center / contain no-repeat;
    transition: transform .15s ease;
}
#hrattendance-page .accordion-button:not(.collapsed)::after { transform: rotate(180deg); }

}
/* end dui-template-style modules/hrattendance:0 */
/* dui-template-style {"key":"modules/hrshifts:0","bytes":3858,"sha256":"7be3664c093e4f1b47f3db3c03f9eb3234971daa5dffc6efacf3b2ab4d2b52c1","media":null,"source_sha256":"7be3664c093e4f1b47f3db3c03f9eb3234971daa5dffc6efacf3b2ab4d2b52c1"} */
@scope (:root:has(template[data-dui-legacy-style="modules/hrshifts:0"])) {

@media (max-width: 900px) {
  .novisiblemovil{
  display: none;
  }
}
  .shifts-eerror{
    border-color: var(--bs-danger) !important;
  }
  .tablehovercheckbox{
    margin-top:0px;
  }
  .checkagnn{
  top: 8px;
  left: 7px;
  position: absolute;
  }
  .tablecheckright{
  text-align: right !important;
  right: 7px;
  top: 3px;
  position: absolute;
  }

.tablenew th .tablecheckright{
top: 8px;
}

.tablecheckright:checked,.tablehovercheckbox:checked{
display:block !important;
}
.btndroppable{
  z-index:10000 !important;
}
.tablenew{
  user-select: none;
  width:100% !important;
  height: calc(100vh - 260px);
  overflow:auto !important;
}
.colstickynew{
  position: sticky;
  max-width:200px ;
  left:0 ;
  top:0;
  
  box-shadow:none;
  z-index:4;
}
th.colstickynew{
  z-index:5 !important;
}
td.colstickynew{
background: var(--white-color) !important;
  z-index:3 !important;
}


@media (max-width: 740px) {
  
.tablenew{
  height: calc(100vh - 350px);

}
.calendar-title__fromto{
display:none;
}
.tablecheckright{
  display: none;
}
/* th.colstickynew{
  position: sticky !important;
  z-index:1 !important
}
.colstickynew{
  
  position: unset !important;
}
td.colstickynew{
  
  position: unset !important;
} */
}

th:Hover .tablehovercheckbox,td:Hover .tablehovercheckbox{
display:block !important;
}
.tablenew  table {
  width:100% !important;
  text-align: left !important;
  position: relative !important;
}
.tablenew th, .tablenew td {
  padding: 0.25rem;
  background: var(--white-color);
  box-shadow:none;
}
.tablenew th {
  padding: 0;
  padding-left: 0.25rem !important;
}
.tablenew tr.titletablenew th {
  background: var(--white-color);
  color: var(--text-color);
  height: 36px;
  border-bottom: 1px rgba(0, 75, 236, 0.05);
    min-height: 36px;
    flex-basis: 36px;
    line-height: 35px;
}
.tablenew th {
  background: var(--white-color);
  position: sticky; 
  top: 0px !important; /* Don't forget this, required for the stickiness */
  z-index:2;
}

.tablenew .coldiatablee{
min-width:140px;
height: 61px;
vertical-align: top;
}
.tablenew .draggabledivtable{

  user-select:none;
  padding:4px;
  border: 2px solid var(--hover-color);
  background: var(--white-color);
  margin-bottom:4px;
  border-radius:5px;
  cursor:pointer;
}
.tablenew .nodraggabledivtable, .tablenew .nodraggabledivtablecopyclone{
  display:none;
  padding:4px;
  border: 2px solid var(--hover-color);
  background: var(--white-color);
  margin-bottom:4px;
  border-radius:5px;
  cursor:pointer;
  user-select:none;
}
.dragissaved.shifts-eerror{
  background: var(--bs-danger) !important;
}
.dragissaved{
  background: var(--hover-color) !important;
}
/* Holidays: estilo distintivo con buen contraste (no usar text-danger que se mezcla con bg) */
.shifts-holiday,
.dragissaved.shifts-holiday,
.dragissaved.shifts-holiday.shifts-eerror{
  background: rgba(250, 137, 107, 0.18) !important;
  color: #b94a3a !important;
  border: 1px dashed rgba(250, 137, 107, 0.55) !important;
}
[data-bs-theme="dark"] .shifts-holiday,
[data-bs-theme="dark"] .dragissaved.shifts-holiday,
[data-bs-theme="dark"] .dragissaved.shifts-holiday.shifts-eerror{
  color: #ffb59c !important;
  background: rgba(250, 137, 107, 0.18) !important;
}
.dragselected{
  border: 2px solid var(--dark-color) !important;
}
.tablebg-hover .nodraggabledivtable{
  display:block;
}
.tablebg-hovercopyoclone .nodraggabledivtablecopyclone:not(.u-hiddenimportant){
  display:block !important;
}
.tablebg-hovercopyoclone .draggabledivtable,.tablebg-hovercopyoclone .nodraggabledivtable{
  display:none !important;
}
.tablenew .nodraggabledivtable.dragselected{
  display:block;
}
.tablehovercheckbox{
display:none;
}

}
/* end dui-template-style modules/hrshifts:0 */
/* dui-template-style {"key":"modules/hrshifts:1","bytes":4255,"sha256":"970d901df0332729774a549f35be02830f9d13c82ee37fa094458cc9d984d5fa","media":null,"source_sha256":"970d901df0332729774a549f35be02830f9d13c82ee37fa094458cc9d984d5fa"} */
@scope (:root:has(template[data-dui-legacy-style="modules/hrshifts:1"])) {

.dayblocktypeweek{
min-height:300px;
}
 .calendar__events::-webkit-scrollbar{
 width: 7px;
 height:7px;
 }
.calendar__events::-webkit-scrollbar-thumb{
 background: rgba(0, 75, 236, 0.05);
 }
 

.module__header {
  background: transparent;
  padding-bottom: 0;
}

.module__header-title {
  font-size: var(--font-size-7);
  color: var(--text-color);
  text-transform: none;
}

.calendar {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: 100%;
  background: var(--white-color);
  border-left: 1px solid var(--border-color);
  border-top: 1px solid var(--border-color);
  border-radius: 3px;
}

.calendar__header {
  display: flex;
  flex-flow: row nowrap;
}

.calendar__header-item {
  display: inline-flex;
  flex: 1 1 0%;
  font-size: 14px;
  line-height: 20px;
  padding-left: 6px;
  padding-top: 5px;
  border-right: 1px solid var(--border-color);
}

.calendar__body {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  height: 100%;
}

.calendar-title {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  line-height: 40px;
  margin-left: auto;
}

.calendar-title__top {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  height: 33px;
}

.calendar-title__bottom {
  display: flex;
  flex-flow: row;
  justify-content: space-around;
  flex-direction: column;
  text-align: center;
}

.calendar-title__month {
  font-size: 20px;
  font-weight: 600;
  color: var(--accent-color);
  min-width: 50px;
  text-align: center;
}

.calendar-title__year {
  font-size: 14px;
  font-weight: 500;
  line-height: 15px;
}

.calendar-title__top .btn-plain {
  width: 30px;
  height: 30px;
  margin: 0 5px;
  color: var(--accent-color);
  border-radius: 100%;
}

.calendar-title__top .btn-plain:hover {
  opacity: 0.8;
  background: var(--dt-hover);
}

.dayblock{
border-right:1px solid var(--border-color);
border-bottom:1px solid var(--border-color);
width: 14.28%;
height: 20%;
margin:0;
display:inline-flex;
flex: 1 1 auto;
flex-flow: column nowrap;
font-size:13px;
padding:5px;
text-align:left;
}

.dayblock.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.today{
background: var(--module-color);
}
.titday{ 
margin-top:2px;
font-size:14px;
padding:4px;
display:inherit;
font-weight: lighter;
color:var(--dt-text);
}
.today > .titday {
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  color: var(--white-color);
  background: var(--brand-color);
  border-radius: 100%;
}

.calendar__events {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column nowrap;
  height: 100%;
  margin-top: 5px;
  overflow: hidden;
  overflow-y: auto;
}

.dayblocktypeweek,.dayblocktypeday{
height:100% !important;
}
.dayblocktypeweek,.dayblocktypeday {
background: var(--white-color) !important;
}
/**
 * .dayblocktypeweek > .calendar__events,.dayblocktypeday > .calendar__events{
 * height:460px !important;
 * }
 */
.dayblocktypeday{
width:100%;
}

.dayblocktypemonth{
min-height:200px;
}
.calendar__events-item {
  position: relative;
  flex: 0 0 auto;
  margin: 2px;
  margin-top: auto;
  padding: 4px;
  padding-left: 7px;
/**
  white-space: nowrap;
 */
 color: var(--text-colorcalendar);
  font-size: 13px;
  line-height: 22px;
  text-overflow: ellipsis;
  overflow: hidden;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  cursor: pointer;
  transition: all 200ms ease;
}

.calendar__events-item:hover {
  transform: translateY(-1px);
}

.calendar__events-item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: var(--dt-surface-2);
}

.calstatus0 {
  background: #fcf0d8;
}

.calstatus0:before {
  background: #f1ab1f;
}

.calstatus1 {
  background: #ceeaff;
}

.calstatus1:before {
  background: var(--brand-color);
}

.calstatus2 {
  background: #e3f6e8;
}

.calstatus2:before {
  background: #5ecd78;
}
.is-activetab{
background:var(--hover-color) !important;
}

}
/* end dui-template-style modules/hrshifts:1 */
/* dui-template-style {"key":"modules/inbox:0","bytes":51860,"sha256":"ef70f08c1080351e37c46d985b38a9205df0d122f857c59d98ffc263c14e7ec9","media":null,"source_sha256":"53f2e120f4654db037971cdc9e164c669a22d225275d0835ccd5e8b516070451"} */
@scope (:root:has(template[data-dui-legacy-style="modules/inbox:0"])) {

#notengopoderes_email .inbox-setup-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border: 0; border-radius: 12px; background: var(--dt-surface-2); color: var(--dt-muted); font-size: 30px; }
/* ========================================
   INBOX MODULE - Modern Email Client Design
   DARK MODE COMPATIBLE (uses CSS vars)
   ======================================== */

/* --- Layout Container --- */
.inbox-container {
    display: flex;
    min-height: calc(100vh - 80px);
    background: var(--bg-color, #fff);
    border-radius: 12px;
    box-shadow: none;
    overflow: hidden;
    border: 0;
}

/* --- Sidebar --- */
.inbox-sidebar {
    width: 200px;
    min-width: 200px;
    border-right: 1px solid var(--border-color, #e5e5e5);
    padding: 16px 0;
    background: var(--bg-secondary-color, #f7f7f8);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.inbox-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px;
    flex: 1;
}

.inbox-sidebar__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary-color, #6b6b6b);
    text-decoration: none;
    transition: all 0.15s ease;
    position: relative;
}

.inbox-sidebar__item:hover {
    background: var(--hover-color, #f5f5f5);
    color: var(--text-color, #0d0d0d);
    text-decoration: none;
}

.inbox-sidebar__item--active {
    background: var(--fondoresaltado-color, #f5f5f5);
    color: #2563eb;
    font-weight: 600;
}

.inbox-sidebar__item--active:hover {
    background: var(--fondoresaltado-color, #f5f5f5);
    color: #2563eb;
}

.inbox-sidebar__item--active .ti {
    color: #2563eb;
}

.inbox-sidebar__label {
    flex: 1;
}

.inbox-sidebar__badge {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #2563eb;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
    line-height: 1.4;
}

.inbox-sidebar__badge--subtle {
    color: var(--text-muted-color, #9b9b9b);
    background: var(--bg-tertiary-color, #ececec);
}

.inbox-sidebar__badge:empty {
    display: none;
}

/* Sidebar Accounts Section */
.inbox-sidebar__accounts {
    border-top: 1px solid var(--border-color, #e5e5e5);
    padding: 12px 8px 4px 8px;
    margin-top: 8px;
}

.inbox-sidebar__accounts-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted-color, #9b9b9b);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0 14px 6px 14px;
}

.inbox-sidebar__account-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary-color, #6b6b6b);
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-sidebar__account-item:hover {
    background: var(--hover-color, #f5f5f5);
    color: var(--text-color, #0d0d0d);
    text-decoration: none;
}

.inbox-sidebar__account-item--active {
    color: #2563eb;
    font-weight: 600;
}

.inbox-sidebar__account-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-account-check {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 0;
    cursor: pointer;
    accent-color: #2563eb;
    pointer-events: none; /* click handled by parent <a> */
    flex-shrink: 0;
}

/* --- Main Panel --- */
.inbox-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-color, #fff);
}

/* --- Header Bar --- */
.inbox-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color, #e5e5e5);
    min-height: 56px;
    flex-shrink: 0;
}

.inbox-header__left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.inbox-header__checkbox {
    display: flex;
    align-items: center;
}

.inbox-header__center {
    flex: 1;
    display: flex;
    justify-content: center;
    max-width: 540px;
    margin: 0 auto;
}

.inbox-header__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* --- Search with Filter --- */
.inbox-search-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 500px;
    border: 0;
    border-radius: 8px;
    background: var(--input-color, #fff);
    overflow: hidden;
    transition: all 0.15s ease;
}

.inbox-search-wrapper:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.inbox-search-filter {
    flex-shrink: 0;
    border-right: 1px solid var(--border-color, #e5e5e5);
}

.inbox-search-filter__select {
    padding: 8px 10px;
    border: none;
    background: var(--bg-secondary-color, #f7f7f8);
    color: var(--text-secondary-color, #6b6b6b);
    font-size: 12px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    min-width: 80px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 22px;
}

.inbox-search {
    position: relative;
    flex: 1;
}

.inbox-search__icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted-color, #9b9b9b);
    pointer-events: none;
}

.inbox-search__input {
    width: 100%;
    padding: 8px 14px 8px 34px;
    border: none;
    font-size: 13px;
    color: var(--text-color, #0d0d0d);
    background: transparent;
    outline: none;
}

.inbox-search__input::placeholder {
    color: var(--text-muted-color, #9b9b9b);
}

/* --- Buttons --- */
.inbox-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.15s ease;
    text-decoration: none;
    color: var(--text-secondary-color, #6b6b6b);
    white-space: nowrap;
}

.inbox-btn:hover {
    text-decoration: none;
    color: var(--text-color, #0d0d0d);
}

.inbox-btn--icon {
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--text-muted-color, #9b9b9b);
}

.inbox-btn--icon:hover {
    background: var(--hover-color, #f5f5f5);
    color: var(--text-color, #0d0d0d);
}

.inbox-btn--pagination {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
}

.inbox-btn--pagination:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.inbox-btn--compose {
    background: #2563eb;
    color: var(--dt-cta-fg) !important;
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
}

.inbox-btn--compose:hover {
    background: #1d4ed8;
    color: var(--dt-cta-fg) !important;
}

.inbox-btn--subtle {
    padding: 6px 10px;
    color: var(--text-secondary-color, #6b6b6b);
}

.inbox-btn--subtle:hover {
    background: var(--hover-color, #f5f5f5);
}

/* --- Checkbox --- */
.inbox-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 2px solid var(--border-strong-color, #d1d1d1);
    cursor: pointer;
    accent-color: #2563eb;
}

/* --- Pagination Info --- */
.inbox-pagination-info {
    font-size: 12px;
    color: var(--text-muted-color, #9b9b9b);
    font-weight: 500;
    white-space: nowrap;
}

/* --- Bulk Actions --- */
.inbox-bulk-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 8px;
    margin-left: 8px;
    border-left: 1px solid var(--border-color, #e5e5e5);
}

/* --- Avatar (hidden, kept for compat) --- */
.inbox-avatar {
    display: none;
}

/* --- Mark All Banner --- */
.inbox-markall-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--dt-surface-2);
    border-bottom: 1px solid #bfdbfe;
    flex-shrink: 0;
}
[data-bs-theme=dark] .inbox-markall-banner {
    background: #1e3a5f;
    border-bottom-color: #2563eb40;
}

.inbox-markall-banner__content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1e40af;
    font-weight: 500;
}
[data-bs-theme=dark] .inbox-markall-banner__content {
    color: #93c5fd;
}

.inbox-markall-banner__link {
    color: #2563eb;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    margin-left: 4px;
}
.inbox-markall-banner__link:hover {
    color: #1d4ed8;
}
[data-bs-theme=dark] .inbox-markall-banner__link {
    color: #60a5fa;
}

.inbox-markall-banner__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #64748b;
    border-radius: 4px;
    flex-shrink: 0;
}
.inbox-markall-banner__close:hover {
    background: var(--hover-color, #f5f5f5);
    color: var(--text-color, #0d0d0d);
}

/* --- Email List --- */
.inbox-email-list {
    flex: 1;
    overflow-y: auto;
}

.inbox-empty-msg {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted-color, #9b9b9b);
    font-weight: 500;
    font-size: 15px;
}

/* Section Headers */
.inbox-section-header {
    padding: 12px 20px 6px 20px;
    background: var(--bg-secondary-color, #f7f7f8);
}

.inbox-section-header__text {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted-color, #9b9b9b);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --- Email Row --- */
.inbox-email-row {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color, #e5e5e5);
    cursor: pointer;
    transition: background 0.1s ease;
    gap: 12px;
    position: relative;
}

.inbox-email-row:hover {
    background: var(--hover-color, #f5f5f5);
}

.inbox-email-row--unread {
    background: var(--bg-color, #fff);
}

.inbox-email-row--unread .inbox-email-row__sender {
    font-weight: 700;
    color: var(--text-color, #0d0d0d);
}

.inbox-email-row--unread .inbox-email-row__subject {
    font-weight: 600;
    color: var(--text-color, #0d0d0d);
}

.inbox-email-row--read {
    background: var(--bg-secondary-color, #f7f7f8);
}

.inbox-email-row__check {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.inbox-email-row__star {
    flex-shrink: 0;
    cursor: pointer;
    color: var(--text-muted-color, #9b9b9b);
    transition: color 0.15s ease;
    display: flex;
    align-items: center;
}

.inbox-email-row__star--active {
    color: #f59e0b;
}

.inbox-email-row__star svg,
.inbox-email-row__star .ti {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.inbox-email-row__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    text-transform: uppercase;
}

.inbox-email-row__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inbox-email-row__top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inbox-email-row__sender {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-color, #0d0d0d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.inbox-email-row__subject {
    font-size: 13px;
    color: var(--text-secondary-color, #6b6b6b);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-email-row__preview {
    font-size: 12.5px;
    color: var(--text-muted-color, #9b9b9b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.inbox-email-row__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
    min-width: 90px;
}

.inbox-email-row__date {
    font-size: 12px;
    color: var(--text-muted-color, #9b9b9b);
    white-space: nowrap;
    font-weight: 500;
}

.inbox-email-row__tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    text-transform: capitalize;
}

.inbox-email-row__tag--new {
    background: #dcfce7;
    color: #16a34a;
}

.inbox-email-row__unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2563eb;
    flex-shrink: 0;
}

/* Hover actions on email row */
.inbox-email-row__hover-actions {
    position: absolute;
    right: 90px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    gap: 4px;
    background: var(--bg-color, #fff);
    padding: 4px;
    border-radius: 6px;
    box-shadow: none;
    z-index: 5;
}

.inbox-email-row:hover .inbox-email-row__hover-actions {
    display: flex;
}

.inbox-email-row__hover-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-muted-color, #9b9b9b);
    transition: all 0.1s;
}

.inbox-email-row__hover-btn:hover {
    background: var(--dt-surface-2);
    color: #dc2626;
}

.inbox-email-row__hover-btn--read:hover {
    background: #dbeafe;
    color: #2563eb;
}

/* Theme dark: panel y botones de hover-actions necesitan más contraste, sombra más fuerte
   y colores de hover adaptados (rojos/azules pastel se ven feos sobre fondo oscuro). */
[data-bs-theme="dark"] .inbox-email-row__hover-actions {
    background: var(--dt-surface);
    border: 0;
    box-shadow: none;
}
[data-bs-theme="dark"] .inbox-email-row__hover-btn {
    color: rgba(255,255,255,0.55);
}
[data-bs-theme="dark"] .inbox-email-row__hover-btn:hover {
    background: rgba(239,68,68,0.18);
    color: #f87171;
}
[data-bs-theme="dark"] .inbox-email-row__hover-btn--read:hover {
    background: rgba(96,165,250,0.18);
    color: #93c5fd;
}

/* Attachments */
.inbox-email-row__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.inbox-attachment-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 0;
    border-radius: 12px;
    font-size: 11px;
    color: var(--text-secondary-color, #6b6b6b);
    text-decoration: none;
    transition: all 0.15s;
}

.inbox-attachment-pill:hover {
    border-color: #2563eb;
    color: #2563eb;
    text-decoration: none;
}

/* --- Footer --- */
.inbox-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 10px 20px;
    border-top: 1px solid var(--border-color, #e5e5e5);
    flex-shrink: 0;
}

.inbox-footer__actions {
    display: flex;
    gap: 6px;
}

/* ========== EMAIL VIEW ========== */
.inbox-view-container {
    max-width: 100%;
}

.inbox-view-toolbar {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background: var(--bg-color, #fff);
    border-radius: 10px;
    box-shadow: none;
    margin-bottom: 16px;
    border: 0;
}

.inbox-view-toolbar__left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.inbox-view-toolbar__divider {
    width: 1px;
    height: 24px;
    background: var(--border-color, #e5e5e5);
    margin: 0 8px;
}

.inbox-view-card {
    background: var(--bg-color, #fff);
    border-radius: 10px;
    box-shadow: none;
    border: 0;
    overflow: hidden;
}

.inbox-view-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color, #e5e5e5);
}

.inbox-view-card__from {
    flex: 1;
    min-width: 0;
}

.inbox-view-card__meta {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-muted-color, #9b9b9b);
    font-size: 13px;
}

.inbox-view-card__body {
    padding: 0;
    min-height: 300px;
}

.inbox-view-card__footer {
    display: flex;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color, #e5e5e5);
}

/* --- Firewall / Info banners --- */
.firewallemail {
    margin: 12px 24px;
    border-radius: 8px;
    font-size: 13px;
}

/* --- Preserve existing helpers --- */
.bg-white {
    font-weight: bold;
}

.dropdown-item .ti-check {
    display: none;
}

.justify-content-between .ti-check {
    display: block;
    margin-top: 8px;
}

#sitengopoderes_email .bg-white {
            background: var(--hover-color) !important;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .inbox-container {
        flex-direction: column;
    }
    .inbox-sidebar {
        width: 100%;
        min-width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color, #e5e5e5);
        padding: 8px 0;
        flex-direction: row;
    }
    .inbox-sidebar__nav {
        flex-direction: row;
        overflow-x: auto;
        gap: 4px;
        padding: 0 12px;
    }
    .inbox-sidebar__item {
        padding: 8px 12px;
        white-space: nowrap;
    }
    .inbox-sidebar__accounts {
        display: none;
    }
    .inbox-header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }
    .inbox-header__center {
        order: 3;
        flex-basis: 100%;
        max-width: 100%;
    }
    .inbox-email-row {
        padding: 10px 12px;
    }
    .inbox-email-row__sender {
        max-width: 120px;
    }
    .inbox-email-row__avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    .inbox-email-row__hover-actions {
        display: none !important;
    }
}

/* Calendar meeting blocks */
.soyreunion {
    margin-top: 10px;
    display: flex;
    gap: 16px;
    padding: 16px 24px;
    background: var(--bg-secondary-color, #f7f7f8);
    border-radius: 8px;
    margin: 12px 24px;
}
.soyreuniondia {
    width: 80px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: none;
}
.soyreunioninfo {
    flex: 1;
    min-width: 0;
}

/* Sales action buttons from email view */
.sales-lead__header-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
    padding: 10px;
}
.sales-lead__header-buttons .btndesales {
    padding: 6px 8px;
    border-radius: 6px;
        }

/* === FIX inbox-search-wrapper (override global input styles) === */
.inbox-search-wrapper .inbox-search__input,
.inbox-search-wrapper input.inbox-search__input {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 8px 14px 8px 36px !important;
    height: 34px;
    font-size: 13px;
    color: var(--text-color, #0d0d0d);
    width: 100%;
}

.inbox-search-wrapper .inbox-search__input:focus,
.inbox-search-wrapper .inbox-search__input:focus-visible,
.inbox-search-wrapper .inbox-search__input:hover {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.inbox-search-wrapper:focus-within {
    border-color: var(--border-strong-color, #b8b8b8) !important;
    box-shadow: none !important;
}
[data-bs-theme="dark"] .inbox-search-wrapper:focus-within {
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.inbox-search-wrapper .inbox-search {
    border-radius: 0;
    background: transparent;
}

.inbox-search-wrapper .inbox-search__icon {
    left: 12px;
    color: var(--text-muted-color, #9b9b9b);
}

.inbox-search-wrapper .inbox-search-filter__select {
    height: 34px;
    line-height: 1;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
.inbox-search-wrapper .inbox-search-filter__select:focus,
.inbox-search-wrapper .inbox-search-filter__select:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

[data-bs-theme="dark"] .inbox-search-wrapper .inbox-search-filter__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239b9b9b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Selector de búsqueda consistente con el resto de la interfaz */
.inbox-search-filter {
    display: flex;
    min-width: 116px;
    align-self: stretch;
}
.inbox-search-filter__dui {
    width: 116px;
    min-width: 116px;
}
.inbox-search-wrapper .inbox-search-filter__dui .dui-select__trigger {
    height: 34px;
    min-height: 34px;
    padding: 0 9px;
    border: 0 !important;
    border-radius: 7px 0 0 7px;
    color: var(--dt-text);
    background: var(--dt-surface-2);
    box-shadow: none !important;
    font-size: 12px;
    font-weight: 650;
}
.inbox-search-wrapper .inbox-search-filter__dui .dui-select__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inbox-search-filter__icon {
    flex: none;
    font-size: 16px;
    color: var(--dt-muted);
    margin-right: 6px;
}
.inbox-search-wrapper .inbox-search-filter__dui .dui-select__arrow {
    color: var(--dt-faint);
    font-size: 13px;
}
.inbox-search-filter__dropdown {
    padding: 5px;
    border: 0;
    border-radius: 10px;
    background: var(--dt-overlay);
    box-shadow: none;
}
.inbox-search-filter__dropdown .dui-select__option {
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 7px;
    font-size: 12px;
}
.inbox-search-filter__dropdown .dui-select__option.selected {
    color: var(--dt-cta);
    background: rgba(var(--dt-cta-rgb), .11);
}
.inbox-search-filter__dropdown .dui-select__option-icon {
    width: 20px;
    color: var(--dt-muted);
    text-align: center;
}

/* Una sola marca persistente por correo; los inactivos no recargan la fila. */
.inbox-email-row__important {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--dt-faint);
    cursor: pointer;
    opacity: .24;
    transition: color .15s ease, opacity .15s ease, transform .15s ease;
}
.inbox-email-row:hover .inbox-email-row__important,
.inbox-email-row__important--active {
    opacity: 1;
}
.inbox-email-row__important:hover {
    color: #dc2626;
    transform: translateY(-1px);
}
.inbox-email-row__important--active {
    color: #dc2626;
}
.inbox-email-row__important[data-important-pending="y"] {
    pointer-events: none;
    opacity: .45;
}
@media (hover: none) {
    .inbox-email-row__important {
        opacity: .55;
    }
}

/* Conversation workspace: one mailbox, a persistent list and a shared reader. */
.inbox-container {
    height: calc(100vh - 82px);
    height: calc(100dvh - 82px);
    min-height: 360px;
    box-shadow: none;
}
.inbox-sidebar { width: 164px; min-width: 164px; overflow-y: auto; }
.inbox-sidebar__item { padding: 8px 10px; font-size: 13px; }
.inbox-sidebar__item--active,
.inbox-sidebar__item--active:hover,
.inbox-sidebar__item--active .ti { color: var(--dt-text, var(--text-color, #161616)); }
.inbox-main { min-height: 0; container-type: inline-size; container-name: inbox-content; }
.inbox-header { flex-wrap: wrap; padding: 10px 14px; gap: 8px 12px; }
.inbox-header__center { min-width: 210px; }
.inbox-header__right { margin-left: auto; }
.inbox-header__right .inbox-pagination-info,
.inbox-header__right .inbox-btn--pagination { display: none; }
.inbox-conversation-layout { display: flex; flex: 1; min-height: 0; min-width: 0; }
.inbox-threadlist-panel {
    display: flex; flex-direction: column; flex: 0 0 340px;
    width: 340px; min-width: 0; min-height: 0;
    border-right: 1px solid var(--dt-border, var(--border-color, #e5e5e5));
}
.inbox-email-list { min-height: 0; overscroll-behavior: contain; }
.inbox-section-header { padding: 10px 14px 6px; background: transparent; }
.inbox-section-header__text { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.inbox-threadlist-panel .inbox-email-row {
    display: grid; grid-template-columns: 16px 30px minmax(0, 1fr) 18px;
    column-gap: 9px; row-gap: 3px; align-items: start;
    margin: 2px 6px; padding: 12px 8px; border: 0; border-radius: 8px;
    background: transparent !important;
}
.inbox-threadlist-panel .inbox-email-row:hover,
.inbox-threadlist-panel .inbox-email-row.is-selected {
    background: var(--dt-surface-2, var(--fondoresaltado-color, #f0f0f0)) !important;
}
.inbox-threadlist-panel .inbox-email-row:focus-visible {
    outline: 2px solid var(--dt-text, #222); outline-offset: -2px;
}
.inbox-threadlist-panel .inbox-email-row__check { grid-column: 1; grid-row: 1; padding-top: 6px; }
.inbox-threadlist-panel .inbox-email-row__avatar {
    grid-column: 2; grid-row: 1 / span 2; width: 30px; height: 30px; font-size: 11px;
    background: var(--dt-surface-2, var(--bg-tertiary-color, #e9e9e9)) !important;
    color: var(--dt-muted, var(--text-secondary-color, #666));
}
.inbox-threadlist-panel .inbox-email-row__content { grid-column: 3; grid-row: 1 / span 2; }
.inbox-threadlist-panel .inbox-email-row__sender { max-width: 100%; font-size: 13px; }
.inbox-threadlist-panel .inbox-email-row__top { gap: 5px; }
.inbox-threadlist-panel .inbox-email-row__tag { font-size: 9px; padding: 1px 4px; }
.inbox-threadlist-panel .inbox-email-row__subject { font-size: 12px; }
.inbox-threadlist-panel .inbox-email-row__star { grid-column: 4; grid-row: 2; }
.inbox-threadlist-panel .inbox-email-row__important { grid-column: 4; grid-row: 1; padding-top: 3px; }
.inbox-threadlist-panel .inbox-email-row__right {
    grid-column: 3; grid-row: 3; flex-direction: row; justify-content: flex-start;
    align-items: center; min-width: 0; gap: 5px;
}
.inbox-threadlist-panel .inbox-email-row__date { font-size: 10px; }
.inbox-threadlist-panel .inbox-email-row__right .inbox-email-row__star { display: none !important; }
.inbox-email-row__direction { color: var(--dt-muted, #777); font-size: 12px; }
.inbox-threadlist-panel .inbox-email-row__unread-dot { margin-left: auto; }
.inbox-threadlist-panel .inbox-email-row__hover-actions { right: 8px; top: 8px; }
.inbox-threadlist-panel .inbox-footer { padding: 8px 12px; gap: 8px; justify-content: space-between; }
.inbox-reading-panel {
    position: relative; flex: 1; min-width: 0; min-height: 0;
    overflow: auto; overscroll-behavior: contain;
    background: var(--dt-surface, var(--bg-color, #fff));
}
.inbox-reading-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100%; padding: 32px; text-align: center;
}
.inbox-reading-state__icon {
    display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px;
    border-radius: 14px; background: var(--dt-surface-2, var(--bg-secondary-color, #f5f5f5));
    color: var(--dt-muted, #777); font-size: 25px;
}
.inbox-reading-state.is-content-loading { align-items:stretch; justify-content:flex-start; }
.inbox-reading-state.is-content-loading > :not([data-inbox-loading]):not(button) { display:none; }
.inbox-reading-state.is-content-loading > button { align-self:flex-start; }
.inbox-reading-state [data-inbox-loading] { width:100%; text-align:left; }
.inbox-reading-state h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; color: var(--dt-text, var(--text-color, #161616)); }
.inbox-reading-state p { max-width: 280px; font-size: 13px; line-height: 1.6; color: var(--dt-muted, #777); }
.inbox-reading-panel .inbox-view-toolbar {
    position: sticky; top: 0; z-index: 2; margin: 0; padding: 10px 14px;
    border: 0; border-bottom: 1px solid var(--dt-border, var(--border-color, #e5e5e5));
    border-radius: 0; box-shadow: none;
}
.inbox-reading-panel .inbox-view-toolbar__left { flex-wrap: wrap; }
.inbox-reading-panel .inbox-view-card { border: 0; border-radius: 0; box-shadow: none; }
.inbox-reading-panel .inbox-view-card__header { flex-direction: column; gap: 12px; padding: 20px; }
.inbox-reading-panel .inbox-view-card__from { width: 100%; }
.inbox-reading-panel #CABECERASFROM { margin-left: 0 !important; overflow-wrap: anywhere; }
.inbox-reading-panel #CABECERASFROM h5 { font-size: 19px; font-weight: 600; line-height: 1.4; margin: 8px 0 12px; }
.inbox-message-direction { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--dt-muted, #777); }
.inbox-reading-panel .inbox-view-card__body { min-height: 180px; }
.inbox-reading-panel .sales-lead__header-buttons { flex-wrap: wrap; }
.inbox-reading-panel .firewallemail { margin: 12px 16px; font-size: 12px; }
@container inbox-content (max-width: 660px) {
    .inbox-threadlist-panel { flex: 1; width: 100%; border-right: 0; }
    .inbox-reading-panel { display: none; }
    .inbox-container.has-selection .inbox-threadlist-panel { display: none; }
    .inbox-container.has-selection .inbox-reading-panel { display: block; }
    .inbox-container.has-selection .inbox-header__center { display: none; }
}
@media (max-width: 1199px) {
    .inbox-threadlist-panel { flex-basis: 300px; width: 300px; }
    .inbox-header__center { order: 3; flex-basis: 100%; max-width: none; }
    .inbox-search-wrapper { max-width: none; }
}
@media (max-width: 991px) {
    .inbox-container { flex-direction: column; }
    .inbox-sidebar { width: 100%; min-width: 0; padding: 6px; border-right: 0; border-bottom: 1px solid var(--border-color, #e5e5e5); }
    .inbox-sidebar__nav { flex-direction: row; flex: none; overflow-x: auto; padding: 0; }
    .inbox-sidebar__item { white-space: nowrap; }
    .inbox-sidebar__accounts { margin: 0; padding: 4px 0 0; border-top: 0; }
    .inbox-sidebar__accounts-title { display: none; }
    #inboxSidebarAccounts { display: flex; overflow-x: auto; }
    .inbox-sidebar__account-item { flex-shrink: 0; max-width: 200px; }
}
@media (max-width: 767px) {
    .inbox-container { height: calc(100dvh - 70px); min-height: 300px; }
    .inbox-sidebar { flex-direction: column; flex: 0 0 auto; }
    .inbox-sidebar__accounts { display: block; }
    .inbox-header { padding: 8px 10px; }
    .inbox-header__left { gap: 4px; }
    .inbox-header__right { gap: 4px; }
    .inbox-btn--compose { padding: 7px 9px; }
    .inbox-threadlist-panel { flex: 1; width: 100%; border-right: 0; }
    .inbox-reading-panel { display: none; }
    .inbox-container.has-selection .inbox-threadlist-panel { display: none; }
    .inbox-container.has-selection .inbox-reading-panel { display: block; }
    .inbox-container.has-selection .inbox-sidebar,
    .inbox-container.has-selection .inbox-header__center { display: none; }
    .inbox-reading-panel .inbox-view-card__header { padding: 16px; }
}
    
/* ═══════════ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══════════
   Bloque añadido al final del <style> del módulo: solo color, borde, sombra, radio y peso; ningún id/clase que lea el JS cambia. */
/* ═══════════ Inbox clean (26-10, Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══════════
   Solo color, borde, sombra, radio, espaciado y peso: ningún id, clase ni atributo que lea inbox.js cambia.
   Tokens --dt-* de datalyse-modern.css (oscuro automático). Todo bajo #sitengopoderes_email (raíz del módulo),
   así gana a las reglas de arriba y a cssyappv2/inbox.css sin salir del inbox. !important solo contra reglas
   que ya lo llevan o contra estilos inline que inyecta inbox.js (estrella #f59e0b, ti-checks #2681ff, avatar). */

/* una sola superficie con línea fina: fuera la segunda superficie del carril de carpetas */
#sitengopoderes_email.inbox-container {
    background: var(--dt-surface);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}
#sitengopoderes_email .inbox-sidebar,
#sitengopoderes_email .inbox-main,
#sitengopoderes_email .inbox-reading-panel { background: var(--dt-surface); }
#sitengopoderes_email .inbox-sidebar { border-right: 1px solid var(--dt-border); }
#sitengopoderes_email .inbox-header,
#sitengopoderes_email .inbox-reading-panel .inbox-view-toolbar { border-bottom: 1px solid var(--dt-border); background: var(--dt-surface); box-shadow: none; }
#sitengopoderes_email .inbox-footer { border-top: 1px solid var(--dt-border); }
#sitengopoderes_email .inbox-threadlist-panel { border-right: 1px solid var(--dt-border); }
/* The reading pane only takes space while a message is selected. */
#sitengopoderes_email:not(.has-selection) .inbox-threadlist-panel {
    display: flex;
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    border-right: 0;
}
#sitengopoderes_email:not(.has-selection) .inbox-reading-panel { display: none; }
@media (min-width: 992px) {
    #sitengopoderes_email .inbox-sidebar {
        width: 208px;
        min-width: 208px;
        flex: 0 0 208px;
    }
    #sitengopoderes_email.has-selection .inbox-threadlist-panel {
        flex: 0 0 38%;
        width: 38%;
        max-width: 380px;
        border-right: 1px solid var(--dt-border);
    }
    #sitengopoderes_email.has-selection .inbox-reading-panel {
        display: block;
        flex: 1 1 0%;
        min-width: 0;
    }
    #sitengopoderes_email .inbox-threadlist-panel .inbox-email-row.is-selected {
        background: var(--dt-active) !important;
        box-shadow: none !important;
    }
}
/* A full-width list uses the available space for sender, subject and date. */
@container inbox-content (min-width: 760px) {
    #sitengopoderes_email:not(.has-selection) .inbox-email-row {
        grid-template-columns: 16px 30px minmax(0, 1fr) 18px 18px minmax(70px, auto);
        align-items: center;
        padding-block: 10px;
    }
    #sitengopoderes_email:not(.has-selection) .inbox-email-row__avatar,
    #sitengopoderes_email:not(.has-selection) .inbox-email-row__content { grid-row: 1; }
    #sitengopoderes_email:not(.has-selection) .inbox-email-row__content {
        display: grid;
        grid-template-columns: minmax(120px, 24%) minmax(0, 1fr);
        column-gap: 18px;
        align-items: center;
    }
    #sitengopoderes_email:not(.has-selection) .inbox-email-row__top { min-width: 0; }
    #sitengopoderes_email:not(.has-selection) .inbox-email-row__attachments { grid-column: 2; }
    #sitengopoderes_email:not(.has-selection) .inbox-email-row__star { grid-column: 4; grid-row: 1; }
    #sitengopoderes_email:not(.has-selection) .inbox-email-row__important { grid-column: 5; grid-row: 1; padding-top: 0; }
    #sitengopoderes_email:not(.has-selection) .inbox-email-row__right { grid-column: 6; grid-row: 1; justify-content: flex-end; }
    #sitengopoderes_email:not(.has-selection) .inbox-email-row__date { font-size: 11px; }
}
#sitengopoderes_email .inbox-bulk-actions { border-left: 1px solid var(--dt-border); }

/* carril de carpetas: gris por peso, activo en tinta sobre --dt-active, contador neutro con tabulares */
#sitengopoderes_email .inbox-sidebar__item { border-radius: 7px; color: var(--dt-muted); font-weight: 500; }
#sitengopoderes_email .inbox-sidebar__item:hover { background: var(--dt-hover); color: var(--dt-text); }
#sitengopoderes_email .inbox-sidebar__item--active,
#sitengopoderes_email .inbox-sidebar__item--active:hover { background: var(--dt-active); color: var(--dt-text); font-weight: 600; }
#sitengopoderes_email .inbox-sidebar__item .ti { color: var(--dt-faint); }
#sitengopoderes_email .inbox-sidebar__item:hover .ti,
#sitengopoderes_email .inbox-sidebar__item--active .ti { color: var(--dt-text); }
#sitengopoderes_email .inbox-sidebar__badge,
#sitengopoderes_email .inbox-sidebar__badge--subtle {
    min-width: 22px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--dt-surface-2);
    color: var(--dt-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
}
#sitengopoderes_email .inbox-sidebar__item--active .inbox-sidebar__badge { background: var(--dt-surface); border-color: var(--dt-border); color: var(--dt-text); }
#sitengopoderes_email .inbox-sidebar__accounts { border-top: 1px solid var(--dt-border); }
#sitengopoderes_email .inbox-sidebar__accounts-title { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--dt-faint); }
#sitengopoderes_email .inbox-sidebar__account-item { border-radius: 7px; color: var(--dt-muted); }
#sitengopoderes_email .inbox-sidebar__account-item:hover { background: var(--dt-hover); color: var(--dt-text); }
#sitengopoderes_email .inbox-sidebar__account-item--active { color: var(--dt-text); font-weight: 600; }
#sitengopoderes_email .inbox-account-check,
#sitengopoderes_email .inbox-checkbox { accent-color: var(--dt-text); border-radius: 4px; }

/* botones fantasma 30-34 px; un solo CTA en tinta (Compose) */
#sitengopoderes_email .inbox-btn { border-radius: 7px; color: var(--dt-muted); }
#sitengopoderes_email .inbox-btn:hover { color: var(--dt-text); }
#sitengopoderes_email .inbox-btn--icon { color: var(--dt-muted); }
#sitengopoderes_email .inbox-btn--icon:hover { background: var(--dt-hover); color: var(--dt-text); }
#sitengopoderes_email .inbox-btn--pagination { border: 0; border-radius: 7px; }
#sitengopoderes_email .inbox-btn--pagination:disabled { opacity: .4; }
#sitengopoderes_email .inbox-btn--subtle {
    height: 30px;
    padding: 0 9px;
    border: 0;
    border-radius: 7px;
    color: var(--dt-muted);
    font-size: 12.5px;
    font-weight: 600;
}
#sitengopoderes_email .inbox-btn--subtle:hover { background: var(--dt-hover); color: var(--dt-text); }
#sitengopoderes_email #btnemailborrarv3:hover .ti { color: var(--dt-danger); }
#sitengopoderes_email .inbox-btn--compose {
    height: 32px;
    padding: 0 12px;
    border-radius: 7px;
    background: var(--dt-cta);
    color: var(--dt-cta-fg) !important;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
}
#sitengopoderes_email .inbox-btn--compose:hover { background: var(--dt-cta-hover); color: var(--dt-cta-fg) !important; }
#sitengopoderes_email .inbox-btn--compose .ti { color: inherit; }

/* buscador: caja con línea fuerte, foco en tinta, selector de filtro gris */
#sitengopoderes_email .inbox-search-wrapper { border: 0; border-radius: 8px; background: var(--dt-surface); box-shadow: none; }
#sitengopoderes_email .inbox-search-wrapper:focus-within { border-color: var(--dt-focus) !important; box-shadow: none !important; }
#sitengopoderes_email .inbox-search-filter { border-right: 1px solid var(--dt-border); }
#sitengopoderes_email .inbox-search-filter__select { background-color: var(--dt-surface-2); color: var(--dt-muted); }
#sitengopoderes_email .inbox-search-filter__dui .dui-select__trigger { color: var(--dt-muted); background: var(--dt-surface-2); font-weight: 600; }
#sitengopoderes_email .inbox-search__icon,
#sitengopoderes_email .inbox-search-wrapper .inbox-search__icon { color: var(--dt-faint); }
#sitengopoderes_email .inbox-search__input::placeholder { color: var(--dt-faint); }
#sitengopoderes_email .inbox-pagination-info { color: var(--dt-faint); font-variant-numeric: tabular-nums; }

/* aviso "todos seleccionados": superficie con línea fina, enlace en tinta subrayado */
#sitengopoderes_email .inbox-markall-banner { background: var(--dt-surface); border-bottom: 1px solid var(--dt-border); }
#sitengopoderes_email .inbox-markall-banner__content { color: var(--dt-text); font-weight: 500; }
#sitengopoderes_email .inbox-markall-banner__content .ti { color: var(--dt-muted); }
#sitengopoderes_email .inbox-markall-banner__link,
#sitengopoderes_email .inbox-markall-banner__link:hover { color: var(--dt-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#sitengopoderes_email .inbox-markall-banner__close { color: var(--dt-muted); border-radius: 6px; }
#sitengopoderes_email .inbox-markall-banner__close:hover { background: var(--dt-hover); color: var(--dt-text); }

/* Unread mail uses a tinted surface, an accent marker and stronger text. */
#sitengopoderes_email .inbox-section-header__text { color: var(--dt-faint); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
#sitengopoderes_email .inbox-empty-msg { color: var(--dt-muted); font-size: 13px; font-weight: 500; }
#sitengopoderes_email .inbox-threadlist-panel .inbox-email-row,
#sitengopoderes_email .inbox-threadlist-panel .inbox-email-row.bg-white,
#sitengopoderes_email .inbox-threadlist-panel .inbox-email-row.bg-200 { background: transparent !important; border-radius: 8px; }
#sitengopoderes_email .inbox-threadlist-panel .inbox-email-row:hover,
#sitengopoderes_email .inbox-threadlist-panel .inbox-email-row.bg-white:hover,
#sitengopoderes_email .inbox-threadlist-panel .inbox-email-row.bg-200:hover { background: var(--dt-hover) !important; }
#sitengopoderes_email .inbox-threadlist-panel .inbox-email-row.is-selected,
#sitengopoderes_email .inbox-threadlist-panel .inbox-email-row.bg-white.is-selected,
#sitengopoderes_email .inbox-threadlist-panel .inbox-email-row.bg-200.is-selected { background: var(--dt-active) !important; }
#sitengopoderes_email .inbox-threadlist-panel .inbox-email-row:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: -2px; }
#sitengopoderes_email .inbox-email-row__sender { color: var(--dt-text); font-weight: 500; }
#sitengopoderes_email .inbox-email-row__subject { color: var(--dt-muted); font-weight: 400; }
#sitengopoderes_email .inbox-email-row--unread .inbox-email-row__sender { color: var(--dt-text); font-weight: 700; }
#sitengopoderes_email .inbox-email-row--unread .inbox-email-row__subject { color: var(--dt-text); font-weight: 600; }
#sitengopoderes_email .inbox-email-row__preview,
#sitengopoderes_email .inbox-email-row__direction { color: var(--dt-faint); }
#sitengopoderes_email .inbox-email-row__date { color: var(--dt-faint); font-weight: 500; font-variant-numeric: tabular-nums; }
/* Sin leer en gris (Marc 05-11: "no tan azul"): la negrita del remitente ya canta */
#sitengopoderes_email { --inbox-unread-accent:var(--dt-faint,#72726e); }
:scope[data-bs-theme="dark"] #sitengopoderes_email { --inbox-unread-accent:var(--dt-faint,#9b9b97); }
#sitengopoderes_email .inbox-email-row__unread-dot { width:8px; height:8px; background:var(--inbox-unread-accent); }
#sitengopoderes_email .inbox-threadlist-panel .inbox-email-row.inbox-email-row--unread {
    background:color-mix(in srgb,var(--inbox-unread-accent) 8%,var(--dt-surface))!important;
    box-shadow:none;
}
#sitengopoderes_email .inbox-threadlist-panel .inbox-email-row.inbox-email-row--unread:hover {
    background:color-mix(in srgb,var(--inbox-unread-accent) 13%,var(--dt-surface))!important;
}
#sitengopoderes_email .inbox-threadlist-panel .inbox-email-row.inbox-email-row--unread.is-selected {
    background:var(--dt-active)!important;
}
#sitengopoderes_email .inbox-threadlist-panel .inbox-email-row__avatar {
    border: 1px solid var(--dt-border);
    border-radius: 8px;
    background: var(--dt-surface-2) !important;
    color: var(--dt-muted);
    font-weight: 600;
}
#sitengopoderes_email .inbox-email-row__tag,
#sitengopoderes_email .inbox-email-row__tag--new {
    border: 1px solid var(--dt-border);
    border-radius: 999px;
    background: var(--dt-surface-2);
    color: var(--dt-muted);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
#sitengopoderes_email .inbox-email-row__star { color: var(--dt-faint); }
#sitengopoderes_email .inbox-email-row__star:hover { color: var(--dt-text); }
#sitengopoderes_email .inbox-email-row__star--active,
#sitengopoderes_email .inbox-email-row__star--active .ti { color: var(--dt-text) !important; }
#sitengopoderes_email .inbox-email-row__important { color: var(--dt-faint); }
#sitengopoderes_email .inbox-email-row__important:hover { color: var(--dt-text); transform: none; }
#sitengopoderes_email .inbox-email-row__important--active,
#sitengopoderes_email .inbox-email-row__important--active:hover { color: var(--dt-danger); }
#sitengopoderes_email .inbox-email-row__attachments { min-width: 0; max-width: 100%; }
#sitengopoderes_email .inbox-attachment-pill { min-width: 0; max-width: 100%; box-sizing: border-box; border: 0; border-radius: 999px; color: var(--dt-muted); }
#sitengopoderes_email .inbox-attachment-pill > .ti { flex: 0 0 auto; }
#sitengopoderes_email .inbox-attachment-pill > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sitengopoderes_email .inbox-attachment-pill:hover { border-color: var(--dt-border-strong); background: var(--dt-hover); color: var(--dt-text); }

/* barra de acciones al pasar: tarjeta con línea fina, sin sombra; rojo solo en el icono de borrar */
#sitengopoderes_email .inbox-email-row__hover-actions {
    top: 6px;
    right: 40px; /* Reserve the rightmost column for Important and Favorite. */
    transform: none;
    gap: 2px;
    padding: 3px;
    border: 0;
    border-radius: 8px;
    background: var(--dt-surface);
    box-shadow: none;
}
#sitengopoderes_email .inbox-email-row__hover-btn { width: 28px; height: 28px; border-radius: 6px; color: var(--dt-muted); }
#sitengopoderes_email .inbox-email-row__hover-btn:hover,
#sitengopoderes_email .inbox-email-row__hover-btn--read:hover { background: var(--dt-hover); color: var(--dt-text); }
#sitengopoderes_email .inbox-email-row__hover-btn:not(.inbox-email-row__hover-btn--read):hover .ti { color: var(--dt-danger); }

/* lector: estado vacío con cuadrado neutro, cabecera gris, recibo de lectura y estrella (inyectados por inbox.js) en gris/tinta */
#sitengopoderes_email .inbox-reading-state__icon { border: 0; border-radius: 10px; background: var(--dt-surface-2); color: var(--dt-muted); }
#sitengopoderes_email .inbox-reading-state h3 { color: var(--dt-text); font-weight: 600; }
#sitengopoderes_email .inbox-reading-state p { color: var(--dt-muted); }
#sitengopoderes_email .inbox-view-toolbar__divider { background: var(--dt-border-strong); }
#sitengopoderes_email .inbox-reading-panel .inbox-view-card { background: var(--dt-surface); border: 0; box-shadow: none; }
#sitengopoderes_email .inbox-view-card__header { border-bottom: 1px solid var(--dt-border); }
#sitengopoderes_email .inbox-view-card__footer { border-top: 1px solid var(--dt-border); }
#sitengopoderes_email .inbox-view-card__meta { color: var(--dt-faint); font-variant-numeric: tabular-nums; }
#sitengopoderes_email .inbox-message-direction { color: var(--dt-faint); }
#sitengopoderes_email #CABECERASFROM .text-800 { color: var(--dt-muted); }
#sitengopoderes_email #CABECERASFROM .fw-semi-bold { color: var(--dt-text); font-weight: 600; }
#sitengopoderes_email #ponhacecuantov3estemeail .ti-checks { color: var(--dt-muted) !important; font-size: 16px !important; }
#sitengopoderes_email #ponhacecuantov3estemeail .ti-eye-off { color: var(--dt-faint); }
#sitengopoderes_email #ponfavoritov3estemeail .fa-star { color: var(--dt-faint) !important; font-size: 15px; }
#sitengopoderes_email #ponfavoritov3estemeail .fa-star.text-warning { color: var(--dt-text) !important; }
#sitengopoderes_email .sales-lead__header-buttons .btndesales { border-radius: 7px; color: var(--dt-muted); }
#sitengopoderes_email .sales-lead__header-buttons .btndesales:hover { background: var(--dt-hover) !important; color: var(--dt-text); }
#sitengopoderes_email #CABECERASEMAIL { min-width: 0; padding: 8px 16px !important; }
#sitengopoderes_email #CABECERASEMAIL:empty { display: none; }
#sitengopoderes_email #CABECERASEMAIL .sales-lead__header-buttons { display: flex; flex-wrap: wrap; gap: 4px; height: auto; margin: 0; padding: 0; }
#sitengopoderes_email #CABECERASEMAIL .sales-lead__header-buttons .btndesales { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; min-width: 34px; height: 34px; line-height: 1; margin: 0 !important; padding: 0 !important; }
#sitengopoderes_email #CABECERASEMAIL > .row { margin: 0; }
#sitengopoderes_email #CABECERASEMAIL > .row > .col-12 { min-width: 0; padding: 0; }
#sitengopoderes_email #CABECERASEMAIL .inbox-link { max-width: calc(100% - 4px); box-sizing: border-box; margin: 6px 4px 0 0 !important; padding: 3px 8px !important; color: var(--dt-muted); border-color: var(--dt-border) !important; text-decoration: none; }
#sitengopoderes_email #CABECERASEMAIL .inbox-link > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sitengopoderes_email #CABECERASEMAIL .inbox-link > .ti { flex: 0 0 auto; }
#sitengopoderes_email #CABECERASEMAIL .inbox-link:hover { background: var(--dt-hover); border-color: var(--dt-border-strong) !important; color: var(--dt-text); }
#sitengopoderes_email #CABECERASEMAIL .inbox-link .ti { color: var(--dt-muted) !important; font-size: 16px !important; }
#sitengopoderes_email .firewallemail.alert-info {
    border: 1px solid var(--dt-border-strong) !important;
    border-radius: var(--dt-radius);
    background: var(--dt-surface);
    color: var(--dt-text);
}
#sitengopoderes_email .firewallemail.alert-info .ti { color: var(--dt-muted); }

/* bloque de reunión (.ics): superficie con línea fina; la cabecera del mes usaba var(--blue-color), que no existe */
#sitengopoderes_email .soyreunion { border: 0; border-radius: var(--dt-radius); background: var(--dt-surface); }
#sitengopoderes_email .soyreuniondia { border: 0; border-radius: var(--dt-radius-sm); box-shadow: none; }
#sitengopoderes_email .soyreuniondia > div:first-child { background: var(--dt-text) !important; color: var(--dt-surface) !important; }
#sitengopoderes_email .soyreuniondia > div:not(:first-child) { background: var(--dt-surface) !important; color: var(--dt-text) !important; }

@media (max-width: 767px) {
    #sitengopoderes_email .inbox-btn--compose { padding: 0 9px; }
}

/* The mailbox owns its available workspace, including beside a docked AI panel. */
#akicontenidonormal:has(> #sitengopoderes_email:not(.u-hidden)) {
    padding: 0;
}
#akicontenidonormal > #sitengopoderes_email {
    height: calc(100dvh - var(--dt-topbar-h, 48px));
    min-height: 0;
    border: 0;
}

/* Light inbox: softer mailbox surfaces; the email document keeps its own appearance. */
:scope[data-bs-theme="light"] #sitengopoderes_email.inbox-container,
:scope[data-bs-theme="light"] #sitengopoderes_email .inbox-sidebar,
:scope[data-bs-theme="light"] #sitengopoderes_email .inbox-header {
    background: var(--dt-app);
}
:scope[data-bs-theme="light"] #sitengopoderes_email .inbox-main,
:scope[data-bs-theme="light"] #sitengopoderes_email .inbox-threadlist-panel,
:scope[data-bs-theme="light"] #sitengopoderes_email .inbox-email-list,
:scope[data-bs-theme="light"] #sitengopoderes_email .inbox-footer,
:scope[data-bs-theme="light"] #sitengopoderes_email .inbox-reading-panel,
:scope[data-bs-theme="light"] #sitengopoderes_email .inbox-reading-panel .inbox-view-card,
:scope[data-bs-theme="light"] #sitengopoderes_email .inbox-reading-panel .inbox-view-toolbar {
    background: var(--dt-surface-2);
}
:scope[data-bs-theme="light"] #sitengopoderes_email .inbox-reading-panel .inbox-view-card__body {
    background: var(--dt-surface);
}
:scope[data-bs-theme="light"] #sitengopoderes_email .inbox-sidebar {
    border-right-color: var(--dt-border-strong);
}
:scope[data-bs-theme="light"] #sitengopoderes_email .inbox-threadlist-panel .inbox-email-row__avatar {
    background: var(--dt-app) !important;
}

}
/* end dui-template-style modules/inbox:0 */
/* dui-template-style {"key":"modules/integrations-facebookads:0","bytes":23723,"sha256":"259827ed66a7de989a1754b411682d5b8689d1bd5fb12b9b6cb081c96b0ed140","media":null,"source_sha256":"259827ed66a7de989a1754b411682d5b8689d1bd5fb12b9b6cb081c96b0ed140"} */
@scope (:root:has(template[data-dui-legacy-style="modules/integrations-facebookads:0"])) {

    /* ── Card base ── */
    .fbads-card {
        background: var(--dt-surface);
        border: 0;
        border-radius: 14px;
        overflow: hidden;
        box-shadow:none;
    }
    .fbads-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px;
        border-bottom: 1px solid #f0f0f0;
    }
    .fbads-card-head-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .fbads-card-head-ico {
        font-size: 18px;
        color: var(--dt-muted);
    }
    .fbads-card-title {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--dt-text);
        letter-spacing: -0.01em;
    }
    .fbads-card-badge {
        font-size: 11px;
        padding: 3px 10px;
        border-radius: 20px;
        color: #6b7280;
        background: #f3f4f6;
        font-weight: 600;
    }
    .fbads-card-badge.badge-ok {
        color: #16a34a;
        background: #f0fdf4;
    }
    .fbads-card-badge.badge-off {
        color: #dc2626;
        background: #fef2f2;
    }
    .fbads-card-badge.badge-warn {
        color: #b45309;
        background: #fffbeb;
    }
    .fbads-aviso {
        display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px;
        border-radius: 10px; font-size: 13px; line-height: 1.5;
        color: #92400e; background: var(--dt-surface-2); border: 0;
    }
    .fbads-aviso .ti { font-size: 18px; flex: none; margin-top: 1px; }
    .fbads-aviso .btn { margin-left: auto; flex: none; }
    .fbads-hint { font-size: 12px; color: var(--dt-muted); margin-top: 6px; line-height: 1.45; }
    [data-bs-theme="dark"] .fbads-hint { color: var(--dt-muted); }
    .fbads-mapping-ia { display: inline-flex; align-items: center; gap: 4px; }
    .fbads-mapping-ia .ti { font-size: 14px; }
    [data-bs-theme="dark"] .fbads-aviso { color: #fcd34d; background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); }
    [data-bs-theme="dark"] .fbads-card-badge.badge-warn { color: #fcd34d; background: rgba(245,158,11,.14); }
    .fbads-card-body {
        padding: 20px;
    }

    /* ── Connect box ── */
    .fbads-connect-box {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        background: var(--dt-surface);
        border: 1px dashed #d1d5db;
        border-radius: 12px;
    }
    .fbads-connect-ico {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        background: #e0e7ff;
        color: #4f46e5;
        flex-shrink: 0;
    }
    .fbads-connect-title {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--dt-text);
    }
    .fbads-connect-desc {
        font-size: 12px;
        color: var(--dt-muted);
        margin-top: 2px;
        max-width: 400px;
    }
    .fbads-btn-connect {
        margin-left: auto;
        white-space: nowrap;
        background: #1877f2 !important;
        border-color: #1877f2 !important;
    }
    .fbads-btn-connect:hover {
        background: #166fe5 !important;
        border-color: #166fe5 !important;
    }

    /* ── Connected info ── */
    .fbads-connected-info {
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .fbads-user-avatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #e0e7ff;
        color: #4f46e5;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        flex-shrink: 0;
    }
    .fbads-user-details {
        flex: 1;
        min-width: 0;
    }
    .fbads-user-name {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--dt-text);
    }
    .fbads-user-account {
        font-size: 12px;
        color: var(--dt-muted);
        margin-top: 1px;
    }

    /* ── Form rows ── */
    .fbads-form-row {
        margin-bottom: 12px;
    }
    .fbads-form-row label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: var(--dt-muted);
        margin-bottom: 5px;
    }
    .fbads-select {
        width: 100%;
        padding: 8px 12px;
        border: 0;
        border-radius: 8px;
        font-size: 13px;
        color: var(--dt-text);
        background: var(--dt-surface);
        outline: none;
        transition: border-color 0.15s;
    }
    .fbads-select:focus {
        border-color: #6366f1;
        box-shadow:none;
    }

    /* ── Mapping list ── */
    .fbads-mappings-list {
        padding: 0;
    }
    .fbads-mapping-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 20px;
        border-bottom: 1px solid #f0f0f0;
        transition: background-color 0.15s;
    }
    .fbads-mapping-item:hover {
        background: var(--dt-surface);
    }
    .fbads-mapping-item:last-child {
        border-bottom: none;
    }
    .fbads-mapping-ico {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        background: #e0e7ff;
        color: #4f46e5;
        flex-shrink: 0;
    }
    .fbads-mapping-info {
        flex: 1;
        min-width: 0;
    }
    .fbads-mapping-name {
        font-size: 13px;
        font-weight: 600;
        color: var(--dt-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .fbads-mapping-page {
        font-size: 11.5px;
        color: var(--dt-muted);
        margin-top: 1px;
    }
    .fbads-mapping-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }
    .fbads-mapping-actions button {
        padding: 4px 8px;
        font-size: 12px;
    }
    .fbads-badge-active {
        font-size: 10.5px;
        padding: 2px 8px;
        border-radius: 12px;
        font-weight: 600;
        background: #f0fdf4;
        color: #16a34a;
    }
    .fbads-badge-inactive {
        font-size: 10.5px;
        padding: 2px 8px;
        border-radius: 12px;
        font-weight: 600;
        background: #fef2f2;
        color: #dc2626;
    }

    /* ── Field mapper ── */
    .fbads-map-header {
        display: flex;
        padding: 8px 0;
        border-bottom: 2px solid #e5e7eb;
        margin-bottom: 4px;
    }
    .fbads-map-col-left, .fbads-map-col-right {
        flex: 1;
        font-size: 11.5px;
        font-weight: 700;
        color: var(--dt-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .fbads-map-col-right {
        padding-left: 12px;
    }
    .fbads-map-row {
        display: flex;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #f3f4f6;
    }
    .fbads-map-row:last-child {
        border-bottom: none;
    }
    .fbads-map-fb {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .fbads-map-fb-label {
        font-size: 13px;
        color: var(--dt-text);
        font-weight: 500;
    }
    .fbads-map-fb-type {
        font-size: 10px;
        padding: 1px 6px;
        border-radius: 4px;
        background: var(--dt-surface-2);
        color: var(--dt-muted);
        font-weight: 500;
    }
    .fbads-map-dl {
        flex: 1;
        padding-left: 12px;
    }
    .fbads-map-dl select {
        width: 100%;
        padding: 6px 10px;
        border: 0;
        border-radius: 6px;
        font-size: 12.5px;
        color: var(--dt-text);
        background: var(--dt-surface);
    }

    /* ── Settings divider ── */
    .fbads-settings-divider {
        height: 1px;
        background: var(--dt-surface-2);
        margin: 20px 0;
    }

    /* ── Static field rows ── */
    .fbads-static-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }
    .fbads-static-row select {
        flex: 1;
        padding: 6px 10px;
        border: 0;
        border-radius: 6px;
        font-size: 12.5px;
        color: var(--dt-text);
        background: var(--dt-surface);
    }
    .fbads-static-row input {
        flex: 1;
        padding: 6px 10px;
        border: 0;
        border-radius: 6px;
        font-size: 12.5px;
        color: var(--dt-text);
        background: var(--dt-surface);
    }
    .fbads-static-row input:focus,
    .fbads-static-row select:focus {
        border-color: #6366f1;
        outline: none;
        box-shadow:none;
    }
    .fbads-static-remove {
        width: 28px;
        height: 28px;
        border: none;
        background: var(--dt-surface-2);
        color: #dc2626;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        flex-shrink: 0;
    }
    .fbads-static-remove:hover {
        background: #fecaca;
    }

    /* ── Empty state ── */
    .fbads-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 40px 20px;
        color: var(--dt-muted);
        font-size: 13px;
    }
    .fbads-empty > i {
        font-size: 32px;
        opacity: 0.4;
    }

    /* ── Log ── */
    .fbads-log-body {
        max-height: 400px;
        overflow-y: auto;
    }
    .fbads-log-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 20px;
        border-bottom: 1px solid #f0f0f0;
        font-size: 12.5px;
    }
    .fbads-log-item:last-child {
        border-bottom: none;
    }
    .fbads-log-status {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .fbads-log-ok { background: #16a34a; }
    .fbads-log-err { background: #dc2626; }
    .fbads-log-name {
        flex: 1;
        color: var(--dt-text);
        font-weight: 500;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .fbads-log-form {
        color: var(--dt-muted);
        font-size: 11.5px;
    }
    .fbads-log-date {
        color: var(--dt-muted);
        font-size: 11px;
        flex-shrink: 0;
    }

    /* ── Responsive ── */
    @media (max-width: 640px) {
        .fbads-connect-box {
            flex-direction: column;
            text-align: center;
        }
        .fbads-btn-connect {
            margin-left: 0;
        }
        .fbads-map-header, .fbads-map-row {
            flex-direction: column;
            gap: 4px;
        }
        .fbads-map-dl {
            padding-left: 0;
            width: 100%;
        }
    }

    /* ── Dark mode ── */
    [data-bs-theme="dark"] .fbads-card {
        background: #1e293b;
        border-color: #334155;
        box-shadow:none;
    }
    [data-bs-theme="dark"] .fbads-card-head {
        border-bottom-color: #334155;
    }
    [data-bs-theme="dark"] .fbads-card-head-ico { color: #94a3b8; }
    [data-bs-theme="dark"] .fbads-card-title { color: var(--dt-text); }
    [data-bs-theme="dark"] .fbads-card-badge {
        color: #94a3b8;
        background: #0f172a;
    }
    [data-bs-theme="dark"] .fbads-card-badge.badge-ok {
        color: #86efac;
        background: rgba(22,163,74,.15);
    }
    [data-bs-theme="dark"] .fbads-card-badge.badge-off {
        color: #f87171;
        background: rgba(220,38,38,.15);
    }
    [data-bs-theme="dark"] .fbads-card-body {
        color: var(--dt-text);
    }

    [data-bs-theme="dark"] .fbads-connect-box {
        background: var(--dt-surface);
        border-color: #334155;
    }
    [data-bs-theme="dark"] .fbads-connect-ico {
        background: rgba(79,70,229,.2);
        color: #a5b4fc;
    }
    [data-bs-theme="dark"] .fbads-connect-title { color: var(--dt-text); }
    [data-bs-theme="dark"] .fbads-connect-desc { color: #94a3b8; }

    [data-bs-theme="dark"] .fbads-user-avatar {
        background: rgba(79,70,229,.2);
        color: #a5b4fc;
    }
    [data-bs-theme="dark"] .fbads-user-name { color: var(--dt-text); }
    [data-bs-theme="dark"] .fbads-user-account { color: #94a3b8; }

    [data-bs-theme="dark"] .fbads-form-row label { color: #94a3b8; }
    [data-bs-theme="dark"] .fbads-select {
        background: var(--dt-surface);
        border-color: #334155;
        color: var(--dt-text);
    }
    [data-bs-theme="dark"] .fbads-select:focus {
        border-color: #6366f1;
        box-shadow:none;
    }

    [data-bs-theme="dark"] .fbads-mapping-item {
        border-bottom-color: #334155;
    }
    [data-bs-theme="dark"] .fbads-mapping-item:hover {
        background: #263347;
    }
    [data-bs-theme="dark"] .fbads-mapping-ico {
        background: rgba(79,70,229,.2);
        color: #a5b4fc;
    }
    [data-bs-theme="dark"] .fbads-mapping-name { color: var(--dt-text); }
    [data-bs-theme="dark"] .fbads-mapping-page { color: #94a3b8; }
    [data-bs-theme="dark"] .fbads-badge-active {
        background: rgba(22,163,74,.15);
        color: #86efac;
    }
    [data-bs-theme="dark"] .fbads-badge-inactive {
        background: rgba(220,38,38,.15);
        color: #f87171;
    }

    [data-bs-theme="dark"] .fbads-map-header {
        border-bottom-color: #334155;
    }
    [data-bs-theme="dark"] .fbads-map-col-left,
    [data-bs-theme="dark"] .fbads-map-col-right { color: #94a3b8; }
    [data-bs-theme="dark"] .fbads-map-row {
        border-bottom-color: #1e293b;
    }
    [data-bs-theme="dark"] .fbads-map-fb-label { color: var(--dt-text); }
    [data-bs-theme="dark"] .fbads-map-fb-type {
        background: #334155;
        color: #94a3b8;
    }
    [data-bs-theme="dark"] .fbads-map-dl select {
        background: var(--dt-surface);
        border-color: #334155;
        color: var(--dt-text);
    }

    [data-bs-theme="dark"] .fbads-settings-divider { background: #334155; }

    [data-bs-theme="dark"] .fbads-static-row select,
    [data-bs-theme="dark"] .fbads-static-row input {
        background: var(--dt-surface);
        border-color: #334155;
        color: var(--dt-text);
    }
    [data-bs-theme="dark"] .fbads-static-remove {
        background: rgba(220,38,38,.15);
        color: #f87171;
    }
    [data-bs-theme="dark"] .fbads-static-remove:hover {
        background: rgba(220,38,38,.25);
    }

    [data-bs-theme="dark"] .fbads-empty { color: #64748b; }
    [data-bs-theme="dark"] .fbads-empty > i { color: #475569; }

    [data-bs-theme="dark"] .fbads-log-item {
        border-bottom-color: #334155;
    }
    [data-bs-theme="dark"] .fbads-log-name { color: var(--dt-text); }
    [data-bs-theme="dark"] .fbads-log-form { color: #94a3b8; }
    [data-bs-theme="dark"] .fbads-log-date { color: #64748b; }

    [data-bs-theme="dark"] .sg-refresh-btn {
        background: rgba(78,115,223,.15);
        color: #7c9af5;
    }
    [data-bs-theme="dark"] .sg-refresh-btn:hover {
        color: #a3bfff;
    }
/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Facebook Lead Ads: tarjetas con línea fina y sin sombra; iconos y avatar en cuadrado o círculo neutro (el azul de Facebook
   queda solo en el logo: el glifo ti-brand-facebook de la cabecera y de la caja de conexión); "Connect with Facebook" pasa
   del azul de marca a CTA en tinta; Add Form en tinta salvo con el mapeador abierto (entonces el CTA es Save Mapping);
   los .btn-soft- de este módulo (sin CSS en el CRM: salían como texto suelto) y los botones del aviso son ghost de 30 px con
   el rojo solo en el texto de borrar; estados con tinte suave y punto; selects con línea fuerte y foco neutro; colores en
   línea del JS (etiqueta Fixed Fields, iconos OK y error del registro) a tokens. El refresco no tenía estilo en claro. */
#akicontenidonormal .sg-refresh-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-size: 18px; cursor: pointer; border-radius: var(--dt-radius); background: transparent; color: var(--dt-muted); border: 0; transition: background .15s ease, color .15s ease; }
#akicontenidonormal .sg-refresh-btn:hover { background: var(--dt-hover); color: var(--dt-text); }
#akicontenidonormal .fbads-card { background: var(--dt-surface); border: 0; border-radius: var(--dt-radius-lg); box-shadow: none; }
#akicontenidonormal .fbads-card-head { border-bottom-color: var(--dt-border); }
#akicontenidonormal .fbads-card-head-ico { color: var(--dt-muted); }
#akicontenidonormal .fbads-card-head-ico.ti-brand-facebook { color: #1877f2; }
#akicontenidonormal .fbads-card-title, #akicontenidonormal .fbads-connect-title, #akicontenidonormal .fbads-user-name, #akicontenidonormal .fbads-mapping-name { color: var(--dt-text); font-weight: 600; }
#akicontenidonormal .fbads-card-body { color: var(--dt-text); }
#akicontenidonormal .fbads-card-badge { color: var(--dt-muted); background: var(--dt-surface-2); font-weight: 600; font-variant-numeric: tabular-nums; }
#akicontenidonormal .fbads-card-badge:is(.badge-ok, .badge-off, .badge-warn), #akicontenidonormal .fbads-badge-active, #akicontenidonormal .fbads-badge-inactive { display: inline-flex; align-items: center; gap: 6px; }
#akicontenidonormal .fbads-card-badge:is(.badge-ok, .badge-off, .badge-warn)::before, #akicontenidonormal .fbads-badge-active::before, #akicontenidonormal .fbads-badge-inactive::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
#akicontenidonormal .fbads-card-badge.badge-ok, #akicontenidonormal .fbads-badge-active { color: var(--dt-tint-ok-tx, var(--dt-success)); background: var(--dt-tint-ok-bg, var(--dt-surface-2)); }
#akicontenidonormal .fbads-card-badge.badge-off { color: var(--dt-tint-danger-tx, var(--dt-danger)); background: var(--dt-tint-danger-bg, var(--dt-surface-2)); }
#akicontenidonormal .fbads-card-badge.badge-warn { color: var(--dt-tint-warn-tx, var(--dt-warning)); background: var(--dt-tint-warn-bg, var(--dt-surface-2)); }
#akicontenidonormal .fbads-badge-inactive { color: var(--dt-muted); background: var(--dt-surface-2); }
#akicontenidonormal .fbads-aviso { background: var(--dt-surface); border: 0; border-radius: var(--dt-radius-lg); color: var(--dt-text); }
#akicontenidonormal .fbads-aviso > .ti { color: var(--dt-tint-warn-tx, var(--dt-warning)); }
#akicontenidonormal .fbads-hint, #akicontenidonormal .fbads-connect-desc, #akicontenidonormal .fbads-user-account, #akicontenidonormal .fbads-mapping-page, #akicontenidonormal .fbads-form-row label, #akicontenidonormal .fbads-map-col-left, #akicontenidonormal .fbads-map-col-right { color: var(--dt-muted); }
#akicontenidonormal .fbads-connect-box { background: transparent; border: 0; border-radius: var(--dt-radius-lg); }
#akicontenidonormal .fbads-connect-ico, #akicontenidonormal .fbads-mapping-ico { background: var(--dt-surface-2); color: var(--dt-muted); border: 0; border-radius: 10px; }
#akicontenidonormal .fbads-connect-ico .ti-brand-facebook { color: #1877f2; }
#akicontenidonormal .fbads-user-avatar { background: var(--dt-surface-2); color: var(--dt-muted); border: 1px solid var(--dt-border); }
#akicontenidonormal .fbads-btn-connect { display: inline-flex; align-items: center; gap: 6px; height: 34px; min-height: 34px; padding: 0 13px; font-weight: 600; border-radius: var(--dt-radius); background: var(--dt-cta) !important; border-color: var(--dt-cta) !important; color: var(--dt-cta-fg) !important; }
#akicontenidonormal .fbads-btn-connect:hover, #akicontenidonormal .fbads-btn-connect:focus { background: var(--dt-cta-hover) !important; border-color: var(--dt-cta-hover) !important; color: var(--dt-cta-fg) !important; }
#akicontenidonormal .fbads-select, #akicontenidonormal .fbads-map-dl select, #akicontenidonormal .fbads-static-row select, #akicontenidonormal .fbads-static-row input { background: var(--dt-surface); border: 0; border-radius: var(--dt-radius); color: var(--dt-text); }
#akicontenidonormal .fbads-select:focus, #akicontenidonormal .fbads-map-dl select:focus, #akicontenidonormal .fbads-static-row select:focus, #akicontenidonormal .fbads-static-row input:focus { border-color: var(--dt-focus, var(--dt-text)); box-shadow: none; outline: none; }
#akicontenidonormal .fbads-mapping-item, #akicontenidonormal .fbads-log-item { border-bottom-color: var(--dt-border); }
#akicontenidonormal .fbads-mapping-item:hover { background: var(--dt-hover); }
#akicontenidonormal .fbads-map-header { border-bottom: 1px solid var(--dt-border-strong); }
#akicontenidonormal .fbads-map-row { border-bottom-color: var(--dt-border); }
#akicontenidonormal .fbads-map-fb-label { color: var(--dt-text); }
#akicontenidonormal .fbads-map-fb-type { background: var(--dt-surface-2); color: var(--dt-muted); border: 0; }
#akicontenidonormal .fbads-settings-divider { background: var(--dt-border); }
#akicontenidonormal label[style*="color:#6b7280"] { color: var(--dt-muted) !important; font-weight: 600 !important; }
#akicontenidonormal .fbads-card .btn[class*="btn-soft-"], #akicontenidonormal .fbads-aviso .btn-primary, #akicontenidonormal:has(#fbads_mapper_section:not(.u-hidden)) #fbads_mappings_section .fbads-card-head .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; min-height: 30px; padding: 0 10px; font-weight: 600; border-radius: var(--dt-radius); background: transparent !important; color: var(--dt-text) !important; border: 0 !important; box-shadow: none !important; }
#akicontenidonormal .fbads-card .btn[class*="btn-soft-"]:hover, #akicontenidonormal .fbads-aviso .btn-primary:hover, #akicontenidonormal .fbads-aviso .btn-primary:focus, #akicontenidonormal:has(#fbads_mapper_section:not(.u-hidden)) #fbads_mappings_section .fbads-card-head .btn-primary:hover, #akicontenidonormal:has(#fbads_mapper_section:not(.u-hidden)) #fbads_mappings_section .fbads-card-head .btn-primary:focus { background: var(--dt-hover) !important; color: var(--dt-text) !important; border-color: var(--dt-border-strong) !important; }
#akicontenidonormal .fbads-card .btn.btn-soft-danger, #akicontenidonormal .fbads-card .btn.btn-soft-danger:hover { color: var(--dt-danger) !important; }
#akicontenidonormal #fbads_mappings_section .fbads-card-head .btn-primary, #akicontenidonormal #fbads_btn_saveaccount, #akicontenidonormal #fbads_btn_savemapping { display: inline-flex; align-items: center; gap: 5px; height: 30px; min-height: 30px; padding: 0 12px; font-weight: 600; border-radius: var(--dt-radius); }
#akicontenidonormal .fbads-static-remove { width: 30px; height: 30px; background: transparent; color: var(--dt-danger); border: 0; border-radius: var(--dt-radius); }
#akicontenidonormal .fbads-static-remove:hover { background: var(--dt-hover); }
#akicontenidonormal .fbads-empty { color: var(--dt-muted); }
#akicontenidonormal .fbads-empty > i { color: var(--dt-faint); opacity: 1; }
#akicontenidonormal .fbads-log-body table { font-variant-numeric: tabular-nums; }
#akicontenidonormal .fbads-log-body span[style*="#22c55e"] { color: var(--dt-tint-ok-tx, var(--dt-success)) !important; }
#akicontenidonormal .fbads-log-body span[style*="#ef4444"] { color: var(--dt-danger) !important; }
#akicontenidonormal .fbads-log-ok { background: var(--dt-success); }
#akicontenidonormal .fbads-log-err { background: var(--dt-danger); }
#akicontenidonormal .fbads-log-name { color: var(--dt-text); }
#akicontenidonormal .fbads-log-form, #akicontenidonormal .fbads-log-date { color: var(--dt-muted); }

}
/* end dui-template-style modules/integrations-facebookads:0 */
/* dui-template-style {"key":"modules/integrations-mt4manager:0","bytes":11636,"sha256":"6ed311ed009f4130b05eb3d1471a329e65e092f179fe3a6520fccd711803ea85","media":null,"source_sha256":"6ed311ed009f4130b05eb3d1471a329e65e092f179fe3a6520fccd711803ea85"} */
@scope (:root:has(template[data-dui-legacy-style="modules/integrations-mt4manager:0"])) {

    .form-group{
        margin-bottom:20px;
    }

    /* ===== 2026 rediseño Cabinet: bloque "How to activate" ===== */
    .cabinet-activate{
        display:flex; align-items:flex-start; gap:16px;
        padding:16px 18px;
        border:0;
        border-radius:14px;
        background:var(--el-hover, var(--bg-secondary-color, rgba(0,0,0,.02)));
    }
    .cabinet-activate-icon{
        flex:0 0 auto;
        width:44px; height:44px; border-radius:12px;
        display:flex; align-items:center; justify-content:center;
        font-size:22px; color:#2563eb;
        background:var(--dt-surface-2);
    }
    .cabinet-activate-title{
        font-size:.95rem; font-weight:600;
        color:var(--el-text, var(--text-color, #111827)); margin-bottom:4px;
    }
    .cabinet-activate-text{
        font-size:.84rem; line-height:1.5; margin:0 0 12px 0;
        color:var(--el-text-dim, var(--text-muted-color, #6b7280));
    }
    .cabinet-activate-btn{ border-radius:9px; font-weight:600; }

    /* ===== 2026 rediseño Cabinet: grid de plugins ===== */
    .plugins-grid{
        display:grid;
        grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
        gap:16px;
        align-items:stretch; /* misma altura para todas las cards de una misma fila */
        margin-bottom:24px;
    }
    .plugin-card{
        display:flex;
        flex-direction:column;
        border:0;
        border-radius:14px;
        background:var(--el-bg-raised, var(--module-color, #ffffff));
        overflow:hidden;
        transition:border-color .15s ease, box-shadow .15s ease;
    }
    .plugin-card:hover{ box-shadow:none; }
    /* estado instalado (checkbox marcado) */
    .plugin-card:has(.form-check-input:checked){
        border-color:#22c55e;
        box-shadow:0 0 0 1px rgba(34,197,94,.35);
    }
    .plugin-head{
        display:flex; align-items:center; gap:14px;
        padding:16px; margin:0;
        cursor:pointer; user-select:none;
    }
    .plugin-logo{
        position:relative; flex:0 0 auto;
        width:46px; height:46px;
        border-radius:11px;
        border:1px solid var(--el-border, var(--border-color, rgba(0,0,0,.08)));
        background:var(--el-hover, var(--bg-secondary-color, #f8fafc));
        overflow:hidden;
    }
    .plugin-logo img{
        position:absolute; inset:0; z-index:1;
        width:100%; height:100%;
        object-fit:contain; padding:7px;
        background:#ffffff; /* tile siempre claro: los logos de marca se leen en dark y light */
    }
    .plugin-logo-mono{
        position:absolute; inset:0; z-index:0;
        display:flex; align-items:center; justify-content:center;
        font-size:20px; font-weight:700;
        color:var(--el-text, #0f0f10); /* usa el color de texto del tema → contraste garantizado en dark y light */
        background:var(--dt-surface-2);
        text-transform:uppercase;
    }
    .plugin-info{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
    .plugin-name{
        font-size:.94rem; font-weight:600; line-height:1.2;
        color:var(--el-text, var(--text-color, #111827));
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .plugin-cat{ font-size:.74rem; color:var(--el-text-dim, var(--text-muted-color, #6b7280)); }
    .plugin-installed{
        display:none; align-items:center;
        font-size:.7rem; font-weight:600; color:#22c55e;
        background:rgba(34,197,94,.13);
        padding:3px 9px; border-radius:20px; white-space:nowrap;
    }
    .plugin-card:has(.form-check-input:checked) .plugin-installed{ display:inline-flex; }
    /* switch */
    .plugin-switch{ position:relative; flex:0 0 auto; width:42px; height:24px; }
    .plugin-switch input{
        position:absolute; inset:0; margin:0; width:100%; height:100%;
        opacity:0; cursor:pointer; z-index:2;
    }
    .plugin-switch-track{
        position:absolute; inset:0; border-radius:24px;
        background:var(--el-border, var(--border-color, #cbd5e1));
        transition:background .15s ease;
    }
    .plugin-switch-track::after{
        content:''; position:absolute; top:2px; left:2px;
        width:20px; height:20px; border-radius:50%;
        background:var(--dt-surface); box-shadow:0 1px 3px rgba(0,0,0,.35);
        transition:transform .15s ease;
    }
    .plugin-switch input:checked + .plugin-switch-track{ background:#22c55e; }
    .plugin-switch input:checked + .plugin-switch-track::after{ transform:translateX(18px); }
    /* body / campos */
    .plugin-body{
        padding:6px 16px 16px 16px;
        border-top:1px solid var(--el-border, var(--border-color, rgba(0,0,0,.08)));
    }
    .plugin-body .form-group{ margin-bottom:0; }
    .plugin-body label{
        display:block; margin-bottom:5px; padding-left:2px;
        font-size:.8rem; font-weight:500;
        color:var(--el-text-dim, var(--text-secondary-color, #6b7280));
    }
    .plugin-body .req{ color:#ef4444; font-weight:700; margin-left:1px; }
    .plugin-body .is-invalid{
        border-color:#ef4444 !important;
        box-shadow:none !important;
    }
    /* avisos monocromos (sobrescriben el azul de Bootstrap .alert-info → legibles en dark y light) */
    .plugin-body .alert{
        font-size:.8rem;
        background:var(--el-hover, var(--bg-secondary-color, rgba(0,0,0,.03)));
        border:1px solid var(--el-border, var(--border-color, rgba(0,0,0,.08)));
        color:var(--el-text-dim, var(--text-muted-color, #6b7280));
    }

    /* ===== 2026 rediseño Cabinet: cabecera de la sección Plugins ===== */
    .plugins-header{
        display:flex; align-items:center; gap:13px;
        padding:4px 0 12px 0;
    }
    .plugins-header-icon{
        flex:0 0 auto;
        width:40px; height:40px; border-radius:11px;
        display:flex; align-items:center; justify-content:center;
        font-size:20px; color:#2563eb;
        background:var(--dt-surface-2);
    }
    .plugins-header-body{ display:flex; flex-direction:column; min-width:0; }
    .plugins-header-title{
        margin:0; font-size:1rem; font-weight:600; line-height:1.25;
        color:var(--el-text, var(--text-color, #111827));
    }
    .plugins-header-sub{
        font-size:.78rem; line-height:1.35;
        color:var(--el-text-dim, var(--text-muted-color, #6b7280));
    }

    /* ===== 2026 rediseño Cabinet: formulario Settings por secciones ===== */
    .settings-form .settings-section{ padding:2px 0; }
    .settings-form .settings-section + .settings-section{
        margin-top:22px; padding-top:22px;
        border-top:1px solid var(--el-border, var(--border-color, rgba(0,0,0,.07)));
    }
    .settings-section-title{
        font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
        color:var(--el-text-dim, var(--text-muted-color, #6b7280));
        margin:0 0 14px 2px;
    }
    .settings-form .form-group{ margin-bottom:0; }
    .settings-form label.settings-lbl{
        display:block; margin-bottom:5px; padding-left:2px;
        font-size:.8rem; font-weight:500;
        color:var(--el-text-dim, var(--text-secondary-color, #6b7280));
    }
    .settings-lbl-icon{
        padding:1px; margin:0 0 0 5px;
        font-size:.85rem; color:var(--el-text-dim, var(--text-muted-color, #6b7280));
        cursor:pointer; vertical-align:baseline;
    }
    .settings-lbl-icon:hover{ color:#2563eb; }
    .settings-actions{ margin-top:26px; }
    .settings-actions .btn{ min-width:150px; border-radius:9px; font-weight:600; }

    @media (max-width: 575.98px){
        .plugins-grid{ grid-template-columns:1fr; }
    }
/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Cabinet: fuera los degradados azules de los iconos (cohete, enchufe y la letra de reserva de cada plugin) y la sombra al
   pasar; cuadrados neutros; tarjeta instalada con línea fuerte en vez del anillo verde; interruptor en tinta; píldora
   Installed con tinte suave; "Open Web Services" pasa a ghost para que Save sea el único CTA en tinta.
   Los logos de marca son imágenes sobre su baldosa blanca y no se tocan. */
#akicontenidonormal .cabinet-activate { background: transparent; border: 0; border-radius: var(--dt-radius-lg); }
#akicontenidonormal .cabinet-activate-icon, #akicontenidonormal .plugins-header-icon { width: 40px; height: 40px; border-radius: 10px; font-size: 20px; background: var(--dt-surface-2); color: var(--dt-muted); border: 0; }
#akicontenidonormal .cabinet-activate-title, #akicontenidonormal .plugins-header-title, #akicontenidonormal .plugin-name { color: var(--dt-text); }
#akicontenidonormal .cabinet-activate-text, #akicontenidonormal .plugins-header-sub, #akicontenidonormal .plugin-cat { color: var(--dt-muted); }
#akicontenidonormal .cabinet-activate-btn.btn-primary { display: inline-flex; align-items: center; height: 30px; min-height: 30px; padding: 0 12px; border-radius: var(--dt-radius); font-weight: 600; background: transparent !important; color: var(--dt-text) !important; border: 0 !important; box-shadow: none !important; }
#akicontenidonormal .cabinet-activate-btn.btn-primary:hover, #akicontenidonormal .cabinet-activate-btn.btn-primary:focus { background: var(--dt-hover) !important; color: var(--dt-text) !important; border-color: var(--dt-border-strong) !important; }
#akicontenidonormal .plugin-card { background: var(--dt-surface); border: 0; border-radius: var(--dt-radius-lg); box-shadow: none; }
#akicontenidonormal .plugin-card:hover { box-shadow: none; border-color: var(--dt-border-strong); }
#akicontenidonormal .plugin-card:has(.form-check-input:checked) { border-color: var(--dt-border-strong); box-shadow: none; }
#akicontenidonormal .plugin-logo { border: 1px solid var(--dt-border); border-radius: 10px; background: var(--dt-surface-2); }
#akicontenidonormal .plugin-logo-mono { background: var(--dt-surface-2); color: var(--dt-muted); font-weight: 600; }
#akicontenidonormal .plugin-installed { color: var(--dt-tint-ok-tx, var(--dt-success)); background: var(--dt-tint-ok-bg, var(--dt-surface-2)); font-weight: 600; }
#akicontenidonormal .plugin-switch-track { background: var(--dt-border-strong); }
#akicontenidonormal .plugin-switch-track::after { background: var(--dt-app); box-shadow: none; }
#akicontenidonormal .plugin-switch input:checked + .plugin-switch-track { background: var(--dt-cta); }
#akicontenidonormal .plugin-switch input:checked + .plugin-switch-track::after { background: var(--dt-cta-fg); }
#akicontenidonormal .plugin-switch input:focus-visible + .plugin-switch-track { outline: 1px solid var(--dt-focus); outline-offset: 2px; }
#akicontenidonormal .plugin-body { border-top-color: var(--dt-border); }
#akicontenidonormal .plugin-body label, #akicontenidonormal .settings-form label.settings-lbl, #akicontenidonormal .settings-section-title { color: var(--dt-muted); }
#akicontenidonormal .plugin-body .req { color: var(--dt-danger); }
#akicontenidonormal .plugin-body .is-invalid { border-color: var(--dt-danger) !important; box-shadow: none !important; }
#akicontenidonormal .plugin-body .alert { background: var(--dt-surface); border: 1px solid var(--dt-border-strong); border-radius: var(--dt-radius-lg); color: var(--dt-muted); }
#akicontenidonormal .settings-form .settings-section + .settings-section { border-top-color: var(--dt-border); }
#akicontenidonormal .settings-lbl-icon { color: var(--dt-muted); }
#akicontenidonormal .settings-lbl-icon:hover { color: var(--dt-text); }
#akicontenidonormal .settings-actions .btn { height: 34px; min-height: 34px; border-radius: var(--dt-radius); font-weight: 600; }

}
/* end dui-template-style modules/integrations-mt4manager:0 */
/* dui-template-style {"key":"modules/integrations-reseller:0","bytes":2254,"sha256":"db8618a604d5eafe8262d602d16416480e60a8542dcb3d0732a195eac40bbe85","media":null,"source_sha256":"db8618a604d5eafe8262d602d16416480e60a8542dcb3d0732a195eac40bbe85"} */
@scope (:root:has(template[data-dui-legacy-style="modules/integrations-reseller:0"])) {

    /* Bloque "How to activate" (mismo componente que integrations-mt4manager.html;
       su CSS vive dentro de ese modulo, asi que se replica aqui: los <style> de
       un modulo no estan cargados si no se ha visitado). */
    .cabinet-activate{
        display:flex; align-items:flex-start; gap:16px;
        padding:16px 18px;
        border:0;
        border-radius:14px;
        background:var(--el-hover, var(--bg-secondary-color, rgba(0,0,0,.02)));
    }
    .cabinet-activate-icon{
        flex:0 0 auto;
        width:44px; height:44px; border-radius:12px;
        display:flex; align-items:center; justify-content:center;
        font-size:22px; color:#2563eb;
        background:var(--dt-surface-2);
    }
    .cabinet-activate-title{
        font-size:.95rem; font-weight:600;
        color:var(--el-text, var(--text-color, #111827)); margin-bottom:4px;
    }
    .cabinet-activate-text{
        font-size:.84rem; line-height:1.5; margin:0 0 12px 0;
        color:var(--el-text-dim, var(--text-muted-color, #6b7280));
    }
    .cabinet-activate-btn{ border-radius:9px; font-weight:600; }
    /* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══ Marca blanca: mismo arreglo que
       integrations-mt4manager.html (de donde se copió este cuadro): icono en cuadrado neutro (antes azul en degradado), caja con línea fina
       y "Open Web Services" ghost de 30 px, para que Guardar sea el único CTA en tinta. */
    #akicontenidonormal .cabinet-activate { background: transparent; border: 0; border-radius: var(--dt-radius-lg); }
    #akicontenidonormal .cabinet-activate-icon { width: 40px; height: 40px; border-radius: 10px; font-size: 20px; background: var(--dt-surface-2); color: var(--dt-muted); border: 0; }
    #akicontenidonormal .cabinet-activate-btn.btn-primary { display: inline-flex; align-items: center; height: 30px; min-height: 30px; padding: 0 12px; border-radius: var(--dt-radius); font-weight: 600; background: transparent !important; color: var(--dt-text) !important; border: 0 !important; box-shadow: none !important; }
    #akicontenidonormal .cabinet-activate-btn.btn-primary:hover { background: var(--dt-hover) !important; }

}
/* end dui-template-style modules/integrations-reseller:0 */
/* dui-template-style {"key":"modules/integrations-storage:0","bytes":14862,"sha256":"22ce66ea4671a7fc7e7b3e69c39f0b95111760245b8a8b9542a7141d85798bfb","media":null,"source_sha256":"22ce66ea4671a7fc7e7b3e69c39f0b95111760245b8a8b9542a7141d85798bfb"} */
@scope (:root:has(template[data-dui-legacy-style="modules/integrations-storage:0"])) {

    /* ── Refresh button ── */
    .sg-refresh-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: var(--dt-surface-2);
        color: #4e73df;
        cursor: pointer;
        transition: all .2s ease;
        font-size: 18px;
    }
    .sg-refresh-btn:hover {
        color: #3b5cc6;
        transform: rotate(90deg);
    }

    /* ── Card base ── */
    .sg-card {
        background: var(--dt-surface);
        border-radius: 16px;
        border: 0;
        margin-bottom: 20px;
        box-shadow:none;
        overflow: hidden;
    }
    .sg-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px;
        border-bottom: 1px solid #f2f3f5;
    }
    .sg-card-head-left {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .sg-card-head-ico {
        font-size: 16px;
        color: var(--dt-muted);
    }
    .sg-card-title {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--dt-text);
        letter-spacing: -0.01em;
    }
    .sg-card-badge {
        font-size: 10.5px;
        color: #9ca3af;
        background: #f9fafb;
        padding: 3px 10px;
        border-radius: 20px;
        font-weight: 500;
    }
    .sg-card-badge-warn {
        color: #d97706;
        background: #fffbeb;
    }

    /* ── Stats grid ── */
    .sg-stats {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    }
    .sg-stat {
        padding: 20px 18px 16px;
        border-right: 1px solid #f5f5f7;
        border-bottom: 1px solid #f5f5f7;
        transition: background .15s ease;
        position: relative;
    }
    .sg-stat:hover { background: var(--dt-surface); }
    .sg-stat-ico {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 14px;
        font-size: 17px;
    }
    .sg-stat-indigo { background: var(--dt-surface-2); color: #4f46e5; }
    .sg-stat-emerald { background: var(--dt-surface-2); color: #059669; }
    .sg-stat-blue { background: var(--dt-surface-2); color: #2563eb; }
    .sg-stat-violet { background: var(--dt-surface-2); color: #7c3aed; }
    .sg-stat-amber { background: var(--dt-surface-2); color: #d97706; }
    .sg-stat-orange { background: var(--dt-surface-2); color: #ea580c; }
    .sg-stat-green { background: var(--dt-surface-2); color: #16a34a; }
    .sg-stat-val {
        font-size: 1.4rem;
        font-weight: 800;
        color: var(--dt-text);
        line-height: 1;
        letter-spacing: -0.025em;
    }
    .sg-stat-lbl {
        font-size: 11px;
        color: var(--dt-muted);
        margin-top: 5px;
        font-weight: 500;
        letter-spacing: 0.01em;
    }

    /* ── Price cards ── */
    .sg-price {
        background: var(--dt-surface);
        border-radius: 16px;
        border: 0;
        margin-bottom: 20px;
        box-shadow:none;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }
    .sg-price-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 20px;
    }
    .sg-price-green { background:var(--dt-surface-2); }
    .sg-price-blue  { background:var(--dt-surface-2); }
    .sg-price-orange { background:var(--dt-surface-2); }
    .sg-price-icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 19px;
        flex-shrink: 0;
    }
    .sg-price-green .sg-price-icon { background: #dcfce7; color: #16a34a; }
    .sg-price-blue .sg-price-icon  { background: #dbeafe; color: #2563eb; }
    .sg-price-orange .sg-price-icon { background: #fed7aa; color: #ea580c; }
    .sg-price-name {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--dt-text);
        letter-spacing: -0.01em;
    }
    .sg-price-desc {
        font-size: 11px;
        color: var(--dt-muted);
        margin-top: 1px;
    }
    .sg-price-body {
        padding: 16px 20px 20px;
        font-size: 12.5px;
        color: var(--dt-muted);
        line-height: 2;
        flex: 1;
    }
    .sg-price-row + .sg-price-row {
        margin-top: 6px;
        padding-top: 8px;
        border-top: 1px dashed #eef0f3;
    }

    /* ── Total costs ── */
    .sg-total-body {
        padding: 16px 20px 20px;
        font-size: 13px;
        color: var(--dt-muted);
        line-height: 2;
    }
    .sg-total-body strong { color: var(--dt-text); }

    /* ── Tools / Danger zone ── */
    .sg-card-danger { border-color: #fecaca; }
    .sg-card-head-danger {
        background: var(--dt-surface-2);
        border-bottom-color: #fecaca;
    }
    .sg-card-head-ico-danger {
        font-size: 17px;
        color: #dc2626;
    }
    .sg-danger-alert {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 14px 20px 0;
        padding: 10px 14px;
        background: #fffbeb;
        border: 1px solid #fde68a;
        border-radius: 10px;
        font-size: 12px;
        color: #92400e;
        line-height: 1.5;
    }
    .sg-danger-alert > i {
        font-size: 16px;
        flex-shrink: 0;
        color: #d97706;
    }
    .sg-tools-body { padding: 14px 20px 16px; }
    .sg-tool-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .sg-tool-info {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }
    .sg-tool-ico {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 17px;
    }
    .sg-tool-ico-warn { background: #fef3c7; color: #d97706; }
    .sg-tool-ico-danger { background: var(--dt-surface-2); color: #dc2626; }
    .sg-tool-name {
        font-size: 13px;
        font-weight: 600;
        color: var(--dt-text);
    }
    .sg-tool-desc {
        font-size: 11.5px;
        color: var(--dt-muted);
        margin-top: 1px;
    }
    .sg-tool-divider {
        height: 1px;
        background: var(--dt-surface-2);
        margin: 12px 0;
    }

    /* ── Responsive ── */
    @media (max-width: 767px) {
        .sg-stats { grid-template-columns: repeat(2, 1fr); }
        .sg-stat { border-right: none; }
    }

    /* ── Dark mode ── */
    [data-bs-theme="dark"] .sg-refresh-btn {
        background: rgba(78,115,223,.15);
        color: #7c9af5;
    }
    [data-bs-theme="dark"] .sg-refresh-btn:hover {
        color: #a3bfff;
    }

    [data-bs-theme="dark"] .sg-card {
        background: #1e293b;
        border-color: #334155;
        box-shadow:none;
    }
    [data-bs-theme="dark"] .sg-card-head {
        border-bottom-color: #334155;
    }
    [data-bs-theme="dark"] .sg-card-head-ico { color: #94a3b8; }
    [data-bs-theme="dark"] .sg-card-title { color: var(--dt-text); }
    [data-bs-theme="dark"] .sg-card-badge {
        color: #94a3b8;
        background: #0f172a;
    }

    [data-bs-theme="dark"] .sg-stat {
        border-right-color: #334155;
        border-bottom-color: #334155;
    }
    [data-bs-theme="dark"] .sg-stat:hover { background: #263347; }
    [data-bs-theme="dark"] .sg-stat-val { color: var(--dt-text); }
    [data-bs-theme="dark"] .sg-stat-lbl { color: #94a3b8; }

    [data-bs-theme="dark"] .sg-stat-indigo { background: rgba(79,70,229,.15); color: #a5b4fc; }
    [data-bs-theme="dark"] .sg-stat-emerald { background: rgba(5,150,105,.15); color: #6ee7b7; }
    [data-bs-theme="dark"] .sg-stat-blue   { background: rgba(37,99,235,.15); color: #93c5fd; }
    [data-bs-theme="dark"] .sg-stat-violet { background: rgba(124,58,237,.15); color: #c4b5fd; }
    [data-bs-theme="dark"] .sg-stat-amber  { background: rgba(217,119,6,.15); color: #fcd34d; }
    [data-bs-theme="dark"] .sg-stat-orange { background: rgba(234,88,12,.15); color: #fdba74; }
    [data-bs-theme="dark"] .sg-stat-green  { background: rgba(22,163,74,.15); color: #86efac; }

    [data-bs-theme="dark"] .sg-price {
        background: #1e293b;
        border-color: #334155;
        box-shadow:none;
    }
    [data-bs-theme="dark"] .sg-price-green  { background:var(--dt-surface-2); }
    [data-bs-theme="dark"] .sg-price-blue   { background:var(--dt-surface-2); }
    [data-bs-theme="dark"] .sg-price-orange { background:var(--dt-surface-2); }
    [data-bs-theme="dark"] .sg-price-green .sg-price-icon  { background: rgba(22,163,74,.2); color: #86efac; }
    [data-bs-theme="dark"] .sg-price-blue .sg-price-icon   { background: rgba(37,99,235,.2); color: #93c5fd; }
    [data-bs-theme="dark"] .sg-price-orange .sg-price-icon { background: rgba(234,88,12,.2); color: #fdba74; }
    [data-bs-theme="dark"] .sg-price-name { color: var(--dt-text); }
    [data-bs-theme="dark"] .sg-price-desc { color: #94a3b8; }
    [data-bs-theme="dark"] .sg-price-body { color: var(--dt-text); }
    [data-bs-theme="dark"] .sg-price-row + .sg-price-row { border-top-color: #334155; }

    [data-bs-theme="dark"] .sg-total-body { color: var(--dt-text); }
    [data-bs-theme="dark"] .sg-total-body strong { color: var(--dt-text); }

    [data-bs-theme="dark"] .sg-card-danger { border-color: #991b1b; }
    [data-bs-theme="dark"] .sg-card-head-danger {
        background: rgba(220,38,38,.12);
        border-bottom-color: #991b1b;
    }
    [data-bs-theme="dark"] .sg-card-head-ico-danger { color: #f87171; }
    [data-bs-theme="dark"] .sg-danger-alert {
        background: rgba(217,119,6,.1);
        border-color: rgba(253,230,138,.2);
        color: #fcd34d;
    }
    [data-bs-theme="dark"] .sg-danger-alert > i { color: #fbbf24; }

    [data-bs-theme="dark"] .sg-tool-name { color: var(--dt-text); }
    [data-bs-theme="dark"] .sg-tool-desc { color: #94a3b8; }
    [data-bs-theme="dark"] .sg-tool-ico-warn   { background: rgba(217,119,6,.15); color: #fcd34d; }
    [data-bs-theme="dark"] .sg-tool-ico-danger  { background: rgba(220,38,38,.15); color: #f87171; }
    [data-bs-theme="dark"] .sg-tool-divider { background: #334155; }
/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Costes de almacenamiento: tarjetas con línea fina y sin sombra, iconos de las estadísticas y de los precios en cuadrado
   neutro, cabeceras de precio sin degradado, zona de peligro sin fondos rojos ni ámbar (el rojo solo en el icono, el texto y
   el borde suave del botón), total en tinta (el JS lo escribe en línea en #7c5cbf) y números tabulares.
   Scope #akicontenidonormal: este style solo existe con el módulo cargado. */
#akicontenidonormal .sg-refresh-btn { width: 34px; height: 34px; border-radius: var(--dt-radius); background: transparent; color: var(--dt-muted); border: 0; }
#akicontenidonormal .sg-refresh-btn:hover { background: var(--dt-hover); color: var(--dt-text); }
#akicontenidonormal .sg-card, #akicontenidonormal .sg-price { background: var(--dt-surface); border: 0; border-radius: var(--dt-radius-lg); box-shadow: none; }
#akicontenidonormal .sg-card-head { border-bottom-color: var(--dt-border); }
#akicontenidonormal .sg-card-head-ico { color: var(--dt-muted); }
#akicontenidonormal .sg-card-title, #akicontenidonormal .sg-price-name, #akicontenidonormal .sg-tool-name { color: var(--dt-text); font-weight: 600; }
#akicontenidonormal .sg-card-badge { color: var(--dt-muted); background: transparent; border: 1px solid var(--dt-border); font-weight: 500; }
#akicontenidonormal .sg-stat { border-right-color: var(--dt-border); border-bottom-color: var(--dt-border); }
#akicontenidonormal .sg-stat:hover { background: var(--dt-hover); }
#akicontenidonormal .sg-stat-ico, #akicontenidonormal .sg-price-icon, #akicontenidonormal .sg-tool-ico { background: var(--dt-surface-2); color: var(--dt-muted); border: 0; border-radius: 9px; }
#akicontenidonormal .sg-stat-val { color: var(--dt-text); font-weight: 600; font-variant-numeric: tabular-nums; }
#akicontenidonormal .sg-stat-lbl, #akicontenidonormal .sg-price-desc, #akicontenidonormal .sg-tool-desc { color: var(--dt-muted); }
#akicontenidonormal .sg-price-head { background: transparent; border-bottom: 1px solid var(--dt-border); }
#akicontenidonormal .sg-price-body, #akicontenidonormal .sg-total-body { color: var(--dt-muted); font-variant-numeric: tabular-nums; }
#akicontenidonormal .sg-price-body strong, #akicontenidonormal .sg-total-body strong { color: var(--dt-text); font-weight: 600; }
#akicontenidonormal .sg-price-row + .sg-price-row { border-top: 1px solid var(--dt-border); }
#akicontenidonormal .sg-total-body span[style*="#7c5cbf"] { color: var(--dt-text) !important; font-weight: 700 !important; }
#akicontenidonormal .sg-card-danger { border-color: var(--dt-border); }
#akicontenidonormal .sg-card-head-danger { background: transparent; border-bottom-color: var(--dt-border); }
#akicontenidonormal .sg-card-head-ico-danger { color: var(--dt-danger); }
#akicontenidonormal .sg-danger-alert { background: var(--dt-surface); border: 1px solid var(--dt-border-strong); border-radius: var(--dt-radius-lg); color: var(--dt-text); }
#akicontenidonormal .sg-danger-alert > i { color: var(--dt-tint-warn-tx, var(--dt-warning)); }
#akicontenidonormal .sg-tool-ico-danger { color: var(--dt-danger); }
#akicontenidonormal .sg-tool-name.text-danger { color: var(--dt-danger) !important; }
#akicontenidonormal .sg-tool-divider { background: var(--dt-border); }
#akicontenidonormal #btndrive_deletenotmyclient, #akicontenidonormal #btndrive_deleteall { min-height: 30px; height: 30px; padding: 0 12px; border-radius: var(--dt-radius); font-weight: 600; background: transparent !important; box-shadow: none !important; }
#akicontenidonormal #btndrive_deletenotmyclient { color: var(--dt-text); border: 0; }
#akicontenidonormal #btndrive_deletenotmyclient:hover { background: var(--dt-hover) !important; }
#akicontenidonormal #btndrive_deleteall { color: var(--dt-danger) !important; border: 0 !important; }
#akicontenidonormal #btndrive_deleteall:hover { background: var(--dt-tint-danger-bg, var(--dt-hover)) !important; color: var(--dt-danger) !important; }

}
/* end dui-template-style modules/integrations-storage:0 */
/* dui-template-style {"key":"modules/managerdatatrade:0","bytes":2318,"sha256":"84f75e26e73c48c872a7b18ca073586f09b9b0e627e7d1808a585b3c0a3b212b","media":null,"source_sha256":"7feb24b98d939f1d7158e9f2e35108cd4863ea7d346a24ae859f1d0951a6a891"} */
@scope (:root:has(template[data-dui-legacy-style="modules/managerdatatrade:0"])) {

    /* Tema claro */
    .ag-theme-custom{
        --ag-font-size:13px;
        --ag-wrapper-border-radius:8px;
        --ag-header-column-separator-display:none;
    }
    /* Tema oscuro */
    :scope[data-bs-theme="dark"] .ag-center-cols-viewport{color:var(--text-color);}
    :scope[data-bs-theme="dark"] .ag-overlay-no-rows-center{color:var(--dt-muted);}
    :scope[data-bs-theme="dark"] .ag-theme-custom{
        --ag-font-size:13px;
        --ag-wrapper-border-radius:8px;
        --ag-header-column-separator-display:none;
    }
    :scope[data-bs-theme="dark"] .ag-cell,
    :scope[data-bs-theme="dark"] .ag-icon,
    :scope[data-bs-theme="dark"] .ag-picker-field-display,
    :scope[data-bs-theme="dark"] .ag-label,
    :scope[data-bs-theme="dark"] .ag-text-field,
    :scope[data-bs-theme="dark"] .ag-picker-field-wrapper,
    :scope[data-bs-theme="dark"] .ag-text-option,
    :scope[data-bs-theme="dark"] .ag-text-field-input,
    :scope[data-bs-theme="dark"] .ag-popup{color:var(--text-color);}
    .ag-theme-custom .managerdt-link {
        appearance: none;
        display: inline-block;
        max-width: 100%;
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: var(--dt-link, #0068b5);
        font: inherit;
        font-weight: 500;
        text-align: left;
        vertical-align: top;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        text-decoration: none;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
    }
    .ag-theme-custom .managerdt-link:hover,
    .ag-theme-custom .managerdt-link:focus-visible {
        text-decoration: underline;
    }
    .ag-theme-custom .managerdt-link:focus-visible {
        outline: 2px solid var(--dt-link, #0068b5);
        outline-offset: 2px;
    }
    .ag-theme-custom .managerdt-link--account {
        font-variant-numeric: tabular-nums;
    }
    .tbgred{background:#3b1212;color:#ff7a7a;padding:2px 6px;border-radius:6px;font-weight:600}
    .tbggreen{background:#0f2f1a;color:#66e08a;padding:2px 6px;border-radius:6px;font-weight:600}
    .red{color:#ff6b6b}
    .green{color:#6bdc7a}

}
/* end dui-template-style modules/managerdatatrade:0 */
/* dui-template-style {"key":"modules/metacurrenttemplates:0","bytes":284,"sha256":"be97fee96ae3cbfe5e5206a21bbf9838c7fd47b2293943ec490d1ee05bee71cb","media":null,"source_sha256":"be97fee96ae3cbfe5e5206a21bbf9838c7fd47b2293943ec490d1ee05bee71cb"} */
@scope (:root:has(template[data-dui-legacy-style="modules/metacurrenttemplates:0"])) {

    #metaTemplatesEmpty[hidden] { display: none !important; }
    .approved { color: var(--bs-success) !important;font-weight:bold; }
    .rejected { color: var(--bs-danger) !important;font-weight:bold; }
    .pending { color: var(--bs-warning) !important;font-weight:bold; }
  
}
/* end dui-template-style modules/metacurrenttemplates:0 */
/* dui-template-style {"key":"modules/metacurrenttemplates:1","bytes":1478,"sha256":"011b51b1026b5c7450992e096ac708ee4204b90043efb1453034611774f29479","media":null,"source_sha256":"8a5369c5857037dec28d50c877153aa9e90eedfaa5ef63639d5a0ab4b8724d25"} */
@scope (:root:has(template[data-dui-legacy-style="modules/metacurrenttemplates:1"])) {

    #gridDivTemplatesWhats.ag-theme-custom {
      --ag-font-size: 13px;
      --ag-wrapper-border-radius: 8px;
      --ag-header-column-separator-display: none;
    }
    :scope[data-bs-theme="dark"] #gridDivTemplatesWhats .ag-center-cols-viewport{
      color: var(--dt-text);
    }
    :scope[data-bs-theme="dark"] #gridDivTemplatesWhats .ag-overlay-no-rows-center{
      color: var(--dt-muted);
    }
    :scope[data-bs-theme="dark"] #gridDivTemplatesWhats.ag-theme-custom {
      --ag-font-size: 13px;
      --ag-wrapper-border-radius: 8px;
      --ag-header-column-separator-display: none;
    }
    :scope[data-bs-theme="dark"] #gridDivTemplatesWhats .ag-cell,
    :scope[data-bs-theme="dark"] #gridDivTemplatesWhats .ag-icon,
    :scope[data-bs-theme="dark"] #gridDivTemplatesWhats .ag-picker-field-display,
    :scope[data-bs-theme="dark"] #gridDivTemplatesWhats .ag-label,
    :scope[data-bs-theme="dark"] #gridDivTemplatesWhats .ag-text-field,
    :scope[data-bs-theme="dark"] #gridDivTemplatesWhats .ag-picker-field-wrapper,
    :scope[data-bs-theme="dark"] #gridDivTemplatesWhats .ag-text-option,
    :scope[data-bs-theme="dark"] #gridDivTemplatesWhats .ag-text-field-input,
    :scope[data-bs-theme="dark"] #gridDivTemplatesWhats .ag-popup{
      color: var(--dt-text);
    }
    :scope[data-bs-theme="dark"] #gridDivTemplatesWhats .custom-header {
      background-color: var(--dt-surface-2);
      color: var(--dt-text);
    }
  
}
/* end dui-template-style modules/metacurrenttemplates:1 */
/* dui-template-style {"key":"modules/metatemplates:0","bytes":3844,"sha256":"110007af01febbbabc68e764d28310c783e3d50dd6b94922a02c10670302176c","media":null,"source_sha256":"110007af01febbbabc68e764d28310c783e3d50dd6b94922a02c10670302176c"} */
@scope (:root:has(template[data-dui-legacy-style="modules/metatemplates:0"])) {

.wtl-views{display:flex;flex-direction:column;gap:4px;margin:20px 0 12px;border-top:1px solid var(--dt-border,#ddd);padding-top:16px}
.wtl-views button{display:flex;justify-content:space-between;padding:9px 10px;border:0;border-radius:6px;background:transparent;color:var(--dt-text,#222);font:inherit;font-size:13px;text-align:left}
.wtl-views button[aria-pressed="true"]{background:var(--dt-active,#ededed);font-weight:600}
.wtl-views button:hover{background:var(--dt-hover,#f4f4f4)}
.wtl-own-card{padding:18px;border:0;border-radius:10px;background:var(--dt-surface,#fff);height:100%}
.wtl-own-head h3{font-size:14px;overflow-wrap:anywhere;margin:0 0 10px}.wtl-status{display:inline-block;font-size:11px;padding:3px 7px;border-radius:5px;background:var(--dt-active,#eee);color:var(--dt-text,#222)}
.wtl-status[data-status="APPROVED"]{color:#08775e;background:#e1f1eb}.wtl-status[data-status="PENDING"],.wtl-status[data-status="SUBMITTED"]{color:#895715;background:#fcf0d8}
.wtl-body{font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;margin:18px 0}.wtl-meta{font-size:11px;color:var(--dt-muted,#666)}.wtl-empty{padding:48px 24px;text-align:center;color:var(--dt-muted,#666)}
#templatesGrid .whatsapp-card{background:var(--dt-surface,#fff)!important;color:var(--dt-text,#222);box-shadow:none!important}
#templatesGrid .wtl-use{border:0;color:var(--dt-text,#222);background:var(--dt-surface,#fff);margin-top:12px;text-align:center}
#templatesGrid .wtl-use:hover{background:var(--dt-active,#eee)}
#wtlLibraryFilters[hidden]{display:none!important}

  .input-container {
    position: relative;
    display: inline-block;
  }
  input:disabled,textarea:disabled,select:disabled {
    cursor: not-allowed !important;
  }
  button:disabled {
    cursor: not-allowed !important;
    pointer-events: stroke;
  }
  .textarearesize {
    width: 100%;
    height: 200px;
    padding: 10px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid var(--dt-border);
    border-radius: 4px;
    background-color: var(--dt-surface);
    color: var(--dt-text);
    resize: vertical;
    outline: none;
    box-shadow: none;
  }
  .textarearesize:focus {
    border-color: var(--dt-focus);
    box-shadow: none;
  }
  .btnsdisableds {
    pointer-events: none !important;
  }
  .contador-textarea {
    font-size: 0.9em;
  }
  .contador-input {
    position: absolute;
    right: 10px;
    top: 98%;
    transform: translateY(-50%);
    font-size: 0.9em;
  }
  #completePreviewArea button {
    pointer-events: none !important;
  }
  .templatescats label {
    cursor: pointer;
  }
  .whatsapp-card {
    border-radius: 10px;
    padding: 15px;
    min-height: 150px;
    position: relative;
  }
  .whatsapp-card .title {
    font-weight: 600;
    margin-bottom: 6px;
  }
  .whatsapp-card .preview-text {
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: pre-line;
  }
  .whatsapp-preview-area .placeholder-var,
  .whatsapp-card .preview-text .placeholder-var {
    color: inherit;
  }
  .whatsapp-preview-area .placeholder-varnum,
  .whatsapp-card .preview-text .placeholder-varnum {
    display: none;
  }
  .whatsapp-preview-area:hover .placeholder-var,
  .whatsapp-card .preview-text:hover .placeholder-var {
    display: none;
  }
  .whatsapp-preview-area:hover .placeholder-varnum,
  .whatsapp-card .preview-text:hover .placeholder-varnum {
    display: unset;
    color: #198754;
    font-weight: 600;
  }
  .template-internal-name {
    font-size: 0.8rem;
    color: var(--dt-muted);
    margin-top: 4px;
  }
  .placeholder-var {
    color: #198754;
    font-weight: 600;
  }
  .whatsapp-preview-area {
    border-radius: 8px;
    padding: 10px;
    min-height: 130px;
    margin-top: 10px;
  }

}
/* end dui-template-style modules/metatemplates:0 */
/* dui-template-style {"key":"modules/mt4groups:0","bytes":2435,"sha256":"913b32d7b8a6cf30c49276ab5aab66a383a0732df0efefd9de599c6587ca4ae5","media":null,"source_sha256":"aafee839dd0fd21b0a89802e2e73e6531c7def78da83508ad3092a8d6ec0b1f3"} */
@scope (:root:has(template[data-dui-legacy-style="modules/mt4groups:0"])) {

    /* alto 100% de la pagina: el unico scroll vertical es el de la tabla (dui-dt-card) */
    #mt4groupspage{display:flex;flex-direction:column;height:var(--app-page-height,calc(100vh - 120px));min-height:0;overflow-y:auto;overflow-x:hidden;}
    #mt4groupspage > .d-flex:first-child{flex:0 0 auto;}

    /* 2026: el formulario Add/Edit se muestra como modal (overlay). No se toca la logica: se sigue
       abriendo/cerrando con u-hidden desde tablamt4_edit / btn-close / Cancel. z-index 1040 para
       quedar por debajo de los modales bootstrap (1055) y de bootbox/alerta. */
    #mt4groupspage #tablacrearnuevodiv{position:fixed;inset:0;z-index:1040;margin:0!important;padding:32px 16px;display:flex;align-items:flex-start;justify-content:center;background:rgba(0,0,0,.45);overflow-y:auto;}
    #mt4groupspage #tablacrearnuevodiv > .card{width:100%;max-width:900px;margin:auto;box-shadow:none;}
    #mt4groupspage .mt4grp-tablerow{flex:1 1 auto;min-height:260px;margin-bottom:0;}
    #mt4groupspage .mt4grp-tablerow > .col{display:flex;min-width:0;}
    #mt4groupspage .mt4grp-tablerow .card{flex:1;display:flex;flex-direction:column;min-height:0;width:100%;}
    #mt4groupspage .mt4grp-tablerow .card > .card-body{flex:1;min-height:0;display:flex;flex-direction:column;}
    #mt4groupspage .mt4grp-tablerow .table-responsive{flex:1;min-height:0;display:flex;flex-direction:column;}
    #mt4groupspage .mt4grp-tablerow .table-responsive > div{flex:1;min-height:0;display:flex;flex-direction:column;}
    #mt4groupspage .dui-dt{flex:1;min-height:0;}
    #mt4groupspage .dui-dt-card{flex:1 1 auto;min-height:0;max-height:none;}
    /* caja de condiciones de trading del formulario */
    #tablacrearnuevodiv .mt4grp-groupbox{border:0;border-radius:10px;padding:12px 14px;height:100%;}
    #tablacrearnuevodiv .mt4grp-groupbox-head{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:8px;padding-bottom:10px;border-bottom:1px solid var(--el-border,var(--border-color,#e5e7eb));}
    /* chips monospace / leverage de la tabla */
    .mt4grp-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;background:rgba(0,0,0,.05);border:0;border-radius:6px;padding:2px 8px;display:inline-block;}
    .mt4grp-lev{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:600;}
    :scope[data-bs-theme="dark"] .mt4grp-mono{background:rgba(255,255,255,.06);}

}
/* end dui-template-style modules/mt4groups:0 */
/* dui-template-style {"key":"modules/mt4promocodes:0","bytes":2912,"sha256":"d615077860144b39cc7c7bcd9fd32ce965ebaaa913f5effe0d900b9a050e794d","media":null,"source_sha256":"e84da8a02b86acb3f9b1b14f1fb9dfbc38f0551479e64716d30a1f945449b84f"} */
@scope (:root:has(template[data-dui-legacy-style="modules/mt4promocodes:0"])) {

    /* alto 100% de la pagina: el unico scroll vertical es el de la tabla (dui-dt-card) */
    #mt4promospage{display:flex;flex-direction:column;height:var(--app-page-height,calc(100vh - 120px));min-height:0;overflow-y:auto;overflow-x:hidden;}
    #mt4promospage > .d-flex:first-child{flex:0 0 auto;}

    /* 2026: el formulario Add/Edit se muestra como modal (overlay). No se toca la logica: se sigue
       abriendo/cerrando con u-hidden desde tablamt4_edit / btn-close / Cancel. z-index 1040 para
       quedar por debajo de los modales bootstrap (1055) y de bootbox/alerta. */
    #mt4promospage #tablacrearnuevodiv{position:fixed;inset:0;z-index:1040;margin:0!important;padding:32px 16px;display:flex;align-items:flex-start;justify-content:center;background:rgba(0,0,0,.45);overflow-y:auto;}
    #mt4promospage #tablacrearnuevodiv > .card{width:100%;max-width:900px;margin:auto;box-shadow:none;}
    #mt4promospage .mt4promo-tablerow{flex:1 1 auto;min-height:260px;margin-bottom:0;}
    #mt4promospage .mt4promo-tablerow > .col{display:flex;min-width:0;}
    #mt4promospage .mt4promo-tablerow .card{flex:1;display:flex;flex-direction:column;min-height:0;width:100%;}
    #mt4promospage .mt4promo-tablerow .card > .card-body{flex:1;min-height:0;display:flex;flex-direction:column;}
    #mt4promospage .mt4promo-tablerow .table-responsive{flex:1;min-height:0;display:flex;flex-direction:column;}
    #mt4promospage .mt4promo-tablerow .table-responsive > div{flex:1;min-height:0;display:flex;flex-direction:column;}
    #mt4promospage .dui-dt{flex:1;min-height:0;}
    #mt4promospage .dui-dt-card{flex:1 1 auto;min-height:0;max-height:none;}
    /* cajas de grupos LIVE/DEMO del formulario */
    #tablacrearnuevodiv .mt4promo-groupbox{border:0;border-radius:10px;padding:12px 14px;height:100%;}
    #tablacrearnuevodiv .mt4promo-groupbox-head{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:8px;padding-bottom:10px;border-bottom:1px solid var(--border-color,#e5e7eb);}
    #tablacrearnuevodiv .mt4promo-groupbox h6{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--dt-muted);margin:12px 0 4px;}
    #tablacrearnuevodiv .mt4promo-groupbox .form-check{padding-top:3px;padding-bottom:3px;padding-right:6px;border-radius:6px;}
    #tablacrearnuevodiv .mt4promo-groupbox .form-check:hover{background:rgba(0,0,0,.04);}
    :scope[data-bs-theme="dark"] #tablacrearnuevodiv .mt4promo-groupbox .form-check:hover{background:rgba(255,255,255,.05);}
    :scope[data-bs-theme="dark"] #tablacrearnuevodiv .mt4promo-groupbox h6{color:var(--dt-muted);}
    /* chip monospace del promocode en la tabla */
    .mt4promo-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;background:rgba(0,0,0,.05);border:0;border-radius:6px;padding:2px 8px;display:inline-block;}
    :scope[data-bs-theme="dark"] .mt4promo-code{background:rgba(255,255,255,.06);}

}
/* end dui-template-style modules/mt4promocodes:0 */
/* dui-template-style {"key":"modules/mt4servers:0","bytes":3347,"sha256":"7f4b60e17c2b24bb455b7d832394e1ad7057ebef27effa2afe4e8bc02a468007","media":null,"source_sha256":"b1cf3a6798615385baef073f60b929a1f7e0eed55e5a0cb90278de7fd2a9f49f"} */
@scope (:root:has(template[data-dui-legacy-style="modules/mt4servers:0"])) {

    /* alto 100% de la pagina: el unico scroll vertical es el de la tabla (dui-dt-card) */
    #mt4serverspage{display:flex;flex-direction:column;height:var(--app-page-height,calc(100vh - 120px));min-height:0;overflow-y:auto;overflow-x:hidden;}
    #mt4serverspage > .d-flex:first-child{flex:0 0 auto;}

    /* 2026: el formulario Add/Edit se muestra como modal (overlay), igual que en mt4groups y
       mt4promocodes. La logica no cambia: sigue siendo u-hidden quien abre/cierra. */
    #mt4serverspage #tablacrearnuevodiv{position:fixed;inset:0;z-index:1040;margin:0!important;padding:32px 16px;display:flex;align-items:flex-start;justify-content:center;background:rgba(0,0,0,.45);overflow-y:auto;}
    #mt4serverspage #tablacrearnuevodiv > .card{width:100%;max-width:900px;margin:auto;box-shadow:none;}
    #mt4serverspage .mt4srv-tablerow{flex:1 1 auto;min-height:260px;margin-bottom:0;}
    #mt4serverspage .mt4srv-tablerow > .col{display:flex;min-width:0;}
    #mt4serverspage .mt4srv-tablerow .card{flex:1;display:flex;flex-direction:column;min-height:0;width:100%;}
    #mt4serverspage .mt4srv-tablerow .card > .card-body{flex:1;min-height:0;display:flex;flex-direction:column;}
    #mt4serverspage .mt4srv-tablerow .table-responsive{flex:1;min-height:0;display:flex;flex-direction:column;}
    #mt4serverspage .mt4srv-tablerow .table-responsive > div{flex:1;min-height:0;display:flex;flex-direction:column;}
    #mt4serverspage .dui-dt{flex:1;min-height:0;}
    #mt4serverspage .dui-dt-card{flex:1 1 auto;min-height:0;max-height:none;}
    /* caja CRM-API (solo MTT) del formulario */
    #tablacrearnuevodiv .mt4srv-groupbox{border:0;border-radius:10px;padding:12px 14px;height:100%;}
    #tablacrearnuevodiv .mt4srv-groupbox-head{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:8px;padding-bottom:10px;border-bottom:1px solid var(--el-border,var(--border-color,#e5e7eb));}
    #tablacrearnuevodiv .mt4srv-groupbox-hint{font-weight:400;font-size:12px;color:var(--dt-muted);}
    :scope[data-bs-theme="dark"] #tablacrearnuevodiv .mt4srv-groupbox-hint{color:var(--dt-muted);}
    /* input de contrasena con boton de ver/ocultar */
    #tablacrearnuevodiv .mt4srv-pwwrap{position:relative;}
    #tablacrearnuevodiv .mt4srv-pwwrap input{padding-right:38px;}
    #tablacrearnuevodiv .mt4srv-pwbtn{position:absolute;top:0;right:0;height:100%;width:36px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;color:var(--dt-muted);cursor:pointer;border-radius:0 6px 6px 0;}
    #tablacrearnuevodiv .mt4srv-pwbtn:hover{color:var(--el-text,#111827);background:rgba(0,0,0,.04);}
    :scope[data-bs-theme="dark"] #tablacrearnuevodiv .mt4srv-pwbtn{color:var(--dt-muted);}
    :scope[data-bs-theme="dark"] #tablacrearnuevodiv .mt4srv-pwbtn:hover{background:rgba(255,255,255,.06);color:var(--el-text,#f5f5f7);}
    /* chips monospace / secretos de la tabla */
    .mt4srv-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;background:rgba(0,0,0,.05);border:0;border-radius:6px;padding:2px 8px;display:inline-block;}
    .mt4srv-secret{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.08em;color:var(--dt-muted);user-select:none;}
    :scope[data-bs-theme="dark"] .mt4srv-mono{background:rgba(255,255,255,.06);}

}
/* end dui-template-style modules/mt4servers:0 */
/* dui-template-style {"key":"modules/mt4symbols:0","bytes":6293,"sha256":"9f18d10bb6544474e857297ad6d4a23865dfc293777faa4909fbf41ba47cebb4","media":null,"source_sha256":"da6666cb740e492c3e6b595c254840ffd7f4385fa7d9fbf605a0e965038ce2e8"} */
@scope (:root:has(template[data-dui-legacy-style="modules/mt4symbols:0"])) {

    /* alto 100% de la pagina: el unico scroll vertical es el de la tabla */
    #mt4symbolspage{display:flex;flex-direction:column;height:var(--app-page-height,calc(100vh - 120px));min-height:0;overflow-y:auto;overflow-x:hidden;}
    #mt4symbolspage #page_groups{flex:0 0 auto;}
    #mt4symbolspage #page_group_detail{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
    #mt4symbolspage #page_group_detail.u-hidden{display:none;}
    #mt4symbolspage #page_group_detail > .d-flex:first-child,
    #mt4symbolspage .mt4sym-searchrow,
    #mt4symbolspage .mt4sym-bulkbar{flex:0 0 auto;}

    /* 2026: "Add symbol rule" se abre como modal (overlay). La logica no cambia: siguen siendo
       showSymbolsForm()/hideSymbolsForm() (u-hidden) quienes lo abren y cierran. z-index 1040 para
       quedar por debajo de los modales bootstrap (1055) y de bootbox/alerta. */
    #mt4symbolspage #tablasymbols_formdiv{position:fixed;inset:0;z-index:1040;margin:0!important;padding:32px 16px;display:flex;align-items:flex-start;justify-content:center;background:rgba(0,0,0,.45);overflow-y:auto;}
    #mt4symbolspage #tablasymbols_formdiv > .card{width:100%;max-width:900px;margin:auto;box-shadow:none;}
    /* el panel de select2 debe quedar por encima del overlay */
    .select2-container{z-index:1060;}
    #mt4symbolspage .mt4sym-tablerow{flex:1 1 auto;min-height:260px;margin-bottom:0;}
    #mt4symbolspage .mt4sym-tablerow > .col{display:flex;min-width:0;}
    #mt4symbolspage .mt4sym-tablerow .card{flex:1;display:flex;flex-direction:column;min-height:0;width:100%;}
    #mt4symbolspage .mt4sym-tablerow .card > .card-body{flex:1;min-height:0;display:flex;flex-direction:column;}
    #mt4symbolspage .mt4sym-tablerow .table-responsive{flex:1;min-height:0;overflow-y:auto;}
    /* buscador con icono */
    #mt4symbolspage .mt4sym-searchwrap{position:relative;}
    #mt4symbolspage .mt4sym-searchwrap .ti-search{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#9ca3af;pointer-events:none;font-size:14px;}
    #mt4symbolspage .mt4sym-searchwrap input{padding-left:32px;}
    /* pill del contador de seleccion (antes sin estilo) */
    #mt4symbolspage .pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border:0;border-radius:999px;padding:3px 10px;background:rgba(0,0,0,.03);white-space:nowrap;}
    :scope[data-bs-theme="dark"] #mt4symbolspage .pill{background:rgba(255,255,255,.06);}
    /* texto secundario generado por JS en las celdas (antes sin estilo) */
    #mt4symbolspage .muted{color:var(--dt-muted);font-weight:400;}
    :scope[data-bs-theme="dark"] #mt4symbolspage .muted{color:var(--dt-muted);}
    /* animacion de entrada del bulk bar (las clases ya se ponian desde JS pero no existian en CSS) */
    #mt4symbolspage .bulk-bar-enter{opacity:0;transform:translateY(-4px);}
    #mt4symbolspage .bulk-bar-show{opacity:1;transform:translateY(0);transition:opacity .18s ease,transform .18s ease;}
    #mt4symbolspage .mt4sym-bulkinputs{max-width:620px;}
    #mt4symbolspage .mt4sym-bulkbar .card-body{border:0;border-radius:10px;}
    /* prepage: hero centrado para elegir grupo */
    #mt4symbolspage .mt4sym-hero{display:flex;justify-content:center;padding-top:6vh;}
    #mt4symbolspage .mt4sym-herocard{width:100%;max-width:560px;}
    #mt4symbolspage .mt4sym-herocard .card-body{padding:36px 32px;}
    #mt4symbolspage .mt4sym-heroicon{width:64px;height:64px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;border:0;border-radius:16px;background:rgba(0,0,0,.03);}
    #mt4symbolspage .mt4sym-heroicon i{font-size:32px;color:var(--el-text,var(--text-color,#111827));}
    :scope[data-bs-theme="dark"] #mt4symbolspage .mt4sym-heroicon{background:rgba(255,255,255,.05);}
    /* ticker en chip monospace (mismo idioma visual que mt4promocodes) */
    #mt4symbolspage .mt4sym-ticker{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:600;background:rgba(0,0,0,.05);border:0;border-radius:6px;padding:2px 8px;display:inline-block;margin-right:6px;}
    :scope[data-bs-theme="dark"] #mt4symbolspage .mt4sym-ticker{background:rgba(255,255,255,.06);}
    /* badge de market con color por tipo */
    #mt4symbolspage .mt4sym-market{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:2px 10px;background:rgba(0,0,0,.05);color:var(--dt-muted);}
    #mt4symbolspage .mt4sym-market[data-market="stocks"]{background:rgba(37,99,235,.10);color:#2563eb;}
    #mt4symbolspage .mt4sym-market[data-market="fx"]{background:rgba(22,163,74,.10);color:#16a34a;}
    #mt4symbolspage .mt4sym-market[data-market="crypto"]{background:rgba(147,51,234,.10);color:#9333ea;}
    #mt4symbolspage .mt4sym-market[data-market="commodities"]{background:rgba(217,119,6,.12);color:#d97706;}
    #mt4symbolspage .mt4sym-market[data-market="indices"]{background:rgba(220,38,38,.10);color:#dc2626;}
    :scope[data-bs-theme="dark"] #mt4symbolspage .mt4sym-market{background:rgba(255,255,255,.08);color:var(--dt-muted);}
    :scope[data-bs-theme="dark"] #mt4symbolspage .mt4sym-market[data-market="stocks"]{background:rgba(96,165,250,.15);color:#60a5fa;}
    :scope[data-bs-theme="dark"] #mt4symbolspage .mt4sym-market[data-market="fx"]{background:rgba(74,222,128,.15);color:#4ade80;}
    :scope[data-bs-theme="dark"] #mt4symbolspage .mt4sym-market[data-market="crypto"]{background:rgba(192,132,252,.15);color:#c084fc;}
    :scope[data-bs-theme="dark"] #mt4symbolspage .mt4sym-market[data-market="commodities"]{background:rgba(251,191,36,.15);color:#fbbf24;}
    :scope[data-bs-theme="dark"] #mt4symbolspage .mt4sym-market[data-market="indices"]{background:rgba(248,113,113,.15);color:#f87171;}
    /* columnas numericas alineadas a la derecha, en tabular-nums */
    #mt4symbolspage .mt4sym-num{text-align:right;font-variant-numeric:tabular-nums;padding-right:18px!important;}
    /* empty state de la tabla */
    #mt4symbolspage .mt4sym-empty{padding:44px 16px!important;}
    #mt4symbolspage .mt4sym-empty i{font-size:34px;opacity:.35;display:block;margin-bottom:8px;}
    #mt4symbolspage .mt4sym-empty-hint{font-size:12px;opacity:.7;margin-top:4px;}

}
/* end dui-template-style modules/mt4symbols:0 */
/* dui-template-style {"key":"modules/notifications:0","bytes":131,"sha256":"d34e2a5fd6381c33804393653fc00ff0dc65cefafa6c5c00c6dbc815d8c61fcf","media":null,"source_sha256":"d34e2a5fd6381c33804393653fc00ff0dc65cefafa6c5c00c6dbc815d8c61fcf"} */
@scope (:root:has(template[data-dui-legacy-style="modules/notifications:0"])) {

#akicontenidonormal .list-group-item{
    padding:0px;

}
#akicontenidonormal .notification-body{
    padding:10px;

}
  
}
/* end dui-template-style modules/notifications:0 */
/* dui-template-style {"key":"modules/profile:0","bytes":21900,"sha256":"bda86192ffa2f6bf35f64178b9013223ad6b773727964cd2c9d1aa616fa6a82e","media":null,"source_sha256":"e68cb788f912753f10fe2cb51401e63e63f70089d6f1d88c2779c17663134f47"} */
@scope (:root:has(template[data-dui-legacy-style="modules/profile:0"])) {

/* Profile workspace: neutral surfaces and a compact, responsive account form. */
.profile-workspace {
    --profile-surface: var(--dt-surface, #fff);
    --profile-subtle: var(--dt-surface-2, #f2f2f0);
    --profile-text: var(--dt-text, #181818);
    --profile-muted: var(--dt-muted, #6b6b68);
    --profile-border: var(--dt-border, rgba(20,20,20,.1));
    --profile-strong: var(--dt-border-strong, rgba(20,20,20,.22));
    --profile-hover: var(--dt-hover, #f5f5f3);
    --profile-active: var(--dt-active, #eeeeec);
    width: 100%; max-width: 1240px; margin: 24px auto 0!important; padding: 0 28px 32px;
    color: var(--profile-text); font-family: var(--el-font, var(--font-sans, inherit));
}
.profile-workspace .profile-main-card { background: transparent!important; border: 0!important; box-shadow: none!important; border-radius: 0; margin: 0; }
.profile-workspace .profile-main-card > .card-body { padding: 24px 0 0; }
.profile-workspace #pills-tab { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0; padding: 0 0 14px; overflow-x: auto; border: 0; border-bottom: 1px solid var(--profile-border); scrollbar-width: thin; }
.profile-workspace #pills-tab .nav-item { flex: 0 0 auto; }
.profile-workspace #pills-tab .nav-link { gap: 7px; min-height: 38px; padding: 8px 13px!important; border: 0!important; border-radius: 8px!important; background: transparent!important; color: var(--profile-muted)!important; font-size: 13px!important; font-weight: 500; line-height: 1.4; white-space: nowrap; box-shadow: none!important; }
.profile-workspace #pills-tab .nav-link:hover { background: var(--profile-hover)!important; color: var(--profile-text)!important; }
.profile-workspace #pills-tab .nav-link.active { background: var(--profile-active)!important; color: var(--profile-text)!important; }
.profile-workspace #pills-tab .nav-link::before, .profile-workspace #pills-tab .nav-link::after { display: none!important; }
.profile-workspace #pills-tab .nav-link > .ti { margin: 0!important; font-size: 17px!important; }
.profile-workspace #pills-tab .nav-link > span { display: block!important; }
.profile-workspace #pills-tab .nav-link:focus-visible { outline: 2px solid var(--profile-text); outline-offset: -2px; }
.profile-workspace .tab-content .card { background: var(--profile-surface)!important; border: 0!important; border-radius: 12px; box-shadow: none!important; }
.profile-workspace .tab-content .card > .card-body { padding: 24px!important; }
.profile-workspace .card-title { margin-bottom: 7px; color: var(--profile-text); font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: -.02em; }
.profile-workspace .card-subtitle { color: var(--profile-muted); font-size: 13px; line-height: 1.6; }
.profile-workspace .form-label { margin-bottom: 7px; color: var(--profile-text); font-size: 12px; font-weight: 500; }
.profile-workspace .form-text { display: block; margin-top: 6px; color: var(--profile-muted)!important; font-size: 11.5px; line-height: 1.5; }
.profile-workspace .form-control, .profile-workspace .form-select { min-height: 40px; padding: 8px 11px; border-color: var(--profile-border)!important; border-radius: 8px; color: var(--profile-text); font-size: 13px; line-height: 1.5; box-shadow: none!important; }
/* Editable fields inherit the shared field surface in every profile section. */
.profile-workspace .form-control:disabled { background-color: var(--profile-subtle)!important; color: var(--profile-muted); }
.profile-workspace .form-control:focus, .profile-workspace .form-select:focus { border-color: var(--profile-text)!important; } /* 26-10: el anillo de foco lo pone §18 de datalyse-modern.css */
.profile-workspace .input-group { flex-wrap: nowrap; }
.profile-workspace .input-group > .form-control { min-width: 0; border-radius: 8px 0 0 8px; }
.profile-workspace .input-group > .btn:last-child { border-radius: 0 8px 8px 0; }
.profile-workspace .btn { min-height: 36px; padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.35; box-shadow: none!important; }
.profile-workspace .btn.btn-primary { background: var(--profile-text)!important; border-color: var(--profile-text)!important; color: var(--profile-surface)!important; }
.profile-workspace .btn.btn-primary:hover { opacity: .86; }
.profile-workspace .btn.btn-outline-secondary, .profile-workspace .btn.btn-outline-primary { background: var(--profile-surface)!important; border-color: var(--profile-strong)!important; color: var(--profile-text)!important; }
.profile-workspace .btn.btn-outline-secondary:hover, .profile-workspace .btn.btn-outline-primary:hover { background: var(--profile-hover)!important; }
.profile-workspace .btn:focus-visible { outline: 2px solid var(--profile-text)!important; outline-offset: 3px; }
.profile-workspace #pills-account > .row { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: start; gap: 20px; margin: 0; }
.profile-workspace #pills-account > .row > [class*="col-"] { width: auto; max-width: none; padding: 0; min-width: 0; }
.profile-workspace #personalDetailsForm > .row { row-gap: 4px; }
.profile-workspace #personalDetailsForm > .row > .col-12 > .d-flex { margin-top: 8px!important; padding-top: 20px; border-top: 1px solid var(--profile-border); }
.profile-workspace .profile-avatar-card .card-title, .profile-workspace .profile-avatar-card .card-subtitle { text-align: center; }
.profile-workspace .profile-avatar-card .profile-sidebar__account-avatar { display: flex; align-items: center; justify-content: center; width: 104px; height: 104px; margin: 24px auto 0; border: 4px solid var(--profile-surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--profile-border); }
.profile-workspace .profile-avatar-card .profile-sidebar__account-avatar img { width: 96px; height: 96px; object-fit: cover; }
.profile-workspace .profile-avatar-card .btn.btn-primary { background: var(--profile-surface)!important; border-color: var(--profile-strong)!important; color: var(--profile-text)!important; }
.profile-workspace .profile-avatar-card .btn.btn-primary:hover { background: var(--profile-hover)!important; opacity: 1; }
@media (max-width: 1100px) {
    .profile-workspace { padding-inline: 20px; }
    .profile-workspace #pills-account > .row { grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; }
    .profile-workspace .tab-content .card > .card-body { padding: 20px!important; }
}
@media (max-width: 860px) {
    .profile-workspace #pills-account > .row { grid-template-columns: minmax(0, 1fr); }
    .profile-workspace .profile-avatar-card .card-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 24px; align-items: center; }
    .profile-workspace .profile-avatar-card .card-title, .profile-workspace .profile-avatar-card .card-subtitle { text-align: left; margin: 0!important; }
    .profile-workspace .profile-avatar-card .card-body > .text-center { grid-column: 2; grid-row: 1 / 3; }
    .profile-workspace .profile-avatar-card .profile-sidebar__account-avatar { width: 72px; height: 72px; margin-top: 0; }
    .profile-workspace .profile-avatar-card .profile-sidebar__account-avatar img { width: 64px; height: 64px; }
    .profile-workspace .profile-avatar-card .my-4 { margin-top: 12px!important; margin-bottom: 0!important; }
}
@media (max-width: 540px) {
    .profile-workspace { margin-top: 16px!important; padding: 0 12px 24px; }
    .profile-workspace .profile-main-card > .card-body { padding-top: 16px; }
    .profile-workspace .tab-content .card > .card-body { padding: 18px!important; }
    .profile-workspace #pills-tab .nav-link { padding: 8px 10px!important; font-size: 12px!important; }
    .profile-workspace .profile-avatar-card .card-body { gap: 6px 12px; }
    .profile-workspace .input-group > .btn { padding-inline: 10px; }
}
@media (forced-colors: active) {
    .profile-workspace .btn:focus-visible, .profile-workspace .nav-link:focus-visible, .profile-workspace .form-control:focus, .profile-workspace .form-select:focus { outline-color: Highlight!important; }
}

#personalDetailsForm.profile-personal-details-locked #userName,
#personalDetailsForm.profile-personal-details-locked #userLastName,
#personalDetailsForm.profile-personal-details-locked #userLocation,
#personalDetailsForm.profile-personal-details-locked #savePersonalDetails {
    cursor: not-allowed !important;
}
#personalDetailsForm.profile-personal-details-locked #userName,
#personalDetailsForm.profile-personal-details-locked #userLastName,
#personalDetailsForm.profile-personal-details-locked #userLocation {
    opacity: .6;
    background-color: var(--bs-secondary-bg, #e9ecef);
}
#personalDetailsForm.profile-personal-details-locked #savePersonalDetails {
    opacity: .5;
}

/* animacion de OK al completar el registro de FaceID (modal #faceidregModal) */
#faceidreg_okanim{ display:none; flex-direction:column; align-items:center; justify-content:center; height:500px; gap:16px; }
.faceidreg-okcircle{
    width:96px; height:96px; border-radius:50%;
    background:var(--bs-success,#198754);
    display:flex; align-items:center; justify-content:center;
    animation:dui-legacy-modules-profile-faceidregpop .45s cubic-bezier(.175,.885,.32,1.275) both;
}
.faceidreg-okcircle svg path{ stroke-dasharray:60; stroke-dashoffset:60; animation:dui-legacy-modules-profile-faceidregdraw .5s .3s ease forwards; }
@keyframes dui-legacy-modules-profile-faceidregpop{ 0%{transform:scale(0);opacity:0} 100%{transform:scale(1);opacity:1} }
@keyframes dui-legacy-modules-profile-faceidregdraw{ to{ stroke-dashoffset:0 } }
/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Perfil. Solo color, borde, sombra, radio, espaciado, peso y fuente: ningún id, clase ni atributo que lea el JS cambia
   (#pills-tab y los #pills-*-tab de los enlaces profundos, .active/.show, data-bs-toggle, #notificationTogglesList .form-check-input,
   #akinavigatorstots [data-soylisnavi] y data-soybtnclosesiootra, #connectedAppsList [data-app-id], #faceidreg_setupbtn .d-none,
   #faceidreg_okanim display inline, #personalDetailsForm.profile-personal-details-locked, img.lockimage[data-lockminplan]).
   Ámbito: .profile-workspace y, fuera de él, #faceidreg_okanim. #pills-billing (lo pinta billing.js) queda fuera de las reglas nuevas.
   Referencia: modules/control-phonenumbers.html (.pn-tabs con subrayado, .pn-set-ic neutro, .pn-action-btn). */

/* pestañas: de pastilla gris a subrayado de 2 px en tinta; al pasar solo cambia el color */
.profile-workspace #pills-tab { gap: 22px; padding: 0; }
.profile-workspace #pills-tab .nav-link { min-height: 42px; padding: 0 1px!important; border-radius: 0!important; color: var(--profile-muted)!important; }
.profile-workspace #pills-tab .nav-link > .ti { font-size: 16px!important; }
.profile-workspace #pills-tab .nav-link:hover { background: transparent!important; color: var(--profile-text)!important; }
.profile-workspace #pills-tab .nav-link.active { background: transparent!important; color: var(--profile-text)!important; box-shadow: inset 0 -2px 0 var(--profile-text)!important; }
/* Webphone y Seguridad llevaban el mismo candado: el glifo de Webphone pasa a ti-headset (código verificado en v2tabler.css) */
.profile-workspace #pills-webphone-tab > .ti-lock::before { content: "\eb90"; }

/* CTA en tinta por los tokens de la plataforma (el botón del avatar y Configure de FaceID siguen ghost) */
.profile-workspace .btn.btn-primary { background: var(--dt-cta)!important; border-color: var(--dt-cta)!important; color: var(--dt-cta-fg)!important; }
.profile-workspace .btn.btn-primary:hover { background: var(--dt-cta-hover)!important; border-color: var(--dt-cta-hover)!important; opacity: 1; }
/* botones pequeños: ghost de 30 px */
.profile-workspace :is(#pills-account, #pills-security, #pills-webphone, #pills-developer) .btn.btn-sm { min-height: 30px; padding: 5px 10px; font-size: 12px; }
#faceidreg_setupbtn.btn.btn-primary { background: transparent!important; border-color: var(--profile-strong)!important; color: var(--profile-text)!important; }
#faceidreg_setupbtn.btn.btn-primary:hover { background: var(--profile-hover)!important; }

/* interruptores: el encendido ya es tinta (--dt-cta, §01); el apagado deja el gris azulado de datalyse-theme.css */
.profile-workspace .form-switch .form-check-input:not(:checked) { background-color: var(--profile-subtle)!important; border-color: var(--profile-strong)!important; }
.profile-workspace .form-check-label { font-size: 13px; color: var(--profile-text); }

/* filas de lista (2FA, Notificaciones, Aplicaciones conectadas): título 14/600, descripción 12,5 gris.
   .fs-4 y .fw-semibold son !important */
.profile-workspace :is(#pills-security, #pills-notifications) h5.fs-4 { margin: 0 0 2px; font-size: 14px!important; font-weight: 600!important; line-height: 1.35; letter-spacing: -.005em; color: var(--profile-text); }
.profile-workspace :is(#pills-security, #pills-notifications) h5.fs-4 ~ p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--profile-muted); }
.profile-workspace #pills-security .card-body > .d-flex.py-3 { gap: 16px; padding: 12px 0!important; }
.profile-workspace #pills-security .card-body > .border-top { border-color: var(--profile-border)!important; }

/* iconos de fila: de cuadrado claro de 48 px (.text-bg-light, negro sobre gris, deslumbra en oscuro; laptop azul) a cuadrado neutro de 34 px.
   .text-bg-light, .p-3, .rounded-1, .text-dark, .text-primary y .fs-7 son !important */
.profile-workspace :is(#pills-security, #pills-notifications) .text-bg-light { flex: none; width: 34px; height: 34px; padding: 0!important; align-items: center; justify-content: center; border-radius: 8px!important; background: var(--profile-subtle)!important; border: 0; color: var(--profile-muted)!important; }
.profile-workspace :is(#pills-security, #pills-notifications) .text-bg-light > .ti { font-size: 16px!important; line-height: 1; color: inherit!important; }

/* Notificaciones: lista con línea fina entre filas (en vez de mb-4 !important), grupos como etiqueta pequeña en mayúsculas */
.profile-workspace #notificationTogglesList > .d-flex { gap: 16px; margin: 0!important; padding: 12px 0; border-bottom: 1px solid var(--profile-border); }
.profile-workspace #notificationTogglesList > .d-flex:last-child { border-bottom: 0; padding-bottom: 0; }
.profile-workspace #notificationTogglesList > .d-flex > .d-flex { gap: 12px!important; min-width: 0; }
.profile-workspace #notificationTogglesList > h6.card-subtitle { margin: 24px 0 0!important; padding-bottom: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; line-height: 1.4; color: var(--profile-muted)!important; }

/* Dispositivos activos: "Cerrar las demás sesiones" ghost con el rojo solo en el texto */
.profile-workspace #pills-security .btn.btn-outline-danger { background: transparent!important; border: 1px solid var(--profile-strong)!important; color: var(--dt-danger)!important; }
.profile-workspace #pills-security .btn.btn-outline-danger:hover { background: var(--profile-hover)!important; }
/* filas que pinta profilev2_getnavigatorsRESP: título de 20 px (.fs-6) a 13/600, icono en cuadrado neutro, cerrar sesión = botón icono de 30 px */
.profile-workspace #akinavigatorstots > [data-soylisnavi] { gap: 12px; padding: 10px 0!important; border-bottom: 1px solid var(--profile-border)!important; }
.profile-workspace #akinavigatorstots > [data-soylisnavi]:last-child { border-bottom: 0!important; }
.profile-workspace #akinavigatorstots > [data-soylisnavi] > .d-flex { min-width: 0; gap: 10px!important; }
.profile-workspace #akinavigatorstots > [data-soylisnavi] > .d-flex > .ti { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--profile-subtle); border: 0; color: var(--profile-muted)!important; font-size: 15px!important; }
.profile-workspace #akinavigatorstots h5.fs-6 { margin: 0; font-size: 13px!important; font-weight: 600!important; line-height: 1.35; overflow-wrap: anywhere; color: var(--profile-text); }
.profile-workspace #akinavigatorstots p { font-size: 12px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.profile-workspace #akinavigatorstots > [data-soylisnavi] > a.text-danger { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--profile-border); border-radius: 8px; font-size: 15px!important; color: var(--dt-danger)!important; text-decoration: none; }
.profile-workspace #akinavigatorstots > [data-soylisnavi] > a.text-danger:hover { background: var(--profile-hover); border-color: var(--profile-strong); }

/* Aplicaciones conectadas: filas planas con línea fina (sin caja .list-group-item), logo de 32 px, "Revocar" ghost con texto rojo.
   .bg-danger-subtle y .text-danger son !important */
.profile-workspace #connectedAppsList > .list-group-item { gap: 12px; padding: 12px 0!important; background: transparent!important; border: 0!important; border-top: 1px solid var(--profile-border)!important; border-radius: 0!important; }
.profile-workspace #connectedAppsList > .list-group-item:first-child { border-top: 0!important; padding-top: 0!important; }
.profile-workspace #connectedAppsList > .list-group-item img { flex: none; width: 32px; height: 32px; object-fit: cover; border-radius: 8px!important; border: 0; }
.profile-workspace #connectedAppsList .btn.bg-danger-subtle { flex: none; background: transparent!important; border: 1px solid var(--profile-strong)!important; color: var(--dt-danger)!important; }
.profile-workspace #connectedAppsList .btn.bg-danger-subtle:hover { background: var(--profile-hover)!important; }
.profile-workspace #connectedAppsList > p { margin: 0; padding: 4px 0!important; font-size: 13px; }

/* Webphone: cabecera y cuerpo de la tarjeta sin el hueco doble de 48 px; pie con línea fina (datalyse-modern pone border:0 !important) */
.profile-workspace #pills-webphone .card > .card-body:first-child { padding-bottom: 0!important; }
.profile-workspace #pills-webphone .card > .card-body + .card-body { padding-top: 18px!important; }
.profile-workspace #pills-webphone .card > .card-footer { padding: 14px 24px; border-top: 1px solid var(--profile-border)!important; }
/* aviso azul (.alert-info de datalyse-theme.css) a nota neutra de línea fina; .fs-5 y .me-2 son !important */
.profile-workspace #pills-webphone .alert-info { padding: 10px 12px; background: transparent; border: 1px solid var(--profile-border); border-radius: 8px; color: var(--profile-muted); font-size: 12.5px; line-height: 1.5; }
.profile-workspace #pills-webphone .alert-info > .ti { flex: none; margin-right: 10px!important; font-size: 16px!important; color: var(--profile-muted); }
.profile-workspace #sipCredentialsBlock > p.text-muted { font-size: 13px; line-height: 1.55; }
/* bloque SIP: .border y .rounded son !important */
.profile-workspace #sipCredentialsBlock > .border.rounded { padding: 16px!important; border-color: var(--profile-border)!important; border-radius: 10px!important; }

/* valores de solo lectura (credenciales SIP, extensión, API key e ids): mono, cifras tabulares, fondo neutro */
.profile-workspace :is(#pills-webphone, #pills-developer) .form-control[readonly]:not(:disabled) { background-color: var(--profile-subtle)!important; }
.profile-workspace :is(#account-webphone_user, #account-webphone_pass, #account-webphone_server, #account-webphone_numextension, #apiKeyInput, #company_idinput, #agent_idinput, #internal_idinput) { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Developer: "Your API Key" (.fs-5, 18 px) y las etiquetas company_id, agent_id e internal_id como etiqueta de campo de 12 px */
.profile-workspace #pills-developer h5.fs-5 { margin: 0 0 7px; font-size: 12px!important; font-weight: 500!important; line-height: 1.4; color: var(--profile-text); }
.profile-workspace #pills-developer :is(.mt-5, .mt-4) > h6 { margin: 0 0 7px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--profile-text); }
.profile-workspace #pills-developer .mt-5 { margin-top: 24px!important; }

/* modales de cambio de email y teléfono: "Verify" es la única acción del paso, en tinta (venía verde de .btn-outline-success) */
.profile-workspace :is(#verifyNewEmailBtnModal, #verifyNewPhoneBtnInModal).btn { background: var(--dt-cta)!important; border: 0!important; color: var(--dt-cta-fg)!important; }
.profile-workspace :is(#verifyNewEmailBtnModal, #verifyNewPhoneBtnInModal).btn:hover { background: var(--dt-cta-hover)!important; border-color: var(--dt-cta-hover)!important; }
/* cajas OTP del cambio de email: las de 165_app.css traen fondo gris y foco azul con halo (solo .global-login estaba tokenizado) */
.profile-workspace #profileEmailOtpWrapper .otp-box { background: var(--dt-surface)!important; border: 0!important; color: var(--dt-text)!important; caret-color: var(--dt-text); font-variant-numeric: tabular-nums; }
.profile-workspace #profileEmailOtpWrapper .otp-box:focus { border-color: var(--dt-text)!important; box-shadow: none!important; }

/* OK del registro de FaceID: círculo en tinta con la marca en el color de la superficie (antes verde sólido); la animación sigue */
#faceidreg_okanim .faceidreg-okcircle { background: var(--dt-text, #111110); }
#faceidreg_okanim .faceidreg-okcircle svg path { stroke: var(--dt-surface, #fff); }

@media (max-width: 540px) {
    .profile-workspace #pills-tab { gap: 16px; }
    .profile-workspace #pills-tab .nav-link { padding: 0 1px!important; }
    .profile-workspace #notificationTogglesList > .d-flex, .profile-workspace #pills-security .card-body > .d-flex.py-3 { gap: 12px; }
}

}
/* end dui-template-style modules/profile:0 */
/* dui-template-style {"key":"modules/rates:0","bytes":832,"sha256":"08cadf9c4c3c53b91f97df9e2ccdeba0abf10f448e4f514df1fb7005723f56ef","media":null,"source_sha256":"d6d43ba5432dad6c44871720ad5694e886723000e46fafd77ae7c925a7fbccd3"} */
@scope (:root:has(template[data-dui-legacy-style="modules/rates:0"])) {

    /* ElevenLabs v4 Theme for SMS & Call Rates */
    .ag-theme-custom{
        --ag-font-size:13px;
        --ag-wrapper-border-radius:0;
        --ag-header-column-separator-display:none;
        --ag-row-height:42px;
        --ag-header-height:40px;
    }
    .ag-theme-custom .ag-root-wrapper{border:0!important;}
    #vp-country, #vp-country:hover, #vp-country:focus{background:transparent!important;color:inherit!important;border:0!important;outline:0!important;box-shadow:none!important;}
    :scope[data-bs-theme="dark"] #vp-country{color-scheme:dark;}
    :scope[data-bs-theme="dark"] #vp-country option{background:var(--dt-surface);color:var(--dt-text);}
    label:has(>#vp-country){border-color:var(--el-hairline-strong,rgba(12,10,9,0.10)) !important;background:var(--el-stage-bg,#ffffff);padding:4px 12px !important;}

}
/* end dui-template-style modules/rates:0 */
/* dui-template-style {"key":"modules/routing:0","bytes":11364,"sha256":"b265338b6b62c93faf4cba9125291bc4d4190935d47f1f78ec13b09ba38ea515","media":null,"source_sha256":"8e988dbd9d7905d0255aac5d6060d32322deb0faa247d465fa1424dfddad3ebb"} */
@scope (:root:has(template[data-dui-legacy-style="modules/routing:0"])) {

    /* ═══════════ ElevenLabs v4 Skill — VoIP Routing & Prices ═══════════ */
    .vp{
        --vp-green-bg:var(--dt-chip-success); --vp-green-tx:#076b39; --vp-green-br:#34c759; --vp-green-hv:#d7f4e4;
        --vp-text:var(--el-ink,var(--dt-text,#0c0a09)); --vp-muted:var(--el-ink-secondary,var(--dt-muted,#57534e)); --vp-faint:var(--el-ink-muted,var(--dt-faint,#a8a29e));
        --vp-surface:var(--el-stage-bg,var(--dt-surface,#ffffff)); --vp-raised:var(--el-card-stone,var(--dt-topbar,#f5f4f2)); --vp-app:var(--el-shell-bg,var(--dt-app,#f3f2f0));
        --vp-border:var(--el-hairline,var(--dt-border,rgba(12,10,9,.065))); --vp-border-strong:var(--el-hairline-strong,var(--dt-border-strong,rgba(12,10,9,.10)));
        --vp-hover:var(--el-card-stone,var(--dt-hover,#f5f4f2)); --vp-active:var(--el-card-stone-hover,var(--dt-active,#eceae6));
        --vp-cta:var(--el-cta-bg,var(--dt-cta,#0c0a09)); --vp-cta-hover:var(--el-cta-hover,var(--dt-cta-hover,#292524)); --vp-cta-fg:var(--el-cta-fg,var(--dt-cta-fg,#ffffff));
        --vp-pill-on:var(--el-cta-bg,#0c0a09); --vp-pill-on-fg:var(--el-cta-fg,#ffffff);
        --vp-radius:9999px; --vp-radius-lg:16px;
        --vp-control-h:36px;
        display:flex; flex-direction:column; gap:16px;
        height:calc(100vh - var(--dt-topbar-h,44px) - 24px); min-height:460px;
        padding:20px 28px 18px; box-sizing:border-box;
        font-family:var(--font-sans); font-size:13px; color:var(--vp-text);
    }
    :scope[data-bs-theme="dark"] .vp{ --vp-green-bg:var(--dt-chip-success); --vp-green-tx:#5fd58f; --vp-green-br:#2fb567; --vp-green-hv:#12301e; }

    /* Navegación superior de pestañas (ElevenLabs v4 underline tabs) */
    .vp .nav-tabs{border-bottom:1px solid var(--vp-border);gap:20px;}
    .vp .nav-tabs .nav-link{border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;background:transparent!important;
        padding:8px 2px 10px!important;font-size:13px;font-weight:500;color:var(--vp-muted)!important;transition:color .14s ease,border-color .14s ease;}
    .vp .nav-tabs .nav-link:hover{color:var(--vp-text)!important;}
    .vp .nav-tabs .nav-link.active{color:var(--vp-text)!important;font-weight:600;border-bottom-color:var(--vp-text)!important;}

    /* Cabecera */
    .vp-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
    .vp-head-text{display:flex;flex-direction:column;gap:4px;flex:1;min-width:240px;}
    .vp-title{margin:0;font-size:22px;font-weight:500;line-height:1.2;letter-spacing:-.025em;color:var(--vp-text);}
    .vp-sub{font-size:13px;color:var(--vp-muted);}
    .vp-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

    /* Controles compartidos (píldoras ElevenLabs v4) */
    .vp .vp-btn{display:inline-flex;align-items:center;gap:7px;height:var(--vp-control-h);padding:0 15px;border-radius:var(--vp-radius);
        border:0;background:var(--vp-surface);color:var(--vp-text);font:inherit;font-size:13px;font-weight:500;
        cursor:pointer;white-space:nowrap;transition:background-color .14s ease,border-color .14s ease,color .14s ease;}
    .vp .vp-btn:hover{background:var(--vp-hover);}
    .vp .vp-btn svg{flex:none;}
    .vp .vp-btn--primary{background:var(--vp-cta);border-color:var(--vp-cta);color:var(--vp-cta-fg);}
    .vp .vp-btn--primary:hover{background:var(--vp-cta-hover);border-color:var(--vp-cta-hover);}
    .vp .vp-btn--success{background:var(--el-accent,#ea3815);border-color:var(--el-accent,#ea3815);color:var(--dt-cta-fg);}
    .vp .vp-btn--success:hover{filter:brightness(1.08);}
    .vp .vp-btn:disabled{opacity:.5;cursor:default;}

    .vp .vp-field{display:inline-flex;align-items:center;gap:8px;height:var(--vp-control-h);padding:0 12px 0 14px;border:0;
        border-radius:var(--vp-radius);background:var(--vp-surface);color:var(--vp-text);font-size:13px;cursor:pointer;position:relative;}
    .vp .vp-field > span:first-child{color:var(--vp-muted);}
    .vp .vp-field select, .vp .vp-field select:hover, .vp .vp-field select:focus{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;color:var(--vp-text);font:inherit;font-weight:600;padding:0 18px 0 0!important;
        appearance:none;-webkit-appearance:none;cursor:pointer;max-width:220px;}
    .vp .vp-field::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;margin-top:-5px;border-right:1.6px solid var(--vp-muted);
        border-bottom:1.6px solid var(--vp-muted);transform:rotate(45deg);pointer-events:none;}
    :scope[data-bs-theme="dark"] .vp .vp-field select{color-scheme:dark;}
    :scope[data-bs-theme="dark"] .vp .vp-field select option{background:var(--vp-surface);color:var(--vp-text);}

    /* Barra Bento de filtros de ruta */
    .vp-routes{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:14px;background:var(--vp-raised);border:0;}
    .vp-label{font-size:11.5px;font-weight:600;text-transform:uppercase;color:var(--vp-muted);letter-spacing:.05em;}
    .vp-pills{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;}
    .vp .vp-pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border:0;border-radius:999px;
        background:var(--vp-surface);color:var(--vp-muted);font-size:12.5px;font-weight:500;cursor:pointer;user-select:none;position:relative;
        transition:background-color .14s ease,color .14s ease,border-color .14s ease;}
    .vp .vp-pill:hover{background:var(--vp-hover);color:var(--vp-text);}
    .vp .vp-pill input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none;}
    .vp .vp-pill:has(input:checked){background:var(--vp-pill-on);border-color:var(--vp-pill-on);color:var(--vp-pill-on-fg);font-weight:600;}
    .vp .vp-pill:has(input:focus-visible){box-shadow:0 0 0 3px var(--dt-focus-ring,rgba(12,10,9,.06));}

    /* Tarjeta principal: barra de acciones masivas + grid + pie */
    .vp-card{display:flex;flex-direction:column;flex:1;min-height:0;border:0;border-radius:var(--vp-radius-lg);
        background:var(--vp-surface);overflow:hidden;box-shadow:none;}
    .vp-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--vp-border);background:var(--vp-surface);}
    .vp-toolbar:empty{display:none;}
    .vp .vp-sep{width:1px;height:22px;background:var(--vp-border);flex:none;}
    .vp .vp-count{display:inline-flex;align-items:center;height:var(--vp-control-h);padding:0 13px;border-radius:var(--vp-radius);background:var(--vp-raised);
        border:0;color:var(--vp-text);font-weight:600;white-space:nowrap;}
    .vp .vp-count.is-zero{color:var(--vp-muted);font-weight:500;}
    #vp-best-group{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;}
    #vp-best-group .vp-pill{height:28px;padding:0 11px;font-size:12px;}
    .vp .vp-search{display:inline-flex;align-items:center;gap:8px;height:var(--vp-control-h);padding:0 14px;border:0;
        border-radius:var(--vp-radius);background:var(--vp-raised);color:var(--vp-faint);min-width:230px;margin-left:auto;}
    .vp .vp-search input, .vp .vp-search input:hover, .vp .vp-search input:focus{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;color:var(--vp-text);font:inherit;width:100%;min-width:0;}
    .vp .vp-search input::placeholder{color:var(--vp-faint);}
    .vp .vp-search:focus-within{border-color:rgba(12,10,9,.16);background:var(--vp-surface);}

    /* Pie de estado */
    .vp-status{display:none;align-items:center;gap:14px;padding:10px 16px;border-top:1px solid var(--vp-border);background:var(--vp-raised);
        color:var(--vp-muted);font-size:12.5px;}
    .vp-status.is-visible{display:flex;}
    .vp-status .vp-dot{width:4px;height:4px;border-radius:50%;background:var(--vp-faint);flex:none;}
    .vp-status .vp-legend{display:inline-flex;align-items:center;gap:6px;}
    .vp-status .vp-swatch{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--vp-green-bg);box-shadow:inset 0 0 0 1.5px var(--vp-green-br);}

    /* Grid (ag-Grid quartz con los tokens ElevenLabs v4) */
    #grid-voice{
        flex:1;min-height:0;width:100%;
        --ag-font-family:var(--el-font-sans,'Inter',system-ui,sans-serif);--ag-font-size:13px;--ag-header-height:40px;--ag-wrapper-border-radius:0;--ag-header-column-separator-display:none;
        --ag-row-height:42px;--ag-cell-horizontal-padding:14px;
    }
    #grid-voice .ag-root-wrapper{border:none;}
    #grid-voice .ag-header-cell-text{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;}
    #grid-voice .ag-cell{font-variant-numeric:tabular-nums;}
    #grid-voice .ag-cell[col-id^="priceR"], #grid-voice .ag-cell[col-id="local"], #grid-voice .ag-cell[col-id="origin"]{text-align:right;}
    #grid-voice .ag-cell[col-id="local"], #grid-voice .ag-cell[col-id="origin"]{color:var(--vp-muted);}
    #grid-voice .vp-type{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--vp-raised);border:0;color:var(--vp-muted);
        font-size:11px;font-weight:600;letter-spacing:.03em;line-height:1.4;vertical-align:middle;}
    #grid-voice .ag-cell.vp-empty{color:var(--vp-faint);}
    #grid-voice .ag-paging-panel{border-top:1px solid var(--vp-border);color:var(--vp-muted);font-size:12.5px;}
    :scope[data-bs-theme="dark"] #grid-voice .ag-icon, :scope[data-bs-theme="dark"] #grid-voice .ag-picker-field-display,
    :scope[data-bs-theme="dark"] #grid-voice .ag-text-field-input, :scope[data-bs-theme="dark"] #grid-voice .ag-popup,
    :scope[data-bs-theme="dark"] #grid-voice .ag-label, :scope[data-bs-theme="dark"] #grid-voice .ag-text-option{color:var(--vp-text);}
    :scope[data-bs-theme="dark"] #grid-voice input[type="checkbox"], :scope[data-bs-theme="dark"] .vp input[type="checkbox"]{color-scheme:dark;}

    /* Celdas de precio: clicables, y la ruta activa como pastilla verde con tick */
    .vp-clickable{cursor:pointer;transition:background-color .15s ease,box-shadow .15s ease,color .15s ease;}
    .vp-clickable:hover{background:var(--vp-green-hv);}
    .vp-clickable.vp-empty{cursor:default;}
    .vp-clickable.vp-empty:hover{background:transparent;}
    .vp-selected{background:var(--vp-green-bg)!important;color:var(--vp-green-tx)!important;font-weight:600;box-shadow:inset 0 0 0 1.5px var(--vp-green-br);border-radius:8px;}
    .vp-selected::before{content:"";display:inline-block;width:12px;height:12px;margin:0 6px -1px 0;vertical-align:middle;background:currentColor;
        -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 4 4L19 6'/></svg>") center/contain no-repeat;
        mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 4 4L19 6'/></svg>") center/contain no-repeat;}

    @media (max-width:900px){
        .vp{padding:14px 14px 10px;height:auto;min-height:calc(100vh - var(--dt-topbar-h,44px));}
        #grid-voice{min-height:420px;}
        .vp .vp-search{margin-left:0;width:100%;}
    }

}
/* end dui-template-style modules/routing:0 */
/* dui-template-style {"key":"modules/sales:0","bytes":45349,"sha256":"55c7a4a3267e7e6196517bd274ff68caa042a194fd5fa3dc3b2c39a408a09cba","media":null,"source_sha256":"2c349c63d68290115aee1e4181ab01fa5e05389b34536856a036fa4c4df566f0"} */
@scope (:root:has(template[data-dui-legacy-style="modules/sales:0"])) {

    /* Sales ocupa exactamente el área bajo el topbar: el único scroll vertical pertenece
       a la tabla, no al documento. :has lo limita a este módulo y sus rutas compartidas. */
    #akicontenidonormal:has(> #salesn-root){
        display:flex;
        flex-direction:column;
        height:calc(100vh - var(--dt-topbar-h, 44px));
        height:calc(100dvh - var(--dt-topbar-h, 44px));
        min-height:0;
        overflow:hidden;
    }
    #salesn-root{
        --sal-topbar:70px; /* alto del topbar global: el drawer y el scrim empiezan debajo */
        --sal-accent:var(--dt-cta,#111110); --sal-accent-soft:var(--dt-active,rgba(15,15,15,.08));
        --sal-ink:var(--dt-text,var(--text-color,#111110));
        --sal-muted:var(--dt-muted,color-mix(in srgb, var(--text-color,#111110) 62%, transparent));
        --sal-faint:var(--dt-faint,color-mix(in srgb, var(--text-color,#111110) 40%, transparent));
        --sal-border:var(--dt-border,var(--border-color,rgba(15,15,15,.08)));
        --sal-surface:var(--dt-surface,var(--white-color,#ffffff));
        --sal-surface2:var(--dt-surface-2,color-mix(in srgb, var(--text-color,#111110) 5%, transparent));
        --sal-ok:var(--dt-success); --sal-ok-soft:rgba(22,163,74,.13);
        --sal-warn:var(--dt-warning); --sal-warn-soft:rgba(217,119,6,.14);
        --sal-bad:#c22432; --sal-bad-soft:rgba(220,38,38,.12);
        --sal-shadow-pop:var(--dt-pop-shadow,none);
        color:var(--sal-ink); font-size:14px; position:relative;
        display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden;
    }
    [data-bs-theme="dark"] #salesn-root{
        --sal-accent:var(--dt-cta,#ededeb); --sal-accent-soft:var(--dt-active,rgba(255,255,255,.09));
        --sal-ok:var(--dt-success); --sal-warn:var(--dt-warning); --sal-bad:#f27584;
        --sal-shadow-pop:var(--dt-pop-shadow,none);
    }
    #salesn-root *{box-sizing:border-box}
    #salesn-root button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
    #salesn-root .salesn-btn{
        display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;
        font-weight:600;font-size:13px;border:0;background:var(--sal-surface);
        white-space:nowrap;
    }
    #salesn-root .salesn-btn:hover{background:var(--sal-surface2)}
    #salesn-root .salesn-btn.primary{background:var(--sal-accent);border-color:var(--sal-accent);color:var(--dt-cta-fg)}
    #salesn-root .salesn-btn.primary:hover{filter:brightness(1.08)}
    #salesn-root .salesn-btn.icononly{padding:7px 9px;color:var(--sal-muted)}

    /* cabecera */
    .salesn-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px 10px}
    .salesn-entity{
        display:flex;align-items:center;gap:10px;padding:5px 10px 5px 6px;
        border:0;border-radius:11px;background:var(--sal-surface);
        cursor:pointer;transition:border-color .15s, box-shadow .15s;text-align:left;
    }
    #salesn-root .salesn-entity{padding:6px 9px;border-radius:8px}
    #salesn-root .salesn-entity:hover,#salesn-root .salesn-entity[aria-expanded="true"]{background:var(--sal-surface2);box-shadow:none}
    #salesn-root .salesn-entity:focus-visible{outline:2px solid var(--sal-accent);outline-offset:3px}
    .salesn-entity .chev{color:var(--sal-faint);font-size:14px;margin-left:2px}
    .salesn-entity .eicon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--sal-accent-soft);color:var(--sal-accent)}
    .salesn-entity h1{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
    .salesn-entity small{display:block;font-size:11px;font-weight:500;letter-spacing:0;color:var(--sal-muted);margin-bottom:3px}
    .salesn-head .sp{flex:1}
    .salesn-dirty{
        display:none;align-items:center;gap:6px;flex:none;
        font-size:12.5px;color:var(--sal-warn);
        background:var(--sal-warn-soft);
        border:0;
        border-radius:11px;padding:4px 4px 4px 10px;font-weight:600;
        box-shadow:none;
        animation:dui-legacy-modules-sales-salesndirty .18s ease-out;
    }
    .salesn-dirty.show{display:inline-flex}
    @keyframes dui-legacy-modules-sales-salesndirty{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
    .salesn-dirty .dico{
        width:18px;height:18px;border-radius:6px;flex:none;
        display:inline-flex;align-items:center;justify-content:center;
        background:color-mix(in srgb, var(--sal-warn) 18%, transparent);color:var(--sal-warn);
    }
    .salesn-dirty .dico .ti{font-size:12px;line-height:1}
    .salesn-dirty #salesn-dirtytxt{white-space:nowrap;letter-spacing:.01em;padding-right:2px}
    #salesn-root .salesn-dirty button{
        display:inline-flex;align-items:center;gap:5px;
        font-size:12px;font-weight:700;line-height:1.2;
        border-radius:8px;padding:6px 11px;
        border:0;background:transparent;
        color:var(--sal-muted);white-space:nowrap;
        transition:background .12s,color .12s,border-color .12s,filter .12s;
    }
    #salesn-root .salesn-dirty button .ti{font-size:13px;line-height:1}
    #salesn-root .salesn-dirty button:hover{background:color-mix(in srgb, var(--sal-ink) 7%, transparent);color:var(--sal-ink)}
    #salesn-root .salesn-dirty button.g{
        background:var(--sal-accent);border-color:var(--sal-accent);color:var(--dt-cta-fg);
        box-shadow:none;
    }
    #salesn-root .salesn-dirty button.g:hover{filter:brightness(1.08);color:var(--dt-cta-fg)}
    #salesn-root .salesn-dirty button.x:hover{
        background:var(--sal-bad-soft);color:var(--sal-bad);border-color:transparent;
    }

    /* pestañas de vistas estilo HubSpot: pastilla rellena SOLO en la activa; inactivas planas
       (sin borde ni fondo) para no verse recargadas. Scroll horizontal con fade en los bordes. */
    .salesn-viewbar{
        display:flex;align-items:center;gap:4px;padding:8px 16px;
        border-bottom:1px solid var(--sal-border);overflow-x:auto;scrollbar-width:none;
        scroll-snap-type:x proximity;
        -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent);
                mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent);
    }
    .salesn-viewbar::-webkit-scrollbar{display:none}
    /* indicador de scroll propio (iOS no pinta ::-webkit-scrollbar custom): track+thumb en DOM,
       sincronizado por salesn_vscrollSync; visible SOLO cuando la viewbar desborda en x */
    .salesn-vscroll{height:3px;margin:-6px 16px 3px;pointer-events:none}
    .salesn-vscroll span{display:block;height:3px;border-radius:99px;background:var(--sal-faint);opacity:.45}
    .salesn-vsep{width:1px;height:20px;background:var(--sal-border);flex:none;margin:0 6px}
    /* OJO: prefijo #salesn-root para ganar al reset "#salesn-root button{padding:0;background:none;...}"
       (id>clase); sin el prefijo estas reglas eran CSS muerto sobre los <button> de las tabs */
    #salesn-root .salesn-vtab{
        display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:7px 14px;flex:none;
        border:none;border-radius:8px;background:transparent;cursor:pointer;
        color:var(--sal-muted);font-weight:600;font-size:13px;max-width:230px;line-height:1.4;
        scroll-snap-align:start;
        transition:background .13s,color .13s,box-shadow .13s;
    }
    #salesn-root .salesn-vtab:hover{color:var(--sal-ink);background:var(--sal-surface2)}
    #salesn-root .salesn-vtab.is-active{
        background:color-mix(in srgb, var(--sal-accent) 12%, transparent);
        color:var(--sal-accent);
        box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sal-accent) 24%, transparent);
    }
    #salesn-root .salesn-vtab.is-active:hover{background:color-mix(in srgb, var(--sal-accent) 16%, transparent)}
    #salesn-root .salesn-vtab .vlbl{overflow:hidden;text-overflow:ellipsis;min-width:0}
    #salesn-root .salesn-vtab .vdot{width:7px;height:7px;border-radius:50%;flex:none}
    #salesn-root .salesn-vtab .ti{font-size:13.5px;color:var(--sal-faint);flex:none}
    #salesn-root .salesn-vtab.is-active .ti{color:inherit}
    #salesn-root .salesn-vtab .ti-star.soypin{color:#eab308}
    #salesn-root .salesn-vtab .vcount{
        font-size:10.5px;font-weight:700;color:var(--sal-faint);background:var(--sal-surface2);
        border-radius:20px;padding:1.5px 7px;font-variant-numeric:tabular-nums;flex:none;
    }
    #salesn-root .salesn-vtab:hover .vcount{background:var(--sal-surface)}
    #salesn-root .salesn-vtab.is-active .vcount{background:color-mix(in srgb, var(--sal-accent) 20%, transparent);color:var(--sal-accent)}
    #salesn-root .salesn-vtab .vmenu{display:none;margin:-2px -6px -2px 0;padding:3px;border-radius:6px;color:var(--sal-faint);flex:none}
    #salesn-root .salesn-vtab.is-active .vmenu,#salesn-root .salesn-vtab:hover .vmenu{display:inline-flex}
    #salesn-root .salesn-vtab .vmenu:hover{background:color-mix(in srgb, var(--sal-ink) 10%, transparent);color:var(--sal-ink)}
    #salesn-root .salesn-vtab.is-active .vmenu:hover{background:color-mix(in srgb, var(--sal-accent) 18%, transparent);color:inherit}
    #salesn-root .salesn-vtab.nueva{color:var(--sal-faint);font-weight:500}
    #salesn-root .salesn-vtab.nueva:hover{color:var(--sal-accent);background:var(--sal-accent-soft)}
    #salesn-root .salesn-vtab input,#salesn-root .salesn-vtab input:focus{border:none !important;background:transparent !important;box-shadow:none !important;outline:none !important;border-radius:0;color:var(--sal-ink);padding:0 2px;font:inherit;font-size:13px;width:150px}
    #salesn-root .salesn-vtab.editando{box-shadow:none;border-radius:8px;background:var(--sal-surface)}

    /* toolbar */
    .salesn-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--sal-border)}
    /* los selectores dedicados van dentro de un span: sin esto quedan pegados en linea (el gap de la toolbar no entra) */
    #salesn-selectors{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
    .salesn-search{display:flex;align-items:center;gap:8px;flex:0 1 260px;min-width:170px;border:0;border-radius:9px;padding:7px 11px;color:var(--sal-faint);background:var(--sal-surface)}
    /* sin cambio de color al enfocar (peticion Marc): mismo aspecto activo/inactivo en dark y light */
    /* !important + #id: datalyse-theme.css pinta TODOS los input[type=text] (y su :focus) con fondo/borde
       !important -> sin esto el input muestra un fondo/borde propio dentro de la pastilla al enfocar */
    #salesn-root .salesn-search input,#salesn-root .salesn-search input:focus{
        border:none !important;background:transparent !important;box-shadow:none !important;outline:none !important;
        border-radius:0;padding:0;margin:0;color:var(--sal-ink);width:100%;font:inherit;
    }
    .salesn-fchip{display:inline-flex;align-items:center;gap:6px;padding:6px 8px 6px 11px;border-radius:8px;background:var(--sal-accent-soft);color:var(--sal-accent);font-weight:600;font-size:12.5px}
    .salesn-fchip b{font-weight:700}
    .salesn-fchip .rm{display:inline-flex;border-radius:5px;padding:1px;opacity:.65}
    .salesn-fchip .rm:hover{opacity:1;background:rgba(0,0,0,.10)}
    .salesn-addf{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:8px;border:1px dashed var(--sal-border);color:var(--sal-muted);font-weight:600;font-size:12.5px}
    .salesn-addf:hover{color:var(--sal-accent);border-color:var(--sal-accent)}
    /* selectores dedicados en la toolbar (Creation date / Agent / Status / Filters) */
    /* pills tipo elevenlabs: relleno sutil (visible tambien en dark, el borde solo no se ve),
       hover neutro gris; el estado activo .on si va en accent */
    .salesn-sel{
        display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:10px;
        border:0;background:var(--sal-surface2);color:var(--sal-ink);
        font-weight:600;font-size:12.5px;white-space:nowrap;
        transition:background .12s,border-color .12s,color .12s;
    }
    .salesn-sel:hover{
        background:color-mix(in srgb, var(--sal-ink) 9%, transparent);
        border-color:color-mix(in srgb, var(--sal-ink) 22%, var(--sal-border));
    }
    .salesn-sel .chev{font-size:13px;color:var(--sal-faint)}
    .salesn-sel:hover .chev{color:var(--sal-muted)}
    .salesn-sel .ti-filter{font-size:13px;color:var(--sal-faint)}
    .salesn-sel.on{border-color:color-mix(in srgb, var(--sal-accent) 45%, transparent);color:var(--sal-accent);background:var(--sal-accent-soft)}
    .salesn-sel.on .chev,.salesn-sel.on .ti-filter{color:var(--sal-accent)}
    .salesn-count{color:var(--sal-muted);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
    .salesn-count b{color:var(--sal-ink);font-weight:700}

    /* popovers (filtro / columnas / menu vista) */
    .salesn-pop{
        position:absolute;z-index:60;min-width:250px;max-width:320px;display:none;
        background:var(--sal-surface);border:0;border-radius:14px;
        box-shadow:none;padding:10px;
    }
    .salesn-pop.show{display:block;animation:dui-legacy-modules-sales-salesnpop .13s ease-out}
    @keyframes dui-legacy-modules-sales-salesnpop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
    .salesn-pop h4{margin:4px 10px 10px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--sal-faint);font-weight:700}
    /* OJO: prefijo #salesn-root obligatorio para ganar al reset "#salesn-root button{padding:0;background:none;...}"
       (id>clase); sin el, padding/hover/color eran CSS muerto sobre los <button class="item"> */
    #salesn-root .salesn-pop .item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border-radius:10px;font-weight:500;font-size:13.5px;color:var(--sal-ink);line-height:1.35}
    #salesn-root .salesn-pop .item:hover{background:var(--sal-surface2)}
    #salesn-root .salesn-pop .item:hover .ti{color:var(--sal-muted)}
    #salesn-root .salesn-pop .item.rojo:hover{background:var(--sal-bad-soft)}
    .salesn-pop .item .ti{color:var(--sal-faint);font-size:14px}
    .salesn-pop .item .ck{margin-left:auto;color:var(--sal-ink);font-size:15px;flex:none}
    .salesn-pop .item .lbl{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
    .salesn-pop .item .lbl small{color:var(--sal-faint);font-weight:400;font-size:11px;line-height:1.3}
    #salesn-root .salesn-pop .item.rojo,#salesn-root .salesn-pop .item.rojo .ti{color:var(--sal-bad)}
    .salesn-pop .eit{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex:none}
    .salesn-pop .eit .ti{font-size:14px;color:inherit}
    .salesn-pop input[type=text],.salesn-pop input[type=number],.salesn-pop input[type=date],.salesn-pop input[type=time],.salesn-pop select{
        width:100%;font:inherit;font-size:13px;color:var(--sal-ink);background:var(--sal-surface);
        border:0;border-radius:10px;padding:8px 11px;outline:none;margin-bottom:8px;
        transition:border-color .12s, box-shadow .12s;
        color-scheme:light dark; /* icono del datepicker nativo acorde al tema (si no, sale claro sobre oscuro) */
    }
    /* rango desde/hasta de fechas: MISMO formato que el editor datetime del panel de registro
       (record-panel.css .rp-prow .pv input: fondo card + borde accent + radio de control) */
    .salesn-pop input[type=datetime-local]{
        width:100%;font:inherit;font-size:13px;color:var(--sal-ink);background:var(--sal-surface);
        border:0;border-radius:10px;padding:7px 10px;outline:none;margin-bottom:8px;
        color-scheme:light dark;
    }
    .salesn-pop input[type=datetime-local]:focus{box-shadow:0 0 0 3px var(--sal-accent-soft)}
    .salesn-pop input:focus,.salesn-pop select:focus{
        border-color:color-mix(in srgb, var(--sal-ink) 45%, var(--sal-border));
        box-shadow:0 0 0 3px color-mix(in srgb, var(--sal-ink) 7%, transparent);
    }
    .salesn-pop select[multiple]{min-height:110px} /* fallback nativo si dUI.Select no esta */
    /* label pequeña sobre los controles del popover (estilo elevenlabs) */
    .salesn-pop .flbl{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--sal-muted);margin:2px 2px 5px}
    /* buscador integrado: sin borde, fondo suave, icono inline. Mismo aspecto activo/inactivo (sin cambio de color).
       !important: el input hereda estilos de input[type=text] del propio pop y de CSS globales; sin esto se pintaba
       un segundo "ovalo" con borde/fondo dentro de la pastilla */
    .salesn-pop .pfind{display:flex;align-items:center;gap:8px;background:var(--sal-surface2);border-radius:10px;padding:9px 12px;margin-bottom:8px;color:var(--sal-faint)}
    .salesn-pop .pfind .ti{font-size:14px;flex:none}
    #salesn-root .salesn-pop .pfind input,#salesn-root .salesn-pop .pfind input:focus{
        border:none !important;background:transparent !important;box-shadow:none !important;outline:none !important;
        border-radius:0;padding:0;margin:0;width:100%;font:inherit;font-size:13px;color:var(--sal-ink);
    }
    /* boton primario dentro del popover en tinta (negro en light / blanco en dark), firma elevenlabs */
    #salesn-root .salesn-pop .salesn-btn.primary{background:var(--sal-ink);border-color:var(--sal-ink);color:var(--sal-surface)}
    #salesn-root .salesn-pop .salesn-btn.primary:hover{filter:none;opacity:.85}
    /* drag de columnas en la cabecera */
    .salesn-grid th.dragging{opacity:.45}
    .salesn-grid th.drop-izq{box-shadow:none}
    .salesn-grid th.drop-der{box-shadow:none}
    /* drag de las tabs de vistas (#salesn-root y tras .is-active: mismo peso, gana por orden) */
    #salesn-root .salesn-vtab.dragging{opacity:.45}
    #salesn-root .salesn-vtab.drop-izq{box-shadow:none}
    #salesn-root .salesn-vtab.drop-der{box-shadow:none}
    .salesn-pop .filas{max-height:320px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--sal-border) transparent;display:flex;flex-direction:column;gap:2px}
    .salesn-pop .bulk-noresults{display:none;padding:16px 10px;text-align:center;color:var(--sal-faint);font-size:12.5px}
    .salesn-pop label.chk{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-weight:500;cursor:pointer;font-size:13.5px}
    .salesn-pop label.chk:hover{background:var(--sal-surface2)}
    .salesn-pop label.chk-all{margin:0 0 4px;border-bottom:1px solid var(--sal-border);border-radius:0;padding:8px 12px 10px;font-weight:600}
    .salesn-pop .foot{display:flex;gap:7px;justify-content:flex-end;padding-top:10px;border-top:1px solid var(--sal-border);margin-top:8px}
    #salesn-root input[type=checkbox]{accent-color:var(--sal-accent);width:14px;height:14px;cursor:pointer}

    /* popover de fecha estilo elevenlabs: presets a la izquierda + calendario doble a la derecha */
    .salesn-pop.fecha{width:min(720px,calc(100% - 16px));max-width:none;padding:0;overflow:hidden}
    .salesn-pop.fecha.show{display:flex;flex-direction:column}
    .salesn-fecha-body{display:flex;align-items:stretch;max-height:470px}
    .salesn-fecha-presets{width:212px;flex:none;overflow-y:auto;padding:8px;border-right:1px solid var(--sal-border);display:flex;flex-direction:column;gap:2px}
    .salesn-fecha-main{flex:1;min-width:0;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
    .salesn-fecha-inputs{display:flex;gap:10px}
    .salesn-fecha-inputs label{flex:1;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sal-muted)}
    .salesn-fecha-inputs input{margin:4px 0 0;font-variant-numeric:tabular-nums}
    .salesn-fecha-foot{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--sal-border)}
    .salesn-fecha-foot .tz{font-size:12px;color:var(--sal-muted);white-space:nowrap}
    .salesn-fecha-foot .sp{flex:1}
    .salesn-fecha-foot label.chk{padding:0;white-space:nowrap}
    .salesn-cal2{display:flex;gap:18px}
    .salesn-cal{flex:1;min-width:0}
    .salesn-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-weight:600;font-size:13px;text-transform:capitalize}
    #salesn-root .salesn-cal-head .nav{display:inline-flex;padding:4px;border-radius:7px;color:var(--sal-muted)}
    #salesn-root .salesn-cal-head .nav:hover{background:var(--sal-surface2);color:var(--sal-ink)}
    /* con 2 meses las flechas interiores sobran (visibility para no descuadrar el head) */
    .salesn-cal2 .salesn-cal:first-child .nav.next{visibility:hidden}
    .salesn-cal2 .salesn-cal:last-child .nav.prev{visibility:hidden}
    .salesn-cal table{width:100%;border-collapse:collapse;table-layout:fixed}
    .salesn-cal th{font-size:10.5px;font-weight:600;color:var(--sal-faint);text-align:center;padding:3px 0;text-transform:lowercase}
    .salesn-cal td{padding:2px 0;text-align:center}
    #salesn-root .salesn-cal .d{display:flex;align-items:center;justify-content:center;width:100%;height:31px;border-radius:8px;font-size:12.5px;font-variant-numeric:tabular-nums;cursor:pointer}
    #salesn-root .salesn-cal .d:hover{background:var(--sal-surface2)}
    .salesn-cal .d.out{visibility:hidden;pointer-events:none}
    #salesn-root .salesn-cal .d.today{box-shadow:none}
    #salesn-root .salesn-cal .d.mid{background:var(--sal-surface2);border-radius:0}
    #salesn-root .salesn-cal .d.sel{background:var(--sal-ink);color:var(--sal-surface);font-weight:600}
    #salesn-root .salesn-cal .d.sel.ini{border-top-right-radius:0;border-bottom-right-radius:0}
    #salesn-root .salesn-cal .d.sel.fin{border-top-left-radius:0;border-bottom-left-radius:0}
    @media (max-width:760px){
        .salesn-fecha-body{flex-direction:column;max-height:none}
        .salesn-fecha-presets{width:auto;max-height:150px;border-right:none;border-bottom:1px solid var(--sal-border)}
        .salesn-fecha-foot{flex-wrap:wrap}
    }
    @media (max-width:560px){
        .salesn-cal2 .salesn-cal:nth-child(2){display:none}
        .salesn-cal2 .salesn-cal:first-child .nav.next{visibility:visible}
    }

    /* tabla: consume el espacio restante del módulo y es su único scroll vertical */
    .salesn-head,.salesn-viewbar,.salesn-vscroll,.salesn-toolbar,.salesn-pager{flex:0 0 auto}
    .salesn-tablewrap{overflow:auto;flex:1 1 auto;height:auto;min-height:0;position:relative}
    #salesn-root.salesn-bulkpop-open .salesn-tablewrap{scrollbar-width:none}
    #salesn-root.salesn-bulkpop-open .salesn-tablewrap::-webkit-scrollbar{width:0;height:0}
    /* width obligatorio: sin el, table-layout:fixed se ignora y las columnas crecen con el contenido */
    table.salesn-grid{border-collapse:separate;border-spacing:0;table-layout:fixed;width:100%}
    .salesn-grid th,.salesn-grid td{
        padding:0 14px;height:44px;border-bottom:1px solid var(--sal-border);text-align:left;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .salesn-grid thead th{
        position:sticky;top:0;z-index:2;background:var(--sal-surface);height:40px;
        font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sal-muted);
        user-select:none;overflow:visible;
    }
    .salesn-grid thead th>div{position:relative;display:flex;align-items:center;min-width:0}
    .salesn-grid thead th .thlbl{display:flex;align-items:center;gap:5px;cursor:pointer;min-width:0;overflow:hidden}
    .salesn-grid thead th .thtxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
    .salesn-grid thead th .thlbl:hover{color:var(--sal-ink)}
    .salesn-grid thead th .thlbl .ti{opacity:0;font-size:13px;color:var(--sal-faint)}
    .salesn-grid thead th .thlbl:hover .ti{opacity:.7}
    .salesn-grid thead th.sorted .thlbl .ti{opacity:1;color:var(--sal-accent)}
    .salesn-grip{position:absolute;top:-6px;bottom:-6px;right:-14px;width:11px;cursor:col-resize;z-index:3}
    .salesn-grip::after{content:"";position:absolute;top:8px;bottom:8px;left:5px;width:1px;background:var(--sal-border)}
    .salesn-grip:hover::after,.salesn-grip.drag::after{background:var(--sal-accent);width:2px}
    .salesn-grid tbody tr{cursor:pointer}
    .salesn-grid tbody tr:hover td{background:var(--sal-surface2)}
    .salesn-grid tbody tr.is-open td{background:var(--sal-accent-soft)}
    .salesn-grid .ccheck{width:38px;padding:0 0 0 14px}
    .salesn-cname{font-weight:600}
    .salesn-grid td.num{font-variant-numeric:tabular-nums}
    .salesn-grid td.tenue{color:var(--sal-muted)}
    .salesn-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;line-height:1.4;max-width:100%;overflow:hidden}
    .salesn-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
    .salesn-agent{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%}
    .salesn-avatar{width:24px;height:24px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;letter-spacing:.02em}
    .salesn-avatar.unas{background:var(--sal-surface2);color:var(--sal-faint);border:1px dashed var(--sal-border)}
    /* centrado vertical dentro del wrap a alto completo (absoluto: no empuja la tabla) */
    .salesn-vacio{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);padding:20px;text-align:center;color:var(--sal-muted)}
    .salesn-vacio .ti{font-size:34px;color:var(--sal-faint)}
    .salesn-vacio p{margin:10px 0 16px}
    .salesn-skel td span{display:inline-block;height:12px;border-radius:6px;background:var(--sal-surface2);animation:dui-legacy-modules-sales-salesnpulse 1.2s infinite}
    @keyframes dui-legacy-modules-sales-salesnpulse{0%,100%{opacity:.45}50%{opacity:1}}

    /* paginacion */
    .salesn-pager{display:flex;align-items:center;gap:14px;padding:10px 18px;border-top:1px solid var(--sal-border);color:var(--sal-muted);font-size:12.5px;font-variant-numeric:tabular-nums;flex-wrap:wrap}
    .salesn-pager select{font:inherit;font-size:12.5px;color:var(--sal-ink);background:var(--sal-surface);border:0;border-radius:7px;padding:4px 8px}
    .salesn-pager .pages{display:flex;gap:3px;margin-left:auto}
    /* 2026-10-21 (Marc): las páginas, en el CENTRO de la barra (a la derecha las tapaba la bolita del asistente) */
    @media (min-width:768px){
        .salesn-pager{position:relative}
        .salesn-pager .pages{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
    }
    .salesn-pager .pg{min-width:28px;height:28px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;color:var(--sal-muted);padding:0 6px}
    .salesn-pager .pg:hover{background:var(--sal-surface2);color:var(--sal-ink)}
    .salesn-pager .pg.cur{background:var(--sal-accent);color:var(--dt-cta-fg)}
    .salesn-pager .pg[disabled]{opacity:.35;pointer-events:none}

    /* el CSS del panel derecho vive en record-panel.js (drawer global Fase B) */

    /* barra flotante de acciones masivas (aparece con registros seleccionados) */
    /* la barra HACE WRAP cuando el contenido no cabe (textos largos en es): nada de scroll
       horizontal con scrollbar oculta que recortaba el boton de borrar */
    .salesn-bulkbar{
        position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(10px);z-index:1030;
        display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
        padding:9px 12px;max-width:min(96vw,1100px);width:max-content;
        background:var(--sal-surface);border:0;border-radius:16px;
        box-shadow:none;
        opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;white-space:nowrap;
    }
    .salesn-bulkbar.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
    #salesn-root .salesn-bulkbar .bcount{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;padding-left:4px;color:var(--sal-ink);flex:none}
    .salesn-bulkbar .bcount .bx{display:inline-flex;padding:3px;border-radius:6px;color:var(--sal-faint)}
    .salesn-bulkbar .bcount .bx:hover{background:var(--sal-surface2);color:var(--sal-ink)}
    .salesn-bulkbar .salesn-btn{flex:none}
    .salesn-bulkbar .salesn-btn .ti-chevron-up{font-size:12px;color:var(--sal-faint)}
    /* OJO prefijo #salesn-root: sin el, el reset "#salesn-root button" (id>clase) mataba el rojo y el hover */
    #salesn-root .salesn-bulkbar .salesn-btn.rojo{color:var(--sal-bad)}
    #salesn-root .salesn-bulkbar .salesn-btn.rojo:hover{
        background:color-mix(in srgb, var(--sal-bad) 12%, var(--sal-surface));border-color:var(--sal-bad);
    }
    /* centrada sobre el CONTENIDO, no sobre el viewport: con el sidebar visible (>=1300px, layout
       vertical) se desplaza media anchura del sidebar (full 270px / mini 60px) y el tope de ancho
       descuenta el sidebar. Bajo 1300px el sidebar va off-canvas y se centra normal */
    @media (min-width:1300px){
        .salesn-bulkbar{left:calc(50% + 135px);max-width:min(calc(100vw - 294px),1100px)}
        body[data-sidebartype="mini-sidebar"] .salesn-bulkbar{left:calc(50% + 30px);max-width:min(calc(100vw - 84px),1100px)}
    }
    /* responsive: tablet = todo el ancho disponible; movil = botones solo-icono (las etiquetas
       van en .blbl para poder ocultarlas) y targets tactiles mas altos */
    @media (max-width:920px){
        .salesn-bulkbar{max-width:calc(100vw - 20px);bottom:12px}
    }
    @media (max-width:600px){
        .salesn-bulkbar{gap:6px;padding:8px 10px;border-radius:14px}
        .salesn-bulkbar .salesn-btn .blbl,.salesn-bulkbar .salesn-btn .ti-chevron-up{display:none}
        #salesn-root .salesn-bulkbar .bcount{font-size:12.5px}
    }
    @media (pointer:coarse){
        #salesn-root .salesn-bulkbar .salesn-btn{padding:9px 12px}
        .salesn-bulkbar .bcount .bx{padding:6px}
    }
    @media (max-width:920px){
        .salesn-head{padding:12px 12px 8px}
        .salesn-viewbar,.salesn-toolbar{padding-left:12px;padding-right:12px}
        .salesn-vscroll{margin-left:12px;margin-right:12px}
        #salesn-root .salesn-vtab{padding:7px 12px;font-size:12.5px;max-width:170px}
        .salesn-search{flex-basis:100%}
        .salesn-tablewrap{height:auto;max-height:none;min-height:0}
        .salesn-vacio{position:static;transform:none;padding:56px 20px}
    }

/* ═══════════ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══════════
   Bloque añadido al final del <style> del módulo: solo color, borde, sombra, radio y peso; ningún id/clase que lea el JS cambia.
   Acentos propios enganchados a --dt-cta (tinta) y grises a --dt-*; iconos en cuadrado neutro; sin degradados ni sombras. */
    /* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
       Solo color, borde, sombra, radio, espaciado y peso: ningún id, clase ni atributo que lea el JS cambia
       (.is-active/.editando/.dragging/.drop-*, th.sorted, tr.is-open, .salesn-sel.on, .pg.cur, .salesn-pop.show,
       .salesn-bulkpop-open siguen igual). Los tokens --sal-* de la cabecera ya apuntan a --dt-*; aquí la tinta es el
       único acento, las capas se separan por línea fina (sin sombra), pestañas subrayadas, cuadrados de icono
       neutros y botones ghost de 34 px. Referencia: modules/control-phonenumbers.html (.pn-btn, .pn-tabs, .pn-group-ic). */
    #salesn-root,[data-bs-theme="dark"] #salesn-root{
        --sal-shadow-pop:var(--dt-pop-shadow,none);
        --sal-hover:var(--dt-hover,rgba(15,15,15,.045));
        --sal-active:var(--dt-active,rgba(15,15,15,.08));
        --sal-border-strong:var(--dt-border-strong,rgba(12, 10, 9, .09));
        --sal-cta:var(--dt-cta,var(--dt-text,#111110));
        --sal-cta-hover:var(--dt-cta-hover,var(--dt-text,#2b2b29));
        --sal-cta-fg:var(--dt-cta-fg,#ffffff);
        /* velo del color de estado que EntitiesClient pinta inline en los .badge: tinte suave, el color pleno queda en el punto */
        --sal-badge-veil:color-mix(in srgb, var(--sal-surface) 84%, transparent);
    }

    /* botones ghost 34 px (como .pn-btn) y UN solo CTA en tinta */
    #salesn-root .salesn-btn{
        height:34px;padding:0 14px;border-radius:999px;
        border-color:var(--sal-border-strong);background:transparent;color:var(--sal-ink);
        transition:background-color .12s,border-color .12s,color .12s;
    }
    #salesn-root .salesn-btn .ti{font-size:16px;line-height:1}
    #salesn-root .salesn-btn:hover{background:var(--sal-hover);color:var(--sal-ink)}
    #salesn-root .salesn-btn.primary{background:var(--sal-cta);border-color:var(--sal-cta);color:var(--sal-cta-fg)}
    #salesn-root .salesn-btn.primary:hover{filter:none;background:var(--sal-cta-hover);border-color:var(--sal-cta-hover);color:var(--sal-cta-fg)}
    #salesn-root .salesn-btn.icononly{width:34px;padding:0;justify-content:center;color:var(--sal-muted);border-color:var(--sal-border)}
    #salesn-root .salesn-btn.icononly:hover{color:var(--sal-ink)}
    #salesn-root .salesn-pop .salesn-btn.primary{background:var(--sal-cta);border-color:var(--sal-cta);color:var(--sal-cta-fg)}
    #salesn-root .salesn-pop .salesn-btn.primary:hover{opacity:1;background:var(--sal-cta-hover);border-color:var(--sal-cta-hover)}
    #salesn-root input[type=checkbox]{accent-color:var(--sal-cta)}

    /* cabecera: selector de entidad con línea fina, icono en cuadrado neutro (el !important gana al color inline que
       pone el JS en #salesn-eicon), título 20/600 como .pn-title */
    #salesn-root .salesn-entity{border-color:var(--sal-border);background:transparent;border-radius:10px;transition:background-color .15s,border-color .15s}
    #salesn-root .salesn-entity:hover,#salesn-root .salesn-entity[aria-expanded="true"]{background:var(--sal-hover);border-color:var(--sal-border-strong);box-shadow:none}
    #salesn-root .salesn-entity:focus-visible{outline:2px solid var(--dt-focus,var(--sal-ink));outline-offset:2px}
    #salesn-root .salesn-entity .eicon{
        width:30px;height:30px;border-radius:9px;font-size:16px;
        background:var(--sal-surface2) !important;color:var(--sal-muted) !important;border:0;
    }
    #salesn-root .salesn-entity h1{font-size:20px;font-weight:400;letter-spacing:-.02em}
    #salesn-root .salesn-entity small{color:var(--sal-faint);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
    #salesn-root .salesn-entity .chev{color:var(--sal-muted)}

    /* "cambios sin guardar": chip gris con línea fina; Guardar = CTA tinta; Descartar = rojo solo en el texto */
    #salesn-root .salesn-dirty{
        color:var(--sal-muted);background:transparent;border-color:var(--sal-border-strong);
        border-radius:9px;padding:3px 3px 3px 9px;box-shadow:none;
    }
    #salesn-root .salesn-dirty .dico{background:var(--sal-surface2);color:var(--sal-muted);border:0;border-radius:5px}
    #salesn-root .salesn-dirty button{border-radius:7px;padding:5px 10px;font-weight:600}
    #salesn-root .salesn-dirty button:hover{background:var(--sal-hover);color:var(--sal-ink)}
    #salesn-root .salesn-dirty button.g{background:var(--sal-cta);border-color:var(--sal-cta);color:var(--sal-cta-fg);box-shadow:none}
    #salesn-root .salesn-dirty button.g:hover{filter:none;background:var(--sal-cta-hover);border-color:var(--sal-cta-hover);color:var(--sal-cta-fg)}
    #salesn-root .salesn-dirty button.x:hover{background:transparent;border-color:transparent;color:var(--sal-bad)}

    /* pestañas de vistas: subrayado 2 px en tinta (como #pn-main-content > .pn-tabs), sin pastilla ni punto de color */
    #salesn-root .salesn-viewbar{gap:18px;padding:0 18px}
    #salesn-root .salesn-vsep{height:16px;margin:0}
    #salesn-root .salesn-vscroll{margin:-1px 18px 0}
    #salesn-root .salesn-vtab{
        height:40px;padding:0 2px;gap:7px;border-radius:0;background:transparent;
        color:var(--sal-muted);font-weight:600;box-shadow:none;
        transition:color .13s,box-shadow .13s;
    }
    #salesn-root .salesn-vtab:hover{color:var(--sal-ink);background:transparent}
    #salesn-root .salesn-vtab.is-active,#salesn-root .salesn-vtab.is-active:hover{color:var(--sal-ink);background:transparent;box-shadow:inset 0 -2px var(--sal-ink)}
    #salesn-root .salesn-vtab .vdot{display:none}
    #salesn-root .salesn-vtab .ti{color:var(--sal-faint)}
    #salesn-root .salesn-vtab.is-active .ti{color:var(--sal-muted)}
    #salesn-root .salesn-vtab .ti-star.soypin,#salesn-root .salesn-vtab .ti-pin.soypin{color:var(--el-terracotta,var(--sal-muted))}
    #salesn-root .salesn-vtab .vcount,#salesn-root .salesn-vtab:hover .vcount,#salesn-root .salesn-vtab.is-active .vcount{
        background:var(--sal-surface2);color:var(--sal-muted);font-weight:600;border-radius:999px;padding:1px 7px;
    }
    #salesn-root .salesn-vtab .vmenu{border-radius:5px;color:var(--sal-faint)}
    #salesn-root .salesn-vtab .vmenu:hover,#salesn-root .salesn-vtab.is-active .vmenu:hover{background:var(--sal-active);color:var(--sal-ink)}
    #salesn-root .salesn-vtab.nueva{color:var(--sal-faint);font-weight:500}
    #salesn-root .salesn-vtab.nueva:hover{color:var(--sal-ink);background:transparent}
    #salesn-root .salesn-vtab.editando{border-radius:0;background:transparent;box-shadow:none}
    /* estados que el JS pone al arrastrar: se redeclaran después de .is-active para que sigan ganando */
    #salesn-root .salesn-vtab.dragging{opacity:.45}
    #salesn-root .salesn-vtab.drop-izq{box-shadow:none}
    #salesn-root .salesn-vtab.drop-der{box-shadow:none}

    /* toolbar: buscador y selectores ghost de 34 px; el activo (.on) en gris activo con texto en tinta; chips grises */
    #salesn-root .salesn-search{height:34px;padding:0 13px;border-radius:999px}
    #salesn-root .salesn-sel{
        height:34px;padding:0 13px;border-radius:999px;font-size:13px;
        background:transparent;border-color:var(--sal-border-strong);color:var(--sal-ink);
    }
    #salesn-root .salesn-sel:hover{background:var(--sal-hover);border-color:var(--sal-border-strong)}
    #salesn-root .salesn-sel.on{background:var(--sal-active);border-color:var(--sal-border-strong);color:var(--sal-ink)}
    #salesn-root .salesn-sel.on .chev,#salesn-root .salesn-sel.on .ti-filter{color:var(--sal-muted)}
    #salesn-root .salesn-fchip{
        height:30px;padding:0 5px 0 10px;border-radius:999px;font-size:12.5px;
        background:var(--sal-surface2);border:1px solid var(--sal-border);color:var(--sal-ink);
    }
    #salesn-root .salesn-fchip .ti{color:var(--sal-muted)}
    #salesn-root .salesn-fchip .rm{border-radius:50%;padding:2px;opacity:1;color:var(--sal-muted)}
    #salesn-root .salesn-fchip .rm:hover{background:var(--sal-active);color:var(--sal-ink)}

    /* popovers y barra flotante: línea fina fuerte, sin sombra, radio 12; filas con hover gris */
    #salesn-root .salesn-pop{border-color:var(--sal-border-strong);border-radius:12px;box-shadow:none;padding:8px}
    #salesn-root .salesn-pop h4{color:var(--sal-faint);font-weight:600}
    #salesn-root .salesn-pop .item{border-radius:8px;padding:9px 10px;font-size:13px}
    #salesn-root .salesn-pop .item:hover,#salesn-root .salesn-pop .item.rojo:hover{background:var(--sal-hover)}
    #salesn-root .salesn-pop label.chk{border-radius:8px;padding:8px 10px;font-size:13px}
    #salesn-root .salesn-pop label.chk:hover{background:var(--sal-hover)}
    #salesn-root .salesn-pop .pfind{height:34px;padding:0 10px;border-radius:8px;background:transparent;border:0}
    /* text/number/date/time los pinta datalyse-theme.css con !important (fondo surface-2, línea fina): se dejan. El rango
       datetime-local llevaba borde en accent → línea fina fuerte; el select nativo, igual */
    #salesn-root .salesn-pop input[type=datetime-local],#salesn-root .salesn-pop select{
        border-radius:8px;border-color:var(--sal-border-strong);background:transparent;
    }
    #salesn-root .salesn-pop input[type=datetime-local]:focus{box-shadow:none}
    #salesn-root .salesn-pop .flbl{color:var(--sal-faint)}
    #salesn-root .salesn-cal-head .nav:hover{background:var(--sal-hover)}
    #salesn-root .salesn-cal .d:hover{background:var(--sal-hover)}
    #salesn-root .salesn-cal .d.today{box-shadow:none}
    #salesn-root .salesn-cal .d.mid{background:var(--sal-active)}
    #salesn-root .salesn-cal .d.sel{background:var(--sal-cta);color:var(--sal-cta-fg)}
    #salesn-root .salesn-bulkbar{border-color:var(--sal-border-strong);border-radius:12px;box-shadow:none;background:var(--sal-surface)}
    #salesn-root .salesn-bulkbar .salesn-btn .ti-chevron-up{font-size:12px;color:var(--sal-faint)}
    #salesn-root .salesn-bulkbar .bcount .bx{border-radius:6px}
    #salesn-root .salesn-bulkbar .bcount .bx:hover{background:var(--sal-hover);color:var(--sal-ink)}
    #salesn-root .salesn-bulkbar .salesn-btn.rojo{color:var(--sal-bad);border-color:var(--sal-border-strong)}
    #salesn-root .salesn-bulkbar .salesn-btn.rojo:hover{background:var(--sal-hover);border-color:var(--sal-border-strong);color:var(--sal-bad)}

    /* tabla: cabecera gris 600 con línea fina fuerte, orden y arrastre en tinta/gris, fila abierta = gris activo + marca
       de 2 px en tinta, números tabulares en toda la rejilla */
    #salesn-root .salesn-grid{font-variant-numeric:tabular-nums}
    #salesn-root .salesn-grid thead th{color:var(--sal-muted);font-weight:600;letter-spacing:.05em;border-bottom-color:var(--sal-border-strong)}
    #salesn-root .salesn-grid thead th .thlbl:hover{color:var(--sal-ink)}
    #salesn-root .salesn-grid thead th.sorted .thlbl{color:var(--sal-ink)}
    #salesn-root .salesn-grid thead th.sorted .thlbl .ti{color:var(--sal-ink)}
    #salesn-root .salesn-grip:hover::after,#salesn-root .salesn-grip.drag::after{background:var(--sal-border-strong);width:2px}
    #salesn-root .salesn-grid th.drop-izq{box-shadow:none}
    #salesn-root .salesn-grid th.drop-der{box-shadow:none}
    #salesn-root .salesn-grid tbody tr:hover td{background:var(--sal-hover)}
    #salesn-root .salesn-grid tbody tr.is-open td{background:var(--sal-active)}
    #salesn-root .salesn-grid tbody tr.is-open td:first-child{box-shadow:none}
    #salesn-root .salesn-grid td.tenue{color:var(--sal-muted)}

    /* badges de estado/tags/asociación (EntitiesClient.statusBadge/renderProperty pintan inline background:<color>;color:#fff):
       tinte suave + punto con el color pleno + texto en tinta, como .pn-status-badge/.pn-status-dot. El velo va en
       background-image (la declaración inline es el shorthand background, sin !important) y el punto hereda el
       background-color inline del propio badge. */
    #salesn-root .salesn-grid td .badge{
        display:inline-flex;align-items:center;gap:6px;max-width:100%;height:24px;padding:0 10px 0 8px;border-radius:999px;
        font-size:12px;font-weight:600;line-height:1;letter-spacing:0;vertical-align:middle;
        color:var(--sal-ink) !important;
        background-image:linear-gradient(var(--sal-badge-veil),var(--sal-badge-veil)) !important;
    }
    #salesn-root .salesn-grid td .badge::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;background-color:inherit}
    #salesn-root .salesn-grid td .badge .ti{font-size:13px;color:var(--sal-muted)}

    /* avatares de agente: cuadrado neutro 24 px (el !important gana al background inline del JS) */
    #salesn-root .salesn-avatar{
        border-radius:7px;background:var(--sal-surface2) !important;color:var(--sal-muted);
        border:1px solid var(--sal-border);font-weight:600;
    }
    #salesn-root .salesn-avatar.unas{border-style:solid;color:var(--sal-faint)}

    /* vacío: icono en cuadrado neutro 44 px como .pn-empty-ic */
    #salesn-root .salesn-vacio .ti{
        display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;
        background:var(--sal-surface2);border:0;color:var(--sal-muted);font-size:22px;
    }
    #salesn-root .salesn-vacio p{color:var(--sal-muted)}

    /* paginación: página actual en gris activo con anillo fino (no un segundo bloque de tinta), select ghost de 30 px */
    #salesn-root .salesn-pager select{height:30px;padding:0 8px;border-radius:8px;border-color:var(--sal-border-strong);background:transparent;color:var(--sal-ink)}
    #salesn-root .salesn-pager .pg{border-radius:7px;color:var(--sal-muted)}
    #salesn-root .salesn-pager .pg:hover{background:var(--sal-hover);color:var(--sal-ink)}
    #salesn-root .salesn-pager .pg.cur{background:var(--sal-active);color:var(--sal-ink);box-shadow:none}

    @media (max-width:920px){
        #salesn-root .salesn-viewbar{gap:14px;padding:0 12px}
        #salesn-root .salesn-vscroll{margin-left:12px;margin-right:12px}
    }
    /* All record routes, including Broker Hub Payments, use the shared canvas. */
    #salesn-root { background: var(--dt-app); }
    #salesn-root .salesn-pager { background: var(--dt-app); border-top-color: transparent; }
    @media (max-width: 920px) {
        #salesn-root .salesn-tablewrap { margin: 0 12px 8px; }
    }

}
/* end dui-template-style modules/sales:0 */
/* dui-template-style {"key":"modules/superagents:0","bytes":197083,"sha256":"08a5a7c13df90feb720deb2d6cf7a76b9b39d53ab6eb0534d010e37b31c6c6e5","media":null,"source_sha256":"5924a3240d4202df66b3c2360bd55886913b4898a1938bfe93387a1a1a2115a2"} */
@scope (:root:has(template[data-dui-legacy-style="modules/superagents:0"])) {

/* Tokens del sistema visual REAL del CRM (cssyapp/datalyse-modern.css, la capa
   monocroma final): --dt-* resuelven claro/oscuro solos. Los --bs-* que habia aqui
   antes solo servian de reserva y dejaban el modulo con un azul (#5d87ff) que la
   aplicacion ya no usa: el CTA de verdad es #006fbe. Nada hardcodeado fuera de esto. */
#sa_page, #sa_modal_tools, #sa_modal_group, #sa_modal_navrun{ --sa-gap:16px;
          --sa-pri:var(--dt-cta,#111110); --sa-pri-rgb:var(--dt-cta-rgb,17,17,16);
          --sa-txt:var(--dt-text,#111110); --sa-mut:var(--dt-muted,#5f5f5c); --sa-fnt:var(--dt-faint,#72726e);
          --sa-bg:var(--dt-surface,#fff); --sa-bg2:var(--dt-surface-2,#eeeeec);
          --sa-app:var(--dt-app,#f7f7f6);
          --sa-bor:var(--dt-border,rgba(15,15,15,.08)); --sa-bors:var(--dt-border-strong,rgba(12, 10, 9, .09));
          --sa-hover:var(--dt-hover,#f4f4f3); --sa-act:var(--dt-active,#efefee);
          --sa-ok:var(--dt-success,#16835b); --sa-warn:var(--dt-warning,#b86513); --sa-dang:var(--dt-danger,#d94949);
          --sa-r:var(--dt-radius,8px); --sa-rl:var(--dt-radius-lg,12px);
          --sa-disp:var(--font-sans);
          /* alto util: viewport menos topbar (44) y el padding de #akicontenidonormal (20+32) */
          --sa-h:calc(100vh - 96px);
          /* rampa de las graficas: un solo tono, orden del embudo. Validada para
             daltonismo (OKLab x100: 17,3 entre pasos contiguos; 19,3 en vision normal). */
          --sa-c1:#b3d4ea; --sa-c2:#4f9ed2; --sa-c3:#00609f;
          /* color por agente: se reparte por posicion en la lista, en el ORDEN de la lamina
             (azul, violeta, ambar, verde, rojo). Claro y oscuro tienen su juego. 26-10: la tanda 4 los puso en gris y Marc
             los pidio de vuelta ("con lo que costo se han cargado los colorines"): se quedan. */
          --sa-a1:#2f6fe4; --sa-a2:#6f52d8; --sa-a3:#b5680f; --sa-a4:#0f8a5f; --sa-a5:#c93f3f;
          --sa-tint:12%;
          /* acabado de las superficies elevadas de la lamina (cuadro del chat, tarjetas, listas) */
          --sa-sh1:0 0 0 transparent; --sa-inset:inset 0 0 0 transparent;
          --sa-link:var(--sa-txt);
          letter-spacing:-.01em; }
:scope[data-bs-theme="dark"] :is(#sa_page, #sa_modal_tools, #sa_modal_group, #sa_modal_navrun){ --sa-pri:var(--dt-cta,#ededeb); --sa-pri-rgb:var(--dt-cta-rgb,237,237,235); --sa-a1:#4f8ff0; --sa-a2:#8b6ff5; --sa-a3:#c9761f; --sa-a4:#17a673; --sa-a5:#e05252;
          --sa-tint:18%; --sa-sh1:0 0 0 transparent; --sa-inset:inset 0 0 0 transparent; }

/* ══ ARMAZON DE MENSAJERO (2026-09-17) ═════════════════════════════════════
   Lamina "Superagentes · chat y grupos" aprobada por Marc: lista fija a la
   izquierda (grupos + agentes con su funcion) y el agente elegido a la derecha.
   Sustituye al selector-popover: la lista ES la navegacion. */
#sa_page{ padding-left:0; padding-right:0; }
#sa_page .sa-shell{ position:relative; display:flex; height:var(--sa-h); min-height:520px; border:0;
    border-radius:var(--sa-rl); overflow:hidden; background:var(--sa-app); }
/* (25-10) la columna fija de la izquierda se quito: la navegacion es el selector de la cabecera (bloque "SELECTOR DE AUTOPILOT") */

/* avatar del agente: cuadro con el color de su posicion, el icono de su funcion y el punto de estado */
:is(#sa_page, #sa_modal_tools) .sa-av{ position:relative; flex:0 0 36px; width:36px; height:36px; border-radius:10px;
    display:flex; align-items:center; justify-content:center; font-size:18px; }
:is(#sa_page, #sa_modal_tools) .sa-av .dot{ position:absolute; right:-2px; bottom:-2px; width:9px; height:9px; border-radius:50%;
    background:var(--sa-ok); box-shadow:none; }
/* el aro del punto toma el color de lo que tiene detras: asi parece recortado */
#sa_page .sa-head .sa-av .dot{ box-shadow:none; }
:is(#sa_page, #sa_modal_tools) .sa-av.is-off .dot{ background:var(--sa-fnt); }
:is(#sa_page, #sa_modal_tools) .sa-av-sm{ flex:0 0 30px; width:30px; height:30px; border-radius:8px; font-size:15px; }
/* El grupo conserva el icono y color de cada agente; los grupos grandes muestran +N. */
#sa_page .sa-clu{ display:grid; grid-template-columns:repeat(2,17px); align-content:center; gap:2px;
    flex:0 0 36px; width:36px; height:36px; }
#sa_page .sa-clu .sa-group-member{ display:flex; min-width:0; }
#sa_page .sa-clu .sa-av{ flex:0 0 17px; width:17px; height:17px; border-radius:5px; font-size:11px; }
#sa_page .sa-clu[data-count="1"]{ display:flex; align-items:center; justify-content:center; }
#sa_page .sa-clu[data-count="1"] .sa-av{ flex-basis:36px; width:36px; height:36px; border-radius:10px; font-size:18px; }
#sa_page .sa-clu[data-count="3"] .sa-group-member:last-child{ grid-column:1 / -1; justify-self:center; }
#sa_page .sa-group-member.is-off .sa-av{ opacity:.55; }
#sa_page .sa-group-missing, #sa_page .sa-group-more{ background:var(--sa-bg2); color:var(--sa-mut); }
#sa_page .sa-group-more{ font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
#sa_page .sa-clu .sa-group-more{ font-size:9px; }

/* ── panel derecho ───────────────────────────────────────────────────────── */
#sa_page .sa-main{ flex:1; min-width:0; display:flex; flex-direction:column; min-height:0; background:var(--sa-app);
    container-type:inline-size; container-name:sa-main; }
/* cabecera de la lamina: UNA fila de 64px con las pestanas a la derecha */
#sa_page .sa-head{ flex:0 0 auto; display:flex; align-items:center; min-height:64px; padding:0 20px 0 16px; gap:10px;
    border-bottom:1px solid var(--sa-bor); }
#sa_page .sa-head-row{ flex:1; display:flex; align-items:center; gap:12px; min-width:0; }
#sa_page .sa-head-acts{ display:flex; align-items:center; gap:6px; flex:none; }
#sa_page .sa-head-acts:empty{ display:none; }
#sa_page .sa-head-tabs{ display:flex; min-width:0; flex:none; }
#sa_page .sa-head.is-solo .sa-head-tabs{ display:none; }
#sa_page .sa-head-txt{ min-width:0; flex:0 1 auto; }
#sa_page .sa-head-nm{ display:flex; align-items:center; gap:9px; min-width:0; }
#sa_page .sa-head-nm h1{ margin:0; font-family:var(--sa-disp); font-size:15px; font-weight:500; letter-spacing:-.02em;
    line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-head-fn{ font-size:12px; color:var(--sa-mut); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-head-sp{ flex:1; }
#sa_page .sa-head .sa-av .ti-plus{ font-size:18px; }
/* nombre editable en Configuracion: se lee como el titulo, se nota al pasar el raton */
#sa_page input.sa-head-name{ font-family:var(--sa-disp); font-size:15px; font-weight:600; letter-spacing:-.02em; line-height:1.2;
    height:auto; min-height:0; width:auto; max-width:320px; field-sizing:content; min-width:120px;
    color:var(--sa-txt) !important; background:transparent !important; border:0 !important; border-radius:6px !important;
    padding:2px 6px !important; margin-left:-6px; outline:0; }
#sa_page input.sa-head-name:hover{ background:var(--sa-hover) !important; }
#sa_page input.sa-head-name:focus{ background:var(--sa-bg) !important; box-shadow:0 0 0 1px var(--sa-bors) !important; }
/* pila de avatares del grupo */
#sa_page .sa-avpila{ display:flex; align-items:center; flex:none; }
#sa_page .sa-avpila-i{ position:relative; display:flex; border-radius:10px; background:var(--sa-app); box-shadow:none; }
#sa_page .sa-avpila-i + .sa-avpila-i{ margin-left:-8px; }
#sa_page .sa-avpila .sa-av{ flex:0 0 32px; width:32px; height:32px; border-radius:9px; font-size:16px; }
#sa_page .sa-avpila .sa-group-more{ font-size:12px; }
#sa_page .sa-avpila + .sa-head-txt{ margin-left:2px; }
/* en estrecho (sidebar del CRM abierto) la cabecera pasa a dos filas: las pestanas debajo */
@container sa-main (max-width:980px){
    #sa_page .sa-head{ padding:10px 20px 10px 16px; flex-wrap:wrap; row-gap:10px; }
    #sa_page .sa-head-row{ display:contents; }
    #sa_page .sa-head-tabs{ order:3; flex-basis:100%; }
}
#sa_page .sa-panebox{ flex:1; min-height:0; overflow:auto; padding:26px 24px; }
/* segmentado de pestanas: solo texto; la activa con la sombra de 1px */
:is(#sa_page, #sa_modal_tools) .sa-seg{ display:inline-flex; gap:2px; padding:3px; background:var(--sa-bg2); border:0;
    border-radius:10px; overflow-x:auto; scrollbar-width:none; max-width:100%; }
:is(#sa_page, #sa_modal_tools) .sa-seg::-webkit-scrollbar{ display:none; }
:is(#sa_page, #sa_modal_tools) .sa-seg button{ display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; color:var(--sa-mut);
    font-size:12px; font-weight:500; line-height:1.2; padding:5px 12px; border-radius:7px; cursor:pointer; white-space:nowrap;
    transition:background-color .12s, color .12s; }
:is(#sa_page, #sa_modal_tools) .sa-seg button:hover{ color:var(--sa-txt); }
:is(#sa_page, #sa_modal_tools) .sa-seg button.is-active{ background:var(--sa-bg); color:var(--sa-txt); font-weight:600; box-shadow:var(--sa-sh1); }
:is(#sa_page, #sa_modal_tools) .sa-seg .n{ font-size:10.5px; font-weight:600; color:var(--sa-mut); background:var(--sa-act); border-radius:999px; padding:0 6px; }
:is(#sa_page, #sa_modal_tools) .sa-seg button.is-active .n{ background:var(--sa-bg2); }

/* ── botones de la lamina: 34px, 12.5/600, icono de 14 con 7 de aire ─────── */
:is(#sa_page, #sa_modal_tools, #sa_modal_group) .btn.sa-b{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
    height:34px; min-height:34px; padding:0 15px; border-radius:999px; font-size:12.5px; font-weight:600; letter-spacing:-.01em;
    line-height:1; white-space:nowrap; }
:is(#sa_page, #sa_modal_tools, #sa_modal_group) .btn.sa-b .ti{ font-size:14px; width:14px; min-width:14px; height:14px; margin:0 !important; }
/* Secondary button colors come from the shared controls. */
:is(#sa_page, #sa_modal_tools, #sa_modal_group) .btn.sa-b.sa-b-s{ height:30px; min-height:30px; padding:0 11px; font-size:12px; }
:is(#sa_page, #sa_modal_tools, #sa_modal_group) .btn.sa-b:disabled{ opacity:.55; }
/* primario sin guardar: un punto, no un boton amarillo */
#sa_page .btn.sa-b.is-dirty{ position:relative; }
#sa_page .btn.sa-b.is-dirty::after{ content:''; position:absolute; top:-1px; right:3px; width:8px; height:8px; border-radius:50%;
    background:var(--sa-warn); box-shadow:0 0 0 2px var(--sa-app); }
/* icono suelto, sin borde */
:is(#sa_page, #sa_modal_tools) .sa-ghost{ width:34px; height:34px; flex:none; border:0; border-radius:8px; background:transparent; color:var(--sa-fnt);
    display:inline-flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; transition:background-color .12s, color .12s; }
:is(#sa_page, #sa_modal_tools) .sa-ghost:hover, :is(#sa_page, #sa_modal_tools) .sa-ghost[aria-expanded="true"]{ background:var(--sa-hover); color:var(--sa-txt); }
:is(#sa_page, #sa_modal_tools) .sa-ghost:disabled{ opacity:.45; cursor:default; }
/* menu de "mas acciones" (pausar, duplicar, eliminar) */
#sa_page .sa-menu{ position:absolute; z-index:1060; min-width:190px; padding:5px; background:var(--sa-bg); border:0;
    border-radius:10px; box-shadow:none; }
#sa_page .sa-menu button{ display:flex; align-items:center; gap:9px; width:100%; height:34px; padding:0 10px; border:0; border-radius:7px;
    background:transparent; color:var(--sa-txt); font-size:13px; font-weight:500; text-align:left; cursor:pointer; white-space:nowrap; }
#sa_page .sa-menu button .ti{ font-size:15px; color:var(--sa-mut); }
#sa_page .sa-menu button:hover{ background:var(--sa-hover); }
#sa_page .sa-menu button.is-danger, #sa_page .sa-menu button.is-danger .ti{ color:var(--sa-dang); }
#sa_page .sa-menu hr{ margin:4px 2px; border:0; border-top:1px solid var(--sa-bor); opacity:1; }
/* estado del agente: pastilla neutra con punto; en la cabecera se puede pulsar para pausar/activar */
:is(#sa_page, #sa_modal_tools) .sa-state{ display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; flex:none;
    border:0; border-radius:999px; background:var(--sa-bg2); color:var(--sa-mut); font-size:10.5px; font-weight:600; line-height:1;
    letter-spacing:0; white-space:nowrap; }
:is(#sa_page, #sa_modal_tools) .sa-state::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--sa-ok); flex:none; }
:is(#sa_page, #sa_modal_tools) .sa-state.is-off::before{ background:var(--sa-fnt); }
:is(#sa_page, #sa_modal_tools) button.sa-state{ cursor:pointer; transition:color .12s, background-color .12s; }
:is(#sa_page, #sa_modal_tools) button.sa-state:hover{ color:var(--sa-txt); background:var(--sa-act); }

/* ── configuracion simple: bloques, frase con pastillas y filas de reglas ── */
#sa_page .sa-cfg{ max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:24px; padding:8px 0 28px; }
#sa_page .sa-config-sections{ border:0; border-radius:var(--sa-rl); background:var(--sa-bg); overflow:hidden; }
#sa_page .sa-config-section + .sa-config-section{ border-top:1px solid var(--sa-bor); }
#sa_page .sa-config-section > summary{ display:flex; align-items:center; gap:14px; min-height:78px; padding:18px 20px; cursor:pointer; list-style:none; }
#sa_page .sa-config-section > summary::-webkit-details-marker{ display:none; }
#sa_page .sa-config-section > summary:hover{ background:var(--sa-hover); }
#sa_page .sa-config-section > summary:focus-visible{ outline:2px solid var(--sa-pri); outline-offset:-2px; }
#sa_page .sa-config-section > summary > .ti:not(.sa-config-chevron){ display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--sa-bg2); color:var(--sa-mut); font-size:18px; flex:none; }
#sa_page .sa-config-section > summary > span{ flex:1; min-width:0; }
#sa_page .sa-config-section > summary b{ display:block; font-size:13.5px; font-weight:600; }
#sa_page .sa-config-section > summary small{ display:block; color:var(--sa-mut); font-size:12px; margin-top:4px; line-height:1.5; overflow-wrap:anywhere; }
#sa_page .sa-config-section > summary > .sa-config-chevron{ font-size:14px; transition:transform .15s; }
#sa_page .sa-config-section[open] > summary > .sa-config-chevron{ transform:rotate(90deg); }
#sa_page .sa-config-body{ padding:2px 20px 22px; }
#sa_page .sa-cfg-options-body{ display:grid; gap:20px; padding:0 clamp(12px,3vw,20px) 20px; }
#sa_page .sa-cfg-example{ margin-top:10px; font-size:12px; color:var(--sa-mut); }
#sa_page .sa-cfg-example > summary{ width:fit-content; cursor:pointer; padding:4px 0; color:var(--sa-txt); }
#sa_page .sa-cfg-example > summary:focus-visible{ outline:2px solid var(--sa-pri); outline-offset:3px; }
#sa_page .sa-cfg-example p{ margin:8px 0; max-width:74ch; line-height:1.6; }
#sa_page .sa-cfg-request p{ margin:0 0 12px; line-height:1.6; }
#sa_page .sa-cfg-request p:last-child{ margin-bottom:0; }
#sa_page .sa-cfg-request b{ display:block; margin-bottom:3px; color:var(--sa-txt); }
#sa_page .sa-cfg-rules > .sa-hint{ margin:0 0 12px; }
#sa_page .sa-schedule-fields{ display:grid; gap:16px; margin-top:16px; }
#sa_page .sa-schedule-fields label:not(.form-check){ display:block; font-size:12px; font-weight:600; margin-bottom:6px; }
#sa_page .sa-schedule-inline{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
#sa_page .sa-schedule-inline > .form-control, #sa_page .sa-schedule-inline > .form-select{ width:auto; flex:1; min-width:120px; }
#sa_page .sa-schedule-fields .sa-hint{ margin:6px 0 0; }
#sa_page .sa-schedule-fields textarea{ min-height:105px; resize:vertical; }
#sa_page .sa-cfg-rules .form-switch > .form-check-label{ margin-left:8px; }
#sa_page .sa-chat-schedule{ border:0; background:none; padding:0 3px; color:var(--sa-mut); font-size:11.5px; display:inline-flex; gap:4px; align-items:center; }
#sa_page .sa-chat-schedule:hover{ color:var(--sa-txt); }
#sa_page #sa_config_advanced .sa-config-body > section + section{ margin-top:24px; }
#sa_page .sa-config-status{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; font-size:12px; color:var(--sa-mut); }
#sa_page #sa_config_save_state.is-dirty{ color:var(--sa-warn); }
#sa_page #sa_config_error{ flex-basis:100%; margin:0; color:var(--sa-dang); }
#sa_page [aria-invalid="true"]{ outline:2px solid var(--sa-dang) !important; outline-offset:2px; }
#sa_page .sa-cap-bar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:14px; color:var(--sa-mut); font-size:12px; }
#sa_page .sa-cap-bar > span{ flex:1; min-width:160px; }
#sa_page .sa-config-features{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 20px; margin-bottom:22px; }
#sa_page .sa-config-features .sa-tool{ min-height:50px; padding:10px 0; }
#sa_page .sa-tool-filter{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px 0; }
#sa_page .sa-tool-filter .sa-seg{ flex:none; }
#sa_page .sa-tool-filter .sa-tools-q{ flex:1; margin:0; min-width:100px; }
#sa_page .sa-integration-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
#sa_page .sa-integration{ border:0; border-radius:var(--sa-r); padding:12px; }
#sa_page .sa-integration-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#sa_page .sa-integration-head b{ flex:1; min-width:100px; font-size:13px; }
#sa_page .sa-integration small{ display:block; color:var(--sa-mut); margin-top:5px; line-height:1.5; }
#sa_page .sa-config-section .sa-tools{ max-width:none; }
#sa_page .sa-config-section .sa-tool-nm{ flex-wrap:wrap; gap:2px 8px; }
#sa_page .sa-config-section .sa-tool-nm > span:first-child{ flex:initial; }
#sa_page .sa-config-section .sa-tool-id{ display:none; }
#sa_page .sa-config-section .sa-tool-ds{ white-space:normal; }
@media(max-width:600px){
    #sa_page .sa-config-section > summary{ padding:14px 12px; }
    #sa_page .sa-config-body{ padding:0 12px 16px; }
    #sa_page .sa-config-features{ grid-template-columns:1fr; }
    #sa_page .sa-tool-filter{ flex-wrap:wrap; }
    #sa_page .sa-tool-filter .sa-tools-q{ flex-basis:100%; }
}
#sa_page .sa-cfg-lbl{ display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
#sa_page .sa-cfg-lbl b{ font-size:12.5px; font-weight:600; }
#sa_page .sa-cfg-lbl span{ flex:1; min-width:0; font-size:12px; color:var(--sa-fnt); }
#sa_page .sa-cfg-box{ border:0; border-radius:var(--sa-rl); background:var(--sa-bg); box-shadow:none; }
#sa_page .sa-cfg-box:focus-within{ border-color:var(--dt-focus, var(--sa-bors)); }
#sa_page .sa-cfg-box textarea{ display:block; border:0 !important; outline:0; box-shadow:none !important; resize:none; overflow:hidden; width:100%;
    background:transparent !important; padding:14px 16px !important; font-size:14px; line-height:1.62; color:inherit; min-height:73px; }
/* "Rellenar con IA": accion de texto a la derecha de la etiqueta, no un boton mas */
#sa_page .sa-lblbtn{ flex:none; display:inline-flex; align-items:center; gap:5px; border:0; background:transparent; padding:0;
    font-size:12px; font-weight:600; color:var(--sa-link); cursor:pointer; }
#sa_page .sa-lblbtn .ti{ font-size:13px; }
#sa_page .sa-lblbtn:hover{ color:var(--dt-link-hover,#005fa6); }
#sa_page .sa-lblbtn:disabled, #sa_page .sa-lblbtn.is-busy{ opacity:.55; pointer-events:none; }
#sa_page .sa-rows{ border:0; border-radius:var(--sa-rl); background:var(--sa-bg); overflow:hidden; }
#sa_page .sa-row{ display:flex; align-items:center; gap:13px; width:100%; min-height:58px; padding:9px 16px;
    border:0; border-top:1px solid var(--sa-bor); background:transparent; color:inherit; text-align:left; cursor:pointer;
    transition:background-color .12s; }
#sa_page .sa-row:first-child{ border-top:0; }
#sa_page .sa-row:hover{ background:var(--sa-hover); }
#sa_page .sa-row + .sa-row, #sa_page .sa-drawer + .sa-row{ min-height:59px; }
#sa_page .sa-row-ico{ flex:0 0 32px; width:32px; height:32px; border-radius:9px; border:0;
    display:flex; align-items:center; justify-content:center; color:var(--sa-mut); font-size:16px; }
#sa_page .sa-row-chev{ font-size:14px; }
#sa_page .sa-row-txt{ flex:1; min-width:0; }
#sa_page .sa-row-t{ font-size:13.5px; font-weight:600; }
#sa_page .sa-row-s{ font-size:12px; color:var(--sa-mut); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-row-v{ font-size:13px; font-weight:600; white-space:nowrap; max-width:38%; overflow:hidden; text-overflow:ellipsis; }
#sa_page .sa-row-chev{ color:var(--sa-fnt); transition:transform .18s; }
#sa_page .sa-row.is-open .sa-row-chev{ transform:rotate(90deg); }
#sa_page .sa-drawer{ padding:4px 18px 20px; border-top:1px solid var(--sa-bor); background:var(--sa-bg); }

/* ── pestana HERRAMIENTAS ────────────────────────────────────────────────── */
:is(#sa_page, #sa_modal_tools) .sa-tools{ max-width:820px; margin:0 auto; }
:is(#sa_page, #sa_modal_tools) .sa-tool{ display:flex; align-items:center; gap:13px; min-height:58px; padding:9px 16px; border-top:1px solid var(--sa-bor); }
:is(#sa_page, #sa_modal_tools) .sa-tool:first-child{ border-top:0; }
:is(#sa_page, #sa_modal_tools) .sa-tool-txt{ flex:1; min-width:0; }
:is(#sa_page, #sa_modal_tools) .sa-tool.is-off .sa-tool-txt{ opacity:.62; }
/* nombre legible arriba; el id tecnico, pequeno y en gris, solo como referencia */
:is(#sa_page, #sa_modal_tools) .sa-tool-nm{ display:flex; align-items:baseline; gap:8px; min-width:0; font-size:13.5px; font-weight:600; color:var(--sa-txt); }
:is(#sa_page, #sa_modal_tools) .sa-tool-nm > span:first-child{ flex:none; }
:is(#sa_page, #sa_modal_tools) .sa-tool-id{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px; font-weight:400; color:var(--sa-fnt);
    letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
:is(#sa_page, #sa_modal_tools) .sa-tool-ds{ font-size:12px; color:var(--sa-mut); margin-top:1px; line-height:1.45;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
:is(#sa_page, #sa_modal_tools) .sa-tool-st{ flex:none; display:flex; align-items:center; justify-content:flex-end; gap:8px; }
:is(#sa_page, #sa_modal_tools) .sa-tool-st .form-switch{ padding-left:0; margin:0; min-height:0; display:flex; }
:is(#sa_page, #sa_modal_tools) .sa-tool-st .form-switch .form-check-input{ float:none; margin:0; width:30px !important; height:18px; cursor:pointer; }
:scope:not([data-bs-theme="dark"]) :is(#sa_page, #sa_modal_tools) .sa-tool-st .form-check-input:not(:checked){ background-color:var(--sa-bg) !important;
    border-color:var(--sa-bors) !important;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2372726e'/%3e%3c/svg%3e") !important; }
/* rotulo de categoria: caption en mayusculas, como GRUPOS / AGENTES */
:is(#sa_page, #sa_modal_tools) .sa-tool-cap{ margin:18px 2px 7px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--sa-fnt); }
:is(#sa_page, #sa_modal_tools) .sa-tool-cap:first-child{ margin-top:4px; }
/* buscador de acciones: caja de 34px con lupa */
:is(#sa_page, #sa_modal_tools) .sa-tools-q{ display:flex; align-items:center; gap:8px; height:34px; padding:0 11px; margin:0 0 4px;
    border:0; border-radius:8px; background:var(--sa-bg); cursor:text; }
:is(#sa_page, #sa_modal_tools) .sa-tools-q .ti{ font-size:14px; color:var(--sa-fnt); }
:is(#sa_page, #sa_modal_tools) .sa-tools-q input{ flex:1; min-width:0; height:auto; min-height:0; border:0 !important; background:transparent !important;
    box-shadow:none !important; padding:0 !important; font-size:13px; outline:0; }
:is(#sa_page, #sa_modal_tools) .sa-tools-q input::placeholder{ color:var(--sa-fnt); opacity:1; }
/* recomendacion de la IA (pick_tools) */
#sa_page .sa-app{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-top:1px solid var(--sa-bor); }
#sa_page .sa-app:first-child{ border-top:0; }
#sa_page .sa-app img{ width:24px; height:24px; object-fit:contain; flex:none; }
#sa_page .sa-app-txt{ flex:1; min-width:0; }
#sa_page .sa-app-nm{ font-size:13.5px; font-weight:600; }
#sa_page .sa-app-ds{ font-size:12px; color:var(--sa-mut); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── preguntas con opciones (lamina: "¿Por cual empiezo?" / Grok) ─────────── */
:is(#sa_page, #sa_modal_tools) .sa-q{ border:0; border-radius:16px; background:var(--sa-bg); padding:16px;
    box-shadow:none; }
:is(#sa_page, #sa_modal_tools) .sa-drawer .sa-q{ box-shadow:none; }
:is(#sa_page, #sa_modal_tools) .sa-q + .sa-q{ margin-top:12px; }
:is(#sa_page, #sa_modal_tools) .sa-q-t{ font-family:var(--sa-disp); font-size:14.5px; font-weight:600; letter-spacing:-.02em; }
:is(#sa_page, #sa_modal_tools) .sa-q-s{ font-size:12.5px; color:var(--sa-mut); margin-top:3px; }
:is(#sa_page, #sa_modal_tools) .sa-q-opts{ margin-top:12px; border:0; border-radius:10px; overflow:auto; max-height:360px; }
:is(#sa_page, #sa_modal_tools) .sa-q-opt{ display:flex; align-items:center; gap:12px; width:100%; min-height:42px; padding:8px 12px; border:0;
    border-top:1px solid var(--sa-bor); background:transparent; color:inherit; text-align:left; cursor:pointer;
    transition:background-color .12s; }
:is(#sa_page, #sa_modal_tools) .sa-q-opt:first-child{ border-top:0; }
:is(#sa_page, #sa_modal_tools) .sa-q-opt:hover{ background:var(--sa-hover); }
:is(#sa_page, #sa_modal_tools) .sa-q-opt.is-sel{ background:var(--sa-act); }
:is(#sa_page, #sa_modal_tools) .sa-q-opt.is-off{ cursor:default; opacity:.7; }
:is(#sa_page, #sa_modal_tools) .sa-q-opt .k{ flex:0 0 22px; width:22px; height:22px; border-radius:6px; border:0;
    background:var(--sa-bg2); color:var(--sa-mut); font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; }
:is(#sa_page, #sa_modal_tools) .sa-q-opt .k-check{ border-radius:5px; background:var(--sa-bg); border-color:var(--sa-bors); }
:is(#sa_page, #sa_modal_tools) .sa-q-opt.is-sel .k-check{ background:var(--sa-pri); border-color:var(--sa-pri); color:var(--dt-cta-fg,#fff); }
:is(#sa_page, #sa_modal_tools) .sa-q-opt.is-sel .k:not(.k-check){ background:var(--sa-txt); color:var(--sa-bg); border-color:var(--sa-txt); }
:is(#sa_page, #sa_modal_tools) .sa-q-opt .tx{ flex:1; min-width:0; display:flex; flex-direction:column; }
:is(#sa_page, #sa_modal_tools) .sa-q-opt .tx b{ font-size:13.5px; font-weight:400; }
:is(#sa_page, #sa_modal_tools) .sa-q-opt.is-sel .tx b{ font-weight:600; }
:is(#sa_page, #sa_modal_tools) .sa-q-opt .tx small{ font-size:12px; color:var(--sa-mut); margin-top:1px; }
:is(#sa_page, #sa_modal_tools) .sa-q-opt .tx small.is-warn{ color:var(--sa-warn); }
:is(#sa_page, #sa_modal_tools) .sa-q-opt .sel{ color:var(--sa-mut); flex:none; }

/* Configuración sencilla (Marc, 20-10): qué hace, "Terminar de configurar" y Habilidades (Funciones). */
#sa_page .sa-cfg-finish{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px 12px; margin-top:10px; }
#sa_page .sa-cfg-ai{ display:grid; gap:12px; padding:clamp(16px,3vw,26px); border:0; border-radius:16px; background:var(--dt-surface); }
#sa_page .sa-cfg-ai-head{ display:flex; align-items:center; gap:9px; margin:0; font-size:clamp(20px,3vw,25px); font-weight:600; letter-spacing:-.025em; color:var(--dt-text); }
#sa_page .sa-cfg-ai-head .ti{ display:grid; place-items:center; width:35px; height:35px; border-radius:10px; font-size:19px; color:var(--dt-warning,var(--dt-muted)); background:var(--dt-surface-2); }
#sa_page .sa-cfg-rules{ padding:clamp(14px,3vw,22px); border:0; border-radius:14px; background:var(--dt-surface); }
#sa_page .sa-card-preview .sa-hab-tag{ margin-left:auto; }
#sa_page .sa-cfg-ai > p{ margin:0; color:var(--dt-muted); }
#sa_page .sa-cfg-ai .sa-cfg-box{ box-shadow:none; }
#sa_page .sa-cfg-ai .sa-cfg-box:focus-within{ outline:2px solid var(--dt-cta); outline-offset:1px; }
#sa_page .sa-cfg-ai .sa-cfg-finish{ justify-content:flex-start; margin:0; }
#sa_page .sa-cfg-finish:empty{ display:none; }
#sa_page .sa-cfg-finish-t{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--sa-mut); }
#sa_page .sa-hab-head{ display:flex; align-items:center; gap:14px; padding:18px 20px 6px; }
#sa_page .sa-hab-head > .ti{ display:grid; place-items:center; width:36px; height:36px; border-radius:10px; flex:none; font-size:18px;
    background:rgba(var(--sa-pri-rgb),.1); color:var(--sa-pri); }
#sa_page .sa-hab-head > span{ flex:1; min-width:0; }
#sa_page .sa-hab-head b{ display:block; font-size:13.5px; font-weight:600; }
#sa_page .sa-hab-head b:focus{ outline:none; }
#sa_page .sa-hab-head small{ display:block; color:var(--sa-mut); font-size:12px; margin-top:4px; line-height:1.5; }
#sa_page .sa-hab-acts{ flex:none; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
#sa_page .sa-hab.is-editing .sa-hab-acts{ display:none; }
#sa_page .sa-hab-acts .sa-textbtn .ti{ font-size:13px; }
#sa_page .sa-hab-banner{ display:flex; align-items:flex-start; gap:9px; margin:6px 0 10px; padding:10px 12px; border-radius:10px;
    background:rgba(var(--sa-pri-rgb),.07); font-size:12.5px; line-height:1.5; color:var(--sa-txt); }
#sa_page .sa-hab-banner > .ti{ flex:none; margin-top:1px; font-size:15px; color:var(--sa-pri); }
#sa_page .sa-hab-banner .sa-chat-spin{ flex:none; margin-top:3px; }
#sa_page .sa-hab-banner.is-sinuso{ align-items:center; }
#sa_page .sa-hab-banner.is-sinuso > span{ flex:1; min-width:0; }
#sa_page .sa-hab-banner.is-sinuso .sa-textbtn{ flex:none; font-weight:600; }
#sa_page .sa-hab-gt{ display:flex; align-items:center; gap:8px; margin:18px 2px 8px; font-size:13px; font-weight:600; color:var(--sa-txt); }
#sa_page .sa-hab-gt .ti{ font-size:15px; color:var(--sa-mut); }
#sa_page .sa-hab-grp .sa-card + .sa-tool-cap{ margin-top:14px; }
#sa_page .sa-hab-row.is-new{ background:rgba(var(--sa-pri-rgb),.055); box-shadow:none; }
#sa_page .sa-hab-ico{ flex:0 0 30px; width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-size:15px;
    background:var(--sa-bg2); color:var(--sa-mut); }
#sa_page .sa-hab-row.is-new .sa-hab-ico{ background:rgba(var(--sa-pri-rgb),.12); color:var(--sa-pri); }
#sa_page .sa-hab-row .sa-tool-ds{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#sa_page .sa-hab-tag, #sa_page .sa-hab-app{ display:inline-flex; align-items:center; gap:4px; height:19px; padding:0 8px; border-radius:999px;
    font-size:11px; font-weight:600; white-space:nowrap; }
#sa_page .sa-hab-tag{ background:var(--sa-bg2); color:var(--sa-mut); }
#sa_page .sa-hab-tag.is-new{ background:var(--sa-pri); color:var(--dt-cta-fg,#fff); }
#sa_page .sa-hab-row.is-off .sa-hab-tag.is-new{ background:rgba(var(--sa-pri-rgb),.14); color:var(--sa-pri); }
#sa_page .sa-hab-tag.is-warn{ background:color-mix(in srgb, var(--sa-warn) 14%, transparent); color:var(--sa-warn); }
#sa_page .sa-hab-app{ border:0; color:var(--sa-mut); font-weight:500; }
#sa_page .sa-hab-app .ti{ font-size:12px; }
#sa_page .sa-hab-row details{ margin-top:4px; }
#sa_page .sa-hab-row summary{ cursor:pointer; font-size:12px; color:var(--sa-mut); }
#sa_page .sa-hab-steps{ white-space:pre-wrap; font-size:12px; line-height:1.5; color:var(--sa-mut); margin-top:6px; }
#sa_page .sa-hab-empty{ padding:12px 2px 4px; font-size:12.5px; color:var(--sa-mut); }
#sa_page .sa-hab-hint{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:8px 2px 0; font-size:12.5px; color:var(--sa-mut); }
#sa_page .sa-hab-missing{ display:flex; gap:8px; margin-top:14px; font-size:12.5px; line-height:1.5; color:var(--sa-mut); }
/* Selectores compactos de registros, estados y fuentes. */
#sa_page .sa-recs{ display:flex; flex-direction:column; gap:10px; padding:12px 14px; border:0; border-radius:var(--sa-rl); background:var(--sa-bg); }
#sa_page .sa-recs-row{ display:flex; align-items:flex-start; gap:12px; }
#sa_page .sa-recs-k{ flex:0 0 76px; padding-top:6px; font-size:12px; color:var(--sa-mut); }
#sa_page .sa-recs-chips{ flex:1; min-width:0; position:relative; }
#sa_page .sa-recs-select{ position:relative; width:min(100%,440px); }
#sa_page .sa-draft-review{padding:clamp(14px,3vw,22px);border:0;border-radius:14px;background:var(--dt-surface);color:var(--dt-text)}
#sa_page .sa-draft-review-head{display:flex;align-items:center;gap:8px;font-size:14px}
#sa_page .sa-draft-review-head .ti,#sa_page .sa-draft-review p,#sa_page .sa-draft-review-grid span{color:var(--dt-muted)}
#sa_page .sa-draft-review p{margin:8px 0 0;font-size:13px}
#sa_page .sa-draft-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px;font-size:13px}
#sa_page .sa-draft-review-grid>div{display:flex;flex-direction:column;gap:4px;min-width:0;padding:10px 12px;border:0;border-radius:8px;background:var(--dt-surface-2)}
#sa_page .sa-draft-review-grid span{overflow-wrap:anywhere}
#sa_page .sa-draft-review .sa-draft-missing{color:var(--dt-warning)}
@media(max-width:700px){#sa_page .sa-draft-review-grid{grid-template-columns:1fr}}
#sa_page .sa-recs-select > summary{ display:flex; align-items:center; gap:9px; min-height:38px; padding:7px 11px; border:0; border-radius:9px; background:var(--sa-bg); color:var(--sa-txt); cursor:pointer; list-style:none; font-size:13px; }
#sa_page .sa-recs-select > summary::-webkit-details-marker{ display:none; }
#sa_page .sa-recs-select > summary .sa-select-value{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-recs-select > summary .ti-chevron-down{ color:var(--sa-mut); font-size:14px; }
#sa_page .sa-recs-select[open] > summary{ border-color:var(--sa-bors); }
#sa_page .sa-recs-select > summary:focus-visible,#sa_page .sa-recs-option:focus-visible,#sa_page .sa-recs-search:focus-visible{ outline:2px solid var(--sa-pri); outline-offset:2px; }
#sa_page .sa-recs-pop{ position:absolute; top:calc(100% + 5px); left:0; z-index:60; width:100%; min-width:min(300px,100%); padding:7px; border:0; border-radius:11px; background:var(--sa-bg); box-shadow:none; }
#sa_page .sa-recs-search{ display:block; width:100%; height:34px; margin:0 0 5px; padding:0 9px; border:0; border-radius:7px; background:var(--sa-bg); color:var(--sa-txt); font:inherit; font-size:12px; }
#sa_page .sa-recs-options{ max-height:250px; overflow-y:auto; overscroll-behavior:contain; }
#sa_page .sa-recs-option{ display:flex; align-items:center; gap:9px; width:100%; min-height:35px; padding:7px 8px; border:0; border-radius:7px; background:transparent; color:var(--sa-txt); text-align:left; font:inherit; font-size:12.5px; cursor:pointer; }
#sa_page .sa-recs-option:hover,#sa_page .sa-recs-option.is-sel{ background:var(--sa-hover); }
#sa_page .sa-recs-option > span:nth-child(2){ flex:1; min-width:0; }
#sa_page .sa-recs-option .sa-select-check{ display:inline-flex; width:17px; height:17px; align-items:center; justify-content:center; border:0; border-radius:5px; }
#sa_page .sa-recs-option.is-sel .sa-select-check{ color:var(--sa-bg); background:var(--sa-txt); border-color:var(--sa-txt); }
#sa_page .sa-recs-option[hidden],#sa_page .sa-recs-empty[hidden]{ display:none; }
#sa_page .sa-recs-empty{ padding:12px; color:var(--sa-mut); font-size:12px; }
#sa_page .sa-recs-q{ flex:0 0 100%; max-width:240px; height:30px; }
#sa_page .sa-card-preview{ display:grid; gap:16px; min-width:0; padding:clamp(16px,3vw,26px); border:0; border-radius:16px; background:var(--dt-surface-2); }
#sa_page .sa-card-heading{ margin:0; color:var(--dt-text); font-size:clamp(20px,3vw,24px); font-weight:600; letter-spacing:-.02em; }
#sa_page .sa-card-empty{ margin:0; padding:22px; border:0; border-radius:12px; background:var(--dt-surface); color:var(--dt-muted); font-size:14px; line-height:1.5; }
#sa_page .sa-card-empty[hidden],#sa_page #sa_card_sample[hidden],#sa_page .sa-recs-prev-card[hidden]{ display:none; }
#sa_page .sa-card-preview .sa-hint{ margin:4px 0 0; }
#sa_page .sa-recs-prev-t{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
#sa_page .sa-recs-prev-t .ti{ color:var(--dt-muted); }
#sa_page .sa-recs-prev-card{ min-width:0; pointer-events:none; }
#sa_page .sa-recs-prev-card .sas-card{ margin:0; max-width:none; }
#sa_page .sa-card-preview .sas-card{ padding:clamp(12px,3vw,22px); overflow-wrap:anywhere; }
#sa_page .sa-card-preview .sas-head{ padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--dt-border); }
#sa_page .sa-card-preview .sas-accion{ background:var(--dt-surface-2); }
#sa_page .sa-card-preview .sat-metric b{ font-size:30px; font-weight:600; line-height:1; }
#sa_page .sa-card-preview .sat-metric meter::-webkit-meter-optimum-value{ background:var(--dt-warning); }
#sa_page .sa-card-preview .sat-metric meter::-moz-meter-bar{ background:var(--dt-warning); }
#sa_page .sa-card-preview .sat-label{ font-size:11px; font-weight:600; }
#sa_page .sa-card-preview .sat-panel{ padding:clamp(10px,4cqi,17px); min-width:0; }
#sa_page .sa-card-title{ display:grid; gap:6px; color:var(--dt-text); font-size:13px; }
#sa_page .sa-card-title input{ width:100%; padding:10px; border:0; border-radius:8px; background:var(--dt-surface); color:var(--dt-text); font:inherit; }
#sa_page .sa-card-title input{ max-width:360px; }
#sa_page .sa-card-title input:focus-visible{ outline:2px solid var(--dt-cta); outline-offset:1px; }
#sa_page .sa-card-generate{ padding:8px 14px; border:0; border-radius:999px; background:var(--dt-cta); color:var(--el-accent-fg,var(--dt-cta-fg)); font:inherit; cursor:pointer; }
#sa_page .sa-card-generate.is-secondary{ border-color:var(--dt-border-strong); background:var(--dt-surface); color:var(--dt-text); }
#sa_page .sa-card-generate:disabled{ opacity:.55; cursor:default; }
#sa_page .sa-card-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
#sa_page .sa-card-actions .sa-hint:empty,#sa_page #sa_card_status:empty{ display:none; }
#sa_page .sa-card-advanced{ border-top:1px solid var(--dt-border); padding-top:12px; font-size:13px; }
#sa_page .sa-card-advanced > summary{ cursor:pointer; color:var(--dt-muted); }
#sa_page .sa-card-advanced[open] > summary{ margin-bottom:12px; }
#sa_page .sa-card-advanced-body{ display:grid; gap:12px; }
#sa_page .sa-card-custom-grid{ display:flex; flex-wrap:wrap; gap:9px 15px; margin-top:10px; }
#sa_page .sa-card-custom-grid label{ display:inline-flex; align-items:center; gap:5px; }
@media (max-width:540px){
  #sa_page .sa-cfg-rules .sa-row{ gap:8px; padding-inline:8px; }
}
#sa_page .sa-recs-g{ flex:0 0 100%; margin-top:4px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--sa-fnt); }
#sa_page .sa-pick{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:999px; border:0;
    background:var(--sa-bg); color:var(--sa-txt); font-size:12.5px; white-space:nowrap; cursor:pointer; transition:border-color .12s, background-color .12s; }
#sa_page .sa-pick:hover{ border-color:var(--sa-bors); }
#sa_page .sa-pick.is-sel{ background:var(--sa-txt); border-color:var(--sa-txt); color:var(--sa-bg); }
#sa_page .sa-pick i{ font-size:13px; }
#sa_page .sa-pick small{ font-size:11px; opacity:.7; }
#sa_page .sa-pick:disabled{ cursor:default; }
#sa_page .sa-pick:focus-visible{ outline:2px solid var(--sa-pri); outline-offset:2px; }
@media(max-width:575px){
    #sa_page .sa-hab-head{ padding:14px 12px 4px; flex-wrap:wrap; }
    #sa_page .sa-hab-acts{ flex-basis:100%; justify-content:flex-start; }
    #sa_page .sa-recs-row{ flex-direction:column; gap:6px; }
    #sa_page .sa-recs-k{ flex:none; padding:0; }
}
#sa_page .sa-textbtn{ border:0; background:transparent; padding:0 6px; font-size:12.5px; font-weight:500; color:var(--sa-mut); cursor:pointer; }
#sa_page .sa-textbtn:hover{ color:var(--sa-txt); text-decoration:underline; text-underline-offset:3px; }


/* La meta pertenece al grupo. Formulario explícito, sin guardados al cambiar campos. */
#sa_page .sa-group-goal{ max-width:820px; margin:0 auto; }
#sa_page .sa-goal-intro h2{ font-size:20px; font-weight:650; letter-spacing:-.025em; margin:0 0 8px; }
#sa_page .sa-goal-fields{ border:0; padding:0; margin:0; min-width:0; display:grid; gap:24px; }
#sa_page .sa-goal-fields textarea{ min-height:118px; resize:vertical; }
#sa_page .sa-goal-section{ padding-top:22px; border-top:1px solid var(--sa-bor); }
#sa_page .sa-goal-limits{ display:grid; grid-template-columns:minmax(180px,1fr) minmax(0,1.4fr); gap:24px; align-items:start; }
#sa_page .sa-goal-limit-details > summary{ cursor:pointer; font-size:13px; color:var(--sa-mut); }
#sa_page .sa-goal-limit-details[open] > summary{ margin-bottom:18px; }
#sa_page .sa-goal-fields .form-check-label{ font-weight:600; }
#sa_page .sa-goal-fields .sa-hint{ margin:8px 0 0; }
#sa_page .sa-goal-intro{ margin:0; }
#sa_page .sa-goal-intro .sa-hint{ margin-bottom:0; }
#sa_page .sa-goal-footer{ margin-top:0; padding-top:20px; border-top:1px solid var(--sa-bor); }
#sa_page .sa-goal-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#sa_page .sa-goal-note{ margin:0; padding:12px; border-radius:10px; background:var(--sa-bg); color:var(--sa-mut); }
#sa_page #sa_goal_status{ outline:none; }
@media(max-width:575px){ #sa_page .sa-goal-limits{grid-template-columns:minmax(0,1fr);gap:16px;} #sa_page .sa-goal-actions .btn{flex:1;} }

/* resumen */
#sa_page .sa-cfg-head{ position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 0; background:var(--sa-app); }
#sa_page .sa-cfg-name{ flex:1; min-width:220px; border:0 !important; background:transparent !important; padding-left:0;
    font-family:var(--sa-disp); font-size:19px !important; font-weight:700; letter-spacing:-.022em; }
/* La configuración conserva el scroll del panel; la acción manual vive en Avanzado. */
#sa_page .sa-panebox.is-config{ display:flex; flex-direction:column; padding-bottom:0; }
#sa_page .sa-panebox.is-config > #sa_tab_config, #sa_page .sa-panebox.is-config #sa_detail{ flex:1 0 auto; display:flex; flex-direction:column; }
#sa_page .sa-panebox.is-config .sa-cfg{ flex:1 0 auto; width:100%; }
#sa_page .sa-cfg-foot{ display:flex; align-items:center; gap:10px; padding:20px 0 0; }
#sa_page .sa-drawer .sa-q{ border-color:var(--sa-bor); }

/* crear = una pregunta, centrada en vertical en el panel */
#sa_page .sa-panebox:has(.sa-home){ display:flex; flex-direction:column; }
#sa_page .sa-panebox:has(.sa-home) > #sa_tab_config, #sa_page .sa-panebox:has(.sa-home) #sa_detail{ flex:1 0 auto; display:flex; flex-direction:column; }
#sa_page .sa-home{ max-width:620px; width:100%; margin:auto; padding-bottom:4vh; text-align:center; display:flex; flex-direction:column; align-items:center; }
#sa_page .sa-home-ico{ width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center;
    font-size:26px; color:var(--sa-a1); background:color-mix(in srgb,var(--sa-a1) var(--sa-tint),transparent); margin-bottom:20px; }
#sa_page .sa-home h3{ font-family:var(--sa-disp); font-size:25px; font-weight:700; letter-spacing:-.028em; line-height:1.24; margin:0; text-wrap:balance; }
#sa_page .sa-home p{ font-size:14px; color:var(--sa-mut); margin:10px 0 0; text-wrap:balance; }
:is(#sa_page, #sa_modal_tools) .sa-q-home{ width:100%; margin-top:24px; padding:0; text-align:left; border:0; background:transparent; box-shadow:none; }
:is(#sa_page, #sa_modal_tools) .sa-q-home .sa-q-opts{ margin-top:0; border-radius:14px; background:var(--sa-bg); max-height:none; box-shadow:none; }
:is(#sa_page, #sa_modal_tools) .sa-q-home .sa-q-opt{ gap:13px; min-height:56px; padding:8px 14px; }
:is(#sa_page, #sa_modal_tools) .sa-q-home .sa-q-opt .k{ flex:0 0 26px; width:26px; height:26px; border-radius:7px; font-size:11.5px; }
:is(#sa_page, #sa_modal_tools) .sa-q-home .sa-q-opt .tx b{ font-size:14px; font-weight:600; color:var(--sa-txt); }
:is(#sa_page, #sa_modal_tools) .sa-q-home .sa-q-opt .tx small{ font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:is(#sa_page, #sa_modal_tools) .sa-q-home .sa-q-opt .sel{ font-size:14px; color:var(--sa-fnt); }
#sa_page .sa-home-ask{ width:100%; display:flex; align-items:center; gap:12px; height:54px; margin-top:14px; padding:0 8px 0 16px;
    border:0; border-radius:27px; background:var(--sa-bg); box-shadow:none; }
#sa_page .sa-home-ask input{ flex:1; min-width:0; border:0 !important; outline:0; box-shadow:none !important;
    background:transparent !important; font-size:14px; padding:0 !important; height:auto; }
#sa_page .sa-home-ask input::placeholder{ color:var(--sa-fnt); opacity:1; }
#sa_page .sa-home-blank{ margin-top:18px; padding:0; border:0; background:transparent; font-size:12.5px; font-weight:500; color:var(--sa-mut); cursor:pointer; }
#sa_page .sa-home-blank:hover{ color:var(--sa-txt); text-decoration:underline; text-underline-offset:3px; }
#sa_page .sa-home-ask button{ flex:0 0 36px; width:36px; height:36px; border-radius:50%; border:0; background:var(--sa-pri);
    color:var(--dt-cta-fg,#fff); display:flex; align-items:center; justify-content:center; font-size:17px; cursor:pointer; }
#sa_page .sa-home-ask button.is-busy, #sa_page .sa-home-ask.is-busy button{ opacity:.6; pointer-events:none; }
#sa_page .sa-create{ max-width:680px; }
/* El cuadro de crear: tarjeta con el texto arriba y una barra abajo (ayuda, atajo y Crear con IA) */
#sa_page .sa-create-own{ width:100%; margin-top:26px; text-align:left; }
#sa_page .sa-create-own-title{ display:block; margin:0 2px 8px; font-size:13px; font-weight:600; color:var(--sa-txt); }
#sa_page .sa-create-prompt{ height:auto; flex-direction:column; align-items:stretch; gap:0; margin:0; padding:0; overflow:hidden;
    border:0; border-radius:18px; background:var(--sa-bg);
    box-shadow:none; transition:border-color .15s; }
#sa_page .sa-create-prompt:focus-within{ border-color:rgba(var(--sa-pri-rgb),.6); box-shadow:none; }
/* !important: el foco global de la app (datalyse-modern.css, textarea:focus) le pondria fondo y borde propios */
#sa_page .sa-create-prompt textarea, #sa_page .sa-create-prompt textarea:focus{ display:block; width:100%; min-height:100px; max-height:320px; padding:18px 20px 6px !important;
    border:0 !important; border-radius:0 !important; outline:0; box-shadow:none !important; resize:none; overflow-y:auto; background:transparent !important;
    color:var(--sa-txt); font:inherit; font-size:15px; line-height:1.6; }
#sa_page .sa-create-prompt textarea::placeholder{ color:var(--sa-fnt); opacity:1; }
#sa_page .sa-create-bar{ display:flex; align-items:center; gap:10px; padding:10px 12px 12px 20px; }
#sa_page .sa-create-hint{ flex:1; min-width:0; display:inline-flex; align-items:center; gap:7px; font-size:12px; line-height:1.4; color:var(--sa-mut); }
#sa_page .sa-create-hint .ti{ flex:none; font-size:14px; color:var(--sa-pri); }
#sa_page .sa-create-kbd{ flex:none; padding:2px 7px; border:0; border-radius:6px; background:var(--sa-bg2); box-shadow:none;
    font:inherit; font-size:11px; color:var(--sa-fnt); }
#sa_page .sa-create-prompt button{ flex:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; width:auto; height:38px; padding:0 16px;
    border:0; border-radius:999px; background:var(--sa-pri); color:var(--dt-cta-fg,#fff); font-size:13px; font-weight:600; cursor:pointer; transition:filter .12s; }
#sa_page .sa-create-prompt button:hover{ filter:brightness(1.07); }
#sa_page .sa-create-prompt button.is-busy::before{ content:''; width:13px; height:13px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent;
    animation:dui-legacy-modules-superagents-sa-chat-spin .8s linear infinite; }
#sa_page .sa-create-prompt button.is-busy .ti{ display:none; }
#sa_page .sa-create-examples{ width:100%; margin-top:30px; text-align:left; }
#sa_page .sa-create-cap{ margin:0 2px 10px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--sa-fnt); }
#sa_page .sa-create-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
#sa_page .sa-create-example{ display:flex; align-items:flex-start; gap:12px; width:100%; height:100%; margin:0; padding:14px; text-align:left;
    border:0; border-radius:12px; background:var(--sa-bg); color:var(--sa-txt); cursor:pointer; transition:background-color .12s, border-color .12s; }
#sa_page .sa-create-example:hover{ background:var(--sa-hover); border-color:var(--sa-bors); }
#sa_page .sa-create-example b{ display:block; font-size:13px; font-weight:600; }
#sa_page .sa-create-example small{ display:block; margin-top:3px; font-size:12px; color:var(--sa-mut); line-height:1.5; }
#sa_page .sa-create-example > .ti:first-child{ flex:0 0 30px; width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
    background:var(--sa-bg2); color:var(--sa-mut); font-size:15px; }
#sa_page .sa-create-example > .ti:last-child{ display:none; }
#sa_page .sa-create-example .tx{ flex:1; min-width:0; }
@media(max-width:640px){
    #sa_page .sa-create-grid{ grid-template-columns:1fr; }
    #sa_page .sa-create-hint, #sa_page .sa-create-kbd{ display:none; }
    #sa_page .sa-create-bar{ justify-content:flex-end; padding-left:12px; }
}
#sa_page .sa-create :is(button, summary):focus-visible{ outline:2px solid var(--sa-pri); outline-offset:3px; }

/* ── pestana CHAT (lamina "Chat con un agente") ─────────────────────────── */
#sa_page .sa-panebox.is-chat{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
#sa_page .sa-panebox.is-chat > #sa_tab_chat{ flex:1; min-height:0; display:flex; flex-direction:column; }
/* barra de conversaciones: discreta (la lamina no la tiene), solo si hay conversaciones */
#sa_page .sa-chat-bar{ position:relative; z-index:3; display:flex; align-items:center; gap:4px; padding:10px 0 0; max-width:840px; width:calc(100% - 48px); margin:0 auto; }
#sa_page .sa-chat-bar:empty{ display:none; }
#sa_page .sa-chat-conversations{ flex:0 1 360px; min-width:0; }
#sa_page .sa-chat-conversation-trigger{ display:flex; align-items:center; gap:8px; width:100%; min-width:0; min-height:34px; padding:6px 10px;
    border:0; border-radius:9px; background:var(--sa-bg); color:var(--sa-txt); text-align:left; font:inherit; font-size:12.5px; font-weight:500; cursor:pointer; }
#sa_page .sa-chat-conversation-trigger:hover,#sa_page .sa-chat-conversation-trigger[aria-expanded="true"]{ background:var(--sa-hover); border-color:var(--sa-bors); }
#sa_page .sa-chat-conversation-trigger:disabled{ opacity:.5; cursor:default; }
#sa_page .sa-chat-conversation-trigger > span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-chat-conversation-trigger > .ti{ flex:none; color:var(--sa-mut); font-size:15px; }
#sa_page .sa-chat-conversation-trigger[aria-expanded="true"] > .ti-chevron-down{ transform:rotate(180deg); }
#sa_page .sa-chat-conversation-pop{ position:absolute; z-index:22; left:0; top:calc(100% + 6px); display:flex; flex-direction:column; width:min(380px,100%);
    max-height:min(380px,55dvh); padding:7px; border:0; border-radius:12px; background:var(--sa-bg); box-shadow:none; }
#sa_page .sa-chat-conversation-pop[hidden],#sa_page .sa-chat-conversation-pop [hidden]{ display:none!important; }
#sa_page .sa-chat-conversation-search{ display:flex; align-items:center; gap:8px; flex:none; min-height:36px; margin:1px 1px 7px; padding:0 9px;
    border:0; border-radius:8px; background:var(--sa-bg2); color:var(--sa-mut); }
/* Override the shared high-contrast search focus border in both themes. */
#sa_page .sa-chat-conversation-search:focus-within{ border-color:transparent!important; box-shadow:none!important; background:var(--sa-act); }
#sa_page .sa-chat-conversation-search:focus-within > .ti{ color:var(--dt-cta); }
#sa_page .sa-chat-conversation-search > .ti{ flex:none; font-size:15px; }
#sa_page .sa-chat-conversation-search input[type="search"]{ width:100%; min-width:0; height:34px; min-height:0; margin:0; padding:0!important; border:0!important;
    border-radius:0!important; background:transparent!important; color:var(--sa-txt); font:inherit; font-size:12.5px; outline:0!important; box-shadow:none!important; }
#sa_page .sa-chat-conversation-search input::placeholder{ color:var(--sa-mut); opacity:1; }
#sa_page .sa-chat-conversation-search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
#sa_page .sa-chat-conversation-clear{ display:grid; place-items:center; flex:none; width:24px; height:24px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--sa-mut); cursor:pointer; }
#sa_page .sa-chat-conversation-clear:hover{ color:var(--sa-txt); background:var(--sa-act); }
#sa_page .sa-chat-conversation-list{ min-height:0; overflow-y:auto; overscroll-behavior:contain; }
#sa_page .sa-chat-conversation-option{ display:flex; align-items:center; gap:9px; width:100%; min-height:40px; padding:9px; border:0; border-radius:7px;
    background:transparent; color:var(--sa-txt); text-align:left; font:inherit; font-size:12.5px; cursor:pointer; }
#sa_page .sa-chat-conversation-option > span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-chat-conversation-option > .ti{ flex:none; color:var(--sa-mut); }
#sa_page .sa-chat-conversation-option > .ti-check{ visibility:hidden; }
#sa_page .sa-chat-conversation-option[aria-selected="true"] > .ti-check{ visibility:visible; }
#sa_page .sa-chat-conversation-option:hover,#sa_page .sa-chat-conversation-option[aria-selected="true"]{ background:var(--sa-act); }
#sa_page .sa-chat-conversation-trigger:focus-visible,#sa_page .sa-chat-conversation-pop button:focus-visible{ outline:2px solid var(--sa-mut); outline-offset:-2px; }
#sa_page .sa-chat-conversation-empty{ margin:0; padding:18px 10px; color:var(--sa-mut); font-size:12.5px; text-align:center; }
#sa_page .sa-chat-unread-count{ flex:none; min-width:20px; padding:1px 5px; border-radius:6px; background:var(--sa-txt); color:var(--sa-bg); font-size:10px; text-align:center; }
#sa_page .sa-chat-unread-dot{ flex:none; width:7px; height:7px; border-radius:50%; background:var(--sa-pri); }
#sa_page .sa-chat-conversation-option.is-unread > span{ font-weight:600; }
#sa_page .sa-chat-unread-count[hidden],#sa_page .sa-chat-new-messages[hidden]{ display:none!important; }
#sa_page .sa-chat-new-messages{ position:absolute; z-index:4; bottom:100%; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:7px;
    width:max-content; max-width:calc(100% - 32px); min-height:34px; margin:0 0 4px; padding:7px 12px; border:0; border-radius:18px;
    background:var(--sa-bg); color:var(--sa-txt); box-shadow:none; font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
#sa_page .sa-chat-new-messages:hover{ background:var(--sa-hover); }
#sa_page .sa-chat-new-messages:focus-visible{ outline:2px solid var(--sa-pri); outline-offset:2px; }
#sa_page .sa-chat-barbtn{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; border:0; border-radius:8px; flex:none;
    background:transparent; color:var(--sa-mut); font-size:12.5px; font-weight:600; cursor:pointer; transition:background-color .12s, color .12s; }
#sa_page .sa-chat-barbtn .ti{ font-size:15px; }
#sa_page .sa-chat-barbtn:hover{ background:var(--sa-hover); color:var(--sa-txt); }
#sa_page .sa-chat-barbtn.is-del{ width:30px; padding:0; justify-content:center; color:var(--sa-fnt); }
#sa_page .sa-chat-barbtn.is-del:hover{ color:var(--sa-dang); }
#sa_page .sa-chat-barbtn:disabled{ opacity:.45; pointer-events:none; }
#sa_page .sa-chat-thread{ flex:1; min-height:0; overflow:auto; padding:22px 24px 8px; }
#sa_page .sa-chat-bar:not(:empty) + .sa-chat-thread{ padding-top:10px; }
#sa_page .sa-chat-thread.is-empty{ display:flex; flex-direction:column; justify-content:center; }
#sa_page .sa-chat-thread.is-empty > .sa-chat-col{ width:100%; }
#sa_page .sa-chat-col{ max-width:840px; margin:0 auto; display:flex; flex-direction:column; gap:20px; }
#sa_page .sa-chat-row{ display:contents; }
#sa_page .sa-chat-dia{ align-self:center; font-size:11.5px; color:var(--sa-fnt); padding:2px 0 4px; }
#sa_page .sa-chat-aviso{ align-self:center; max-width:92%; margin:2px 0; padding:6px 12px; font-size:12px; line-height:1.45; color:var(--sa-mut); background:var(--sa-bg2); border:1px dashed var(--sa-bor); border-radius:10px; text-align:center; overflow-wrap:anywhere; }
#sa_page .sa-chat-history{ min-height:32px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--sa-mut); font-size:12px; }
#sa_page .sa-chat-history button{ border:0; background:transparent; color:inherit; padding:6px 10px; text-decoration:underline; }
#sa_page .sa-chat-yo{ align-self:flex-end; max-width:600px; padding:10px 16px; border-radius:18px 18px 6px 18px;
    background:color-mix(in srgb, var(--sa-pri) 10%, var(--sa-bg2)); font-size:14px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
#sa_page .sa-chat-message{ display:flex; flex-direction:column; gap:4px; min-width:0; max-width:100%; align-self:flex-start; }
#sa_page .sa-chat-message.is-user{ align-self:flex-end; align-items:flex-end; max-width:min(600px,100%); }
#sa_page .sa-chat-message.is-user .sa-chat-yo{ max-width:100%; }
#sa_page .sa-chat-message.is-notice{ align-self:center; align-items:center; max-width:92%; }
#sa_page .sa-chat-message.is-notice .sa-chat-aviso{ max-width:100%; }
#sa_page .sa-chat-message > .sa-chat-meta{ min-height:20px; margin-top:0; padding:0 4px; }
#sa_page .sa-chat-ia{ display:flex; gap:11px; align-items:flex-start; }
#sa_page .sa-chat-ia-txt{ min-width:0; flex:1; font-size:14px; line-height:1.62; overflow-wrap:anywhere; }
#sa_page .sa-chat-ia-txt p{ margin:0 0 8px; }
#sa_page .sa-chat-ia-txt ul{ margin:0 0 8px; padding-left:20px; list-style:disc; }
#sa_page .sa-chat-ia-txt li{ display:list-item; margin:2px 0; }
#sa_page .sa-chat-ia-txt b{ font-weight:600; }
#sa_page .sa-chat-at{ color:var(--sa-link); font-weight:600; }
/* Markdown del chat: el desbordamiento de tablas y codigo queda en su bloque. */
#sa_page .sa-chat-md{ min-width:0; max-width:100%; }
#sa_page .sa-chat-md h1, #sa_page .sa-chat-md h2, #sa_page .sa-chat-md h3,
#sa_page .sa-chat-md h4, #sa_page .sa-chat-md h5, #sa_page .sa-chat-md h6{
    margin:16px 0 8px; color:var(--sa-txt); font-family:var(--sa-disp); font-weight:650; line-height:1.35; letter-spacing:-.015em; }
#sa_page .sa-chat-md h1{ font-size:21px; }
#sa_page .sa-chat-md h2{ font-size:18px; }
#sa_page .sa-chat-md h3{ font-size:16px; }
#sa_page .sa-chat-md h4, #sa_page .sa-chat-md h5, #sa_page .sa-chat-md h6{ font-size:14px; }
#sa_page .sa-chat-md > :first-child{ margin-top:0; }
#sa_page .sa-chat-md > :last-child{ margin-bottom:0; }
#sa_page .sa-chat-md p{ margin:0 0 10px; }
#sa_page .sa-chat-md ul, #sa_page .sa-chat-md ol{ margin:0 0 10px; padding-left:22px; }
#sa_page .sa-chat-md ul{ list-style:disc; }
#sa_page .sa-chat-md ol{ list-style:decimal; }
#sa_page .sa-chat-md li{ margin:3px 0; }
#sa_page .sa-chat-md li > ul, #sa_page .sa-chat-md li > ol{ margin:4px 0; }
#sa_page .sa-chat-md blockquote{ margin:10px 0; padding:3px 0 3px 14px; border-left:3px solid var(--sa-bors); color:var(--sa-mut); }
#sa_page .sa-chat-md blockquote > :last-child{ margin-bottom:0; }
#sa_page .sa-chat-md strong{ font-weight:600; }
#sa_page .sa-chat-md a{ color:var(--sa-link); text-underline-offset:2px; }
#sa_page .sa-chat-md code{ padding:1px 4px; border-radius:4px; background:var(--sa-bg2); color:var(--sa-txt);
    font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:.88em; overflow-wrap:anywhere; }
#sa_page .sa-chat-md pre{ box-sizing:border-box; min-width:0; max-width:100%; margin:10px 0; padding:12px 14px;
    overflow-x:auto; border:0; border-radius:10px; background:var(--sa-bg2); color:var(--sa-txt);
    font-size:12.5px; line-height:1.5; white-space:pre; overflow-wrap:normal; tab-size:4; }
#sa_page .sa-chat-md pre code{ padding:0; border-radius:0; background:transparent; color:inherit; font-size:inherit; white-space:inherit; overflow-wrap:normal; }
#sa_page .sa-chat-md hr{ margin:14px 0; border:0; border-top:1px solid var(--sa-bor); opacity:1; }
#sa_page .sa-chat-table-wrap{ box-sizing:border-box; width:100%; max-width:100%; min-width:0; margin:10px 0;
    overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; border:0; border-radius:12px; background:var(--sa-bg); }
#sa_page .sa-chat-table-wrap:focus-visible{ outline:2px solid var(--sa-link); outline-offset:2px; }
#sa_page .sa-chat-table{ width:max-content; min-width:100%; margin:0; border-collapse:collapse; table-layout:auto; font-size:12.5px; line-height:1.5; }
#sa_page .sa-chat-table th, #sa_page .sa-chat-table td{ min-width:0; max-width:240px; padding:8px 10px; border-bottom:1px solid var(--sa-bor);
    text-align:left; vertical-align:top; white-space:normal; overflow-wrap:break-word; word-break:normal; }
#sa_page .sa-chat-table th{ background:var(--sa-bg2); color:var(--sa-mut); font-size:11.5px; font-weight:650; white-space:nowrap; }
#sa_page .sa-chat-table td{ color:var(--sa-txt); }
#sa_page .sa-chat-table tbody tr:last-child td{ border-bottom:0; }
#sa_page .sa-chat-table tbody tr:hover{ background:var(--sa-hover); }
/* Solo los nodos nuevos reciben estas clases; el historial permanece estable. */
#sa_page .sa-chat-reveal-word{ display:inline-block; max-width:100%; vertical-align:baseline;
    animation:dui-legacy-modules-superagents-sa-chat-word-in .32s cubic-bezier(.16,1,.3,1) backwards; animation-delay:var(--sa-reveal-delay,0ms); }
#sa_page .sa-chat-reveal-row, #sa_page .sa-chat-reveal-block{
    animation:dui-legacy-modules-superagents-sa-chat-reveal-in .36s cubic-bezier(.16,1,.3,1) backwards; animation-delay:var(--sa-reveal-delay,0ms); }
@keyframes dui-legacy-modules-superagents-sa-chat-word-in{ from{ opacity:0; filter:blur(6px); transform:translateY(2px); } to{ opacity:1; filter:blur(0); transform:none; } }
@keyframes dui-legacy-modules-superagents-sa-chat-reveal-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
/* lista de clientes dentro de una respuesta: tarjeta con filas y avatar */
#sa_page .sa-chat-recs{ margin:4px 0 12px; border:0; border-radius:12px; background:var(--sa-bg); overflow:hidden; }
#sa_page .sa-chat-rec{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 14px; border:0; border-top:1px solid var(--sa-bor);
    background:transparent; color:inherit; text-align:left; line-height:1.5; transition:background-color .12s; }
#sa_page .sa-chat-rec:first-child{ border-top:0; }
#sa_page button.sa-chat-rec{ cursor:pointer; }
#sa_page button.sa-chat-rec:hover{ background:var(--sa-hover); }
#sa_page .sa-chat-rec-av{ flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:var(--sa-bg2); color:var(--sa-mut);
    display:flex; align-items:center; justify-content:center; font-size:15px; }
#sa_page .sa-chat-rec-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
#sa_page .sa-chat-rec-txt b{ font-size:13.5px; font-weight:600; }
#sa_page .sa-chat-rec-txt small{ font-size:12.5px; color:var(--sa-mut); margin-top:1px; }
#sa_page .sa-chat-rec-go{ flex:none; display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:500; color:var(--sa-mut); white-space:nowrap; }
#sa_page button.sa-chat-rec-go{ border:0; padding:0; background:transparent; cursor:pointer; }
#sa_page .sa-chat-rec-go .ti{ font-size:14px; color:var(--sa-fnt); }
/* pregunta con opciones al final de una respuesta */
#sa_page .sa-chat-ia-txt .sa-q{ margin:2px 0 4px; line-height:1.4; }
#sa_page .sa-chat-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin-top:4px; min-height:28px; font-size:12px; color:var(--sa-fnt); }
#sa_page .sa-chat-meta > .ti{ color:var(--sa-ok); font-size:13px; }
#sa_page .sa-chat-time{ display:inline-flex; align-items:center; gap:5px; flex:none; font-size:11.5px; font-weight:500; line-height:20px;
    font-variant-numeric:tabular-nums; color:var(--sa-fnt); white-space:nowrap; border-radius:4px; }
#sa_page .sa-chat-time .ti{ font-size:13px; color:inherit; }
#sa_page .sa-chat-time:focus-visible{ outline:1px solid var(--sa-bors); outline-offset:3px; }
#sa_page .sa-chat-meta-sep{ color:var(--sa-fnt); }
#sa_page .sa-chat-copy{ margin-left:auto; width:28px; height:28px; flex:none; border:0; border-radius:8px; background:transparent; color:var(--sa-fnt);
    display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; }
#sa_page .sa-chat-copy:hover{ background:var(--sa-hover); color:var(--sa-txt); }
#sa_page .sa-chat-err{ align-self:flex-start; font-size:13px; color:var(--sa-dang); }
#sa_page .sa-chat-pensando{ display:flex; align-items:center; gap:9px; color:var(--sa-mut); padding-top:5px; }
#sa_page .sa-chat-thinking-label{ --sa-thinking-spread:40px; display:inline-block; width:fit-content; max-width:100%;
    color:var(--sa-mut); font-family:var(--sa-disp); font-size:13px; font-weight:600; line-height:1.4; }
@supports ((background-clip:text) or (-webkit-background-clip:text)){
    #sa_page .sa-chat-thinking-label{
        background-image:linear-gradient(90deg,transparent calc(50% - var(--sa-thinking-spread)),var(--sa-txt),transparent calc(50% + var(--sa-thinking-spread))),
            linear-gradient(var(--sa-mut),var(--sa-mut));
        background-size:250% 100%,auto; background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text;
        -webkit-text-fill-color:transparent; animation:dui-legacy-modules-superagents-sa-chat-thinking-shine 2s linear infinite; }
}
@keyframes dui-legacy-modules-superagents-sa-chat-thinking-shine{ from{ background-position:100% center; } to{ background-position:0% center; } }
@media (prefers-reduced-motion:reduce){
    #sa_page .sa-chat-thinking-label, #sa_page .sa-chat-reveal-word,
    #sa_page .sa-chat-reveal-row, #sa_page .sa-chat-reveal-block{
        animation:none !important; transition:none !important; opacity:1 !important; transform:none !important; filter:none !important; }
    #sa_page .sa-chat-thinking-label{ background:none; color:var(--sa-mut); -webkit-text-fill-color:currentColor; }
}
#sa_page .sa-chat-spin{ width:13px; height:13px; border-radius:50%; border:0; border-top-color:var(--sa-txt);
    animation:dui-legacy-modules-superagents-sa-chat-spin .8s linear infinite; flex:none; }
@keyframes dui-legacy-modules-superagents-sa-chat-spin{ to{ transform:rotate(360deg); } }
:is(#sa_page, #sa_modal_tools) .sa-av-nodot .dot{ display:none; }
#sa_page .sa-chat-empty{ margin:0 auto; padding:16px 0 48px; max-width:560px; width:100%; text-align:center; display:flex; flex-direction:column; align-items:center; }
#sa_page .sa-chat-empty .sa-av{ width:54px; height:54px; flex-basis:54px; border-radius:16px; font-size:26px; margin-bottom:20px; }
#sa_page .sa-chat-empty .sa-av .dot{ display:none; }
#sa_page .sa-chat-empty h3{ font-family:var(--sa-disp); font-size:25px; font-weight:700; letter-spacing:-.028em; line-height:1.24; margin:0; text-wrap:balance; }
#sa_page .sa-chat-empty p{ font-size:14px; color:var(--sa-mut); margin:10px auto 0; max-width:480px; text-wrap:balance; }
/* sugerencias del chat vacio: la misma tarjeta-lista con teclas que Crear */
#sa_page .sa-chat-empty .sa-q-home{ margin-top:24px; }
#sa_page .sa-chat-empty .sa-q-home .sa-q-opt .tx b{ font-weight:500; }
#sa_page .sa-chat-foot{ position:relative; flex:0 0 auto; padding:14px 24px 18px; }
#sa_page .sa-chat-compose{ position:relative; max-width:840px; margin:0 auto; display:flex; align-items:flex-end; gap:10px; min-height:60px; padding:8px 8px 8px 20px;
    border:0; border-radius:24px; background:var(--sa-bg); box-shadow:none; }
#sa_page .sa-chat-compose.is-solo{ padding-left:20px; }
#sa_page .sa-chat-compose:focus-within{ border-color:var(--dt-focus, var(--sa-bors)); }
/* El compositor mantiene una superficie neutra en ambos temas. */
#sa_page #sa_tab_chat .sa-chat-compose{ --sa-pri:var(--dt-cta); background:var(--dt-surface); color:var(--sa-txt);
    box-shadow:none; }
:scope[data-bs-theme="dark"] #sa_page #sa_tab_chat .sa-chat-compose{ background:var(--dt-app); box-shadow:none; }
#sa_page #sa_tab_chat .sa-chat-compose{ border-color:#dededb; }
#sa_page #sa_tab_chat .sa-chat-compose:hover{ border-color:#d3d3cf; }
#sa_page #sa_tab_chat .sa-chat-compose:focus-within{ border-color:#c5c5c0; box-shadow:0 0 0 3px rgba(15,15,15,.035); }
:scope[data-bs-theme="dark"] #sa_page #sa_tab_chat .sa-chat-compose{ border-color:#424240; }
:scope[data-bs-theme="dark"] #sa_page #sa_tab_chat .sa-chat-compose:hover{ border-color:#4a4a47; }
:scope[data-bs-theme="dark"] #sa_page #sa_tab_chat .sa-chat-compose:focus-within{ border-color:#5b5b57; box-shadow:0 0 0 3px rgba(255,255,255,.035); }
#sa_page #sa_tab_chat .sa-chat-compose #sa_chat_go{ background:var(--sa-txt); color:var(--sa-bg); }
#sa_page #sa_tab_chat .sa-chat-compose :is(button,textarea,input):focus-visible{ outline-color:var(--sa-txt); }
#sa_page .sa-chat-ro{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:44px; padding:0; border-radius:14px; border:0; background:transparent;
    color:var(--sa-mut); font-size:12px; font-weight:600; white-space:nowrap; flex:none; }
#sa_page .sa-chat-ro .ti{ font-size:20px; }
#sa_page .sa-chat-ro span{ display:none; }
#sa_page button.sa-chat-ro{ cursor:pointer; transition:color .12s; }
#sa_page button.sa-chat-ro:hover{ color:var(--sa-txt); }
#sa_page .sa-chat-editor{ position:relative; flex:1; min-width:0; }
#sa_page .sa-chat-compose textarea, #sa_page .sa-chat-highlight{ box-sizing:border-box; margin:0; border:0 !important;
    font-family:var(--font-sans); font-size:14.5px; font-weight:400; font-style:normal;
    line-height:1.5; letter-spacing:-.012em; padding:11px 0 !important; color:var(--sa-txt);
    white-space:pre-wrap; overflow-wrap:break-word; word-break:normal; tab-size:8; text-align:start; }
#sa_page .sa-chat-compose textarea{ position:relative; display:block; width:100%; min-width:0; outline:0; box-shadow:none !important;
    background:transparent !important; resize:none; max-height:160px; overflow-y:auto; }
#sa_page .sa-chat-highlight{ display:none; position:absolute; top:0; left:0; height:100%; overflow:hidden;
    pointer-events:none; user-select:none; }
#sa_page .sa-chat-highlight .sa-chat-at{ font-weight:inherit; }
#sa_page .sa-mention-colors:not(.sa-composing) .sa-chat-highlight{ display:block; }
#sa_page .sa-mention-colors:not(.sa-composing) textarea{ color:transparent !important; caret-color:var(--sa-txt); }
#sa_page .sa-mention-colors:not(.sa-composing) textarea::selection{ color:var(--sa-txt); background:var(--sa-bg2); }
#sa_page .sa-chat-compose textarea::placeholder{ color:var(--sa-fnt); opacity:1; }
@media (forced-colors:active){
    #sa_page .sa-mention-colors:not(.sa-composing) .sa-chat-highlight{ display:none; }
    #sa_page .sa-mention-colors:not(.sa-composing) textarea{ color:CanvasText !important; caret-color:CanvasText; }
    #sa_page .sa-mention-colors:not(.sa-composing) textarea::selection{ color:HighlightText; background:Highlight; }
}
/* SOLO el boton de enviar: con "button" a secas esta regla (mas especifica) convertia tambien el boton de
   Herramientas en un circulo azul de 36px que se comia "Solo lectura" (captura de Marc, 2026-09-17) */
#sa_page .sa-chat-compose #sa_chat_go{ flex:0 0 44px; width:44px; height:44px; border-radius:50%; border:0; background:var(--sa-pri);
    color:var(--dt-cta-fg,#fff); display:flex; align-items:center; justify-content:center; font-size:17px; cursor:pointer; }
#sa_page .sa-chat-compose #sa_chat_go:disabled{ opacity:.5; cursor:default; }
#sa_page .sa-chat-context{ max-width:840px; margin:0 auto 10px; padding:10px 14px; display:flex; gap:10px; align-items:flex-start;
    border:0; border-radius:12px; background:var(--sa-bg); color:var(--sa-mut); font-size:12px; }
#sa_page .sa-chat-context[hidden]{ display:none; }
#sa_page .sa-chat-context > .ti{ margin-top:2px; font-size:17px; color:var(--sa-pri); }
#sa_page .sa-chat-context b{ display:block; color:var(--sa-txt); font-size:12px; font-weight:600; }
#sa_page .sa-chat-note{ margin:2px 0 0; font-size:12px; line-height:1.45; }
/* selector de modelo del chat (Marc, 2026-10-20: "elegir el ai_model por velocidad y potencia, tipo el razonamiento de Claude") */
#sa_page .sa-chat-compose #sa_chat_model{ flex:none; display:inline-flex; align-items:center; gap:5px; height:34px; max-width:200px; margin-bottom:5px; padding:0 9px;
    border:0; border-radius:12px; background:transparent; color:var(--sa-mut); font-size:12.5px; font-weight:500; cursor:pointer; transition:color .12s, background-color .12s; }
#sa_page .sa-chat-compose #sa_chat_model:hover, #sa_page .sa-chat-compose #sa_chat_model[aria-expanded="true"]{ color:var(--sa-txt); background:var(--sa-hover); }
#sa_page .sa-chat-compose #sa_chat_model:focus-visible{ outline:2px solid var(--sa-pri); outline-offset:1px; }
#sa_page #sa_chat_model .ti{ font-size:15px; flex:none; }
#sa_page #sa_chat_model .ti-chevron-down{ font-size:13px; opacity:.7; }
#sa_page #sa_chat_model_lbl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
#sa_page #sa_chat_model_think[hidden]{ display:none; }
#sa_page #sa_chat_modelpop{ position:absolute; z-index:21; right:0; bottom:calc(100% + 10px); width:min(360px, 100%); padding:6px;
    max-height:min(460px, 60vh); overflow-y:auto; overscroll-behavior:contain; border:0;
    border-radius:16px; background:var(--sa-bg); box-shadow:none; }
#sa_page #sa_chat_modelpop[hidden]{ display:none; }
#sa_page .sa-model-opt{ display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:8px 10px; border:0; border-radius:10px;
    background:transparent; color:var(--sa-txt); text-align:left; cursor:pointer; }
#sa_page .sa-model-opt:hover, #sa_page .sa-model-opt:focus-visible{ background:var(--sa-act); outline:0; }
#sa_page .sa-model-opt > .ti{ font-size:17px; color:var(--sa-mut); flex:none; }
#sa_page .sa-model-opt .sa-model-check{ margin-left:auto; color:var(--sa-txt); visibility:hidden; }
#sa_page .sa-model-opt[aria-selected="true"] .sa-model-check{ visibility:visible; }
#sa_page .sa-model-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
#sa_page .sa-model-txt b{ font-size:13px; font-weight:600; }
#sa_page .sa-model-txt small{ font-size:12px; color:var(--sa-mut); }
#sa_page .sa-model-txt b, #sa_page .sa-model-txt small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-model-sep{ height:1px; margin:6px 4px; background:var(--sa-bor); }
#sa_page .sa-model-think{ display:flex; align-items:center; gap:10px; padding:8px 10px; }
#sa_page .sa-model-think > .ti{ font-size:17px; color:var(--sa-mut); }
#sa_page .sa-model-think .sa-model-txt{ flex:1; }
#sa_page .sa-model-seg{ display:inline-flex; gap:2px; padding:2px; border-radius:9px; background:var(--sa-bg2); flex:none; }
#sa_page .sa-model-seg button{ height:26px; padding:0 9px; border:0; border-radius:7px; background:transparent; color:var(--sa-mut); font-size:12px; font-weight:500; cursor:pointer; }
#sa_page .sa-model-seg button[aria-pressed="true"]{ background:var(--sa-bg); color:var(--sa-txt); box-shadow:none; }
#sa_page .sa-model-seg button:focus-visible{ outline:2px solid var(--sa-pri); outline-offset:1px; }
#sa_page .sa-model-more{ display:flex; align-items:center; gap:8px; width:100%; height:38px; padding:0 10px; border:0; border-radius:10px;
    background:transparent; color:var(--sa-mut); font-size:12.5px; font-weight:500; cursor:pointer; }
#sa_page .sa-model-more:hover, #sa_page .sa-model-more:focus-visible{ background:var(--sa-act); color:var(--sa-txt); outline:0; }
#sa_page .sa-model-more .ti-chevron-down{ margin-left:auto; transition:transform .15s; }
#sa_page .sa-model-more[aria-expanded="true"] .ti-chevron-down{ transform:rotate(180deg); }
#sa_page .sa-model-group{ padding:8px 10px 4px; font-size:11px; font-weight:600; color:var(--sa-mut); }
#sa_page #sa_chat_modelpop [hidden]{ display:none!important; }
#sa_page .sa-model-search{ display:flex; align-items:center; gap:8px; min-height:36px; margin:6px 4px 8px; padding:0 9px;
    border:0; border-radius:9px; background:var(--sa-bg); color:var(--sa-mut); cursor:text; }
#sa_page .sa-model-search:focus-within{ border-color:var(--sa-txt); }
#sa_page .sa-model-search > .ti{ flex:none; font-size:15px; }
#sa_page .sa-model-search input[type="search"]{ flex:1; width:100%; min-width:0; height:34px; min-height:0; margin:0; padding:0!important;
    border:0!important; border-radius:0!important; background:transparent!important; color:var(--sa-txt); font:inherit; font-size:12.5px; outline:0!important; box-shadow:none!important; }
#sa_page .sa-model-search input::placeholder{ color:var(--sa-mut); opacity:1; }
#sa_page .sa-model-search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
#sa_page .sa-model-search-clear{ display:grid; place-items:center; flex:none; width:24px; height:24px; padding:0; border:0; border-radius:6px;
    background:transparent; color:var(--sa-mut); cursor:pointer; }
#sa_page .sa-model-search-clear:hover{ background:var(--sa-act); color:var(--sa-txt); }
#sa_page .sa-model-empty{ margin:0; padding:18px 12px; color:var(--sa-mut); font-size:12.5px; line-height:1.5; text-align:center; }
#sa_page .sa-model-default{ display:flex; align-items:center; gap:8px; width:100%; height:34px; padding:0 10px; margin-bottom:4px; border:0; border-radius:10px;
    background:transparent; color:var(--sa-mut); font-size:12.5px; font-weight:500; cursor:pointer; }
#sa_page .sa-model-default small{ color:var(--sa-mut); font-weight:400; }
#sa_page .sa-model-default:hover:not(:disabled), #sa_page .sa-model-default:focus-visible{ background:var(--sa-act); color:var(--sa-txt); outline:0; }
#sa_page .sa-model-default:disabled{ opacity:.45; cursor:default; }
#sa_page .sa-chat-erracc{ display:inline-flex; align-items:center; gap:5px; margin-left:8px; height:26px; padding:0 10px; border:0;
    border-radius:999px; background:var(--sa-bg); color:var(--sa-txt); font-size:12px; font-weight:500; cursor:pointer; vertical-align:middle; }
#sa_page .sa-chat-erracc:hover{ background:var(--sa-act); }
#sa_page .sa-chat-erracc:disabled{ opacity:.5; cursor:default; }
@media (max-width:560px){ #sa_page #sa_chat_model_lbl{ display:none; } }
#sa_page #sa_chat_mentions{ position:absolute; z-index:20; left:0; right:0; bottom:calc(100% + 10px); padding:6px;
    max-height:min(280px, 36vh); overflow-y:auto; overscroll-behavior:contain; border:0;
    border-radius:16px; background:var(--sa-bg); box-shadow:none; }
#sa_page #sa_chat_mentions[hidden]{ display:none; }
#sa_page .sa-mention-heading{ padding:7px 10px 9px; font-size:11px; font-weight:600; color:var(--sa-mut); }
#sa_page .sa-mention-option{ display:flex; align-items:center; gap:10px; width:100%; min-height:50px; padding:8px 10px;
    border:0; border-radius:10px; background:transparent; color:var(--sa-txt); text-align:left; cursor:pointer; }
#sa_page .sa-mention-option:hover, #sa_page .sa-mention-option[aria-selected="true"]{ background:var(--sa-act); }
#sa_page .sa-mention-text{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
#sa_page .sa-mention-text b{ font-size:13px; font-weight:600; }
#sa_page .sa-mention-text small{ font-size:12px; color:var(--sa-mut); }
#sa_page .sa-mention-text b, #sa_page .sa-mention-text small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-mention-empty{ padding:14px 10px; font-size:13px; color:var(--sa-mut); }
/* respuesta libre dentro de la tarjeta de pregunta (lamina "Pantalla"): manda el texto por sa_chatEnvia */
#sa_page .sa-chat-qfree{ display:flex; align-items:center; gap:10px; height:42px; margin-top:10px; padding:0 7px 0 12px; border-radius:10px;
    border:0; background:var(--sa-bg); }
#sa_page .sa-chat-qfree:focus-within{ border-color:var(--dt-focus, var(--sa-bors)); }
#sa_page .sa-chat-qfree > .ti{ font-size:15px; color:var(--sa-fnt); flex:none; }
#sa_page .sa-chat-qfree input{ flex:1; min-width:0; height:auto; min-height:0; border:0 !important; outline:0; box-shadow:none !important;
    background:transparent !important; padding:0 !important; font-size:13.5px; color:inherit; }
#sa_page .sa-chat-qfree input::placeholder{ color:var(--sa-fnt); opacity:1; }
#sa_page .sa-chat-qfree button{ flex:0 0 28px; width:28px; height:28px; border-radius:50%; border:0; background:var(--sa-bg2); color:var(--sa-fnt);
    display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; transition:background-color .12s, color .12s; }
#sa_page .sa-chat-qfree input:not(:placeholder-shown) + button{ background:var(--sa-pri); color:var(--dt-cta-fg,#fff); }

/* ── PANEL DERECHO del chat de UN agente (laminas "Pantalla"/"Ensenar", 2026-09-17) ──────────
   Columna de 340 px junto a la cabecera, como en la lamina. Solo en la pestana Chat de un
   agente (nunca en grupos); plegable y recordado en localStorage['sa_panel']. Si el modulo no
   tiene ancho (portatil con el menu del CRM abierto) no se pinta: el chat no se estruja. */
#sa_page .sa-shell{ container-type:inline-size; container-name:sa-shell; }
#sa_page .sa-rpanel{ display:none; flex:0 0 340px; width:340px; min-height:0; flex-direction:column; overflow:auto;
    background:var(--sa-bg); border-left:1px solid var(--sa-bor); }
#sa_page .sa-shell.is-rp-ok.is-rp-open > .sa-rpanel{ display:flex; }
#sa_page .sa-head .sa-rp-show{ display:none; }
#sa_page .sa-shell.is-rp-ok:not(.is-rp-open) .sa-head .sa-rp-show{ display:flex; }
@container sa-shell (max-width:907px){   /* 1179 con la columna izquierda de 272 px (quitada el 25-10); igual que sa_drawerActual */
    #sa_page .sa-shell.is-rp-ok.is-rp-open > .sa-rpanel{ position:absolute; z-index:41; inset:0 0 0 auto;
        width:min(340px, calc(100% - 24px)); box-shadow:none; }
}
#sa_page .sa-rp-top{ flex:0 0 64px; height:64px; display:flex; align-items:center; justify-content:flex-end; gap:2px; padding:0 12px; }
#sa_page .sa-rp-top .sa-ghost{ width:32px; height:32px; font-size:17px; }
#sa_page .sa-rp-sec{ flex:none; padding:2px 20px 0; }
/* "pantalla" del agente: marco de navegador VACIO (la navegacion del agente aun no existe) */
#sa_page .sa-rp-screen{ width:300px; max-width:100%; height:188px; margin:0 auto; display:flex; flex-direction:column; overflow:hidden;
    border-radius:10px; border:0; background:var(--sa-app); box-shadow:none; }
:scope[data-bs-theme="dark"] #sa_page .sa-rp-screen{ box-shadow:none; }
#sa_page .sa-rp-bar{ flex:0 0 26px; display:flex; align-items:center; gap:7px; padding:0 8px; background:var(--sa-bg2); border-bottom:1px solid var(--sa-bor); }
#sa_page .sa-rp-bar .ti{ font-size:11px; color:var(--sa-fnt); }
#sa_page .sa-rp-url{ flex:1; height:16px; border-radius:8px; background:var(--sa-bg); border:0; }
#sa_page .sa-rp-view{ flex:1; display:flex; align-items:center; justify-content:center; color:var(--sa-fnt); font-size:26px; opacity:.7; }
#sa_page .sa-rp-cap{ margin-top:10px; font-size:12px; color:var(--sa-fnt); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-rp-teach{ width:100%; height:36px; margin-top:14px; display:flex; align-items:center; justify-content:center; gap:7px; border:0; border-radius:999px;
    background:var(--sa-txt); color:var(--sa-bg); font-size:13px; font-weight:600; }
#sa_page .sa-rp-teach .ti{ font-size:15px; }
/* deshabilitado (el modo ensenar aun no existe): gris legible, no la pildora primaria desvaida */
#sa_page .sa-rp-teach:disabled{ background:var(--sa-bg2); color:var(--sa-fnt); cursor:not-allowed; }
#sa_page .sa-rp-hint{ margin-top:10px; padding:0 8px; font-size:12px; line-height:1.5; color:var(--sa-fnt); text-align:center; }
#sa_page .sa-rp-sep{ flex:none; height:1px; margin-top:22px; background:var(--sa-bor); }
#sa_page .sa-rp-rut{ flex:none; padding:14px 20px 20px; }
#sa_page .sa-rp-rhead{ display:flex; align-items:center; gap:8px; }
#sa_page .sa-rp-rhead b{ flex:1; font-size:13px; font-weight:600; }
#sa_page .sa-rp-rhead .sa-ghost{ width:30px; height:30px; margin-right:-6px; font-size:16px; }
#sa_page .sa-rp-card{ width:100%; margin-top:8px; display:flex; align-items:flex-start; gap:11px; padding:12px; text-align:left; color:inherit; cursor:pointer;
    border:0; border-radius:12px; background:color-mix(in srgb, var(--sa-txt) 2%, var(--sa-bg)); transition:background-color .12s; }
#sa_page .sa-rp-card:hover{ background:var(--sa-hover); }
#sa_page .sa-rp-ico{ flex:0 0 30px; width:30px; height:30px; border-radius:8px; background:var(--sa-bg2); color:var(--sa-mut);
    display:flex; align-items:center; justify-content:center; font-size:16px; }
#sa_page .sa-rp-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
#sa_page .sa-rp-when{ font-size:12px; font-weight:500; line-height:1.4; color:var(--sa-mut); }
#sa_page .sa-rp-what{ margin-top:2px; font-size:13px; font-weight:600; line-height:1.4; color:var(--sa-txt);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#sa_page .sa-rp-meta{ margin-top:5px; font-size:11.5px; line-height:1.4; color:var(--sa-fnt); overflow-wrap:anywhere; }
#sa_page .sa-rp-meta.is-warn{ color:var(--sa-warn); }
#sa_page .sa-rp-change{ flex:none; margin-top:1px; font-size:12px; font-weight:600; color:var(--sa-mut); }
#sa_page .sa-rp-card:hover .sa-rp-change{ color:var(--sa-txt); }
#sa_page .sa-rp-empty{ margin:16px auto 0; max-width:270px; font-size:12.5px; line-height:1.55; color:var(--sa-fnt); text-align:center; }

/* ── grupos ─────────────────────────────────────────────────────────────── */
:is(#sa_page, #sa_modal_tools) .sa-av-xs{ flex:0 0 22px; width:22px; height:22px; border-radius:6px; font-size:12px; }
#sa_page .sa-chat-empty-pila{ display:block; margin-bottom:20px; }
#sa_page .sa-chat-empty .sa-avpila .sa-av{ flex:0 0 44px; width:44px; height:44px; border-radius:13px; font-size:21px; margin:0; }
#sa_page .sa-chat-empty .sa-avpila-i{ border-radius:14px; }
#sa_page .sa-chat-empty .sa-avpila-i + .sa-avpila-i{ margin-left:-10px; }
#sa_page .sa-chat-quien{ display:flex; align-items:baseline; gap:8px; margin-bottom:5px; line-height:1.3; }
#sa_page .sa-chat-quien b{ font-size:12.5px; font-weight:600; }
#sa_page .sa-chat-quien span{ font-size:11px; color:var(--sa-fnt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-chat-burbuja{ display:inline-block; box-sizing:border-box; width:100%; max-width:660px; min-width:0; padding:10px 14px; border-radius:6px 16px 16px 16px; background:var(--sa-bg);
    border:0; line-height:1.55; }
#sa_page .sa-chat-burbuja p:last-child, #sa_page .sa-chat-burbuja ul:last-child, #sa_page .sa-chat-burbuja .sa-chat-recs:last-child{ margin-bottom:0; }
/* el plan ES la burbuja del coordinador */
#sa_page .sa-plan{ max-width:630px; border:0; border-radius:6px 16px 16px 16px; background:var(--sa-bg); padding:14px;
    box-shadow:none; line-height:1.4; }
#sa_page .sa-chat-burbuja + .sa-plan{ margin-top:10px; }
#sa_page .sa-chat-preparation{ display:inline-flex; align-items:center; gap:6px; margin:0 0 6px; padding:4px 8px; border:0; border-radius:6px; color:var(--sa-mut); font-size:12px; }
#sa_page .sa-chat-draft{ max-width:660px; }
#sa_page .sa-chat-draft > summary{ cursor:pointer; color:var(--sa-mut); font-size:12px; }
#sa_page .sa-chat-draft > .sa-chat-burbuja, #sa_page .sa-chat-draft > .sa-plan-intro{ margin-top:7px; }
#sa_page .sa-plan-t{ font-family:var(--sa-disp); font-size:14.5px; font-weight:600; letter-spacing:-.02em; }
#sa_page .sa-plan-intro{ font-size:12.5px; color:var(--sa-mut); margin-top:3px; }
#sa_page .sa-plan-pasos{ margin-top:10px; border:0; border-radius:10px; overflow:hidden; }
#sa_page .sa-plan-paso{ display:flex; align-items:flex-start; gap:11px; min-height:40px; padding:9px 12px; border-top:1px solid var(--sa-bor); }
/* numero y quien alineados con el titulo del paso aunque se abran sus detalles */
#sa_page .sa-plan-paso > .sa-plan-num{ margin-top:1px; }
#sa_page .sa-plan-paso > .sa-plan-quien{ line-height:22px; }
#sa_page .sa-plan-paso:first-child{ border-top:0; }
#sa_page .sa-plan-ico{ flex:none; font-size:15px; color:var(--sa-mut); }
#sa_page .sa-plan-num{ flex:none; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:600; color:var(--sa-pri); background:color-mix(in srgb, var(--sa-pri) 12%, transparent); margin-top:1px; }
/* Trabajo del equipo: los borradores de un turno de grupo, juntos y plegados encima de la respuesta */
#sa_page .sa-chat-team{ max-width:660px; }
#sa_page .sa-chat-team > summary{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; list-style:none; }
#sa_page .sa-chat-team > summary::-webkit-details-marker{ display:none; }
#sa_page .sa-chat-team > summary::before{ content:'\203A'; display:inline-block; transition:transform .15s; font-size:15px; line-height:1; }
#sa_page .sa-chat-team[open] > summary::before{ transform:rotate(90deg); }
#sa_page .sa-chat-team .sa-chat-preparation{ margin:0; }
#sa_page .sa-chat-team-pila{ display:inline-flex; }
#sa_page .sa-chat-team-pila > *{ margin-left:-6px; }
#sa_page .sa-chat-team-pila > *:first-child{ margin-left:0; }
#sa_page .sa-chat-team-body{ display:flex; flex-direction:column; gap:12px; margin:10px 0 0 6px; padding-left:12px; border-left:2px solid var(--sa-bor); }
#sa_page .sa-chat-team-paso{ display:flex; gap:9px; align-items:flex-start; }
#sa_page .sa-chat-team-txt{ min-width:0; display:flex; flex-direction:column; gap:4px; font-size:13px; }
#sa_page .sa-chat-team-txt > b{ font-size:12px; }
/* Hora y créditos en el pie del mensaje: al pasar el ratón o enfocarlo; en pantallas táctiles, siempre. */
@media (hover:hover){
    #sa_page [data-sa-chat-key] .sa-chat-meta{ opacity:0; transition:opacity .15s; }
    #sa_page [data-sa-chat-key]:hover .sa-chat-meta, #sa_page [data-sa-chat-key]:focus-within .sa-chat-meta{ opacity:1; }
}
@media (prefers-reduced-motion:reduce){ #sa_page [data-sa-chat-key] .sa-chat-meta{ transition:none; } }
#sa_page .sa-plan-acc{ flex:1; min-width:0; font-size:13.5px; display:flex; flex-direction:column; }
#sa_page .sa-plan-canales{ font-size:11.5px; color:var(--sa-mut); }
#sa_page .sa-plan-canales.is-auto{ color:var(--sa-warn); font-weight:600; }
#sa_page .sa-plan-aviso{ display:flex; align-items:flex-start; gap:7px; margin-top:12px; font-size:12px; color:var(--sa-warn); }
#sa_page .sa-plan-quien{ font-size:12px; color:var(--sa-mut); white-space:nowrap; }
#sa_page .sa-plan-pie{ display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
#sa_page .sa-plan-nota{ margin-left:auto; min-width:0; text-align:right; font-size:11.5px; color:var(--sa-fnt); }
#sa_page .sa-plan-ok{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--sa-ok); }
#sa_page .sa-plan-status{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--sa-mut); }
#sa_page .sa-plan-pie .sa-plan-status[data-state="pendiente"]{ flex-basis:100%; }
#sa_page .sa-plan-status[data-state="completado"], #sa_page .sa-plan-status[data-state="completed"]{ color:var(--sa-ok); }
#sa_page .sa-plan-status[data-state="parcial"], #sa_page .sa-plan-status[data-state="incierto"], #sa_page .sa-plan-status[data-state="uncertain"]{ color:var(--sa-warn); }
#sa_page .sa-plan-status[data-state="fallido"], #sa_page .sa-plan-status[data-state="failed"]{ color:var(--sa-dang); }
#sa_page .sa-plan-detail, #sa_page .sa-plan-result{ margin-top:5px; font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; }
#sa_page .sa-plan-review{ margin-top:6px; font-size:12px; }
#sa_page .sa-plan-review summary{ cursor:pointer; color:var(--sa-mut); }
#sa_page .sa-plan-review div, #sa_page .sa-plan-review pre{ margin:5px 0 0; font-size:inherit; white-space:pre-wrap; overflow-wrap:anywhere; }
#sa_page .sa-plan-review .sa-plan-review-t{ margin-top:8px; font-weight:600; color:var(--sa-mut); font-size:11.5px; }
#sa_page .sa-chat-images{ display:grid; gap:12px; margin-top:14px; }
#sa_page .sa-chat-image-job{ border:1px solid var(--sa-bor); border-radius:10px; padding:12px; min-width:0; }
#sa_page .sa-chat-image-status{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
#sa_page .sa-chat-image-info{ margin-top:4px; font-size:12px; color:var(--sa-mut); }
#sa_page .sa-chat-image-slot{ margin:10px 0 0; }
#sa_page .sa-chat-image-slot img, #sa_page .sa-chat-image-slot video{ display:block; width:100%; max-width:520px; max-height:620px; object-fit:contain; border-radius:8px; background:var(--sa-bg); }
/*Reproductores dUI.Player (cssyapp/datalyse-player.css). El video va envuelto en .dpl--video: la barra de controles se superpone al video,
  asi que el tope de ancho y el redondeo los lleva el envoltorio. El audio es una barra .dpl--bar con el mismo tope de ancho que imagen y video;
  el <audio> nativo solo queda como respaldo si el kit no esta cargado.*/
#sa_page .sa-chat-image-slot .dpl--video{ display:block; width:100%; max-width:520px; border-radius:8px; overflow:hidden; background:var(--sa-bg); }
#sa_page .sa-chat-image-slot .dpl--video video{ max-width:none; border-radius:0; }
/*A pantalla completa manda el aspecto del kit (.dpl--video:fullscreen), que aqui perdia por especificidad: sin tope de alto ni redondeo y fondo negro.*/
#sa_page .sa-chat-image-slot .dpl--video:fullscreen{ border-radius:0; background:#000; }
#sa_page .sa-chat-image-slot .dpl--video:fullscreen video{ max-height:none; height:100%; background:#000; }
#sa_page .sa-chat-image-slot .dpl--video:-webkit-full-screen{ border-radius:0; background:#000; }
#sa_page .sa-chat-image-slot .dpl--video:-webkit-full-screen video{ max-height:none; height:100%; background:#000; }
#sa_page .sa-chat-image-slot .dpl--bar{ width:100%; max-width:520px; }
#sa_page .sa-chat-image-slot audio{ display:block; width:100%; max-width:520px; }
#sa_page .sa-chat-image-slot figcaption{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; font-size:12px; color:var(--sa-mut); }
#sa_page .sa-chat-image-loading{ display:flex; align-items:center; gap:8px; min-height:54px; font-size:12px; color:var(--sa-mut); }
#sa_page .sa-gform{ max-width:720px; margin:0 auto; }
:is(#sa_page, #sa_modal_group) .sa-gform-intro{ font-size:13px; line-height:1.5; color:var(--sa-mut); margin:0 0 18px; text-wrap:pretty; }
:is(#sa_page, #sa_modal_group) .sa-gform .sa-lbl{ font-size:12px; font-weight:600; color:var(--sa-mut); opacity:1; margin-bottom:6px; }
:is(#sa_page, #sa_modal_group) .sa-gform .sa-hint{ font-size:12px; color:var(--sa-mut); opacity:1; }
:is(#sa_page, #sa_modal_group) .sa-gform-cab{ display:flex; align-items:baseline; margin:18px 0 6px; }
:is(#sa_page, #sa_modal_group) .sa-gform-cab .sa-lbl{ flex:1; margin-bottom:0; }
:is(#sa_page, #sa_modal_group) .sa-gform-name{ height:36px; min-height:36px; padding:0 12px !important; font-size:13px; }
:is(#sa_page, #sa_modal_group) .sa-gm-list{ overflow:hidden; border-radius:10px; }
:is(#sa_page, #sa_modal_group) .sa-gm{ display:flex; align-items:center; gap:11px; min-height:54px; padding:0 12px; border-top:1px solid var(--sa-bor); }
:is(#sa_page, #sa_modal_group) .sa-gm:first-child{ border-top:0; }
:is(#sa_page, #sa_modal_group) .sa-gm.is-off{ opacity:.72; }
:is(#sa_page, #sa_modal_group) .sa-gm.is-off .sa-gm-fn{ color:var(--sa-fnt) !important; }
:is(#sa_page, #sa_modal_group) .sa-gm-check{ display:flex; margin:0; cursor:pointer; }
/* checkbox propio de la lamina: 18px, radio 5, check blanco sobre el CTA */
:is(#sa_page, #sa_modal_group) .sa-gm-check input{ -webkit-appearance:none; appearance:none; flex:0 0 18px; width:18px; height:18px; margin:0;
    border-radius:5px !important; border:0 !important; background:var(--sa-bg) no-repeat center/12px 12px !important; cursor:pointer; }
:is(#sa_page, #sa_modal_group) .sa-gm-check input:checked{ background-color:var(--sa-pri) !important; border-color:var(--sa-pri) !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") !important; }
:is(#sa_page, #sa_modal_group) .sa-gm-nm{ position:relative; flex:0 0 196px; min-width:0; display:flex; flex-direction:column; }
:is(#sa_page, #sa_modal_group) .sa-gm-nm b{ font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:is(#sa_page, #sa_modal_group) .sa-gm-coord{ font-size:11px; font-weight:600; margin-top:1px; color:var(--sa-link); }
/* "Hacer coordinador" solo al pasar el raton: la fila no se descoloca */
:is(#sa_page, #sa_modal_group) .sa-gm-hazcoord{ position:absolute; left:0; top:100%; margin-top:-2px; border:0; background:transparent; padding:0;
    font-size:11px; color:var(--sa-fnt); cursor:pointer; white-space:nowrap; opacity:0; transition:opacity .12s; }
:is(#sa_page, #sa_modal_group) .sa-gm:hover .sa-gm-hazcoord, :is(#sa_page, #sa_modal_group) .sa-gm-hazcoord:focus-visible{ opacity:1; }
@media (hover:none){ :is(#sa_page, #sa_modal_group) .sa-gm-hazcoord{ opacity:1; } }
:is(#sa_page, #sa_modal_group) .sa-gm-hazcoord:hover{ color:var(--sa-txt); text-decoration:underline; }
:is(#sa_page, #sa_modal_group) .sa-gm-fn{ flex:1; min-width:0; height:32px; min-height:32px; padding:0 10px !important; font-size:12.5px; line-height:30px; }
:is(#sa_page, #sa_modal_group) .sa-gm-fn::placeholder{ color:var(--sa-fnt); opacity:1; }
:is(#sa_page, #sa_modal_group) .sa-gform-foot{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:20px; }
:is(#sa_page, #sa_modal_group) .sa-gform-aviso{ flex:1; font-size:12px; color:var(--sa-fnt); }
:is(#sa_page, #sa_modal_group) .sa-gform-del{ margin-right:auto; border:0; background:transparent; padding:0; font-size:12.5px; font-weight:500;
    color:var(--sa-mut); cursor:pointer; }
:is(#sa_page, #sa_modal_group) .sa-gform-del:hover{ color:var(--sa-dang); }
/* modal "Nuevo grupo" (lamina NuevoGrupo): comparte los tokens de #sa_page */
#sa_modal_group .modal-dialog{ max-width:640px; }
#sa_modal_group .modal-content{ border-radius:12px !important; border:0 !important;
    box-shadow:var(--dt-pop-shadow) !important; }
#sa_modal_group .modal-header{ align-items:flex-start; border:0 !important; padding:18px 20px 6px 22px !important; }
#sa_modal_group .modal-title{ font-family:var(--font-sans); font-size:17px; font-weight:700; letter-spacing:-.022em; }
#sa_modal_group .modal-body{ padding:16px 22px 20px !important; }
#sa_modal_group .sa-gmodal-head{ display:flex; flex-direction:column; min-width:0; padding-right:12px; }
#sa_modal_group .sa-gmodal-head .sa-gform-intro{ margin:6px 0 0; }
#sa_modal_group .sa-gform-foot{ margin-top:20px; }
#sa_modal_group .sa-av{ position:relative; flex:0 0 30px; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; }
#sa_modal_group .sa-av .dot{ display:none; }
#sa_modal_group .sa-card{ background:var(--sa-bg); border:0; border-radius:10px; }
:is(#sa_modal_tools, #sa_modal_group) .modal-header .btn-close{ width:30px !important; height:30px !important; padding:0 !important; margin:-5px -6px 0 auto !important;
    background-size:12px !important; border-radius:8px; opacity:.6 !important; }
:is(#sa_modal_tools, #sa_modal_group) .modal-header .btn-close:hover{ opacity:1 !important; background-color:var(--sa-hover); }

/* ── modal de HERRAMIENTAS, desde la navegacion lateral ─────────────────── */
#sa_modal_tools .modal-dialog{ max-width:720px; }
#sa_modal_tools .modal-content{ border-radius:12px !important; border:0 !important;
    box-shadow:var(--dt-pop-shadow) !important; }
#sa_modal_tools .modal-header{ align-items:flex-start; padding:18px 18px 14px 24px !important; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-head{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:0; }
#sa_modal_tools .modal-title{ font-family:var(--sa-disp); font-size:17px; font-weight:700; letter-spacing:-.022em; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-tsub{ display:block; margin-top:5px; font-size:12px; line-height:1.5; font-weight:500; color:var(--sa-mut); }
#sa_modal_tools .modal-body{ padding:18px 24px 22px !important; min-height:420px; }
#sa_modal_tools .modal-footer{ padding:14px 22px 16px !important; gap:8px; }
#sa_modal_tools .modal-footer > *{ margin:0; }
#sa_modal_tools #sa_mt_save:disabled{ opacity:1; background:var(--sa-bg2) !important; border-color:var(--sa-bg2) !important; color:var(--sa-fnt) !important; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-sec + .sa-mt-sec{ margin-top:24px; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-sech{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; min-height:22px; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-sech b{ font-size:12.5px; font-weight:600; }
#sa_modal_tools :is(.sa-mt-hint, .sa-hint){ font-size:12px; line-height:1.5; color:var(--sa-fnt); opacity:1; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-hint{ margin:0 0 10px; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-list{ overflow:hidden; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-item{ display:flex; align-items:center; gap:13px; width:100%; min-height:58px; padding:9px 16px; border:0;
    border-top:1px solid var(--sa-bor); background:transparent; color:inherit; text-align:left; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-item:first-child{ border-top:0; }
#sa_modal_tools button.sa-mt-item{ cursor:pointer; transition:background-color .12s; }
#sa_modal_tools button.sa-mt-item:hover{ background:var(--sa-hover); }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-ico{ flex:0 0 32px; width:32px; height:32px; border-radius:9px; background:transparent; border:0; color:var(--sa-mut);
    display:flex; align-items:center; justify-content:center; font-size:15px; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-ico img{ width:18px; height:18px; object-fit:contain; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-txt b{ font-size:13.5px; font-weight:600; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-txt small{ font-size:12px; color:var(--sa-mut); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-nf{ font-size:11px; font-weight:500; color:var(--sa-fnt); margin-left:4px; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-chips{ display:flex; flex-wrap:wrap; gap:6px; max-height:180px; overflow:auto; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-chip{ display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 10px; border-radius:999px; cursor:pointer;
    border:1px solid var(--sa-bor); background:var(--sa-bg); color:var(--sa-mut); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-chip.is-on{ background:var(--sa-act); color:var(--sa-txt); border-color:var(--sa-bors); }
:is(#sa_page, #sa_modal_tools) .sa-tools{ max-width:none; }

#sa_page .sa-panel-backdrop{ position:absolute; z-index:40; inset:0; width:100%; border:0; background:rgba(15,15,20,.3); cursor:pointer; }
#sa_page .sa-panel-backdrop[hidden]{ display:none; }
#sa_page :is(button, a, select, textarea):focus-visible{ outline:2px solid var(--sa-pri); outline-offset:3px; }
#sa_page .sa-menu button:disabled{ opacity:.5; cursor:default; }

@media (max-width:900px){
    #sa_page{ --sa-h:calc(100dvh - 96px); }
    #sa_page .sa-shell{ min-height:360px; border:0; border-radius:0; }
    #sa_page .sa-head{ padding:10px 12px; }
    #sa_page .sa-head-row{ gap:8px; flex-wrap:wrap; }
    #sa_page .sa-head-txt{ flex:1; }
    #sa_page .sa-head-nm{ gap:6px; }
    #sa_page input.sa-head-name{ flex:1; min-width:0; width:0; max-width:100%; }
    #sa_page .sa-head-nm h1{ min-width:0; }
    #sa_page .sa-head-sp{ display:none; }
    #sa_page .sa-head-tabs{ flex-basis:100%; order:3; }
    #sa_page .sa-head-tabs .sa-seg{ width:100%; }
    #sa_page .sa-head-tabs .sa-seg button{ flex:1; justify-content:center; padding:9px 8px; }
    #sa_page .sa-chat-thread{ padding:18px 16px 8px; }
    #sa_page .sa-chat-bar{ width:calc(100% - 32px); }
    #sa_page .sa-chat-foot{ padding:12px 16px max(12px, env(safe-area-inset-bottom)); }
    #sa_page .sa-chat-compose{ padding-left:16px; }
    #sa_page .sa-chat-compose textarea, #sa_page .sa-chat-highlight{ font-size:16px; }
    #sa_page .sa-chat-empty h3{ font-size:22px; }
    #sa_page .sa-chat-barbtn,#sa_page .sa-chat-conversation-trigger{ min-height:40px; }
    #sa_page .sa-chat-barbtn .sa-chat-new-label{ display:none; }
    #sa_page .sa-head .sa-ghost{ width:40px; height:40px; }
}

:is(#sa_page, #sa_modal_tools) .sa-card{ background:var(--sa-bg); border:0; border-radius:var(--sa-rl); }

/* pastillas */
/* pastillas de la lamina: neutras (22px, 10.5/600); el color, si lo hay, solo en el punto */
:is(#sa_page, #sa_modal_tools) .sa-pill{ display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:999px;
    font-size:10.5px; font-weight:600; line-height:1; letter-spacing:0; white-space:nowrap; flex:none; }
:is(#sa_page, #sa_modal_tools) .sa-pill .ti{ font-size:12px; }
:is(#sa_page, #sa_modal_tools) .sa-pill-on{ background:var(--sa-bg2); color:var(--sa-mut); }
:is(#sa_page, #sa_modal_tools) .sa-pill-on::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--sa-ok); flex:none; }
:is(#sa_page, #sa_modal_tools) .sa-pill-off{ background:var(--sa-bg2); color:var(--sa-mut); opacity:1; }
:is(#sa_page, #sa_modal_tools) .sa-pill-sys{ background:color-mix(in srgb, var(--sa-warn) 12%, transparent); color:var(--sa-warn); }
:is(#sa_page, #sa_modal_tools) .sa-pill-warn{ background:color-mix(in srgb, var(--sa-dang) 12%, transparent); color:var(--sa-dang); }

/* HOME: plantillas prehechas + hero de crear con IA */
#sa_page .sa-hero{ text-align:center; padding:44px 24px 26px; background:transparent; }
#sa_page .sa-hero-ico{ width:52px; height:52px; margin:0 auto 14px; border-radius:var(--sa-rl); display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:var(--dt-cta-fg,#fff); background:var(--sa-pri); box-shadow:none; }
#sa_page .sa-hero h3{ font-weight:700; letter-spacing:-.01em; }
#sa_page .sa-hero-box{ max-width:700px; margin:20px auto 0; text-align:left; border:0; border-radius:var(--sa-rl); padding:14px 14px 10px; background:var(--sa-bg); box-shadow:none; transition:border-color .15s, box-shadow .15s; }
#sa_page .sa-hero-box:focus-within{ border-color:rgba(var(--sa-pri-rgb),.55); box-shadow:none; }
#sa_page .sa-hero-box textarea{ border:none; outline:none; box-shadow:none; resize:none; width:100%; background:transparent; font-size:1rem; color:inherit; }
#sa_page .sa-hero-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; flex-wrap:wrap; }
#sa_page .sa-tpls{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; margin-top:12px; }
#sa_page .sa-tpl{ text-align:left; border:0; border-radius:var(--sa-rl); padding:14px 16px; background:var(--sa-bg); cursor:pointer; transition:transform .14s, box-shadow .14s, border-color .14s; }
#sa_page .sa-tpl:hover{ transform:translateY(-2px); border-color:rgba(var(--sa-pri-rgb),.5); box-shadow:none; }
#sa_page .sa-tpl-key{ font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700; font-size:.84rem; color:var(--sa-pri); }
#sa_page .sa-tpl-desc{ font-size:.79rem; opacity:.7; margin-top:5px; min-height:34px; line-height:1.45; }
#sa_page .sa-tpl-by{ font-size:.7rem; opacity:.5; margin-top:9px; }

/* bloques numerados de la ficha */
#sa_page .sa-block{ border:0; border-radius:var(--sa-rl); margin-bottom:12px; background:var(--sa-bg); overflow:hidden; transition:box-shadow .15s; }
#sa_page .sa-block.is-open{ box-shadow:none; }
#sa_page .sa-block-head{ display:flex; align-items:center; gap:12px; padding:15px 17px; cursor:pointer; }
#sa_page .sa-block-head:hover{ background:var(--sa-hover); }
#sa_page .sa-num{ flex:0 0 30px; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; background:rgba(var(--sa-pri-rgb),.12); color:var(--sa-pri); }
#sa_page .sa-block.is-open .sa-num{ background:var(--sa-pri); color:var(--dt-cta-fg); box-shadow:none; }
#sa_page .sa-block-txt{ min-width:0; flex:1; }
#sa_page .sa-block-title{ font-weight:600; font-size:.94rem; }
#sa_page .sa-block-sum{ font-size:.82rem; opacity:.7; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-block-body{ padding:6px 18px 20px 59px; border-top:1px solid var(--sa-bor); }
#sa_page .sa-chev{ transition:transform .18s; opacity:.5; }
#sa_page .sa-block.is-open .sa-chev{ transform:rotate(90deg); }
#sa_page .sa-blocks{ position:relative; }
#sa_page .sa-blocks:before{ content:''; position:absolute; left:32px; top:26px; bottom:26px; width:2px; background:var(--sa-bor); z-index:0; }
#sa_page .sa-block{ position:relative; z-index:1; }

/* ambito de datos: tarjetas de tablas + chips de estados */
#sa_page .sa-ents{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:9px; }
#sa_page .sa-ent{ border:0; border-radius:13px; padding:12px 8px 10px; text-align:center; cursor:pointer; background:transparent; transition:transform .12s, border-color .12s, background .12s; }
#sa_page .sa-ent:hover{ transform:translateY(-1px); border-color:rgba(var(--sa-pri-rgb),.45); }
#sa_page .sa-ent.is-sel{ border-color:var(--sa-pri); background:rgba(var(--sa-pri-rgb),.08); box-shadow:none; }
#sa_page .sa-ent i{ font-size:1.35rem; display:block; margin-bottom:5px; }
#sa_page .sa-ent-name{ font-size:.8rem; font-weight:600; }
/* Funciones de cada miembro en la tarjeta del equipo */
#sa_page .sa-prop-tools{ display:flex; flex-wrap:wrap; gap:6px; }
#sa_page .sa-prop-tool{ border:0; border-radius:999px; padding:1px 9px; font-size:11.5px; color:var(--sa-mut); }
/* Equipo que propone la IA para un encargo complejo (coordinador + miembros); se crea solo con permiso */
#sa_page .sa-team{ border:0; border-radius:var(--sa-r); background:var(--sa-bg); padding:16px 18px; display:flex; flex-direction:column; gap:14px; margin-bottom:14px; }
#sa_page .sa-team-head{ display:flex; gap:12px; align-items:flex-start; }
#sa_page .sa-team-head p{ margin:2px 0 0; color:var(--sa-mut); font-size:13px; }
#sa_page .sa-team-ic{ flex:none; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:var(--sa-pri);
    background:color-mix(in srgb, var(--sa-pri) 12%, transparent); font-size:18px; }
#sa_page .sa-team-name{ display:flex; gap:8px; align-items:baseline; font-size:13px; }
#sa_page .sa-team-name span{ color:var(--sa-mut); }
#sa_page .sa-team-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px; }
#sa_page .sa-team-mem{ display:flex; gap:10px; align-items:flex-start; border:0; border-radius:12px; padding:10px 12px; background:var(--sa-bg2, var(--sa-bg)); min-width:0; }
#sa_page .sa-team-av{ flex:none; width:30px; height:30px; border-radius:999px; display:grid; place-items:center; font-size:15px;
    color:var(--sa-pri); background:color-mix(in srgb, var(--sa-pri) 10%, transparent); }
#sa_page .sa-team-txt{ min-width:0; display:flex; flex-direction:column; gap:3px; }
#sa_page .sa-team-txt > small{ color:var(--sa-mut); font-size:12.5px; line-height:1.4; }
#sa_page .sa-team-nm{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
#sa_page .sa-team-coord{ border:0; border-radius:999px; padding:0 8px; font-size:11px; color:var(--sa-mut); }
#sa_page .sa-team-txt summary{ cursor:pointer; color:var(--sa-mut); font-size:12px; }
#sa_page .sa-team-txt details .sa-prop-tools{ margin-top:6px; }
#sa_page .sa-team-skill{ display:flex; flex-direction:column; margin-top:6px; font-size:12.5px; }
#sa_page .sa-team-skill small{ color:var(--sa-mut); }
#sa_page .sa-team-note{ display:flex; gap:8px; align-items:flex-start; margin:0; color:var(--sa-mut); font-size:12.5px; }
#sa_page .sa-team-acts{ display:flex; gap:8px; flex-wrap:wrap; }
#sa_page .sa-chip{ display:inline-block; border:1.5px solid var(--sa-bor); border-radius:999px; padding:3px 13px; font-size:.78rem; font-weight:600; margin:0 6px 6px 0; cursor:pointer; background:transparent; color:inherit; transition:border-color .12s, background .12s; }
#sa_page .sa-chip:hover{ border-color:rgba(var(--sa-pri-rgb),.5); }
#sa_page .sa-chip.is-sel{ border-color:var(--sa-pri); background:rgba(var(--sa-pri-rgb),.12); color:var(--sa-pri); }
#sa_page .sa-sentence{ border-left:3px solid var(--sa-pri); background:rgba(var(--sa-pri-rgb),.06); border-radius:0 12px 12px 0; padding:10px 14px; font-size:.87rem; margin-top:14px; line-height:1.5; }

:is(#sa_page, #sa_modal_tools) .sa-lbl{ font-size:12px; font-weight:600; color:var(--sa-mut); opacity:1; margin-bottom:6px; }
:is(#sa_page, #sa_modal_tools) .sa-hint{ font-size:12px; color:var(--sa-fnt); opacity:1; }
#sa_page details.sa-adv{ margin-top:12px; }

/* ══ cabecera: selector de superagente (flechita) + pestanas ═══════════════
   El boton copia el patron de la cabecera de entidad de sales.html (.salesn-entity):
   icono en cuadro de color + rotulo + nombre + chevron. Aqui NO navega: no hay ruta
   por agente, el ambito se recuerda en localStorage. */
#sa_page .sa-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
#sa_page .sa-agentbtn{ display:flex; align-items:center; gap:10px; padding:5px 10px 5px 6px; border:0;
    border-radius:var(--sa-rl); background:var(--sa-bg); cursor:pointer; text-align:left; transition:border-color .15s, box-shadow .15s; }
#sa_page .sa-agentbtn:hover{ border-color:rgba(var(--sa-pri-rgb),.5); box-shadow:none; }
#sa_page .sa-agentbtn .eicon{ width:32px; height:32px; border-radius:var(--sa-r); display:flex; align-items:center; justify-content:center;
    font-size:17px; background:rgba(var(--sa-pri-rgb),.14); color:var(--sa-pri); flex:none; }
#sa_page .sa-agentbtn h1{ margin:0; font-size:17px; font-weight:700; letter-spacing:-.01em; line-height:1.15; max-width:38vw;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-agentbtn small{ display:block; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; opacity:.55; }
#sa_page .sa-agentbtn .chev{ font-size:14px; opacity:.55; margin-left:2px; }
#sa_page .sa-top .sp{ flex:1; }

/* popover del selector */
#sa_page{ position:relative; }
#sa_page .sa-pop{ display:none; position:absolute; z-index:1050; min-width:320px; max-width:420px; max-height:70vh; overflow:auto;
    background:var(--sa-bg); border:0; border-radius:var(--sa-rl); padding:10px; box-shadow:none; }
#sa_page .sa-pop.show{ display:block; }
#sa_page .sa-pop h4{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; opacity:.5; margin:10px 4px 5px; }
#sa_page .sa-pop .item{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:none; background:transparent;
    color:inherit; border-radius:var(--sa-r); padding:8px 9px; cursor:pointer; }
#sa_page .sa-pop .item:hover{ background:var(--sa-hover); }
#sa_page .sa-pop .item.is-active{ background:rgba(var(--sa-pri-rgb),.1); }
#sa_page .sa-pop .item .eit{ width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; flex:none; }
#sa_page .sa-pop .item .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.88rem; font-weight:600; }
#sa_page .sa-pop .item .ck{ color:var(--sa-pri); }
#sa_page .sa-pop .sep{ height:1px; background:var(--sa-bor); margin:8px 2px; }

/* pestanas grandes (CSS propio: las .profile__nav-item globales viven anidadas en otras hojas) */
/* el scroll en x se queda (3 pestanas desbordan en movil) pero SIN barra: en Linux/Windows
   el tema pinta los botones de flecha del scrollbar y se ven como dos triangulos sueltos
   bajo las pestanas. Mismo apano que la viewbar de sales.html. */
#sa_page .sa-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--sa-bor); margin-bottom:16px; overflow-x:auto; scrollbar-width:none; }
#sa_page .sa-tabs::-webkit-scrollbar{ display:none; }
#sa_page .sa-tab{ position:relative; border:none; background:transparent; color:inherit; padding:10px 16px; font-size:.94rem;
    font-weight:600; opacity:.62; cursor:pointer; white-space:nowrap; }
#sa_page .sa-tab:hover{ opacity:.9; }
#sa_page .sa-tab.is-active{ opacity:1; color:var(--sa-txt); }
#sa_page .sa-tab.is-active::after{ content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; border-radius:2px; background:var(--sa-txt); }
#sa_page .sa-tab .n{ display:inline-block; margin-left:6px; font-size:.7rem; background:var(--sa-bg2); border-radius:999px; padding:1px 7px; }

/* ══ pestana CLIENTES: lista de recuperacion + ficha ═══════════════════════ */
#sa_page .sa-cli{ display:grid; grid-template-columns:minmax(320px,400px) minmax(0,1fr); gap:var(--sa-gap); align-items:start; }
@media (max-width:1100px){ #sa_page .sa-cli{ grid-template-columns:minmax(0,1fr); } }
:is(#sa_page, #sa_modal_tools) .sa-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
:is(#sa_page, #sa_modal_tools) .sa-bar .form-control, :is(#sa_page, #sa_modal_tools) .sa-bar .form-select{ width:auto; min-width:130px; }
#sa_page .sa-lead{ display:block; width:100%; text-align:left; padding:11px 14px 11px 11px; border:0; border-left:3px solid transparent;
    border-bottom:1px solid var(--sa-bor); background:transparent; cursor:pointer; transition:background .12s; }
#sa_page .sa-lead:hover{ background:var(--sa-hover); }
#sa_page .sa-lead.is-active{ background:rgba(var(--sa-pri-rgb),.06); border-left-color:var(--sa-pri); }
#sa_page .sa-lead:last-child{ border-bottom:0; }
#sa_page .sa-lead-bar{ display:block; width:44px; height:3px; border-radius:999px; background:var(--sa-bg2); overflow:hidden; }
#sa_page .sa-lead-bar i{ display:block; height:100%; }
#sa_page .sa-lead-right{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; }
#sa_page .sa-lead-top{ display:flex; align-items:center; gap:8px; }
#sa_page .sa-lead-nm{ flex:1; min-width:0; font-weight:600; font-size:.9rem; line-height:1.4; overflow-wrap:anywhere; }
#sa_page .sa-lead-sc{ font-weight:700; font-size:.86rem; flex:none; }
#sa_page .sa-lead-emp{ font-size:.75rem; opacity:.6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-lead-meta{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:5px; font-size:.73rem; color:var(--sa-mut); }
#sa_page .sa-lead-meta span{ display:inline-flex; align-items:center; gap:4px; min-width:0; }
#sa_page .sa-lead-bot{ display:flex; align-items:center; gap:6px; margin-top:5px; font-size:.74rem; opacity:.75; flex-wrap:wrap; }
#sa_page .sa-canal{ display:inline-flex; align-items:center; gap:4px; font-size:.7rem; font-weight:600; padding:1px 8px; border-radius:999px; }
#sa_page .sa-lead-list{ max-height:calc(100vh - 300px); overflow:auto; padding:0; }
#sa_page .sa-fichawrap{ min-height:220px; min-width:0; }
#sa_page .sa-fichawrap .sas-card{ margin:0; max-width:none; }
#sa_page .sa-client-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
#sa_page .sa-client-identity{ min-width:0; flex:1; overflow-wrap:anywhere; }
#sa_page .sa-client-name{ font-weight:650; font-size:1rem; line-height:1.4; }
#sa_page .sa-client-contact{ margin-top:4px; color:var(--sa-mut); font-size:.8rem; }
#sa_page .sa-client-meta{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px; font-size:.75rem; }
#sa_page .sa-client-meta span{ display:flex; flex-direction:column; gap:2px; }
#sa_page .sa-client-meta small{ color:var(--sa-mut); font-size:.7rem; }
#sa_page .sa-client-meta b{ font-weight:500; }
#sa_page .sa-client-head > button{ flex:none; }
@media (max-width:600px){
    #sa_page .sa-client-head{ flex-wrap:wrap; }
    #sa_page .sa-client-identity{ flex-basis:100%; }
    #sa_page .sa-lead-list{ max-height:42vh; }
    #sa_page #sa_cli_bar .form-control{ min-width:0 !important; flex:1 1 100%; }
    #sa_page #sa_cli_bar .form-select{ min-width:0; max-width:100%; flex:1 1 140px; }
}

/* Analitica e historial del mismo ambito, debajo de los clientes. */
#sa_page .sa-cli-sections{ margin-top:28px; border-top:1px solid var(--sa-bor); }
#sa_page .sa-cli-section{ border-bottom:1px solid var(--sa-bor); }
#sa_page .sa-cli-section > summary{ display:flex; align-items:center; gap:10px; padding:17px 0; list-style:none; cursor:pointer; color:var(--sa-txt); }
#sa_page .sa-cli-section > summary::-webkit-details-marker{ display:none; }
#sa_page .sa-cli-section > summary:focus-visible{ outline:2px solid var(--sa-pri); outline-offset:3px; border-radius:6px; }
#sa_page .sa-cli-section > summary > .ti:first-child{ color:var(--sa-mut); font-size:18px; }
#sa_page .sa-cli-section-title{ flex:1; min-width:0; font-size:14px; font-weight:600; }
#sa_page .sa-cli-section-title small{ display:block; margin-top:3px; font-size:12px; font-weight:400; color:var(--sa-mut); }
#sa_page .sa-cli-section > summary > .ti-chevron-down{ color:var(--sa-mut); transition:transform .15s; }
#sa_page .sa-cli-section[open] > summary > .ti-chevron-down{ transform:rotate(180deg); }
#sa_page .sa-cli-section-body{ padding:0 0 20px; min-width:0; }
#sa_page .sa-cli-section-body > .sa-card{ border:0; background:transparent; padding:0 !important; }
#sa_page .sa-cli-section-toolbar{ display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-bottom:12px; }
#sa_page .sa-cli-section-toolbar .sa-hint{ flex:1; }
#sa_page .sa-cli-section .sa-bar{ margin-bottom:16px; }
@media (max-width:600px){ #sa_page .sa-cli-section-title small{ line-height:1.45; } #sa_page .sa-cli-section > summary{ align-items:flex-start; } }

/* ══ pestana ANALITICA ═════════════════════════════════════════════════════ */
#sa_page .sa-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:16px; }
#sa_page .sa-kpi{ border:0; border-radius:var(--sa-rl); padding:14px 16px; background:var(--sa-bg); }
#sa_page .sa-kpi .k{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; opacity:.55; display:flex; align-items:center; gap:5px; }
#sa_page .sa-kpi .v{ font-size:1.6rem; font-weight:700; letter-spacing:-.02em; margin-top:4px; line-height:1.1; }
#sa_page .sa-kpi .s{ font-size:.74rem; opacity:.6; margin-top:2px; }
#sa_page .sa-analytics{ padding:14px 16px; margin-bottom:20px; border:0; border-radius:var(--sa-rl); background:var(--sa-bg); }
#sa_page .sa-analytics-toolbar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
#sa_page .sa-analytics-title{ display:flex; align-items:center; gap:7px; flex:1; font-size:.82rem; font-weight:600; }
#sa_page .sa-analytics-toolbar .form-select{ width:auto; padding-top:3px; padding-bottom:3px; }
#sa_page .sa-analytics .sa-kpis{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:0; }
#sa_page .sa-analytics .sa-kpi{ min-width:0; border:0; border-left:1px solid var(--sa-bor); border-radius:0; padding:0 0 0 12px; background:transparent; }
#sa_page .sa-analytics .sa-kpi:first-child{ border-left:0; padding-left:0; }
#sa_page .sa-analytics .sa-kpi .k{ font-size:.63rem; line-height:1.4; letter-spacing:.025em; opacity:.75; }
#sa_page .sa-analytics .sa-kpi .v{ font-size:1.18rem; line-height:1.3; margin-top:6px; overflow-wrap:anywhere; }
#sa_page .sa-analytics .sa-kpi .s{ font-size:.68rem; line-height:1.4; margin-top:4px; }
#sa_page .sa-analytics .sa-cli-section{ margin-top:12px; border-top:1px solid var(--sa-bor); border-bottom:0; }
#sa_page .sa-analytics .sa-cli-section > summary{ padding:9px 0 0; font-size:.75rem; gap:7px; }
#sa_page .sa-analytics .sa-cli-section > summary .ti-chevron-down{ margin-left:auto; }
#sa_page .sa-analytics .sa-cli-section-body{ padding:14px 0 0; }
#sa_page .sa-stats-message{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:.8rem; color:var(--sa-mut); padding:8px 0; }
#sa_page .sa-stats-message button{ margin-left:auto; }
@media (max-width:1100px){ #sa_page .sa-analytics .sa-kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 12px; } }
@media (max-width:600px){
    #sa_page .sa-analytics{ padding:12px; }
    #sa_page .sa-analytics .sa-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    #sa_page .sa-analytics .sa-kpi:nth-child(odd){ padding-left:0; border-left:0; }
    #sa_page .sa-analytics .sa-kpi:last-child{ grid-column:1 / -1; }
}
#sa_page .sa-stack{ display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--sa-bg2); }
#sa_page .sa-stack i{ display:block; height:100%; }
#sa_page .sa-leg{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; font-size:.78rem; }
#sa_page .sa-leg span{ display:inline-flex; align-items:center; gap:6px; }
#sa_page .sa-leg b{ font-weight:700; }
#sa_page .sa-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
#sa_page .sa-runstable td, #sa_page .sa-runstable th{ font-size:.82rem; white-space:nowrap; }
:is(#sa_page, #sa_modal_tools) .sa-vacio{ text-align:center; padding:40px 16px; opacity:.6; }
:is(#sa_page, #sa_modal_tools) .sa-vacio i{ font-size:2rem; opacity:.4; display:block; margin-bottom:8px; }

#sa_page details.sa-adv summary{ font-size:.8rem; font-weight:600; opacity:.7; cursor:pointer; }
#sa_page details.sa-adv summary:hover{ opacity:1; color:var(--sa-pri); }
#sa_page .sa-fields{ max-height:220px; overflow:auto; border:0; border-radius:var(--sa-r); padding:8px 12px; columns:2; }
#sa_page .sa-fields label{ display:block; font-size:.79rem; padding:2px 0; break-inside:avoid; }
/* encabezado de grupo dentro de la caja de estados (solo se pinta si hay mas de uno) */
#sa_page .sa-stgrupo{ display:block; break-inside:avoid; margin:9px 0 3px; font-size:.68rem; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; color:var(--sa-fnt); }
#sa_page .sa-stgrupo:first-child{ margin-top:0; }

/* ══ piezas del rediseno (2026-08-25) ══════════════════════════════════════ */
:is(#sa_page, #sa_modal_tools) .sa-card{ box-shadow:none; }
#sa_page .sa-listhead{ display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-bottom:1px solid var(--sa-bor);
    font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--sa-fnt); }
#sa_page .sa-stack{ display:flex; gap:2px; height:30px; border-radius:6px; overflow:hidden; background:transparent; }
#sa_page .sa-stack i{ display:flex; align-items:center; padding-left:11px; font-size:12px; font-weight:600; height:100%; }

/* ── piezas nuevas de la segunda tanda (JS de las laminas) ─────────────────── */
/* pregunta con opciones al final de una respuesta del chat */
#sa_page .sa-chat-q{ margin-top:6px; }
#sa_page .sa-chat-q .sa-q-opt:disabled{ cursor:default; }
#sa_page .sa-chat-q .sa-q-opt:disabled:hover{ background:transparent; }
#sa_page .sa-chat-meta + .sa-chat-q{ margin-top:10px; }
#sa_page .sa-chat-ia-txt > .sa-chat-recs:first-child{ margin-top:0; }
#sa_page .sa-state.is-warn::before, :is(#sa_page, #sa_modal_tools) .sa-state.is-warn::before{ background:var(--sa-warn); }
/* textos-boton fuera de la pagina (modal de herramientas) */
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-textbtn{ display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; padding:0; font-size:12.5px;
    font-weight:500; color:var(--sa-mut); cursor:pointer; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-textbtn:hover{ color:var(--sa-txt); }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-textbtn-danger:hover{ color:var(--sa-dang); }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-back{ margin:0 0 14px; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-back .ti{ font-size:14px; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-skillfoot{ display:flex; align-items:center; gap:8px; margin-top:18px; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-sech-g{ margin-top:18px; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-tool-why{ font-size:11.5px; color:var(--sa-fnt); white-space:nowrap; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-item .sa-state, :is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-item .sa-pill{ flex:none; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-chat-spin{ width:13px; height:13px; border-radius:50%; border:0; border-top-color:var(--sa-txt);
    animation:dui-legacy-modules-superagents-sa-chat-spin .8s linear infinite; flex:none; }
/* Facebook Lead Ads en Integraciones */
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-fb-ico{ color:#1877f2; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-fb-forms{ border-top:1px solid var(--sa-bor); padding:4px 0; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-fb-form{ display:flex; align-items:center; gap:12px; min-height:46px; padding:5px 16px 5px 28px; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-fb-form .sa-mt-txt b{ font-size:13px; font-weight:500; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-fb-dot{ flex:none; width:7px; height:7px; border-radius:50%; background:var(--sa-ok); }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-fb-dot.is-off{ background:var(--sa-warn); }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-fb-sa{ flex:none; display:inline-flex; align-items:center; gap:7px; max-width:200px; font-size:12px; font-weight:500; color:var(--sa-txt);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-fb-sa.is-none{ color:var(--sa-fnt); font-weight:400; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-fb-sa .sa-av{ flex-basis:20px; width:20px; height:20px; border-radius:6px; font-size:11px; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-fb-mas{ display:block; margin:2px 0 4px 47px; border:0; background:transparent; padding:0; font-size:12px; font-weight:500; color:var(--sa-link); cursor:pointer; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-fb .sa-fb-sw{ border-top:1px solid var(--sa-bor); }
/* ══ NAVEGADOR REMOTO (2026-09-23) ═══════════════════════════════════════════
   Marc: "en la derecha, donde dice Enseñar una skill, y ahí se amplíe; al decirle qué hacer
   que se vea solo una imagen; que el superagente avise cuando acabe". El recuadro del panel
   es la pantalla (ultima imagen); la vista ampliada es un <dialog> dentro de #sa_page (muere
   con el modulo) con el tema oscuro de la consola de Cloud Servers. */
#sa_page .sa-rp-screen.is-live{ cursor:pointer; }
#sa_page .sa-rp-screen.is-live:hover{ border-color:var(--sa-bors); }
#sa_page .sa-rp-view.is-img{ padding:0; overflow:hidden; opacity:1; background:var(--dt-surface); }
#sa_page .sa-rp-view img{ width:100%; height:100%; object-fit:contain; display:block; }
#sa_page .sa-rp-dot{ width:8px; height:8px; border-radius:50%; background:var(--sa-fnt); flex:none; }
#sa_page .sa-rp-dot.is-on{ background:var(--sa-ok); }
#sa_page .sa-rp-dot.is-rec{ background:var(--sa-dang); animation:dui-legacy-modules-superagents-sa-nav-blink 1s ease-in-out infinite; }
#sa_page .sa-rp-dot.is-work{ background:var(--sa-pri); animation:dui-legacy-modules-superagents-sa-nav-blink 1s ease-in-out infinite; }
#sa_page .sa-rp-dot.is-warn{ background:var(--sa-warn); }
@keyframes dui-legacy-modules-superagents-sa-nav-blink{ 50%{ opacity:.25; } }
#sa_page .sa-rp-urltxt{ flex:1; min-width:0; height:16px; line-height:16px; padding:0 6px; border-radius:8px; background:var(--sa-bg); border:0;
    font-size:9.5px; color:var(--sa-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-rp-btns{ display:flex; gap:8px; margin-top:12px; }
#sa_page .sa-rp-btns .sa-rp-teach{ margin-top:0; flex:1; }
#sa_page .sa-rp-teach.is-sec{ background:var(--sa-bg2); color:var(--sa-txt); }
#sa_page .sa-rp-teach.is-rec{ background:var(--sa-dang); color:var(--dt-on-color); }
#sa_page .sa-rp-teach.is-work{ background:var(--sa-bg2); color:var(--sa-mut); cursor:default; }
#sa_page .sa-rp-mini{ width:36px; height:36px; flex:none; border:0; border-radius:999px; background:var(--sa-bg); color:var(--sa-mut);
    display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; }
#sa_page .sa-rp-mini:hover{ color:var(--sa-txt); background:var(--sa-hover); }
#sa_page .sa-rp-status{ margin-top:8px; font-size:11.5px; color:var(--sa-fnt); text-align:center; min-height:16px; }
#sa_page .sa-rp-status.is-warn{ color:var(--sa-warn); }
#sa_page .sa-rp-status.is-rec{ color:var(--sa-dang); }
#sa_page .sa-rp-skills{ margin-top:16px; }
#sa_page .sa-rp-skills b{ display:block; font-size:12.5px; margin-bottom:6px; }
#sa_page .sa-rp-skill{ display:flex; align-items:center; gap:9px; padding:7px 8px 7px 10px; border:0; border-radius:10px; margin-top:6px; font-size:12.5px; }
#sa_page .sa-rp-skill .ti-browser{ color:var(--sa-mut); flex:none; }
#sa_page .sa-rp-skill span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-rp-skill button{ width:28px; height:28px; flex:none; border:0; border-radius:8px; background:var(--sa-bg2); color:var(--sa-txt); cursor:pointer; font-size:13px; }
#sa_page .sa-rp-skill button:hover{ background:var(--sa-pri); color:var(--dt-cta-fg); }
#sa_page .sa-rp-urlin{ display:flex; gap:6px; margin-top:10px; }
#sa_page .sa-rp-urlin input{ flex:1; min-width:0; height:32px; border:0; border-radius:8px; padding:0 9px; font-size:12.5px; background:var(--sa-bg); color:var(--sa-txt); }

/* vista ampliada */
#sa_nav_dialog{ --nav-bg:var(--dt-surface); --nav-bar:#16181e; --nav-bor:var(--dt-border); --nav-txt:var(--dt-text); --nav-mut:var(--dt-muted); --nav-ok:var(--dt-success); --nav-warn:var(--dt-warning); --nav-bad:#dc4c4c;
    width:min(96vw, 1440px); height:min(94vh, 920px); max-width:none; max-height:none; padding:0; margin:auto; border:0; border-radius:12px;
    background:var(--nav-bg); color:var(--nav-txt); overflow:hidden; box-shadow:var(--dt-pop-shadow); font-family:inherit; }
#sa_nav_dialog::backdrop{ background:rgba(5,7,10,.72); }
#sa_nav_dialog:fullscreen{ width:100vw; height:100vh; border:0; border-radius:0; }
#sa_nav_dialog .sa-nav-shell{ display:flex; flex-direction:column; width:100%; height:100%; min-height:0; }
#sa_nav_dialog .sa-nav-chrome{ display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--dt-surface); border-bottom:1px solid var(--nav-bor); flex:none; }
#sa_nav_dialog .sa-nav-lights{ display:inline-flex; gap:6px; margin-right:4px; }
#sa_nav_dialog .sa-nav-lights i{ width:11px; height:11px; border-radius:50%; background:var(--dt-surface); display:block; }
#sa_nav_dialog .sa-nav-lights i:nth-child(1){ background:#ff5f57; } #sa_nav_dialog .sa-nav-lights i:nth-child(2){ background:#febc2e; } #sa_nav_dialog .sa-nav-lights i:nth-child(3){ background:#28c840; }
#sa_nav_dialog .sa-nav-nb{ width:30px; height:30px; flex:none; border:0; border-radius:8px; background:transparent; color:var(--nav-mut); display:inline-flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; }
#sa_nav_dialog .sa-nav-nb:hover{ background:var(--dt-surface); color:var(--nav-txt); }
#sa_nav_dialog [hidden]{ display:none!important; }
#sa_nav_dialog [data-sa-nav-interaction]:disabled{ opacity:.45; cursor:default; }
#sa_nav_dialog .sa-nav-omni{ flex:1; min-width:200px; height:34px; display:flex; align-items:center; gap:8px; padding:0 6px 0 12px; border-radius:17px; background:var(--dt-surface); border:0; }
#sa_nav_dialog .sa-nav-omni:focus-within{ border-color:#4b5563; box-shadow:0 0 0 3px rgba(75,85,99,.25); }
#sa_nav_dialog .sa-nav-omni > .ti{ font-size:14px; color:var(--nav-mut); flex:none; }
#sa_nav_dialog .sa-nav-omni input{ flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; color:var(--nav-txt); font-size:13.5px; font-family:inherit; }
#sa_nav_dialog .sa-nav-omni button{ width:26px; height:26px; flex:none; border:0; border-radius:50%; background:var(--dt-cta); color:var(--nav-txt); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px; }
#sa_nav_dialog .sa-nav-omni button:hover{ background:var(--dt-cta); }
#sa_nav_dialog .sa-nav-bar{ display:flex; align-items:center; gap:6px; padding:6px 12px; background:var(--nav-bar); border-bottom:1px solid var(--nav-bor); flex:none; flex-wrap:wrap; }
#sa_nav_dialog .sa-nav-btn{ height:32px; padding:0 11px; border-radius:8px; border:0; background:transparent; color:var(--nav-txt);
    font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap; }
#sa_nav_dialog .sa-nav-btn:hover{ background:var(--dt-cta); }
#sa_nav_dialog .sa-nav-btn:disabled{ opacity:.45; cursor:default; }
#sa_nav_dialog .sa-nav-btn.is-icon{ width:32px; padding:0; justify-content:center; }
#sa_nav_dialog .sa-nav-btn.is-pri{ background:var(--dt-surface); color:var(--dt-text); border-color:#fff; }
#sa_nav_dialog .sa-nav-btn.is-pri:hover{ background:var(--dt-surface-2); }
#sa_nav_dialog .sa-nav-btn.is-rec{ color:#ff7b7b; border-color:#7a2b2b; background:var(--dt-cta); }
#sa_nav_dialog .sa-nav-btn .ti{ font-size:15px; }
#sa_nav_dialog .sa-nav-chip{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 9px; border-radius:999px; background:#1f2330; color:var(--nav-mut); font-size:12px; font-weight:600; white-space:nowrap; }
#sa_nav_dialog .sa-nav-chip .sa-rp-dot{ width:7px; height:7px; border-radius:50%; background:var(--nav-mut); }
#sa_nav_dialog .sa-nav-chip.is-rec{ color:#ff9b9b; } #sa_nav_dialog .sa-nav-chip.is-rec .sa-rp-dot{ background:var(--nav-bad); animation:dui-legacy-modules-superagents-sa-nav-blink 1s infinite; }
#sa_nav_dialog .sa-nav-chip.is-on .sa-rp-dot{ background:var(--nav-ok); }
#sa_nav_dialog .sa-nav-chip.is-work .sa-rp-dot{ background:#4f8ff0; animation:dui-legacy-modules-superagents-sa-nav-blink 1s infinite; }
#sa_nav_dialog .sa-nav-stage{ flex:1; min-height:0; position:relative; display:flex; align-items:center; justify-content:center; background:#000; overflow:hidden; }
#sa_nav_dialog .sa-nav-stage img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; user-select:none; -webkit-user-drag:none; }
#sa_nav_dialog .sa-nav-capa{ position:absolute; inset:0; cursor:crosshair; outline:0; }
#sa_nav_dialog .sa-nav-capa.is-blocked{ cursor:not-allowed; }
#sa_nav_dialog .sa-nav-ripple{ position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; border:0; pointer-events:none; animation:dui-legacy-modules-superagents-sa-nav-ripple .55s ease-out forwards; }
@keyframes dui-legacy-modules-superagents-sa-nav-ripple{ from{ transform:scale(.4); opacity:.95; } to{ transform:scale(1.6); opacity:0; } }
#sa_nav_dialog .sa-nav-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--nav-txt);
    background:rgba(12,14,18,.72); text-align:center; padding:24px; font-size:14px; }
#sa_nav_dialog .sa-nav-overlay .ti{ font-size:34px; color:var(--nav-mut); }
#sa_nav_dialog .sa-nav-overlay small{ color:var(--nav-mut); max-width:420px; line-height:1.5; }
#sa_nav_dialog .sa-nav-notice{ position:absolute; top:12px; left:12px; right:12px; z-index:4; width:fit-content; max-width:calc(100% - 24px); margin:0 auto; padding:9px 12px; border:0; border-radius:8px; background:rgba(22,24,30,.94); color:#f2c487; font-size:12.5px; line-height:1.45; pointer-events:none; }
#sa_nav_dialog .sa-nav-preparation{ flex:none; padding:10px 14px; border-bottom:1px solid var(--nav-bor); background:var(--nav-bar); color:var(--nav-txt); display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
#sa_nav_dialog .sa-nav-preparation p{ flex:1; min-width:180px; margin:0; font-size:12.5px; line-height:1.5; }
#sa_nav_dialog .sa-nav-preparation[hidden]{ display:none; }
#sa_nav_dialog .sa-nav-profile{ color:var(--nav-mut); font-size:11px; }
#sa_nav_dialog .sa-nav-foot{ display:flex; align-items:center; gap:14px; padding:7px 12px; border-top:1px solid var(--nav-bor); background:var(--nav-bar); font-size:12px; color:var(--nav-mut); flex:none; flex-wrap:wrap; min-height:34px; }
#sa_nav_dialog .sa-nav-foot b{ color:var(--nav-txt); font-weight:600; }
#sa_nav_dialog .sa-nav-foot .is-warn{ color:#f2b56b; }
#sa_nav_dialog .sa-nav-inline{ position:absolute; z-index:3; display:flex; align-items:center; gap:4px; padding:4px; border-radius:8px; background:var(--nav-bar); border:0; box-shadow:none; }
#sa_nav_dialog .sa-nav-inline input{ width:230px; height:28px; border:0; outline:0; background:var(--dt-surface); color:var(--nav-txt); border-radius:6px; padding:0 8px; font-size:13px; font-family:inherit; }
#sa_nav_dialog .sa-nav-inline-lock{ width:28px; height:28px; border:0; border-radius:6px; background:transparent; color:var(--nav-mut); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:14px; }
#sa_nav_dialog .sa-nav-inline-lock.is-on{ color:#ff9b9b; background:var(--dt-surface); }
#sa_nav_dialog .sa-nav-pop{ position:absolute; right:14px; bottom:14px; width:min(440px, calc(100% - 28px)); background:var(--nav-bar); border:0; border-radius:12px;
    padding:12px; display:flex; flex-direction:column; gap:8px; box-shadow:none; z-index:2; }
#sa_nav_dialog .sa-nav-pop textarea{ width:100%; min-height:72px; resize:vertical; background:var(--dt-surface); color:var(--nav-txt); border:0; border-radius:8px; padding:8px; font-size:13px; font-family:inherit; outline:0; }
#sa_nav_dialog .sa-nav-pop textarea.is-secret{ -webkit-text-security:disc; }
#sa_nav_dialog .sa-nav-pop select{ width:100%; height:32px; background:var(--dt-surface); color:var(--nav-txt); border:0; border-radius:8px; padding:0 8px; font-size:12.5px; font-family:inherit; outline:0; }
#sa_nav_dialog .sa-nav-pop label{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--nav-mut); cursor:pointer; }
#sa_nav_dialog .sa-nav-pop .sa-nav-pop-acts{ display:flex; gap:8px; justify-content:flex-end; }
#sa_nav_dialog .sa-nav-pop .sa-nav-hint{ font-size:11.5px; color:var(--nav-mut); }
#sa_nav_dialog .sa-nav-setup{ position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(12,14,18,.94); overflow:auto; }
#sa_nav_dialog .sa-nav-setup form{ width:min(100%,560px); margin:auto; padding:24px; border:0; border-radius:14px; background:var(--nav-bar); color:var(--nav-txt); }
#sa_nav_dialog .sa-nav-setup h2{ margin:0 0 10px; font-size:20px; color:var(--nav-txt); }
#sa_nav_dialog .sa-nav-setup p{ color:var(--nav-mut); font-size:13px; line-height:1.6; }
#sa_nav_dialog .sa-nav-setup label{ display:block; font-size:13px; margin:18px 0 8px; }
#sa_nav_dialog .sa-nav-setup input,#sa_nav_dialog .sa-nav-setup textarea{ width:100%; padding:10px 12px; border:0; border-radius:8px; background:var(--nav-bg); color:var(--nav-txt); font:inherit; }
#sa_nav_dialog .sa-nav-setup textarea{ min-height:150px; resize:vertical; }
#sa_nav_dialog .sa-nav-setup input:focus,#sa_nav_dialog .sa-nav-setup textarea:focus{ outline:2px solid #679cff; outline-offset:2px; }
#sa_nav_dialog .sa-nav-setup-error{ color:#ff9b9b; font-size:13px; margin-top:12px; }
#sa_nav_dialog .sa-nav-setup-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
#sa_nav_dialog.is-setup .sa-nav-chrome,#sa_nav_dialog.is-setup .sa-nav-bar,#sa_nav_dialog.is-setup .sa-nav-foot{ display:none; }
@media(max-width:600px){ #sa_nav_dialog .sa-nav-setup{ padding:12px; } #sa_nav_dialog .sa-nav-setup form{ padding:18px; } }

/* tarjetas del hilo: tarea del navegador, "lista para ejecutar", skill creada */
#sa_page .sa-run{ margin:2px 0 10px; border:0; border-radius:12px; background:var(--sa-bg); overflow:hidden; max-width:660px; }
#sa_page .sa-run-head{ display:flex; align-items:center; gap:8px; padding:9px 12px; font-size:12.5px; font-weight:600; }
#sa_page .sa-run-head .ti{ font-size:16px; color:var(--sa-mut); }
#sa_page .sa-run-head.is-ok .ti{ color:var(--sa-ok); }
#sa_page .sa-run-head.is-warn .ti{ color:var(--sa-warn); }
#sa_page .sa-run-head.is-bad .ti{ color:var(--sa-dang); }
#sa_page .sa-run-head .sa-run-sub{ font-weight:500; color:var(--sa-mut); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-run-body{ padding:10px 12px 4px; font-size:13px; line-height:1.55; }
#sa_page .sa-run-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:11.5px; color:var(--sa-fnt); padding:2px 12px 10px; }
#sa_page .sa-run-acts{ display:flex; gap:8px; padding:0 12px 12px; flex-wrap:wrap; }
#sa_page .sa-run-acts .btn{ font-size:12.5px; }
#sa_page .sa-skillrun-row{ display:flex; gap:8px; align-items:baseline; font-size:12.5px; padding:3px 0; }
#sa_page .sa-skillrun-row b{ flex:0 0 auto; color:var(--sa-mut); font-weight:500; }
#sa_page .sa-skillrun-row span{ flex:1; min-width:0; overflow-wrap:anywhere; }
#sa_page .sa-skillrun-miss{ color:var(--sa-warn); font-size:12px; }

/* modal "Ejecutar" (datos que faltan + recordar) y editor de skill de navegador en Herramientas */
:is(#sa_page, #sa_modal_navrun) .sa-navp-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:center; padding:8px 0; border-top:1px solid var(--sa-bor); }
:is(#sa_page, #sa_modal_navrun) .sa-navp-row:first-child{ border-top:0; }
:is(#sa_page, #sa_modal_navrun) .sa-navp-row .sa-lbl{ margin:0; }
:is(#sa_page, #sa_modal_navrun) .sa-navp-row small{ display:block; font-size:11.5px; color:var(--sa-fnt); font-weight:400; }
:is(#sa_page, #sa_modal_navrun) .sa-navp-row .form-control{ font-size:13px; }
:is(#sa_page, #sa_modal_navrun) .sa-navp-flags{ display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--sa-mut); }
:is(#sa_page, #sa_modal_navrun) .sa-navp-flags label{ display:flex; align-items:center; gap:5px; cursor:pointer; }
#sa_modal_navrun .modal-dialog{ max-width:560px; }
:is(#sa_page .sa-config-section, #sa_modal_tools) .sa-mt-ico.is-browser{ color:var(--sa-pri); }


/* Calm surfaces across Autopilot views, following its light and dark palettes. */
#sa_page .sa-create-prompt:focus-within,
#sa_page .sa-hero-box:focus-within {
    border-color:var(--sa-bors); box-shadow:none;
}
#sa_page .sa-hero-ico {
    background:var(--sa-bg2); color:var(--sa-txt);
    box-shadow:none; border:0;
}
#sa_page .sa-home-ico {
    background:var(--sa-bg2); color:var(--sa-txt);
    box-shadow:none; border:0;
}
#sa_page .sa-hero { background:none; }
#sa_page .sa-pop .item.is-active {
    background:var(--sa-act);
}
#sa_page .sa-tpl:hover, #sa_page .sa-ent:hover,
#sa_page .sa-agentbtn:hover { border-color:var(--sa-bors); box-shadow:none; }
#sa_page .sa-ent.is-sel, #sa_page .sa-chip.is-sel {
    border-color:var(--sa-bors); background:var(--sa-act); box-shadow:none;
}
#sa_page .sa-rp-skill button:hover { background:var(--sa-act); color:var(--sa-txt); }
#sa_page .sa-chat-md a, #sa_page .sa-chat-at,
#sa_page .sa-lblbtn { text-decoration-color:var(--sa-bors); text-underline-offset:2px; }
#sa_page .sa-create-prompt button { border-radius:9px; }
:scope[data-bs-theme="dark"] #sa_page .sa-create-prompt:focus-within,
:scope[data-bs-theme="dark"] #sa_page .sa-hero-box:focus-within {
    box-shadow:none;
}

/* ══ ALTA EN 3 PASOS, diseño del vídeo de la home (Marc, 25-10) ═══════════════
   Pide → Autopilot lo prepara → Borrador. Tarjetas blancas sobre crema con etiqueta
   mono en mayúsculas, chips de color (naranja = acciones, azul = canales y voz,
   violeta = skills, verde = estado) y botón negro en píldora. En oscuro, las mismas
   piezas en gris casi negro (como las tarjetas "PRUEBA 01" del vídeo). */
#sa_page{ --wz-canvas:var(--dt-app); --wz-card:var(--dt-surface); --wz-inner:var(--dt-surface-2); --wz-line:var(--dt-border-soft); --wz-line2:var(--dt-border-strong);
    --wz-txt:var(--dt-text); --wz-mut:var(--dt-muted); --wz-lbl:var(--dt-faint); --wz-ink:var(--dt-cta); --wz-on-ink:var(--dt-cta-fg);
    --wz-or-bg:var(--dt-chip-tool); --wz-or-tx:var(--dt-chip-tool-fg); --wz-bl-bg:var(--dt-chip-channel); --wz-bl-tx:var(--dt-chip-channel-fg); --wz-gr-bg:var(--dt-chip-success); --wz-gr-tx:var(--dt-chip-success-fg);
    --wz-vi-bg:var(--dt-chip-knowledge); --wz-vi-tx:var(--dt-chip-knowledge-fg); --wz-am-bg:var(--dt-chip-warning); --wz-am-tx:var(--dt-chip-warning-fg); --wz-rd-bg:var(--dt-chip-danger); --wz-rd-tx:var(--dt-chip-danger-fg);
    --wz-g1:#f6c8e6; --wz-g2:#cfc6f6; --wz-g3:#f7e3cf;
    --wz-sh:var(--dt-card-shadow);
    --wz-mono:ui-monospace,'SF Mono','JetBrains Mono','Roboto Mono',Menlo,Consolas,monospace; }
:scope[data-bs-theme="dark"] #sa_page{ --wz-canvas:var(--dt-app); --wz-card:var(--dt-surface); --wz-inner:var(--dt-surface-2); --wz-line:var(--dt-border-soft); --wz-line2:var(--dt-border-strong);
    --wz-txt:var(--dt-text); --wz-mut:var(--dt-muted); --wz-lbl:var(--dt-faint); --wz-ink:var(--dt-cta); --wz-on-ink:var(--dt-cta-fg);
    --wz-or-bg:var(--dt-chip-tool); --wz-or-tx:var(--dt-chip-tool-fg); --wz-bl-bg:var(--dt-chip-channel); --wz-bl-tx:var(--dt-chip-channel-fg); --wz-gr-bg:var(--dt-chip-success); --wz-gr-tx:var(--dt-chip-success-fg);
    --wz-vi-bg:var(--dt-chip-knowledge); --wz-vi-tx:var(--dt-chip-knowledge-fg); --wz-am-bg:var(--dt-chip-warning); --wz-am-tx:var(--dt-chip-warning-fg); --wz-rd-bg:var(--dt-chip-danger); --wz-rd-tx:var(--dt-chip-danger-fg);
    --wz-g1:rgba(214,84,170,.3); --wz-g2:rgba(120,100,240,.3); --wz-g3:rgba(230,150,80,.16);
    --wz-sh:var(--dt-card-shadow); }
/* solo con la pestaña de crear a la vista: el #sa_detail oculto de otro ámbito no puede quitarle el padding al panel */
#sa_page .sa-panebox:has(> #sa_tab_config:not([style*="none"]) .sa-wz){ padding:0; display:flex; flex-direction:column; }
#sa_page .sa-panebox:has(> #sa_tab_config:not([style*="none"]) .sa-wz) > #sa_tab_config, #sa_page .sa-panebox:has(> #sa_tab_config:not([style*="none"]) .sa-wz) #sa_detail{ flex:1 0 auto; display:flex; flex-direction:column; }
#sa_page .sa-wz{ position:relative; flex:1 0 auto; display:flex; flex-direction:column; align-items:center; padding:44px 24px 40px;
    background:var(--wz-canvas); color:var(--wz-txt); isolation:isolate; overflow:hidden; letter-spacing:-.012em; }
#sa_page .sa-wz-glow{ position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:radial-gradient(42% 46% at 50% 38%, var(--wz-g1), transparent 70%), radial-gradient(36% 44% at 18% 82%, var(--wz-g2), transparent 70%),
               radial-gradient(30% 36% at 86% 76%, var(--wz-g3), transparent 72%); animation:dui-legacy-modules-superagents-sa-wz-drift 14s ease-in-out infinite alternate; }
/* en el borrador el degradado sigue (Marc, 25-10: "deje de ver el degradado de repente"), solo un poco mas suave */
#sa_page .sa-wz-borr .sa-wz-glow{ opacity:.8; }
@keyframes dui-legacy-modules-superagents-sa-wz-drift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(0,-2%,0) scale(1.06); } }
#sa_page .sa-wz-col{ width:100%; max-width:760px; margin:auto 0; display:flex; flex-direction:column; gap:16px; }
#sa_page .sa-wz-borr .sa-wz-col{ max-width:1080px; margin:0; }
#sa_page .sa-wz-h{ margin:0 0 6px; text-align:center; font-family:var(--sa-disp); font-size:clamp(24px,2.4vw,32px); font-weight:600; letter-spacing:-.034em; line-height:1.15; color:var(--wz-txt); text-wrap:balance; }
#sa_page .sa-wz-sub{ margin:-4px 0 6px; text-align:center; font-size:14px; color:var(--wz-mut); text-wrap:balance; }
#sa_page .sa-wz-card{ position:relative; background:var(--wz-card); border:0; border-radius:20px; box-shadow:none; padding:20px 22px; min-width:0; }
#sa_page .sa-wz-lbl{ display:block; margin:0 0 10px; font-family:var(--wz-mono); font-size:11.5px; font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:var(--wz-lbl); }
#sa_page .sa-wz-in{ animation:dui-legacy-modules-superagents-sa-wz-in .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dui-legacy-modules-superagents-sa-wz-in{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }
/* paso 1: la caja de pedir */
#sa_page .sa-wz-ask{ padding:20px 22px 14px; transition:box-shadow .2s ease, border-color .2s ease; }
#sa_page .sa-wz-ask:focus-within{ border-color:var(--wz-line2); }
#sa_page .sa-wz-ask textarea, #sa_page .sa-wz-ask textarea:focus{ display:block; width:100%; min-height:112px; max-height:340px; margin:0; padding:0 !important; border:0 !important; outline:0;
    box-shadow:none !important; background:transparent !important; resize:none; color:var(--wz-txt); font-size:clamp(17px,1.5vw,20px); line-height:1.5; letter-spacing:-.018em; }
#sa_page .sa-wz-ask textarea::placeholder{ color:var(--wz-lbl); opacity:1; }
#sa_page .sa-wz-askbar{ display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:13px; border:0; }
#sa_page .sa-wz-plus, #sa_page .sa-wz-attach{ display:inline-flex; align-items:center; justify-content:center; height:34px; border:0; border-radius:999px;
    background:transparent; color:var(--wz-txt); font-size:13px; font-weight:500; cursor:pointer; transition:background .15s; }
#sa_page .sa-wz-plus{ width:34px; padding:0; font-size:15px; }
#sa_page .sa-wz-attach{ padding:0 14px; }
#sa_page .sa-wz-plus:hover, #sa_page .sa-wz-attach:hover{ background:var(--wz-inner); }
#sa_page .sa-wz-sp{ flex:1; }
#sa_page .sa-wz-kbd{ padding:2px 7px; border:0; border-radius:6px; background:transparent; box-shadow:none; font-family:var(--wz-mono); font-size:11px; color:var(--wz-lbl); }
#sa_page .sa-wz-go{ flex:none; width:40px; height:40px; border:0; border-radius:50%; display:grid; place-items:center; background:var(--wz-ink); color:var(--wz-on-ink);
    font-size:18px; cursor:pointer; transition:transform .15s ease, opacity .15s; }
#sa_page .sa-wz-go:hover{ transform:translateY(-1px); }
#sa_page .sa-wz-go:disabled, #sa_page .sa-wz-go.is-busy{ opacity:.45; cursor:default; transform:none; }
#sa_page .sa-wz-docs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
#sa_page .sa-wz-docs:empty{ display:none; }
/* chips de color (los del vídeo) */
#sa_page .sa-wz-chip{ display:inline-flex; align-items:center; gap:6px; max-width:100%; height:28px; padding:0 10px; border:0; border-radius:8px; font-family:var(--wz-mono);
    font-size:12.5px; font-weight:500; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--wz-inner); color:var(--wz-mut); }
#sa_page .sa-wz-chip .ti{ font-size:13px; flex:none; }
#sa_page .sa-wz-chip button{ border:0; background:transparent; color:inherit; padding:0; margin-left:2px; cursor:pointer; opacity:.7; font-size:13px; line-height:1; }
#sa_page .sa-wz-chip button:hover{ opacity:1; }
#sa_page .sa-wz-chip.or{ background:var(--wz-or-bg); color:var(--wz-or-tx); }
#sa_page .sa-wz-chip.bl{ background:var(--wz-bl-bg); color:var(--wz-bl-tx); }
#sa_page .sa-wz-chip.gr{ background:var(--wz-gr-bg); color:var(--wz-gr-tx); }
#sa_page .sa-wz-chip.vi{ background:var(--wz-vi-bg); color:var(--wz-vi-tx); }
#sa_page .sa-wz-chip.am{ background:var(--wz-am-bg); color:var(--wz-am-tx); }
#sa_page .sa-wz-chip.rd{ background:var(--wz-rd-bg); color:var(--wz-rd-tx); }
/* nombre largo: puntos suspensivos en su propio span (en un flex el text-overflow del chip no actua); estado y X siempre visibles */
#sa_page .sa-wz-chip-t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-wz-chip-k, #sa_page .sa-wz-chip button, #sa_page .sa-wz-chip .ti, #sa_page .sa-wz-chip.is-reading::after{ flex:none; }
#sa_page .sa-wz-chip.is-reading::after{ content:''; width:10px; height:10px; border-radius:50%; border:1.5px solid currentColor; border-right-color:transparent; animation:dui-legacy-modules-superagents-sa-wz-spin .7s linear infinite; }
@keyframes dui-legacy-modules-superagents-sa-wz-spin{ to{ transform:rotate(360deg); } }
#sa_page .sa-wz-ejs{ display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:6px; }
#sa_page .sa-wz-ejs > div{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
#sa_page .sa-wz-ej{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border:0; border-radius:999px; background:var(--wz-card);
    color:var(--wz-txt); font-size:13px; cursor:pointer; box-shadow:none; transition:border-color .15s, transform .15s; }
#sa_page .sa-wz-ej:hover{ border-color:var(--wz-line2); transform:translateY(-1px); }
#sa_page .sa-wz-ej .ti{ font-size:15px; color:var(--wz-mut); }
#sa_page .sa-wz .sa-home-blank{ align-self:center; margin-top:4px; color:var(--wz-mut); }
/* paso 2: Autopilot lo prepara */
#sa_page .sa-wz-quote p{ margin:0; font-size:17px; line-height:1.5; color:var(--wz-txt); white-space:pre-wrap; overflow-wrap:anywhere; }
#sa_page .sa-wz-steps{ max-width:440px; width:100%; align-self:center; padding:18px 20px; }
#sa_page .sa-wz-steps b{ display:block; font-size:15px; font-weight:600; margin-bottom:10px; }
#sa_page .sa-wz-steps ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
#sa_page .sa-wz-steps li{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--wz-lbl); transition:color .3s; }
#sa_page .sa-wz-steps li i{ flex:none; width:16px; height:16px; border-radius:50%; background:var(--wz-inner); display:grid; place-items:center; font-style:normal; font-size:10px; }
#sa_page .sa-wz-steps li.is-on{ color:var(--wz-txt); }
#sa_page .sa-wz-steps li.is-on i{ background:transparent; border:2px solid var(--wz-bl-tx); border-right-color:transparent; animation:dui-legacy-modules-superagents-sa-wz-spin .8s linear infinite; }
#sa_page .sa-wz-steps li.is-ok{ color:var(--wz-mut); }
#sa_page .sa-wz-steps li.is-ok i{ background:var(--wz-gr-bg); color:var(--wz-gr-tx); }
#sa_page .sa-wz-steps li.is-ok i::before{ content:'✓'; font-weight:700; }
#sa_page .sa-wz-cancel{ align-self:center; }
/* paso 3: borrador */
#sa_page .sa-wz-top{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
#sa_page .sa-wz-top .sa-wz-h{ text-align:left; margin:0; flex:1; min-width:240px; font-size:clamp(22px,2vw,28px); }
#sa_page .sa-wz-grid{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:16px; align-items:start; }
#sa_page .sa-wz-side{ display:flex; flex-direction:column; gap:16px; min-width:0; }
#sa_page .sa-wz-agent{ padding:24px 26px 22px; }
#sa_page .sa-wz-agent-top{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:6px; }
#sa_page .sa-wz-name, #sa_page .sa-wz-name:focus{ flex:1 1 200px; min-width:0; margin:0; padding:2px 0 !important; border:0 !important; border-bottom:1px dashed transparent !important; border-radius:0; outline:0; box-shadow:none !important;
    background:transparent !important; color:var(--wz-txt); font-family:var(--sa-disp); font-size:clamp(24px,2.3vw,32px); font-weight:500; letter-spacing:-.03em; }
#sa_page .sa-wz-name:hover, #sa_page .sa-wz-name:focus{ border-bottom-color:var(--wz-line2) !important; }
#sa_page .sa-wz-desc{ margin:0 0 18px; font-size:14px; color:var(--wz-mut); line-height:1.5; }
#sa_page .sa-wz-prompt, #sa_page .sa-wz-prompt:focus{ display:block; width:100%; min-height:200px; max-height:420px; margin:0; padding:16px 18px !important; border:1px solid transparent !important; border-radius:14px; outline:0;
    box-shadow:none !important; background:var(--wz-inner) !important; color:var(--wz-txt); resize:vertical; font-family:var(--wz-mono); font-size:13.5px; line-height:1.7; letter-spacing:-.01em; }
#sa_page .sa-wz-prompt:focus{ border-color:var(--wz-line2) !important; }
#sa_page .sa-wz-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
#sa_page .sa-wz-mini{ padding:16px 18px; }
#sa_page .sa-wz-mini .sa-wz-lbl{ margin-bottom:8px; }
#sa_page .sa-wz-val{ font-size:15px; color:var(--wz-txt); line-height:1.45; overflow-wrap:anywhere; }
#sa_page .sa-wz-val small{ display:block; margin-top:3px; font-size:12.5px; color:var(--wz-mut); }
#sa_page .sa-wz-row{ display:flex; align-items:center; gap:10px; min-height:42px; padding:6px 0; border-top:1px solid var(--wz-line); }
#sa_page .sa-wz-row:first-of-type{ border-top:0; }
#sa_page .sa-wz-row > span{ flex:1; min-width:0; font-size:15px; }
#sa_page .sa-wz-row > span small{ display:block; font-size:12px; color:var(--wz-mut); }
#sa_page .sa-wz-sw{ flex:none; position:relative; width:42px; height:24px; border:0; border-radius:999px; background:var(--wz-line2); cursor:pointer; transition:background .2s; padding:0; }
#sa_page .sa-wz-sw::after{ content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--dt-surface); box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s cubic-bezier(.3,.7,.3,1); }
#sa_page .sa-wz-sw[aria-checked="true"]{ background:var(--wz-ink); }
#sa_page .sa-wz-sw[aria-checked="true"]::after{ transform:translateX(18px); background:var(--wz-on-ink); }
#sa_page .sa-wz-sw:focus-visible, #sa_page .sa-wz :is(button, .sa-wz-ej):focus-visible{ outline:2px solid var(--wz-bl-tx); outline-offset:2px; }
#sa_page .sa-wz-doc{ display:flex; align-items:center; gap:8px; font-size:14px; padding:4px 0; overflow-wrap:anywhere; }
#sa_page .sa-wz-doc .ti{ color:var(--wz-mut); }
#sa_page .sa-wz-empty{ font-size:13px; color:var(--wz-lbl); }
#sa_page .sa-wz-warn{ display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:14px; background:var(--wz-am-bg); color:var(--wz-am-tx); font-size:13.5px; line-height:1.45; }
#sa_page .sa-wz-warn .ti{ font-size:17px; flex:none; margin-top:1px; }
#sa_page .sa-wz-bar{ display:flex; align-items:center; gap:10px; padding:10px 10px 10px 18px; border-radius:999px; }
#sa_page .sa-wz-bar input, #sa_page .sa-wz-bar input:focus{ flex:1; min-width:0; height:38px; margin:0; padding:0 !important; border:0 !important; outline:0; box-shadow:none !important; background:transparent !important; color:var(--wz-txt); font-size:14.5px; }
#sa_page .sa-wz-bar input::placeholder{ color:var(--wz-lbl); opacity:1; }
#sa_page .sa-wz-sep{ width:1px; height:24px; background:var(--wz-line); flex:none; }
#sa_page .sa-wz-btn{ flex:none; display:inline-flex; align-items:center; justify-content:center; gap:7px; height:40px; padding:0 18px; border:0; border-radius:999px;
    background:var(--wz-card); color:var(--wz-txt); font-size:14px; font-weight:500; cursor:pointer; white-space:nowrap; transition:background .15s, transform .15s, opacity .15s; }
#sa_page .sa-wz-btn:hover{ background:var(--wz-inner); }
#sa_page .sa-wz-btn.dark{ background:var(--wz-ink); border-color:var(--wz-ink); color:var(--wz-on-ink); }
#sa_page .sa-wz-btn.dark:hover{ transform:translateY(-1px); background:var(--wz-ink); }
#sa_page .sa-wz-btn.txt{ border-color:transparent; background:transparent; color:var(--wz-mut); padding:0 10px; }
#sa_page .sa-wz-btn.txt:hover{ color:var(--wz-txt); }
#sa_page .sa-wz-btn.is-busy, #sa_page .sa-wz-btn:disabled{ opacity:.55; pointer-events:none; }
#sa_page .sa-wz-btn.is-busy::before{ content:''; width:13px; height:13px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:dui-legacy-modules-superagents-sa-wz-spin .7s linear infinite; }
#sa_page .sa-wz-note{ margin:-4px 0 0; text-align:center; font-size:12.5px; color:var(--wz-mut); }
#sa_page .sa-wz .sa-team{ margin:0; border-radius:20px; }
#sa_page .sa-draft-back{ margin-top:12px; }
@media (max-width:900px){
    #sa_page .sa-wz{ padding:28px 14px 28px; }
    #sa_page .sa-wz-grid{ grid-template-columns:minmax(0,1fr); }
    #sa_page .sa-wz-side{ order:2; }
    #sa_page .sa-wz-bar{ flex-wrap:wrap; border-radius:20px; padding:12px; }
    #sa_page .sa-wz-bar input{ flex:1 1 100%; padding:0 6px !important; }
    #sa_page .sa-wz-sep, #sa_page .sa-wz-kbd{ display:none; }
}
/* el borrador se apila segun el ancho real del panel (la lista lateral y el rail se comen ~330 px del viewport) */
@container sa-main (max-width:860px){
    #sa_page .sa-wz-grid{ grid-template-columns:minmax(0,1fr); }
    #sa_page .sa-wz-side{ order:2; }
}
/* iPhone hace zoom al enfocar un campo de menos de 16 px */
@media (max-width:900px){ #sa_page .sa-wz-bar input, #sa_page .sa-wz-bar input:focus, #sa_page .sa-wz-prompt, #sa_page .sa-wz-prompt:focus{ font-size:16px; } }
@media (prefers-reduced-motion:reduce){ #sa_page .sa-wz-glow, #sa_page .sa-wz-in{ animation:none; } }

/* ══ SELECTOR DE AUTOPILOT en la cabecera (Marc, 25-10: "la columna de la izquierda… barra de arriba o un selector… innova") ═══
   "Autopilot / [agente ⇅]": el selector de seccion del CRM, una barra fina y el nombre como boton que abre la paleta. Al lado
   el estado del agente. Crear y cambiar de agente o grupo vive en la paleta (--wz-*). */
#sa_page .sa-head-nav{ flex:none; display:flex; align-items:center; min-width:0; }
#sa_page .sa-head-nav h2{ margin:0; font-family:var(--sa-disp); font-size:15px; font-weight:600; letter-spacing:-.02em; }
#sa_page .sa-head-sep{ flex:none; color:var(--sa-bors); font-size:22px; font-weight:300; line-height:1; margin:0 -4px 0 -2px; }
#sa_page .sa-sw-h{ margin:0; font:inherit; letter-spacing:inherit; min-width:0; flex:0 1 auto; display:flex; }
#sa_page .sa-sw-btn{ position:relative; display:flex; align-items:center; gap:10px; min-width:0; max-width:min(440px, 46cqi); margin-left:-4px;
    padding:5px 10px 5px 5px; border:0; border-radius:12px; background:transparent; color:inherit; text-align:left; cursor:pointer;
    transition:background-color .15s ease; }
#sa_page .sa-sw-btn:hover, #sa_page .sa-sw-btn[aria-expanded="true"]{ background:var(--sa-hover); }
#sa_page .sa-sw-btn:hover .sa-av .dot, #sa_page .sa-sw-btn[aria-expanded="true"] .sa-av .dot{ box-shadow:none; }
#sa_page .sa-sw-btnav{ display:flex; flex:none; }
#sa_page .sa-sw-btn .sa-head-txt{ min-width:0; flex:0 1 auto; }
#sa_page .sa-sw-title{ display:block; min-width:0; font-family:var(--sa-disp); font-size:15px; font-weight:500; letter-spacing:-.02em; line-height:1.2;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-sw-btn .sa-head-fn{ display:block; }
#sa_page .sa-sw-btn > .ti-selector{ flex:none; font-size:16px; color:var(--sa-fnt); }
#sa_page .sa-sw-kbd{ flex:none; padding:1px 6px; border:0; border-radius:6px; background:transparent; box-shadow:none;
    font-family:var(--wz-mono); font-size:10.5px; color:var(--sa-fnt); opacity:0; transition:opacity .15s; }
#sa_page .sa-sw-btn:hover .sa-sw-kbd, #sa_page .sa-sw-btn:focus-visible .sa-sw-kbd{ opacity:1; }
#sa_page .sa-sw-btn.is-compact{ gap:4px; padding:4px 6px 4px 4px; }
/* la paleta: tarjeta bajo el nombre (dialog.show) */
#sa_page > .sa-sw{ position:absolute; inset:auto; z-index:1060; margin:0; padding:0; width:min(440px, calc(100% - 32px));
    max-height:min(560px, calc(var(--sa-h) - 72px)); flex-direction:column; overflow:hidden; border:0; border-radius:16px;
    background:var(--wz-card); color:var(--wz-txt); box-shadow:none; letter-spacing:-.01em; }
#sa_page > .sa-sw[open]{ display:flex; animation:dui-legacy-modules-superagents-sa-sw-in .14s ease-out; }
#sa_page > .sa-sw:not([open]){ display:none; }
@keyframes dui-legacy-modules-superagents-sa-sw-in{ from{ opacity:0; transform:translateY(-4px); } }
@keyframes dui-legacy-modules-superagents-sa-sw-up{ from{ transform:translateY(100%); } }
#sa_page .sa-sw:focus{ outline:none; }
#sa_page .sa-sw-grab{ display:none; }
#sa_page .sa-sw-search{ flex:none; display:flex; align-items:center; gap:10px; height:52px; padding:0 14px 0 16px; border-bottom:1px solid var(--wz-line); }
#sa_page .sa-sw-search > .ti{ font-size:17px; color:var(--sa-fnt); }
#sa_page .sa-sw-search input, #sa_page .sa-sw-search input:focus{ flex:1; min-width:0; height:auto; min-height:0; margin:0; padding:0 !important;
    border:0 !important; outline:0; box-shadow:none !important; background:transparent !important; color:var(--wz-txt); font-size:14.5px; }
#sa_page .sa-sw-search input::placeholder{ color:var(--sa-fnt); opacity:1; }
#sa_page .sa-sw-esc{ flex:none; padding:1px 6px; border:0; border-radius:6px; background:transparent; box-shadow:none;
    font-family:var(--wz-mono); font-size:10.5px; color:var(--sa-fnt); }
#sa_page .sa-sw-close{ display:none; flex:none; padding:6px 4px; border:0; background:transparent; color:var(--wz-txt); font-size:14px; font-weight:500; cursor:pointer; }
#sa_page .sa-sw-list{ flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:4px 6px 8px; scroll-padding-top:34px; }
#sa_page .sa-sw-cap{ position:sticky; top:-4px; z-index:1; display:flex; justify-content:space-between; padding:12px 10px 6px; background:var(--wz-card);
    font-family:var(--wz-mono); font-size:11px; font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:var(--sa-fnt); }
#sa_page .sa-sw-opt{ display:flex; align-items:center; gap:11px; min-height:50px; padding:7px 10px; border-radius:10px; cursor:pointer; }
#sa_page .sa-sw-opt[aria-selected="true"]{ background:color-mix(in srgb, var(--wz-txt) 6%, var(--wz-card)); }
#sa_page .sa-sw-opt .sa-av .dot{ box-shadow:none; }
#sa_page .sa-sw-opt[aria-selected="true"] .sa-av .dot{ box-shadow:0 0 0 2px color-mix(in srgb, var(--wz-txt) 6%, var(--wz-card)); }
#sa_page .sa-sw-av{ flex:none; display:flex; }
#sa_page .sa-sw-av .sa-av{ flex-basis:32px; width:32px; height:32px; border-radius:9px; font-size:16px; }
#sa_page .sa-sw-tile{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; font-size:16px; background:var(--wz-ink); color:var(--wz-on-ink); }
#sa_page .sa-sw-tile.is-dashed{ background:transparent; color:var(--sa-mut); border:1px dashed var(--sa-bors); }
#sa_page .sa-sw-txt{ flex:1; min-width:0; }
#sa_page .sa-sw-nm{ display:block; font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-sw-nm mark{ padding:0; border-radius:3px; background:var(--wz-am-bg); color:inherit; }
#sa_page .sa-sw-fn{ display:block; margin-top:1px; font-size:12px; color:var(--sa-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-sw-time{ flex:none; font-size:11px; color:var(--sa-fnt); }
#sa_page .sa-sw-chip{ flex:none; display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 7px; border-radius:6px;
    font-family:var(--wz-mono); font-size:10.5px; background:var(--wz-inner); color:var(--sa-mut); }
#sa_page .sa-sw-chip.is-ro{ background:var(--wz-am-bg); color:var(--wz-am-tx); }
#sa_page .sa-sw-cur{ flex:none; font-size:16px; color:var(--sa-txt); }
#sa_page .sa-sw-foot{ flex:none; display:flex; gap:6px; flex-wrap:wrap; padding:9px 16px; border-top:1px solid var(--wz-line);
    font-family:var(--wz-mono); font-size:11px; color:var(--sa-fnt); }
#sa_page .sa-sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (forced-colors:active){ #sa_page .sa-sw-opt[aria-selected="true"]{ outline:2px solid Highlight; } }
/* "O vuelve a" en la pantalla de crear */
#sa_page .sa-wz-crewrow[hidden]{ display:none; }
#sa_page .sa-wz-crew{ gap:8px; max-width:260px; padding-left:6px; }
#sa_page .sa-wz-crew > span[aria-hidden]{ display:flex; }
#sa_page .sa-wz-crew .sa-av{ flex-basis:22px; width:22px; height:22px; border-radius:7px; font-size:12px; }
#sa_page .sa-wz-crew .sa-av .ti{ color:inherit; font-size:12px; }
#sa_page .sa-wz-crew .sa-av .dot{ width:7px; height:7px; box-shadow:none; }
#sa_page .sa-wz-crew.is-all{ padding-left:14px; color:var(--sa-mut); }
/* movil: la paleta es una hoja inferior (showModal) */
@media (max-width:900px){
    #sa_page .sa-head-nav .sb-section-trigger-text{ display:none; }
    #sa_page .sa-sw-kbd{ display:none; }
    #sa_page .sa-sw-h{ flex:1 1 0; min-width:0; }
    #sa_page .sa-sw-h > .sa-sw-btn{ flex:1; max-width:none; }
    #sa_page .sa-sw-btn.is-compact{ flex:none; }
    #sa_page > .sa-sw.is-sheet{ position:fixed; inset:auto 0 0 0; width:100%; max-width:100%; max-height:85dvh; border-radius:20px 20px 0 0;
        border-bottom:0; padding-bottom:env(safe-area-inset-bottom); animation:dui-legacy-modules-superagents-sa-sw-up .22s cubic-bezier(.2,.8,.2,1); }
    #sa_page > .sa-sw.is-sheet::backdrop{ background:rgba(15,15,20,.32); }
    #sa_page .sa-sw.is-sheet .sa-sw-grab{ display:block; flex:none; width:36px; height:4px; margin:8px auto 0; border-radius:99px; background:var(--wz-line2); }
    #sa_page .sa-sw.is-sheet .sa-sw-search input{ font-size:16px; }
    #sa_page .sa-sw.is-sheet .sa-sw-esc, #sa_page .sa-sw.is-sheet .sa-sw-foot{ display:none; }
    #sa_page .sa-sw.is-sheet .sa-sw-close{ display:inline-flex; }
    #sa_page .sa-sw.is-sheet .sa-sw-opt{ min-height:56px; }
}
@media (max-width:480px){ #sa_page .sa-head-row .sa-state, #sa_page .sa-sw-btn .sa-head-fn{ display:none; } }
/* ══ MIEMBROS DE UN GRUPO: añadir desde la cabecera; Pausar / Encender / Abrir / Quitar / Borrar en cada uno ══ */
#sa_page .sa-gm2-wrap{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
#sa_page .sa-gm2-lbl{ font-family:var(--wz-mono); font-size:11px; font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:var(--sa-fnt); }
#sa_page .sa-gm2-head{ display:flex; flex-direction:column; gap:6px; }
#sa_page .sa-gm2-name, #sa_page .sa-gm2-name:focus{ height:auto; min-height:0; margin:0; padding:2px 0 !important; border:0 !important; border-bottom:1px dashed transparent !important;
    border-radius:0; outline:0; box-shadow:none !important; background:transparent !important; color:var(--sa-txt); font-family:var(--sa-disp); font-size:22px; font-weight:600; letter-spacing:-.025em; }
#sa_page .sa-gm2-name:hover, #sa_page .sa-gm2-name:focus{ border-bottom-color:var(--sa-bors) !important; }
#sa_page .sa-gm2-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#sa_page .sa-gm2-sp{ flex:1; }
#sa_page .sa-gm2-add{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 16px; border:0; border-radius:999px; background:var(--sa-pri);
    color:var(--dt-cta-fg); font-size:13.5px; font-weight:500; cursor:pointer; transition:transform .15s; }
#sa_page .sa-gm2-add:hover{ transform:translateY(-1px); }
#sa_page .sa-gm2-add:disabled, #sa_page .sa-gm2-btn:disabled, #sa_page .sa-gm2-ico:disabled, #sa_page .sa-gm2-link:disabled{ opacity:.45; cursor:default; transform:none; }
#sa_page .sa-gm2-btn{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px; border:0; border-radius:999px;
    background:transparent; color:var(--sa-txt); font-size:12.5px; font-weight:500; cursor:pointer; white-space:nowrap; }
#sa_page .sa-gm2-btn:hover{ background:var(--sa-hover); }
#sa_page .sa-gm2-btn.is-on{ border-color:transparent; background:var(--wz-gr-bg); color:var(--wz-gr-tx); }
#sa_page .sa-gm2-list{ display:flex; flex-direction:column; gap:10px; }
#sa_page .sa-gm2{ display:flex; flex-direction:column; gap:10px; padding:14px 14px 12px; border:0; border-radius:16px; background:var(--wz-card);
    box-shadow:none; }
#sa_page .sa-gm2.is-off{ background:color-mix(in srgb, var(--wz-card) 70%, var(--sa-app)); }
#sa_page .sa-gm2-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#sa_page .sa-gm2 .sa-av .dot{ box-shadow:none; }
#sa_page .sa-gm2-nm{ min-width:0; display:flex; flex-direction:column; gap:2px; flex:0 1 auto; }
#sa_page .sa-gm2-nm b{ font-size:14.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-gm2-badge{ display:inline-flex; align-items:center; gap:4px; font-family:var(--wz-mono); font-size:11px; color:var(--wz-vi-tx); }
#sa_page .sa-gm2-link{ align-self:flex-start; padding:0; border:0; background:transparent; color:var(--sa-mut); font-size:12px; cursor:pointer; text-decoration:underline;
    text-decoration-color:var(--sa-bors); text-underline-offset:2px; }
#sa_page .sa-gm2-link:hover{ color:var(--sa-txt); }
#sa_page .sa-gm2-state{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:7px; background:var(--wz-gr-bg); color:var(--wz-gr-tx);
    font-family:var(--wz-mono); font-size:11px; }
#sa_page .sa-gm2-state i{ width:6px; height:6px; border-radius:50%; background:currentColor; }
#sa_page .sa-gm2-state.is-off{ background:var(--wz-inner); color:var(--sa-mut); }
#sa_page .sa-gm2-ico{ width:32px; height:32px; padding:0; border:0; border-radius:9px; background:transparent; color:var(--sa-mut); display:grid; place-items:center;
    font-size:16px; cursor:pointer; }
#sa_page .sa-gm2-ico:hover{ background:var(--sa-hover); color:var(--sa-txt); }
#sa_page .sa-gm2-ico.is-danger:hover{ background:var(--wz-rd-bg); color:var(--wz-rd-tx); }
#sa_page .sa-gm2-fn, #sa_page .sa-gm2-fn:focus{ width:100%; height:36px; min-height:0; margin:0; padding:0 12px !important; border:1px solid transparent !important; border-radius:10px;
    outline:0; box-shadow:none !important; background:var(--wz-inner) !important; color:var(--sa-txt); font-size:13px; }
#sa_page .sa-gm2-fn:focus{ border-color:var(--sa-bors) !important; }
#sa_page .sa-gm2-fn::placeholder{ color:var(--sa-fnt); opacity:1; }
#sa_page .sa-gm2.is-gone .sa-gm2-nm b{ color:var(--sa-mut); }
#sa_page .sa-gm2-note{ margin:0; font-size:12px; color:var(--sa-mut); }
#sa_page .sa-gm2-foot{ display:flex; justify-content:flex-start; }
/* "+ Añadir agente" */
#sa_page .sa-gm2-pick{ border:0; border-radius:16px; background:var(--wz-card); box-shadow:none; overflow:hidden; }
#sa_page .sa-gm2-pick-q{ display:flex; align-items:center; gap:10px; height:46px; padding:0 14px; border-bottom:1px solid var(--wz-line); }
#sa_page .sa-gm2-pick-q .ti{ color:var(--sa-fnt); font-size:16px; }
#sa_page .sa-gm2-pick-q input, #sa_page .sa-gm2-pick-q input:focus{ flex:1; min-width:0; height:auto; min-height:0; margin:0; padding:0 !important; border:0 !important;
    outline:0; box-shadow:none !important; background:transparent !important; color:var(--sa-txt); font-size:14px; }
#sa_page .sa-gm2-pick-list{ max-height:320px; overflow:auto; padding:6px; }
#sa_page .sa-gm2-pick-list .sa-hint{ margin:8px 10px; }
#sa_page .sa-gm2-pick-i{ display:flex; align-items:center; gap:11px; width:100%; min-height:50px; padding:7px 10px; border:0; border-radius:10px; background:transparent;
    color:inherit; text-align:left; cursor:pointer; }
#sa_page .sa-gm2-pick-i:hover, #sa_page .sa-gm2-pick-i:focus-visible{ background:color-mix(in srgb, var(--wz-txt) 6%, var(--wz-card)); }
#sa_page .sa-gm2-pick-i .sa-av{ flex-basis:32px; width:32px; height:32px; border-radius:9px; font-size:16px; }
#sa_page .sa-gm2-pick-i .sa-av .dot{ box-shadow:none; }
#sa_page .sa-gm2-pick-t{ flex:1; min-width:0; display:flex; flex-direction:column; }
#sa_page .sa-gm2-pick-t b{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-gm2-pick-t small{ font-size:12px; color:var(--sa-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sa_page .sa-gm2-pick-go{ flex:none; display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 11px; border-radius:999px; background:var(--wz-inner);
    font-size:12px; font-weight:500; color:var(--sa-txt); }
#sa_page .sa-gm2-pick-i:hover .sa-gm2-pick-go{ background:var(--sa-pri); color:var(--dt-cta-fg); }
#sa_page .sa-gm2-pick-i.is-new{ border-top:1px solid var(--wz-line); border-radius:0 0 10px 10px; margin-top:4px; }
#sa_page .sa-gm2-pick-i.is-new small{ white-space:normal; }
#sa_page .sa-group-create{ flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:12px 20px; border-bottom:1px solid var(--dt-border); background:var(--dt-surface); color:var(--dt-text); font-size:13px; }
#sa_page .sa-group-create[hidden]{ display:none; }
#sa_page .sa-group-create-copy{ flex:1 1 240px; min-width:0; }
#sa_page .sa-group-create-copy p{ margin:4px 0 0; color:var(--dt-muted); }
#sa_page .sa-group-create-actions{ display:flex; flex-wrap:wrap; gap:8px; }
#sa_page .sa-gm2-pick-i:disabled{ opacity:.55; cursor:default; }
@media (max-width:620px){
    #sa_page .sa-gm2-top{ row-gap:8px; }
    #sa_page .sa-gm2-nm{ flex:1 1 calc(100% - 50px); }
    #sa_page .sa-gm2-sp{ display:none; }
    #sa_page .sa-gm2-fn, #sa_page .sa-gm2-pick-q input{ font-size:16px; }
}
@media (prefers-reduced-motion:reduce){ #sa_page > .sa-sw[open], #sa_page > .sa-sw.is-sheet{ animation:none; } #sa_page .sa-sw-btn{ transition:none; } }

/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Autopilot (superagents.html). Una superficie con líneas de 1 px, sin sombras, degradados ni halos; pestañas de la cabecera
   con subrayado; botones fantasma y UN CTA en tinta por pantalla. LOS COLORES POR AGENTE SE QUEDAN (26-10, Marc: «con lo que
   costó se han cargado los colorines… falta en los iconos de los superagentes»): avatares, clúster y pila de grupos, equipo
   propuesto, iconos de tabla y de marca y semáforos del navegador conservan su color; solo los cuadros que iban en tinta
   (.sa-hab-head, .sa-plan-num, .sa-team-ic) son neutros. Solo color,
   borde, sombra, radio y tipografía: ningún id, clase ni atributo que lea el JS cambia. Se queda el diseño Autopilot del
   25-10 (etiquetas mono, chips de color del borrador, aviso ámbar de "It still needs", pastillas de estado con tinte).
   Los --wz-* neutros pasan a los --dt-* igual que §12 de datalyse-modern.css hizo con los --apc-*. */

/* tokens del alta en 3 pasos y de la paleta: superficies del CRM (no crema), tinta = --dt-cta, sin sombra.
   Los --wz-or, --wz-bl, --wz-gr, --wz-vi, --wz-am y --wz-rd (chips de color) no se tocan. */
:scope #sa_page, :scope[data-bs-theme="dark"] #sa_page{
    --wz-canvas:var(--dt-app); --wz-card:var(--dt-surface); --wz-inner:var(--dt-surface-2); --wz-line:var(--dt-border-soft); --wz-line2:var(--dt-border-strong);
    --wz-txt:var(--dt-text); --wz-mut:var(--dt-muted); --wz-lbl:var(--dt-faint); --wz-ink:var(--dt-cta); --wz-on-ink:var(--dt-cta-fg);
    --wz-sh:var(--dt-card-shadow); }

/* avatar del agente: sa_avatarHtml escribe el color por posición EN LÍNEA (cuadro teñido al 12 %/18 % + icono en su color);
   el estado sigue en el punto verde o gris de .dot. (26-10: aquí hubo un cuadrado gris con !important; fuera.) */
:is(#sa_page, #sa_modal_tools, #sa_modal_group) .sa-av .ti{ color:inherit; }
/* los cuadros que iban teñidos de tinta: neutros (el equipo propuesto por la IA toma la paleta por posición, abajo) */
#sa_page .sa-hab-head > .ti, #sa_page .sa-team-ic{ background:var(--sa-bg2); color:var(--sa-mut); border:0; }
#sa_page .sa-plan-num{ background:var(--sa-bg2); color:var(--sa-mut); font-variant-numeric:tabular-nums; }
#sa_page .sa-hab-row.is-new .sa-hab-ico{ background:var(--sa-bg2); color:var(--sa-txt); }
/* equipo que propone la IA (sin posición en sa_list): color por posición en la lista, como los avatares */
#sa_page .sa-team-list li:nth-child(5n+1) .sa-team-av{ color:var(--sa-a1); background:color-mix(in srgb, var(--sa-a1) var(--sa-tint), transparent); }
#sa_page .sa-team-list li:nth-child(5n+2) .sa-team-av{ color:var(--sa-a2); background:color-mix(in srgb, var(--sa-a2) var(--sa-tint), transparent); }
#sa_page .sa-team-list li:nth-child(5n+3) .sa-team-av{ color:var(--sa-a3); background:color-mix(in srgb, var(--sa-a3) var(--sa-tint), transparent); }
#sa_page .sa-team-list li:nth-child(5n+4) .sa-team-av{ color:var(--sa-a4); background:color-mix(in srgb, var(--sa-a4) var(--sa-tint), transparent); }
#sa_page .sa-team-list li:nth-child(5n+5) .sa-team-av{ color:var(--sa-a5); background:color-mix(in srgb, var(--sa-a5) var(--sa-tint), transparent); }
/* selector de agente de la cabecera (26-10, Marc: "difuminado… chispa"): al pasar o abierto, velo del color del agente
   (--sa-sw-c lo escribe sa_swBtnHtml; sin agente, el lila del fondo de New Autopilot). Sin borde. */
#sa_page .sa-sw-btn{ transition:background-color .18s ease; }
#sa_page .sa-sw-btn:hover, #sa_page .sa-sw-btn[aria-expanded="true"]{
    background:radial-gradient(80% 140% at 8% 50%, color-mix(in srgb, var(--sa-sw-c, var(--wz-g2)) 22%, transparent), transparent 62%) no-repeat,
               color-mix(in srgb, var(--sa-sw-c, var(--wz-g2)) 9%, transparent); }

/* pestañas de la cabecera (#sa_tabs): subrayado de 2 px en tinta sobre la línea de la cabecera, como #pn-main-content > .pn-tabs.
   Solo #sa_tabs: el filtro de Herramientas y el modo de una skill siguen siendo segmentados (.sa-seg) */
#sa_page .sa-head-tabs{ align-self:stretch; }
#sa_page .sa-head-tabs #sa_tabs.sa-seg{ align-items:stretch; gap:18px; padding:0; border:0; border-radius:0; background:transparent; }
#sa_page .sa-head-tabs #sa_tabs.sa-seg button{ min-height:40px; padding:0 2px; border-radius:0; background:transparent; box-shadow:none;
    font-size:13px; font-weight:600; color:var(--sa-mut); }
#sa_page .sa-head-tabs #sa_tabs.sa-seg button:hover{ color:var(--sa-txt); }
#sa_page .sa-head-tabs #sa_tabs.sa-seg button.is-active{ background:transparent; color:var(--sa-txt); box-shadow:inset 0 -2px var(--sa-txt); }
#sa_page .sa-head-tabs #sa_tabs .n, #sa_page .sa-head-tabs #sa_tabs button.is-active .n{ background:var(--sa-bg2); color:var(--sa-mut); font-variant-numeric:tabular-nums; }
/* en dos filas (estrecho y móvil) las pestañas apoyan el subrayado en la línea de abajo */
@container sa-main (max-width:980px){ #sa_page .sa-head:not(.is-solo){ padding-bottom:0; } }
/* los segmentados que quedan: la activa sin sombra, con línea fina */
:is(#sa_page, #sa_modal_tools) .sa-seg:not(#sa_tabs) button.is-active, #sa_page .sa-model-seg button[aria-pressed="true"]{ box-shadow:inset 0 0 0 1px var(--sa-bor); }

/* Grupos: identidad y acciones arriba; navegación entre Chat y Miembros debajo. */
#sa_page .sa-head.is-group{ display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; gap:8px 12px; padding:12px 20px 0 16px; }
#sa_page .sa-head.is-group .sa-head-row{ display:contents; }
#sa_page .sa-head.is-group .sa-head-nav{ grid-column:1; grid-row:1; }
#sa_page .sa-head.is-group .sa-head-sep{ grid-column:2; grid-row:1; }
#sa_page .sa-head.is-group .sa-sw-h{ grid-column:3; grid-row:1; }
#sa_page .sa-head.is-group .sa-sw-btn{ max-width:100%; }
#sa_page .sa-head.is-group .sa-sw-title{ font-size:17px; }
#sa_page .sa-head.is-group .sa-head-fn{ display:block; white-space:normal; overflow-wrap:anywhere; line-height:1.5; margin-top:4px; }
#sa_page .sa-head.is-group .sa-sw-kbd, #sa_page .sa-head.is-group .sa-head-sp{ display:none; }
#sa_page .sa-head.is-group .sa-head-acts{ grid-column:4; grid-row:1; align-items:flex-start; }
#sa_page .sa-head.is-group .sa-head-tabs{ grid-column:1 / -1; grid-row:2; border-top:1px solid var(--sa-bor); }
#sa_page .sa-head.is-group .sa-head-tabs #sa_tabs{ gap:24px; }
#sa_page .sa-head.is-group .sa-head-tabs #sa_tabs button{ min-height:44px; }
#sa_page .sa-head-members{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
#sa_page .sa-head-members .sa-gm2-add{ white-space:nowrap; }
#sa_page .sa-head-capacity{ max-width:220px; font-size:12px; line-height:1.4; color:var(--sa-mut); text-align:right; }
#sa_page .sa-head-capacity[hidden]{ display:none; }
#sa_page .sa-head-members :focus-visible{ outline:2px solid var(--sa-txt); outline-offset:3px; }
@container sa-main (max-width:680px){
    #sa_page .sa-head.is-group{ padding:10px 12px 0; gap:8px; }
    #sa_page .sa-head.is-group .sa-sw-h{ grid-column:3 / -1; }
    #sa_page .sa-head.is-group .sa-sw-title{ white-space:normal; overflow-wrap:anywhere; }
    #sa_page .sa-head.is-group .sa-head-acts{ grid-column:1 / -1; grid-row:2; justify-content:flex-end; }
    #sa_page .sa-head.is-group .sa-head-tabs{ grid-row:3; }
    #sa_page .sa-head.is-group .sa-avpila .sa-av{ width:26px; height:26px; flex-basis:26px; font-size:14px; }
}
@container sa-main (max-width:480px){
    #sa_page .sa-head.is-group .sa-head-nav, #sa_page .sa-head.is-group .sa-head-sep{ align-self:start; margin-top:6px; }
    #sa_page .sa-head.is-group .sa-sw-btn{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; width:100%; }
    #sa_page .sa-head.is-group .sa-sw-btnav{ grid-column:1; grid-row:1; }
    #sa_page .sa-head.is-group .sa-sw-btn > .ti-selector{ grid-column:2; grid-row:1; }
    #sa_page .sa-head.is-group .sa-head-txt{ grid-column:1 / -1; grid-row:2; }
}
/* "Terminar de configurar" repetido bajo el objetivo: fantasma; el de la cabecera ya es el CTA */
#sa_page .sa-cfg-finish .btn.btn-primary{ background:transparent !important; border-color:var(--sa-bors) !important; color:var(--sa-txt) !important; }
#sa_page .sa-cfg-finish .btn.btn-primary:hover{ background:var(--sa-hover) !important; }
/* btn-light de Bootstrap (Cargar más, Cancelar): fantasma con línea, no gris relleno */
:is(#sa_page, #sa_modal_navrun, #sa_modal_know, #sa_modal_run) .btn.btn-light{ background:transparent !important; border:0 !important;
    color:var(--dt-text) !important; box-shadow:none !important; }
:is(#sa_page, #sa_modal_navrun, #sa_modal_know, #sa_modal_run) .btn.btn-light:hover{ background:var(--dt-hover) !important; }
/* panel derecho: "Enseñar una skill" fantasma de 34 px (el CTA en tinta del chat es Enviar); grabando, el rojo solo en el icono */
#sa_page .sa-rp-teach{ height:34px; border:0; border-radius:8px; background:transparent; color:var(--sa-txt); transition:background-color .12s; }
#sa_page .sa-rp-teach:not(:disabled):hover{ background:var(--sa-hover); }
#sa_page .sa-rp-teach.is-sec, #sa_page .sa-rp-teach.is-rec{ background:transparent; color:var(--sa-txt); }
#sa_page .sa-rp-teach.is-rec .ti{ color:var(--sa-dang); }
#sa_page .sa-rp-teach.is-work, #sa_page .sa-rp-teach:disabled{ background:transparent; border-color:var(--sa-bor); color:var(--sa-fnt); }
#sa_page .sa-rp-mini{ height:34px; width:34px; border-radius:8px; }
#sa_page .sa-rp-skill button:hover{ background:var(--sa-act); color:var(--sa-txt); }
#sa_page .sa-block.is-open .sa-num{ background:var(--sa-txt); color:var(--sa-bg); box-shadow:none; }

/* sombras y halos fuera: capas separadas por su línea de 1 px */
#sa_page .sa-rp-screen, :scope[data-bs-theme="dark"] #sa_page .sa-rp-screen,
#sa_page .sa-block.is-open, #sa_page .sa-ent.is-sel,
#sa_page .sa-recs-pop, #sa_page .sa-chat-conversation-pop, #sa_page #sa_chat_modelpop, #sa_page #sa_chat_mentions,
#sa_page .sa-shell.is-rp-ok.is-rp-open > .sa-rpanel,
#sa_page .sa-wz-ej, #sa_page .sa-wz-sw::after, #sa_page .sa-gm2, #sa_page .sa-gm2-pick{ box-shadow:none; }
#sa_page .sa-recs-pop, #sa_page #sa_chat_modelpop, #sa_page #sa_chat_mentions{ border-color:var(--sa-bors); }
#sa_page > .sa-sw{ box-shadow:none; border-color:var(--sa-bors); border-radius:var(--sa-rl); }
#sa_page #sa_nav_dialog, #sa_page #sa_nav_dialog .sa-nav-inline, #sa_page #sa_nav_dialog .sa-nav-pop{ box-shadow:none; }
/* compositor del chat: la superficie del CRM en los dos temas, sin sombra ni grises a mano */
#sa_page #sa_tab_chat .sa-chat-compose, :scope[data-bs-theme="dark"] #sa_page #sa_tab_chat .sa-chat-compose{ background:var(--sa-bg); border-color:var(--sa-bors); box-shadow:none; }
#sa_page #sa_tab_chat .sa-chat-compose:hover, :scope[data-bs-theme="dark"] #sa_page #sa_tab_chat .sa-chat-compose:hover{ border-color:var(--sa-bors); }
#sa_page #sa_tab_chat .sa-chat-compose:focus-within, :scope[data-bs-theme="dark"] #sa_page #sa_tab_chat .sa-chat-compose:focus-within{ border-color:var(--dt-focus, var(--sa-fnt)); box-shadow:none; }
/* sin elevación al pasar el ratón */
#sa_page :is(.sa-gm2-add, .sa-wz-ej, .sa-wz-go, .sa-wz-btn, .sa-ent):hover{ transform:none; }
#sa_page .sa-wz-btn.dark:hover{ transform:none; background:var(--dt-cta-hover); border-color:var(--dt-cta-hover); }

#sa_page .sa-wz-card, #sa_page .sa-wz .sa-team{ border-radius:var(--sa-rl); }
#sa_page .sa-wz-steps li.is-on i{ border:2px solid var(--sa-txt); border-right-color:transparent; }
#sa_page .sa-wz-sw:focus-visible, #sa_page .sa-wz :is(button, .sa-wz-ej):focus-visible{ outline-color:var(--sa-txt); }
:is(#sa_page, #sa_modal_tools) .sa-q, :is(#sa_page, #sa_modal_tools) .sa-q-home .sa-q-opts{ border-radius:var(--sa-rl); }

/* miembros de un grupo: tarjetas de línea fina; "Encender" fantasma (el verde solo en su icono); rol en gris */
#sa_page .sa-gm2, #sa_page .sa-gm2-pick{ border-radius:var(--sa-rl); }
#sa_page .sa-gm2-add{ height:34px; padding:0 14px; border-radius:8px; font-size:12.5px; font-weight:600; }
#sa_page .sa-gm2-btn{ border-radius:8px; font-weight:600; }
#sa_page .sa-gm2-btn.is-on{ border-color:var(--sa-bors); background:transparent; color:var(--sa-txt); }
#sa_page .sa-gm2-btn.is-on:hover{ background:var(--sa-hover); }
#sa_page .sa-gm2-btn.is-on .ti{ color:var(--sa-ok); }
#sa_page .sa-gm2-badge{ color:var(--sa-mut); }
#sa_page .sa-gm2-ico.is-danger:hover{ background:var(--sa-hover); color:var(--sa-dang); }

/* borrador de la IA en Configuración: tenía grises y verdes solo de tema claro (en oscuro salía blanco) */
#sa_page .sa-draft-review{ border-color:var(--sa-bor); background:var(--sa-bg); }
#sa_page .sa-draft-review-head .ti{ color:var(--sa-mut); }
#sa_page .sa-draft-review .sa-draft-missing{ color:var(--sa-warn); }

/* Avanzado: tarjetas de tabla y chips con línea fina, sin halo */
#sa_page .sa-ent{ border-width:1px; border-radius:var(--sa-r); }
#sa_page .sa-chip{ border-width:1px; font-size:12px; }
#sa_page details.sa-adv summary{ font-size:12.5px; color:var(--sa-mut); opacity:1; }
#sa_page details.sa-adv summary:hover{ color:var(--sa-txt); }
#sa_page .alert.alert-light{ --bs-border-color:var(--sa-bor); background:var(--sa-bg2); border-color:var(--sa-bor); color:var(--sa-mut); border-radius:var(--sa-r); }

/* Clientes: número de la puntuación en tinta (la barra conserva su color: es la señal), canal en chip neutro,
   grises por token y no por opacidad, cifras tabulares */
#sa_page .sa-lead-nm{ font-size:13.5px; }
#sa_page .sa-lead-sc{ color:var(--sa-txt) !important; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
#sa_page .sa-lead-emp{ font-size:12px; color:var(--sa-mut); opacity:1; }
#sa_page .sa-lead-meta{ font-size:11.5px; font-variant-numeric:tabular-nums; }
#sa_page .sa-lead-bot{ font-size:12px; color:var(--sa-mut); opacity:1; }
#sa_page .sa-canal{ height:20px; padding:0 8px; font-size:11px; color:var(--sa-mut) !important; background:var(--sa-bg2) !important; }
#sa_page .sa-client-contact{ font-size:12.5px; }
#sa_page .sa-client-meta{ font-size:12px; font-variant-numeric:tabular-nums; }
#sa_page .sa-client-meta small{ font-size:11px; }
#sa_page .sa-kpi .k, #sa_page .sa-analytics .sa-kpi .k{ font-size:11px; font-weight:600; color:var(--sa-fnt); opacity:1; }
#sa_page .sa-kpi .v{ font-weight:600; font-variant-numeric:tabular-nums; }
#sa_page .sa-kpi .s, #sa_page .sa-analytics .sa-kpi .s{ font-size:12px; color:var(--sa-mut); opacity:1; }
#sa_page .sa-leg, #sa_page .sa-stats-message{ font-size:12px; }
#sa_page .sa-leg b, #sa_page .sa-runstable td, #sa_page .sa-stack i, #sa_page .sa-chat-meta, #sa_page .sa-run-meta,
#sa_page .sa-sw-time, #sa_page .sa-rp-meta{ font-variant-numeric:tabular-nums; }
#sa_page .sa-runstable td, #sa_page .sa-runstable th{ font-size:12.5px; }
:is(#sa_page, #sa_modal_tools) .sa-vacio{ color:var(--sa-mut); opacity:1; font-size:13px; }
:is(#sa_page, #sa_modal_tools) .sa-vacio i{ color:var(--sa-fnt); opacity:1; font-size:28px; }


}
/* end dui-template-style modules/superagents:0 */
/* dui-template-style {"key":"modules/texttospeech:0","bytes":45524,"sha256":"47ff8fffd63e22384e72831f3020f4b11004e3c39d0f7a47bcec8724e5fa6efa","media":null,"source_sha256":"2f0bff237257ed955b88c570b39534ff71e2eb743e466aa120ed67d95542a13f"} */
@scope (:root:has(template[data-dui-legacy-style="modules/texttospeech:0"])) {

    /* === TTS PAGE === */
    .tts-page {
        display: flex;
        height: var(--app-page-height);
        width: 100%;
        font-family: inherit;
    }

    /* === MAIN AREA === */
    .tts-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
        background: var(--bs-body-bg);
    }

    .tts-section-header {
        flex: 0 0 auto;
        padding: 14px 24px 0;
    }

    .tts-textarea {
        flex: 1;
        width: 100%;
        border: none;
        outline: none;
        resize: none;
        padding: 44px 52px;
        font-size: 16px;
        line-height: 1.8;
        color: var(--bs-emphasis-color);
        background: transparent;
        font-family: inherit;
        letter-spacing: .01em;
    }
    .tts-textarea::placeholder { color: var(--bs-secondary-color); font-style: italic; }
    .tts-textarea:focus,
    .tts-textarea:hover,
    .tts-textarea:active {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* === RESULT PLAYER: dUI.Player 'bar' (cssyapp/datalyse-player.js + .css); aquí solo el contenedor que se despliega === */
    .tts-player-wrap {
        padding: 0 52px 0;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s ease, padding .4s ease;
    }
    .tts-player-wrap.show {
        max-height: 160px;
        opacity: 1;
        padding: 8px 52px 16px;
    }
    .tts-player-wrap .dpl { max-width: none; }

    /* === BOTTOM BAR === */
    .tts-bottom-bar {
        display: flex; align-items: center; gap: 20px;
        padding: 14px 52px;
        border-top: 1px solid var(--bs-border-color);
        background: var(--bs-body-bg); flex-shrink: 0;
    }
    .tts-bottom-cost { font-size: 13px; color: var(--bs-secondary-color); }
    .tts-cost-val { font-weight: 700; color: var(--bs-primary); }
    .tts-bottom-spacer { flex: 1; }
    .tts-char-count { font-size: 13px; color: var(--bs-secondary-color); white-space: nowrap; font-variant-numeric: tabular-nums; }

    .tts-generate-btn {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 10px 28px; border-radius: 22px;
        font-size: 14px; font-weight: 600; cursor: pointer; border: none;
        background: var(--bs-primary); color: var(--dt-cta-fg);
        font-family: inherit; transition: all .2s ease;
        white-space: nowrap; flex-shrink: 0;
        box-shadow: none;
    }
    .tts-generate-btn:hover:not(:disabled) { box-shadow: none; transform: translateY(-1px); }
    .tts-generate-btn:active:not(:disabled) { transform: translateY(0); }
    .tts-generate-btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }

    .vc-spinner {
        display: inline-block; width: 16px; height: 16px;
        border: 2px solid rgba(255,255,255,.3); border-radius: 50%;
        border-top-color: #fff; animation: dui-legacy-modules-texttospeech-vc-spin .6s linear infinite;
    }
    @keyframes dui-legacy-modules-texttospeech-vc-spin { to { transform: rotate(360deg); } }

    /* === SETTINGS SIDEBAR === */
    .tts-settings {
        width: 290px; flex-shrink: 0;
        border-left: 1px solid var(--bs-border-color);
        background: var(--bs-body-bg);
        overflow-y: auto; display: flex; flex-direction: column;
    }
    .tts-settings-header { padding: 18px 24px; border-bottom: 1px solid var(--bs-border-color); }
    .tts-settings-title {
        font-size: 14px; font-weight: 700; color: var(--bs-emphasis-color);
        position: relative; display: inline-block; padding-bottom: 10px;
    }
    .tts-settings-title::after {
        content: ''; position: absolute; bottom: 0; left: 0;
        width: 100%; height: 2px; background: var(--bs-emphasis-color); border-radius: 1px;
    }
    .tts-setting-section { padding: 18px 24px; border-bottom: 1px solid var(--bs-border-color); }
    .tts-setting-label {
        display: flex; align-items: center; gap: 8px;
        font-size: 12px; font-weight: 700; color: var(--bs-secondary-color);
        text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px;
    }
    .tts-setting-label .ti { font-size: 16px; color: var(--bs-primary); }

    .tts-lang-select {
        width: 100%; padding: 12px 40px 12px 16px;
        border: 0; border-radius: 12px;
        background: var(--bs-body-bg); color: var(--bs-emphasis-color);
        font-size: 14px; font-weight: 500; font-family: inherit; outline: none;
        cursor: pointer; appearance: none; -webkit-appearance: none; transition: all .2s;
    }
    .tts-lang-select:hover { border-color: var(--bs-secondary-color); }
    .tts-lang-select:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb),.15); }
    .tts-select-wrap { position: relative; }
    .tts-select-wrap::after {
        content: ''; position: absolute; right: 16px; top: 50%;
        width: 7px; height: 7px;
        border-right: 2px solid var(--bs-secondary-color);
        border-bottom: 2px solid var(--bs-secondary-color);
        transform: translateY(-60%) rotate(45deg); pointer-events: none;
    }

    /* === VOICE PICKER TRIGGER === */
    .tts-vpicker-trigger {
        width: 100%; display: flex; align-items: center; gap: 12px;
        padding: 10px 14px; border: 0;
        border-radius: 12px; background: var(--bs-body-bg);
        cursor: pointer; transition: all .2s; font-family: inherit;
    }
    .tts-vpicker-trigger:hover { border-color: var(--bs-secondary-color); }
    .tts-vpicker-trigger.open { border-color: var(--bs-primary); box-shadow: none; }
    .tts-vpicker-avatar {
        width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        font-size: 14px; font-weight: 700; color: #fff;
    }
    .tts-vpicker-avatar.empty { background: var(--bs-secondary-bg); }
    .tts-vpicker-trigger-info { flex: 1; min-width: 0; text-align: left; }
    .tts-vpicker-trigger-name {
        font-size: 14px; font-weight: 600; color: var(--bs-emphasis-color);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
    }
    .tts-vpicker-trigger-sub { font-size: 11px; color: var(--bs-secondary-color); display: block; margin-top: 1px; }
    .tts-vpicker-chevron { font-size: 18px; color: var(--bs-secondary-color); flex-shrink: 0; transition: transform .2s; }
    .tts-vpicker-trigger.open .tts-vpicker-chevron { transform: rotate(90deg); }

    /* === VOICE PICKER MODAL === */
    .tts-vpicker-modal {
        display: none; position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        /* Forzar viewport completo aunque algún ancestor cree containing block (transform/will-change). */
        width: min(960px, calc(100vw - 48px)); height: min(760px, calc(100dvh - 96px)); max-width: calc(100vw - 48px); max-height: calc(100dvh - 96px);
        margin: auto; padding: 0; border: 0; border-radius: 12px; overflow: hidden; box-shadow: none;
        /* Z-index máximo para superar cualquier modal/overlay existente. */
        z-index: 2147483647;
        background: var(--bs-body-bg);
        flex-direction: column; animation: dui-legacy-modules-texttospeech-ttsVpickerSlideIn .25s ease;
    }
    .tts-vpicker-modal.open { display: flex; }
    @keyframes dui-legacy-modules-texttospeech-ttsVpickerSlideIn { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:translateX(0); } }
    .tts-vpicker-modal-header {
        display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
        padding: 18px 24px; border-bottom: 1px solid var(--bs-border-color); flex-shrink: 0;
    }
    .tts-vpicker-back {
        width: 38px; height: 38px; border-radius: 10px; border: none;
        background: transparent; color: var(--bs-emphasis-color);
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; font-size: 22px; flex-shrink: 0; transition: background .15s;
    }
    .tts-vpicker-back:hover { background: var(--bs-tertiary-bg); }
    .tts-vpicker-modal-title { font-size: 20px; font-weight: 700; color: var(--bs-emphasis-color); flex: 1; }
    .tts-vpicker-tabs {
        display: flex; gap: 0; padding: 0 24px;
        border-bottom: 1px solid var(--bs-border-color); flex-shrink: 0;
    }
    .tts-vpicker-tab {
        padding: 14px 20px; font-size: 14px; font-weight: 600;
        color: var(--bs-secondary-color); cursor: pointer; border: none;
        background: none; font-family: inherit; position: relative; transition: color .15s;
    }
    .tts-vpicker-tab:hover { color: var(--bs-body-color); }
    .tts-vpicker-tab.active { color: var(--bs-emphasis-color); }
    .tts-vpicker-tab.active::after {
        content: ''; position: absolute; bottom: -1px; left: 12px; right: 12px;
        height: 2px; background: var(--bs-emphasis-color); border-radius: 1px;
    }
    .tts-vpicker-search { display: flex; align-items: center; gap: 10px; padding: 12px 24px; flex-shrink: 0; }
    .tts-vpicker-search-box {
        flex: 1; display: flex; align-items: center; gap: 10px;
        padding: 10px 16px; background: var(--bs-tertiary-bg);
        border: 0; border-radius: 12px; transition: border-color .2s;
    }
    .tts-vpicker-search-box:focus-within { border-color: var(--bs-secondary-color); box-shadow: none; }
    #vc-vpicker-search:focus { outline: none !important; box-shadow: none !important; border: 0 !important; }
    .tts-vpicker-search-box .ti { font-size: 18px; color: var(--bs-secondary-color); flex-shrink: 0; }
    .tts-vpicker-search-box input {
        flex: 1; border: none; outline: none; background: transparent;
        font-size: 14px; color: var(--bs-emphasis-color); font-family: inherit;
    }
    .tts-vpicker-search-box input::placeholder { color: var(--bs-secondary-color); }
    .tts-vpicker-filters { display: flex; gap: 8px; padding: 0 24px 14px; flex-shrink: 0; flex-wrap: wrap; }
    .tts-vpicker-chip {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 7px 14px; border: 1.5px solid var(--bs-border-color);
        border-radius: 20px; background: var(--bs-body-bg);
        font-size: 13px; font-weight: 500; color: var(--bs-body-color);
        cursor: pointer; font-family: inherit; transition: all .15s; white-space: nowrap; position: relative;
    }
    .tts-vpicker-chip:hover { border-color: var(--bs-secondary-color); color: var(--bs-emphasis-color); }
    .tts-vpicker-chip.active { border-color: var(--bs-primary); color: var(--bs-primary); background: rgba(var(--bs-primary-rgb),.15); }
    .tts-vpicker-chip .ti { font-size: 14px; }
    .tts-vpicker-chip-menu {
        display: none; position: absolute; top: calc(100% + 6px); left: 0;
        min-width: 160px; background: var(--bs-body-bg);
        border: 1px solid var(--bs-border-color); border-radius: 12px;
        box-shadow: 0 8px 30px rgba(0,0,0,.12); z-index: 10; overflow: hidden;
        animation: dui-legacy-modules-texttospeech-ttsChipMenuIn .15s ease;
    }
    .tts-vpicker-chip-menu.open { display: block; }
    @keyframes dui-legacy-modules-texttospeech-ttsChipMenuIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
    .tts-vpicker-chip-option {
        display: block; width: 100%; padding: 10px 16px;
        font-size: 13px; color: var(--bs-emphasis-color);
        cursor: pointer; border: none; background: none; font-family: inherit; text-align: left; transition: background .1s;
    }
    .tts-vpicker-chip-option:hover { background: var(--bs-tertiary-bg); }
    .tts-vpicker-chip-option.active { color: var(--bs-primary); font-weight: 600; }
    .tts-vpicker-list { flex: 1; overflow-y: auto; padding: 8px 0; }
    .tts-vpicker-list::-webkit-scrollbar { width: 5px; }
    .tts-vpicker-list::-webkit-scrollbar-track { background: transparent; }
    .tts-vpicker-list::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: 3px; }
    .tts-vpicker-item {
        display: flex; align-items: center; gap: 14px;
        padding: 12px 24px; cursor: pointer; transition: background .1s;
    }
    .tts-vpicker-item:hover { background: var(--bs-tertiary-bg); }
    .tts-vpicker-item.selected { background: rgba(var(--bs-primary-rgb),.15); }
    .tts-vpicker-item-avatar {
        width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        font-size: 18px; font-weight: 700; color: #fff;
    }
    .tts-vpicker-item-info { flex: 1; min-width: 0; }
    .tts-vpicker-item-name {
        font-size: 15px; font-weight: 600; color: var(--bs-emphasis-color);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .tts-vpicker-item-desc {
        font-size: 13px; color: var(--bs-secondary-color); margin-top: 3px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* vista previa de cada voz: dUI.Player 'mini' (icono que alterna, sin dock) */
    .tts-vpicker-item .dpl--mini { flex-shrink: 0; }
    .tts-vpicker-empty { padding: 40px 24px; text-align: center; font-size: 14px; color: var(--bs-secondary-color); }
    .tts-vpicker-section-label {
        padding: 12px 24px 6px; font-size: 11px; font-weight: 700;
        color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .06em;
    }

    /* === SLIDERS === */
    .tts-slider-group { margin-bottom: 4px; }
    .tts-slider-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
    .tts-slider-title { font-size: 13px; font-weight: 600; color: var(--bs-emphasis-color); }
    .tts-slider-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--bs-secondary-color); margin-top: 4px; }
    .tts-slider {
        -webkit-appearance: none; appearance: none;
        width: 100%; height: 6px; background: var(--bs-secondary-bg);
        border-radius: 3px; outline: none; cursor: pointer;
    }
    .tts-slider::-webkit-slider-thumb {
        -webkit-appearance: none; appearance: none;
        width: 18px; height: 18px; background: var(--bs-emphasis-color);
        border-radius: 50%; cursor: pointer; transition: transform .15s;
    }
    .tts-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
    .tts-slider::-moz-range-thumb {
        width: 18px; height: 18px; background: var(--bs-emphasis-color);
        border-radius: 50%; cursor: pointer; border: none;
    }

    /* === TOGGLE === */
    .tts-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 2px 0; }
    .tts-toggle-label { font-size: 13px; font-weight: 600; color: var(--bs-emphasis-color); }
    .tts-toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
    .tts-toggle input { opacity: 0; width: 0; height: 0; }
    .tts-toggle-slider {
        position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
        background: var(--bs-secondary-bg); border-radius: 12px; transition: background .2s;
    }
    .tts-toggle-slider::before {
        content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px;
        background: var(--dt-surface); border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.15);
    }
    .tts-toggle input:checked + .tts-toggle-slider { background: var(--bs-primary); }
    .tts-toggle input:checked + .tts-toggle-slider::before { transform: translateX(20px); }

    .tts-reset-btn {
        display: flex; align-items: center; justify-content: center; gap: 6px;
        padding: 14px 24px; font-size: 13px; color: var(--bs-secondary-color);
        cursor: pointer; border: none; background: none; font-family: inherit; width: 100%; transition: color .15s;
    }
    .tts-reset-btn:hover { color: var(--bs-emphasis-color); }

    /* === MODE RADIO CARDS === */
    .tts-mode-cards { display: flex; flex-direction: column; gap: 8px; }
    .tts-mode-card {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 14px; border: 0;
        border-radius: 13px; cursor: pointer; transition: all .18s;
        background: var(--bs-body-bg); position: relative;
    }
    .tts-mode-card:hover { border-color: var(--bs-secondary-color); }
    .tts-mode-card.active { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb),.05); }
    .tts-mode-radio {
        width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
        border: 2px solid var(--bs-border-color); transition: all .18s;
    }
    .tts-mode-card.active .tts-mode-radio {
        border-color: var(--bs-primary); background: var(--bs-primary);
        box-shadow: inset 0 0 0 3px var(--bs-body-bg);
    }
    .tts-mode-card-icon {
        width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center; font-size: 17px;
        background: rgba(var(--bs-primary-rgb),.1); color: var(--bs-primary); transition: all .18s;
    }
    .tts-mode-card.active .tts-mode-card-icon { background: var(--bs-primary); color: var(--dt-cta-fg); }
    .tts-mode-card-text { flex: 1; min-width: 0; }
    .tts-mode-card-title { font-size: 13px; font-weight: 700; color: var(--bs-emphasis-color); display: block; }
    .tts-mode-card-sub { font-size: 11px; color: var(--bs-secondary-color); display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Selected voice row inside generate card */
    .tts-mode-voice-row {
        display: none; align-items: center; gap: 10px;
        margin-top: 10px; padding: 8px 12px;
        background: var(--bs-tertiary-bg); border-radius: 9px;
        cursor: pointer; transition: background .15s;
    }
    .tts-mode-voice-row:hover { background: var(--bs-secondary-bg); }
    .tts-mode-voice-row.show { display: flex; }
    .tts-mode-voice-avatar {
        width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        font-size: 12px; font-weight: 700; color: #fff;
    }
    .tts-mode-voice-avatar.empty { background: var(--bs-secondary-bg); }
    .tts-mode-voice-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--bs-emphasis-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tts-mode-voice-change { font-size: 11px; color: var(--bs-primary); font-weight: 600; flex-shrink: 0; }

    /* === VOICE CHOICE MODAL === */
    .tts-vchoice-overlay {
        display: none; position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 1060; background: rgba(0,0,0,.5);
        align-items: center; justify-content: center; padding: 16px;
    }
    .tts-vchoice-overlay.open { display: flex; }
    .tts-vchoice-box {
        background: var(--bs-body-bg); border-radius: 20px;
        width: 100%; max-width: 460px;
        box-shadow: none; overflow: hidden;
        animation: dui-legacy-modules-texttospeech-ttsModalIn .2s ease;
    }
    @keyframes dui-legacy-modules-texttospeech-ttsModalIn { from { opacity:0; transform:scale(.95) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }
    .tts-vchoice-header { padding: 28px 28px 0; }
    .tts-vchoice-title { font-size: 20px; font-weight: 700; color: var(--bs-emphasis-color); margin-bottom: 4px; }
    .tts-vchoice-subtitle { font-size: 14px; color: var(--bs-secondary-color); margin-bottom: 0; }
    .tts-vchoice-body { padding: 20px 28px 0; }
    .tts-vchoice-cards { display: flex; flex-direction: column; gap: 10px; }
    .tts-vchoice-card {
        display: flex; align-items: center; gap: 14px;
        padding: 16px 18px; border: 0;
        border-radius: 14px; cursor: pointer; transition: all .15s; position: relative;
    }
    .tts-vchoice-card:hover { border-color: var(--bs-secondary-color); }
    .tts-vchoice-card.selected { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb),.06); }
    .tts-vchoice-card-icon {
        width: 46px; height: 46px; border-radius: 13px;
        display: flex; align-items: center; justify-content: center;
        font-size: 22px; flex-shrink: 0;
        background: rgba(var(--bs-primary-rgb),.1); color: var(--bs-primary); transition: all .15s;
    }
    .tts-vchoice-card.selected .tts-vchoice-card-icon { background: var(--bs-primary); color: var(--dt-cta-fg); }
    .tts-vchoice-card-body { flex: 1; }
    .tts-vchoice-card-title { font-size: 15px; font-weight: 600; color: var(--bs-emphasis-color); margin-bottom: 2px; }
    .tts-vchoice-card-desc { font-size: 13px; color: var(--bs-secondary-color); }
    .tts-vchoice-radio-dot {
        width: 20px; height: 20px; border-radius: 50%;
        border: 2px solid var(--bs-border-color); flex-shrink: 0; transition: all .15s;
    }
    .tts-vchoice-card.selected .tts-vchoice-radio-dot {
        border-color: var(--bs-primary); background: var(--bs-primary);
        box-shadow: inset 0 0 0 3px var(--bs-body-bg);
    }
    .tts-vchoice-name-wrap {
        display: none; margin-top: 14px; padding: 16px;
        background: var(--bs-tertiary-bg); border-radius: 12px;
        border: 0;
    }
    .tts-vchoice-name-label {
        font-size: 12px; font-weight: 700; color: var(--bs-secondary-color);
        text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; display: block;
    }
    .tts-vchoice-name-input {
        width: 100%; padding: 11px 14px;
        border: 0; border-radius: 10px;
        background: var(--bs-body-bg); color: var(--bs-emphasis-color);
        font-size: 14px; font-family: inherit; outline: none; transition: border-color .2s;
    }
    .tts-vchoice-name-input:focus { border-color: var(--bs-primary); }
    .tts-vchoice-footer {
        display: flex; gap: 10px; justify-content: flex-end;
        padding: 20px 28px; border-top: 1px solid var(--bs-border-color); margin-top: 20px;
    }
    .tts-vchoice-btn-cancel {
        padding: 11px 22px; border-radius: 10px;
        border: 0;
        background: none; color: var(--bs-secondary-color);
        font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s;
    }
    .tts-vchoice-btn-cancel:hover { color: var(--bs-emphasis-color); border-color: var(--bs-emphasis-color); }
    .tts-vchoice-btn-confirm {
        padding: 11px 24px; border-radius: 10px; border: none;
        background: var(--bs-primary); color: var(--dt-cta-fg);
        font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s;
    }
    .tts-vchoice-btn-confirm:hover:not(:disabled) { opacity: .88; }
    .tts-vchoice-btn-confirm:disabled { opacity: .35; cursor: not-allowed; }

    /* === CLONE FLOW MODAL === */
    .tts-cflow-overlay {
        display: none; position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 1070; background: rgba(0,0,0,.5);
        align-items: center; justify-content: center; padding: 16px;
    }
    .tts-cflow-overlay.open { display: flex; }
    .tts-cflow-box {
        background: var(--bs-body-bg); border-radius: 20px;
        width: 100%; max-width: 520px; max-height: 90vh;
        overflow-y: auto; box-shadow: none;
        animation: dui-legacy-modules-texttospeech-ttsModalIn .2s ease;
    }
    .tts-cflow-box::-webkit-scrollbar { width: 5px; }
    .tts-cflow-box::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: 3px; }
    .tts-cflow-header {
        display: flex; align-items: center; gap: 14px;
        padding: 20px 24px; border-bottom: 1px solid var(--bs-border-color);
        position: sticky; top: 0; background: var(--bs-body-bg); z-index: 2;
    }
    .tts-cflow-back {
        width: 36px; height: 36px; border-radius: 10px; border: none;
        background: var(--bs-tertiary-bg); color: var(--bs-emphasis-color);
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; font-size: 20px; flex-shrink: 0; transition: background .15s;
    }
    .tts-cflow-back:hover { background: var(--bs-secondary-bg); }
    .tts-cflow-title { font-size: 18px; font-weight: 700; color: var(--bs-emphasis-color); flex: 1; }
    .tts-cflow-body { padding: 24px; }
    .tts-cflow-intro {
        display: flex; align-items: flex-start; gap: 12px;
        padding: 14px 16px; background: rgba(var(--bs-primary-rgb),.08);
        border-radius: 12px; margin-bottom: 20px;
        border: 0;
    }
    .tts-cflow-intro i { font-size: 20px; color: var(--bs-primary); flex-shrink: 0; margin-top: 1px; }
    .tts-cflow-intro p { font-size: 13px; color: var(--bs-body-color); margin: 0; line-height: 1.55; }
    .tts-cflow-tabs {
        display: flex; gap: 0; margin-bottom: 16px;
        background: var(--bs-tertiary-bg); border-radius: 10px; padding: 4px;
    }
    .tts-cflow-tab {
        flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
        padding: 10px 16px; border: none; background: none;
        color: var(--bs-secondary-color); font-size: 13px; font-weight: 600;
        cursor: pointer; border-radius: 7px; transition: all .2s; font-family: inherit;
    }
    .tts-cflow-tab.active { background: var(--bs-body-bg); color: var(--bs-primary); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
    .tts-cflow-tab i { font-size: 16px; }
    /* Recorder */
    .tts-cflow-recorder {
        display: none; flex-direction: column; align-items: center;
        padding: 32px 20px; background: var(--bs-tertiary-bg);
        border: 0; border-radius: 14px; text-align: center;
    }
    .tts-cflow-recorder.active { display: flex; }
    .tts-cflow-rec-btn {
        width: 72px; height: 72px; border-radius: 50%;
        border: 0; background: var(--bs-body-bg);
        color: #ef4444; font-size: 26px; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        transition: all .2s; margin-bottom: 14px;
    }
    .tts-cflow-rec-btn:hover { border-color: #ef4444; background: rgba(239,68,68,.05); transform: scale(1.05); }
    .tts-cflow-rec-btn.recording {
        border-color: #ef4444; background: #ef4444; color: var(--dt-cta-fg);
        animation: dui-legacy-modules-texttospeech-tts-cflow-pulse 1.5s ease-in-out infinite;
    }
    @keyframes dui-legacy-modules-texttospeech-tts-cflow-pulse {
        0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
        50% { box-shadow: 0 0 0 14px rgba(239,68,68,0); }
    }
    .tts-cflow-rec-timer { font-size: 28px; font-weight: 700; color: var(--bs-emphasis-color); font-variant-numeric: tabular-nums; margin-bottom: 6px; }
    .tts-cflow-rec-status { font-size: 13px; color: var(--bs-secondary-color); }
    .tts-cflow-rec-status.recording { color: #ef4444; font-weight: 600; }
    .tts-cflow-rec-progress { width: 100%; max-width: 260px; height: 6px; background: rgba(0,0,0,.1); border-radius: 3px; margin-top: 12px; overflow: hidden; }
    .tts-cflow-rec-progress-bar { height: 100%; width: 0%; background: #ef4444; border-radius: 3px; transition: width .3s ease, background .3s ease; }
    .tts-cflow-rec-progress-bar.ready { background: #22c55e; }
    .tts-cflow-rec-warn { display: none; color: #ef4444; font-size: 12px; margin-top: 8px; }
    /* Dropzone */
    .tts-cflow-dropzone {
        display: none; border: 2px dashed var(--bs-border-color);
        border-radius: 14px; padding: 32px 20px;
        text-align: center; cursor: pointer;
        transition: all .2s; background: var(--bs-tertiary-bg);
    }
    .tts-cflow-dropzone.visible { display: block; }
    .tts-cflow-dropzone:hover, .tts-cflow-dropzone.dragover {
        border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb),.05);
    }
    .tts-cflow-dropzone-icon {
        width: 50px; height: 50px; border-radius: 14px;
        background: rgba(var(--bs-primary-rgb),.1);
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto 12px; font-size: 24px; color: var(--bs-primary);
    }
    .tts-cflow-dropzone h4 { font-size: 14px; font-weight: 600; color: var(--bs-emphasis-color); margin: 0 0 4px; }
    .tts-cflow-dropzone h4 span { color: var(--bs-primary); text-decoration: underline; }
    .tts-cflow-dropzone p { font-size: 12px; color: var(--bs-secondary-color); margin: 0; }
    /* File list */
    .tts-cflow-files { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
    .tts-cflow-file-item {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 14px; background: var(--bs-tertiary-bg);
        border: 0; border-radius: 10px;
        font-size: 13px; color: var(--bs-emphasis-color);
    }
    .tts-cflow-file-item .ti-file-music { color: var(--bs-primary); font-size: 18px; flex-shrink: 0; }
    .tts-cflow-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
    .tts-cflow-file-size { color: var(--bs-secondary-color); font-size: 12px; flex-shrink: 0; }
    .tts-cflow-file-remove {
        background: none; border: none; color: var(--bs-secondary-color);
        cursor: pointer; padding: 3px; font-size: 16px; flex-shrink: 0;
        border-radius: 6px; transition: .15s;
    }
    .tts-cflow-file-remove:hover { color: #ef4444; background: rgba(239,68,68,.08); }
    /* Lang select in clone flow */
    .tts-cflow-lang-row { margin-top: 18px; }
    .tts-cflow-lang-label {
        font-size: 12px; font-weight: 700; color: var(--bs-secondary-color);
        text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; display: block;
    }
    .tts-cflow-lang-select {
        width: 100%; padding: 12px 16px;
        border: 0; border-radius: 10px;
        background: var(--bs-body-bg); color: var(--bs-emphasis-color);
        font-size: 14px; font-family: inherit; outline: none; transition: border-color .2s;
        appearance: none; -webkit-appearance: none;
    }
    .tts-cflow-lang-select:focus { border-color: var(--bs-primary); }
    /* Clone button */
    .tts-cflow-footer { padding: 0 24px 24px; }
    .tts-cflow-clone-btn {
        width: 100%; padding: 15px; border: none; border-radius: 12px;
        background: var(--bs-primary); color: var(--dt-cta-fg);
        font-size: 15px; font-weight: 700; cursor: pointer;
        font-family: inherit; transition: all .2s;
        display: flex; align-items: center; justify-content: center; gap: 10px;
    }
    .tts-cflow-clone-btn:hover:not(:disabled) { opacity: .88; box-shadow: none; transform: translateY(-1px); }
    .tts-cflow-clone-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }

    /* === RESPONSIVE === */
    @media (max-width: 768px) {
        .tts-vpicker-modal { width:calc(100vw - 24px);max-width:calc(100vw - 24px);height:calc(100dvh - 48px);max-height:calc(100dvh - 48px); }
        .tts-page { flex-direction: column; height: auto; min-height: var(--app-page-height); }
        .tts-settings { width: 100%; border-left: none; border-top: 1px solid var(--bs-border-color); overflow-y: visible; }
        .tts-textarea { padding: 24px 20px; min-height: 200px; }
        .tts-bottom-bar { padding: 12px 20px; flex-wrap: wrap; gap: 12px; }
        .tts-player-wrap { padding: 0 20px 0; }
        .tts-player-wrap.show { padding: 0 20px 12px; }
    }
/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Texto a voz: una superficie con línea de 1 px, sin sombras de color ni halos (reproductor, Generate, desplegables, modales,
   menús de filtro, interruptor, grabadora, botón Clone), iconos de las tarjetas en cuadrado neutro, chips y selección en gris activo,
   pestañas de Clonar subrayadas y UN CTA en tinta por pantalla (Generate; Continue y Clone Voice en sus modales). El reproductor deja
   el azul marino fijo #1a1a2e y pasa a la superficie del tema. Los círculos de voz (color por nombre, que el JS escribe en style="")
   pasan a gris neutro con la inicial en tinta. Con --bs-primary = tinta, el texto #fff sobre tinta era invisible en oscuro: ahora va
   --dt-cta-fg. Solo color, borde, sombra, radio, espaciado y peso: ningún id, clase ni atributo que lea el JS cambia (.show, .open,
   .active, .selected, .recording, .ready, .visible, .dragover, .empty). Los sliders ya los cubre el §14 global. */
#akicontenidonormal .tts-cost-val { color: var(--dt-text); font-weight: 600; font-variant-numeric: tabular-nums; }
#akicontenidonormal :is(.tts-settings-title, .tts-vpicker-modal-title, .tts-vchoice-title, .tts-cflow-title) { font-weight: 500; letter-spacing: -.02em; }
#akicontenidonormal .tts-setting-label { font-weight: 600; color: var(--dt-faint); }
#akicontenidonormal .tts-setting-label .ti { color: var(--dt-muted); }

/* reproductor del resultado: dUI.Player 'bar' (26-10, tanda 3): lo pinta datalyse-player.css con los tokens --dt-* */

/* Generate: el CTA en tinta, 34 px, sin halo ni salto */
#akicontenidonormal .tts-generate-btn { height: 34px; padding: 0 16px; border-radius: 9999px; background: var(--dt-cta); color: var(--dt-cta-fg); box-shadow: none; }
#akicontenidonormal .tts-generate-btn:hover:not(:disabled) { background: var(--dt-cta-hover); box-shadow: none; transform: none; }
#akicontenidonormal .vc-spinner { border-color: color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; }

/* desplegables, selector de voz y campos: línea de 1 px, foco en gris sin anillo */
#akicontenidonormal :is(.tts-lang-select, .tts-vpicker-trigger, .tts-vchoice-name-input, .tts-cflow-lang-select) { border: 0; border-radius: var(--dt-radius); background: var(--dt-surface); box-shadow: none; }
#akicontenidonormal :is(.tts-lang-select, .tts-vpicker-trigger):hover { border-color: var(--dt-faint); }
#akicontenidonormal :is(.tts-lang-select, .tts-vchoice-name-input, .tts-cflow-lang-select):focus,
#akicontenidonormal .tts-vpicker-trigger.open { border-color: var(--dt-focus); box-shadow: none; }
#akicontenidonormal :is(.tts-vpicker-avatar, .tts-vpicker-item-avatar, .tts-mode-voice-avatar) { background: var(--dt-surface-2) !important; color: var(--dt-text); border: 1px solid var(--dt-border); font-weight: 600; }

/* tarjetas de modo (Create new voice / Choose existing voice): línea de 1 px, activa con borde en tinta, icono neutro */
#akicontenidonormal .tts-mode-card { border: 0; padding: 13px 15px; border-radius: var(--dt-radius-lg); background: var(--dt-surface); }
#akicontenidonormal .tts-mode-card:hover { border-color: var(--dt-border-strong); }
#akicontenidonormal .tts-mode-card.active { border-color: var(--dt-border-strong); background: var(--dt-surface-2); }
#akicontenidonormal .tts-mode-card-icon { background: var(--dt-surface-2); color: var(--dt-muted); border: 0; border-radius: 8px; }
#akicontenidonormal .tts-mode-card.active .tts-mode-card-icon { background: var(--dt-surface-2); color: var(--dt-text); }
#akicontenidonormal .tts-mode-card-title { font-weight: 600; }
#akicontenidonormal .tts-mode-voice-row { background: var(--dt-surface-2); border: 0; }
#akicontenidonormal .tts-mode-voice-row:hover { background: var(--dt-active); }
#akicontenidonormal .tts-mode-voice-change { color: var(--dt-link); }

/* interruptor: pista gris con línea fina, activo en tinta; la bola sin sombra y con el color de primer plano del CTA */
#akicontenidonormal .tts-toggle-slider { background: var(--dt-surface-2); box-shadow: none; }
#akicontenidonormal .tts-toggle-slider::before { background: var(--dt-muted); box-shadow: none; }
#akicontenidonormal .tts-toggle input:checked + .tts-toggle-slider { background: var(--dt-cta); box-shadow: none; }
#akicontenidonormal .tts-toggle input:checked + .tts-toggle-slider::before { background: var(--dt-cta-fg); }

/* selector de voces: capa con línea fina, sin sombra; chips y fila elegida en gris activo */
#akicontenidonormal .tts-vpicker-modal { background: var(--dt-overlay); border-color: var(--dt-border-strong); box-shadow: none; }
#akicontenidonormal .tts-vpicker-back:hover { background: var(--dt-hover); }
#akicontenidonormal .tts-vpicker-search-box { background: var(--dt-surface-2); border: 0; border-radius: var(--dt-radius); }
#akicontenidonormal .tts-vpicker-search-box:focus-within { border-color: var(--dt-focus); }
#akicontenidonormal .tts-vpicker-chip { border: 1px solid var(--dt-border-strong); background: transparent; color: var(--dt-text); }
#akicontenidonormal .tts-vpicker-chip:hover { border-color: var(--dt-faint); background: var(--dt-hover); }
#akicontenidonormal .tts-vpicker-chip.active { border-color: var(--dt-border-strong); background: var(--dt-active); color: var(--dt-text); font-weight: 600; }
#akicontenidonormal .tts-vpicker-chip-menu { background: var(--dt-overlay); border-color: var(--dt-border-strong); box-shadow: none; font-weight: 400; }
#akicontenidonormal .tts-vpicker-chip-option:hover { background: var(--dt-hover); }
#akicontenidonormal .tts-vpicker-chip-option.active { color: var(--dt-text); font-weight: 600; }
#akicontenidonormal .tts-vpicker-item:hover { background: var(--dt-hover); }
#akicontenidonormal .tts-vpicker-item.selected { background: var(--dt-active); }
#akicontenidonormal .tts-vpicker-section-label { font-weight: 600; color: var(--dt-faint); }

/* modales "New voice" y "Clone your voice": línea fina sin sombra, fondo de capa común, tarjetas de 1 px con icono neutro */
#akicontenidonormal :is(.tts-vchoice-overlay, .tts-cflow-overlay) { background: var(--dt-backdrop); }
#akicontenidonormal :is(.tts-vchoice-box, .tts-cflow-box) { background: var(--dt-overlay); border: 0; border-radius: var(--dt-radius-xl); box-shadow: none; }
#akicontenidonormal .tts-cflow-header { background: var(--dt-overlay); }
#akicontenidonormal .tts-vchoice-card { border: 0; border-radius: var(--dt-radius-lg); }
#akicontenidonormal .tts-vchoice-card:hover { border-color: var(--dt-border-strong); }
#akicontenidonormal .tts-vchoice-card.selected { border-color: var(--dt-border-strong); background: var(--dt-surface-2); }
#akicontenidonormal .tts-vchoice-card-icon { background: var(--dt-surface-2); color: var(--dt-muted); border: 0; }
#akicontenidonormal .tts-vchoice-card.selected .tts-vchoice-card-icon { background: var(--dt-surface-2); color: var(--dt-text); }
#akicontenidonormal .tts-vchoice-name-wrap { background: var(--dt-surface-2); border-color: var(--dt-border); }
#akicontenidonormal :is(.tts-vchoice-name-label, .tts-cflow-lang-label) { font-weight: 600; color: var(--dt-faint); }
#akicontenidonormal .tts-vchoice-btn-cancel { height: 34px; padding: 0 14px; border: 0; border-radius: 9999px; background: transparent; color: var(--dt-text); }
#akicontenidonormal .tts-vchoice-btn-cancel:hover { background: var(--dt-hover); border-color: var(--dt-border-strong); color: var(--dt-text); }
#akicontenidonormal .tts-vchoice-btn-confirm { height: 34px; padding: 0 16px; border-radius: 9999px; background: var(--dt-cta); color: var(--dt-cta-fg); }
#akicontenidonormal .tts-vchoice-btn-confirm:hover:not(:disabled) { opacity: 1; background: var(--dt-cta-hover); }
#akicontenidonormal .tts-cflow-back { background: transparent; border: 0; }
#akicontenidonormal .tts-cflow-back:hover { background: var(--dt-hover); }
#akicontenidonormal .tts-cflow-intro { background: var(--dt-surface-2); border-color: var(--dt-border); }
#akicontenidonormal .tts-cflow-intro i { color: var(--dt-muted); }

/* Record / Upload files: pestañas con subrayado en tinta en vez de control segmentado con sombra */
#akicontenidonormal .tts-cflow-tabs { background: transparent; padding: 0; border-radius: 0; border-bottom: 1px solid var(--dt-border); }
#akicontenidonormal .tts-cflow-tab { border-radius: 0; color: var(--dt-muted); }
#akicontenidonormal .tts-cflow-tab:hover { color: var(--dt-text); }
#akicontenidonormal .tts-cflow-tab.active { background: transparent; color: var(--dt-text); box-shadow: inset 0 -2px 0 var(--dt-text); }

/* grabadora: rojo solo en el icono y el texto; sin halo pulsante (late el icono) ni escalado; progreso en tinta, verde al llegar al mínimo */
#akicontenidonormal .tts-cflow-recorder { background: var(--dt-surface-2); border: 0; border-radius: var(--dt-radius-lg); }
#akicontenidonormal .tts-cflow-rec-btn { border: 0; background: var(--dt-surface); color: var(--dt-danger); }
#akicontenidonormal .tts-cflow-rec-btn:hover { border-color: var(--dt-faint); background: var(--dt-hover); transform: none; }
#akicontenidonormal .tts-cflow-rec-btn.recording { border-color: var(--dt-danger); background: var(--dt-tint-danger-bg); color: var(--dt-danger); animation: none; box-shadow: none; }
#akicontenidonormal .tts-cflow-rec-btn.recording i { animation: dui-legacy-modules-texttospeech-ttsRecBlink 1.2s ease-in-out infinite; }
@keyframes dui-legacy-modules-texttospeech-ttsRecBlink { 50% { opacity: .35; } }
#akicontenidonormal :is(.tts-cflow-rec-status.recording, .tts-cflow-rec-warn) { color: var(--dt-danger); }
#akicontenidonormal .tts-cflow-rec-progress { background: var(--dt-border-strong); }
#akicontenidonormal .tts-cflow-rec-progress-bar { background: var(--dt-text); }
#akicontenidonormal .tts-cflow-rec-progress-bar.ready { background: var(--dt-success); }

/* subida de ficheros: zona punteada de 1 px, icono neutro, enlace en azul de enlace; borrar en rojo solo en el icono */
#akicontenidonormal .tts-cflow-dropzone { border: 1px dashed var(--dt-border-strong); background: transparent; border-radius: var(--dt-radius-lg); }
#akicontenidonormal .tts-cflow-dropzone:hover,
#akicontenidonormal .tts-cflow-dropzone.dragover { border-color: var(--dt-focus); background: var(--dt-hover); }
#akicontenidonormal .tts-cflow-dropzone-icon { width: 44px; height: 44px; border-radius: var(--dt-radius); background: var(--dt-surface-2); color: var(--dt-muted); border: 1px solid var(--dt-border); font-size: 20px; }
#akicontenidonormal .tts-cflow-dropzone h4 span { color: var(--dt-link); }
#akicontenidonormal .tts-cflow-file-item { background: var(--dt-surface-2); border-color: var(--dt-border); }
#akicontenidonormal .tts-cflow-file-item .ti-file-music { color: var(--dt-muted); }
#akicontenidonormal .tts-cflow-file-size { font-variant-numeric: tabular-nums; }
#akicontenidonormal .tts-cflow-file-remove:hover { color: var(--dt-danger); background: var(--dt-hover); }

/* Clone Voice: el CTA del modal en tinta, sin halo ni salto */
#akicontenidonormal .tts-cflow-clone-btn { min-height: 38px; padding: 0 16px; border-radius: 9999px; background: var(--dt-cta); color: var(--dt-cta-fg); font-weight: 600; }
#akicontenidonormal .tts-cflow-clone-btn:hover:not(:disabled) { opacity: 1; background: var(--dt-cta-hover); box-shadow: none; transform: none; }

/* Inline delivery cues keep the native textarea as the editable/value source.
   A non-interactive mirror colors tags without changing text, caret or payload. */
.tts-text-tools { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:16px 52px 0; }
.tts-emotion-btn { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border:0; border-radius:7px; background:var(--dt-surface); color:var(--dt-text); font:500 12px/1.4 var(--font-sans); cursor:pointer; }
.tts-emotion-btn:hover:not(:disabled), .tts-emotion-btn[aria-expanded="true"] { background:var(--dt-hover); border-color:var(--dt-border-strong); }
.tts-emotion-btn:disabled { opacity:.5; cursor:not-allowed; }
.tts-emotion-hint { color:var(--dt-muted); font-size:12px; line-height:1.5; }
.tts-editor { position:relative; flex:1; min-height:220px; --tts-text-padding:24px 52px; }
#akicontenidonormal .tts-editor .tts-textarea,
#akicontenidonormal .tts-text-mirror { box-sizing:border-box; margin:0; border:0!important; border-radius:0!important; padding:var(--tts-text-padding); font-family:inherit; font-size:16px; font-weight:400; font-style:normal; line-height:1.8; letter-spacing:.01em; white-space:pre-wrap; overflow-wrap:break-word; word-break:normal; tab-size:8; }
#akicontenidonormal .tts-editor .tts-textarea { position:absolute; inset:0; width:100%; height:100%; min-height:0; background:transparent!important; color:var(--dt-text)!important; caret-color:var(--dt-text); resize:none; }
#akicontenidonormal .tts-editor--highlighted .tts-textarea { color:transparent!important; }
#akicontenidonormal .tts-editor .tts-textarea::placeholder { color:var(--dt-muted); font-style:italic; }
#akicontenidonormal .tts-editor .tts-textarea:focus { outline:none!important; box-shadow:none!important; }
.tts-text-mirror { position:absolute; inset:0; overflow:hidden; color:var(--dt-text); unicode-bidi:plaintext; pointer-events:none; user-select:none; }
.tts-text-mirror mark { padding:0; margin:0; border:0; border-radius:3px; background:color-mix(in srgb,var(--el-terracotta) 12%,transparent); color:var(--el-terracotta); font:inherit; letter-spacing:inherit; }
.tts-emotion-menu .dui-menu__kbd { color:var(--el-terracotta); background:transparent; border:0; padding:0; font:inherit; font-size:11px; }
@media(max-width:768px) {
    .tts-text-tools { padding:14px 20px 0; }
    .tts-editor { --tts-text-padding:20px; min-height:260px; }
}
@media(forced-colors:active) {
    .tts-text-mirror { display:none!important; }
    #akicontenidonormal .tts-editor--highlighted .tts-textarea { color:CanvasText!important; caret-color:CanvasText; }
}

}
/* end dui-template-style modules/texttospeech:0 */
/* dui-template-style {"key":"modules/viewoffice:0","bytes":2111,"sha256":"dbf5bd8a63e90605206814c279c95c579ac20267556c22702b239c4ac127c9ee","media":null,"source_sha256":"dbf5bd8a63e90605206814c279c95c579ac20267556c22702b239c4ac127c9ee"} */
@scope (:root:has(template[data-dui-legacy-style="modules/viewoffice:0"])) {

    html, body { margin: 0; background: var(--vo-bg, #ffffff); color: var(--vo-fg, #000000); }
    /* Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor"): los dos botones del visor llevaban azul #5d6dff
       y lila #aeb1d1 en línea. Este iframe no tiene los --dt-*: Descargar = CTA en tinta (--vo-fg sobre --vo-bg, heredados del padre)
       y Copiar enlace = ghost con línea fina; 34 px, píldora (radio 9999). */
    #btndowndriveeee, #btncopylink { height: 34px; padding: 0 14px !important; border-radius: 9999px !important; font: 500 13px/1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
    #btndowndriveeee { background: var(--vo-fg, #111110) !important; color: var(--vo-bg, #ffffff) !important; border: 1px solid var(--vo-fg, #111110) !important; }
    #btncopylink { background: transparent !important; color: var(--vo-fg, #111110) !important; border: 1px solid color-mix(in srgb, var(--vo-fg, #111110) 22%, transparent) !important; margin-left: 6px; }
    /* Reproductor único del CRM (dUI.Player, cssyapp/datalyse-player.css) en vez de <audio controls> y <video controls> (26-10):
       la tarjeta de audio va centrada y el vídeo conserva el alto que le pone el JS (window.innerHeight) con la barra del
       reproductor sobre su propio ancho. En el iframe del modal File Preview no hay dUI y se quedan los controles nativos. */
    #pdfPreviewdiv { padding: 8px 16px 20px; text-align: center; }
    #pdfPreviewdiv[hidden] { display: none; }
    #pdfPreviewdiv canvas { display: block; max-width: 100%; height: auto; margin: 10px auto; background: #fff; }
    .vo-pdf-toolbar { display: flex; align-items: center; justify-content: center; gap: 12px; }
    .vo-pdf-toolbar button { width: 34px; height: 32px; border: 1px solid #8885; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
    .vo-pdf-toolbar button:disabled { opacity: .4; cursor: default; }
    #audioPreviewdiv .dpl { margin: 0 auto; text-align: left; }
    #videoPreviewdiv .dpl--video { width: fit-content; max-width: 100%; margin: 0 auto; }

}
/* end dui-template-style modules/viewoffice:0 */
/* dui-template-style {"key":"modules/webservices:0","bytes":7785,"sha256":"555f68a0f2ad5d8c57b797a2a2e215cb2660564d062a1ae814b7e9cfdd1b3ff2","media":null,"source_sha256":"555f68a0f2ad5d8c57b797a2a2e215cb2660564d062a1ae814b7e9cfdd1b3ff2"} */
@scope (:root:has(template[data-dui-legacy-style="modules/webservices:0"])) {

    /* Domains and services share the application palette. */
    .ws-tab-badge {
        background: var(--dt-surface-2);
        color: var(--dt-muted);
        padding: 2px 8px;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 500;
    }
    .ws-domain-card {
        background: var(--dt-surface);
        border: 0;
        border-radius: 12px;
        padding: 16px;
        cursor: pointer;
        text-align: left;
        font: inherit;
        transition: all .2s;
    }
    .ws-domain-card:hover {
        border-color: var(--dt-border-strong);
        box-shadow:none;
    }
    .ws-domain-card.ws-card-selected {
        border-color: var(--dt-focus);
        box-shadow:none;
    }
    .ws-domain-card__avatar {
        width: 42px; height: 42px; border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.1rem; font-weight: 700; color: var(--dt-muted); flex-shrink: 0;
        text-transform: uppercase;
    }
    .ws-domain-card__name {
        font-weight: 600; font-size: 0.95rem; color: var(--dt-text);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ws-domain-card__meta {
        font-size: 0.78rem; color: var(--dt-muted);
        display: flex; align-items: center; gap: 12px; margin-top: 4px;
    }
    .ws-table-row:hover { background: var(--dt-hover); }
    .ws-action-btn {
        background: none;
        border: 0;
        border-radius: 6px;
        padding: 5px 8px;
        cursor: pointer;
        color: var(--dt-muted);
        transition: all .15s;
        font-size: 0.85rem;
    }
    .ws-action-btn:hover { background: var(--dt-hover); }
    .ws-action-btn.ws-action-danger { border-color: var(--dt-border-strong); color: var(--dt-danger); }
    .ws-action-btn.ws-action-danger:hover { background: var(--dt-hover); border-color: var(--dt-border-strong); }
    .ws-action-btn.ws-action-primary { border-color: var(--dt-border-strong); color: var(--dt-text); }
    .ws-action-btn.ws-action-primary:hover { background: var(--dt-hover); border-color: var(--dt-border-strong); }
    .ws-status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
    .ws-status-badge {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 4px 12px; border-radius: 9999px;
        font-size: 0.78rem; font-weight: 500;
    }
    .ws-settings-card {
        background: var(--dt-surface);
        border: 0;
        border-radius: 12px;
        padding: 20px;
        transition: all .2s;
    }
    .ws-settings-card:hover { box-shadow:none; }

    /* ── Input group for search/add ── */
    .ws-input-group {
        display: flex; gap: 0; border-radius: 10px; overflow: hidden;
        border: 0; transition: border-color 0.15s, box-shadow 0.15s;
    }
    .ws-input-group:focus-within {
        border-color: var(--dt-focus); box-shadow:none;
    }
    .ws-input-group__input {
        flex: 1; border: none; outline: none; padding: 10px 14px;
        font-size: 0.9rem; font-family: inherit;
        background: var(--dt-surface); color: var(--dt-text);
        min-width: 0;
    }
    .ws-input-group__input::placeholder { color: var(--dt-faint); }
    .ws-input-group__btn {
        padding: 10px 18px; border: none;
        background: var(--dt-cta); color: var(--dt-cta-fg);
        font-size: 0.88rem; font-weight: 600; font-family: inherit;
        cursor: pointer; white-space: nowrap; transition: opacity 0.15s;
        display: flex; align-items: center; gap: 6px;
    }
    .ws-input-group__btn:hover { background: var(--dt-cta-hover); }
    .ws-input-group__btn:disabled { opacity: 0.5; cursor: not-allowed; }

    /* ── Result box ── */
    .ws-result {
        margin-top: 16px; padding: 14px 16px;
        border-radius: 10px; font-size: 0.88rem;
        display: none;
    }
    .ws-result.is-visible { display: block; }
    .ws-result--success { background: color-mix(in srgb,var(--dt-success) 8%,transparent); border: 1px solid color-mix(in srgb,var(--dt-success) 20%,transparent); color: var(--dt-success); }
    .ws-result--error { background: color-mix(in srgb,var(--dt-danger) 8%,transparent); border: 1px solid color-mix(in srgb,var(--dt-danger) 20%,transparent); color: var(--dt-danger); }
    .ws-result--info { background: var(--dt-surface-2); border: 0; color: var(--dt-text); }
    .ws-result--warning { background: color-mix(in srgb,var(--dt-warning) 8%,transparent); border: 1px solid color-mix(in srgb,var(--dt-warning) 20%,transparent); color: var(--dt-warning); }


    /* ── DNS table ── */
    .ws-dns-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
    .ws-dns-table th {
        font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
        color: var(--dt-muted); padding: 8px 10px; text-align: left;
        border-bottom: 1px solid var(--dt-border);
    }
    .ws-dns-table td {
        font-size: 0.8rem; padding: 8px 10px;
        border-bottom: 1px solid var(--dt-border);
        color: var(--dt-text);
    }
    .ws-dns-table code {
        font-size: 0.75rem; background: var(--dt-surface-2);
        padding: 1px 6px; border-radius: 4px; word-break: break-all;
    }

    /* ── DNS check results ── */
    .ws-dns-check { margin-top: 10px; }
    .ws-dns-check__row {
        display: flex; align-items: center; gap: 6px;
        font-size: 0.82rem; padding: 4px 0;
    }
    .ws-dns-check__row i { font-size: 15px; flex-shrink: 0; }
    .ws-dns-check__row code { font-size: 0.72rem; background: var(--dt-surface-2); padding: 1px 5px; border-radius: 3px; }

    /* Los estilos de las alternativas de TLD se fueron con la compra a
       modals/domainsregister.html (prefijo .dreg-*), que trae su propio <style>. */

    .ws-avatar-blue, .ws-avatar-green, .ws-avatar-purple, .ws-avatar-orange, .ws-avatar-teal {
        background: var(--dt-surface-2); color: var(--dt-muted); border: 1px solid var(--dt-border);
    }

    @keyframes wsSpin { to { transform: rotate(360deg); } }

    @media (max-width: 767px) {
        .ws-cards-grid { grid-template-columns: 1fr !important; }
        .ws-header-inner { flex-direction: column; align-items: flex-start !important; gap: 12px !important; }
        .ws-input-group { flex-direction: column; border-radius: 10px; }
        .ws-input-group__btn { justify-content: center; border-radius: 0 0 9px 9px; }
    }
    .ws-page-heading { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
    .ws-page-icon { font-size:22px; color:var(--dt-muted); }
    .ws-total-count { font-size:12px; color:var(--dt-muted); }
    .ws-cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:12px; margin-bottom:24px; }
    .ws-services-heading { display:flex; align-items:center; gap:8px; margin:0; padding-bottom:14px; border-bottom:1px solid var(--dt-border); font-size:15px; font-weight:600; }
    .ws-domain-toolbar { margin:0; }
    .ws-domain-toolbar > span { min-width:0; overflow-wrap:anywhere; }
    .ws-empty { text-align:center; padding:48px 20px; color:var(--dt-muted); }
    .ws-empty > i { display:block; margin-bottom:14px; color:var(--dt-muted); font-size:28px; }
    .ws-empty h2 { margin:0 0 8px; font-size:17px; font-weight:500; color:var(--dt-text); }
    .ws-empty p { margin:0; font-size:13px; }
    .ws-domain-card:focus-visible, .ws-action-btn:focus-visible { outline:2px solid var(--dt-focus); outline-offset:2px; }
    @media (forced-colors: active) {
        .ws-input-group__input:focus-visible { outline:2px solid Highlight; outline-offset:-2px; }
        .ws-domain-card:focus-visible, .ws-action-btn:focus-visible { outline:2px solid Highlight; }
    }

}
/* end dui-template-style modules/webservices:0 */
/* dui-template-style {"key":"modules/whatsapp-connect:0","bytes":1037,"sha256":"8cb1ae757ee0f0fd5aa4ab4385d352417befd7bbe4f45c7e0e21ee15daa647c6","media":null,"source_sha256":"97f5ddde553fd022d858fef5b71943cdc79389bbd4a4d5ac88244b621f103efa"} */
@scope (:root:has(template[data-dui-legacy-style="modules/whatsapp-connect:0"])) {

        html,body{margin:0;padding:0;background:var(--dt-app);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--dt-text);min-height:100vh;}
        #standalone-fallback{display:flex;align-items:center;justify-content:center;min-height:100vh;}
        #standalone-fallback .box{background:var(--dt-surface);border:0;border-radius:12px;padding:24px 28px;box-shadow:none;max-width:420px;box-sizing:border-box;width:calc(100% - 32px);text-align:center;}
        #standalone-fallback h1{margin:0 0 6px;font-size:clamp(1rem,3vw,1.2rem);font-weight:400;letter-spacing:-.02em;}
        #standalone-fallback p{margin:0;color:var(--dt-muted);font-size:.9rem;}
        .spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--dt-border);border-top-color:var(--dt-text);border-radius:50%;animation:dui-legacy-modules-whatsapp-connect-spin .7s linear infinite;margin-right:8px;vertical-align:-3px;}
        @keyframes dui-legacy-modules-whatsapp-connect-spin{to{transform:rotate(360deg);}}
    
}
/* end dui-template-style modules/whatsapp-connect:0 */
/* dui-template-style {"key":"modules/workflows:0","bytes":27683,"sha256":"6a1bdea7b7219ce63ef49585c48a5bbcb17fa792e9471fea1c0b2d00284f6468","media":null,"source_sha256":"3fd52638a54ee39e3f4933e1f794ed627c458d56dab18c9a42d4ad223abeb5be"} */
@scope (:root:has(template[data-dui-legacy-style="modules/workflows:0"])) {

/* ===== Reset / Container ===== */
.wf-container {
  padding: 0 28px 28px;
  font-family: var(--font-sans);
  color: var(--text-color);
}
.wf-container *, .wf-container *::before, .wf-container *::after { box-sizing: border-box; }

/* ===== Header ===== */
.wf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 20px;
}
.wf-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wf-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--text-color);
  letter-spacing: -0.02em;
}
.wf-running-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(5,150,105,.12);
  color: #059669;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
}
.wf-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wf-btn-create {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #4f46e5;
  color: var(--dt-cta-fg);
  border: none;
  padding: 10px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none;
  text-decoration: none;
  line-height: 1.4;
}
.wf-btn-create:hover {
  background: #4338ca;
  box-shadow: none;
  transform: none;
}
.wf-btn-dalia {
  background: var(--bg-color);
  color: var(--text-color);
  border: 0;
  box-shadow: none;
}
.wf-btn-dalia i { color: #7c3aed; }
.wf-btn-dalia:hover {
  color: var(--text-color);
  background: var(--hover-color);
  border-color: #8b5cf6;
  box-shadow: none;
}

/* ===== Stat Cards ===== */
.wf-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.wf-stat-card {
  background: var(--bg-color);
  border: 0;
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.wf-stat-card:hover {
  box-shadow: none;
  border-color: var(--border-strong-color);
}
.wf-stat-label {
  font-size: 13px;
  color: var(--text-secondary-color);
  font-weight: 500;
  margin-bottom: 6px;
}
.wf-stat-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--text-color);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.wf-stat-sub {
  font-size: 12px;
  color: var(--text-muted-color);
  margin-top: 4px;
  font-weight: 400;
}
.wf-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wf-stat-icon--blue   { background: rgba(79,70,229,.1);  color: #818cf8; }
.wf-stat-icon--purple { background: rgba(124,58,237,.1); color: #a78bfa; }
.wf-stat-icon--green  { background: rgba(5,150,105,.1);  color: #34d399; }
.wf-stat-icon--orange { background: rgba(234,88,12,.1);  color: #fb923c; }
.wf-stat-icon svg { stroke: currentColor; }

/* ===== Toolbar (Tabs + Search) ===== */
.wf-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  border-bottom: 2px solid var(--border-color);
  background: var(--bg-color);
  border-radius: 14px 14px 0 0;
  padding: 0 8px;
}
.wf-tabs {
  display: flex;
  gap: 0;
}
.wf-tab {
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary-color);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.wf-tab:hover { color: var(--text-color); }
.wf-tab.active {
  color: #818cf8;
  border-bottom-color: #818cf8;
}
.wf-tab-count {
  background: var(--bg-tertiary-color);
  color: var(--text-secondary-color);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  min-width: 24px;
  text-align: center;
}
.wf-tab.active .wf-tab-count {
  background: rgba(79,70,229,.15);
  color: #818cf8;
}
.wf-search-box {
  position: relative;
  padding: 8px 12px 8px 0;
}
.wf-search-box > svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted-color);
  pointer-events: none;
}
.wf-search-box input {
  border: 0;
  border-radius: 8px;
  padding: 9px 14px 9px 38px;
  font-size: 14px;
  width: 240px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--input-color);
  color: var(--text-color);
  font-family: inherit;
}
.wf-search-box input:focus {
  border-color: #818cf8;
  box-shadow: none;
  background: var(--bg-color);
}
.wf-search-box input::placeholder { color: var(--text-muted-color); }

/* ===== Bulk Actions ===== */
.wf-bulk-actions {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: rgba(79,70,229,.1);
  border-bottom: 1px solid rgba(79,70,229,.2);
}
.wf-bulk-actions.visible { display: flex; }
.wf-bulk-actions > span {
  font-size: 14px;
  font-weight: 600;
  color: #818cf8;
}
.wf-bulk-actions-btns { display: flex; gap: 8px; }
.wf-bulk-btn {
  padding: 6px 16px;
  border-radius: 8px;
  border: 0;
  background: var(--bg-color);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--datalyse-text-color);
  font-family: inherit;
}
.wf-bulk-btn:hover { background: var(--hover-color); border-color: var(--text-muted-color); }
.wf-bulk-btn--danger { border-color: rgba(220,38,38,.4); color: #f87171; }
.wf-bulk-btn--danger:hover { background: rgba(220,38,38,.08); border-color: #f87171; }

/* ===== Table ===== */
.wf-table-wrap {
  background: var(--bg-color);
  border-radius: 0;
  overflow: hidden;
  border: 0;
  border-top: none;
}
.wf-table-scroll { overflow-y: auto; }
.wf-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.wf-table thead th {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted-color);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary-color);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.wf-th-check    { width: 48px; padding-left: 20px !important; }
.wf-th-workflow { width: 45%; }
.wf-th-type     { width: 16%; }
.wf-th-status   { width: 15%; }
.wf-th-cron, .wf-th-startcron { width: 9%; text-align: center; }
.wf-td-cron, .wf-td-startcron { text-align: center; font-size: 13px; }
.wf-cola-badge { display: inline-block; min-width: 28px; padding: 2px 8px; border-radius: 6px; background: rgba(79,70,229,.1); color: #818cf8; font-weight: 600; font-size: 12px; }

.wf-table tbody tr.wf-data-row {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.12s ease;
  cursor: default;
}
.wf-table tbody tr.wf-data-row:hover { background: var(--hover-color); }
.wf-table tbody tr.wf-data-row.selected { background: rgba(79,70,229,.08); }
.wf-table tbody tr.wf-data-row:last-child { border-bottom: none; }

.wf-table tbody td {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--datalyse-text-color);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-table tbody td.wf-td-check { padding-left: 20px !important; width: 48px; overflow: visible; text-overflow: clip; }

/* Checkbox */
.wf-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--border-strong-color);
  cursor: pointer;
  accent-color: #818cf8;
  vertical-align: middle;
}
/* Workflow cell */
.wf-workflow-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wf-workflow-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wf-workflow-icon--active   { background: rgba(5,150,105,.12); color: #34d399; }
.wf-workflow-icon--inactive { background: var(--bg-tertiary-color); color: var(--text-muted-color); }
.wf-workflow-icon--draft    { background: rgba(234,88,12,.12); color: #fb923c; }
.wf-workflow-icon svg { stroke: currentColor; }

.wf-workflow-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.wf-workflow-name {
  font-weight: 600;
  color: var(--text-color);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}
.wf-workflow-name:hover { color: #818cf8; }
.wf-workflow-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wf-workflow-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.wf-workflow-tag--leads         { background: rgba(79,70,229,.12);  color: #818cf8; }
.wf-workflow-tag--events        { background: rgba(180,83,9,.12);   color: #fbbf24; }
.wf-workflow-tag--calendar      { background: rgba(190,24,93,.12);  color: #f472b6; }
.wf-workflow-tag--opportunities { background: rgba(5,150,105,.12);  color: #34d399; }
.wf-workflow-tag--budgets       { background: rgba(124,58,237,.12); color: #a78bfa; }
.wf-workflow-steps {
  color: var(--text-muted-color);
  font-size: 12px;
  white-space: nowrap;
}

/* Type */
.wf-td-type { font-size: 13px; }

/* Status */
.wf-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.wf-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wf-status--active         { color: #34d399; }
.wf-status--active::before { background: #34d399; }
.wf-status--inactive         { color: var(--text-muted-color); }
.wf-status--inactive::before { background: var(--text-muted-color); }
.wf-status--draft         { color: #fb923c; }
.wf-status--draft::before { background: #fb923c; }

/* ===== Footer ===== */
.wf-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--bg-color);
  border: 0;
  border-top: none;
  border-radius: 0 0 14px 14px;
  margin-top: -1px;
  font-size: 13px;
  color: var(--text-secondary-color);
}
.wf-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wf-page-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 0;
  background: var(--bg-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--datalyse-text-color);
  transition: all 0.15s ease;
}
.wf-page-btn:hover:not(.disabled) {
  background: var(--hover-color);
  border-color: var(--border-strong-color);
}
.wf-page-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.wf-page-btn svg { stroke: currentColor; }

/* ===== Empty State ===== */
.wf-empty-state {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  text-align: center;
  background: var(--bg-color);
  border-radius: 14px;
  border: 0;
}
.wf-empty-state.visible { display: flex; }
.wf-empty-icon { margin-bottom: 16px; }
.wf-empty-state h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.wf-empty-state p {
  font-size: 15px;
  color: var(--text-secondary-color);
  max-width: 440px;
  margin: 0;
  line-height: 1.6;
}

/* ===== Skeleton ===== */
.wf-skeleton-row {
  display: flex;
  align-items: center;
  padding: 6px 0;
  gap: 20px;
}
.wf-skel {
  height: 14px;
  background: var(--bg-tertiary-color);
  background-size: 200% 100%;
  animation: dui-legacy-modules-workflows-wf-shimmer 1.5s ease infinite;
  border-radius: 6px;
}
@keyframes dui-legacy-modules-workflows-wf-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.wf-skeleton-tr td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border-color);
}

/* ===== Scrollbar ===== */
.wf-table-scroll::-webkit-scrollbar { width: 6px; }
.wf-table-scroll::-webkit-scrollbar-thumb {
  background: var(--scrolldark-color);
  border-radius: 3px;
}
.wf-table-scroll::-webkit-scrollbar-track { background: transparent; }

/* ===== Responsive ===== */
@media (max-width: 1200px) {
  .wf-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .wf-stats { grid-template-columns: 1fr 1fr; }
  .wf-toolbar { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .wf-tabs { overflow-x: auto; padding: 0 8px; }
  .wf-search-box { padding: 8px 12px; }
  .wf-search-box input { width: 100%; }
}
@media (max-width: 640px) {
  .wf-container { padding: 0 16px 16px; }
  .wf-stats { grid-template-columns: 1fr; }
  .wf-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .wf-header-right { width: 100%; flex-direction: column; }
  .wf-btn-create { width: 100%; justify-content: center; }
  .wf-th-type, .wf-td-type { display: none; }
  .wf-footer { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* ═══════════ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══════════
   Bloque añadido al final del <style> del módulo: solo color, borde, sombra, radio y peso; ningún id/clase que lea el JS cambia.
   Acentos propios enganchados a --dt-cta (tinta) y grises a --dt-*; iconos en cuadrado neutro; sin degradados ni sombras. */
/* ═══════════ 26-10 · Dirección ElevenLabs (Marc: "minimalista, moderno y futurista, y mejor") ═══════════
   Lista de workflows: una superficie, línea fina de 1 px, sin sombras, degradados ni cuadrados de color; jerarquía
   por peso y grises (--dt-text / --dt-muted / --dt-faint); pestañas subrayadas; un solo CTA en tinta (--dt-cta).
   Solo cambia color, borde, sombra, radio, espaciado y peso: los ids y clases que lee el JS (wf-tab.active,
   .selected, .visible, .disabled, wf-workflow-icon--*, wf-workflow-tag--*, wf-status--*, wf-cola-badge,
   wf-row-check, wf-skeleton-tr) no se tocan. Las etiquetas de tipo y los estados conservan un tinte suave
   (misma paleta que .pn-badge--ok/--warn/--info de control-phonenumbers.html, con variante oscura). */
.wf-container {
  --wf-font: var(--el-font, var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif));
  --wf-ok-bg: var(--dt-chip-success);     --wf-ok-tx: #076b39;
  --wf-warn-bg: var(--dt-chip-warning);   --wf-warn-tx: #8a4d0a;
  --wf-info-bg: var(--dt-chip-channel);   --wf-info-tx: #005fa6;
  --wf-violet-bg: var(--dt-chip-knowledge); --wf-violet-tx: #5b45a8;
  --wf-rose-bg: var(--dt-chip-danger);   --wf-rose-tx: #9c2f61;
  --wf-danger-bg: var(--dt-chip-danger); --wf-danger-tx: #a33232;
  font-family: var(--wf-font);
  color: var(--dt-text);
}
[data-bs-theme="dark"] .wf-container {
  --wf-ok-bg: var(--dt-chip-success);     --wf-ok-tx: #5fd58f;
  --wf-warn-bg: var(--dt-chip-warning);   --wf-warn-tx: #f0b45c;
  --wf-info-bg: var(--dt-chip-channel);   --wf-info-tx: #71c4f8;
  --wf-violet-bg: var(--dt-chip-knowledge); --wf-violet-tx: #b7a4f0;
  --wf-rose-bg: var(--dt-chip-danger);   --wf-rose-tx: #f08ab8;
  --wf-danger-bg: var(--dt-chip-danger); --wf-danger-tx: #f08a8a;
}

/* ── Cabecera: título 20/600, contador neutro, CTA en tinta + botón fantasma ── */
.wf-container .wf-header { padding: 20px 0 18px; }
.wf-container .wf-header-right { gap: 8px; }
.wf-container .wf-title { font-size: 20px; font-weight: 400; letter-spacing: -.02em; color: var(--dt-text); }
.wf-container .wf-running-badge {
  height: 22px; padding: 0 9px; gap: 5px; border-radius: 999px;
  background: var(--dt-surface-2); color: var(--dt-muted);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.wf-container .wf-running-badge svg { width: 12px; height: 12px; }
.wf-container .wf-btn-create {
  height: 34px; padding: 0 14px; gap: 7px; border-radius: 999px;
  border: 0; background: var(--dt-cta); color: var(--dt-cta-fg);
  font-size: 13px; font-weight: 600; line-height: 1; box-shadow: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.wf-container .wf-btn-create:hover { background: var(--dt-cta-hover); border-color: var(--dt-cta-hover); color: var(--dt-cta-fg); box-shadow: none; transform: none; }
.wf-container .wf-btn-create i.ti { font-size: 16px; line-height: 1; }
.wf-container .wf-btn-create svg { width: 16px; height: 16px; }
.wf-container .wf-btn-create.wf-btn-dalia { background: transparent; border-color: var(--dt-border-strong); color: var(--dt-text); }
.wf-container .wf-btn-create.wf-btn-dalia i { color: var(--dt-muted); }
.wf-container .wf-btn-create.wf-btn-dalia:hover { background: var(--dt-hover); border-color: var(--dt-border-strong); color: var(--dt-text); box-shadow: none; }

/* ── Tarjetas de estadísticas: línea fina, sin sombra al pasar, icono en cuadrado neutro, cifras 24/600 tabulares ── */
.wf-container .wf-stat-card { padding: 18px 20px; border-radius: var(--dt-radius-lg, 12px); border: 0; background: var(--dt-surface); transition: border-color .12s ease; }
.wf-container .wf-stat-card:hover { box-shadow: none; border-color: var(--dt-border-strong); }
.wf-container .wf-stat-label { font-size: 12.5px; font-weight: 500; color: var(--dt-muted); }
.wf-container .wf-stat-value { font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--dt-text); font-variant-numeric: tabular-nums; }
.wf-container .wf-stat-sub { font-size: 12px; color: var(--dt-faint); }
.wf-container .wf-stat-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--dt-surface-2); color: var(--dt-muted); border: 0; }
.wf-container .wf-stat-icon svg { width: 16px; height: 16px; }

/* ── Barra de pestañas: es la tapa de la tarjeta (borde completo, radio 12 arriba); pestañas subrayadas en tinta ── */
.wf-container .wf-toolbar { align-items: stretch; padding: 0 16px; border: 0; border-radius: var(--dt-radius-lg, 12px) var(--dt-radius-lg, 12px) 0 0; background: var(--dt-surface); }
.wf-container .wf-tabs { gap: 18px; align-items: stretch; }
.wf-container .wf-tab {
  height: auto; min-height: 44px; padding: 0 2px; margin-bottom: 0; gap: 7px;
  border-bottom: 0; border-radius: 0; font-size: 13px; font-weight: 600; color: var(--dt-muted);
  transition: color .12s ease, box-shadow .12s ease;
}
.wf-container .wf-tab:hover { color: var(--dt-text); }
.wf-container .wf-tab.active { color: var(--dt-text); border-bottom-color: transparent; box-shadow: inset 0 -2px var(--dt-text); }
.wf-container .wf-tab-count,
.wf-container .wf-tab.active .wf-tab-count {
  display: inline-flex; align-items: center; justify-content: center; height: 20px; min-width: 0; padding: 0 7px; border-radius: 999px;
  background: var(--dt-surface-2); color: var(--dt-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.wf-container .wf-search-box { display: flex; align-items: center; }
.wf-container .wf-search-box > svg { width: 15px; height: 15px; color: var(--dt-faint); }
.wf-container .wf-search-box input { height: 34px; padding: 0 14px 0 34px; font-size: 13px; border-radius: 999px; border-color: var(--dt-border-strong); background: var(--dt-surface); color: var(--dt-text); }
.wf-container .wf-search-box input:focus { border-color: var(--dt-focus); box-shadow: none; background: var(--dt-surface); }
.wf-container .wf-search-box input::placeholder { color: var(--dt-faint); }

/* ── Acciones en lote: franja gris neutra; el rojo solo en el texto/borde de Eliminar ── */
.wf-container .wf-bulk-actions { padding: 10px 16px; background: var(--dt-surface-2); border: 0; border-top: 0; }
.wf-container .wf-bulk-actions > span { font-size: 13px; font-weight: 600; color: var(--dt-text); font-variant-numeric: tabular-nums; }
.wf-container .wf-bulk-btn {
  height: 30px; padding: 0 12px; border-radius: 999px; border: 0;
  background: transparent; color: var(--dt-text); font-size: 12.5px; font-weight: 600; line-height: 1;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.wf-container .wf-bulk-btn:hover { background: var(--dt-hover); border-color: var(--dt-border-strong); color: var(--dt-text); }
.wf-container .wf-bulk-btn--danger { color: var(--wf-danger-tx); border-color: color-mix(in srgb, var(--wf-danger-tx) 45%, transparent); }
.wf-container .wf-bulk-btn--danger:hover { background: var(--wf-danger-bg); border-color: color-mix(in srgb, var(--wf-danger-tx) 45%, transparent); color: var(--wf-danger-tx); }

/* ── Tabla: cabecera 11.5px gris sobre --dt-topbar, filas con línea fina, selección en gris activo ── */
.wf-container .wf-table-wrap { background: var(--dt-surface); border-color: var(--dt-border); }
.wf-container .wf-table thead th { height: 40px; padding: 0 16px; font-size: 11.5px; letter-spacing: .05em; color: var(--dt-muted); background: var(--dt-topbar); border-bottom: 1px solid var(--dt-border); }
.wf-container .wf-table tbody tr.wf-data-row { border-bottom-color: var(--dt-border); }
.wf-container .wf-table tbody tr.wf-data-row:hover { background: var(--dt-hover); }
.wf-container .wf-table tbody tr.wf-data-row.selected { background: var(--dt-active); }
.wf-container .wf-table tbody td { padding: 12px 16px; font-size: 13px; color: var(--dt-text); }
.wf-container .wf-td-cron, .wf-container .wf-td-startcron { font-size: 13px; }
.wf-container .wf-cola-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px; padding: 0 7px; border-radius: 999px;
  background: var(--dt-surface-2); color: var(--dt-muted); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.wf-container .wf-checkbox { width: 16px; height: 16px; border: 1px solid var(--dt-border-strong); border-radius: 4px; accent-color: var(--dt-cta); }

/* ── Celda del workflow: icono en cuadrado neutro (activo = tinta, inactivo = gris claro), nombre 13/600, tipo en píldora ── */
.wf-container .wf-workflow-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--dt-surface-2); color: var(--dt-muted); border: 0; }
.wf-container .wf-workflow-icon--active { color: var(--dt-text); }
.wf-container .wf-workflow-icon--inactive { color: var(--dt-faint); }
.wf-container .wf-workflow-icon--draft { color: var(--dt-muted); }
.wf-container .wf-workflow-icon svg { width: 14px; height: 14px; }
.wf-container .wf-workflow-name { font-size: 13px; font-weight: 600; color: var(--dt-text); }
.wf-container .wf-workflow-name:hover { color: var(--dt-text); text-decoration: underline; text-underline-offset: 2px; }
.wf-container .wf-workflow-steps { font-size: 12px; color: var(--dt-faint); }
.wf-container .wf-workflow-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--dt-surface-2); color: var(--dt-muted); }
.wf-container .wf-workflow-tag--leads         { background: var(--wf-info-bg);   color: var(--wf-info-tx); }
.wf-container .wf-workflow-tag--events        { background: var(--wf-warn-bg);   color: var(--wf-warn-tx); }
.wf-container .wf-workflow-tag--calendar      { background: var(--wf-rose-bg);   color: var(--wf-rose-tx); }
.wf-container .wf-workflow-tag--opportunities { background: var(--wf-ok-bg);     color: var(--wf-ok-tx); }
.wf-container .wf-workflow-tag--budgets       { background: var(--wf-violet-bg); color: var(--wf-violet-tx); }

/* ── Estado: píldora como .pn-status-badge (tinte suave + punto en el color del texto) ── */
.wf-container .wf-status { height: 24px; padding: 0 10px 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--dt-surface-2); color: var(--dt-muted); }
.wf-container .wf-status::before { width: 6px; height: 6px; background: currentColor; }
.wf-container .wf-status--active { background: var(--wf-ok-bg); color: var(--wf-ok-tx); }
.wf-container .wf-status--active::before { background: currentColor; }
.wf-container .wf-status--inactive { background: var(--dt-surface-2); color: var(--dt-muted); }
.wf-container .wf-status--inactive::before { background: currentColor; }
.wf-container .wf-status--draft { background: var(--wf-warn-bg); color: var(--wf-warn-tx); }
.wf-container .wf-status--draft::before { background: currentColor; }

/* ── Pie: texto gris tabular, paginación con botones fantasma de 30 px ── */
.wf-container .wf-footer { padding: 10px 16px; background: var(--dt-surface); border-color: var(--dt-border); border-radius: 0 0 var(--dt-radius-lg, 12px) var(--dt-radius-lg, 12px); font-size: 12.5px; color: var(--dt-muted); font-variant-numeric: tabular-nums; }
.wf-container .wf-page-btn { width: 30px; height: 30px; border-radius: 999px; border: 0; background: transparent; color: var(--dt-muted); transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
.wf-container .wf-page-btn:hover:not(.disabled) { background: var(--dt-hover); border-color: var(--dt-border-strong); color: var(--dt-text); }

/* ── Vacío: tarjeta con línea fina, icono neutro (el trazo lavanda del SVG lo pisa el CSS), sin ilustración decorativa ── */
.wf-container .wf-empty-state { padding: 56px 20px; border-radius: var(--dt-radius-lg, 12px); border: 0; background: var(--dt-surface); }
.wf-container .wf-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 10px; background: var(--dt-surface-2); border: 0; color: var(--dt-muted); }
.wf-container .wf-empty-icon svg { width: 20px; height: 20px; stroke: currentColor; }
.wf-container .wf-empty-state h2 { font-size: 18px; font-weight: 600; letter-spacing: -.015em; color: var(--dt-text); }
.wf-container .wf-empty-state p { font-size: 13.5px; color: var(--dt-muted); max-width: 420px; }
.wf-container .wf-empty-state img { display: none; }

/* ── Esqueleto plano (sin degradado: pulso de opacidad) y barra de scroll gris ── */
.wf-container .wf-skel { background: var(--dt-surface-2); background-size: auto; border-radius: 5px; animation: dui-legacy-modules-workflows-wf-pulse 1.4s ease-in-out infinite; }
@keyframes dui-legacy-modules-workflows-wf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.wf-container .wf-skeleton-tr td { border-bottom-color: var(--dt-border); }
.wf-container .wf-table-scroll::-webkit-scrollbar-thumb { background: var(--dt-border-strong); }

/* ── Foco visible monocromo ── */
.wf-container :is(.wf-btn-create, .wf-tab, .wf-bulk-btn, .wf-page-btn):focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 2px; }

/* ── Móvil: la barra a ancho completo pierde su padding lateral; lo recuperan las pestañas ── */
@media (max-width: 900px) {
  .wf-container .wf-toolbar { padding: 0; }
  .wf-container .wf-tabs { padding: 0 16px; }
  .wf-container .wf-tab { min-height: 44px; }
}

/* ── Solo «Active Workflows»: el listado no trae ejecuciones, % de éxito ni último disparo (quedaban en «—») ── */
.wf-container .wf-stats .wf-stat-card:nth-child(n+2) { display: none; }
.wf-container .wf-stats { grid-template-columns: minmax(0, 320px); }

}
/* end dui-template-style modules/workflows:0 */
/* dui-template-style {"key":"modules/workflows-create:0","bytes":4745,"sha256":"ac5b7b59f09b67ba888c97998ee431e4ddefc83be16097b71834dfeedc08daf0","media":null,"source_sha256":"ac5b7b59f09b67ba888c97998ee431e4ddefc83be16097b71834dfeedc08daf0"} */
@scope (:root:has(template[data-dui-legacy-style="modules/workflows-create:0"])) {

/* ── Hero ── */
.wfc-hero {
	text-align: center;
	padding: 8px 0 28px;
}
.wfc-title {
	font-size: 1.35em;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--text-color);
}
.wfc-subtitle {
	font-size: 0.92em;
	color: var(--text-secondary-color);
	margin: 0;
}

/* ── Grid ── */
.wfc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 14px;
	max-width: 960px;
	margin: 0 auto;
	padding-bottom: 24px;
}

/* ── Card ── */
.wfc-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	background: var(--bg-color);
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	transition: all .2s ease;
	position: relative;
}
.wfc-card:hover {
	border-color: var(--border-strong-color);
	box-shadow: none;
	transform: none;
}
.wfc-card:active {
	transform: none;
	box-shadow: none;
}

/* ── Icon container ── */
.wfc-card__icon {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Color variants — light */
.wfc-card__icon--blue    { background: var(--dt-surface-2); color: #3b82f6; }
.wfc-card__icon--indigo  { background: var(--dt-surface-2); color: #6366f1; }
.wfc-card__icon--amber   { background: var(--dt-surface-2); color: #f59e0b; }
.wfc-card__icon--rose    { background: var(--dt-surface-2); color: #f43f5e; }
.wfc-card__icon--teal    { background: var(--dt-surface-2); color: #14b8a6; }
.wfc-card__icon--green   { background: var(--dt-surface-2); color: #22c55e; }
.wfc-card__icon--purple  { background: var(--dt-surface); color: #a855f7; }

/* Color variants — dark */
[data-bs-theme=dark] .wfc-card__icon--blue    { background: rgba(59,130,246,.12);  color: #60a5fa; }
[data-bs-theme=dark] .wfc-card__icon--indigo  { background: rgba(99,102,241,.12);  color: #818cf8; }
[data-bs-theme=dark] .wfc-card__icon--amber   { background: rgba(245,158,11,.12);  color: #fbbf24; }
[data-bs-theme=dark] .wfc-card__icon--rose    { background: rgba(244,63,94,.12);   color: #fb7185; }
[data-bs-theme=dark] .wfc-card__icon--teal    { background: rgba(20,184,166,.12);  color: #2dd4bf; }
[data-bs-theme=dark] .wfc-card__icon--green   { background: rgba(34,197,94,.12);   color: #4ade80; }
[data-bs-theme=dark] .wfc-card__icon--purple  { background: rgba(168,85,247,.12);  color: #c084fc; }

/* ── Text ── */
.wfc-card__body {
	flex: 1;
	min-width: 0;
}
.wfc-card__title {
	font-size: 0.95em;
	font-weight: 600;
	margin: 0 0 3px;
	color: var(--text-color);
}
.wfc-card__desc {
	font-size: 0.82em;
	color: var(--text-secondary-color);
	margin: 0;
	line-height: 1.4;
}

/* ── Arrow ── */
.wfc-card__arrow {
	flex-shrink: 0;
	color: var(--text-muted-color);
	transition: color .2s, transform .2s;
}
.wfc-card:hover .wfc-card__arrow {
	color: var(--text-color);
	transform: translateX(3px);
}

/* ── Responsive ── */
@media (max-width: 640px) {
	.wfc-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.wfc-card {
		padding: 14px 16px;
	}
	.wfc-card__icon {
		width: 44px;
		height: 44px;
		border-radius: 10px;
	}
	.wfc-card__icon svg {
		width: 22px;
		height: 22px;
	}
}
/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══
   Crear automatización: los 7 cuadrados de icono de color (blue, indigo, amber, rose, teal, green, purple; claro y oscuro) pasan a
   cuadrado neutro de 40 px; la tarjeta, sobre la superficie y sin sombra ni salto al pasar, marca el hover con la línea fuerte. */
#akicontenidonormal .wfc-card { background: var(--dt-surface); border-color: var(--dt-border); transition: border-color .15s ease, background-color .15s ease; }
#akicontenidonormal .wfc-card:hover { border-color: var(--dt-border-strong); background: var(--dt-hover); box-shadow: none; transform: none; }
#akicontenidonormal .wfc-card:active { background: var(--dt-active); box-shadow: none; transform: none; }
#akicontenidonormal .wfc-card .wfc-card__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--dt-surface-2); color: var(--dt-muted); border: 0; }
#akicontenidonormal .wfc-card .wfc-card__icon svg { width: 20px; height: 20px; }
#akicontenidonormal .wfc-card:hover .wfc-card__icon { color: var(--dt-text); }
#akicontenidonormal .wfc-title { font-weight: 400; letter-spacing: -.02em; color: var(--dt-text); }
#akicontenidonormal .wfc-subtitle, #akicontenidonormal .wfc-card__desc { color: var(--dt-muted); }
#akicontenidonormal .wfc-card__title { color: var(--dt-text); }
#akicontenidonormal .wfc-card__arrow { color: var(--dt-faint); }

}
/* end dui-template-style modules/workflows-create:0 */
/* dui-template-style {"key":"modals/add-agent:0","bytes":341,"sha256":"9087143c5076c0d7e154e56a6ecd4ea6fa7dcfd340d5c93547fdbefce9a98a8d","media":null,"source_sha256":"9087143c5076c0d7e154e56a6ecd4ea6fa7dcfd340d5c93547fdbefce9a98a8d"} */
@scope (:root:has(template[data-dui-legacy-style="modals/add-agent:0"])) {

  .input-container.is-errored {
    box-shadow:
            var(--error-color) 0px 0px 0px 1px,
            0 0 0 3px rgba(221,0,0,.1) inset;
  }

  .add-agent-control.is-email-related {
    padding-left: var(--spacing-1);
    border-left: 1px solid #eaeaea;
  }

  .add-agent-control label {
    vertical-align: middle;
  }

}
/* end dui-template-style modals/add-agent:0 */
/* dui-template-style {"key":"modals/add-company:0","bytes":406,"sha256":"831f132c9bce5e21f8fbc4463f6dd012589d23c2f0ffe1e8d2e41c6649cb7a31","media":null,"source_sha256":"831f132c9bce5e21f8fbc4463f6dd012589d23c2f0ffe1e8d2e41c6649cb7a31"} */
@scope (:root:has(template[data-dui-legacy-style="modals/add-company:0"])) {

  .input-container.is-errored {
    box-shadow:
      var(--error-color) 0px 0px 0px 1px,
      0 0 0 3px rgba(221,0,0,.1) inset;
  }
  
  .add-company-control.is-email-related {
    padding-left: var(--spacing-1);
    border-left: 1px solid #eaeaea;
  }
  
  .add-company-control label {
    vertical-align: middle;
  }
  #company-country{
  max-height:120px;
  overflow-y:scroll;
  }

}
/* end dui-template-style modals/add-company:0 */
/* dui-template-style {"key":"modals/add-company:1","bytes":236,"sha256":"6bbcafdbb91dc3ae79e29369aa0ac4759705fd915f177bc915217ef95019f050","media":null,"source_sha256":"6bbcafdbb91dc3ae79e29369aa0ac4759705fd915f177bc915217ef95019f050"} */
@scope (:root:has(template[data-dui-legacy-style="modals/add-company:1"])) {

  .add-company-control {
    display: block;
    margin-bottom: var(--spacing-1);
  }
  
  .add-company-control label {
    display: inline-block;
    font-size: var(--font-size-1);
    margin-bottom: var(--spacing-05);
  }

}
/* end dui-template-style modals/add-company:1 */
/* dui-template-style {"key":"modals/add-cryptoRecharge:0","bytes":784,"sha256":"2d6f87705163eb38b62e09cf049aa4793114667a9fc21d879a3a47699c47b527","media":null,"source_sha256":"2d6f87705163eb38b62e09cf049aa4793114667a9fc21d879a3a47699c47b527"} */
@scope (:root:has(template[data-dui-legacy-style="modals/add-cryptoRecharge:0"])) {

/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══ Recarga con cripto: el botón de pagar
   llevaba un degradado índigo en línea (pasa a CTA en tinta); la etiqueta de la moneda, índigo, a gris. El banner de la moneda conserva
   el color de cada moneda (identifica USDT, BTC, ETH...) pero sin sombra. */
#cr_submit_btn { background: var(--dt-cta) !important; color: var(--dt-cta-fg) !important; border: 0 !important; }
#cr_submit_btn:hover:not(:disabled) { background: var(--dt-cta-hover) !important; border-color: var(--dt-cta-hover) !important; }
#cr_pay_currency_banner { box-shadow: none !important; }
#cr_pay_currency_label { background: var(--dt-surface-2) !important; color: var(--dt-text) !important; border: 0; }

}
/* end dui-template-style modals/add-cryptoRecharge:0 */
/* dui-template-style {"key":"modals/add-department:0","bytes":242,"sha256":"cdd4112812c18b0f3d1a354590eb2f1b003e0407fed4aceb50d5f3a3d018f51e","media":null,"source_sha256":"cdd4112812c18b0f3d1a354590eb2f1b003e0407fed4aceb50d5f3a3d018f51e"} */
@scope (:root:has(template[data-dui-legacy-style="modals/add-department:0"])) {

  .add-department-control {
    display: block;
    margin-bottom: var(--spacing-1);
  }
  
  .add-department-control label {
    display: inline-block;
    font-size: var(--font-size-1);
    margin-bottom: var(--spacing-05);
  }

}
/* end dui-template-style modals/add-department:0 */
/* dui-template-style {"key":"modals/add-lead-note:0","bytes":299,"sha256":"2a616e8436d6b51a70b041ddb87a20b54febb14725a1950a442c21a69fe0801f","media":null,"source_sha256":"2a616e8436d6b51a70b041ddb87a20b54febb14725a1950a442c21a69fe0801f"} */
@scope (:root:has(template[data-dui-legacy-style="modals/add-lead-note:0"])) {

.btn-mini{
padding:4px !important; 
font-size:12px !important;
}
  .add-note-control {
    display: block;
    margin-bottom: var(--spacing-1);
  }
  
  .add-note-control label {
    display: inline-block;
    font-size: var(--font-size-1);
    margin-bottom: var(--spacing-05);
  }

}
/* end dui-template-style modals/add-lead-note:0 */
/* dui-template-style {"key":"modals/add-newpayment:0","bytes":1133,"sha256":"ad8aa7dca0bd16df92ea81119b46c03676d11dd8b7a0e49325e30c3fce82da84","media":null,"source_sha256":"ad8aa7dca0bd16df92ea81119b46c03676d11dd8b7a0e49325e30c3fce82da84"} */
@scope (:root:has(template[data-dui-legacy-style="modals/add-newpayment:0"])) {

/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══ Añadir método de pago: el botón de guardar
   llevaba un degradado índigo en línea; CTA en tinta. */
#cargandoponertarjeta ~ * #submit, #submit.btn-primary { background: var(--dt-cta) !important; color: var(--dt-cta-fg) !important; border: 0 !important; }
#submit.btn-primary:hover:not(:disabled) { background: var(--dt-cta-hover) !important; border-color: var(--dt-cta-hover) !important; }
/* Stripe mounts a short iframe inside a div: input line-height alone cannot center it. */
#formulariopontarjeta #cardholder-name,
#formulariopontarjeta .payment-card-field {
    box-sizing: border-box;
    width: 100%; min-width: 0;
    height: 36px; min-height: 36px;
    padding: 0 10px !important;
    font-size: 13px; line-height: 20px;
    border-radius: 8px !important;
}
#formulariopontarjeta .payment-card-field {
    display: flex;
    align-items: center;
    text-align: left;
}
#formulariopontarjeta .payment-card-field > div {
    width: 100%; min-width: 0;
}
#formulariopontarjeta .row > .col-6 { min-width: 0; }

}
/* end dui-template-style modals/add-newpayment:0 */
/* dui-template-style {"key":"modals/agent-info:0","bytes":4,"sha256":"dba5166ad9db9ba648c1032ebbd34dcd0d085b50023b839ef5c68ca1db93a563","media":null,"source_sha256":"dba5166ad9db9ba648c1032ebbd34dcd0d085b50023b839ef5c68ca1db93a563"} */
@scope (:root:has(template[data-dui-legacy-style="modals/agent-info:0"])) {



}
/* end dui-template-style modals/agent-info:0 */
/* dui-template-style {"key":"modals/chats-createnewchannel:0","bytes":5038,"sha256":"4f2dffc2dd21f6af1836e8e7e12dc33d8d5cfaea6db265e34bc4b1ec53865084","media":null,"source_sha256":"4f2dffc2dd21f6af1836e8e7e12dc33d8d5cfaea6db265e34bc4b1ec53865084"} */
@scope (:root:has(template[data-dui-legacy-style="modals/chats-createnewchannel:0"])) {

.chat-channel-form { height: 100%; padding: 0; margin: 0; color: var(--dt-text); font-family: var(--font-sans); }
.chat-channel-form__body { height: 100%; padding: 20px; display: grid; gap: 18px; }
.chat-channel-form__intro { margin: 0; color: var(--dt-muted); font-size: 13px; }
.chat-channel-field { display: grid; gap: 7px; }
.chat-channel-field > label,
.chat-channel-members__heading label { margin: 0; color: var(--dt-text); font-size: 13px; font-weight: 650; }
.chat-channel-field small,
.chat-channel-members small { display: block; color: var(--dt-muted); font-size: 12px; font-weight: 400; }
.chat-channel-input-wrap { position: relative; }
.chat-channel-input-icon { position: absolute; left: 12px; top: 50%; z-index: 1; transform: translateY(-50%); color: var(--dt-faint); font-weight: 650; }
.chat-channel-input-wrap input { padding-left: 29px !important; }
.chat-channel-field input,
.chat-channel-field textarea {
    width: 100%; border: 0; border-radius: var(--dt-radius);
    background: var(--dt-surface); color: var(--dt-text); font: inherit; outline: none;
}
.chat-channel-field input { min-height: 38px; padding: 8px 11px; }
.chat-channel-field textarea { min-height: 82px; padding: 10px 11px; resize: vertical; }
.chat-channel-field input:focus,
.chat-channel-field textarea:focus { border-color: var(--dt-focus); box-shadow: 0 0 0 3px var(--dt-focus-ring); }
.chat-channel-visibility {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px; border: 0; border-radius: var(--dt-radius-lg); background: var(--dt-app);
}
.chat-channel-visibility__title { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--dt-text); font-weight: 650; cursor: pointer; }
.chat-channel-visibility__title i { font-size: 17px; }
.chat-channel-visibility p { margin: 4px 0 0; max-width: 390px; color: var(--dt-muted); font-size: 12px; line-height: 1.45; }
.chat-channel-switch { position: relative; flex: 0 0 auto; width: 38px; height: 22px; margin: 0; cursor: pointer; }
.chat-channel-switch input { position: absolute; opacity: 0; pointer-events: none; }
.chat-channel-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--dt-border-strong); transition: .16s ease; }
.chat-channel-switch span::after { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; border-radius: 50%; background: var(--dt-surface); box-shadow: 0 1px 3px rgba(0,0,0,.22); transition: .16s ease; }
.chat-channel-switch input:checked + span { background: var(--dt-cta); }
.chat-channel-switch input:checked + span::after { transform: translateX(16px); background: var(--dt-cta-fg); }
.chat-channel-switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--dt-focus-ring); }
.chat-channel-members { display: grid; gap: 10px; }
.chat-channel-members.is-disabled { display: none; }
.chat-channel-members__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.chat-channel-select-all { display: inline-flex !important; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer; }
.chat-channel-select-all input { width: 16px; height: 16px; accent-color: var(--dt-cta); }
.chat-channel-member-list {
    display: flex; max-height: 250px; overflow-y: auto; padding: 5px; flex-direction: column; gap: 2px;
    border: 0;
    border-radius: var(--dt-radius); background: var(--dt-surface); scrollbar-width: thin;
}
.chat-channel-member {
    display: flex !important; width: 100%; box-sizing: border-box; align-items: center; gap: 10px;
    min-height: 48px; padding: 7px 9px;
    border-radius: var(--dt-radius-sm); cursor: pointer;
}
.chat-channel-member:hover { background: var(--dt-hover); }
.chat-channel-member input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--dt-cta); }
.chat-channel-member__avatar {
    position: relative; display: inline-flex; width: 32px; height: 32px; flex: 0 0 32px;
    align-items: center; justify-content: center; overflow: hidden; color: #fff;
    background: var(--chat-member-color, #6b7280); border-radius: 50%;
    font-size: 12px; font-weight: 700; line-height: 1; text-transform: uppercase;
}
.chat-channel-member__avatar img {
    position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
}
.chat-channel-member__name {
    display: block !important; min-width: 0; overflow: hidden; flex: 1 1 auto; color: var(--dt-text);
    font-size: 13px; text-overflow: ellipsis; white-space: nowrap;
}
.chat-channel-member em {
    margin-left: auto; padding: 2px 7px; color: var(--dt-muted); background: var(--dt-app);
    border: 0; border-radius: 999px; font-size: 10px; font-style: normal;
}
.chat-channel-form__actions { gap: 8px; }
@media (max-width: 575.98px) {
    .chat-channel-form__body { padding: 16px; }
    .chat-channel-visibility { align-items: flex-start; }
    .chat-channel-members__heading { display: grid; }
}

}
/* end dui-template-style modals/chats-createnewchannel:0 */
/* dui-template-style {"key":"modals/domainsregister:0","bytes":26837,"sha256":"90851ac3a17255e065e9f7d490fb6cf4695bb030fe9ac955b08e0d82a0575239","media":null,"source_sha256":"497000ce386c1de7dc8a029465731a4d4dba4683205a95c7bc1d6b4ca12a1980"} */
@scope (:root:has(template[data-dui-legacy-style="modals/domainsregister:0"])) {

    /* Scoped domain-registration UI. Header markup is created by 165_classMARC.js. */
    #domainsregister-modal {
        --dreg-accent: var(--dt-cta);
        --dreg-accent-hover: var(--dt-hover);
        --dreg-accent-soft: rgba(37, 99, 235, .1);
        --dreg-accent-border: var(--dt-border);
        --dreg-accent-text: var(--dt-text);
        --dreg-brand: var(--bs-primary, #2563eb);
        --dreg-on-accent: var(--dt-cta);
        --dreg-toggle-track: #dbe4f0;
        --dreg-toggle-border: var(--dt-border);
        --dreg-toggle-knob: var(--dt-muted, #2563eb);
        --dreg-success: var(--dt-success);
        --dreg-warning: var(--dt-warning);
        --dreg-danger: var(--dt-danger);
    }
    [data-bs-theme="dark"] #domainsregister-modal {
        --dreg-accent: var(--dt-cta);
        --dreg-accent-hover: var(--dt-hover);
        --dreg-accent-soft: rgba(96, 165, 250, .13);
        --dreg-accent-border: var(--dt-border);
        --dreg-accent-text: var(--dt-text);
        --dreg-brand: #60a5fa;
        --dreg-on-accent: var(--dt-cta);
        --dreg-toggle-track: #334155;
        --dreg-toggle-border: var(--dt-border);
        --dreg-toggle-knob: #60a5fa;
        --dreg-success: var(--dt-success);
        --dreg-warning: var(--dt-warning);
        --dreg-danger: var(--dt-danger);
    }
    #domainsregister-modal .modal-dialog {
        max-width: 700px;
        width: calc(100% - 24px);
        margin-inline: auto;
    }
    #domainsregister-modal .modal-content {
        background: var(--bg-color);
        color: var(--text-color);
        max-height: min(92vh, 820px);
        overflow-y: auto;
        border-radius: 18px;
        box-shadow: var(--dt-pop-shadow);
        position: relative;
        border: 0;
    }
    .dreg-media { padding: 0; }
    .dreg-hero {
        min-height: 132px;
        position: relative;
        display: grid;
        grid-template-columns: 50px minmax(0, 1fr);
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        padding: 24px 70px 22px 24px;
        background: var(--bg-color);
        border-bottom: 1px solid var(--border-color);
    }
    .dreg-hero__mark {
        width: 50px;
        height: 50px;
        border-radius: 13px;
        display: grid;
        place-items: center;
        color: var(--dreg-accent-text);
        background: var(--dreg-accent-soft);
        border: 0;
    }
    .dreg-hero__mark svg {
        width: 27px;
        height: 27px;
        display: block;
        stroke: currentColor;
        stroke-width: 1.65;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .dreg-hero__content {
        position: relative;
        z-index: 1;
        text-align: left;
        color: var(--text-color);
        max-width: 510px;
        min-width: 0;
    }
    .dreg-hero__eyebrow {
        margin-bottom: 5px;
        color: var(--dreg-accent-text);
        font-size: .67rem;
        font-weight: 760;
        letter-spacing: .085em;
        line-height: 1.2;
        text-transform: uppercase;
    }
    .dreg-hero__claim {
        font-size: clamp(1.2rem, 2.5vw, 1.46rem);
        font-weight: 730;
        line-height: 1.2;
        letter-spacing: -.035em;
        text-wrap: balance;
    }
    .dreg-hero__sub {
        margin-top: 7px;
        font-size: .8rem;
        line-height: 1.45;
        font-weight: 450;
        color: var(--text-muted-color);
        text-wrap: balance;
    }
    @media (max-width: 576px) {
        #domainsregister-modal .modal-dialog { width: calc(100% - 12px); }
        #domainsregister-modal .modal-content { border-radius: 14px; max-height: 96vh; }
        .dreg-hero {
            min-height: 126px;
            grid-template-columns: 42px minmax(0, 1fr);
            gap: 12px;
            padding: 19px 52px 18px 16px;
        }
        .dreg-hero__mark { width: 42px; height: 42px; border-radius: 11px; }
        .dreg-hero__mark svg { width: 23px; height: 23px; }
        .dreg-hero__claim { font-size: 1.18rem; }
        .dreg-hero__sub { font-size: .76rem; }
    }
    .dreg-close {
        position: absolute;
        top: 18px;
        right: 18px;
        z-index: 2;
        border: 0;
        border-radius: 9px;
        width: 34px;
        height: 34px;
        cursor: pointer;
        background: var(--bg-secondary-color);
        color: var(--text-muted-color);
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .15s ease, border-color .15s ease;
    }
    .dreg-close:hover { background: var(--bg-color); border-color: var(--text-muted-color); color: var(--text-color); }
    .dreg-close:focus-visible { outline: 2px solid var(--dreg-brand); outline-offset: 2px; }
    .dreg-close:disabled { opacity: .4; cursor: default; }
    .dreg-body { padding: 18px 24px 22px; font-size: .92rem; }
    .dreg-title { margin: 0 0 4px; font-weight: 720; font-size: 1.15rem; letter-spacing: -.025em; }
    .dreg-title--center { text-align: center; margin-bottom: 8px; }
    @media (max-width: 576px) {
        .dreg-close { top: 14px; right: 14px; }
        .dreg-body { padding: 16px 16px 20px; }
    }

    .dreg-steps {
        display: flex; align-items: center; gap: 6px;
        margin: 0 0 18px;
        padding: 0;
    }
    .dreg-seg {
        flex: 1; height: 3px; border-radius: 9999px;
        background: var(--border-color); opacity: .55;
        transition: background .2s, opacity .2s, transform .2s;
    }
    .dreg-seg.is-done { background: var(--dreg-brand); opacity: .5; }
    .dreg-seg.is-current { background: var(--dreg-accent); opacity: 1; transform: scaleY(1.35); }

    .dreg-pane { display: none; }
    .dreg-pane.is-active { display: block; }

    /* Service value cards */
    .dreg-activate {
        margin: 0 0 16px;
        padding: 0;
        border: 0;
        border-radius: 12px;
        overflow: hidden;
        background: var(--bg-color);
    }
    .dreg-activate__label {
        margin: 0;
        padding: 10px 14px;
        border-bottom: 1px solid var(--border-color);
        background: var(--bg-secondary-color);
        font-size: .68rem;
        font-weight: 720;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--text-muted-color);
    }
    .dreg-benefits {
        list-style: none; margin: 0; padding: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
    }
    .dreg-benefit {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        min-height: 67px;
        padding: 11px 14px;
        font-size: .8rem;
        line-height: 1.3;
        color: var(--text-color);
    }
    .dreg-benefits[data-count="3"] .dreg-benefit:nth-child(-n + 2),
    .dreg-benefits[data-count="4"] .dreg-benefit:nth-child(-n + 2) {
        border-bottom: 1px solid var(--border-color);
    }
    .dreg-benefits[data-count="1"] .dreg-benefit,
    .dreg-benefits[data-count="3"] .dreg-benefit:last-child {
        grid-column: 1 / -1;
    }
    .dreg-benefit:nth-child(even) { border-left: 1px solid var(--border-color); }
    .dreg-benefit__icon,
    .dreg-svc__icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        display: grid;
        place-items: center;
        color: var(--dreg-brand);
        background: rgba(0, 111, 190, .08);
        border: 0;
    }
    [data-bs-theme="dark"] .dreg-benefit__icon,
    [data-bs-theme="dark"] .dreg-svc__icon {
        background: rgba(87, 181, 245, .1);
        border-color: rgba(87, 181, 245, .2);
    }
    .dreg-benefit__icon svg,
    .dreg-svc__icon svg {
        display: block;
        width: 18px;
        height: 18px;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }
    .dreg-benefit__copy { min-width: 0; }
    .dreg-benefit__copy strong {
        display: block;
        font-size: .8rem;
        font-weight: 650;
        color: var(--text-color);
    }
    .dreg-benefit__copy small {
        display: block;
        margin-top: 3px;
        color: var(--text-muted-color);
        font-size: .69rem;
        font-weight: 440;
        line-height: 1.35;
    }
    .dreg-foot {
        margin: 8px 0 0; color: var(--text-muted-color);
        font-size: 0.7rem; line-height: 1.3;
    }
    .dreg-activate .dreg-foot { margin: 0; padding: 0 14px 10px; }
    .dreg-foot--flat { margin: 2px 0 10px; text-align: left; }
    @media (max-width: 520px) {
        .dreg-benefits { grid-template-columns: 1fr; }
        .dreg-benefit:nth-child(n) { border-left: 0; border-bottom: 1px solid var(--border-color); }
        .dreg-benefit:last-child { border-bottom: 0; }
    }

    .dreg-search-hint {
        margin: 0 0 8px;
        font-size: .86rem;
        font-weight: 650;
        color: var(--text-color);
        letter-spacing: -.015em;
    }

    .dreg-search {
        display: flex;
        align-items: stretch;
        min-height: 48px;
        border-radius: 11px;
        overflow: hidden;
        background: var(--bg-color);
        border: 0;
        transition: border-color .15s, box-shadow .15s;
    }
    .dreg-search:focus-within {
        border-color: var(--dreg-accent);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
    }
    [data-bs-theme="dark"] .dreg-search:focus-within { box-shadow: 0 0 0 3px rgba(96, 165, 250, .2); }
    .dreg-search.is-busy { border-color: var(--dreg-accent); }
    .dreg-field { flex: 1; min-width: 0; position: relative; background: transparent; }
    .dreg-input, .dreg-ghost {
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: 46px;
        padding: 13px 14px;
        font-family: inherit;
        font-size: .95rem;
        font-weight: 450;
        line-height: 20px;
        letter-spacing: normal;
    }
    #domainsregister-modal .dreg-input {
        position: relative; z-index: 1; width: 100%;
        height: 46px !important;
        box-sizing: border-box !important;
        padding: 13px 14px !important;
        border: 0 !important;
        outline: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        color: var(--text-color) !important;
        font-family: inherit !important;
        font-size: .95rem !important;
        font-weight: 450 !important;
        line-height: 20px !important;
        letter-spacing: normal !important;
        appearance: none;
    }
    .dreg-input::placeholder { color: var(--text-muted-color); }
    .dreg-ghost {
        position: absolute; inset: 0; z-index: 0;
        white-space: pre; overflow: hidden; pointer-events: none; color: transparent;
    }
    .dreg-ghost__tld {
        color: var(--text-muted-color);
        opacity: .4;
        font: inherit;
        line-height: inherit;
        letter-spacing: inherit;
    }
    .dreg-btnsearch {
        border: 0;
        background: var(--dreg-accent);
        color: var(--dreg-on-accent);
        padding: 0 20px;
        cursor: pointer;
        font-size: .88rem;
        font-weight: 720;
        font-family: inherit;
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
        transition: background .15s;
    }
    .dreg-btnsearch:hover { background: var(--dreg-accent-hover); color: var(--dreg-on-accent); }
    .dreg-btnsearch:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
    .dreg-btnsearch:disabled { opacity: .75; cursor: default; }

    .dreg-progress { height: 2px; margin: 0 2px; border-radius: 2px; overflow: hidden; opacity: 0; }
    .dreg-progress.is-on { opacity: 1; background: var(--dreg-accent-soft); }
    .dreg-progress.is-on::after {
        content: ''; display: block; height: 100%; width: 40%; border-radius: 2px;
        background: var(--dreg-accent); animation: dui-legacy-modals-domainsregister-dregSlide 1.1s ease-in-out infinite;
    }
    @keyframes dui-legacy-modals-domainsregister-dregSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
    .dreg-search-status:empty { display: none; }
    .dreg-search-status .dreg-note { margin-top: 10px; }

    .dreg-ai {
        display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
        margin-top: 11px; font-size: .82rem; font-weight: 620; color: var(--dreg-brand);
    }
    .dreg-ai__icon {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    #domainsregister-modal .dreg-ai input[type="checkbox"] {
        appearance: none !important; -webkit-appearance: none !important; cursor: pointer; margin: 0 !important;
        width: 36px !important; height: 20px !important; border-radius: 9999px !important; position: relative;
        box-sizing: border-box !important;
        padding: 0 !important;
        border: 1px solid var(--dreg-toggle-border) !important;
        background: var(--dreg-toggle-track) !important;
        box-shadow: none !important;
        transition: background .15s, border-color .15s;
        flex-shrink: 0;
    }
    #domainsregister-modal .dreg-ai input[type="checkbox"]::after {
        content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
        border-radius: 50%; background: var(--dreg-toggle-knob) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .24);
        transition: transform .15s, background .15s;
    }
    #domainsregister-modal .dreg-ai input[type="checkbox"]:checked {
        background: var(--dreg-accent) !important;
        border-color: var(--dreg-accent) !important;
    }
    #domainsregister-modal .dreg-ai input[type="checkbox"]:focus-visible {
        outline: 2px solid var(--dreg-accent-text) !important;
        outline-offset: 3px !important;
        box-shadow: none !important;
    }
    #domainsregister-modal .dreg-ai input[type="checkbox"]:checked::after {
        transform: translateX(16px) !important;
        background: var(--dt-surface) !important;
    }
    [data-bs-theme="dark"] #domainsregister-modal .dreg-ai input[type="checkbox"]:checked::after {
        box-shadow: 0 0 0 1px rgba(7, 17, 27, .72), 0 1px 2px rgba(0, 0, 0, .24);
    }
    .dreg-ai__hint { font-weight: 400; color: var(--text-muted-color); font-size: 0.78rem; }
    #domainsregister-modal .dreg-inputai {
        display: none; position: relative; z-index: 1; width: 100%;
        border: 0 !important;
        outline: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        color: var(--text-color) !important;
        resize: none;
        font-size: 0.95rem; font-family: inherit; font-weight: 400;
        padding: 11px 13px; line-height: 1.45;
    }
    #domainsregister-modal .dreg-input:focus,
    #domainsregister-modal .dreg-inputai:focus {
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    .dreg-inputai::placeholder { color: var(--text-muted-color); }
    #domainsregister-modal .dreg-search.is-ai .dreg-input { display: none; }
    #domainsregister-modal .dreg-search.is-ai .dreg-ghost { display: none; }
    #domainsregister-modal .dreg-search.is-ai .dreg-inputai { display: block; }
    .dreg-ai-examples {
        margin-top: 10px;
        padding: 11px 12px;
        border-radius: 10px;
        background: var(--bg-secondary-color);
        border: 0;
        font-size: .78rem;
        color: var(--text-muted-color);
        line-height: 1.45;
    }
    .dreg-ai-examples ul { margin: 4px 0 0; padding-left: 16px; }
    .dreg-ai-examples li { margin: 3px 0; }

    /* Step 2: two-column domain table. */
    .dreg-stephead { margin-bottom: 14px; }
    .dreg-stephead .dreg-title { margin-bottom: 4px; }
    .dreg-stephead__sub {
        margin: 0;
        color: var(--text-muted-color);
        font-size: .78rem;
        line-height: 1.45;
    }
    .dreg-result { display: none; margin-top: 0; }
    .dreg-result.is-visible { display: block; }
    .dreg-q {
        margin-bottom: 8px;
        color: var(--text-muted-color);
        font-size: .68rem;
        font-weight: 720;
        letter-spacing: .065em;
        text-transform: uppercase;
    }
    .dreg-q .dreg-req { color: var(--dreg-danger); }
    .dreg-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        width: 100%;
        border: 0;
        border-radius: 11px;
        overflow: hidden;
        background: var(--bg-color);
    }
    .dreg-opt {
        display: grid !important;
        grid-template-columns: 16px minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 10px;
        width: 100%;
        margin: 0; cursor: pointer; border: 0; border-radius: 0;
        min-width: 0;
        min-height: 68px;
        background: var(--bg-color); color: var(--text-color);
        padding: 13px 14px; line-height: 1.25;
        transition: background .15s, box-shadow .15s;
    }
    .dreg-opt:nth-child(odd) { border-right: 1px solid var(--border-color); }
    .dreg-opt { border-bottom: 1px solid var(--border-color); }
    .dreg-list--even .dreg-opt:nth-last-child(-n + 2),
    .dreg-list--odd .dreg-opt:last-child { border-bottom: 0; }
    .dreg-opt:hover { background: rgba(15, 23, 42, .035); }
    .dreg-opt:has(input:checked) {
        background: var(--bg-secondary-color);
        box-shadow: none;
    }
    [data-bs-theme="dark"] .dreg-opt:hover { background: rgba(255, 255, 255, .035); }
    [data-bs-theme="dark"] .dreg-opt:has(input:checked) { background: var(--bg-secondary-color); }
    .dreg-opt:has(input:focus-visible) { outline: 2px solid var(--dreg-brand); outline-offset: -3px; }
    .dreg-opt input[type=radio] {
        flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--dreg-brand); cursor: pointer;
    }
    .dreg-opt--off { cursor: default; opacity: .62; }
    .dreg-opt--off:hover { background: var(--bg-color); }
    .dreg-opt__name {
        display: block;
        min-width: 0;
        width: 100%;
        font-size: 1rem; font-weight: 600; letter-spacing: -0.3px;
        color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .dreg-opt__tld { color: var(--dreg-brand); font-weight: 700; }
    .dreg-opt__price {
        min-width: max-content;
        font-weight: 700; white-space: nowrap; text-align: right; font-size: 0.9rem;
    }
    .dreg-opt__price small {
        display: block; font-size: 0.68rem; font-weight: 500; color: var(--text-muted-color);
    }
    .dreg-badge {
        display: inline-flex; align-items: center; flex-shrink: 0;
        padding: 3px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 600;
    }
    .dreg-badge--taken { background: rgba(239, 68, 68, .13); color: var(--dreg-danger); }
    .dreg-badge--warn  { background: rgba(245, 158, 11, .15); color: var(--dreg-warning); }
    .dreg-actions { margin-top: 16px; }
    .dreg-actions .btn {
        min-height: 42px;
        border-radius: 9px !important;
        padding: 9px 22px;
        font-weight: 650;
        display: block; margin-left: auto; margin-right: auto;
    }
    #domainsregister-modal .dreg-actions .btn-primary {
        border-color: var(--dreg-accent) !important;
        background: var(--dreg-accent) !important;
        color: var(--dreg-on-accent) !important;
        box-shadow: none !important;
    }
    #domainsregister-modal .dreg-actions .btn-primary:hover {
        border-color: var(--dreg-accent-hover) !important;
        background: var(--dreg-accent-hover) !important;
    }
    #domainsregister-modal .dreg-actions .btn-primary:disabled {
        opacity: .48;
        cursor: not-allowed;
    }
    .dreg-actions--split { display: flex; gap: 10px; justify-content: center; }
    .dreg-actions--split .btn { display: inline-flex; align-items: center; justify-content: center; margin: 0; }
    .dreg-btnback {
        background: var(--bg-secondary-color); border: 0;
        color: var(--text-color); cursor: pointer;
    }
    .dreg-btnback:hover { border-color: var(--text-muted-color); border-color: color-mix(in srgb, var(--text-color) 30%, var(--border-color)); }
    .dreg-actions .btn:focus-visible { outline: 2px solid var(--dreg-brand); outline-offset: 2px; }
    @media (max-width: 560px) {
        .dreg-list { grid-template-columns: 1fr; }
        .dreg-list .dreg-opt:nth-child(n) { min-height: 62px; border-right: 0; border-bottom: 1px solid var(--border-color); }
        .dreg-list .dreg-opt:last-child { border-bottom: 0; }
    }

    .dreg-confirm__domain {
        text-align: center; font-size: 1.4rem; font-weight: 760; letter-spacing: -.04em;
        overflow-wrap: anywhere; margin: 4px 0 2px;
    }
    .dreg-confirm__price { text-align: center; color: var(--text-secondary-color); font-size: 0.88rem; margin: 0 0 12px; }
    .dreg-confirm__price strong { color: var(--dreg-brand); font-weight: 700; font-size: 1rem; }

    .dreg-svcpick {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 0 0 12px;
    }
    .dreg-svcpick__label {
        font-size: 0.72rem; font-weight: 700; letter-spacing: .04em;
        text-transform: uppercase; color: var(--text-muted-color); margin-bottom: 2px;
        grid-column: 1 / -1;
    }
    .dreg-svc {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        min-height: 70px;
        padding: 11px 12px;
        border-radius: 11px;
        cursor: pointer;
        border: 0;
        background: var(--bg-secondary-color);
        font-size: .84rem;
        font-weight: 500;
        margin: 0;
        transition: border-color .15s, background .15s;
    }
    .dreg-svc:hover { border-color: var(--text-muted-color); }
    .dreg-svc:has(input:checked) {
        border-color: var(--dreg-brand); background: rgba(0, 111, 190, .075);
    }
    [data-bs-theme="dark"] .dreg-svc:has(input:checked) { background: rgba(87, 181, 245, .08); }
    .dreg-svc:has(input:focus-visible) {
        outline: 2px solid var(--dreg-brand);
        outline-offset: 2px;
    }
    .dreg-svc input {
        grid-column: 3;
        grid-row: 1;
        accent-color: var(--dreg-brand);
        width: 17px;
        height: 17px;
        margin: 0;
        flex-shrink: 0;
    }
    .dreg-svc__icon { grid-column: 1; grid-row: 1; }
    .dreg-svc__copy { grid-column: 2; grid-row: 1; min-width: 0; line-height: 1.25; }
    .dreg-svc__copy strong { display: block; font-size: .84rem; font-weight: 650; color: var(--text-color); }
    .dreg-svc__copy small {
        display: block;
        margin-top: 3px;
        color: var(--text-muted-color);
        font-size: .7rem;
        font-weight: 450;
        overflow-wrap: anywhere;
    }
    .dreg-svc--locked { cursor: default; opacity: .9; }
    .dreg-svc--locked input { pointer-events: none; }
    @media (max-width: 560px) {
        .dreg-svcpick { grid-template-columns: 1fr; }
    }

    .dreg-svclist { list-style: none; margin: 0 0 4px; padding: 0; }
    .dreg-svclist li {
        display: flex; align-items: center; gap: 9px; margin: 6px 0;
        background: var(--bg-secondary-color); border: 0;
        border-radius: 12px; padding: 9px 12px; font-size: 0.85rem; line-height: 1.4;
    }
    .dreg-svclist li i { color: var(--dreg-brand); font-size: 1rem; flex-shrink: 0; }

    .dreg-note {
        padding: 12px 14px; border-radius: 12px; font-size: 0.88rem; line-height: 1.5;
    }
    .dreg-note--info    { background: rgba(0, 111, 190, .08); border: 0; }
    .dreg-note--error   { background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .25); }
    .dreg-note--success { background: rgba(34, 197, 94, .08); border: 1px solid rgba(34, 197, 94, .25); }
    .dreg-note--warn    { background: rgba(245, 158, 11, .09); border: 0; font-size: 0.8rem; margin-top: 10px; }
    .dreg-note--warn i  { color: var(--dreg-warning); }

    .dreg-spinbox {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        padding: 26px 0 18px; color: var(--text-secondary-color); font-size: 0.9rem;
    }
    .dreg-spinbox i { font-size: 1.2rem; color: var(--dreg-brand); }
    .dreg-done__head { text-align: center; margin: 2px 0 12px; }
    .dreg-done__bigico { font-size: 40px; color: var(--dreg-success); display: block; margin: 0 auto 6px; }
    .dreg-done__bigico.is-pend { color: var(--dreg-warning); }
    .dreg-done__title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.3px; }
    .dreg-done__sub { color: var(--text-secondary-color); font-size: 0.85rem; overflow-wrap: anywhere; }
    .dreg-check {
        display: flex; align-items: center; gap: 9px; margin: 6px 0;
        background: var(--bg-secondary-color); border: 0;
        border-radius: 12px; padding: 9px 12px; font-size: 0.85rem; line-height: 1.4;
    }
    .dreg-check__ico { font-size: 1.05rem; flex-shrink: 0; }
    .dreg-check__ico--ok   { color: var(--dreg-success); }
    .dreg-check__ico--pend { color: var(--dreg-warning); }
    .dreg-check__ico--err  { color: var(--dreg-danger); }
    .dreg-check__txt { flex: 1; min-width: 0; }
    .dreg-check__txt small { display: block; color: var(--text-muted-color); font-size: 0.72rem; overflow-wrap: anywhere; }
    .dreg-done__foot { text-align: center; color: var(--text-muted-color); font-size: 0.78rem; margin-top: 8px; }

    @keyframes dregSpin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) {
        .dreg-progress.is-on::after { animation-duration: 2s; }
        .dreg-spinbox i { animation-duration: 2s !important; }
    }
    /* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══ Registro de dominios: el diálogo
       sin sombra (línea fina), el buscador sin anillo azul al enfocar y el pomo del interruptor apagado en gris (antes azul); encendido,
       el pomo usa el color de primer plano del CTA para leerse también en oscuro. */
    #domainsregister-modal .modal-content { box-shadow: none; }
    .dreg-search:focus-within, [data-bs-theme="dark"] .dreg-search:focus-within { box-shadow: none; border-color: var(--dt-focus); }
    #domainsregister-modal .dreg-ai input[type="checkbox"]:checked::after { background: var(--dt-cta-fg) !important; }
    [data-bs-theme="dark"] #domainsregister-modal .dreg-ai input[type="checkbox"]:checked::after { box-shadow: none; }

}
/* end dui-template-style modals/domainsregister:0 */
/* dui-template-style {"key":"modals/edit-lead-note:0","bytes":420,"sha256":"308a699711b97e98165fef7d05ef859b3fa9ad269846c1eda6ec68998908ccb6","media":null,"source_sha256":"308a699711b97e98165fef7d05ef859b3fa9ad269846c1eda6ec68998908ccb6"} */
@scope (:root:has(template[data-dui-legacy-style="modals/edit-lead-note:0"])) {

  .edit-note-container textarea {
    font-family: 'Gotham Rounded Book', Arial, sans-serif;
    font-size: var(--font-size-1);
    width: 100%;
    max-width: 100%;
    min-width: 100%; 
    height: 160px;
    padding: var(--spacing-05);
    border: 0;
    border-radius: 3px;
    box-shadow: none;
    outline: 0;
  }
  
  #delete-note-modal-submit {
    padding-top: 0;
    padding-bottom: 0;
  }

}
/* end dui-template-style modals/edit-lead-note:0 */
/* dui-template-style {"key":"modals/hrfichar:0","bytes":127,"sha256":"ffa9af382a09fa2506832fa1f503338ecc69d52b20e40505f5939c55b2359d4f","media":null,"source_sha256":"ffa9af382a09fa2506832fa1f503338ecc69d52b20e40505f5939c55b2359d4f"} */
@scope (:root:has(template[data-dui-legacy-style="modals/hrfichar:0"])) {

    #video,#canvas {
        width: 100%;
        height: 100%;
        text-align: center;
        margin: 0px;
    }

}
/* end dui-template-style modals/hrfichar:0 */
/* dui-template-style {"key":"modals/hrshifts:0","bytes":244,"sha256":"059e32fa75de87f4fe09e2e3724dfb67720eea4f4815dcca6b83052cbcc42a86","media":null,"source_sha256":"059e32fa75de87f4fe09e2e3724dfb67720eea4f4815dcca6b83052cbcc42a86"} */
@scope (:root:has(template[data-dui-legacy-style="modals/hrshifts:0"])) {

  .aligncenter{
    align-content: center;
  }
.valoresmixtosinput::placeholder{
  color: var(--falcon-secondary)
}
.select2-selection--multiple[aria-disabled="true"]{
  background-color: unset !important;
  border: 0 !important;
}

}
/* end dui-template-style modals/hrshifts:0 */
/* dui-template-style {"key":"modals/identityassign:0","bytes":6151,"sha256":"bc44addeed2c36b661f715cc2371b4d1833e2f679c2f9c4140832994c6184a93","media":null,"source_sha256":"bc44addeed2c36b661f715cc2371b4d1833e2f679c2f9c4140832994c6184a93"} */
@scope (:root:has(template[data-dui-legacy-style="modals/identityassign:0"])) {

  /* scoped al modal propio: overflow visible para que el desplegable Choices del pais no quede cortado */
  #identityassign-modal .modal-content{
    overflow:visible !important;
  }
  /* FIX VISIBILIDAD: con body.modal-open la pagina no scrollea y .modal-content esta en
     overflow:visible (necesario para Choices), asi que NO habia scrollbar interno: todo lo
     que quedaba por debajo del viewport (direccion, documentos) era literalmente inalcanzable.
     El cuerpo del modal scrollea por si mismo; el desplegable del pais abre dentro del area
     scrollable (aceptable: con pais fijo del numero ni siquiera hay busqueda). */
  #pn3_wrap{ max-height:calc(100vh - 160px); overflow-y:auto; overscroll-behavior:contain; }
  /* ── Registro de identidad (pn3-): mismo lenguaje visual que control-phonenumbers y pn2 ── */
  /* cabecera-tabla con los datos del numero: bordes suaves y tipografia consistente */
  #pn3_wrap .pn3-cab-card{ background:var(--module-color); border:0; border-radius:12px; overflow:hidden; overflow-x:auto; margin-bottom:16px; }
  .pn3-cab-table{ width:100%; border-collapse:collapse; margin:0; color:var(--text-color); }
  .pn3-cab-table thead tr{ background:var(--bg-secondary-color); }
  .pn3-cab-table th{ padding:10px 16px; text-align:left; font-weight:600; font-size:.72rem; color:var(--text-secondary-color); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; border:none; border-bottom:1px solid var(--border-color); }
  .pn3-cab-table td{ padding:14px 16px; vertical-align:middle; border:none; font-size:.9rem; }
  /* layout 2 columnas: stepper a la izquierda, panel de requisitos a la derecha (apiladas en movil) */
  .pn3-cols{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start; }
  @media (max-width:900px){ .pn3-cols{ grid-template-columns:1fr; } }
  /* panel Requirements sticky en desktop (pegado dentro del scroll del propio modal) */
  @media (min-width:901px){ #pn3_lateral{ position:sticky; top:0; } }
  .pn3-req-panel{ background:var(--bg-secondary-color); border:0; border-radius:12px; padding:16px; font-size:.88rem; }
  .pn3-req-panel .pn3-req-titulo{ font-weight:700; display:flex; align-items:center; gap:6px; margin-bottom:8px; }
  .pn3-req-msg{ background:var(--module-color); border:1px dashed var(--border-color); border-radius:10px; padding:10px 12px; margin-bottom:10px; max-height:320px; overflow:auto; }
  #pn3_wrap .form-control, #pn3_wrap .form-select{
    background:var(--module-color); border:0; color:var(--text-color); border-radius:10px;
  }
  #pn3_wrap .form-control:focus, #pn3_wrap .form-select:focus{
    border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15);
  }
  .pn3-form-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-bottom:14px; }
  @media (max-width:600px){ .pn3-form-grid{ grid-template-columns:1fr; } }
  /* ── STEPPER: 3 pasos siempre visibles como tarjetas numeradas ── */
  .pn3-step{ background:var(--module-color); border:0; border-radius:12px; margin-bottom:12px; scroll-margin-top:8px; transition:border-color .2s; }
  .pn3-step-cab{ display:flex; align-items:center; gap:10px; padding:13px 16px; }
  .pn3-step.pn3-clicable .pn3-step-cab{ cursor:pointer; }
  .pn3-step-num{ width:28px; height:28px; min-width:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; background:var(--bg-secondary-color); color:var(--text-secondary-color); border:0; }
  .pn3-step-activo{ border-color:rgba(59,130,246,.55); }
  .pn3-step-activo > .pn3-step-cab .pn3-step-num{ background:#3b82f6; border-color:#3b82f6; color:var(--dt-on-color); }
  .pn3-step-hecho > .pn3-step-cab .pn3-step-num{ background:rgba(34,197,94,.15); border-color:#22c55e; color:#22c55e; }
  .pn3-step-titulo{ font-weight:700; color:var(--text-color); font-size:.95rem; }
  .pn3-step-pend > .pn3-step-cab .pn3-step-titulo{ color:var(--text-secondary-color); font-weight:600; }
  .pn3-step-resumen{ margin-left:auto; font-size:.85rem; color:var(--text-secondary-color); max-width:50%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pn3-step-body{ padding:2px 16px 16px 54px; }
  @media (max-width:600px){ .pn3-step-body{ padding-left:16px; } }
  .pn3-doc-row{ background:var(--module-color); display:flex; align-items:center; gap:10px; padding:12px 14px; border:0; border-radius:12px; margin-bottom:8px; flex-wrap:wrap; }
  .pn3-bloque-doc{ margin-bottom:14px; }
  .pn3-bloque-doc .pn3-bloque-cab{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-weight:600; }
  .pn3-cnt{ background:var(--bg-secondary-color); color:var(--text-secondary-color); padding:2px 10px; border-radius:9999px; font-size:.75rem; font-weight:600; }
  .pn3-cnt.pn3-cnt-ok{ background:rgba(34,197,94,.15); color:#22c55e; }
  /* badges de estado con punto, como .pn-status-badge del modulo */
  .pn3-status-badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:9999px; font-size:.78rem; font-weight:500; white-space:nowrap; }
  .pn3-status-dot{ width:6px; height:6px; border-radius:50%; display:inline-block; }
  .pn3-badge-amber{ background:rgba(245,158,11,0.15); color:#f59e0b; }
  .pn3-badge-amber .pn3-status-dot{ background:#f59e0b; }
  .pn3-badge-green{ background:rgba(34,197,94,0.15); color:#22c55e; }
  .pn3-badge-green .pn3-status-dot{ background:#22c55e; }
  .pn3-badge-red{ background:rgba(220,38,38,0.12); color:#dc2626; }
  .pn3-badge-red .pn3-status-dot{ background:#dc2626; }
  /* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══ Asignar identidad: foco con la
     línea de foco (sin anillo azul) y paso activo en tinta (antes azul); el verde del paso hecho se queda (estado). */
  #pn3_wrap .form-control:focus, #pn3_wrap .form-select:focus{ border-color: var(--dt-focus); box-shadow: none; }
  .pn3-step-activo{ border-color: var(--dt-border-strong); }
  .pn3-step-activo > .pn3-step-cab .pn3-step-num{ background: var(--dt-cta); border-color: var(--dt-cta); color: var(--dt-cta-fg); }

}
/* end dui-template-style modals/identityassign:0 */
/* dui-template-style {"key":"modals/newaiagent-modal:0","bytes":10429,"sha256":"bfbde35c6d192fe59fc770e4eafed069c350b53bb56e6101cfcafaa82e742a72","media":null,"source_sha256":"822cc14e03eb25aa4ea7b1a29db00aa0471cb72d5f1f1fab0bba5a7efb69f427"} */
@scope (:root:has(template[data-dui-legacy-style="modals/newaiagent-modal:0"])) {

#newaiagent { color: var(--dt-text); }
#newaiagent *, #newaiagent *::before, #newaiagent *::after { box-sizing: border-box; }
#newaiagent > .modal-dialog { max-width: 1180px; }
#newaiagent > .modal-dialog > .modal-content { height: min(860px, calc(100dvh - 32px)); background: var(--dt-surface); overflow: hidden; }
#newaiagent .modal-header { padding: 18px 24px; border-bottom: 1px solid var(--dt-border); flex-shrink: 0; }
#newaiagent .modal-header-title { font-size: 18px; font-weight: 650; }
#newaiagent .newaiagent-body { min-height: 0; display: flex; flex: 1; padding: 0; overflow: hidden; }
#newaiagent .nai-form { min-width: 0; min-height: 0; width: 100%; display: flex; flex-direction: column; margin: 0; }
#newaiagent [hidden] { display: none !important; }
#newaiagent button, #newaiagent input, #newaiagent textarea { font: inherit; }
#newaiagent button { cursor: pointer; }
#newaiagent button:disabled { cursor: wait; opacity: .6; }
#newaiagent button:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 3px; }
#newaiagent .nai-modes { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 24px; border-bottom: 1px solid var(--dt-border); flex-shrink: 0; }
#newaiagent .nai-mode, #newaiagent .nai-filter, #newaiagent .nai-tab { border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--dt-muted); padding: 9px 12px; line-height: 1.4; white-space: normal; }
#newaiagent .nai-mode { display: flex; align-items: center; gap: 8px; text-align: start; }
#newaiagent .nai-mode[aria-pressed="true"], #newaiagent .nai-tab[aria-selected="true"] { background: var(--dt-surface-2); color: var(--dt-text); border-color: var(--dt-border); }
#newaiagent .nai-count { font-size: 11px; color: var(--dt-muted); }
#newaiagent .nai-workspace { display: grid; grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr); min-height: 0; flex: 1; }
#newaiagent .nai-workspace[data-mode="scratch"] { grid-template-columns: minmax(0, 1fr); }
#newaiagent .nai-gallery { display: flex; flex-direction: column; min-height: 0; border-inline-end: 1px solid var(--dt-border); }
#newaiagent .nai-search-tools { padding: 18px; border-bottom: 1px solid var(--dt-border); }
#newaiagent .nai-search { position: relative; }
#newaiagent .nai-search > i { position: absolute; inset-inline-start: 12px; top: 12px; color: var(--dt-muted); pointer-events: none; }
#newaiagent .nai-search input { width: 100%; padding: 10px 12px; padding-inline-start: 36px; border: 1px solid var(--dt-border-strong); border-radius: 8px; color: var(--dt-text); background: var(--dt-surface); }
#newaiagent :is(input,textarea)::placeholder { color: var(--dt-muted); }
#newaiagent :is(input,textarea):focus { outline: none; border-color: var(--dt-focus); box-shadow: none; }
#newaiagent .nai-filters { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 10px; }
#newaiagent .nai-filter { padding: 6px 9px; font-size: 12px; }
#newaiagent .nai-filter[aria-pressed="true"] { color: var(--dt-cta-fg); background: var(--dt-cta); }
#newaiagent .nai-grid { padding: 12px; overflow-y: auto; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; scrollbar-gutter: stable; }
#newaiagent .nai-card { min-width: 0; display: flex; flex-direction: column; gap: 9px; text-align: start; color: var(--dt-text); background: var(--dt-surface); border: 1px solid var(--dt-border); border-radius: 12px; padding: 14px; }
#newaiagent .nai-card:hover { background: var(--dt-hover); }
#newaiagent .nai-card[aria-pressed="true"] { background: var(--dt-surface-2); border-color: var(--dt-border-strong); }
#newaiagent .nai-card-head { display: flex; align-items: flex-start; gap: 8px; }
#newaiagent .nai-card strong { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
#newaiagent .nai-card-desc { font-size: 11px; color: var(--dt-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#newaiagent .nai-card-tools { margin-top: auto; font-size: 11px; line-height: 1.5; color: var(--dt-muted); }
#newaiagent .nai-orb { width: 25px; height: 25px; flex-shrink: 0; border-radius: 50%; box-shadow: inset -3px -4px 6px #0002, inset 2px 2px 5px #fff6; }
#newaiagent .nai-detail { min-width: 0; overflow-y: auto; padding: 24px; scrollbar-gutter: stable; }
#newaiagent .nai-workspace[data-mode="scratch"] .nai-detail { width: 100%; max-width: 840px; margin: 0 auto; }
#newaiagent .nai-summary { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
#newaiagent .nai-summary > .nai-orb { width: 48px; height: 48px; }
#newaiagent .nai-scratch-icon { width: 48px; height: 48px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--dt-border); border-radius: 12px; font-size: 22px; background: var(--dt-surface-2); }
#newaiagent .nai-summary h3 { font-size: 18px; line-height: 1.4; margin: 0 0 7px; overflow-wrap: anywhere; }
#newaiagent .nai-summary p { font-size: 12px; line-height: 1.65; color: var(--dt-muted); margin: 0; overflow-wrap: anywhere; }
#newaiagent .nai-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 20px; }
#newaiagent .nai-tab { font-size: 12px; }
#newaiagent .nai-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
#newaiagent .nai-hint { font-size: 12px; line-height: 1.6; color: var(--dt-muted); margin: 0 0 10px; }
#newaiagent textarea { display: block; width: 100%; min-height: 230px; resize: vertical; padding: 14px; border: 1px solid var(--dt-border-strong); border-radius: 10px; background: var(--dt-surface); color: var(--dt-text); line-height: 1.7; font-size: 13px; }
#newaiagent .nai-input-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--dt-muted); font-size: 11px; }
#newaiagent .nai-welcome { margin-top: 18px; }
#newaiagent .nai-welcome summary { cursor: pointer; font-size: 13px; font-weight: 600; }
#newaiagent .nai-welcome textarea { min-height: 90px; margin-top: 12px; }
#newaiagent .nai-info { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--dt-border); font-size: 12px; line-height: 1.7; }
#newaiagent .nai-info strong { display: block; font-weight: 600; margin-bottom: 5px; }
#newaiagent .nai-info p { color: var(--dt-muted); margin: 0; }
#newaiagent .nai-flow { display: grid; gap: 14px; }
#newaiagent .nai-flow-step { padding: 14px 16px; border: 1px solid var(--dt-border); border-radius: 10px; background: var(--dt-surface-2); }
#newaiagent .nai-flow-step small { display: block; margin-bottom: 8px; color: var(--dt-muted); }
#newaiagent .nai-flow-step strong { display: block; font-size: 13px; margin-bottom: 6px; }
#newaiagent .nai-flow-step p { margin: 0; color: var(--dt-muted); font-size: 12px; line-height: 1.6; }
#newaiagent .nai-flow-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#newaiagent .nai-flow-step, #newaiagent .nai-info { overflow-wrap: anywhere; }
#newaiagent .nai-preview { padding: 30px 18px; border: 1px solid var(--dt-border); border-radius: 14px; background-color: var(--dt-surface-2); background-image: radial-gradient(var(--dt-border-strong) .6px, transparent .6px); background-size: 18px 18px; text-align: center; }
#newaiagent .nai-preview .nai-orb { width: 130px; height: 130px; margin: 0 auto 26px; animation: dui-legacy-modals-newaiagent-modal-nai-orbit 24s linear infinite; }
#newaiagent .nai-preview blockquote { margin: 0; padding: 18px; border: 1px solid var(--dt-border); border-radius: 10px; background: var(--dt-surface); text-align: start; line-height: 1.7; font-size: 13px; overflow-wrap: anywhere; }
#newaiagent .nai-preview p { margin: 18px 0 0; font-size: 12px; line-height: 1.6; color: var(--dt-muted); }
#newaiagent .nai-empty { grid-column: 1 / -1; padding: 20px; font-size: 13px; line-height: 1.6; text-align: center; color: var(--dt-muted); }
#newaiagent .nai-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--dt-border); padding: 16px 24px; background: var(--dt-surface); flex-shrink: 0; }
#newaiagent .nai-language { color: var(--dt-muted); font-size: 12px; }
#newaiagent .nai-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }
#newaiagent .nai-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 10px 16px; border: 1px solid var(--dt-border-strong); border-radius: 9px; background: var(--dt-surface); color: var(--dt-text); line-height: 1.4; white-space: normal; }
#newaiagent .nai-primary { background: var(--dt-cta); border-color: var(--dt-cta); color: var(--dt-cta-fg); }
#newaiagent .nai-primary:hover { background: var(--dt-cta-hover); border-color: var(--dt-cta-hover); }
#newaiagent .nai-feedback { flex-basis: 100%; font-size: 12px; line-height: 1.6; }
#newaiagent .nai-error { color: var(--dt-danger); }
#newaiagent .nai-loading { display: flex; align-items: center; gap: 8px; color: var(--dt-muted); }
#newaiagent .nai-loading i { animation: dui-legacy-modals-newaiagent-modal-nai-orbit 1s linear infinite; }
@keyframes dui-legacy-modals-newaiagent-modal-nai-orbit { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  #newaiagent > .modal-dialog > .modal-content { height: calc(100dvh - 32px); }
  #newaiagent .nai-workspace { display: block; overflow-y: auto; }
  #newaiagent .nai-gallery { border-inline-end: 0; border-bottom: 1px solid var(--dt-border); }
  #newaiagent .nai-grid { max-height: 230px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #newaiagent .nai-detail { overflow: visible; padding: 20px 16px; }
  #newaiagent .nai-search-tools { padding: 12px 16px; }
  #newaiagent .nai-modes, #newaiagent .nai-footer, #newaiagent .modal-header { padding: 14px 16px; }
  #newaiagent .nai-modes { gap: 4px; }
  #newaiagent .nai-mode { flex: 1; padding: 8px; font-size: 12px; }
}
@media (max-width: 420px) {
  #newaiagent .nai-flow-branches { grid-template-columns: minmax(0, 1fr); }
  #newaiagent .nai-actions { width: 100%; }
  #newaiagent .nai-actions > button { flex: 1; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { #newaiagent .nai-preview .nai-orb, #newaiagent .nai-loading i { animation: none; } }
@media (forced-colors: active) { #newaiagent :is(input,textarea):focus { outline: 2px solid Highlight; } }

}
/* end dui-template-style modals/newaiagent-modal:0 */
/* dui-template-style {"key":"modals/send-email:0","bytes":14090,"sha256":"50eef674876ab592fc5dacb84afc6aafa6cd1bad9a48a0ac34d6c1190639831c","media":null,"source_sha256":"50eef674876ab592fc5dacb84afc6aafa6cd1bad9a48a0ac34d6c1190639831c"} */
@scope (:root:has(template[data-dui-legacy-style="modals/send-email:0"])) {

/* === Compose Layout === */
.se-compose {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.se-compose__form {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.se-compose__fields {
  padding: 16px 20px 0 20px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-color, #e5e5e5);
}
.se-compose__toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-top: 1px solid var(--border-color, #e5e5e5);
  background: var(--bg-secondary-color, #fafafa);
  gap: 8px;
}
.se-toolbar__left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.se-toolbar__right {
  flex-shrink: 0;
}
.se-toolbar-divider {
  width: 1px;
  height: 24px;
  background: var(--border-color, #e5e5e5);
  flex-shrink: 0;
}
.se-toolbar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted-color, #888);
  white-space: nowrap;
}

/* === Fields === */
.se-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.se-attach-from-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.se-field-half {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.se-field-half .se-select {
  width: 100%;
}
.se-field-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.se-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted-color, #888);
  min-width: 52px;
  text-align: right;
  flex-shrink: 0;
}
.se-field-input {
  position: relative;
}
.se-field-input--grow {
  flex: 1;
}
.se-field-toggle {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-color, #2563eb);
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s;
}
.se-field-toggle:hover {
  background: var(--hover-color, #f0f0f0);
  text-decoration: none;
  color: var(--accent-color, #2563eb);
}
.se-ccbcc-row {
  flex-wrap: wrap;
}
.se-attach-row .se-input-file {
  font-size: 13px;
}
.se-attach-zone {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.se-attach-droparea {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1.5px dashed var(--border-color, #ccc);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted-color, #888);
  transition: border-color 0.2s, background 0.2s;
  min-height: 28px;
}
.se-attach-droparea:hover {
  border-color: var(--accent-color, #2563eb);
  color: var(--accent-color, #2563eb);
}
.se-attach-droparea.is-dragover {
  border-color: var(--accent-color, #2563eb);
  background: rgba(37, 99, 235, 0.06);
  color: var(--accent-color, #2563eb);
}
.se-attach-droparea__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.se-attach-info {
  padding: 4px 0;
  font-size: 12px;
  color: var(--text-muted-color, #888);
}
.se-attach-list {
  font-size: 12px;
}
.se-attached-files-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 0 0 6px 0;
}
.se-attached-files-row:empty {
  display: none;
}
.se-attach-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  margin: 3px 4px 3px 0;
  font-size: 12px;
  color: var(--brand-color);
  background: var(--hover-color);
  border: 0;
  border-radius: 4px;
}
.se-attach-item__delete {
  padding: 2px !important;
  min-width: auto !important;
  color: var(--text-muted-color, #888);
}
.se-attach-item__delete:hover {
  color: var(--error-color, #e53e3e);
}

/* === Inputs === */
.se-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  border: 0;
  border-radius: 6px;
  background: var(--bg-color, #fff);
  color: var(--text-color, #222);
  outline: none;
  transition: border-color 0.15s;
}
.se-input:focus {
  border-color: var(--accent-color, #2563eb);
}
.se-select {
  padding: 8px 12px;
  font-size: 13px;
  border: 0;
  border-radius: 6px;
  background: var(--bg-color, #fff);
  color: var(--text-color, #222);
  outline: none;
  min-width: 120px;
  cursor: pointer;
}
.se-select--sm {
  padding: 3px 6px;
  font-size: 12px;
  min-width: 80px;
}
#seTemplateSelect {
  max-width: 150px;
}
.se-input-file {
  width: 100%;
}

/* === Buttons === */
.se-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  border: 0;
  background: var(--bg-color, #fff);
  color: var(--text-color, #333);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.se-btn:hover {
  background: var(--hover-color, #f5f5f5);
}
.se-btn--primary {
  background: var(--accent-color, #2563eb);
  color: var(--dt-cta-fg);
  border-color: var(--accent-color, #2563eb);
}
.se-btn--primary:hover {
  opacity: 0.9;
  background: var(--accent-color, #2563eb);
  color: var(--dt-cta-fg);
}
.se-btn--danger {
  background: var(--error-color, #dc3545);
  color: var(--dt-cta-fg);
  border-color: var(--error-color, #dc3545);
}
.se-btn--danger:hover {
  opacity: 0.9;
  background: var(--error-color, #dc3545);
  color: var(--dt-cta-fg);
}
.se-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted-color, #888);
}
.se-btn--ghost:hover {
  background: var(--hover-color, #f5f5f5);
  color: var(--text-color, #333);
}
.se-btn--icon {
  padding: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted-color, #888);
  border-radius: 6px;
}
.se-btn--icon:hover {
  background: var(--hover-color, #f0f0f0);
  color: var(--text-color, #333);
}
.se-btn--send {
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 600;
}
.se-btn--send.is-busy {
  opacity: 0.6;
  pointer-events: none;
}
.se-btn--send.is-errored {
  background: var(--error-color, #dc3545);
  border-color: var(--error-color, #dc3545);
}
.se-btn--tracking-off {
  opacity: 0.45;
}
.se-btn--tracking-on {
  opacity: 1;
  color: var(--success-color, #28a745);
}
.se-btn--danger {
  color: var(--dt-cta-fg) !important;
  border-color: var(--error-color, #dc3545);
}
.se-btn--danger:hover {
  background: var(--error-color, #dc3545);
  color: var(--dt-cta-fg);
}

/* === Signature / Template selector === */
.se-signature-selector {
  display: flex;
  align-items: center;
  gap: 5px;
}
.se-signature-selector > label {
  margin-bottom: 1px;
}

/* === Template buttons inline === */
#seTemplateBtns {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* === Signature Manager Panel === */
.se-signature-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.se-signature-panel__form {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.se-signature-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-color, #e5e5e5);
}
.se-signature-panel__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color, #222);
  margin: 0;
}
.se-signature-panel__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.se-signature-panel__namerow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-color, #e5e5e5);
}
.se-signature-panel__namerow label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted-color, #888);
  white-space: nowrap;
}
.se-signature-panel__namerow .se-input {
  flex: 1;
  max-width: 300px;
}
.se-checkbox-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.se-signature-panel__editor {
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

/* === Editor tweaks === */
.se-compose__editor {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.se-compose__editor .send-email-control {
  height: 100%;
  margin: 0;
  min-height: unset;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.se-compose__editor .textareaemail-container {
  height: 100% !important;
  min-height: 0 !important;
  position: relative !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.se-compose__editor .textareaemail-container textarea {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
}
/* Force TinyMCE wrapper to fill container */
.se-compose__editor .tox-tinymce {
  flex: 1 !important;
  min-height: 500px;
}
.se-compose__editor .tox-editor-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.se-compose__editor .tox-sidebar-wrap {
  flex: 1;
}
/* Signature panel editor same treatment */
.se-signature-panel__editor .textareaemail-container {
  height: 100% !important;
  min-height: 0 !important;
  position: relative !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.se-signature-panel__editor .tox-tinymce {
  flex: 1 !important;
  min-height: 500px;
}
.textareaemail-container {
  height: 100% !important;
  min-height: 300px !important;
  position: relative !important;
}
.textareaemail-container textarea {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 300px !important;
  position: relative !important;
}
.send-email-loading {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  padding: 40px;
}
.send-email-loading span {
  font-size: var(--font-size-05, 12px);
  margin-top: -20px;
}

.btn--disabledmarc,
.btn--disabledmarc:hover,
.btn--disabledmarc:active,
.btn--disabledmarc:focus {
  background: var(--dt-surface) !important;
  border-color: #A0A3AC !important;
}

/* === Fullscreen compat === */
#send-email-modal.is-fullscreen {
  width: calc(100% - 200px);
  height: 100%;
  border-radius: 0;
}
#send-email-modal.is-fullscreen .modal__body-inner {
  max-height: 100%;
}

/* === Responsive === */
@media (max-width: 768px) {
  .se-field-row {
    flex-wrap: wrap;
  }
  .se-field-label {
    min-width: unset;
    text-align: left;
  }
  .se-compose__toolbar {
    flex-wrap: wrap;
  }
  .se-ccbcc-row .se-field-group {
    flex-basis: 100%;
  }
}
@media (max-height: 900px) {
  .se-compose__editor .tox-tinymce {
    min-height: calc(100vh - 500px);
  }
  .se-signature-panel__editor .tox-tinymce {
    min-height: calc(100vh - 500px);
  }
}
/* Roomy compose dialog: keep all changes scoped to email, including signatures. */
#send-email-modal.dui-modal { --dui-modal-gap: max(12px, env(safe-area-inset-top), env(safe-area-inset-bottom)); }
#send-email-modal .modal-dialog {
  width: min(1800px, calc(100vw - 24px));
  max-width: min(1800px, calc(100vw - 24px));
}
#send-email-modal .modal-content {
  height: calc(100dvh - 24px);
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
}
#send-email-modal .modal-header { flex: 0 0 auto; }
#send-email-modal .modal__body,
#send-email-modal .modal__body-inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  max-height: none;
  overflow: auto;
}
#send-email-modal .modal__body-inner.is-padded { padding: 0; }
#send-email-modal .se-compose,
#send-email-modal .se-signature-panel { flex: 1 1 auto; min-height: 0; }
#send-email-modal .se-compose__fields { max-height: 42%; overflow-y: auto; }
#send-email-modal .se-field-group,
#send-email-modal .se-field-input,
#send-email-modal .se-field-half { min-width: 0; }
#send-email-modal .se-compose__editor .tox-tinymce,
#send-email-modal .se-signature-panel__editor .tox-tinymce {
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
}
#send-email-modal .se-btn--primary {
  background: var(--dt-cta); border-color: var(--dt-cta); color: var(--dt-cta-fg);
}
#send-email-modal .se-btn--primary:hover {
  background: var(--dt-cta-hover); border-color: var(--dt-cta-hover); color: var(--dt-cta-fg);
}
#send-email-modal .se-compose__toolbar {
  background: var(--dt-surface);
  border-color: var(--dt-border);
}
@media (max-width: 768px) {
  #send-email-modal.dui-modal { --dui-modal-gap: max(0px, env(safe-area-inset-top), env(safe-area-inset-bottom)); }
  #send-email-modal .modal-dialog { width: 100%; max-width: 100%; }
  #send-email-modal .modal-content { height: calc(100dvh - 2 * var(--dui-modal-gap)); max-height: calc(100dvh - 2 * var(--dui-modal-gap)); border-radius: 0 !important; }
  #send-email-modal .se-compose__fields { padding: 12px 12px 0; }
  #send-email-modal .se-field-half { flex-basis: 100%; }
  #send-email-modal .se-field-input--grow { flex-basis: 0; }
  #send-email-modal .se-compose__toolbar { padding: 8px 12px; }
}
@media (max-height: 540px) {
  #send-email-modal .se-compose__fields { max-height: 35%; }
  #send-email-modal .se-compose__editor { min-height: 100px; }
}
/* Match the shared dUI fullscreen contract as well as the legacy toggle. */
#send-email-modal.is-fullscreen { width: 100%; height: 100dvh; }
#send-email-modal .modal-dialog.modal-fullscreen,
#send-email-modal.is-fullscreen .modal-dialog {
  width: 100%; max-width: none; height: 100%; min-height: 100%; margin: 0;
}
#send-email-modal .modal-dialog.modal-fullscreen .modal-content,
#send-email-modal.is-fullscreen .modal-content {
  height: 100dvh; max-height: 100dvh; border-radius: 0 !important;
}
#send-email-modal .se-local-draft {display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 0;color:var(--dt-text);font-size:12px;}
#send-email-modal .se-local-draft label {display:flex;align-items:center;gap:6px;}

}
/* end dui-template-style modals/send-email:0 */
/* dui-template-style {"key":"modals/send-form:0","bytes":134,"sha256":"4b2c07f4426fbf48eb5ba11ff3e34b959214e0b0fbc774742101573ddf8f5bcd","media":null,"source_sha256":"4b2c07f4426fbf48eb5ba11ff3e34b959214e0b0fbc774742101573ddf8f5bcd"} */
@scope (:root:has(template[data-dui-legacy-style="modals/send-form:0"])) {

.linktocopy{
    padding-top:20px;
    font-size:12px;
    color:#3F81DE;
}.linktocopy:hover{
    text-decoration:underline;
}
}
/* end dui-template-style modals/send-form:0 */
/* dui-template-style {"key":"modals/send-sms:0","bytes":538,"sha256":"62782846a2aff406eb95de651b203d79230771fdcfdcd94ce98342f25f94d905","media":null,"source_sha256":"62782846a2aff406eb95de651b203d79230771fdcfdcd94ce98342f25f94d905"} */
@scope (:root:has(template[data-dui-legacy-style="modals/send-sms:0"])) {

  .btn-mini{ padding:4px !important; font-size:12px !important; }
  .add-note-control { display:block; margin-bottom: var(--spacing-1); }
  .add-note-control label { display:inline-block; font-size: var(--font-size-1); margin-bottom: var(--spacing-05); }
  .send-sms-control { display:block; margin-bottom: var(--spacing-1); }
  .send-sms-control label { display:inline-block; font-size: var(--font-size-1); margin-bottom: var(--spacing-05); }
  .textarea-container textarea { width:100%; max-width:100%; min-width:100%; height:100px; }

}
/* end dui-template-style modals/send-sms:0 */
/* dui-template-style {"key":"modals/upgrade-plan:0","bytes":795,"sha256":"5b59447efacebc23621ea6fe2c7d2e936574c9179085c91d601c77ff5968fee4","media":null,"source_sha256":"5b59447efacebc23621ea6fe2c7d2e936574c9179085c91d601c77ff5968fee4"} */
@scope (:root:has(template[data-dui-legacy-style="modals/upgrade-plan:0"])) {

/* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══ Mejorar plan: icono en cuadrado neutro
   (antes naranja en degradado) y "View plans" como CTA en tinta (antes degradado naranja con sombra); Cancel ghost de línea fina. */
div[style*="rgba(230,126,34"] { background: var(--dt-surface-2) !important; color: var(--dt-muted) !important; border: 0; border-radius: 12px !important; }
button[style*="#e67e22"] { background: var(--dt-cta) !important; color: var(--dt-cta-fg) !important; box-shadow: none !important; border-radius: 8px !important; }
button[style*="#e67e22"]:hover { background: var(--dt-cta-hover) !important; }
button[onclick="hideModal()"][style*="rgba(128,128,128"] { border: 0 !important; border-radius: 8px !important; }

}
/* end dui-template-style modals/upgrade-plan:0 */
/* dui-template-style {"key":"modals/vercentralitapbx:0","bytes":25101,"sha256":"2f969e857d87c1b4ca6e67cfdda34f12e47485ee18cf09c16f0404244082e80f","media":null,"source_sha256":"112da035e47414ad68dd53f6dd2f376b2afed089fbedbed1f2eee0fda269881f"} */
@scope (:root:has(template[data-dui-legacy-style="modals/vercentralitapbx:0"])) {

    /* native selects — Choices.js removed */
    /* ── PBX Node Editor ── */
    .pbx-node-form .node-name-input {
        font-size: 1.05rem;
        font-weight: 500;
        padding: 0.6rem 0.875rem;
    }
    .pbx-node-form .section-label {
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        opacity: 0.45;
        margin-bottom: 0.5rem;
    }
    .pbx-node-form .node-type-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 0.45rem;
        margin-bottom: 1.125rem;
    }
    .pbx-node-form .node-type-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.65rem 0.25rem;
        border: 0;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: all 0.15s ease;
        text-align: center;
        background: rgba(255,255,255,0.015);
        user-select: none;
    }
    .pbx-node-form .node-type-card:hover {
        border-color: rgba(99,102,241,0.45);
        background: rgba(99,102,241,0.06);
    }
    .pbx-node-form .node-type-card.active {
        border-color: #6366f1;
        background: rgba(99,102,241,0.12);
        color: #a5b4fc;
    }
    .pbx-node-form .node-type-card i {
        font-size: 1.3rem;
        margin-bottom: 0.2rem;
        opacity: 0.8;
    }
    .pbx-node-form .node-type-card.active i {
        opacity: 1;
        color: #818cf8;
    }
    .pbx-node-form .node-type-card span {
        font-size: 0.675rem;
        font-weight: 500;
        line-height: 1.2;
        opacity: 0.75;
    }
    .pbx-node-form .node-type-card.active span {
        opacity: 1;
        font-weight: 600;
    }
    .pbx-node-form .type-section-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.875rem;
        padding-bottom: 0.625rem;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        font-weight: 600;
        font-size: 0.85rem;
        letter-spacing: 0.02em;
        opacity: 0.65;
    }
    .pbx-node-form .type-section-header i {
        font-size: 1.05rem;
        color: #818cf8;
    }
    .pbx-node-form .divider {
        border: none;
        border-top: 1px solid rgba(255,255,255,0.06);
        margin: 0.75rem 0 1rem 0;
    }

#akiiframmodalpbx {
 --pn-text:var(--dt-text,#111110); --pn-muted:var(--dt-muted,#5f5f5c); --pn-faint:var(--dt-faint,#72726e);
 --pn-surface:var(--dt-surface,#fff); --pn-surface2:var(--dt-surface-2,#eeeeec); --pn-border:var(--dt-border,rgba(15,15,15,.08));
 --pn-border-strong:var(--dt-border-strong,rgba(15,15,15,.18)); --pn-hover:var(--dt-hover,#f4f4f3);
 --pn-accent:var(--dt-cta); --pn-accent-soft:#edf3ff; container:pn-editor / inline-size;
}
#akiiframmodalpbx .section-label { text-transform:none; letter-spacing:0; font-size:12px; opacity:1; color:var(--pn-muted); }
/* Inline PBX editor polish. Append after the existing workspace/editor CSS.
   Layout only: native fields, values, names and conditional visibility are retained. */
#akiiframmodalpbx {
    padding: 22px 2px 4px;
}
#akiiframmodalpbx .pbx-node-form {
    --pn-field-height: 42px;
    font-size: 13px;
    line-height: 1.45;
}
#akiiframmodalpbx .pbx-node-form .form-row,
#akiiframmodalpbx .pbx-node-form .form-row > .row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: 14px 16px;
    margin: 0 0 18px;
    min-width: 0;
}
#akiiframmodalpbx .pbx-node-form .form-row > *,
#akiiframmodalpbx .pbx-node-form .form-row > .row > * {
    grid-column: 1 / -1;
    min-width: 0;
}
#akiiframmodalpbx .pbx-node-form .form-row > .row { margin-bottom: 0; }
#akiiframmodalpbx .pbx-node-form .form-row > [class*="col-"],
#akiiframmodalpbx .pbx-node-form .form-row > .row > [class*="col-"],
#akiiframmodalpbx .pbx-node-form .form-group {
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
    margin-bottom: 0;
}
#akiiframmodalpbx .pbx-node-form .form-row > .col-md-1 { grid-column: span 1; }
#akiiframmodalpbx .pbx-node-form .form-row > .col-md-2 { grid-column: span 2; }
#akiiframmodalpbx .pbx-node-form .form-row > .col-md-3 { grid-column: span 3; }
#akiiframmodalpbx .pbx-node-form .form-row > .col-md-4 { grid-column: span 4; }
#akiiframmodalpbx .pbx-node-form .form-row > .col-md-6,
#akiiframmodalpbx .pbx-node-form .form-row > .row > .col-md-6 { grid-column: span 6; }
#akiiframmodalpbx .pbx-node-form .form-row > .col-md-8 { grid-column: span 8; }
#akiiframmodalpbx .pbx-node-form .form-row > .col-md-9 { grid-column: span 9; }
#akiiframmodalpbx .pbx-node-form .form-row > .form-group:only-child { grid-column: 1 / -1; }
#akiiframmodalpbx .pbx-node-form label:not(.form-check-label) {
    display: block;
    min-height: 18px;
    margin: 0 0 7px;
    color: var(--pn-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}
#akiiframmodalpbx .pbx-node-form label:has(> .btn) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
#akiiframmodalpbx .pbx-node-form :is(.form-control, .form-select):not([type="checkbox"]):not([type="radio"]) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: var(--pn-field-height);
    padding: 10px 12px;
    border: 1px solid var(--pn-border-strong);
    border-radius: 9px;
    background-color: var(--pn-surface);
    color: var(--pn-text);
    font: inherit;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgb(0 0 0 / 2%);
    transition: border-color 150ms, box-shadow 150ms, background-color 150ms;
}
#akiiframmodalpbx .pbx-node-form :is(.form-control, .form-select):hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--pn-accent) 45%, var(--pn-border-strong));
}
#akiiframmodalpbx .pbx-node-form :is(.form-control, .form-select):focus-visible {
    outline: 2px solid var(--pn-accent);
    outline-offset: 2px;
    border-color: var(--pn-accent);
    box-shadow: 0 0 0 4px var(--pn-accent-soft);
}
#akiiframmodalpbx .pbx-node-form :is(.form-control, .form-select):disabled {
    color: var(--pn-muted);
    background-color: var(--pn-surface2);
    cursor: not-allowed;
}
#akiiframmodalpbx .pbx-node-form input::placeholder { color: var(--pn-faint); opacity: 1; }
#akiiframmodalpbx .pbx-node-form .form-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 26px;
    padding: 0;
    margin: 0;
}
#akiiframmodalpbx .pbx-node-form .form-check-input {
    position: static;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--pn-accent);
    cursor: pointer;
}
#akiiframmodalpbx .pbx-node-form .form-check-input:checked {
    background-color: var(--pn-accent) !important;
    border-color: var(--pn-accent) !important;
}
#akiiframmodalpbx .pbx-node-form .form-check-label {
    margin: 0;
    color: var(--pn-text);
    font-size: 12px;
    cursor: pointer;
}
#akiiframmodalpbx .pbx-node-form .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: var(--pn-surface);
    color: var(--pn-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
}
#akiiframmodalpbx .pbx-node-form .btn:hover {
    background: var(--pn-hover);
    border-color: var(--pn-accent);
}
#akiiframmodalpbx .pbx-node-form :is(.btn, .node-type-card, .form-check-input):focus-visible {
    outline: 2px solid var(--pn-accent);
    outline-offset: 3px;
}
#akiiframmodalpbx .pbx-node-form .node-type-card {
    min-height: 48px;
    padding: 10px;
    border-radius: 10px;
}
#akiiframmodalpbx .pbx-node-form .node-type-card:hover {
    background: var(--pn-hover);
    border-color: var(--pn-border-strong);
}
#akiiframmodalpbx .pbx-node-form .node-type-card.active {
    border-color: var(--pn-accent);
    background: var(--pn-accent-soft);
    color: var(--pn-accent);
    box-shadow: inset 0 0 0 1px var(--pn-accent);
}
#akiiframmodalpbx .pbx-node-form .node-type-card.active i { color: var(--pn-accent); }
#akiiframmodalpbx .pbx-node-form .type-section-header {
    margin: 0 0 18px;
    color: var(--pn-text);
    font-size: 14px;
}
#akiiframmodalpbx .pbx-node-form .type-section-header i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--pn-accent-soft);
    color: var(--pn-accent);
}

/* Forwarding: audio settings above clearly separated destination cards. */
#akiiframmodalpbx #tiponododesvi > .form-row:has(#musica1desvi),
#akiiframmodalpbx #tiponododesvi > .form-row:has(#mdescolgado1) {
    display: inline-grid;
    width: calc(50% - 9px);
    vertical-align: top;
}
#akiiframmodalpbx #tiponododesvi > .form-row:has(#musica1desvi) { margin-right: 18px; }
#akiiframmodalpbx #tiponododesvi > .form-row:has(#musica1desvi) label,
#akiiframmodalpbx #tiponododesvi > .form-row:has(#mdescolgado1) label {
    display: flex;
    align-items: center;
    min-height: 32px;
}
#akiiframmodalpbx #tiponododesvi > .form-row:has(#musica1desvi) > .form-group:not(.u-hidden) {
    grid-column: 1 / -1;
}
#akiiframmodalpbx [id="2myDiv"] > .border {
    padding: 18px !important;
    margin: 0 0 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--pn-surface);
}
#akiiframmodalpbx [id="2myDiv"] > .border > .form-row:first-child {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--pn-border);
}
#akiiframmodalpbx [id="2myDiv"] > .border > .form-row:first-child > .col-12 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
#akiiframmodalpbx [id="2myDiv"] > .border > .form-row:first-child label {
    margin: 0;
    color: var(--pn-text);
    font-size: 13px;
    font-weight: 600;
}
#akiiframmodalpbx [id="2myDiv"] > .border > .form-row.mt-2 { align-items: end; margin-top: 0 !important; }

/* Keep each native checkbox visible; its label remains a generous click target. */
#akiiframmodalpbx [id^="horario1_"] {
    padding: 16px 0 0 !important;
    margin: 0 !important;
    border-top: 1px solid var(--pn-border);
}
#akiiframmodalpbx [id^="horario1_"] > .form-row:first-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
#akiiframmodalpbx [id^="horario1_"] > .form-row:first-child > .form-group { flex: 0 0 auto; }
#akiiframmodalpbx [id^="horario1_"] > .form-row:first-child .form-check {
    min-height: 36px;
    gap: 7px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: var(--pn-surface);
    transition: background-color 150ms, border-color 150ms;
}
#akiiframmodalpbx [id^="horario1_"] > .form-row:first-child .form-check:has(input:checked) {
    background: var(--pn-accent-soft);
    border-color: color-mix(in srgb, var(--pn-accent) 35%, var(--pn-border));
}
#akiiframmodalpbx [id^="horario1_"] > .form-row:first-child .form-check-label {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    font-weight: 500;
}
#akiiframmodalpbx [id^="horario1_"] > .form-row:first-child .form-check-label:empty { display: none; }
#akiiframmodalpbx [id^="horario1_"] > .form-row:first-child .btn {
    min-height: 28px;
    padding: 4px 0;
    border: 0;
    background: transparent;
}
#akiiframmodalpbx [id^="horario1_"] > .form-row.mt-3 {
    padding: 14px;
    margin: 0 !important;
    border-radius: 10px;
    background: color-mix(in srgb, var(--pn-surface2) 60%, var(--pn-surface));
}
#akiiframmodalpbx [id^="horario1_"] .form-group > .d-flex {
    display: flex;
    align-items: center;
    gap: 8px;
}
#akiiframmodalpbx [id^="horario1_"] .form-group > .d-flex > .form-control {
    width: 56px !important;
    margin: 0 !important;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
#akiiframmodalpbx [id^="horario1_"] .form-group > .d-flex > label { margin: 0 !important; }

/* DTMF key routing: compact rows with the existing toggle and destination. */
#akiiframmodalpbx #tiponododtmf .form-row > .row > .col-md-6 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    min-height: 60px;
    border: 0;
    border-radius: 9px;
    background: var(--pn-surface);
}
#akiiframmodalpbx #tiponododtmf .form-row > .row > .col-md-6 > .form-check { flex: 0 0 36px; }
#akiiframmodalpbx #tiponododtmf .form-row > .row > .col-md-6 > :is(select, .pbx-select-picker, .dui-select) {
    flex: 1 1 0;
    min-width: 0;
    margin-left: 0 !important;
}

/* The root supplies the one-line display input and retains the hidden canonical value. */
#akiiframmodalpbx #tiponodotts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
#akiiframmodalpbx #tiponodotts > .type-section-header { margin-bottom: 0; }
#akiiframmodalpbx #tiponodotts > .form-row { margin: 0; }
#akiiframmodalpbx #messagetts-display {
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 10px 12px;
    border: 0;
    border-radius: 9px;
    background: var(--pn-surface);
    color: var(--pn-text);
    font: inherit;
    line-height: 1.5;
}
#akiiframmodalpbx #messagetts-display:focus-visible {
    outline: 2px solid var(--pn-accent);
    outline-offset: 2px;
}

@container pn-editor (max-width: 620px) {
    #akiiframmodalpbx .pbx-node-form .form-row > :is(.col-md-3, .col-md-4, .col-md-6, .col-md-8, .col-md-9),
    #akiiframmodalpbx .pbx-node-form .form-row > .row > .col-md-6 { grid-column: 1 / -1; }
    #akiiframmodalpbx #tiponododesvi > .form-row:has(#musica1desvi),
    #akiiframmodalpbx #tiponododesvi > .form-row:has(#mdescolgado1) { width: 100%; margin-right: 0; }
    #akiiframmodalpbx [id^="horario1_"] > .form-row.mt-3 > .col-md-6 { grid-column: span 6; }
    #akiiframmodalpbx [id="2myDiv"] > .border { padding: 14px !important; }
}
@container pn-editor (max-width: 340px) {
    #akiiframmodalpbx [id^="horario1_"] > .form-row.mt-3 > .col-md-6 { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    #akiiframmodalpbx .pbx-node-form :is(.form-control, .form-select, .form-check, .node-type-card) { transition: none; }
}

.pn-bulk-agents{margin:16px 0;padding:16px;border:0;border-radius:12px;background:var(--pn-surface2,transparent)}
.pn-bulk-agents-heading{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin-bottom:12px}
.pn-bulk-agents-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pn-bulk-agents-label{font-size:12px;margin:0}
.pn-bulk-agents-controls .form-select{flex:1;min-width:180px;width:auto;max-width:420px}
.pn-bulk-agents-add{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;white-space:nowrap}
.pn-bulk-agents-hint,.pn-bulk-agents-status{font-size:12px;line-height:1.5;margin:10px 0 0;color:var(--pn-muted,#666)}
.pn-bulk-agents-status:empty{display:none}
@media(max-width:600px){.pn-bulk-agents-label{width:100%}.pn-bulk-agents-controls .form-select{max-width:none}.pn-bulk-agents-add{width:100%}}

:scope[data-bs-theme="dark"] #akiiframmodalpbx { --pn-accent:var(--dt-cta); --pn-accent-soft:#1b2942; }

/* PBX clean interface: restrained surfaces and soft separators. */
:is(#akicontenidonormal:has(.pn-head),#pn-pbx-overlay,#akiiframmodalpbx) {
 --pn-app:var(--dt-app); --pn-surface:var(--dt-surface); --pn-surface2:var(--dt-surface-2); --pn-topbar:#fafafa;
 --pn-text:var(--dt-text); --pn-muted:var(--dt-muted); --pn-faint:var(--dt-faint);
 --pn-border:var(--dt-border); --pn-border-strong:var(--dt-border-strong); --pn-hover:var(--dt-hover); --pn-active:var(--dt-active);
 --pn-accent:var(--dt-cta); --pn-accent-soft:#f1f1f1; --pn-canvas:var(--dt-app); --pn-dot:transparent;
 --pn-cta:var(--dt-cta); --pn-cta-hover:var(--dt-hover); --pn-cta-fg:var(--dt-cta-fg); --pn-link:#454545;
 --pn-shadow-xs:0 1px 2px rgb(0 0 0 / 3%); --pn-ring:rgb(0 0 0 / 7%);
 --pn-focus:#909090;
}
:scope[data-bs-theme="dark"] :is(#akicontenidonormal:has(.pn-head),#pn-pbx-overlay,#akiiframmodalpbx) {
 --pn-app:var(--dt-app); --pn-surface:var(--dt-surface); --pn-surface2:var(--dt-surface-2); --pn-topbar:#191919;
 --pn-text:var(--dt-text); --pn-muted:var(--dt-muted); --pn-faint:var(--dt-faint); --pn-border:var(--dt-border); --pn-border-strong:var(--dt-border-strong);
 --pn-hover:var(--dt-hover); --pn-active:var(--dt-active); --pn-accent:var(--dt-cta); --pn-accent-soft:#2b2b2b;
 --pn-canvas:var(--dt-app); --pn-cta:var(--dt-cta); --pn-cta-hover:var(--dt-hover); --pn-cta-fg:var(--dt-cta-fg); --pn-link:#d6d6d6; --pn-focus:#888;
}
#akicontenidonormal .pn-head { padding-top:20px; }
#akicontenidonormal .pn-head .sb-section-trigger-text strong { font-size:21px; font-weight:600; letter-spacing:-.025em; }
#akicontenidonormal .pn-head .sb-section-trigger-text small { letter-spacing:0; }
#akicontenidonormal .pn-head .sb-section-trigger-icon,
#pn-pbx-overlay .pn-ov-avatar { width:38px; height:38px; background:var(--pn-surface); color:var(--pn-muted); border:1px solid var(--pn-border); border-radius:10px; font-size:20px; }
#akicontenidonormal .pn-service-trigger { box-shadow:none; border-color:var(--pn-border); }
#akicontenidonormal .pn-maintabs { background:var(--pn-surface2); border-color:transparent; border-radius:10px; }
#akicontenidonormal .pn-maintabs .pn-tab-active { color:var(--pn-text); }
#pn-pbx-overlay .pn-ov-wrap { border-color:var(--pn-border); border-radius:14px; box-shadow:none; }
#pn-pbx-overlay .pn-ov-head { padding:20px; }
#pn-pbx-overlay .pn-ov-title { font-size:19px; font-weight:600; }
/* 26-10: las pestañas del servicio son horizontales y las estila solo control-phonenumbers.html */
#pn-main-content > #pn-tab-flow { background:var(--pn-canvas); background-image:none; }
#pn-tab-flow .pn-flow-context { border:0; border-bottom:1px solid var(--pn-border); border-radius:0; background:transparent; padding:0 0 16px; margin-bottom:20px; }
#pn-tab-flow .pn-flow-head > .pn-btn { background:var(--pn-cta); color:var(--pn-cta-fg); border-color:transparent; box-shadow:none; }
#pn-tab-flow .pn-flow-head > .pn-btn:hover { background:var(--pn-cta-hover); border-color:transparent; }
#pn-tab-flow #activeList .ivr-block,
#pn-tab-flow #activeList .ivr-block:hover,
#pn-tab-flow #activeList .ivr-block.pn-editing { border-color:var(--pn-border)!important; box-shadow:0 1px 3px rgb(0 0 0 / 3%); border-radius:12px; }
#pn-tab-flow #activeList .ivr-block:not(.pn-editing) { min-height:88px; }
#pn-tab-flow .ivr-block-icon { background:var(--pn-surface2)!important; border:0; }
#pn-tab-flow .ivr-block-icon i { color:var(--pn-muted)!important; }
#pn-tab-flow .ivr-tag { color:var(--pn-muted)!important; background:var(--pn-surface2)!important; }
#pn-tab-flow .pn-flow-step { background:var(--pn-surface2); color:var(--pn-muted); font-weight:500; }
#pn-tab-flow .pn-flow-entry-line,#pn-tab-flow .ivr-connector::before { border-color:var(--pn-border-strong); }
#pn-tab-flow .pn-flow-inactive { border-color:var(--pn-border); box-shadow:none; border-radius:12px; }
#pn-tab-flow #inactiveList.ivrlist { border-color:var(--pn-border-strong); background:var(--pn-canvas); }
#akiiframmodalpbx .pbx-node-form .node-type-card { border:0!important; background:var(--pn-surface); color:var(--pn-muted); box-shadow:none!important; border-radius:8px; }
#akiiframmodalpbx .pbx-node-form .node-type-card.active { border-color:var(--pn-border-strong)!important; background:var(--pn-active); color:var(--pn-text); box-shadow:none!important; }
#akiiframmodalpbx .pbx-node-form .section-label { text-transform:none; letter-spacing:0; }
#akiiframmodalpbx .pbx-node-form :is(.form-control,.form-select):not([type="checkbox"]):not([type="radio"]) {
 border-color:var(--pn-border-strong)!important; border-width:1px!important; box-shadow:none!important;
}
#akiiframmodalpbx .pbx-node-form :is(.form-control,.form-select):focus { border-color:var(--pn-focus)!important; box-shadow:none!important; outline:none; }
#akiiframmodalpbx .pbx-node-form .btn { border-color:var(--pn-border)!important; box-shadow:none; }
#akiiframmodalpbx .pbx-node-form .node-type-card.active i { color:var(--pn-muted); }
#akiiframmodalpbx [id^="horario1_"] > .form-row:first-child .form-check { border-color:var(--pn-border)!important; }
#akiiframmodalpbx [id^="horario1_"] > .form-row:first-child .form-check:has(input:checked) { background:var(--pn-surface2); border-color:var(--pn-border)!important; }
#akiiframmodalpbx .pn-bulk-agents { background:var(--pn-canvas); border-color:var(--pn-border); }
#akiiframmodalpbx [id="2myDiv"] > .border { border-color:var(--pn-border)!important; }
#akiiframmodalpbx .pbx-voice-trigger { border-color:var(--pn-border-strong); box-shadow:none; }
#pn-pbx-overlay .pn-inline-controls .pn-btn { border-color:var(--pn-border); }
#pn-pbx-overlay .pn-inline-controls .pn-btn--primary { background:var(--pn-cta); color:var(--pn-cta-fg); border-color:transparent; }
#akiiframmodalpbx :is(input,select,button,.node-type-card):not(.dui-select__search):focus-visible,
#pn-pbx-overlay :is(.pn-btn,.pn-action-btn,.pn-inline-title):focus-visible { outline:2px solid var(--pn-focus)!important; outline-offset:3px; }
@media(max-height:800px) {
 #akicontenidonormal:has(.pn-head):has(#pn-tab-btn-flow.pn-tab-active) { height:auto!important; overflow:visible!important; }
 #akicontenidonormal:has(.pn-head) > #pn-pbx-overlay { flex:none!important; overflow:visible!important; }
 #pn-pbx-overlay .pn-ov-wrap { max-height:none; }
 #pn-pbx-overlay #pn-main-content { flex:none; grid-template-rows:auto; }
 #pn-pbx-overlay #pn-main-content > #pn-tab-flow { min-height:380px; overflow:visible; }
}


.pn-bulk-agents-controls > .dui-select--clean { flex:1 1 220px; width:auto; max-width:420px; }
@media(max-width:600px) { .pn-bulk-agents-controls > .dui-select--clean { flex-basis:100%; max-width:none; } }

/* review-pbx-checkbox-polish:start */
/* Native checkbox behavior remains intact; override the global CTA-colored skin only here. */
:is(#pn-pbx-overlay,#akiiframmodalpbx,#pn-list-section) input[type="checkbox"] {
    --pn-check-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8 2.5 2.5L12 5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --pn-check-mixed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    appearance:none!important; box-sizing:border-box; width:16px; height:16px; flex-shrink:0;
    border:1px solid var(--pn-border-strong,var(--dt-border-strong,#c9c9c9))!important;
    border-radius:4px; background-color:var(--pn-surface,var(--dt-surface,#fff))!important;
    background-image:none!important; background-size:14px 14px; background-position:center; background-repeat:no-repeat;
    box-shadow:none!important; vertical-align:middle;
}
[data-bs-theme="dark"] :is(#pn-pbx-overlay,#akiiframmodalpbx,#pn-list-section) input[type="checkbox"] {
    --pn-check-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8 2.5 2.5L12 5' fill='none' stroke='%23202020' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --pn-check-mixed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%23202020' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
:is(#pn-pbx-overlay,#akiiframmodalpbx,#pn-list-section) input[type="checkbox"]:not(:disabled):hover { border-color:var(--pn-muted,var(--dt-muted,#777))!important; }
:is(#pn-pbx-overlay,#akiiframmodalpbx,#pn-list-section) input[type="checkbox"]:is(:checked,:indeterminate) {
    border-color:var(--pn-text,var(--dt-text,#222))!important;
    background-color:var(--pn-text,var(--dt-text,#222))!important;
    background-image:var(--pn-check-mark)!important;
}
:is(#pn-pbx-overlay,#akiiframmodalpbx,#pn-list-section) input[type="checkbox"]:indeterminate { background-image:var(--pn-check-mixed)!important; }
:is(#pn-pbx-overlay,#akiiframmodalpbx,#pn-list-section) input[type="checkbox"]:focus-visible {
    outline:2px solid var(--pn-focus,var(--dt-focus,#888))!important; outline-offset:3px; box-shadow:none!important;
}
:is(#pn-pbx-overlay,#akiiframmodalpbx,#pn-list-section) input[type="checkbox"]:disabled { opacity:.45; cursor:not-allowed; }
@media(forced-colors:active) {
    :is(#pn-pbx-overlay,#akiiframmodalpbx,#pn-list-section) input[type="checkbox"],
    :is(#pn-pbx-overlay,#akiiframmodalpbx,#pn-list-section) input[type="checkbox"]:is(:checked,:indeterminate) {
        appearance:auto!important; background-image:none!important; forced-color-adjust:auto;
    }
}
/* review-pbx-checkbox-polish:end */


}
/* end dui-template-style modals/vercentralitapbx:0 */
/* dui-template-style {"key":"modals/verify-account:0","bytes":5471,"sha256":"69d59b5edc93345a9a9b1f6658166a84d6625c095fc4d438fd7d89d07125c369","media":null,"source_sha256":"69d59b5edc93345a9a9b1f6658166a84d6625c095fc4d438fd7d89d07125c369"} */
@scope (:root:has(template[data-dui-legacy-style="modals/verify-account:0"])) {

    .ovd-verify-tour {
        background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
        border-radius: 0; padding: 0; color: var(--dt-on-color); overflow: visible; border: none; position: relative;
    }
    .ovd-verify-tour::before {
        content: ''; position: absolute; top: 0; right: 0; width: 200px; height: 200px;
        background: radial-gradient(circle at top right, rgba(59,130,246,0.12) 0%, transparent 70%);
        pointer-events: none; border-radius: 0;
    }
    .ovd-verify-tour-header { display: flex; align-items: center; gap: 12px; padding: 18px 24px 0; }
    .ovd-verify-tour-icon {
        width: 42px; height: 42px; background: rgba(59,130,246,0.2); border-radius: 50%;
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .ovd-verify-tour-icon i { color: #60a5fa; font-size: 18px; }
    .ovd-verify-tour-badge {
        background: rgba(16,185,129,0.2); color: #34d399; font-size: 10px; font-weight: 700;
        letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; text-transform: uppercase;
    }
    .ovd-verify-tour-body { padding: 10px 24px 4px; }
    .ovd-verify-tour-body h6 { color: var(--dt-on-color); font-weight: 700; margin-bottom: 6px; }
    .ovd-verify-tour-body p { color: #94a3b8; font-size: 13px; margin-bottom: 0; }
    .ovd-vt-credits { color: #34d399; font-weight: 700; }
    /* stepper 1 Email - 2 Phone - 3 Face ID */
    .ovd-vt-steps { display: flex; align-items: center; gap: 8px; padding: 12px 24px 2px; flex-wrap: wrap; }
    .ovd-vt-step {
        display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px;
        border: 0; border-radius: 999px;
        color: #94a3b8; font-size: 12px; font-weight: 600;
    }
    .ovd-vt-step .num {
        display: inline-flex; align-items: center; justify-content: center;
        width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.10);
        font-size: 11px; font-weight: 700;
    }
    .ovd-vt-step.is-on { border-color: #60a5fa; color: var(--dt-on-color); }
    .ovd-vt-step.is-on .num { background: rgba(59,130,246,0.35); color: #93c5fd; }
    .ovd-vt-step.is-done { border-color: rgba(16,185,129,0.5); color: #34d399; }
    .ovd-vt-step.is-done .num { background: rgba(16,185,129,0.25); color: #34d399; }
    /* pasos email / telefono */
    .ovd-vt-panel { margin: 14px 24px 10px; background: rgba(255,255,255,0.05); border-radius: 12px; padding: 16px; }
    .ovd-vt-panel[hidden] { display: none !important; }
    .ovd-vt-panel label { display: block; color: var(--dt-text); font-size: 12px; font-weight: 600; margin-bottom: 6px; }
    .ovd-vt-row { display: flex; gap: 8px; flex-wrap: wrap; }
    .ovd-vt-input {
        flex: 1 1 200px; min-width: 0; padding: 9px 13px; border-radius: 9px;
        border: 0; background: rgba(255,255,255,0.06);
        color: var(--dt-on-color); font-size: 13.5px; outline: 0;
    }
    .ovd-vt-input:focus { border-color: #60a5fa; }
    .ovd-vt-btn {
        appearance: none; border: 0; border-radius: 9px; padding: 9px 16px; cursor: pointer;
        background: #2563eb; color: var(--dt-cta-fg); font-size: 13px; font-weight: 700; white-space: nowrap;
    }
    .ovd-vt-btn:disabled { opacity: .5; cursor: default; }
    .ovd-vt-btn.ghost { background: rgba(255,255,255,0.10); color: var(--dt-text); }
    .ovd-vt-coderow { margin-top: 10px; }
    .ovd-vt-coderow[hidden] { display: none !important; }
    .ovd-vt-face { margin: 14px 24px 10px; background: rgba(255,255,255,0.05); border-radius: 12px; padding: 12px; }
    .ovd-vt-face[hidden] { display: none !important; }
    .ovd-vt-face iframe { width: 100%; height: 405px; border: none; border-radius: 8px; background: transparent; }
    .ovd-vt-status { padding: 0 24px 6px; font-size: 13px; min-height: 22px; }
    .ovd-vt-status .ok { color: #34d399; font-weight: 600; }
    .ovd-vt-status .ko { color: #f87171; font-weight: 600; }
    .ovd-vt-status .info { color: #94a3b8; }
    .ovd-verify-tour-footer {
        display: flex; align-items: center; gap: 8px; padding: 10px 24px 18px; color: #64748b; font-size: 11px;
    }
    .ovd-vt-success { text-align: center; padding: 30px 24px; }
    .ovd-vt-success i { font-size: 44px; color: #34d399; margin-bottom: 12px; display: block; }
    .ovd-vt-success i.warn { color: #fbbf24; }
    .ovd-vt-success h6 { color: var(--dt-on-color); font-weight: 700; }
    .ovd-vt-success p { color: #94a3b8; font-size: 13px; }
    .ovd-vt-success .ovd-vt-btn { margin-top: 12px; }
    /* ═══ Dirección 26-10 (Marc: "minimalista, moderno y futurista como ElevenLabs, y mejor") ═══ Verificar cuenta: la tarjeta oscura
       deja el degradado marino y el brillo azul (fondo plano en tinta oscura, igual que el escenario de Novedades de la home); icono en
       círculo neutro translúcido; el botón azul pasa a CTA invertido (blanco sobre la tarjeta) y el foco a línea blanca. */
    .ovd-verify-tour { background: var(--dt-surface); }
    .ovd-verify-tour::before { display: none; }
    .ovd-verify-tour-icon { background: rgba(255,255,255,0.08); border: 0; }
    .ovd-vt-input:focus { border-color: rgba(255,255,255,0.55); }
    .ovd-vt-btn { background: var(--dt-surface); color: var(--dt-text); font-weight: 600; border-radius: 8px; }
    .ovd-vt-btn:hover:not(:disabled) { background: var(--dt-surface-2); }
    .ovd-vt-btn.ghost { background: transparent; color: var(--dt-text); border: 0; }

}
/* end dui-template-style modals/verify-account:0 */
/* dui-template-style {"key":"modals/whatsia:0","bytes":5469,"sha256":"2873bc6cfa02aa1c3943f50ee33c1408b71637f9a8e7b5698db4716bac85a2e6","media":null,"source_sha256":"2873bc6cfa02aa1c3943f50ee33c1408b71637f9a8e7b5698db4716bac85a2e6"} */
@scope (:root:has(template[data-dui-legacy-style="modals/whatsia:0"])) {

    /* Controles exclusivos del modal de configuración de canales. */
    #whatsia-settings-form #whatsia_assign_options {
        gap: 10px !important;
    }

    #whatsia-settings-form .whatsia-radio-card {
        overflow: hidden;
        background: var(--dt-surface, var(--bg-color)) !important;
        border: 1px solid var(--dt-border-strong, var(--border-color)) !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        transition: background-color .12s ease, border-color .12s ease !important;
    }

    #whatsia-settings-form .whatsia-radio-card:hover {
        background: var(--dt-hover, var(--hover-color)) !important;
    }

    #whatsia-settings-form .whatsia-radio-card:has(input[name="whatsia_assign_mode"]:checked) {
        background: var(--dt-active, var(--hover-color)) !important;
        border-color: var(--dt-text, var(--text-color)) !important;
    }

    #whatsia-settings-form .whatsia-radio-card > label {
        display: grid !important;
        grid-template-columns: 18px minmax(0, 1fr);
        width: 100%;
        min-height: 68px;
        padding: 12px !important;
        margin: 0 !important;
        align-items: start !important;
        gap: 10px;
        box-sizing: border-box;
    }

    #whatsia-settings-form .whatsia-radio-card > label > div {
        min-width: 0;
    }

    #whatsia-settings-form .whatsia-radio-card > label p {
        line-height: 1.4;
    }

    #whatsia-settings-form input[type="radio"][name="whatsia_assign_mode"] {
        -webkit-appearance: none !important;
        appearance: none !important;
        display: grid !important;
        width: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        height: 18px !important;
        min-height: 18px !important;
        max-height: 18px !important;
        padding: 0 !important;
        margin: 2px 0 0 !important;
        place-content: center;
        color: var(--dt-text, var(--text-color));
        background: var(--dt-surface, var(--bg-color)) !important;
        border: 1px solid var(--dt-border-strong, var(--border-color)) !important;
        border-radius: 50% !important;
        box-shadow: none !important;
        flex: 0 0 18px;
    }

    #whatsia-settings-form input[type="radio"][name="whatsia_assign_mode"]::before {
        width: 8px;
        height: 8px;
        content: "";
        background: currentColor;
        border-radius: 50%;
        transform: scale(0);
        transition: transform .12s ease;
    }

    #whatsia-settings-form input[type="radio"][name="whatsia_assign_mode"]:checked {
        border-color: var(--dt-text, var(--text-color)) !important;
    }

    #whatsia-settings-form input[type="radio"][name="whatsia_assign_mode"]:checked::before {
        transform: scale(1);
    }

    #whatsia-settings-form input[type="radio"][name="whatsia_assign_mode"]:focus-visible {
        outline: 0 !important;
        box-shadow: 0 0 0 2px var(--dt-focus-ring, rgba(15, 15, 15, .14)) !important;
    }

    #whatsia-settings-form select.form-select {
        -webkit-appearance: none !important;
        appearance: none !important;
        min-height: 38px;
        padding: 8px 36px 8px 10px !important;
        color: var(--dt-text, var(--text-color)) !important;
        background-color: var(--dt-surface, var(--bg-color)) !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.25 6 6.25l5-5' stroke='%235f5f5c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 11px center !important;
        background-size: 12px 8px !important;
        border: 0 !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        font-size: 13px !important;
        line-height: 1.25;
    }

    [data-bs-theme="dark"] #whatsia-settings-form select.form-select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.25 6 6.25l5-5' stroke='%23aaa9a5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    }

    #whatsia-settings-form select.form-select:hover {
        border-color: var(--dt-border-strong, var(--border-color)) !important;
    }

    #whatsia-settings-form select.form-select:focus {
        outline: 0 !important;
        border-color: var(--dt-focus, var(--text-color)) !important;
        box-shadow: 0 0 0 2px var(--dt-focus-ring, rgba(15, 15, 15, .12)) !important;
    }

    #whatsia-settings-form select.form-select:disabled {
        cursor: not-allowed;
        opacity: .58;
    }

    #whatsia-settings-form select.form-select option {
        color: var(--dt-text, var(--text-color));
        background: var(--dt-surface, var(--bg-color));
        font-size: 13px;
    }

    #whatsia-settings-form select.whatsia_member_power {
        min-height: 32px;
        height: 32px;
        padding: 4px 30px 4px 8px !important;
        background-position: right 9px center !important;
        font-size: 12px !important;
    }

}
/* end dui-template-style modals/whatsia:0 */