/* Rediseño visual del área de cuenta del sistema tradicional: tarjeta de Balance y accesos rápidos del dashboard,
   lista "Mi Cuenta", Configuración de la cuenta (lista de secciones + tarjeta de perfil) y menú inferior móvil de
   4 botones con el botón verde flotante de Bre-B anclado en el centro.

   Se carga en template.tpl justo después de global.css. Solo estilos de modo claro: los overrides de modo oscuro
   viven en dark-mode.css (bloque "Rediseño del área de cuenta") para respetar el mismo esquema que el resto del sitio.

   El menú inferior se repite tal cual en ~38 plantillas (4 <a class="btn btn-menu-footer">), por eso el hueco
   central para el botón flotante se resuelve solo con CSS (order + ::before) y no tocando cada plantilla. */

:root {
    --cpui-navy: #21214F;
    --cpui-navy-deep: #0f1650;
    --cpui-cyan: #00ADE1;
    --cpui-green: #00F5A6;
    --cpui-label: #2743c7;
    --cpui-muted: #6b7280;
    --cpui-radius: 14px;
    --cpui-shadow: 0 8px 24px rgba(33, 33, 79, .10);
    --cpui-dock-height: 62px;
    --cpui-fab-size: 4rem;
}

/* Tipografía del área de cuenta: la del mockup es una sans redondeada (Nunito, que template.tpl carga desde
   Google Fonts solo con sesión iniciada); el resto del sitio sigue con Source Sans Pro. */
#main-container,
.menu-dashboard,
#colpay-breb-floating-widget {
    font-family: 'Nunito', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* =========================================================================
   1. Tarjeta de Balance (members/template.tpl)
   ========================================================================= */
.account-balance-card {
    box-shadow: none !important;
}
/* Tarjeta: azul marino profundo con borde cian, resplandor y "ondas" de luz cian/verde en la esquina superior
   derecha (SVG en línea, sin imágenes externas) más una onda tenue abajo a la izquierda, como en el mockup. */
.cp-balance-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(25, 211, 255, .5);
    border-radius: 4px;
    padding: 1.1rem 1.15rem 1.25rem;
    color: #fff;
    /* Fondo: imagen del mockup (assets/evolution/images/fondo-card-balance.png, 1376x752: navy con la onda de seda en
       la esquina superior derecha y otra tenue abajo a la izquierda). Se ancla a la esquina superior derecha y cubre
       la tarjeta sin deformarse (cover), asi la onda queda igual en movil y en escritorio ancho. El navy plano
       detras es el color de respaldo mientras carga la imagen. */
    background: #0a1145 url("../images/fondo-card-balance.png") right top / cover no-repeat;
    box-shadow: 0 14px 34px rgba(8, 14, 70, .38), 0 0 28px rgba(0, 173, 225, .18);
}
.cp-balance-card > * {
    position: relative;
    z-index: 1;
}
.cp-balance-card .text-muted-light {
    color: #c7d0f2 !important;
}
.cp-balance-card__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .15rem;
    margin-bottom: .6rem;
}
.cp-balance-card__title {
    margin: 0 .35rem 0 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.cp-balance-card__icon-btn {
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    padding: .15rem .4rem !important;
    text-decoration: none;
}
.cp-balance-card__icon-btn:hover,
.cp-balance-card__icon-btn:focus {
    color: var(--cpui-green);
}
.cp-balance-card__profile {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
    padding: .5rem .9rem;
    border-radius: 4px;
    border: 1.5px solid #19d3ff;
    background: rgba(8, 16, 60, .45);
    font-size: .86rem;
    font-weight: 600;
}
.cp-balance-card__label {
    display: block;
    font-size: .92rem;
    font-weight: 600;
}
.cp-balance-card__account {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: .2rem 0 .9rem;
    font-size: 1.25rem;
    font-weight: 700;
}
.cp-balance-card__account .bi {
    font-size: 1.45rem;
}
.cp-balance-card__tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    margin-bottom: 1rem;
}
/* Recuadros de saldo: azul translúcido con borde claro y una línea cian→verde en la base. */
.cp-balance-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    padding: .85rem .9rem 1.05rem;
    border-radius: 12px;
    border: 1px solid rgba(100, 140, 240, .4);
    /* Azul oscuro translúcido (vidrio) sobre la imagen de fondo. */
    background: linear-gradient(180deg, rgba(28, 48, 150, .55) 0%, rgba(16, 32, 110, .66) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 6px 18px rgba(0, 0, 0, .22);
    /* Efecto vidrio: la imagen de fondo de la tarjeta se ve difuminada a través del recuadro. */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.cp-balance-tile__icon {
    flex: 0 0 auto;
    font-size: 2rem;
    line-height: 1;
    color: #19d3ff;
}
.cp-balance-tile__body {
    flex: 1 1 auto;
    min-width: 0;
}
.cp-balance-tile__label {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .86rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cp-balance-tile__help {
    color: #19d3ff;
    font-size: .95rem;
    cursor: help;
}
.cp-balance-tile__amount {
    margin: .1rem 0 0;
    font-size: 1.16rem;
    font-weight: 800 !important;
    letter-spacing: -.01em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* "Saldo para Compras" (el <p class="lead"> del segundo recuadro) usa el mismo tamano que "Saldo Principal";
   !important para que la regla .lead del tema no lo agrande. */
p.cp-balance-tile__amount {
    font-size: 1.16rem !important;
}
/* Decimales más pequeños ("$15.000" grande + ",00" chico), como en el mockup. Los separa money-format.js (script
   global) en <span class="money-value__main"> + <span class="money-value__decimals">; aquí solo se les da tamaño. */
.cp-balance-tile__amount .money-value__decimals {
    font-size: .68em;
    font-weight: 700;
    opacity: .9;
    vertical-align: baseline;
    position: static;
}
/* updateBalancefromBd() vuelve a insertar un <i class="bi bi-cart"> pequeño dentro del monto: la tarjeta ya
   muestra el carrito grande a la izquierda, así que ese ícono repetido se oculta. */
.cp-balance-tile__amount .bi {
    display: none;
}
.cp-balance-tile__bar {
    position: absolute;
    left: .9rem;
    bottom: .45rem;
    width: 84%;
    height: 3px;
    border-radius: 3px;
    /* Primer recuadro (Saldo Principal): raya celeste, como en el mockup. */
    background: linear-gradient(90deg, #19d3ff 0%, #6fe3ff 55%, rgba(111, 227, 255, 0) 100%);
}
/* Segundo recuadro (Saldo para Compras): raya verde, como en el mockup. */
.cp-balance-tile:nth-child(2) .cp-balance-tile__bar {
    background: linear-gradient(90deg, #00f5c8 0%, #00f5a6 55%, rgba(0, 245, 166, 0) 100%);
}
.cp-balance-card__ref-group {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.cp-balance-card__ref-group .input-group-text {
    border: 0;
    background: #fff;
    padding: .2rem .2rem .2rem .6rem;
}
.cp-balance-card__ref-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--cpui-green);
    color: var(--cpui-navy);
    font-size: 1.15rem;
}
.cp-balance-card__ref-group .form-control {
    border: 0;
    background: #fff;
    color: var(--cpui-navy);
    font-weight: 500;
    box-shadow: none;
    padding-top: .3rem;
    padding-bottom: .3rem;
    font-size: .95rem;
    line-height: 1.3;
}
.cp-balance-card__ref-group .btn-sec-color {
    border: 0;
    color: var(--cpui-navy);
    font-weight: 700;
    padding: .3rem 1rem;
    font-size: .95rem;
    line-height: 1.3;
}
.cp-balance-card__ref-group .btn-sec-color:hover {
    background: #2ffbb8;
    border-color: transparent;
}
/* Móvil: proporciones del mockup (tarjeta con radio 14px, título ~21px, recuadros de ~66px con montos ~19px). */
@media (max-width: 575.98px) {
    .cp-balance-card {
        padding: .8rem .85rem .9rem;
        border-radius: 4px;
    }
    .cp-balance-card__head {
        margin-bottom: .3rem;
    }
    .cp-balance-card__title {
        font-size: 1.2rem;
    }
    .cp-balance-card__icon-btn {
        font-size: 1.1rem;
        padding: .1rem .35rem !important;
    }
    .cp-balance-card__profile {
        padding: .3rem .65rem;
        font-size: .74rem;
    }
    .cp-balance-card__label {
        font-size: .78rem;
    }
    .cp-balance-card__account {
        margin: 0 0 .5rem;
        font-size: .95rem;
        gap: .45rem;
    }
    .cp-balance-card__account .bi {
        font-size: 1.15rem;
    }
    .cp-balance-card__tiles {
        gap: .6rem;
        margin-bottom: .65rem;
    }
    .cp-balance-tile {
        padding: .55rem .6rem .85rem;
        gap: .5rem;
        border-radius: 10px;
    }
    .cp-balance-tile__icon {
        font-size: 1.5rem;
    }
    .cp-balance-tile__label {
        font-size: .7rem;
    }
    .cp-balance-tile__help {
        font-size: .8rem;
    }
    .cp-balance-tile__amount {
        font-size: .88rem;
    }
    p.cp-balance-tile__amount {
        font-size: .88rem !important;
    }
    .cp-balance-tile__bar {
        left: .55rem;
        bottom: .3rem;
    }
    .cp-balance-card__ref .cp-balance-card__label {
        margin-bottom: .2rem !important;
        font-size: .76rem;
    }
    .cp-balance-card__ref-group .form-control,
    .cp-balance-card__ref-group .btn-sec-color {
        padding-top: .22rem;
        padding-bottom: .22rem;
        font-size: .82rem;
        line-height: 1.25;
    }
    .cp-balance-card__ref-group .input-group-text {
        padding-left: .5rem;
    }
    .cp-balance-card__ref-icon {
        width: 22px;
        height: 22px;
        font-size: .95rem;
    }
}
@media (max-width: 379.98px) {
    .cp-balance-tile__amount {
        font-size: .88rem;
    }
    p.cp-balance-tile__amount {
        font-size: .88rem !important;
    }
}

/* =========================================================================
   2. Accesos rápidos (Comprar saldo / Mejora tu Plan / Retirar saldo / ...)
   ========================================================================= */
.account-quick-actions-wrap {
    margin-top: 1.1rem;
}
/* En móvil la columna de Balance/accesos (.pl-mobile) trae padding-left:0 y padding-right normal: la tarjeta
   quedaba con 12px a la izquierda y 24px a la derecha, y los accesos pegados al borde izquierdo. Se igualan los
   márgenes laterales a 12px como en el mockup. */
@media (max-width: 767.98px) {
    #container-custom > .pl-mobile {
        padding-right: 0;
    }
    /* 14px de aire a cada lado de la tarjeta de Balance y de los accesos rapidos, como en el mockup. */
    .account-balance-card {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .account-quick-actions-wrap {
        padding: 0 14px;
    }
}
.cp-quick-tile.btn-service {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 108px;
    padding: .8rem .5rem !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: var(--cpui-navy) !important;
    box-shadow: var(--cpui-shadow) !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    transition: transform .18s ease, box-shadow .18s ease;
}
.cp-quick-tile.btn-service:hover,
.cp-quick-tile.btn-service:focus-visible {
    transform: translateY(-2px);
    background: #fff !important;
    color: var(--cpui-navy) !important;
    box-shadow: 0 12px 28px rgba(33, 33, 79, .16) !important;
}
.cp-quick-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    background: #E3F1FF;
    color: #1e6fe8;
}
.cp-quick-tile__icon--navy  { background: #ECE9FA; color: var(--cpui-navy); }
.cp-quick-tile__icon--cyan  { background: #DDF6FA; color: #0a9fd2; }
.cp-quick-tile__icon--amber { background: #FFF1D6; color: #d98d00; }
.cp-quick-tile__icon--green { background: #DDF9EE; color: #0b9e6d; }
.cp-quick-tile__label {
    display: block;
}
@media (min-width: 768px) {
    .cp-quick-tile.btn-service {
        flex: 1 1 0;
        max-width: 220px;
    }
}

/* =========================================================================
   3. Lista "Mi Cuenta" del dashboard (members/dashboard.tpl, pestañas #myTab)
   ========================================================================= */
.cp-section-title {
    color: var(--cpui-navy);
    font-weight: 800;
    font-size: 1.55rem;
    letter-spacing: -.01em;
}
.cp-account-card.card {
    border: 0 !important;
    background: transparent;
    box-shadow: none !important;
}
.cp-account-card > .card-header {
    background: transparent;
    border: 0;
    padding: 0;
}
.cp-account-card > .card-body {
    margin-top: 1rem;
    padding: 1.1rem;
    background: #fff;
    border-radius: var(--cpui-radius);
    box-shadow: var(--cpui-shadow);
}
#myTab.nav-pills {
    gap: .6rem !important;
}
#myTab .cp-account-tab.nav-btn {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    padding: .7rem .85rem;
    border-radius: 6px !important;
    border: 1.5px solid rgba(0, 173, 225, .18) !important;
    background: #fff;
    color: var(--cpui-label);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    box-shadow: 0 4px 14px rgba(33, 33, 79, .06) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#myTab .cp-account-tab.nav-btn:hover {
    border-color: var(--cpui-cyan) !important;
    color: var(--cpui-label);
}
#myTab .cp-account-tab.nav-btn.active,
#myTab .cp-account-tab.nav-btn.active:hover,
#myTab .cp-account-tab.nav-btn.active:focus,
#myTab .cp-account-tab.nav-btn.active:focus:not(:focus-visible) {
    background: #f3fbff !important;
    border-color: var(--cpui-cyan) !important;
    color: var(--cpui-navy) !important;
    box-shadow: 0 6px 18px rgba(0, 173, 225, .18) !important;
}
.cp-account-tab__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.35rem;
    line-height: 1;
    background: #E3F1FF;
    color: #1e6fe8;
}
.cp-account-tab__icon--cyan  { background: #DDF6FA; color: #0a9fd2; }
.cp-account-tab__icon--green { background: #DDF9EE; color: #0b9e6d; }
.cp-account-tab__icon--navy  { background: #ECE9FA; color: var(--cpui-navy); }
#myTab .cp-account-tab.active .cp-account-tab__icon {
    background: var(--cpui-cyan);
    color: #fff;
}
.cp-account-tab__label {
    flex: 1 1 auto;
    min-width: 0;
}
.cp-account-tab__chevron {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 1rem;
    color: var(--cpui-navy);
    opacity: .8;
}
/* Tablet y escritorio: cuadrícula de celdas iguales (mismo ancho y alto), en vez de fichas de ancho variable que
   quedaban desalineadas al pasar a una segunda fila. */
@media (min-width: 768px) {
    #myTab.nav-pills {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        align-items: stretch;
    }
    #myTab .item-100 {
        width: auto;
        min-width: 0;
    }
    #myTab .cp-account-tab.nav-btn {
        width: 100%;
        height: 100%;
        min-height: 58px;
        padding: .55rem .8rem;
        font-size: .92rem;
    }
    .cp-account-tab__chevron {
        display: none;
    }
    .cp-account-tab__icon {
        width: 38px;
        height: 38px;
        font-size: 1.15rem;
    }
}

/* Móvil: filas compactas y todas de la misma altura (46px), ícono en recuadro de 32px, etiqueta en una sola línea
   con puntos suspensivos si no cabe (así "Intentos de Inicio de Sesión Fallidos" no hace la fila más alta). */
@media (max-width: 767.98px) {
    .cp-section-title {
        font-size: 1.2rem;
    }
    #myTab.nav-pills {
        gap: .35rem !important;
    }
    #myTab .item-100,
    #myTab .cp-account-tab.nav-btn {
        width: 100%;
    }
    #myTab .cp-account-tab.nav-btn {
        height: 40px;
        min-height: 40px;
        padding: 0 .6rem 0 .45rem;
        gap: .6rem;
        border-radius: 6px !important;
        font-size: .86rem;
    }
    .cp-account-tab__icon {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        font-size: .95rem;
    }
    .cp-account-tab__label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }
    .cp-account-tab__chevron {
        font-size: .85rem;
    }
}
@media (max-width: 359.98px) {
    #myTab .cp-account-tab.nav-btn {
        font-size: .84rem;
        gap: .55rem;
    }
    .cp-balance-tile__label {
        font-size: .72rem;
    }
}

/* =========================================================================
   4. Configuración de la cuenta (members/settings.tpl)
   ========================================================================= */
.cp-settings__card.card {
    border: 0 !important;
    border-radius: var(--cpui-radius);
    box-shadow: var(--cpui-shadow) !important;
    overflow: hidden;
}
.cp-settings__card > .card-header {
    padding: 1rem 1rem .9rem;
    background: #fff;
    border-bottom: 1px solid #eef1f7;
}
.cp-settings__header {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: .9rem;
}
.cp-settings__header-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #E3F1FF;
    color: var(--cpui-navy);
    font-size: 1.6rem;
}
.cp-settings__title {
    margin: 0;
    color: var(--cpui-navy);
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1.2;
}
.cp-settings__subtitle {
    margin: .1rem 0 0;
    color: var(--cpui-muted);
    font-size: .95rem;
}
.cp-settings__header-badge {
    margin-left: auto;
}
.cp-settings__nav {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cp-settings__nav .nav-item {
    flex: 1 1 100%;
    min-width: 0;
}
.cp-settings__item.nav-link {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    padding: .7rem .85rem;
    border-radius: 6px;
    border: 1.5px solid rgba(0, 173, 225, .18);
    background: #fff;
    color: var(--cpui-navy);
    text-align: left;
    box-shadow: 0 4px 14px rgba(33, 33, 79, .06);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cp-settings__item.nav-link:hover {
    border-color: var(--cpui-cyan);
    color: var(--cpui-navy);
}
.cp-settings__item-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 1.4rem;
    line-height: 1;
    background: #E3F1FF;
    color: #1e6fe8;
}
.cp-settings__item-icon--green { background: #DDF9EE; color: #0b9e6d; }
.cp-settings__item-icon--cyan  { background: #DDF6FA; color: #0a9fd2; }
.cp-settings__item-icon--navy  { background: #ECE9FA; color: var(--cpui-navy); }
.cp-settings__item-icon--amber { background: #FFF1D6; color: #d98d00; }
.cp-settings__item-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}
.cp-settings__item-title {
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.2;
}
.cp-settings__item-desc {
    margin-top: .15rem;
    font-size: .84rem;
    line-height: 1.25;
    color: var(--cpui-muted);
}
.cp-settings__item-chevron {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--cpui-navy);
    opacity: .8;
}
/* Barra "volver + selector de sección" que reemplaza a la lista en móvil cuando hay una sección abierta. */
.cp-settings__back {
    display: none;
    align-items: center;
    gap: .6rem;
}
.cp-settings__back-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    background: #E3F1FF;
    color: var(--cpui-navy);
    font-size: 1.2rem;
}
.cp-settings__back .dropdown {
    flex: 1 1 auto;
    min-width: 0;
}
.cp-settings__back .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .6rem;
    width: 100%;
    padding: .45rem .9rem;
    border-radius: 14px;
    text-align: left;
    font-weight: 700;
}
.cp-settings__back .dropdown-toggle::after {
    margin-left: auto;
}
/* settings.js copia el innerHTML del botón de la sección activa dentro del toggle: se compacta ese contenido. */
.cp-settings__back .dropdown-toggle .cp-settings__item-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 1rem;
    background: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
}
.cp-settings__back .dropdown-toggle .cp-settings__item-desc,
.cp-settings__back .dropdown-toggle .cp-settings__item-chevron {
    display: none;
}
.cp-settings__back .dropdown-menu {
    width: 100%;
}
@media (min-width: 992px) {
    .cp-settings__nav .nav-item {
        flex: 0 1 auto;
    }
    .cp-settings__item.nav-link {
        width: auto;
        padding: .5rem .75rem;
        border-radius: 6px;
    }
    /* Sección activa (solo escritorio: en móvil la lista se oculta al abrir una sección). */
    .cp-settings__item.nav-link.active {
        border-color: var(--cpui-cyan);
        background: #f3fbff;
        color: var(--cpui-navy);
        box-shadow: 0 6px 18px rgba(0, 173, 225, .18);
    }
    .cp-settings__item.active .cp-settings__item-icon {
        background: var(--cpui-cyan);
        color: #fff;
    }
    .cp-settings__item-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 1.05rem;
    }
    .cp-settings__item-title {
        font-size: .92rem;
    }
    .cp-settings__item-desc,
    .cp-settings__item-chevron {
        display: none;
    }
    .cp-settings__back {
        display: none !important;
    }
}
@media (max-width: 991.98px) {
    .cp-settings__card > .card-header {
        padding: .9rem .7rem .8rem;
    }
    .cp-settings__header {
        padding: 0 .25rem;
    }
    /* Vista lista (inicial): solo encabezado + secciones + tarjeta de perfil. */
    .cp-settings[data-settings-view="list"] .cp-settings__body,
    .cp-settings[data-settings-view="list"] .cp-settings__back {
        display: none;
    }
    .cp-settings[data-settings-view="list"] .cp-settings__card > .card-header {
        border-bottom: 0;
    }
    /* Vista sección: barra de volver + contenido; la lista y la tarjeta de perfil se ocultan. */
    .cp-settings[data-settings-view="pane"] .cp-settings__nav,
    .cp-settings[data-settings-view="pane"] .cp-settings__header,
    .cp-settings[data-settings-view="pane"] .cp-profile-card {
        display: none;
    }
    .cp-settings[data-settings-view="pane"] .cp-settings__back {
        display: flex;
    }
}

/* Tarjeta de perfil (avatar, nombre, @usuario, insignias, cambiar/eliminar imagen) */
.cp-profile-card {
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
    padding: 1.25rem 1.1rem;
    background: #fff;
    border-radius: var(--cpui-radius);
    box-shadow: var(--cpui-shadow);
}
.cp-profile-card::before {
    content: '';
    position: absolute;
    right: -20%;
    bottom: -45%;
    width: 75%;
    height: 90%;
    background: radial-gradient(closest-side, rgba(0, 245, 166, .16), rgba(0, 173, 225, .06) 60%, transparent 75%);
    pointer-events: none;
}
.cp-profile-card > * {
    position: relative;
}
.cp-profile-card__main {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}
.cp-profile-card__avatar-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 128px;
    height: 128px;
}
.cp-profile-card__avatar {
    width: 128px !important;
    height: 128px !important;
    padding: 0 !important;
    object-fit: cover;
    background: #fff;
    border: 4px solid #fff !important;
    box-shadow: 0 0 0 3px var(--cpui-cyan), 0 8px 22px rgba(33, 33, 79, .18) !important;
}
.cp-profile-card__camera {
    position: absolute;
    right: -2px;
    bottom: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--cpui-cyan);
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.cp-profile-card__info {
    flex: 1 1 auto;
    min-width: 0;
}
.cp-profile-card__name {
    color: var(--cpui-navy);
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1.15;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.cp-profile-card__username {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .45rem;
    color: var(--cpui-muted);
    font-weight: 600;
    font-size: 1.05rem;
    text-transform: uppercase;
}
.cp-profile-card__copy {
    padding: .3rem .6rem;
    border: 1.5px solid #d9dde8;
    border-radius: 10px;
    background: #fff;
    color: var(--cpui-navy);
    font-weight: 700;
    font-size: .82rem;
    text-transform: none;
}
.cp-profile-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .6rem;
}
.cp-profile-card__badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .8rem;
    border-radius: 10px;
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
}
.cp-profile-card__badge--navy {
    background: linear-gradient(135deg, #0f1650, #21214F);
    color: #fff;
}
.cp-profile-card__badge--light {
    background: #F1F3F9;
    border: 1px solid #e3e6f0;
    color: var(--cpui-navy);
}
.cp-profile-card__meta {
    margin-top: .35rem;
    color: var(--cpui-muted);
    font-size: .8rem;
}
.cp-profile-card__phone {
    margin-top: .5rem;
    color: var(--cpui-muted);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: .02em;
}
.cp-profile-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    margin-top: 1.1rem;
}
.cp-profile-card__form {
    margin: 0;
    min-width: 0;
}
.cp-profile-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    min-height: 60px;
    padding: .7rem .9rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.15;
}
.cp-profile-card__btn .bi {
    font-size: 1.35rem;
}
.cp-profile-card__btn--cyan {
    border: 0;
    background: #0fb7ee;
    color: #fff;
    box-shadow: 0 8px 18px rgba(0, 173, 225, .28);
}
.cp-profile-card__btn--cyan:hover,
.cp-profile-card__btn--cyan:focus {
    background: var(--cpui-cyan);
    color: #fff;
}
.cp-profile-card__btn--light {
    border: 1px solid #e3e6f0;
    background: #F1F3F9;
    color: var(--cpui-navy);
}
.cp-profile-card__btn--light:hover,
.cp-profile-card__btn--light:focus {
    background: #e7ebf5;
    color: var(--cpui-navy);
}
.cp-profile-card__upload {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed #dfe3ee;
}
.cp-profile-card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1rem;
}
@media (max-width: 575.98px) {
    .cp-profile-card {
        padding: 1.1rem .9rem;
    }
    .cp-profile-card__main {
        gap: .85rem;
    }
    .cp-profile-card__avatar-wrap,
    .cp-profile-card__avatar {
        width: 104px !important;
        height: 104px !important;
    }
    .cp-profile-card__camera {
        width: 36px;
        height: 36px;
        font-size: .95rem;
    }
    .cp-profile-card__name {
        font-size: 1.12rem;
    }
    .cp-profile-card__username {
        font-size: .95rem;
    }
    .cp-profile-card__actions {
        gap: .6rem;
    }
    .cp-profile-card__btn {
        min-height: 56px;
        font-size: .92rem;
    }
}

/* =========================================================================
   5. Menú inferior móvil (4 botones) + botón verde "$" de Bre-B anclado en el centro
   ========================================================================= */
@media (max-width: 575.98px) {
    /* Solo mientras el menú está en pantalla (se oculta con d-sm-none a partir de 576px). */
    .menu-dashboard {
        display: flex !important;
        align-items: stretch;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        min-height: var(--cpui-dock-height);
        padding: 0 .35rem env(safe-area-inset-bottom);
        border-radius: 20px 20px 0 0;
        background: linear-gradient(180deg, #1b2160 0%, #151a4d 100%);
        box-shadow: 0 -8px 26px rgba(10, 14, 60, .28);
    }
    /* Hueco central para el botón flotante (solo cuando el JS lo ancló: body.cp-has-dock; si Bre-B no está
       activo el menú se reparte en los 4 botones). Los dos primeros enlaces van a la izquierda, los dos últimos a la derecha. */
    body.cp-has-dock .menu-dashboard::before {
        content: '';
        order: 2;
        flex: 0 0 72px;
    }
    .menu-dashboard > .btn-menu-footer:nth-child(-n+2) {
        order: 1;
    }
    .menu-dashboard > .btn-menu-footer:nth-child(n+3) {
        order: 3;
    }
    .menu-dashboard > .btn-menu-footer {
        flex: 1 1 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .2rem;
        min-width: 0;
        margin: .4rem .1rem !important;
        padding: .35rem .1rem !important;
        border: 1.5px solid transparent !important;
        border-radius: 3px !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #dfe4ff !important;
        font-size: .6rem !important;
        font-weight: 500 !important;
        letter-spacing: -.01em;
        line-height: 1.1;
        text-align: center;
    }
    .menu-dashboard > .btn-menu-footer .font-xs {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    /* Iconos: cada plantilla trae un marcado distinto (<i class="bi">, <svg> de 16/20/24px, feather.nav-icon);
       se fuerza el mismo tamano, grosor y color en todas para que el menu se vea identico en cualquier pagina. */
    .menu-dashboard > .btn-menu-footer .icon-menu-dashboard,
    .menu-dashboard > .btn-menu-footer > i,
    .menu-dashboard > .btn-menu-footer > svg {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        font-size: 18px !important;
        line-height: 1;
        color: #fff !important;
        stroke: #fff;
        stroke-width: 1.5;
    }
    .menu-dashboard > .btn-menu-footer > i::before {
        line-height: 1;
    }
    .menu-dashboard > .btn-menu-footer .font-xs {
        font-size: inherit !important;
        font-weight: 500 !important;
    }
    .menu-dashboard > .btn-menu-footer:hover,
    .menu-dashboard > .btn-menu-footer:focus-visible {
        color: #fff !important;
        background: rgba(255, 255, 255, .06) !important;
    }
    .menu-dashboard > .btn-menu-footer.is-current {
        border-color: var(--cpui-cyan) !important;
        background: rgba(0, 173, 225, .10) !important;
        color: #35d8ff !important;
    }
    .menu-dashboard > .btn-menu-footer.is-current .icon-menu-dashboard,
    .menu-dashboard > .btn-menu-footer.is-current > i,
    .menu-dashboard > .btn-menu-footer.is-current > svg {
        color: #35d8ff !important;
        stroke: #35d8ff;
    }
    /* El botón "$" de Bre-B (creado por JS en template.tpl) pasa de flotar en la esquina a quedar anclado y
       centrado sobre el menú; las reglas usan !important porque el JS de arrastre escribe top/right inline. */
    body.cp-has-dock #colpay-breb-floating-widget {
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: calc(var(--cpui-dock-height) - var(--cpui-fab-size) / 2 + env(safe-area-inset-bottom)) !important;
        width: var(--cpui-fab-size);
        height: var(--cpui-fab-size);
        transform: translateX(-50%);
        z-index: 1036;
        cursor: pointer;
        touch-action: manipulation;
        filter: none;
        box-shadow: 0 0 0 6px rgba(0, 245, 166, .22), 0 10px 24px rgba(0, 0, 0, .32);
    }
    body.cp-has-dock #colpay-breb-floating-widget .colpay-breb-floating-symbol {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 1.6rem;
    }
    /* Espacio al final de la página para que el contenido no quede debajo del menú ni del botón. */
    body:has(.menu-dashboard) {
        padding-bottom: calc(var(--cpui-dock-height) + 2.6rem + env(safe-area-inset-bottom));
    }
}

/* Menú inferior en teléfonos angostos (<360px): las etiquetas pueden ir en dos líneas en vez de recortarse.
   Va al final del archivo para ganar a la regla nowrap del bloque de 575.98px de arriba. */
@media (max-width: 359.98px) {
    :root {
        --cpui-fab-size: 3.6rem;
    }
    body.cp-has-dock .menu-dashboard::before {
        flex: 0 0 60px;
    }
    .menu-dashboard > .btn-menu-footer {
        margin: .35rem .05rem !important;
        padding: .25rem .05rem !important;
        font-size: .55rem !important;
        letter-spacing: -.02em;
    }
    .menu-dashboard > .btn-menu-footer .font-xs {
        white-space: normal;
        overflow: visible;
        overflow-wrap: anywhere;
        line-height: 1.05;
    }
}

/* =========================================================================
   6. Botón flotante "$" de Bre-B (estilo base; antes vivía en un <style> al final del body de template.tpl).
   Vive aquí, en el <head>, para que el botón que el servidor ya renderiza al inicio del body se vea bien desde el
   primer pintado. Las reglas de anclaje al menú móvil están en la sección 5 (body.cp-has-dock).
   ========================================================================= */
#colpay-breb-floating-widget {
  z-index: 99998;
  position: fixed;
  bottom: 80px;
  right: 15px;
  width: 3.7rem;
  height: 3.7rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #00F5A6;
  color: #21214F;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
  filter: drop-shadow(2px 4px 6px #777);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#colpay-breb-floating-widget:hover,
#colpay-breb-floating-widget:focus {
  background: #00d891;
  color: #21214F;
  outline: none;
}
#colpay-breb-floating-widget.is-dragging {
  cursor: grabbing;
}
#colpay-breb-floating-widget .colpay-breb-floating-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid rgba(33, 33, 79, 0.78);
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1;
  animation: colpayBrebPesoPulse 1.35s ease-in-out infinite;
}
@keyframes colpayBrebPesoPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.14);
    opacity: 0.82;
  }
}
body.breb-modal-open #colpay-breb-floating-widget,
body.breb-qr-scanner-open #colpay-breb-floating-widget {
  display: none !important;
}