/* ─── Demo del panel en la página principal ──────────────────────────────────
   Estilos de la sección "panel" de public/pages/home.php
   (JS: assets/js/buukea-dashboard-demo.js). */

.bk-demo-home { position: relative; }

.bk-demo-kpi {
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1.15;
    color: #0F172A;
    font-variant-numeric: tabular-nums;
}

.bk-demo-keys { display: flex; gap: 16px; margin: 12px 0 4px; font-size: .78rem; color: #64748B; }
.bk-demo-keys span { display: inline-flex; align-items: center; gap: 6px; }
.bk-demo-line { display: inline-block; width: 18px; border-top: 2.5px solid #2563EB; }
.bk-demo-line-dash { border-top: 2px dashed #7f8794; }

.bk-demo-chart { position: relative; width: 100%; }
.bk-demo-chart-line { height: 180px; }
.bk-demo-chart-bars { height: 160px; }
.bk-demo-chart-donut { width: 130px; height: 130px; flex-shrink: 0; }

.bk-demo-donut-row { display: flex; align-items: center; gap: 20px; }
.bk-demo-legend { flex: 1; min-width: 0; }
.bk-demo-legend-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #E9ECEF; font-size: .9rem; }
.bk-demo-legend-row:last-child { border-bottom: 0; }
.bk-demo-legend-name { flex: 1; color: #334155; }
.bk-demo-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Aviso tipo notificación */
.bk-demo-home .bk-toast {
    position: absolute; z-index: 5; left: 50%; top: 10px;
    width: calc(100% - 32px); max-width: 340px;
    display: flex; align-items: center; gap: 10px;
    background: rgba(15,23,42,.94); color: #fff; border-radius: 14px; padding: 10px 12px;
    font-size: .85rem; line-height: 1.3;
    box-shadow: 0 12px 30px -12px rgba(15,23,42,.6);
    transform: translate(-50%, -10px); opacity: 0; pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}
.bk-demo-home .bk-toast strong { color: #9DD9A5; font-weight: 700; }
.bk-demo-home .bk-toast-show { opacity: 1; transform: translate(-50%, 0); }
.bk-demo-home .bk-toast-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: #2563EB center/18px no-repeat; }
.bk-demo-home .bk-toast-booking .bk-toast-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18M9 16l2 2 4-4'/%3E%3C/svg%3E"); }
.bk-demo-home .bk-toast-sale .bk-toast-icon { background-color: #047857; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E"); }

@media (max-width: 575.98px) {
    .bk-demo-chart-line { height: 150px; }
    .bk-demo-chart-bars { height: 110px; }
    .bk-demo-chart-donut { width: 110px; height: 110px; }
    .bk-demo-donut-row { gap: 14px; }
    .bk-demo-legend-row { font-size: .85rem; }
}
@media (min-width: 992px) {
    .bk-demo-chart-line { height: 240px; }
    .bk-demo-chart-bars { height: 290px; }
}
@media (prefers-reduced-motion: reduce) {
    .bk-demo-home .bk-toast { transition: none; }
}