/* ============================================================================
   BiDashboard — Tableros dinamicos (prefijo .bdsh-)
   Rediseno "modulo primero": pestanas de tableros + edicion inline + popovers.
   Tokens del handoff (design_handoff_dashboards_dinamicos), tenant-aware:
   el azul de accion/activo se enlaza a var(--primario); naranja/ambar fijos.
   NOTA (regla containing-block): NUNCA transform/filter/backdrop-filter en
   ancestros de los elementos position:fixed (modales). El scale del drag va
   solo en la tarjeta del widget, que no es ancestro de los modales.
   ============================================================================ */

.bdsh-root {
    /* flex column que llena el .content-wrapper (flex col del layout) para que
       solo la rejilla (section.content) haga scroll y las barras queden fijas arriba. */
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;

    --bdsh-primary: var(--primario, #1c4f87);
    --bdsh-orange: #f57c00;
    --bdsh-orange-h: #e06f00;
    --bdsh-amber: #f0ad4e;
    --bdsh-ink: #233242;
    --bdsh-muted: #7b8794;
    --bdsh-terc: #5a6b7d;
    --bdsh-chipoff: #3d4f61;
    --bdsh-line: #dde4ec;
    --bdsh-ctl: #c8d3df;
    --bdsh-dash: #9fb3c8;
    --bdsh-surface: #fff;
    --bdsh-hover: #eef4fb;
    --bdsh-hover2: #f2f8ff;
    --bdsh-soft: #f6f9fc;

    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--bdsh-ink);
}

@keyframes bdsh-fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Sub-barra: breadcrumb + pestanas + acciones ── */
.bdsh-subbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: var(--bdsh-surface);
    border-bottom: 1px solid var(--bdsh-line);
    flex-wrap: wrap;
}

.bdsh-crumb { font-size: 13px; color: var(--bdsh-muted); }
.bdsh-crumb a { color: var(--bdsh-primary); text-decoration: none; }
.bdsh-crumb a:hover { filter: brightness(.85); }
.bdsh-crumb b { color: var(--bdsh-ink); }

.bdsh-tabs { display: flex; gap: 6px; margin-left: 14px; flex-wrap: wrap; align-items: center; }

.bdsh-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--bdsh-ctl);
    background: var(--bdsh-surface);
    color: var(--bdsh-chipoff);
    white-space: nowrap;
    transition: border-color .15s;
}

.bdsh-tab:hover { border-color: var(--bdsh-primary); }
.bdsh-tab--on { background: var(--bdsh-primary); color: #fff; border-color: var(--bdsh-primary); }
.bdsh-tab--drop { border-color: var(--bdsh-orange); }
.bdsh-tab__grab { color: rgba(0, 0, 0, .3); cursor: grab; letter-spacing: -2px; }
.bdsh-tab--on .bdsh-tab__grab { color: rgba(255, 255, 255, .55); }

.bdsh-tab-nuevo {
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px dashed var(--bdsh-dash);
    background: var(--bdsh-surface);
    color: var(--bdsh-primary);
}

.bdsh-tab-nuevo:hover { border-color: var(--bdsh-primary); background: var(--bdsh-hover2); }

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

.bdsh-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 5px;
    border: 1px solid var(--bdsh-primary);
    background: var(--bdsh-surface);
    color: var(--bdsh-primary);
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s;
}

.bdsh-btn:hover:not(:disabled) { background: var(--bdsh-hover2); }
.bdsh-btn:disabled { opacity: .5; cursor: not-allowed; }

.bdsh-btn--danger { border-color: #e3b3ad; color: #c0392b; padding: 7px 12px; }
.bdsh-btn--danger:hover:not(:disabled) { background: #fdf1ef; }

.bdsh-btn--primary {
    border: none;
    background: var(--bdsh-orange);
    color: #fff;
    padding: 7px 18px;
    box-shadow: 0 2px 6px rgba(245, 124, 0, .35);
}

.bdsh-btn--primary:hover:not(:disabled) { background: var(--bdsh-orange-h); }

/* ── Menu "+ Widget" (popover) ── */
.bdsh-addmenu {
    position: absolute;
    top: 40px;
    right: 0;
    z-index: 40;
    background: var(--bdsh-surface);
    border: 1px solid var(--bdsh-line);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(16, 32, 54, .18);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 240px;
    max-height: 60vh;
    overflow-y: auto;
    animation: bdsh-fadeUp .15s ease;
}

.bdsh-addmenu__vacio { padding: 10px; font-size: 12.5px; color: var(--bdsh-muted); }

.bdsh-addmenu__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    color: var(--bdsh-ink);
    text-align: left;
    font-family: inherit;
}

.bdsh-addmenu__item:hover:not(:disabled) { background: var(--bdsh-hover); }
.bdsh-addmenu__item:disabled { opacity: .5; cursor: not-allowed; }

.bdsh-addmenu__ico {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    flex: 0 0 auto;
}

.bdsh-addmenu__info { min-width: 0; }
.bdsh-addmenu__nombre { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bdsh-addmenu__desc { font-size: 11px; color: var(--bdsh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bdsh-ico--kpi { background: #43a047; }
.bdsh-ico--bar, .bdsh-ico--line, .bdsh-ico--pie { background: #3a5f8a; }
.bdsh-ico--table { background: #0097a7; }
.bdsh-ico--list { background: #f57c00; }
.bdsh-ico--alert { background: #c62828; }

/* ── Barra de periodo ── */
.bdsh-periodbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 20px;
    background: var(--bdsh-surface);
    border-bottom: 1px solid var(--bdsh-line);
    flex-wrap: wrap;
}

.bdsh-periodbar__lbl { font-size: 12px; font-weight: 700; color: var(--bdsh-muted); }

.bdsh-seg { display: flex; border: 1.5px solid var(--bdsh-ctl); border-radius: 6px; overflow: hidden; }

.bdsh-seg__op {
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    background: var(--bdsh-surface);
    color: var(--bdsh-chipoff);
    border-right: 1px solid var(--bdsh-line);
    user-select: none;
}

.bdsh-seg__op:last-child { border-right: none; }
.bdsh-seg__op:hover { background: var(--bdsh-hover); }
.bdsh-seg__op--on, .bdsh-seg__op--on:hover { background: var(--bdsh-primary); color: #fff; }

.bdsh-period__select {
    padding: 6px 10px;
    border: 1.5px solid var(--bdsh-ctl);
    border-radius: 5px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    color: var(--bdsh-ink);
    background: var(--bdsh-surface);
    cursor: pointer;
}

.bdsh-period__dates { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--bdsh-chipoff); }
.bdsh-period__dates input {
    padding: 5px 8px;
    border: 1.5px solid var(--bdsh-ctl);
    border-radius: 5px;
    font-size: 12px;
    font-family: inherit;
}

.bdsh-period__info { margin-left: auto; font-size: 12px; color: var(--bdsh-muted); }
.bdsh-period__info b { color: var(--bdsh-ink); }
.bdsh-period__ok { color: #2e7d32; font-weight: 700; }

/* ── Aviso de edicion ── */
.bdsh-edithint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background: #fff8ec;
    border-bottom: 1px solid #f3dfba;
    font-size: 12.5px;
    color: #8a6510;
}

/* ── Contenedor scrolleable ── */
section.content.bdsh-content {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    background: #eef2f6;
    padding: 0;
}

/* ── Rejilla de widgets (flujo, 12 columnas) ── */
.bdsh-grid {
    padding: 18px 20px 40px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
    align-items: stretch;
    position: relative;
}

.bdsh-item {
    position: relative;
    border-radius: 8px;
    min-width: 0;
    transition: opacity .15s, transform .15s, outline-color .15s;
}

.bdsh-grid--edit .bdsh-item { outline: 2px dashed var(--bdsh-dash); outline-offset: 3px; cursor: grab; }
.bdsh-item--drag { opacity: .35; }
.bdsh-item--over { outline: 2px solid var(--bdsh-orange) !important; transform: scale(1.02); }

/* barra de insercion */
.bdsh-item__bar {
    position: absolute;
    top: -6px;
    bottom: -6px;
    width: 5px;
    background: var(--bdsh-orange);
    border-radius: 3px;
    z-index: 8;
    box-shadow: 0 0 0 3px rgba(245, 124, 0, .25);
}

.bdsh-item__bar--left { left: -11px; }
.bdsh-item__bar--right { right: -11px; }

/* ── Controles por widget (edicion) ── */
.bdsh-wctrl {
    position: absolute;
    top: -10px;
    right: -8px;
    display: flex;
    gap: 5px;
    z-index: 6;
}

.bdsh-wctrl button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--bdsh-ctl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--bdsh-muted);
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(16, 32, 54, .15);
    padding: 0;
}

.bdsh-wctrl button:hover { border-color: var(--bdsh-primary); }
.bdsh-wctrl__grab { cursor: grab !important; }
.bdsh-wctrl__gear--on { background: var(--bdsh-primary) !important; color: #fff !important; border-color: var(--bdsh-primary) !important; }
.bdsh-wctrl__del { border-color: #e3b3ad !important; color: #c0392b !important; }
.bdsh-wctrl__del:hover { background: #c0392b !important; color: #fff !important; }

/* ── Popover de propiedades ── */
.bdsh-prop {
    position: absolute;
    top: 18px;
    z-index: 30;
    width: 250px;
    max-width: 86vw;
    background: #fff;
    border: 1px solid var(--bdsh-line);
    border-radius: 9px;
    box-shadow: 0 12px 34px rgba(16, 32, 54, .22);
    padding: 13px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: bdsh-fadeUp .15s ease;
    cursor: default;
}

.bdsh-prop--left { left: -8px; }
.bdsh-prop--right { right: -8px; }

.bdsh-prop__head { display: flex; align-items: center; font-size: 12.5px; font-weight: 700; }
.bdsh-prop__x { margin-left: auto; cursor: pointer; color: var(--bdsh-muted); }
.bdsh-prop__x:hover { color: var(--bdsh-ink); }
.bdsh-prop__lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; color: var(--bdsh-muted); text-transform: uppercase; margin-bottom: 5px; }

.bdsh-prop__input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1.5px solid var(--bdsh-ctl);
    border-radius: 5px;
    font-size: 12.5px;
    font-family: inherit;
}

.bdsh-prop__row { display: flex; gap: 4px; }

.bdsh-seg2 {
    flex: 1;
    text-align: center;
    padding: 6px 0;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid var(--bdsh-ctl);
    background: #fff;
    color: var(--bdsh-chipoff);
    user-select: none;
}

.bdsh-seg2:hover { border-color: var(--bdsh-primary); }
.bdsh-seg2--on { background: var(--bdsh-primary); color: #fff; border-color: var(--bdsh-primary); }

.bdsh-swatch {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    box-sizing: border-box;
    transition: transform .1s;
}

.bdsh-swatch:hover { transform: scale(1.12); }
.bdsh-swatch--on { border-color: #233242; }

/* Swatch de color personalizado: abre la paleta nativa del sistema */
.bdsh-swatch--pick {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: repeating-conic-gradient(#e8edf3 0% 25%, #fff 0% 50%) 50% / 8px 8px;
    overflow: hidden;
}

.bdsh-swatch--pick input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    opacity: 0;             /* el input real queda invisible: el swatch es la superficie */
    cursor: pointer;
}

.bdsh-swatch__ico { font-size: 12px; line-height: 1; pointer-events: none; }

.bdsh-prop__hint {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--bdsh-muted);
    margin-top: 5px;
}

/* KPI con color personalizado (hex): el fondo va inline, aquí solo el contraste */
.bdsh-kpi--custom { color: #fff; border-color: transparent; }
.bdsh-kpi--custom .bdsh-kpi__lbl { opacity: .85; }
.bdsh-kpi--custom .bdsh-skel__linea { background: rgba(255, 255, 255, .35); }

/* ── Tarjeta base de widget ── */
.bdsh-w {
    height: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--bdsh-line);
    border-radius: 8px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(16, 32, 54, .08);
    display: flex;
    flex-direction: column;
}

.bdsh-w__title {
    display: inline-block;
    align-self: flex-start;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--bdsh-primary);
    border-bottom: 3px solid var(--bdsh-amber);
    padding-bottom: 5px;
    margin-bottom: 14px;
}

.bdsh-w__title--sm { margin-bottom: 12px; }
.bdsh-w__chart { flex: 1 1 auto; min-height: 0; }

/* ── KPI ── */
.bdsh-kpi {
    height: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 13px 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(16, 32, 54, .08);
    border: 1px solid transparent;
}

.bdsh-kpi__lbl { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bdsh-kpi__val { font-size: 21px; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bdsh-kpi__val small { font-size: 12px; font-weight: 600; opacity: .8; }
.bdsh-kpi__sub { font-size: 11.5px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bdsh-kpi__delta { font-size: 11px; font-weight: 700; margin-left: 6px; }
.bdsh-kpi__delta--up { color: #d6f5d6; }
.bdsh-kpi__delta--down { color: #ffd9d4; }

/* estilo "colores": fondo = color del KPI */
.bdsh-kpi--gray { background: #9ea6ad; color: #fff; }
.bdsh-kpi--green { background: #43a047; color: #fff; }
.bdsh-kpi--teal { background: #0097a7; color: #fff; }
.bdsh-kpi--orange { background: #f57c00; color: #fff; }
.bdsh-kpi--blue { background: #3a5f8a; color: #fff; }
.bdsh-kpi--red { background: #c62828; color: #fff; }
.bdsh-kpi--gray .bdsh-kpi__lbl,
.bdsh-kpi--green .bdsh-kpi__lbl,
.bdsh-kpi--teal .bdsh-kpi__lbl,
.bdsh-kpi--orange .bdsh-kpi__lbl,
.bdsh-kpi--blue .bdsh-kpi__lbl,
.bdsh-kpi--red .bdsh-kpi__lbl { opacity: .85; }

/* ── Tabla ── */
.bdsh-tabla { width: 100%; overflow: auto; }
.bdsh-tabla table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bdsh-tabla th {
    font-weight: 700;
    color: var(--bdsh-muted);
    font-size: 11px;
    text-transform: uppercase;
    padding: 0 0 4px;
    text-align: left;
}
.bdsh-tabla td { padding: 4px 0; border-top: 1px solid #eef2f6; }
.bdsh-tabla td.bdsh-tabla__key { color: var(--bdsh-primary); font-weight: 600; }
.bdsh-tabla td.bdsh-tabla__num, .bdsh-tabla th.bdsh-tabla__num { text-align: right; font-weight: 700; }

/* ── Estados ── */
.bdsh-estado {
    height: 100%;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--bdsh-muted);
    font-size: 12px;
    text-align: center;
    padding: 8px;
}

.bdsh-estado i { font-size: 18px; color: var(--bdsh-primary); }
.bdsh-estado--error { color: #c0392b; }
.bdsh-estado--error i { color: #c0392b; }

/* ── Estado vacio del tablero (edicion) ── */
.bdsh-empty {
    grid-column: span 12;
    border: 2px dashed #b6c4d4;
    border-radius: 10px;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bdsh-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.bdsh-empty:hover { border-color: var(--bdsh-primary); color: var(--bdsh-primary); }

.bdsh-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 20px;
    color: var(--bdsh-muted);
    text-align: center;
}

.bdsh-vacio i { font-size: 42px; color: #c9d6e8; }

/* ── Modales (privilegios / nuevo) ── */
.bdsh-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 32, 54, .45);
    z-index: 1055;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bdsh-dialog {
    width: 460px;
    max-width: 92vw;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(16, 32, 54, .35);
    animation: bdsh-fadeUp .18s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}

.bdsh-dialog--wide { width: 520px; }

.bdsh-dialog__head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--bdsh-line);
    display: flex;
    align-items: center;
    gap: 10px;
}

.bdsh-dialog__ico {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: #eaf2fa;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bdsh-primary);
    flex: 0 0 auto;
}

.bdsh-dialog__title { font-size: 15px; font-weight: 700; }
.bdsh-dialog__sub { font-size: 12px; color: var(--bdsh-muted); }
.bdsh-dialog__x { margin-left: auto; cursor: pointer; color: var(--bdsh-muted); font-size: 16px; padding: 4px; background: none; border: none; }
.bdsh-dialog__x:hover { color: var(--bdsh-ink); }

.bdsh-dialog__body { padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.bdsh-dialog__foot { padding: 14px 20px; border-top: 1px solid var(--bdsh-line); display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

/* Resumen a la izquierda del pie (empuja los botones a la derecha) */
.bdsh-dialog__resumen { margin-right: auto; font-size: 11.5px; color: var(--bdsh-muted); }

.bdsh-field__lbl { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--bdsh-muted); text-transform: uppercase; margin-bottom: 8px; }
.bdsh-field__in {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1.5px solid var(--bdsh-ctl);
    border-radius: 6px;
    font-size: 13.5px;
    font-family: inherit;
}

.bdsh-chipset { display: flex; flex-wrap: wrap; gap: 7px; }

.bdsh-pchip {
    padding: 5px 13px;
    border-radius: 15px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--bdsh-ctl);
    background: #fff;
    color: var(--bdsh-chipoff);
    user-select: none;
}

.bdsh-pchip:hover { border-color: var(--bdsh-primary); }
.bdsh-pchip--on { background: var(--bdsh-primary); color: #fff; border-color: var(--bdsh-primary); }
.bdsh-pchip__edit {
    margin-left: 7px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .22);
    opacity: .9;
}

.bdsh-pchip__edit:hover { background: rgba(255, 255, 255, .38); }
.bdsh-pchip__edit--on { background: var(--bdsh-orange); color: #fff; opacity: 1; }

.bdsh-resumen { font-size: 12px; color: var(--bdsh-muted); background: var(--bdsh-soft); border-radius: 7px; padding: 10px 12px; }

.bdsh-tpls { display: flex; gap: 8px; }
.bdsh-tpl {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--bdsh-ctl);
    background: #fff;
    color: var(--bdsh-chipoff);
}

.bdsh-tpl--on { background: #eaf2fa; color: var(--bdsh-primary); border-color: var(--bdsh-primary); }

.bdsh-btn2 {
    padding: 8px 16px;
    border-radius: 5px;
    border: 1px solid var(--bdsh-ctl);
    background: #fff;
    color: var(--bdsh-ink);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}

.bdsh-search {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1.5px solid var(--bdsh-ctl);
    border-radius: 6px;
    font-size: 12.5px;
    font-family: inherit;
    margin-bottom: 8px;
}

.bdsh-userlist { max-height: 190px; overflow-y: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   Editor de privilegios del tablero — prefijo .bpv-
   ══════════════════════════════════════════════════════════════════════════ */
.bpv { display: flex; flex-direction: column; gap: 20px; }
.bpv__sec { display: flex; flex-direction: column; gap: 10px; }

.bpv__lbl {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--bdsh-muted);
}

.bpv__hint {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #a7b4c4;
}

.bpv__vacio { font-size: 12.5px; color: var(--bdsh-muted); }
.bpv__vacio--fila { padding: 14px 4px; text-align: center; }

/* ── Visibilidad: 3 tarjetas ── */
.bpv__vis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.bpv__viscard {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 13px;
    border: 1.5px solid var(--bdsh-ctl);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.bpv__viscard:hover { border-color: var(--bdsh-primary); }

.bpv__viscard--on {
    background: #1c2f47;
    border-color: #1c2f47;
    color: #fff;
}

.bpv__radio {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    margin-top: 2px;
    border-radius: 50%;
    border: 2px solid var(--bdsh-ctl);
    background: #fff;
}

.bpv__radio--on {
    border-color: #fff;
    box-shadow: inset 0 0 0 3px #1c2f47;
    background: #fff;
}

.bpv__vistxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bpv__vistit { font-size: 13px; font-weight: 700; }
.bpv__vissub { font-size: 11px; opacity: .65; }
.bpv__viscard--on .bpv__vissub { opacity: .75; }

/* ── Chips de roles ── */
.bpv__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.bpv__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1.5px solid var(--bdsh-ctl);
    background: #fff;
    color: var(--bdsh-chipoff);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    transition: border-color .15s;
}

.bpv__chip:hover { border-color: var(--bdsh-primary); }

.bpv__chip--on {
    background: #1c2f47;
    border-color: #1c2f47;
    color: #fff;
    padding: 5px 7px 5px 12px;
    cursor: default;
}

.bpv__check { font-size: 10px; }
.bpv__mas { font-size: 12px; color: var(--bdsh-primary); }
.bpv__chipnom { white-space: nowrap; }

/* segmentado Ver | Editar dentro del chip / de la fila */
.bpv__seg {
    display: inline-flex;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, .14);
    flex: 0 0 auto;
}

.bpv__seg--claro { background: #eef2f6; }

.bpv__segop {
    padding: 4px 10px;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    color: inherit;
    opacity: .7;
    user-select: none;
    white-space: nowrap;
}

.bpv__segop:hover { opacity: 1; }
.bpv__seg--claro .bpv__segop { color: var(--bdsh-chipoff); }

.bpv__segop--on {
    background: var(--bdsh-orange);
    color: #fff !important;
    opacity: 1;
}

.bpv__x {
    font-size: 11px;
    opacity: .6;
    cursor: pointer;
    padding: 0 4px;
}

.bpv__x:hover { opacity: 1; }
.bpv__x--fila { color: var(--bdsh-muted); flex: 0 0 auto; }
.bpv__x--fila:hover { color: #c0392b; }

/* ── Listas de personas ── */
.bpv__lista { display: flex; flex-direction: column; gap: 6px; }
.bpv__lista--scroll { max-height: 230px; overflow-y: auto; padding-right: 2px; }

.bpv__fila {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border: 1px solid var(--bdsh-line);
    border-radius: 10px;
    background: #fff;
}

.bpv__fila:hover { border-color: #c8d3df; background: var(--bdsh-soft); }

.bpv__avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
}

.bpv__filatxt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bpv__filanom { font-size: 13px; font-weight: 700; color: var(--bdsh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bpv__filasub { font-size: 11px; color: var(--bdsh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bpv__agregar {
    flex: 0 0 auto;
    padding: 5px 12px;
    border-radius: 14px;
    border: 1.5px solid var(--bdsh-ctl);
    background: #fff;
    color: var(--bdsh-primary);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.bpv__agregar:hover { border-color: var(--bdsh-primary); background: var(--bdsh-hover2); }

/* ── Buscador ── */
.bpv__buscar { position: relative; }

.bpv__lupa {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #b6c4d4;
    font-size: 12px;
    pointer-events: none;
}

.bpv__buscar input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px 10px 33px;
    border: 1.5px solid var(--bdsh-ctl);
    border-radius: 10px;
    font-size: 12.5px;
    font-family: inherit;
}

.bpv__buscar input:focus { outline: none; border-color: var(--bdsh-primary); }

.bpv__resumen {
    font-size: 12px;
    color: var(--bdsh-muted);
    background: var(--bdsh-soft);
    border-radius: 9px;
    padding: 11px 13px;
}

@media (max-width: 560px) {
    .bpv__vis { grid-template-columns: 1fr; }
}

/* ── Esquemas del modo diseño (sin datos reales → arrastrar es instantáneo) ──
   Todo CSS puro: ni SVG ni animaciones costosas durante el drag. */
.bdsh-skel__linea {
    display: block;
    height: 9px;
    width: 60%;
    border-radius: 4px;
    background: rgba(255, 255, 255, .35);
}

.bdsh-kpi--gray .bdsh-skel__linea,
.bdsh-kpi--green .bdsh-skel__linea,
.bdsh-kpi--teal .bdsh-skel__linea,
.bdsh-kpi--orange .bdsh-skel__linea,
.bdsh-kpi--blue .bdsh-skel__linea,
.bdsh-kpi--red .bdsh-skel__linea { background: rgba(255, 255, 255, .35); }

.bdsh-skel__chart {
    flex: 1 1 auto;
    min-height: 90px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding-top: 6px;
}

.bdsh-skel__barra {
    flex: 1;
    background: #e4eaf2;
    border-radius: 3px 3px 0 0;
    min-height: 6px;
}

.bdsh-skel__pie {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #b6c4d4;
    text-align: center;
    padding-top: 6px;
}

.bdsh-skel__tabla { display: flex; flex-direction: column; gap: 8px; }
.bdsh-skel__fila { display: flex; gap: 10px; }
.bdsh-skel__celda { height: 9px; border-radius: 4px; background: #e4eaf2; }

/* Botón de acción en estado activo (ej. Vista previa encendida) */
.bdsh-btn--on { background: var(--bdsh-primary); color: #fff; border-color: var(--bdsh-primary); }
.bdsh-btn--on:hover:not(:disabled) { background: var(--bdsh-primary); filter: brightness(1.08); }

/* ── Asistente IA ── */
.bdsh-btn--ia { border-color: #7e57c2; color: #7e57c2; }
.bdsh-btn--ia:hover:not(:disabled) { background: #f5f0fc; }

.bdsh-ia__nota { font-size: 11px; color: var(--bdsh-muted); margin-top: 6px; }
.bdsh-ia__lista { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }

.bdsh-ia__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border: 1px solid var(--bdsh-line);
    border-radius: 6px;
    background: var(--bdsh-soft);
}

textarea.bdsh-field__in { resize: vertical; font-family: inherit; }

/* ── Gestión de tableros (módulo Bi) — prefijo .bgt- ── */
.bgt-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 20px;
    background: var(--bdsh-surface);
    border-bottom: 1px solid var(--bdsh-line);
    flex-wrap: wrap;
}

.bgt-head__txt { flex: 1 1 auto; min-width: 0; }
.bgt-title { margin: 4px 0 2px; font-size: 21px; font-weight: 700; color: var(--bdsh-ink); }
.bgt-sub { font-size: 12.5px; color: var(--bdsh-muted); }

.bgt-filtros {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: var(--bdsh-surface);
    border-bottom: 1px solid var(--bdsh-line);
    flex-wrap: wrap;
}

.bgt-buscar {
    width: 260px;
    padding: 7px 12px;
    border: 1.5px solid var(--bdsh-ctl);
    border-radius: 6px;
    font-size: 12.5px;
    font-family: inherit;
}

.bgt-conteo { margin-left: auto; font-size: 11.5px; color: var(--bdsh-muted); }

.bgt-tabla { padding: 14px 20px 40px; overflow-x: auto; }
.bgt-tabla table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--bdsh-line); border-radius: 8px; }
.bgt-tabla th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--bdsh-muted);
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--bdsh-line);
    background: var(--bdsh-soft);
}
.bgt-tabla td { padding: 10px 12px; border-bottom: 1px solid #eef2f6; font-size: 12.5px; vertical-align: middle; }
.bgt-tabla tbody tr:last-child td { border-bottom: none; }
.bgt-tabla tbody tr:hover { background: var(--bdsh-hover); }
.bgt-tabla tbody tr { transition: background .15s, box-shadow .15s; }
.bgt-row--drop { box-shadow: inset 0 -3px 0 var(--bdsh-orange); }

.bgt-grab { color: #b6c4d4; cursor: grab; letter-spacing: -2px; text-align: center; }
.bgt-nombre { font-weight: 700; color: var(--bdsh-ink); }
.bgt-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }

.bgt-badge {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 2px 7px;
    border-radius: 9px;
    background: #eef2f8;
    color: #56708f;
}

.bgt-badge--inicio { background: var(--bdsh-orange); color: #fff; }
.bgt-badge--suave { background: transparent; color: var(--bdsh-muted); border: 1px solid var(--bdsh-line); }

.bgt-modulo {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--bdsh-primary);
    background: #eaf2fa;
    padding: 3px 9px;
    border-radius: 10px;
    white-space: nowrap;
}

.bgt-visible { color: var(--bdsh-muted); font-size: 11.5px; }
.bgt-acciones { text-align: right; white-space: nowrap; }

.bgt-ico {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--bdsh-ctl);
    color: var(--bdsh-muted);
    cursor: pointer;
    font-size: 12px;
    margin-left: 4px;
    padding: 0;
}

.bgt-ico:hover:not(:disabled) { border-color: var(--bdsh-primary); color: var(--bdsh-primary); }
.bgt-ico:disabled { opacity: .35; cursor: not-allowed; }
.bgt-ico--on { background: var(--bdsh-orange); border-color: var(--bdsh-orange); color: #fff; }
.bgt-ico--danger:hover:not(:disabled) { border-color: #c0392b; color: #c0392b; background: #fdf1ef; }
.bgt-btn-editar { margin-left: 8px; padding: 5px 12px; }

/* ── Vista por defecto del módulo (sin tableros / pestaña "Inicio") ──
   Hoy solo el mensaje del módulo; crecerá con accesos directos, avisos, etc. */
.bdsh-defecto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 70px 20px;
    text-align: center;
}

.bdsh-defecto__ico {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    background: #eaf2fa;
    color: var(--bdsh-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 4px;
}

.bdsh-defecto__titulo { font-size: 19px; font-weight: 700; color: var(--bdsh-ink); }
.bdsh-defecto__sub { font-size: 13px; color: var(--bdsh-muted); max-width: 440px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .bdsh-grid { grid-template-columns: repeat(6, 1fr); }
    .bdsh-item { grid-column: span 6 !important; }
}

@media (max-width: 640px) {
    .bdsh-grid { grid-template-columns: 1fr; }
    .bdsh-item { grid-column: 1 / -1 !important; }
    .bdsh-period__info { margin-left: 0; }
}