/* Layout sidebar nuevo - claro/oscuro */
:root {
    --bg-card: #ffffff;
    --bg-card-alt: #DDE5E6;
    --bg-card-alt2: #F1F4F4;
    --bg-card-alt3: #DDE5E6;
    --bg-pill: #ffffff;
    --bg-pill-hover: #f0f3f5;
    --bg-accion: #E6F5F3;
    --bg-accion-hover: #d8efeb;
    --bg-tag: #e6e9eb;
    --bg-main: #FFFFFF;
    --bg-sidebar: #ffffff;
    --bg-topbar: #ffffff;
    --text-main: #1a1a1a;
    --text-muted: #6b6b6b;
    --text-soft: #041D28;
    --text-accion: #00828E;
    --border-soft: #C8D2D0;
    --border-pill: #f1f4f4;
    --side-active-bg: #E6F5F3;
    --side-active-text: #00AF9D;
    --btn-primary: #0C5460;
    --btn-primary-hover: #0A464F;
    --danger: #d9534f;
}
body.theme-dark {
    --bg-card: #172A2E;
    --bg-card-alt: #000D12;
    --bg-card-alt2: #000D12;
    --bg-card-alt3: #001A25;
    --bg-pill: #172A2E;
    --bg-pill-hover: #1f3a3e;
    --bg-accion: #004D4F;
    --bg-accion-hover: #006063;
    --bg-tag: #1f3a3e;
    --bg-main: #033A46;
    --bg-sidebar: #172A2E;
    --bg-topbar: #172A2E;
    --text-main: #ffffff;
    --text-muted: #8ea3ad;
    --text-soft: #d6dee0;
    --text-accion: #ffffff;
    --border-soft: #1f3a3e;
    --border-pill: #000D12;
    --side-active-bg: transparent;
    --side-active-text: #14C8B0;
    --btn-primary: #004D4F;
    --btn-primary-hover: #006063;
    --danger: #ff5b5b;
}

body {
    font-family: var(--font-dm-sans, 'DM Sans'), sans-serif;
}

/* ── Selects estilo iBica React ─────────────────────────────────────────────
   Hace que los <select> nativos (asp:DropDownList con CssClass="form-control
   input-sm") se parezcan al componente SelectDropdown del front React:
   sin borde, fondo suave, esquinas redondeadas (rounded-xl) y chevron propio en
   color primario. Aplicar sumando la clase "select-react" al CssClass del
   DropDownList. */
select.select-react,
select.select-react.form-control,
select.select-react.form-control.input-sm {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: auto;
    padding: 8px 40px 8px 16px;
    border: none;
    border-radius: 12px;       /* rounded-xl */
    background-color: var(--bg-card-alt2);
    color: var(--text-soft);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23075F6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
    transition: background-color .15s ease;
    cursor: pointer;
}
select.select-react:hover:not([disabled]) {
    background-color: var(--bg-card-alt);
}
select.select-react:focus {
    outline: none;
}
select.select-react[disabled] {
    opacity: .5;
    cursor: not-allowed;
}
body.theme-dark select.select-react,
body.theme-dark select.select-react.form-control,
body.theme-dark select.select-react.form-control.input-sm {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2314C8B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ── Dropdown custom (JS) para .select-react ────────────────────────────────
   Reemplaza el popup nativo (cuadrado, viejo) por un panel de opciones con el
   mismo look que el SelectDropdown de React. Ver Scripts/select-react.js. */
.select-react-ui-wrap {
    position: relative;
    width: 100%;
}
.select-react-native-hidden {
    display: none !important;
}
/* Trigger: mismo aspecto que select.select-react */
.select-react-ui {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    min-height: 40px;
    margin: 0;
    padding: 8px 40px 8px 16px;
    border: none;
    border-radius: 12px;       /* rounded-xl */
    background-color: var(--bg-card-alt2);
    color: var(--text-soft);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23075F6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
    transition: background-color .15s ease;
    cursor: pointer;
}
.select-react-ui:hover:not([disabled]) {
    background-color: var(--bg-card-alt);
}
.select-react-ui-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-react-ui:focus {
    outline: none;
}
.select-react-ui[disabled] {
    opacity: .5;
    cursor: not-allowed;
}
.select-react-ui-wrap.is-open .select-react-ui {
    background-color: var(--bg-card-alt);
}
/* Panel de opciones. position:fixed + coords calculadas en JS (select-react.js)
   para que no lo recorte ningún ancestro con overflow:hidden (ej. la card). */
.select-react-panel {
    display: none;
    position: fixed;
    z-index: 1060;
    padding: 6px;
    max-height: 280px;
    overflow-y: auto;
    background-color: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 8px 40px -4px rgba(0, 0, 0, .22), 0 2px 12px 0 rgba(0, 0, 0, .10);
}
.select-react-ui-wrap.is-open .select-react-panel {
    display: block;
}
.select-react-option {
    display: block;
    width: 100%;
    text-align: left;
    margin: 0;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    cursor: pointer;
    transition: background-color .1s ease, color .1s ease;
}
.select-react-option + .select-react-option {
    margin-top: 2px;
}
.select-react-option:hover {
    background-color: var(--bg-pill-hover);
}
.select-react-option.is-selected {
    background-color: #DDE5E6; /* primary-100 */
    color: #075F6B;            /* primary */
    font-weight: 500;
}
/* Dark mode */
body.theme-dark .select-react-ui {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2314C8B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

body.theme-dark .select-react-option.is-selected {
    background-color: #004D4F; /* secondary-950 */
    color: #14C8B0;
}

/* ── Inputs estilo React ────────────────────────────────────────────────────
   Hace que los <input>/<asp:TextBox> (CssClass="form-control input-sm") se
   parezcan al Input del front React: sin borde, fondo suave (--bg-card-alt2),
   esquinas redondeadas (rounded-xl) y foco con anillo primario. Aplicar sumando
   la clase "input-react" al CssClass del TextBox. NO usar en los datePicker
   (input-group.fecha-input): esos tienen su propio estilo con addon.
   Usa !important porque las reglas .form-control de más abajo también lo usan. */
body.layout-sidebar input.input-react,
body.layout-sidebar input.input-react.form-control,
body.layout-sidebar input.input-react.form-control.input-sm,
body.layout-sidebar textarea.input-react {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: auto;
    min-height: 40px;
    padding: 8px 16px !important;
    border: none !important;
    border-radius: 12px !important;       /* rounded-xl */
    background-color: var(--bg-card-alt2) !important;
    color: var(--text-soft) !important;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: none !important;
    transition: background-color .15s ease, box-shadow .15s ease;
}
body.layout-sidebar input.input-react:hover:not([disabled]):not([readonly]),
body.layout-sidebar textarea.input-react:hover:not([disabled]):not([readonly]) {
    background-color: var(--bg-card-alt) !important;
}
/* ⚠️ Las tres variantes de clase tienen que repetirse acá. El bloque de arriba declara
   `box-shadow: none !important` sobre `input.input-react.form-control.input-sm` (0,4,2),
   que le ganaba a un `input.input-react:focus` (0,3,2) pelado: en los aspx migrados
   —donde el CssClass es siempre "form-control input-sm input-react"— el anillo de foco
   NO se dibujaba nunca. No simplificar esta lista. */
body.layout-sidebar input.input-react:focus,
body.layout-sidebar input.input-react.form-control:focus,
body.layout-sidebar input.input-react.form-control.input-sm:focus,
body.layout-sidebar textarea.input-react:focus,
body.layout-sidebar textarea.input-react.form-control:focus,
body.layout-sidebar textarea.input-react.form-control.input-sm:focus {
    outline: none;
    background-color: var(--bg-card-alt) !important;
    box-shadow: 0 0 0 2px var(--ring-focus, rgba(12, 84, 96, 0.15)) !important;
}
body.layout-sidebar input.input-react::placeholder,
body.layout-sidebar textarea.input-react::placeholder {
    color: var(--text-muted) !important;
}
body.layout-sidebar input.input-react[disabled],
body.layout-sidebar input.input-react[readonly],
body.layout-sidebar textarea.input-react[disabled],
body.layout-sidebar textarea.input-react[readonly] {
    background-color: var(--bg-pill-hover) !important;
    color: var(--text-muted) !important;
    -webkit-text-fill-color: var(--text-muted);
    opacity: 1;
    cursor: not-allowed;
}

body.layout-sidebar .ibica-menu-navegacion,
body.layout-sidebar .ibica-logo,
body.layout-sidebar #footer,
body.layout-sidebar .breadcrumb { display: none !important; }
body.layout-sidebar {
    background-color: var(--bg-main) !important;
    color: var(--text-soft);
    /* DM Sans: fuente de marca por defecto de la app nueva (cuerpo, labels,
       inputs, tablas, montos). Inter (--font-sans) queda como alternativa
       neutra y sólo se usa vía la clase .font-sans cuando hace falta. */
    font-family: var(--font-dm-sans, 'DM Sans'), sans-serif;
}
/* ============================================================
   Tipografía: forzar DM Sans en los elementos que traen su
   propia font-family desde otras hojas (Site.css usa Montserrat
   en body y Arial en inputs/tablas/botones). Scopeado al layout
   nuevo para no afectar vistas no migradas.
   ============================================================ */
body.layout-sidebar,
body.layout-sidebar h1,
body.layout-sidebar h2,
body.layout-sidebar h3,
body.layout-sidebar h4,
body.layout-sidebar h5,
body.layout-sidebar h6,
body.layout-sidebar p,
body.layout-sidebar label,
body.layout-sidebar span:not([class*="material-icons"]):not([class*="material-symbols"]):not([class*="glyphicon"]),
body.layout-sidebar div,
body.layout-sidebar a,
body.layout-sidebar button,
body.layout-sidebar input,
body.layout-sidebar select,
body.layout-sidebar textarea,
body.layout-sidebar table,
body.layout-sidebar .form-control,
body.layout-sidebar .btn,
body.layout-sidebar .GridTable,
body.layout-sidebar .GridView {
    font-family: var(--font-dm-sans, 'DM Sans'), sans-serif !important;
}
/* Fuente única del sitio: DM Sans */
body.layout-sidebar .font-sans {
    font-family: var(--font-dm-sans, 'DM Sans'), sans-serif !important;
}
body.layout-sidebar .ibica-header {
    position: fixed;
    left: 228px;
    width: calc(100% - 230px);
    height: 70px;
    background-color: var(--bg-topbar) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}
body.layout-sidebar .ibica-menu-usuario { order: 3; min-height: 0; padding-right: 0; }
body.layout-sidebar .main { margin-left: 228px; padding: 130px 10% 25px 10%; background-color: var(--bg-main); min-height: 100vh; }
.ibica-sidebar {
position: fixed;
top: 0;
left: 0;
width: 228px;
height: 100vh;
background-color: var(--bg-sidebar);
border-right: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    padding: 15px 12px;
    z-index: 6;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ibica-sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }
body.theme-dark .ibica-sidebar { border-right-color: #0a2424; }
.ibica-sidebar-logo { display: flex; align-items: center; padding: 5px 10px 15px 10px; }
.ibica-sidebar-logo img { height: 38px; }
.ibica-sidebar-top { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
    .ibica-sidebar-top .sb-pill,
    .ibica-sidebar-bottom .sb-pill {
        border: none;
        border-radius: 8px;
        padding: 4px 8px;
        font-size: 13px;
        color: var(--text-soft);
        background: var(--border-pill);
        text-align: left;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        text-decoration: none;
    }
.ibica-sidebar-bottom .sb-pill-close {
    border: 1px solid var(--border-pill);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 13px;
    color: red;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
}
.ibica-sidebar-top .sb-pill:hover,
.ibica-sidebar-bottom .sb-pill:hover {
    background-color: var(--bg-pill-hover); text-decoration: none; color: var(--text-soft);
}
.ibica-sidebar-nav { display: flex; flex-direction: column; padding: 1px 0; }
    .ibica-sidebar-nav a {
        display: block;
        padding: 4px 12px;
        color: var(--text-soft);
        font-size: 14px;
        font-weight:400;
        text-decoration: none;
        border-radius: 6px;
    }
    .ibica-sidebar-nav a:hover,
    .ibica-sidebar-nav a.active {
        background-color: transparent;
        color: var(--side-active-text);
        text-decoration: none;
    }
    .ibica-sidebar-nav a:hover > .material-icons,
    .ibica-sidebar-nav a.active > .material-icons {
        color: var(--side-active-text);
    }
.ibica-sidebar-bottom { margin-top: auto; padding-top: 5px; }
.ibica-sidebar-bottom .sb-pill { color: var(--danger); border-color: #f1c1bf; }
body.theme-dark .ibica-sidebar-bottom .sb-pill { border-color: #6b3535; }
.topbar-cotizaciones { display: flex; align-items: center; gap: 10px; color: var(--text-soft); font-size: 13px; }
.topbar-cotizaciones .sep { color: #b0b0b0; }
.topbar-acciones { display: flex; align-items: center; gap: 10px; }
.topbar-acciones .topbar-usuario,
.topbar-acciones .topbar-notif {
    background: var(--bg-card-alt); border-radius: 8px; padding: 10px 14px;
    display: flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: 13px; border: none;
}
.topbar-acciones .topbar-usuario .tag-tipo {
    border: 1px solid var(--border-pill); border-radius: 12px; font-size: 11px;
    padding: 1px 8px; margin: 0 6px; color: var(--text-soft);
}
.estas-en-bar {
    position: fixed; top: 70px; left: 228px; width: calc(100% - 230px); height: 48px;
    background: linear-gradient(90deg, #00AF9D 0%, #8FD400 100%); color: #ffffff;
    display: flex; align-items: center; padding: 0 25px; font-size: 14px; font-weight: 300; z-index: 3;
}
.card-cuenta-principal {
    background: var(--bg-card); border: none; border-radius: 12px;
    padding: 20px; box-shadow: none; margin-bottom: 18px;
}
.cuenta-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.cuenta-acciones .btn-cuenta-accion {
    flex: 1 1 0; min-width: 100px; background: var(--bg-accion); border: none;
    border-radius: 10px; padding: 14px 8px; display: flex; flex-direction: column;
    align-items: center; gap: 4px; color: var(--text-accion); font-size: 13px;
    text-decoration: none; cursor: pointer;
}
.cuenta-acciones .btn-cuenta-accion:hover { background: var(--bg-accion-hover); color: var(--text-accion); text-decoration: none; }
.cuenta-acciones .btn-cuenta-accion .material-icons { font-size: 22px !important; color: var(--text-soft); }
.card-ver-mas-opciones {
    background: var(--bg-card); border: none; border-radius: 12px;
    padding: 18px; box-shadow: none; margin-bottom: 18px;
}
.accesos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.accesos-grid .acceso-pill {
    background: var(--bg-accion); color: var(--text-accion); border: none; border-radius: 8px;
    padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-size: 13px;
    text-decoration: none; cursor: pointer; text-align: left;
}
.accesos-grid .acceso-pill:hover { background: var(--bg-accion-hover); color: var(--text-accion); text-decoration: none; }
.accesos-grid .acceso-pill .material-icons { font-size: 18px !important; color: var(--text-soft); }
.ver-mas-opciones-link {
    display: block; text-align: center; color: var(--text-muted); font-size: 13px;
    margin-top: 14px; text-decoration: none; cursor: pointer;
}
.ver-mas-opciones-link::before { content: "... "; }
.ver-mas-opciones-link:hover { color: var(--text-soft); text-decoration: none; }
.card-ver-mas-opciones #boxInicialAccesosFrecuentes,
.card-ver-mas-opciones .acceso-frecuente-contenedor { display: none !important; }
.banner-promo { margin: 0 0 18px 0; border-radius: 12px; overflow: hidden; text-align: center; }
.banner-promo img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.default-layout { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 0; }
.default-col-izq { flex: 1 1 50%; }
.default-col-der { flex: 1 1 50%; }
.card-movs-cuenta { background: transparent !important; padding: 0 !important; margin-top: 0; }
#sldrCuentasMovimientos .box-movimientos-item {
    background: var(--bg-card); border: 1px solid var(--border-soft) !important;
    border-radius: 10px; padding: 14px 18px !important; margin-bottom: 8px; display: block;
}
#sldrCuentasMovimientos .box-movimientos-item-linea1 {
    display: flex; justify-content: space-between; align-items: center;
    color: var(--text-main); font-size: 14px; font-weight: 500;
}
#sldrCuentasMovimientos .box-movimientos-item-descripcion {
    color: var(--text-muted) !important; font-size: 12px; margin-top: 4px;
}
#sldrCuentasMovimientos .badge,
#sldrCuentasMovimientos .label,
#sldrCuentasMovimientos .tag,
#sldrCuentasMovimientos .box-tag {
    background: var(--bg-tag); color: var(--text-soft); border-radius: 6px;
    padding: 2px 8px; font-size: 11px; font-weight: 500; text-transform: uppercase;
    display: inline-block; margin-top: 4px;
}
#sldrCuentasMovimientos table {
    width: 100%; border-collapse: separate; border-spacing: 0 8px; background: transparent !important;
}
#sldrCuentasMovimientos table td {
    border: none !important; background: var(--bg-card); padding: 12px 16px !important; color: var(--text-main);
}
#sldrCuentasMovimientos table tr td:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
#sldrCuentasMovimientos table tr td:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.card-cuenta-principal #sldrCuentas .informacion-cuenta {
    background: transparent; border: none !important; padding: 0; min-height: 0;
}
.card-cuenta-principal #sldrCuentas .informacion-cuenta-detalle { color: var(--text-soft); }
.card-cuenta-principal #sldrCuentas .informacion-cuenta-detalle > label { color: var(--text-soft); font-weight: 500; }
.card-cuenta-principal #sldrCuentas .informacion-cuenta-linea2 { justify-content: flex-start; }
.card-cuenta-principal #sldrCuentas .informacion-cuenta-linea2 > label {
    color: var(--text-main); font-size: 32px !important; font-weight: 400 !important;
}
.card-cuenta-principal .slick-dots { display: none !important; }
.default-col-der #boxInicialTarjetas { background: transparent; border: none; box-shadow: none; padding: 0; }
.default-col-der #sldrTarjetas .informacion-tarjeta-marco { padding: 0 8px;  }
.default-col-der #sldrTarjetasDatosAdicionales { display: none !important; }
/* ============================================================
   Botón hamburguesa (mobile) + backdrop del drawer lateral
   ============================================================ */
.sb-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    background: transparent !important;
    color: var(--text-soft);
    cursor: pointer;
    flex: 0 0 auto;
    order: 0;
}
.sb-mobile-toggle .material-icons,
.sb-mobile-toggle .material-icons-outlined,
.sb-mobile-toggle .material-symbols-outlined {
    font-size: 24px !important;
    color: var(--text-soft) !important;
}
.sb-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.45);
    z-index: 5;
}

@media (max-width: 992px) {
    /* Sidebar como panel deslizante (drawer), oculto por defecto */
    .ibica-sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 4px 0 24px rgba(0,0,0,.18);
    }
    body.sidebar-open .ibica-sidebar { transform: translateX(0); }

    /* Topbar, barra "Estás en" y contenido ocupan todo el ancho */
    body.layout-sidebar .ibica-header,
    body.layout-sidebar .estas-en-bar { left: 0; width: 100%; }
    body.layout-sidebar .main { margin-left: 0; }
    body.layout-sidebar .ibica-header { padding: 0 14px; }

    /* Mostrar hamburguesa y backdrop al abrir el drawer */
    .sb-mobile-toggle { display: inline-flex; }
    body.sidebar-open .sb-backdrop { display: block; }
    body.sidebar-open { overflow: hidden; }

    /* En mobile las cotizaciones no entran en la topbar */
    body.layout-sidebar .topbar-cotizaciones { display: none !important; }

    /* Barra verde: mostrar sólo el nombre de la página */
    body.layout-sidebar .estas-en-bar { font-size: 0; padding: 0 16px; }
    body.layout-sidebar .estas-en-bar .estas-en-pagina { font-size: 14px; margin-left: 0; }

    /* Distribución topbar: hamburguesa | usuario .......... campana */
    body.layout-sidebar .ibica-menu-usuario {
        flex: 1 1 auto;
        justify-content: space-between;
        margin-left: 13px;
    }

    /* Botón usuario como pill (anula el avatar circular #btnUserMenu antiguo) */
    body.layout-sidebar #btnUserMenu.btn-user {
        background: var(--bg-card-alt2) !important;
        background-image: none !important;
        border: none !important;
        border-radius: 12px !important;
        height: 44px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 170px) !important;
        padding: 0 12px !important;
        flex: 0 1 auto;
    }
    /* Mostrar icono, nombre, tag y caret del usuario (anula hidden-xs/sm de Bootstrap) */
    body.layout-sidebar .ibica-menu-usuario .btn-user .glyphicon-user,
    body.layout-sidebar .ibica-menu-usuario .btn-user > div > span:not(.glyphicon-user) {
        display: inline-flex !important;
    }

    /* Campana de notificaciones: sólo el icono */
    .topbar-notif-btn {
        padding: 0;
        width: 55px;
        justify-content: center;
        flex: 0 0 auto;
    }
    .topbar-notif-btn span:not([class*="material"]) { display: none; }

    .accesos-grid { grid-template-columns: 1fr; }
}
body.layout-sidebar #containerCotizaciones,
body.layout-sidebar #containerMenu { display: none !important; }
/* ============================================================
   App móvil (WebView): la app nativa provee su propio chrome de
   navegación, por eso ocultamos la topbar y la barra "Estás en"
   (breadcrumb) y recuperamos el espacio superior del contenido.
   Se activa con la clase `es-app` en el body (ver Site.Master.vb),
   equivalente al flag `esApp` del iBica React (?source=app).
   ============================================================ */
body.layout-sidebar.es-app .ibica-header,
body.layout-sidebar.es-app .estas-en-bar,
body.layout-sidebar.es-app .ibica-sidebar,
body.layout-sidebar.es-app .sb-backdrop { display: none !important; }
body.layout-sidebar.es-app .main { padding-top: 25px !important; margin-left: 0 !important; }
/* Embebido en iframe: el scroll lo maneja el shell React; ocultamos la barra de
   scroll del documento legacy (Firefox + WebKit) sin perder la capacidad de scrollear. */
body.layout-sidebar.es-app { scrollbar-width: none !important; -ms-overflow-style: none !important; }
body.layout-sidebar.es-app::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
/* ============================================================
   OVERRIDES para neutralizar ibica-Posicion.css en layout sidebar
   ============================================================ */
body.layout-sidebar .box-inicial {
    display: block !important;
    margin: 0 !important;
    background: transparent !important;
}
body.layout-sidebar #boxInicialCuentas,
body.layout-sidebar #boxInicialMovimientos,
body.layout-sidebar #boxInicialTarjetas,
body.layout-sidebar #boxInicialAccesosFrecuentes {
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    float: none !important;
    border-radius: 0 !important;
}
body.layout-sidebar .default-layout {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}
body.layout-sidebar .default-col-izq { flex: 1 1 0; min-width: 320px; }
body.layout-sidebar .default-col-der { flex: 1 1 0; min-width: 320px; }

body.layout-sidebar #sldrCuentas .slick-track { display: flex; align-items: flex-start; }
body.layout-sidebar #sldrCuentas .slick-slide { width: 100% !important; }
/* En el layout-sidebar el slider de cuentas no usa centerMode: anulamos el
   padding lateral que slick deja inline y evitamos que asome la cuenta vecina.
   adaptiveHeight ajusta la altura a la cuenta activa (se setea por JS). */
body.layout-sidebar #sldrCuentas .slick-list {
    padding: 0 !important;
}
body.layout-sidebar #sldrCuentas .slick-slide {
    height: auto !important;
    float: none;
}
body.layout-sidebar #sldrCuentas .informacion-cuenta-marco { padding: 0 !important; }
body.layout-sidebar #sldrCuentas .informacion-cuenta {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
}
body.layout-sidebar #sldrCuentas .informacion-cuenta.cuenta-favorita {
    border: none !important;
    background: transparent !important;
}
body.layout-sidebar #sldrCuentas .informacion-cuenta-linea1 {
    align-items: center;
    gap: 8px;
}
body.layout-sidebar #sldrCuentas .informacion-cuenta-icono-favorito > span { font-size: 28px !important; color: var(--text-main); }
body.layout-sidebar #sldrCuentas .informacion-cuenta-detalle { color: var(--text-main); }
body.layout-sidebar #sldrCuentas .informacion-cuenta-detalle > label {
    color: var(--text-main); font-weight: 600 !important; font-size: 18px !important; line-height: 22px !important;
}
body.layout-sidebar #sldrCuentas .btn-cuenta-qr > span { font-size: 24px !important; color: var(--text-muted); }
body.layout-sidebar #sldrCuentas .informacion-cuenta-linea2 {
    justify-content: flex-start !important;
    margin: 8px 0 6px 0 !important;
}
body.layout-sidebar #sldrCuentas .informacion-cuenta-linea2 > label {
    color: var(--text-main) !important;
    font-size: 34px !important;
    font-weight: 300 !important;
}
body.layout-sidebar #sldrCuentas .informacion-cuenta-saldo { font-weight: 300 !important; }
body.layout-sidebar #sldrCuentas .informacion-cuenta-linea3 { display: none !important; }
body.layout-sidebar #sldrCuentas .slick-dots { display: none !important; }
body.layout-sidebar #sldrCuentas .slick-arrow { display: none !important; }

body.layout-sidebar #sldrCuentasDatosAdicionales,
body.layout-sidebar #sldrTarjetasDatosAdicionales { display: none !important; }

body.layout-sidebar #sldrCuentasMovimientos .sld-informacion-adicional-item { margin-bottom: 12px; }
/* Ocultar nombre y saldo de la cuenta dentro de Movimientos: ya se muestran
   arriba en la card de la cuenta, evitamos duplicarlos. */
body.layout-sidebar #sldrCuentasMovimientos .informacion-movimientos-encabezado {
    display: none !important;
}
body.layout-sidebar #sldrCuentasMovimientos .informacion-movimientos-cuenta-descripcion {
    color: var(--text-main); font-weight: 500; font-size: 16px;
}
body.layout-sidebar #sldrCuentasMovimientos .informacion-movimientos-saldo {
    color: var(--text-main); font-weight: 600; font-size: 16px;
}
body.layout-sidebar #sldrCuentasMovimientos table.table {
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    background: transparent !important;
    border: none !important;
}
body.layout-sidebar #sldrCuentasMovimientos table.table tr td {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-soft) !important;
    border-left: none !important;
    border-right: none !important;
    padding: 14px 18px !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
}
body.layout-sidebar #sldrCuentasMovimientos table.table tr td:first-child {
    border-left: 1px solid var(--border-soft) !important;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
body.layout-sidebar #sldrCuentasMovimientos table.table tr td:last-child {
    border-right: 1px solid var(--border-soft) !important;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
/* Ocultar paginación y botón "Ver más" de Movimientos en la default */
body.layout-sidebar #sldrCuentasMovimientos .pagination,
body.layout-sidebar #sldrCuentasMovimientos .pager,
body.layout-sidebar #sldrCuentasMovimientos .div-VerMas {
    display: none !important;
}

body.layout-sidebar .default-col-der #boxInicialTarjetas { margin-top: 18px !important; }
body.layout-sidebar .default-col-der #boxInicialTarjetas .box-titulo { display: none !important; }
body.layout-sidebar .default-col-der #sldrTarjetas .slick-track { display: flex; align-items: flex-start; }
body.layout-sidebar .default-col-der #sldrTarjetas .informacion-tarjeta-marco { padding: 0 5px !important; }
/* Proporción de tarjeta de crédito real (≈1.49:1): ancho fijo para que con
   variableWidth (ver ibica-default-layout.js) cada slide mida lo que la tarjeta
   y queden juntas; la altura se calcula a partir del ancho. */
body.layout-sidebar .default-col-der #sldrTarjetas .informacion-tarjeta {
    min-height: 0 !important;
    width: 300px;
    max-width: 78vw;
    aspect-ratio: 1.6 / 0.9;
    background-size: cover !important;
    background-position: center !important;
}
/* Mostrar la paginación (puntos) del carrusel de tarjetas como en la imagen */
body.layout-sidebar .default-col-der #sldrTarjetas .slick-navbar-dots-narrows-together {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
}
body.layout-sidebar .default-col-der #sldrTarjetas .slick-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    width: 100%;
    padding-left: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
body.layout-sidebar .default-col-der #sldrTarjetas .slick-prev,
body.layout-sidebar .default-col-der #sldrTarjetas .slick-next { display: none !important; }

body.layout-sidebar { font-size: 14px !important; }
/* ============================================================
   Refinamiento componente CUENTA (match imagen)
   ============================================================ */
/* Quitar estrella de favorito */
body.layout-sidebar #sldrCuentas .informacion-cuenta-icono-favorito { display: none !important; }

/* Línea 1: tipo + número juntos pequeños, ícono ojo a la derecha */
body.layout-sidebar #sldrCuentas .informacion-cuenta-linea1 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2px;
}
body.layout-sidebar #sldrCuentas .informacion-cuenta-detalle {
    padding-left: 0 !important;
    display: flex !important;
    align-items: baseline;
    gap: 2px;
    flex-grow: 1;
}
body.layout-sidebar #sldrCuentas .informacion-cuenta-detalle > label {
    display: inline-block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    color: var(--text-soft) !important;
    margin: 0 !important;
}
body.layout-sidebar #sldrCuentas .informacion-cuenta-detalle-tipo {
    text-transform: capitalize;
}
body.layout-sidebar #sldrCuentas .informacion-cuenta-detalle-numero {
    color: var(--text-main) !important;
    font-weight: 600 !important;
}
body.layout-sidebar #sldrCuentas .informacion-cuenta-detalle-producto,
body.layout-sidebar #sldrCuentas .informacion-cuenta-detalle-monedasaldo {
    display: none !important;
}

/* Botón "ojo" (reusa el botón QR que ya existe) */
body.layout-sidebar #sldrCuentas .informacion-cuenta-qr { flex-grow: 0; }
body.layout-sidebar #sldrCuentas .btn-cuenta-qr {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer;
}
body.layout-sidebar #sldrCuentas .btn-cuenta-qr > span {
    font-size: 22px !important;
    color: var(--text-soft) !important;
}

/* Línea 2: saldo a la izquierda, nombre titular a la derecha */
body.layout-sidebar #sldrCuentas .informacion-cuenta-linea2 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin: 4px 0 6px 0 !important;
    width: 100%;
}
body.layout-sidebar #sldrCuentas .informacion-cuenta-linea2 > label {
    font-size: 30px !important;
    font-weight: 300 !important;
    color: var(--text-main) !important;
    letter-spacing: -0.5px;
}
body.layout-sidebar #sldrCuentas .informacion-cuenta-saldo {
    font-weight: 300 !important;
    margin-left: 2px;
}
/* Nombre titular (inyectado por JS) */
body.layout-sidebar #sldrCuentas .cuenta-titular-nombre {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-soft) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Ocultar saldo (toggle) */
body.layout-sidebar #sldrCuentas .informacion-cuenta-saldo.saldo-oculto {
    filter: blur(8px);
    user-select: none;
}

/* Flecha "ver más" a la derecha del card de cuenta */
body.layout-sidebar .card-cuenta-principal { position: relative; }
body.layout-sidebar .card-cuenta-principal .card-cuenta-chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    z-index: 21;
}
body.layout-sidebar .card-cuenta-principal .card-cuenta-chevron .material-icons {
    font-size: 22px !important;
}
/* ============================================================
   Márgenes laterales más amplios para el contenido del default
   ============================================================ */
body.layout-sidebar .default-page-wrap {
    max-width: 1280px;
    margin: 0 auto !important;
    padding: 0 40px !important;
    box-sizing: border-box;
}
@media (max-width: 1200px) {
    body.layout-sidebar .default-page-wrap { padding: 0 24px !important; }
}
@media (max-width: 768px) {
    body.layout-sidebar .default-page-wrap { padding: 0 12px !important; }
}
/* ============================================================
   Refinamientos topbar + sidebar (match imagen final)
   ============================================================ */
/* Logo i-Bica: imágenes Logo_Full / Logo_Collapsed */
.ibica-sidebar-logo {
    padding: 8px 8px 18px 8px;
    gap: 10px;
    justify-content: flex-start;
}
.ibica-sidebar-logo a { display: inline-block; line-height: 0; }
.ibica-sidebar-logo img { height: 44px; width: auto; display: block; }
.ibica-sidebar-logo .ibica-sidebar-logo-collapsed { display: none; }
body.sidebar-collapsed .ibica-sidebar-logo .ibica-sidebar-logo-full { display: none; }
body.sidebar-collapsed .ibica-sidebar-logo .ibica-sidebar-logo-collapsed { display: block; height: 36px; }
/* Navegación: íconos + texto alineados */
.ibica-sidebar-nav a {
    display: flex !important; align-items: center; gap:10px;
    padding: 5px 12px; font-weight:530; line-height:1 !important; letter-spacing:0.5px; font-size:14px !important
}
.ibica-sidebar-nav a > .material-icons,
.ibica-sidebar-nav a > .material-icons-outlined,
.ibica-sidebar-nav a > .material-symbols-outlined,
.ibica-sidebar-nav a > .material-symbols-rounded {
    font-size: 20px !important;
    color: var(--text-soft);
    font-weight: 400 !important;
    font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 24;
}
/* Iconos finos también en sidebar pills y topbar */
.ibica-sidebar-top .sb-pill > .material-icons,
.ibica-sidebar-top .sb-pill > .material-icons-outlined,
.ibica-sidebar-top .sb-pill > .material-symbols-outlined,
.ibica-sidebar-bottom .sb-pill > .material-icons,
.ibica-sidebar-bottom .sb-pill::before,
.topbar-notif-btn > .material-icons,
.topbar-notif-btn > .material-icons-outlined,
.topbar-notif-btn > .material-symbols-outlined,
.cuenta-acciones .btn-cuenta-accion > .material-icons,
.cuenta-acciones .btn-cuenta-accion > .material-icons-outlined,
.cuenta-acciones .btn-cuenta-accion > .material-symbols-outlined,
.accesos-grid .acceso-pill > .material-icons,
.accesos-grid .acceso-pill > .material-icons-outlined,
.accesos-grid .acceso-pill > .material-symbols-outlined {
    font-weight: 400 !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Forzar uso de Material Symbols Outlined (soporta variable weight)
   en los iconos del layout sidebar para conseguir trazo más fino */
body.layout-sidebar .ibica-sidebar-nav a > .material-icons-outlined,
body.layout-sidebar .ibica-sidebar-top .sb-pill > .material-icons-outlined,
body.layout-sidebar .ibica-sidebar-bottom .sb-pill > .material-icons-outlined,
body.layout-sidebar .topbar-notif-btn > .material-icons-outlined,
body.layout-sidebar .cuenta-acciones .btn-cuenta-accion .material-icons-outlined,
body.layout-sidebar .accesos-grid .acceso-pill > .material-icons-outlined,
body.layout-sidebar .card-cuenta-principal .card-cuenta-chevron .material-icons-outlined {
    font-family: 'Material Symbols Outlined' !important;
}
.ibica-sidebar-nav a:hover > .material-icons,
.ibica-sidebar-nav a.active > .material-icons { color: var(--side-active-text); }
.ibica-sidebar-nav .sb-mas-arrow { margin-left: auto; font-size: 18px !important; }

/* Pill bottom (cerrar sesión) tamaño y color */
.ibica-sidebar-bottom .sb-pill {
    padding: 10px 12px; gap: 8px; background:none; border:1px solid var(--border-soft)
}
.ibica-sidebar-bottom .sb-pill::before {
    content: "logout";
    font-family: 'Material Icons';
    font-size: 18px;
    color: var(--danger);
}

/* ----- Sidebar colapsada ----- */
body.sidebar-collapsed .ibica-sidebar { width: 56px; padding: 12px 6px; }
body.sidebar-collapsed .ibica-header { left: 56px; width: calc(100% - 56px); }
body.sidebar-collapsed .estas-en-bar { left: 56px; width: calc(100% - 56px); }
body.sidebar-collapsed.layout-sidebar .main { margin-left: 56px; }
body.sidebar-collapsed .ibica-sidebar-logo::after,
body.sidebar-collapsed .sb-pill-text,
body.sidebar-collapsed .sb-nav-text,
body.sidebar-collapsed .sb-mas-arrow { display: none !important; }
body.sidebar-collapsed .ibica-sidebar-logo {
    justify-content: center; padding: 8px 0 14px 0;
}
body.sidebar-collapsed .ibica-sidebar-logo::before { display: none !important; }
body.sidebar-collapsed .ibica-sidebar-top .sb-pill,
body.sidebar-collapsed .ibica-sidebar-bottom .sb-pill,
body.sidebar-collapsed .ibica-sidebar-nav a {
    justify-content: center; padding: 9px 0;
}

/* ----- Topbar oscura (acciones) ----- */
body.layout-sidebar .ibica-header {
    height: 70px; padding: 0 24px;
}
body.theme-dark.layout-sidebar .ibica-header {
    box-shadow: none;
    border-bottom: 1px solid #1a3a3a;
}
body.layout-sidebar .ibica-menu-usuario {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.layout-sidebar .ibica-menu-usuario .btn-user {
    background: var(--bg-card-alt2) !important;
    color: var(--text-main) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 0 14px !important;
    display: flex; align-items: center; gap: 10px;
    box-shadow: none !important;
    height: 44px;
    min-width: 260px;
    transition: background-color .15s ease, border-color .15s ease;
}
body.layout-sidebar .ibica-menu-usuario .btn-user:hover,
body.layout-sidebar .ibica-menu-usuario .btn-user:focus {
    background: var(--bg-pill-hover) !important;
    border-color: none !important;
}
body.layout-sidebar .ibica-menu-usuario .btn-user .capitalize.bold,
body.layout-sidebar .ibica-menu-usuario .btn-user .capitalize {
    font-weight: 300 !important;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-main) !important;
    line-height: 1;
}
body.layout-sidebar .ibica-menu-usuario .btn-user .tag-tipo {
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    color: var(--text-soft);
    text-transform: lowercase;
    background: transparent;
    line-height: 1;
    letter-spacing: 0.2px;
}
/* Variante banca empresa: pill relleno verde oscuro */
body.layout-sidebar .ibica-menu-usuario .btn-user .tag-tipo.tag-tipo-empresa {
    background: #00585e;
    border-color: #00585e;
    color: #ffffff;
}
body.theme-dark.layout-sidebar .ibica-menu-usuario .btn-user .tag-tipo.tag-tipo-empresa {
    background: var(--btn-primary);
    border-color: var(--btn-primary);
    color: #ffffff;
}
/* Ocultar el "- nombre apellido -" (lblNombreBE) dentro del botón de usuario */
body.layout-sidebar .ibica-menu-usuario .btn-user [id$="lblNombreBE"],
body.layout-sidebar .ibica-menu-usuario .btn-user .font10 {
    display: none !important;
}
body.layout-sidebar .ibica-menu-usuario .btn-user .caret {
    margin-left: 4px;
    border: none;
    width: 18px;
    height: 18px;
    color: var(--text-soft);
    position: relative;
}
body.layout-sidebar .ibica-menu-usuario .btn-user .caret::before {
    content: "expand_more";
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    font-weight: normal;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    color: var(--text-soft);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Botón notificaciones (artificialmente añadido en topbar) */
.topbar-notif-btn {
    background: var(--bg-card-alt3);
    color: var(--text-soft);
    border: none;
    border-radius: 12px;
    padding: 0 18px;
    display: inline-flex; align-items: center; gap: 8px;
    height: 44px; font-size: 13px; font-weight: 500;
    cursor: pointer; position: relative;
    transition: background-color .15s ease, border-color .15s ease;
}
.topbar-notif-btn:hover,
.topbar-notif-btn:focus { background: var(--bg-pill-hover); }
.topbar-notif-btn .material-icons,
.topbar-notif-btn .material-icons-outlined,
.topbar-notif-btn .material-symbols-outlined {
    font-family: 'Material Symbols Outlined', 'Material Icons Outlined', 'Material Icons' !important;
    font-size: 20px !important;
    color: var(--text-soft) !important;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 24;
}
/* Indicador (badge) opcional para notificaciones */
.topbar-notif-btn[data-count]:not([data-count="0"])::after {
    content: attr(data-count);
    position: absolute;
    top: 4px; right: 10px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--btn-primary);
    color: #fff; font-size: 10px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
}

/* Cotizaciones en topbar */
.topbar-cotizaciones {
    flex-grow: 1;
    margin-left: 0;
    font-size: 13px;
    color: var(--text-soft);
    gap: 8px;
}
.topbar-cotizaciones label {
    margin: 0 !important;
    color: var(--text-main) !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
}
.topbar-cotizaciones span { color: var(--text-muted) !important; font-weight: 400; }
.topbar-cotizaciones .sep { color: var(--border-soft); margin: 0 2px; font-weight: 400; }

/* "Estás en:" gradient bar */
.estas-en-bar {
    font-weight: 300;
    letter-spacing: 0.2px;
}
.estas-en-bar .estas-en-pagina { margin-left: 4px; font-weight: 300; }

/* Variante banca empresa: gradiente teal (claro a oscuro) */
body.perfil-empresa.layout-sidebar .estas-en-bar {
    background: linear-gradient(90deg, #1ea79c 0%, #00585e 100%);
}

/* ---- Botón usuario: layout flexible para nombres largos (empresa) ---- */
body.layout-sidebar .ibica-menu-usuario .btn-user {
    max-width: 340px;
    overflow: hidden;
}
/* El div interno del botón debe poder encoger (min-width:0) */
body.layout-sidebar .ibica-menu-usuario .btn-user > div {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
/* Wrapper del nombre (span que NO es el icono ni el caret) */
body.layout-sidebar .ibica-menu-usuario .btn-user > div > span:not(.glyphicon-user):not(.caret) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 0 1 auto;
}
/* Nombre/denominación: se trunca con elipsis cuando es largo */
body.layout-sidebar .ibica-menu-usuario .btn-user .capitalize.bold,
body.layout-sidebar .ibica-menu-usuario .btn-user .capitalize {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* El icono, el tag y el caret nunca se encogen ni se ocultan */
body.layout-sidebar .ibica-menu-usuario .btn-user .glyphicon-user,
body.layout-sidebar .ibica-menu-usuario .btn-user .tag-tipo,
body.layout-sidebar .ibica-menu-usuario .btn-user .caret {
    flex: 0 0 auto;
}

/* Espacio extra de contenido bajo top + estas-en (70 + 40 = 110) */
body.layout-sidebar .main { padding-top: 130px; }

/* Auto-abrir en desktop las secciones colapsables (ej. Resumen Anual/Mensual
   de Impuestos). En mobile se despliegan con el <button data-toggle="collapse">;
   en desktop ese botón está oculto y el contenido debe quedar siempre visible.
   Esta regla vivía en menu.css, que ya no se carga en el layout nuevo. */
@media (min-width: 768px) {
    .collapse.collapse-visible-lgmd { display: block; }

    /* Las grillas de impuestos tienen muchas columnas y se desbordan en
       pantallas chicas (tablets / desktop angosto). Permitir deslizarlas
       horizontalmente en vez de romper el layout. Con overflow:auto el
       scrollbar solo aparece cuando la tabla no entra. */
    .collapse.collapse-visible-lgmd {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   Modernización GLOBAL: cards en todas las vistas
   - Paneles, tablas y grids con look "card individual"
   - Botones primarios con --btn-primary
   - Inputs y formularios temáticos
   ============================================================ */

/* Color base de texto del contenido */
body.layout-sidebar .main,
body.layout-sidebar .main h1,
body.layout-sidebar .main h2,
body.layout-sidebar .main h3,
body.layout-sidebar .main h4,
body.layout-sidebar .main h5,
body.layout-sidebar .main h6,
body.layout-sidebar .main p,
body.layout-sidebar .main label,
body.layout-sidebar .main span,
body.layout-sidebar .main div { color: var(--text-soft); }
body.layout-sidebar .main h1,
body.layout-sidebar .main h2,
body.layout-sidebar .main h3,
body.layout-sidebar .main h4 { color: var(--text-main); }

/* ===== PANELES como cards ===== */
body.layout-sidebar .panel,
body.layout-sidebar .panel-default,
body.layout-sidebar .panel-success,
body.layout-sidebar .panel-info,
body.layout-sidebar .panel-warning,
body.layout-sidebar .panel-danger {
    background: var(--bg-card) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    margin-bottom: 18px !important;
    overflow: hidden;
}
body.layout-sidebar .panel-heading {
    background: transparent !important;
    border-bottom: 1px solid var(--border-soft) !important;
    color: var(--text-main) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 14px 18px !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}
body.layout-sidebar .panel-body {
    background: transparent !important;
    color: var(--text-soft) !important;
    padding: 18px !important;
    border: none !important;
}
body.layout-sidebar .panel-footer {
    background: transparent !important;
    border-top: 1px solid var(--border-soft) !important;
    color: var(--text-soft) !important;
}

/* ===== TABLAS como filas-card ===== */
body.layout-sidebar .table,
body.layout-sidebar table.table {
    background: transparent !important;
    color: var(--text-soft) !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    border: none !important;
    width: 100%;
}
body.layout-sidebar .table > thead > tr > th,
body.layout-sidebar .table > thead > tr > td {
    background: transparent !important;
    color: var(--text-muted) !important;
    border: none !important;
    border-bottom: 1px solid var(--border-soft) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 10px 14px !important;
}
body.layout-sidebar .table > tbody > tr {
    background: transparent !important;
}
body.layout-sidebar .table > tbody > tr > td {
    background: var(--bg-card) !important;
    color: var(--text-soft) !important;
    border: 1px solid var(--border-soft) !important;
    border-left: none !important;
    border-right: none !important;
    padding: 12px 14px !important;
    vertical-align: middle;
}
body.layout-sidebar .table > tbody > tr > td:first-child {
    border-left: 1px solid var(--border-soft) !important;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
body.layout-sidebar .table > tbody > tr > td:last-child {
    border-right: 1px solid var(--border-soft) !important;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
body.layout-sidebar .table-striped > tbody > tr:nth-of-type(odd) > td,
body.layout-sidebar .table-hover > tbody > tr:hover > td {
    background: var(--bg-card) !important;
}
body.layout-sidebar .table-bordered { border: none !important; }

/* Paginación */
body.layout-sidebar .pagination > li > a,
body.layout-sidebar .pagination > li > span,
body.layout-sidebar .bs-pagination li a {
    background: var(--bg-card) !important;
    color: var(--text-soft) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 25px !important;
    margin: 0 2px;
}
body.layout-sidebar .pagination > .active > a,
body.layout-sidebar .pagination > .active > a:hover,
body.layout-sidebar .pagination > .active > span,
body.layout-sidebar .bs-pagination li.active a {
    background: var(--btn-primary) !important;
    color: #ffffff !important;
    border-color: var(--btn-primary) !important;
}

/* ===== Botones (primario / success / default) ===== */
body.layout-sidebar .btn-success,
body.layout-sidebar .btn-success-c,
body.layout-sidebar .btn-primary {
    background-color: var(--btn-primary) !important;
    border-color: var(--btn-primary) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 500;
}
body.layout-sidebar .btn-success:hover,
body.layout-sidebar .btn-success:focus,
body.layout-sidebar .btn-success:active,
body.layout-sidebar .btn-primary:hover,
body.layout-sidebar .btn-primary:focus,
body.layout-sidebar .btn-primary:active {
    background-color: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
    color: #ffffff !important;
}
/* Fuente SIEMPRE blanca en los botones oscuros/primarios, incluyendo
   todo su contenido (texto, spans, h6, iconos) y en cualquier estado.
   Se usa .btn.btn-xxx para ganar especificidad sobre la regla global
   "body.layout-sidebar .main span/div { color: var(--text-soft) }". */
body.layout-sidebar .btn.btn-success,
body.layout-sidebar .btn.btn-success *,
body.layout-sidebar .btn.btn-success-c,
body.layout-sidebar .btn.btn-success-c *,
body.layout-sidebar .btn.btn-primary,
body.layout-sidebar .btn.btn-primary *,
body.layout-sidebar .btn.btn-success-basic,
body.layout-sidebar .btn.btn-success-basic * {
    color: #ffffff !important;
}
body.layout-sidebar .btn-default {
    background-color: var(--bg-card-alt) !important;
    color: var(--text-soft) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 8px !important;
}
body.layout-sidebar .btn-default:hover,
body.layout-sidebar .btn-default:focus,
body.layout-sidebar .btn-default:active {
    background-color: var(--bg-pill-hover) !important;
    color: var(--text-main) !important;
    border-color: var(--border-soft) !important;
}
body.layout-sidebar .btn-link {
    color: var(--btn-primary) !important;
}
body.layout-sidebar .btn[disabled],
body.layout-sidebar .btn.disabled {
    opacity: 0.5;
}

/* ===== Inputs y selects ===== */
body.layout-sidebar .form-control,
body.layout-sidebar .form-control-c,
body.layout-sidebar input[type="text"]:not(.search-box):not(.dataTables_filter input),
body.layout-sidebar input[type="number"],
body.layout-sidebar input[type="email"],
body.layout-sidebar input[type="password"],
body.layout-sidebar input[type="date"],
body.layout-sidebar textarea,
body.layout-sidebar select {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
body.layout-sidebar .form-control:focus,
body.layout-sidebar input:focus,
body.layout-sidebar textarea:focus,
body.layout-sidebar select:focus {
    border-color: var(--btn-primary) !important;
    box-shadow: 0 0 0 2px var(--ring-focus, rgba(12, 84, 96, 0.15)) !important;
}
body.layout-sidebar .form-control::placeholder { color: var(--text-muted) !important; }
body.layout-sidebar .input-group-addon {
    background: var(--bg-card-alt) !important;
    color: var(--text-soft) !important;
    border: 1px solid var(--border-soft) !important;
}

/* ===== Alertas ===== */
body.layout-sidebar .alert {
    border-radius: 10px !important;
    border: 1px solid var(--border-soft) !important;
    background: var(--bg-card) !important;
    color: var(--text-soft) !important;
}
body.layout-sidebar .alert-success-c,
body.layout-sidebar .alert-success {
    border-left: 4px solid #14C8B0 !important;
}
body.layout-sidebar .alert-warning {
    border-left: 4px solid #f5b041 !important;
}
body.layout-sidebar .alert-danger {
    border-left: 4px solid var(--danger) !important;
}

/* ===== Modales ===== */
body.layout-sidebar .modal-content {
    background: var(--bg-card) !important;
    color: var(--text-soft) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
}
body.layout-sidebar .modal-header,
body.layout-sidebar .modal-footer {
    border-color: var(--border-soft) !important;
}
body.layout-sidebar .modal-header .close { color: var(--text-soft); opacity: .8; }

/* Modal de aviso (WUCCartel): sin bordes internos, borde externo del color del icono */
body.layout-sidebar .modal-header.border-bottom-none {
    border-color: transparent !important;
}
body.layout-sidebar .modal-content .modal-body.alert {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}
body.layout-sidebar .modal-content.alert-danger {
    border-color: #ff0000 !important;
}
body.layout-sidebar .modal-content.alert-success {
    border-color: #8DD316 !important;
}
body.layout-sidebar .modal-content.alert-warning {
    border-color: #DDDD1E !important;
}

/* ===== Tabs / nav-tabs ===== */
body.layout-sidebar .nav-tabs {
    border-bottom: 1px solid var(--border-soft);
}
body.layout-sidebar .nav-tabs > li > a {
    color: var(--text-soft);
    border: none;
    border-radius: 8px 8px 0 0;
    background: transparent;
}
body.layout-sidebar .nav-tabs > li.active > a,
body.layout-sidebar .nav-tabs > li.active > a:hover,
body.layout-sidebar .nav-tabs > li.active > a:focus {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-soft) !important;
    border-bottom-color: var(--bg-card) !important;
}

/* ===== Cualquier "contenedor" reutilizado ===== */
body.layout-sidebar .contenedor,
body.layout-sidebar .box,
body.layout-sidebar .box-border {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
    color: var(--text-soft) !important;
}

/* Scroll bar oscuro general */
body.theme-dark.layout-sidebar ::-webkit-scrollbar { width: 10px; height: 10px; }
body.theme-dark.layout-sidebar ::-webkit-scrollbar-track { background: transparent; }
body.theme-dark.layout-sidebar ::-webkit-scrollbar-thumb {
    background: var(--bg-card-alt); border-radius: 6px;
}
body.theme-dark.layout-sidebar ::-webkit-scrollbar-thumb:hover { background: var(--bg-pill-hover); }

/* h4 títulos de página (estilo subtle) */
body.layout-sidebar .main > h4:first-of-type,
body.layout-sidebar .main > h3:first-of-type {
    color: var(--text-main);
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 16px;
}

/* ============================================================
   Refinamientos finales para default + menú de perfil
   ============================================================ */

/* Ocultar saludo "Hola, ..." y h4 del Master en este layout */
body.layout-sidebar .Saludo,
body.layout-sidebar .main > h4.lblTitulo:first-of-type {
    display: none !important;
}

/* Forzar fondo del main a gris muy claro (fuera del card) */
body.layout-sidebar .main {
    background: #f5f7f8;
}
body.theme-dark.layout-sidebar .main {
    background: var(--bg-main);
}

/* Card cuenta principal: sin borde ni sombra */
body.layout-sidebar .card-cuenta-principal {
    border: none;
    box-shadow: none;
}

/* Movimientos: card propia debajo del card de cuenta */
body.layout-sidebar .card-movs-cuenta #boxInicialMovimientos,
body.layout-sidebar .card-movs-cuenta > .box-content {
    background: var(--bg-card) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 18px !important;
    box-shadow: none !important;
}
body.layout-sidebar .card-movs-cuenta .box-titulo {
    color: var(--text-main);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    display: block;
}

/* ============================================================
   Unir card de CUENTA con card de MOVIMIENTOS (una sola card)
   ============================================================ */
body.layout-sidebar .card-cuenta-principal {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: none !important;
}
body.layout-sidebar .card-movs-cuenta { margin-top: 0 !important; }
body.layout-sidebar .card-movs-cuenta #boxInicialMovimientos,
body.layout-sidebar .card-movs-cuenta > .box-content {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: none !important;
    box-shadow: none !important;
    margin-top: 0 !important;
}

/* ============================================================
   Selector de CUENTA (se abre con la flecha del card)
   ============================================================ */
body.layout-sidebar .card-cuenta-principal.cuenta-selector-open { overflow: visible !important; }
body.layout-sidebar .card-cuenta-principal .card-cuenta-chevron {
    transition: transform .2s ease;
}
body.layout-sidebar .card-cuenta-principal.cuenta-selector-open .card-cuenta-chevron {
    transform: translateY(-50%) rotate(90deg);
}
body.layout-sidebar .cuenta-selector-panel {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    z-index: 20;
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
}
body.layout-sidebar .card-cuenta-principal.cuenta-selector-open .cuenta-selector-panel {
    display: block;
}
body.layout-sidebar .cuenta-selector-item {
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 8px;
    text-align: left;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
body.layout-sidebar .cuenta-selector-item + .cuenta-selector-item {
    border-top: 1px solid var(--border-soft);
    border-radius: 0;
}
body.layout-sidebar .cuenta-selector-item:hover { background: var(--bg-pill-hover); }
body.layout-sidebar .cuenta-selector-item.cuenta-selector-item-activa { background: var(--bg-accion); }
body.layout-sidebar .cuenta-selector-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
body.layout-sidebar .cuenta-selector-item-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--text-soft);
    font-size: 13px;
}
body.layout-sidebar .cuenta-selector-item-tipo { font-weight: 500; }
body.layout-sidebar .cuenta-selector-item-numero { color: var(--text-main); font-weight: 600; }
body.layout-sidebar .cuenta-selector-item-saldo {
    color: var(--text-main);
    font-size: 20px;
    font-weight: 300;
}
body.layout-sidebar .cuenta-selector-item-titular {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    flex: 0 0 auto;
}

/* Modo manual (slick no inicializado): mostrar sólo la cuenta activa */
body.layout-sidebar #sldrCuentas.cuenta-sel .informacion-cuenta-marco { display: none !important; }
body.layout-sidebar #sldrCuentas.cuenta-sel:not(.slick-initialized) .informacion-cuenta-marco.cuenta-activa { display: block !important; }
body.layout-sidebar #sldrCuentasMovimientos.cuenta-sel .sld-informacion-adicional-item { display: none !important; }
body.layout-sidebar #sldrCuentasMovimientos.cuenta-sel:not(.slick-initialized) .sld-informacion-adicional-item.cuenta-activa { display: block !important; }

/* Estado vacío de movimientos (icono + texto centrados) */
body.layout-sidebar #sldrCuentasMovimientos .informacion-no-disponible,
body.layout-sidebar #sldrCuentasMovimientos .empty-data-text {
    text-align: center;
    padding: 30px 10px;
    color: var(--text-muted);
}

/* Botón usuario: aspecto pill como en la imagen */
body.layout-sidebar .ibica-menu-usuario .btn-user {
    justify-content: flex-start;
}
body.layout-sidebar .ibica-menu-usuario .btn-user .capitalize.bold,
body.layout-sidebar .ibica-menu-usuario .btn-user .capitalize {
    font-weight: 300 !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size:16px
}
body.layout-sidebar .ibica-menu-usuario .btn-user .glyphicon-user {
    width: 24px;
    height: 24px;
    font-size: 0;
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
}
body.layout-sidebar .ibica-menu-usuario .btn-user .glyphicon-user::before {
    content: "person";
    font-family: 'Material Symbols Outlined';
    font-size: 22px;
    font-weight: normal;
    color: var(--text-soft);
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Dropdown menú de perfil (estilo card) */
body.layout-sidebar .menu-usuario {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
    padding: 0 !important;
    overflow: hidden;
    min-width: 320px;
    margin-top: 8px !important;
}
body.layout-sidebar .menu-usuario .user-header {
    background: var(--bg-card-alt) !important;
    padding: 16px !important;
    display: flex;
    align-items: center;
    gap: 12px;
}
body.layout-sidebar .menu-usuario .user-header-userimage img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
body.layout-sidebar .menu-usuario .user-header-userName {
    color: var(--text-main) !important;
    font-weight: 600 !important;
    margin: 0 !important;
}
body.layout-sidebar .menu-usuario .user-header small {
    color: var(--text-muted) !important;
}
body.layout-sidebar .menu-usuario .user-menu-break {
    margin: 0 !important;
    border-color: var(--border-soft) !important;
}
display-table {
    background: var(--bg-card) !important;
}

body.layout-sidebar .menu-usuario #perfiles {
    padding: 8px 12px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--bg-card) !important;
}
body.layout-sidebar .menu-usuario #perfiles .box-perfil {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    background: var(--bg-card) !important;
}
body.layout-sidebar .menu-usuario #perfiles .box-perfil:hover {
    background: var(--bg-pill-hover);
}
body.layout-sidebar .menu-usuario #perfiles .denom-perfil {
    color: var(--text-soft);
    font-size: 13px;
    background: var(--bg-card) !important;
}
body.layout-sidebar .menu-usuario #perfiles .tipo-perfil-sm {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
}
body.layout-sidebar .menu-usuario .user-footer {
    padding: 12px 16px !important;
    border-top: 1px solid var(--border-soft);
    background: transparent !important;
}
body.layout-sidebar .menu-usuario .user-footer .btn-blanco {
    background: var(--bg-card-alt) !important;
    color: var(--text-soft) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
}
body.layout-sidebar .menu-usuario .user-footer .btn-blanco:hover {
    background: var(--bg-pill-hover) !important;
    color: var(--text-main) !important;
}
body.layout-sidebar .menu-usuario .lbtnMisDatos,
body.layout-sidebar .menu-usuario [id$="lbtnMisDatos"] {
    background: var(--btn-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
}

/* Línea de saldo: alineación de "$ 0" y nombre titular a los extremos */
body.layout-sidebar #sldrCuentas .informacion-cuenta-linea2 > label {
    flex: 0 0 auto;
}
body.layout-sidebar #sldrCuentas .cuenta-titular-nombre {
    margin-left: auto;
}

/* Estado del card movimientos vacío (centrado con icono) */
body.layout-sidebar .card-movs-cuenta #sldrCuentasMovimientos {
    min-height: 120px;
}

/* ============================================================
   Fixes visuales del default (overflow + cajas vacías)
   ============================================================ */
/* Recortar contenido que se desborde de las cards */
body.layout-sidebar .card-cuenta-principal,
body.layout-sidebar .card-movs-cuenta #boxInicialMovimientos,
body.layout-sidebar .card-movs-cuenta > .box-content,
body.layout-sidebar .card-ver-mas-opciones {
    overflow: hidden;
}

/* Slick: forzar que solo se vea el slide activo (evita 2 cuentas en fila) */
body.layout-sidebar #sldrCuentas .slick-list,
body.layout-sidebar #sldrCuentasMovimientos .slick-list {
    overflow: hidden !important;
    width: 100% !important;
}
/* Si slick no está inicializado, slick-track no existe; ocultamos los items extra */
body.layout-sidebar #sldrCuentas:not(.slick-initialized) .informacion-cuenta-marco:nth-child(n+2),
body.layout-sidebar #sldrCuentasMovimientos:not(.slick-initialized) .sld-informacion-adicional-item:nth-child(n+2) {
    display: none !important;
}

/* Nombre del titular: limitar ancho para que no empuje al siguiente slide */
body.layout-sidebar #sldrCuentas .cuenta-titular-nombre {
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

/* Eliminar cajas vacías que aparecen entre cards (placeholders del default) */
body.layout-sidebar .default-col-izq .box-inicial:empty,
body.layout-sidebar .default-col-der .box-inicial:empty,
body.layout-sidebar .default-page-wrap .box-inicial:empty,
body.layout-sidebar .default-col-izq > div:empty,
body.layout-sidebar .default-col-der > div:empty {
    display: none !important;
}

/* El card de movimientos no debe tener wrapper transparente con borde */
body.layout-sidebar .card-movs-cuenta { border: none !important; box-shadow: none !important; }

/* Chevron del card de cuenta: que no se superponga con contenido */
body.layout-sidebar .card-cuenta-principal { padding-right: 44px; }

/* ============================================================
   Panel "Más" (flyout) del sidebar
   ============================================================ */
.sb-mas-panel {
    position: fixed;
    top: 0;
    left: 228px;
    width: 420px;
    max-width: calc(100vw - 228px);
    height: 100vh;
    background: var(--bg-card);
    border-right: 1px solid var(--border-soft);
    box-shadow: 8px 0 24px rgba(0,0,0,.08);
    z-index: 7;
    display: flex;
    flex-direction: column;
    transform: translateX(-110%);
    transition: transform .25s ease;
    visibility: hidden;
}
body.sb-mas-open .sb-mas-panel {
    transform: translateX(0);
    visibility: visible;
}
body.sidebar-collapsed .sb-mas-panel { left: 56px; }

.sb-mas-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-soft);
}
.sb-mas-panel-title {
    color: var(--text-main);
    font-weight: 600;
    font-size: 15px;
}
.sb-mas-panel-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-soft);
    padding: 4px;
    border-radius: 6px;
}
.sb-mas-panel-close:hover { background: var(--bg-pill-hover); }
.sb-mas-panel-close .material-icons-outlined { font-size: 22px; }

.sb-mas-panel-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 18px;
    padding: 8px 12px;
    background: var(--bg-card-alt);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
}
.sb-mas-panel-search .material-icons-outlined {
    font-size: 18px;
    color: var(--text-muted);
}
.sb-mas-panel-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-main);
    font-size: 13px;
}
.sb-mas-panel-search input::placeholder { color: var(--text-muted); }

.sb-mas-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px 18px 8px;
}
.sb-mas-panel-body::-webkit-scrollbar { width: 8px; }
.sb-mas-panel-body::-webkit-scrollbar-thumb {
    background: var(--bg-pill-hover);
    border-radius: 6px;
}

.sb-mas-group { padding: 10px 10px 6px 10px; }
.sb-mas-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 6px 8px;
    margin-bottom: 4px;
}
.sb-mas-group-title .material-icons-outlined {
    font-size: 16px;
    color: var(--side-active-text);
}
.sb-mas-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
}
.sb-mas-item {
    display: block;
    padding: 7px 10px;
    color: var(--text-soft);
    font-size: 13px;
    text-decoration: none;
    border-radius: 6px;
    line-height: 1.3;
}
.sb-mas-item:hover {
    background: var(--bg-pill-hover);
    color: var(--side-active-text);
    text-decoration: none;
}

@media (max-width: 768px) {
    .sb-mas-panel { left: 0 !important; width: 100vw; max-width: 100vw; }
    .sb-mas-list { grid-template-columns: 1fr; }
}

/* ============================================================
   Modernización GLOBAL II — fixes claro/oscuro para componentes
   que aún usaban colores fijos y se rompían (sobre todo en modo
   oscuro): grids ASP.NET, tabs, selectores de fecha, inputs
   deshabilitados, tarjetas mobile de tablas, etc.
   Todo scopeado a body.layout-sidebar (siempre activo en Site.Master)
   y resuelto con variables de tema para que funcione en ambos modos.
   ============================================================ */

/* ---- Tablas sin clase .table (RadioButtonList, CheckBoxList,
        SiteMapPath, etc.) que heredaban background:white de
        ibica-generales.css ---- */
body.layout-sidebar .main table {
    background-color: transparent !important;
}

/* ---- GridView: clases de estilo de ASP.NET ---- */
body.layout-sidebar .GridView,
body.layout-sidebar .GridTable {
    color: var(--text-soft) !important;
}
body.layout-sidebar .GridAlternatingRowStyle,
body.layout-sidebar .GridAlternateRowStyle,
body.layout-sidebar .table > tbody > tr.alt > td {
    background-color: var(--bg-card-alt) !important;
}
body.layout-sidebar .GridRowStyle {
    background-color: transparent !important;
}
body.layout-sidebar .GridSelectedRowStyle {
    background-color: var(--bg-accion) !important;
    color: var(--text-accion) !important;
}
body.layout-sidebar .GridHeaderStyle {
    background-color: var(--bg-card-alt) !important;
    color: var(--text-main) !important;
}
body.layout-sidebar .GridPagerStyle,
body.layout-sidebar .GridFooterStyle {
    background-color: var(--bg-card-alt) !important;
    color: var(--text-soft) !important;
}

/* ---- Encabezados <th> en tbody y filas marcadas como .active
        (HeaderStyle CssClass="active" usado en muchas grillas) ---- */
body.layout-sidebar .table > tbody > tr > th,
body.layout-sidebar .table > thead > tr.active > th,
body.layout-sidebar .table > tbody > tr.active > td,
body.layout-sidebar table.table .active > td,
body.layout-sidebar table.table .active > th {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-soft) !important;
}
/* Links de ordenamiento dentro de los encabezados */
body.layout-sidebar .table th a,
body.layout-sidebar .main table th a {
    color: var(--text-main) !important;
    background: var(--bg-card);
}

/* ---- Tabs: panel de contenido y marcos asociados ---- */
body.layout-sidebar .tab-content {
    background-color: var(--bg-card) !important;
    border-color: var(--border-soft) !important;
}
body.layout-sidebar .bordeado {
    background-color: var(--bg-card) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-soft) !important;
}
body.layout-sidebar .marco-pregunta {
    background-color: var(--bg-card) !important;
    border-color: var(--border-soft) !important;
}

/* ---- Inputs deshabilitados / solo lectura ---- */
body.layout-sidebar .form-control[disabled],
body.layout-sidebar .form-control[readonly],
body.layout-sidebar input[disabled],
body.layout-sidebar select[disabled],
body.layout-sidebar textarea[disabled],
body.layout-sidebar input[readonly],
body.layout-sidebar textarea[readonly] {
    background-color: var(--bg-pill-hover) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-soft) !important;
    -webkit-text-fill-color: var(--text-muted);
    opacity: 1;
}
body.layout-sidebar .password-textbox-control,
body.layout-sidebar .password-textbox-input {
    background-color: var(--bg-card-alt) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-main) !important;
}

/* ---- Selector de fecha (input-group + addon + icono) ----
   Mismas dimensiones que .input-react (rounded-xl, ~40px de alto, fondo suave)
   para que concuerde con el resto de los inputs. */
body.layout-sidebar .input-group.fecha-input {
    background-color: var(--bg-card-alt2) !important;
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden;
    transition: background-color .15s ease;
}
body.layout-sidebar .input-group.fecha-input:hover {
    background-color: var(--bg-card-alt) !important;
}
body.layout-sidebar .input-group.fecha-input:focus-within {
    background-color: var(--bg-card-alt) !important;
    box-shadow: 0 0 0 2px var(--ring-focus, rgba(12, 84, 96, 0.15)) !important;
}
body.layout-sidebar .input-group.fecha-input input.datePicker {
    height: 40px !important;
    padding: 8px 16px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--text-soft) !important;
    font-size: 15px;
    line-height: 1.4;
}
body.layout-sidebar .input-group.fecha-input span.input-group-addon {
    background: transparent !important;
    border: none !important;
    padding-right: 16px;
    color: var(--text-soft) !important;
}
/* El icono de calendario trae style inline color:#000 -> forzar tema */
body.layout-sidebar .input-group-addon .glyphicon,
body.layout-sidebar .fecha-input .glyphicon-calendar {
    color: var(--text-soft) !important;
}

/* ---- Tarjetas "mobile" de tablas responsive ---- */
body.layout-sidebar .tdMobile .contenedor,
body.layout-sidebar .pfMobile,
body.layout-sidebar .preMobile,
body.layout-sidebar .tableVencimientos,
body.layout-sidebar .contenedorAPBE {
    background: var(--bg-card) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-soft) !important;
}

/* ---- Botones secundarios "inverse"/blancos ---- */
body.layout-sidebar .btn-success-inverse,
body.layout-sidebar .btn-success-inverse-mobile,
body.layout-sidebar .btn-VerMas,
body.layout-sidebar .btn-NuevoServicio {
    background-color: var(--bg-accion) !important;
    border-color: var(--btn-primary) !important;
    color: var(--text-accion) !important;
}
body.layout-sidebar .btn-success-inverse:hover,
body.layout-sidebar .btn-success-inverse:focus,
body.layout-sidebar .btn-success-inverse-mobile:hover,
body.layout-sidebar .btn-VerMas:hover,
body.layout-sidebar .btn-NuevoServicio:hover {
    background-color: var(--btn-primary) !important;
    color: #ffffff !important;
}
body.layout-sidebar .btn-cuadrado,
body.layout-sidebar .btn-cuadradoAD {
    background-color: var(--bg-card) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-main) !important;
}

/* ---- Wells, list-group y panel-group ---- */
body.layout-sidebar .well,
body.layout-sidebar .list-group-item {
    background-color: var(--bg-card) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-soft) !important;
}
body.layout-sidebar .panel-group .panel {
    background: var(--bg-card) !important;
}

/* ---- Cajas de posición (default) ---- */
body.layout-sidebar .boxCanvas {
    background-color: var(--bg-card) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-soft) !important;
}
body.layout-sidebar .boxCanvas h4 {
    color: var(--text-muted) !important;
}

/* ---- Dropdowns de Bootstrap dentro del contenido (no el menú) ---- */
body.layout-sidebar .main .dropdown-menu {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-soft) !important;
}
body.layout-sidebar .main .dropdown-menu > li > a {
    color: var(--text-soft) !important;
}
body.layout-sidebar .main .dropdown-menu > li > a:hover,
body.layout-sidebar .main .dropdown-menu > li > a:focus {
    background-color: var(--bg-pill-hover) !important;
    color: var(--side-active-text) !important;
}

/* ---- Calendario emergente (bootstrap-material-datetimepicker) ---- */
body.theme-dark.layout-sidebar .dtp > .dtp-content {
    background: var(--bg-card) !important;
}
body.theme-dark.layout-sidebar .dtp div.dtp-date,
body.theme-dark.layout-sidebar .dtp div.dtp-time {
    background: var(--btn-primary) !important;
}
body.theme-dark.layout-sidebar .dtp table.dtp-picker-days td,
body.theme-dark.layout-sidebar .dtp .dtp-actual-month,
body.theme-dark.layout-sidebar .dtp .dtp-actual-num,
body.theme-dark.layout-sidebar .dtp .dtp-actual-year,
body.theme-dark.layout-sidebar .dtp .dtp-actual-time {
    color: var(--text-main) !important;
}
body.theme-dark.layout-sidebar .dtp table.dtp-picker-days td a {
    color: var(--text-soft) !important;
}

/* ---- Texto utilitario / separadores sobre fondo oscuro ---- */
body.theme-dark.layout-sidebar .rotulo,
body.theme-dark.layout-sidebar .hardTokenLabel label,
body.theme-dark.layout-sidebar .hartTokenLabel label,
body.theme-dark.layout-sidebar .instrucciones {
    color: var(--text-muted) !important;
}
body.theme-dark.layout-sidebar .line40pxgrey {
    background: var(--border-soft) !important;
}

/* ============================================================
   FIX selector de días (bootstrap-material-datetimepicker)
   La grilla usa <table class="table dtp-picker-days">, por lo que
   heredaba el look "card" de las tablas globales (border-spacing,
   fondo y bordes redondeados por celda) deformando el calendario.
   Neutralizamos esas reglas para devolverle su estilo original.
   ============================================================ */
body.layout-sidebar .dtp table.dtp-picker-days {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: transparent !important;
    margin: 0 !important;
}
body.layout-sidebar .dtp table.dtp-picker-days > thead > tr,
body.layout-sidebar .dtp table.dtp-picker-days > tbody > tr {
    background: transparent !important;
}
body.layout-sidebar .dtp table.dtp-picker-days > tbody > tr > td {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0.5em 0.3em !important;
    font-weight: 700;
    font-size: 0.8em;
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
}
body.layout-sidebar .dtp table.dtp-picker-days > thead > tr > th {
    background: transparent !important;
    border: none !important;
    color: #757575 !important;
    padding: 0.4em 0.3em !important;
    font-weight: 700;
    font-size: 1em;
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
}
/* Día seleccionado: respeta el color de acento del tema */
body.layout-sidebar .dtp table.dtp-picker-days > tbody > tr > td > a {
    color: #212121;
    border-radius: 50% !important;
}
body.layout-sidebar .dtp table.dtp-picker-days > tbody > tr > td > a.selected {
    background: var(--btn-primary) !important;
    color: #ffffff !important;
}
/* En modo oscuro, los números de día deben verse claros */
body.theme-dark.layout-sidebar .dtp table.dtp-picker-days > tbody > tr > td > a {
    color: var(--text-soft);
}


/* ============================================================
   Tablas responsivas — opt-in con .table-cards-wrap + .table-cards
   ------------------------------------------------------------
   Las grillas anchas (GridView con muchas columnas) desbordaban el
   contenedor y, embebidas en el front React, obligaban a scrollear
   la pagina entera.

   La grilla NO se dibuja como tabla en ningun ancho: siempre es una
   lista de tarjetas, una por fila, con el encabezado de la columna
   delante del valor. Se descarto el scroll horizontal porque esconde
   contenido sin que el usuario se entere de que falta algo.

   Lo activa la clase .tc-cards, que pone Scripts/table-cards.js (el
   mismo que escribe los data-label). No viene en el markup a
   proposito: asi, si el JS no corre, el fallback es la tabla con su
   scroll horizontal propio — usable aunque fea — y no una lista de
   valores sueltos sin ninguna etiqueta que los identifique. Todo lo
   que hay entre este bloque y .tc-cards es ese fallback.

   OJO con la especificidad: las reglas base de "TABLAS como filas-card"
   (mas arriba en este archivo) usan `.table > tbody > tr > td:last-child`
   con !important, asi que todo lo de aca abajo se escribe colgado de
   `.table-cards-wrap` para sumar una clase y poder pisarlas. Sin ese
   prefijo, la ultima celda de cada tarjeta se queda con el borde
   derecho y las esquinas redondeadas de la vista de tabla.
   ============================================================ */
body.layout-sidebar .table-cards-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
body.layout-sidebar .table-cards-wrap > table.table-cards {
    /* Que cada columna ocupe lo que necesita: el criterio de "entra o no
       entra" es que TODAS las celdas quepan en un renglon. Un min-width
       fijo apretaba las columnas y partia los titulos en una palabra por
       renglon, que era peor que el original. */
    min-width: 100%;
    width: auto;
}
body.layout-sidebar .table-cards-wrap > table.table-cards > tbody > tr > td,
body.layout-sidebar .table-cards-wrap > table.table-cards > tbody > tr > th,
body.layout-sidebar .table-cards-wrap > table.table-cards > thead > tr > th {
    white-space: nowrap;
}

/* ---- Modo tarjeta: una card por fila ---- */
body.layout-sidebar .table-cards-wrap.tc-cards {
    overflow-x: visible;
}
body.layout-sidebar .table-cards-wrap.tc-cards > table.table-cards {
    min-width: 0;
    display: block;
    border-spacing: 0 !important;
}
body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards > tbody,
body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards > thead {
    display: block;
}

/* Los encabezados pasan a vivir dentro de cada celda (data-label) */
body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards tr.tc-head {
    display: none;
}

/* La tarjeta es una superficie PLANA: sin borde y sin sombra, igual que la
   fila de lista del front React (ListItem = bg-neutral-20 + rounded-lg, sin
   borde). El fondo suave --bg-card-alt2 es el mismo que usan los inputs y el
   selector de cuentas legacy para despegarse del panel. */
body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    background: var(--bg-card-alt2) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 12px 16px;
}
/* Cada celda es un renglon "ETIQUETA  valor" a lo ancho de la tarjeta. Sin
   lineas divisorias entre celdas: con un borde por celda la tarjeta volvia a
   leerse como una grilla, que es justo lo que se quiso sacar. El order alto
   es lo que deja que las celdas con rol (ver el bloque siguiente) se
   adelanten al encabezado de la tarjeta. */
body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards > tbody > tr > td {
    display: flex;
    align-items: baseline;
    gap: 12px;
    order: 5;
    flex: 1 0 100%;
    width: auto !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 2px 0 !important;
    text-align: left !important;
    white-space: normal;
    /* "anywhere" y no "break-word": los dos parten la palabra al renderizar,
       pero solo "anywhere" reduce el min-content de la celda. Con break-word
       un CBU de 22 digitos mantenia la card mas ancha que el viewport y la
       lista desbordaba a lo ancho en un celular. */
    overflow-wrap: anywhere;
    color: var(--text-soft);
    /* OJO: el fondo de la card lo pinta el <tr>, asi que la celda tiene que
       quedar transparente. Las reglas base de tabla (mas arriba) le ponen
       "background: var(--bg-card) !important" a cada <td> — tambien en las
       variantes striped y hover — y eso tapaba la card entera. En tema oscuro
       --bg-card es el color del panel, asi que la card desaparecia. */
    background: transparent !important;
}
body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    /* Ancho de columna fijo, no un porcentaje: en una card ancha (la tabla no
       entra por cantidad de columnas, no por falta de espacio) un 40% dejaba
       la etiqueta y el valor separados por medio renglon vacio. */
    flex: 0 0 auto;
    width: 160px;
    max-width: 40%;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.5;
}

/* ---- Roles de celda: de "ETIQUETA: valor" x10 a una card con jerarquia ----
   Convierten la lista plana en algo parecido a la fila de lista del front
   React: titulo a la izquierda, importe a la derecha, fecha debajo en chico y
   el resto de los datos como renglones etiquetados.

   El rol lo declara el MARKUP, celda por celda (ItemStyle-CssClass del
   BoundField), y no la posicion de la columna. Dos razones:
     - el orden de las columnas de la grilla puede cambiar sin tocar este CSS;
     - no hace falta pasar a TemplateFields, que romperia el code-behind que
       lee y reescribe celdas por indice (Cells(7).Text con el formato del
       importe, Cells(0).Text con el centinela de fecha vacia).

     tc-titulo  -> renglon 1, izquierda, destacado (razon social, descripcion)
     tc-moneda  -> renglon 1, derecha, chico (acompaña al importe)
     tc-importe -> renglon 1, derecha, destacado
     tc-meta    -> renglon 2, chico y apagado (fecha)

   Las cuatro esconden su etiqueta: en esa posicion el dato se explica solo.
   Una celda sin rol sigue siendo un renglon "ETIQUETA  valor" (order: 5). */
body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards > tbody > tr > td.tc-titulo {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}
body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards > tbody > tr > td.tc-moneda {
    order: 2;
    flex: 0 0 auto;
    /* Empuja moneda + importe al extremo derecho del renglon del titulo. */
    margin-left: auto;
    padding: 2px 6px 2px 0 !important;
    font-size: 12px;
    color: var(--text-muted);
}
body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards > tbody > tr > td.tc-importe {
    order: 3;
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
}
body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards > tbody > tr > td.tc-meta {
    order: 4;
    /* El 100% es lo que corta el renglon del titulo y separa el encabezado de
       la card del bloque de datos. */
    flex: 1 0 100%;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards > tbody > tr > td.tc-titulo::before,
body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards > tbody > tr > td.tc-moneda::before,
body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards > tbody > tr > td.tc-importe::before,
body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards > tbody > tr > td.tc-meta::before {
    content: none;
}

/* El paginador no es una tarjeta: se deja tal cual, centrado */
body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards > tbody > tr.tc-pager,
body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards > tbody > tr.tc-pager:hover {
    display: block;
    background: transparent !important;
    border: none !important;
    margin: 0;
    padding: 0;
    overflow: visible;
}
body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards > tbody > tr.tc-pager > td {
    display: block;
    border: none !important;
    padding: 6px 0 !important;
    text-align: center !important;
}
body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards > tbody > tr.tc-pager > td::before {
    content: none;
}

/* En pantallas chicas la tarjeta es angosta: la etiqueta pasa arriba del
   valor en vez de robarle el 40% del ancho, y el importe deja de compartir
   renglon con el titulo. */
@media (max-width: 560px) {
    body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards > tbody > tr > td.tc-titulo {
        flex: 1 0 100%;
    }
    body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards > tbody > tr > td.tc-moneda {
        margin-left: 0;
        padding-left: 0 !important;
    }
    body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards > tbody > tr > td {
        display: block;
    }
    body.layout-sidebar .table-cards-wrap.tc-cards table.table-cards > tbody > tr > td[data-label]::before {
        display: block;
        width: auto;
        max-width: none;
        margin-bottom: 2px;
    }
}

/* ── Personalización por mutual — layout sidebar ───────────────────────────────
   El `Site.Master` ya resuelve la mutual (?mutual= → cookie ibica-mutual-override →
   subdominio), le pone la clase `is-mutual` al <html> y le inyecta
   Styles2/Personalizados2/<mutual>/mutual.css, que define la escala --color-primary-*
   en oklch. Lo que faltaba era que el layout nuevo la consumiera: sus variables de
   tema y buena parte de los estilos de botón tenían el teal de iBica a fuego, así que
   las vistas internas seguían turquesas aunque el login sí se veía con la marca.

   Dos propiedades de este bloque:
   - Todo va como `var(--color-primary-N, <hex de iBica>)`. **El fallback no es
     decorativo:** sin mutual activa `--color-primary` no existe (mutual.css sólo se
     inyecta con is-mutual), así que resuelve al hex de siempre y iBica queda intacto,
     sin depender de que esta regla no matchee.
   - Cuelga de `html.is-mutual`, que le gana por especificidad al `:root` (0,1,0) y a
     `body.theme-dark` (0,1,1) de más arriba sin importar el orden de carga.

   ⚠️ En el legacy el tema oscuro es `body.theme-dark`, pero el `mutual.css` viene
   copiado del front React y trae un bloque `.dark` sobre <html> — o sea que acá la
   inversión de la escala NUNCA aplica y --color-primary-700 sigue siendo el valor
   claro. Por eso el bloque oscuro de abajo NO usa los mismos escalones que el claro:
   toma los pasos más claros de la rampa (300/400, ~76%/69% de luminosidad), que es
   justo lo que el .dark del front produciría. No "unificarlos" con los del claro. */
html.is-mutual {
    --bg-accion: var(--color-primary-100, #E6F5F3);
    --bg-accion-hover: var(--color-primary-200, #d8efeb);
    --text-accion: var(--color-primary-700, #00828E);
    --side-active-bg: var(--color-primary-100, #E6F5F3);
    --side-active-text: var(--color-primary, #00AF9D);
    --btn-primary: var(--color-primary-800, #0C5460);
    --btn-primary-hover: var(--color-primary-900, #0A464F);
    /* Anillo de foco de inputs, selects y datePicker — un solo token para los 3 call
       sites. La primera declaración es el fallback: si el navegador no soporta
       color-mix, la segunda es inválida y gana ésta (el teal de iBica de siempre). */
    --ring-focus: rgba(12, 84, 96, 0.15);
    --ring-focus: color-mix(in srgb, var(--color-primary, #0C5460) 18%, transparent);
}

html.is-mutual body.theme-dark {
    /* Fondo pedido para todas las mutuales en tema oscuro (antes #033A46). */
    --bg-main: #262626;
    --bg-accion: var(--color-primary-900, #004D4F);
    --bg-accion-hover: var(--color-primary-800, #006063);
    --side-active-text: var(--color-primary-400, #14C8B0);
    --btn-primary: var(--color-primary, #004D4F);
    --btn-primary-hover: var(--color-primary-600, #006063);
    /* En oscuro el anillo original (el teal al 15%) es casi invisible: se toma el
       escalón claro de la rampa, que es el que se ve sobre el fondo #262626. */
    --ring-focus: rgba(20, 200, 176, 0.22);
    --ring-focus: color-mix(in srgb, var(--color-primary-400, #14C8B0) 22%, transparent);
}

/* Botones. `.btn-success` es el botón de acción de casi toda vista interna (el
   "Consultar" de los filtros); las variantes inverse son el mismo color en outline.
   Se replica el `!important` sólo donde la regla original lo tiene. */
html.is-mutual .btn-success {
    background-color: var(--color-primary, #00AF9D);
    border-color: var(--color-primary, #00AF9D);
}
html.is-mutual .btn-success:hover,
html.is-mutual .btn-success:focus,
html.is-mutual .btn-success:active {
    background-color: transparent;
    border-color: var(--color-primary, #00AF9D);
    color: var(--color-primary, #00AF9D) !important;
}
html.is-mutual .btn-success-basic {
    background-color: var(--color-primary, #00AF9D) !important;
    border-color: var(--color-primary, #00AF9D) !important;
}
html.is-mutual .btn-success-inverse,
html.is-mutual .btn-success-inverse-mobile {
    border-color: var(--color-primary, #00AF9D);
    color: var(--color-primary, #00AF9D) !important;
}
html.is-mutual .btn-success-inverse:hover,
html.is-mutual .btn-success-inverse:focus,
html.is-mutual .btn-success-inverse:active,
html.is-mutual .btn-success-inverse-mobile:hover,
html.is-mutual .btn-success-inverse-mobile:focus {
    background-color: var(--color-primary, #00AF9D) !important;
    border-color: var(--color-primary, #00AF9D) !important;
    color: #fff !important;
}

/* Barra "Estás en:". El degradé original va del teal al verde lima; con marca propia
   se resuelve del primario a una versión más clara de la misma rampa, para no meter
   un verde que no pertenece a la paleta de la mutual. */
html.is-mutual .estas-en-bar {
    background: linear-gradient(90deg, var(--color-primary, #00AF9D) 0%, var(--color-primary-400, #8FD400) 100%);
}

/* Chevron de los selects. El SVG va embebido como data-URI, donde `var()` no resuelve
   (el data-URI se parsea como URL, no como CSS), así que no alcanza con cambiarle el
   color: hay que redibujarlo con `mask` y pintarlo con background-color.

   ⚠️ La máscara va en un ::after, NUNCA en el propio control: `-webkit-mask` sobre el
   elemento recorta TODO su contenido (el texto de la opción elegida incluido), o sea
   que el select quedaría con la silueta del chevron y nada más.

   Sólo se toca `.select-react-ui`, el <div> que arma Scripts/select-react.js y que es
   el chevron que realmente se ve. El `<select>` nativo conserva su data-URI teal: es
   el fallback sin JS y no admite pseudo-elementos. */
html.is-mutual .select-react-ui,
html.is-mutual body.theme-dark .select-react-ui {
    background-image: none;
    position: relative;
}
html.is-mutual .select-react-ui::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-color: var(--color-primary, #075F6B);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
    pointer-events: none;
}
html.is-mutual body.theme-dark .select-react-ui::after {
    background-color: var(--color-primary-400, #14C8B0);
}

/* Resaltado de la opción elegida y hover del panel. Era el único color de marca que
   quedaba a fuego dentro del dropdown: el trigger ya tomaba la mutual por las variables
   de superficie y el chevron por la máscara de arriba, pero la opción seleccionada
   seguía pintándose con el primary-100/primary de iBica — o sea que al desplegar un
   select la marca vieja reaparecía justo en el elemento más visible del panel.

   El texto va a --color-primary-700 y no a --color-primary pelado, para conservar el
   contraste que el par #DDE5E6/#075F6B de iBica ya tenía: el primario de una mutual
   clara sobre su propio 100 no siempre se lee. */
html.is-mutual .select-react-option:hover {
    background-color: var(--color-primary-50, #f0f3f5);
}
html.is-mutual .select-react-option.is-selected {
    background-color: var(--color-primary-100, #DDE5E6);
    color: var(--color-primary-700, #075F6B);
}

/* Oscuro: escalones 900/400, los mismos que usa el resto del bloque — la rampa NO se
   invierte acá (ver el ⚠️ del encabezado), así que reusar los del claro daría un fondo
   casi blanco. Por el mismo motivo el hover tiene que REPONERSE explícitamente al gris
   neutro: la regla clara de arriba (0,3,1) también matchea en oscuro, y ahí
   --color-primary-50 sigue siendo el tinte más claro de la rampa. No es redundante. */
html.is-mutual body.theme-dark .select-react-option:hover {
    background-color: var(--bg-pill-hover);
}
html.is-mutual body.theme-dark .select-react-option.is-selected {
    background-color: var(--color-primary-900, #004D4F);
    color: var(--color-primary-400, #14C8B0);
}

/* Superficies (cards, píldoras, topbar, sidebar, selects). Las de iBica son de su
   propia gama —tintes turquesa en claro (#F1F4F4/#DDE5E6, que son su primary-50/100)
   y azul petróleo en oscuro (#172A2E/#000D12)—, así que bajo una mutual quedaban
   delatando la marca de iBica detrás de botones y barra ya personalizados.

   En claro se derivan de la rampa de la mutual, igual que los tintes originales.
   En oscuro van a grises neutros y NO a la rampa: sobre el fondo pedido, una card
   teñida con el primario compite con los botones en vez de acompañarlos.

   Los valores calcan al front React, porque el aspx se ve casi siempre embebido en un
   LegacyFrame y las dos superficies conviven en la misma pantalla:
     PÁGINA  #1a1a1a  = el body de React en oscuro bajo mutual (.dark body de mutual.css)
     CARDS   #262626  = su navbar y sus cards (side-nav y topbar son bg-white, y
                        --color-white vale #262626 en el .dark de esos mutual.css)

   --bg-card-alt2 (#333333) queda por ENCIMA de las dos: es el fondo de selects e inputs
   y tiene que despegarse de la card, no acompañarla. */
html.is-mutual {
    --bg-card-alt: var(--color-primary-100, #DDE5E6);
    --bg-card-alt2: var(--color-primary-50, #F1F4F4);
    --bg-card-alt3: var(--color-primary-100, #DDE5E6);
}

html.is-mutual body.theme-dark {
    --bg-card: #1a1a1a;
    --bg-card-alt: #333333;
    --bg-card-alt2: #333333;
    --bg-card-alt3: #404040;
    --bg-pill: #1a1a1a;
    --bg-pill-hover: #333333;
    --bg-tag: #404040;
    --bg-sidebar: #262626;
    --bg-topbar: #262626;
    --border-soft: #404040;
    --border-pill: #404040;
}

/* ⚠️ Fondo del contenido en oscuro: NO alcanza con setear --bg-main.
   Los 37 `Styles/Personalizados2/<mutual>/master.css` traen todos la MISMA regla
   `.main { background-color: #F2F2F2 !important; }` (escrita para el layout viejo),
   y ese `!important` con selector de clase pelado le gana a
   `body.theme-dark.layout-sidebar .main { background: var(--bg-main) }`, que no lo
   lleva. Resultado: bajo cualquier mutual el área de contenido quedaba clavada en el
   gris claro del layout viejo y el tema oscuro no se aplicaba — daba igual qué valor
   tuviera la variable.

   Se resuelve por especificidad, no tocando los 37 archivos: con `!important` en los
   dos lados gana el selector más específico, y éste es (0,4,2) contra (0,1,0).
   Si algún día se limpian esos `master.css`, esta regla se puede volver a la variable. */
html.is-mutual body.theme-dark.layout-sidebar .main {
    background-color: var(--bg-main) !important;
}