.dt-buttons button{
    background-color: white !important;
    border: none !important;
}

.card {
    border-radius: 16px !important;
    overflow: hidden;
}

.card .card-header {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.badge {
    border-radius: 20px;
}

.btn {
    border-radius: 8px;
}

.modal-content {
    border-radius: 16px;
    overflow: hidden;
}

/* ===== KPI hero (Patrimonio total) ===== */
.kpi-hero {
    position: relative;
    background: linear-gradient(135deg, #ffc93c 0%, #ff9f1c 100%);
    color: #402a00;
    overflow: hidden;
}

.kpi-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0px, rgba(255, 255, 255, 0.18) 2px, transparent 2px, transparent 14px);
    pointer-events: none;
}

.kpi-hero .card-body {
    position: relative;
    z-index: 1;
}

.kpi-hero-label {
    color: rgba(64, 42, 0, 0.7);
    font-size: 13px;
    font-weight: 500;
}

.kpi-hero-label i {
    margin-right: 4px;
}

.kpi-hero-amount {
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #2b1a00;
}

.kpi-hero-up { color: #1c7c3f; }
.kpi-hero-down { color: #b02a2a; }

.kpi-hero-pill {
    background: rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #402a00;
    white-space: nowrap;
}

.kpi-hero-chart {
    width: 100%;
    height: 60px;
    position: relative;
}

.kpi-hero-chart canvas {
    width: 100% !important;
    height: 100% !important;
}

.kpi-hero-insight {
    background: rgba(255, 255, 255, 0.55);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    color: #402a00;
}

.kpi-hero-insight i {
    color: #b8860b;
    margin-right: 6px;
}

.kpi-hero-insight strong {
    color: #1c7c3f;
}

/* ===== KPI cards (Ingresos / Gastos / Ahorro) ===== */
.kpi-card {
    border: none;
}

.kpi-card .card-body {
    padding: 1.15rem 1.25rem;
}

.kpi-card-income { background: #eef0ff; }
.kpi-card-expense { background: #fdecea; }
.kpi-card-savings { background: #fff6e0; }

.kpi-card-label { color: rgba(0, 0, 0, 0.55); }
.kpi-card-amount { color: #1f2430; font-weight: 700; }
.kpi-card-sub { color: rgba(0, 0, 0, 0.5); }

.kpi-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    color: #fff;
}

.kpi-icon-income { background: #7c83fd; }
.kpi-icon-expense { background: #f27676; }

/* =========================================================
   MEJORAS VISUALES ADMIN — botón flotante, tarjetas KPI,
   avatares, tablas y modales elegantes
   (solo estilos, no cambia ninguna funcionalidad)
   ========================================================= */

/* ----- Botón de acción flotante (FAB) ----- */
.fab-btn {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff !important;
    background: linear-gradient(135deg, #6f42c1 0%, #0d6efd 100%);
    box-shadow: 0 8px 22px rgba(111, 66, 193, 0.45);
    border: none;
    z-index: 1030;
    transition: transform .22s ease, box-shadow .22s ease;
    cursor: pointer;
}

.fab-btn:hover {
    transform: translateY(-4px) scale(1.06);
    box-shadow: 0 12px 28px rgba(111, 66, 193, 0.55);
    color: #fff !important;
}

.fab-btn:active {
    transform: scale(0.96);
}

.fab-btn .fab-tooltip {
    position: absolute;
    right: 70px;
    white-space: nowrap;
    background: #212529;
    color: #fff;
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    transform: translateX(6px);
}

.fab-btn:hover .fab-tooltip {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 576px) {
    .fab-btn { right: 18px; bottom: 18px; width: 52px; height: 52px; font-size: 21px; }
    .fab-btn .fab-tooltip { display: none; }
}

/* ----- Tarjetas de estadística (Admin: dashboard, reportes, suscripciones) ----- */
.stat-card {
    border: none;
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.09);
}

.stat-card .card-body { padding: 1.15rem 1.25rem; }
.stat-card-label { color: rgba(0,0,0,0.55); font-size: 13px; font-weight: 500; }
.stat-card-value { font-weight: 700; letter-spacing: -0.3px; }

.stat-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    color: #fff;
}

.stat-icon-purple  { background: linear-gradient(135deg,#8e7cff,#6f42c1); }
.stat-icon-blue    { background: linear-gradient(135deg,#4facfe,#0d6efd); }
.stat-icon-green   { background: linear-gradient(135deg,#43e97b,#1c7c3f); }
.stat-icon-orange  { background: linear-gradient(135deg,#ffb347,#fd7e14); }
.stat-icon-red     { background: linear-gradient(135deg,#ff8a8a,#dc3545); }
.stat-icon-gray    { background: linear-gradient(135deg,#adb5bd,#6c757d); }
.stat-icon-dark    { background: linear-gradient(135deg,#495057,#212529); }

/* ----- Avatar circular con iniciales ----- */
.avatar-initial {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(135deg, #6f42c1, #0d6efd);
    text-transform: uppercase;
}

/* ----- Tablas más elegantes ----- */
.table-elegant tbody tr {
    transition: background-color .15s ease;
}

.table-elegant tbody tr:hover {
    background-color: rgba(111, 66, 193, 0.05);
}

.table-elegant thead th {
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: .04em;
    color: rgba(0,0,0,0.55);
    border-bottom-width: 1px;
}

/* ----- Encabezado de página (breadcrumb) ----- */
.page-breadcrumb .breadcrumb-title {
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.3px;
}

/* ----- Modales elegantes ----- */
.modal-content {
    border: none;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.modal-header {
    background: linear-gradient(135deg, rgba(111,66,193,0.06), rgba(13,110,253,0.06));
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.modal-header .modal-title {
    font-weight: 700;
}

.modal.fade .modal-dialog {
    transform: translateY(24px) scale(.98);
}

.modal.show .modal-dialog {
    transform: none;
}

/* ----- Estado vacío ----- */
.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: rgba(0,0,0,0.45);
}

.empty-state i {
    font-size: 42px;
    display: block;
    margin-bottom: 10px;
    color: rgba(111, 66, 193, 0.35);
}

/* ----- Burbujas de chat de soporte ----- */
.chat-bubble {
    max-width: 75%;
    border-radius: 16px;
    padding: 10px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.chat-bubble-admin {
    background: linear-gradient(135deg, #6f42c1, #0d6efd);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-bubble-user {
    background: #f1f2f6;
    color: #212529;
    border-bottom-left-radius: 4px;
}
.kpi-icon-savings { background: #f5b942; }