/*
 * Tema Blueberry — sobreescribe la paleta "purple" del template base
 * (AdminLTE/SoftMaterial) por los colores de marca de Blueberry: violeta
 * (tomado del isotipo) sobre una base muy oscura con tinte purpura. Se carga
 * DESPUES de master_style.css y skins/_all-skins.css, asi que gana por orden
 * de cascada sin necesitar !important en la mayoria de los casos (mismos
 * selectores, misma especificidad, ultimo declarado gana).
 *
 * BlueBerry y BPay son ahora dos pasarelas separadas; este panel es el de
 * BlueBerry, con su paleta violeta (antes tenia por error el negro/naranja
 * que le corresponde a BPay).
 *
 * Si se agregan mas pantallas con "purple" (skin-purple, btn-purple,
 * bg-purple, text-purple, border-purple), automaticamente se ven en violeta
 * Blueberry sin tocar esta hoja de estilos.
 */

:root {
    --bpay-orange: #902EFF;
    --bpay-orange-dark: #7A1FE0;
    --bpay-black: #180B2E;
    --bpay-black-soft: #241242;
}

/* ===== Header / topbar ===== */
.skin-purple .main-header {
    background: var(--bpay-black);
}
.skin-purple .main-header .navbar .nav > li > a:hover,
.skin-purple .main-header .navbar .nav > li > a:active,
.skin-purple .main-header .navbar .nav > li > a:focus,
.skin-purple .main-header .navbar .nav .open > a,
.skin-purple .main-header .navbar .nav .open > a:hover,
.skin-purple .main-header .navbar .nav .open > a:focus,
.skin-purple .main-header .navbar .nav > .active > a {
    background: rgba(255, 90, 31, 0.15);
    color: var(--bpay-orange);
}
.skin-purple .main-header .logo,
.skin-purple .main-header > .logo {
    background: var(--bpay-black);
}
/*
 * .logo-mini y .logo-lg son inline-block dentro de .logo (230px de ancho,
 * overflow:hidden, altura fija). Si entre los dos no entran justos en esa
 * linea (ej. logo cargado + texto "BlueBerry" + tagline del portal), el navegador
 * los envuelve a una segunda linea en vez de recortarlos horizontalmente -
 * y esa segunda linea cae fuera del alto fijo del header, quedando
 * invisible. nowrap evita el salto de linea; lo que no entre se recorta
 * horizontalmente (visible), no desaparece entero (invisible).
 */
.main-header .logo {
    white-space: nowrap;
}
.main-header .logo .logo-lg {
    white-space: nowrap;
}

/* ===== Sidebar ===== */
/*
 * OJO: .main-sidebar usa position:absolute + min-height:100% (heredado del
 * template base), y ese 100% no se resuelve bien contra la altura real de
 * .wrapper (que es "auto"). En paginas con tablas largas el sidebar termina
 * siendo mas corto que el contenido, y por debajo queda expuesto el fondo de
 * .wrapper. Por eso .wrapper NO lleva el negro (se ve como un tajo negro al
 * hacer scroll) - se deja con el mismo gris claro que .content, y el negro
 * va solo en .main-sidebar/.left-side (el sidebar real).
 */
.skin-purple .wrapper {
    background-color: #f4f6f9;
}
.skin-purple .main-sidebar,
.skin-purple .left-side {
    background-color: var(--bpay-black);
}
.skin-purple .sidebar {
    border-color: var(--bpay-orange);
}
.skin-purple .sidebar-menu > li:hover > a {
    color: var(--bpay-orange);
    background-color: transparent;
}
.skin-purple.sidebar-collapse .sidebar-menu > li:hover > a {
    background-color: var(--bpay-black);
}
.skin-purple .sidebar-menu > li.active > a,
.skin-purple .sidebar-menu > li.menu-open > a {
    color: #ffffff;
    background: var(--bpay-orange);
    border-left-color: var(--bpay-orange);
}
.skin-purple .sidebar-menu > li > .treeview-menu {
    background: var(--bpay-black-soft);
}
.skin-purple .sidebar-menu .treeview-menu > li.active > a,
.skin-purple .sidebar-menu .treeview-menu > li > a:hover {
    color: var(--bpay-orange);
}

/* ===== Botones / utilitarios de marca (btn-purple, bg-purple, text-purple, border-purple) ===== */
.btn-purple {
    background-color: var(--bpay-orange);
    border-color: var(--bpay-orange);
    color: #fff;
}
.btn-purple:hover,
.btn-purple:active,
.btn-purple.active,
.show > .btn-purple.dropdown-toggle {
    background-color: var(--bpay-orange-dark);
    border-color: var(--bpay-orange-dark);
    color: #fff;
}
.btn-purple:focus,
.btn-purple.focus {
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(255, 90, 31, 0.35);
}
.btn-outline.btn-purple {
    color: var(--bpay-orange);
    border-color: var(--bpay-orange);
    background: transparent;
}
.btn-outline.btn-purple:hover {
    background-color: var(--bpay-orange);
    color: #fff;
}

.bg-purple {
    background-color: var(--bpay-orange) !important;
    color: #fff;
}
.bg-purple-active {
    background-color: var(--bpay-orange-dark) !important;
}
.text-purple {
    color: var(--bpay-orange) !important;
}
.border-purple {
    border-color: var(--bpay-orange) !important;
}
.skin-purple .btn-blue {
    background-color: var(--bpay-orange);
    color: #fff;
    border: 1px solid var(--bpay-orange);
}
.skin-purple .btn-blue:hover {
    background-color: #fff;
    color: var(--bpay-orange);
}

/* ===== Marca / wordmark BlueBerry ===== */
.bpay-brand {
    font-weight: 800;
    letter-spacing: 0.5px;
}
.bpay-brand .bpay-brand-accent {
    color: var(--bpay-orange);
}
.bpay-tagline {
    color: #9a9a9a;
    font-size: 12px;
}

/* fondo de las pantallas de login (reemplaza el fondo hotlinkeado anterior) */
body.bpay-auth-bg {
    background: linear-gradient(135deg, var(--bpay-black) 0%, #4B12A0 55%, var(--bpay-orange) 130%);
}

/* ===== Modal de detalle (Transacciones QR y reutilizable en otras pantallas) ===== */
.bpay-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 12, .65);
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}
.bpay-modal {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    max-width: 960px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    overflow: hidden;
}
.bpay-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--bpay-black);
    color: #fff;
}
.bpay-modal-header h4 {
    margin: 0;
    font-weight: 700;
    font-size: 17px;
}
.bpay-modal-header small {
    color: #9aa0a6;
    display: block;
    margin-top: 2px;
}
.bpay-modal-close {
    background: transparent;
    border: 0;
    color: #fff;
    opacity: .7;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.bpay-modal-close:hover {
    opacity: 1;
    color: var(--bpay-orange);
}
.bpay-modal-body {
    padding: 24px;
    max-height: 75vh;
    overflow-y: auto;
}
.bpay-modal-footer {
    padding: 14px 24px;
    border-top: 1px solid #eee;
    text-align: right;
}

.bpay-modal-cols {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}
.bpay-modal-col {
    flex: 1 1 340px;
    min-width: 280px;
}

.bpay-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #8a8f98;
    font-weight: 700;
    margin: 0 0 10px;
}
.bpay-section-title:not(:first-child) {
    margin-top: 22px;
}

.bpay-kv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}
.bpay-kv-full {
    grid-column: 1 / -1;
}
.bpay-kv-item label {
    display: block;
    font-size: 11px;
    color: #9aa0a6;
    margin: 0 0 2px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.bpay-kv-item div {
    font-size: 14px;
    color: #2c2f33;
    font-weight: 500;
    word-break: break-word;
}

.bpay-json {
    background: var(--bpay-black);
    color: #d8e3ea;
    border-radius: 8px;
    padding: 14px 16px;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 260px;
    overflow-y: auto;
}

.bpay-callback-item {
    border-left: 2px solid var(--bpay-orange);
    padding-left: 12px;
    margin-bottom: 16px;
}
.bpay-callback-item:last-child {
    margin-bottom: 0;
}
.bpay-callback-item .bpay-callback-fecha {
    font-size: 12px;
    color: #8a8f98;
    margin-bottom: 6px;
    display: block;
}

.bpay-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.bpay-badge-success { background: #e4f7ec; color: #1e8a4c; }
.bpay-badge-warning { background: #fff2e0; color: #b9660b; }
.bpay-badge-muted { background: #eef0f2; color: #6b7075; }


/* 1. Escritorio (Menú expandido): Ocultar el logo mini y mostrar solo el logo grande */
body:not(.sidebar-collapse) .logo .logo-mini {
    display: none !important;
}

body:not(.sidebar-collapse) .logo .logo-lg {
    display: inline-block !important;
}

/* 2. Escritorio (Menú colapsado): Ocultar el logo grande y mostrar solo el logo mini */
body.sidebar-collapse .logo .logo-lg {
    display: none !important;
}

body.sidebar-collapse .logo .logo-mini {
    display: inline-block !important;
}

/* 3. Dispositivos móviles / pantallas pequeñas: Mostrar únicamente un logo */
@media (max-width: 767px) {
    .logo .logo-mini {
        display: none !important;
    }
    .logo .logo-lg {
        display: inline-block !important;
    }
}