/*******************************************
    BOOH BRAIN – DASHBOARD RESPONSIVE v2
    (CSS desde cero, limpio y estable)
*******************************************/

/* ------------------------------
   Variables
--------------------------------*/
:root {
    --bb-bg: #0b0f16;
    --bb-panel: #111722;
    --bb-border: rgba(255,255,255,0.08);
    --bb-text: #d9e7ff;
    --bb-text-muted: #8ea0b8;
    --bb-accent: #01bffe;
}

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--bb-bg);
    color: var(--bb-text);
    font-family: "Inter", system-ui, sans-serif;
}

header,
.header-dashboard {
    height: 95px;
}

.side-menu {
    top: 80px !important;
}

.dashboard-content {
    padding-top: 60px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    
    margin: 0 auto; /* centra todo */
}

/* =======================================
   SIDEBAR DESKTOP — .side-menu
=========================================*/
.side-menu {
    width: 240px;
    background: var(--bb-panel);
    border-right: 1px solid var(--bb-border);
    padding: 20px 0;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
}

.side-menu .menu-links {
    list-style: none;
    padding: 0 16px;
}

.side-menu a {
    display: block;
    padding: 10px 14px;
    color: var(--bb-text-muted);
    text-decoration: none;
    border-radius: 6px;
    transition: 0.15s;
}

.side-menu a:hover {
    background: rgba(255,255,255,0.06);
    color: var(--bb-text);
}

.side-menu a.active {
    background: var(--bb-accent);
    color: #000;
    font-weight: 600;
}

.menu-title {
    margin: 16px 0 5px;
    padding-left: 4px;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--bb-accent);
}

.menu-separator {
    height: 1px;
    width: 100%;
    margin: 12px 0;
    background: var(--bb-border);
}

/* =======================================
   CONTENIDO PRINCIPAL
=========================================*/
.dash-main {
    margin-left: 240px;
    padding: 20px;
}

/* =======================================
   MENÚ MÓVIL — .mobile-menu-simple
=========================================*/

.mobile-menu-simple {
    display: none; /* oculto en desktop */
    background: var(--bb-panel);
    padding: 12px;
    border-bottom: 1px solid var(--bb-border);
}

.mobile-menu-btn {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border: none;
    background: var(--bb-accent);
    border-radius: 8px;
    color: #000;
    cursor: pointer;
    font-weight: 600;
}

.mobile-menu-panel2 {
    margin-top: 10px;
    display: none;
    flex-direction: column;
    gap: 8px;
    background: var(--bb-panel);
    padding: 10px 0;
}

.mobile-menu-panel2 a {
    padding: 10px 14px;
    color: var(--bb-text-muted);
    text-decoration: none;
    display: block;
}

.mobile-menu-panel2 a.active {
    color: var(--bb-accent);
    font-weight: 600;
}

.mm-title {
    padding: 12px 14px 4px;
    font-size: 12px;
    color: var(--bb-accent);
    text-transform: uppercase;
}

/* =======================================
   RESPONSIVE
=========================================*/

/* Móvil y tablet */
@media (max-width: 900px) {

    /* Oculta sidebar desktop */
    .side-menu {
        display: none !important;
    }

    /* Activa menú móvil */
    .mobile-menu-simple {
        display: block !important;
    }

    .dash-main {
        margin-left: 0 !important;
    }
}

/*******************************************
    ESTILOS COMPLETOS DEL DASHBOARD
*******************************************/


/* ------------------------------
   Layout general
--------------------------------*/
.dashboard-content {
    margin-left: 240px;
    padding: 30px;
}

@media (max-width: 900px) {
    .dashboard-content {
        margin-left: 0 !important;
        padding: 20px;
    }
}


/* ------------------------------
   Header del dashboard
--------------------------------*/
.dashboard-header h1 {
    font-size: 36px;
    font-weight: 800;
    color: #dbe9ff;
    margin-bottom: 8px;
}

.dashboard-header p {
    font-size: 16px;
    color: #8fa5c5;
    margin-bottom: 25px;
}


/* ------------------------------
   Grid system (muy limpio)
--------------------------------*/
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-bottom: 28px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 28px;
}

@media (max-width: 1100px) {
    .grid-3, .grid-2 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .grid-3, .grid-2 {
        grid-template-columns: 1fr;
    }
}


/* ------------------------------
   Cards — estilo Booh Finance
--------------------------------*/
.card {
    background: #141c27;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    margin-top: 20px;
}

.card h3 {
    color: #dbe9ff;
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: 600;
}

.big-number {
    font-size: 32px;
    font-weight: 800;
    color: #01bffe;
    margin-bottom: 6px;
}

.card-tag {
    font-size: 13px;
    color: #94a8c7;
}


/* ------------------------------
   Iconos de las tarjetas
--------------------------------*/
.card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.card-icon i {
    font-size: 22px;
}

.card-icon.green  { background: #16c47f; color: #16c47f; }
.card-icon.blue   { background: #01bffe; color: #01bffe; }
.card-icon.pink   { background: #fe00fd; color: #FE00FD; }
.card-icon.purple    { background: #9D00FF; color: #FE00FD; }

/* =======================================
   MENU DESKTOP — FINTECH + HOVER AZUL
======================================= */

.side-menu {
    width: 230px;
    background: #0e1822;  /* panel oscuro fintech */
    border-right: 1px solid rgba(255,255,255,0.06);
    padding: 20px 0;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
}

.side-menu .menu-links a {
    display: block;
    padding: 11px 20px;
    margin: 4px 0;
    font-size: 15px;
    color: #9eb0c5;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}

/* HOVER AZUL PROFESIONAL — EL QUE TE GUSTABA */
.side-menu .menu-links a:hover {
    background: rgba(1, 191, 254, 0.15); /* azul suave */
    color: #e7f7ff !important;
}

.side-menu .menu-links a.active {
    background: rgba(1, 191, 254, 0.25); /* azul más intenso */
    color: #01bffe;
    font-weight: 600;
}

.menu-title {
    padding: 14px 22px 6px;
    font-size: 12px;
    color: #01bffe;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.8;
}

.menu-separator {
    height: 1px;
    width: calc(100% - 40px);
    background: rgba(255,255,255,0.08);
    margin: 12px auto;
}

/* =======================================
   MENU MÓVIL — FINTECH + HOVER AZUL
======================================= */

.mobile-menu-simple {
    display: none;
    background: #0e1822;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 14px 18px;
}

.mobile-menu-btn {
    width: 100%;
    padding: 12px 15px;
    background: rgba(1, 191, 254, 0.25); /* azul booh finance */
    border: none;
    border-radius: 6px;
    color: #ffffff;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

.mobile-menu-panel2 {
    display: none;
    background: #0b141d;
    border-radius: 6px;
    padding: 10px 0;
    margin-top: 10px;
    border: 1px solid rgba(255,255,255,0.06);
}

.mobile-menu-panel2 a {
    display: block;
    padding: 11px 18px;
    font-size: 15px;
    color: #9eb0c5;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}

/* HOVER AZUL FINTECH */
.mobile-menu-panel2 a:hover {
    background: rgba(1, 191, 254, 0.15);
    color: #e7f7ff;
}

.mobile-menu-panel2 a.active {
    color: #01bffe;
    font-weight: 600;
}

.mm-title {
    padding: 12px 18px 4px;
    font-size: 12px;
    color: #01bffe;
    text-transform: uppercase;
    font-weight: 600;
}

@media (max-width: 900px) {
    .mobile-menu-simple {
        display: block !important;
    }
}

/***********************************************
    CLIENTE - VENTAS
    Estilo Fintech · Booh Finance
************************************************/

/* ==========================================
   Header de la sección Ventas
========================================== */

.dashboard-header h1 {
    font-size: 34px;
    font-weight: 800;
    color: #dbe9ff;
    margin-bottom: 6px;
}

.dashboard-header p {
    font-size: 15px;
    color: #8fa5c5;
    margin-bottom: 24px;
}


/* ==========================================
   Tarjetas de métricas (hoy, semana…)
========================================== */

.card h3 {
    margin-bottom: 6px;
    color: #e0ecff;
}

.card .big-number {
    font-size: 30px;
    font-weight: 800;
    color: #01bffe;
    margin-bottom: 4px;
}

.card .card-tag {
    font-size: 13px;
    color: #8fa5c5;
}


/* ==========================================
   Gráficas Chart.js
========================================== */

.card canvas {
    width: 100%;
    height: 260px;
}

.card h3 {
    margin-bottom: 14px;
}


/* ==========================================
   Líneas del detalle por canal
========================================== */

.tp-line {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 15px;
    color: #e0ecff;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.tp-line span {
    color: #01bffe;
    font-weight: 600;
}


/* ==========================================
   Responsive para móvil <900px
========================================== */

@media (max-width: 900px) {

    .card canvas {
        height: 220px;
    }

    .tp-line {
        font-size: 14px;
        padding: 10px 0;
    }
}

/***********************************************
   CLIENTE – PRODUCTOS
   Estilo Fintech · Booh Finance
************************************************/

/* Título */
.dashboard-content h1 {
    font-size: 34px;
    font-weight: 800;
    color: #dbe9ff;
    margin-bottom: 6px;
}

.dashboard-content p {
    font-size: 15px;
    color: #8fa5c5;
    margin-bottom: 24px;
}

/* GRID de productos */
.grid-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
    margin-top: 20px;
}

/* Tarjeta producto */
.product-card {
    background: #141c27;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: 0.18s;
    position: relative;
}

.product-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    transform: translateY(-2px);
}

/* Imagen */
.product-img {
    height: 150px;
    background: #0d131b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Información */
.product-info {
    padding: 16px;
}

.product-info h3 {
    font-size: 17px;
    color: #e6f1ff;
    margin-bottom: 6px;
}

.prod-cat {
    font-size: 13px;
    color: #8fa5c5;
    margin-bottom: 4px;
}

.prod-price {
    font-size: 16px;
    color: #01bffe;
    font-weight: 700;
}

/* Botón editar */
.btn-edit {
    margin: 12px 16px 16px 16px;
    background: #01bffe;
    color: #000;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    transition: 0.15s;
}

.btn-edit:hover {
    background: #3cd6ff;
}

/***********************************************
   BARRA DE FILTROS (PRODUCTOS)
************************************************/

.filters-bar {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.filter-input,
.filter-select {
    padding: 10px 14px;
    background: #0e1822;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #dbe9ff;
    font-size: 15px;
}

.filter-input {
    flex: 1;
}

.filter-input::placeholder {
    color: #8da0b5;
}

.filter-select {
    width: 220px;
    cursor: pointer;
}

.filter-select option {
    background: #0e1822;
    color: #dbe9ff;
}

/***********************************************
   CATEGORÍAS — PREMIUM VERSION (FINTECH)
************************************************/

.categories-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    flex-wrap: wrap;
    gap: 12px;
}

/* BOTONES SUPERIORES */
.cat-btn {
    padding: 10px 16px;
    background: #01bffe;
    border-radius: 8px;
    color: #000;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cat-btn.secondary {
    background: rgba(255,255,255,0.08);
    color: #d7e4f2;
}
.cat-btn.secondary:hover {
    background: rgba(255,255,255,0.15);
}

/* BARRA DE FILTROS */
.categories-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.categories-filters input,
.categories-filters select {
    padding: 10px 14px;
    background: #0e1822;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #dbe9ff;
    font-size: 15px;
    min-width: 180px;
}
.categories-filters input {
    flex: 1;
}
.categories-filters input::placeholder {
    color: #8fa5c5;
}

/* GRID PRINCIPAL */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    gap: 22px;
}

/* CARD */
.category-card {
    background: #141c27;
    border: 1px solid rgba(255,255,255,0.06);
    padding: 22px;
    border-radius: 14px;
    transition: 0.18s;
}
.category-card:hover {
    border-color: #01bffe;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

/* HEADER */
.cat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.cat-title {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #dbe9ff;
}

/* STATUS */
.cat-status {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}
.cat-status.active {
    background: rgba(1,191,254,0.20);
    color:#01bffe;
}
.cat-status.inactive {
    background: rgba(255,0,0,0.25);
    color:#ff4a4a;
}

/* INFO */
.cat-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    color: #8fa5c5;
    font-size: 14px;
}

/* ACTIONS */
.cat-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
.cat-actions button {
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    background: rgba(255,255,255,0.06);
    color: #d7e4f2;
    border: none;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cat-actions .btn-edit:hover {
    background: rgba(1,191,254,0.20);
    color: #01bffe;
}
.cat-actions .btn-subcats:hover {
    background: rgba(254,0,253,0.20);
    color: #fe00fd;
}

/* SUBCATEGORÍAS */
.subcat-wrapper {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.subcat-card {
    background: rgba(255,255,255,0.04);
    padding: 10px 14px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.subcat-card button {
    padding: 4px 6px;
    border:none;
    background: rgba(255,255,255,0.08);
    border-radius: 6px;
    cursor:pointer;
}

@media(max-width:900px){
    .categories-grid {
        grid-template-columns: 1fr;
    }
}

/***********************************************
   CATEGORÍAS — PREMIUM VERSION (FINTECH)
************************************************/

.categories-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    flex-wrap: wrap;
    gap: 12px;
}

/* BOTONES SUPERIORES */
.cat-btn {
    padding: 10px 16px;
    background: #01bffe;
    border-radius: 8px;
    color: #000;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cat-btn.secondary {
    background: rgba(255,255,255,0.08);
    color: #d7e4f2;
}
.cat-btn.secondary:hover {
    background: rgba(255,255,255,0.15);
}

/* BARRA DE FILTROS */
.categories-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.categories-filters input,
.categories-filters select {
    padding: 10px 14px;
    background: #0e1822;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #dbe9ff;
    font-size: 15px;
    min-width: 180px;
}
.categories-filters input {
    flex: 1;
}
.categories-filters input::placeholder {
    color: #8fa5c5;
}

/* GRID PRINCIPAL */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    gap: 22px;
}

/* CARD */
.category-card {
    background: #141c27;
    border: 1px solid rgba(255,255,255,0.06);
    padding: 22px;
    border-radius: 14px;
    transition: 0.18s;
}
.category-card:hover {
    border-color: #01bffe;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

/* HEADER */
.cat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.cat-title {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #dbe9ff;
}

/* STATUS */
.cat-status {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}
.cat-status.active {
    background: rgba(1,191,254,0.20);
    color:#01bffe;
}
.cat-status.inactive {
    background: rgba(255,0,0,0.25);
    color:#ff4a4a;
}

/* INFO */
.cat-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    color: #8fa5c5;
    font-size: 14px;
}

/* ACTIONS */
.cat-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
.cat-actions button {
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    background: rgba(255,255,255,0.06);
    color: #d7e4f2;
    border: none;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cat-actions .btn-edit:hover {
    background: rgba(1,191,254,0.20);
    color: #01bffe;
}
.cat-actions .btn-subcats:hover {
    background: rgba(254,0,253,0.20);
    color: #fe00fd;
}

/* SUBCATEGORÍAS */
.subcat-wrapper {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.subcat-card {
    background: rgba(255,255,255,0.04);
    padding: 10px 14px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.subcat-card button {
    padding: 4px 6px;
    border:none;
    background: rgba(255,255,255,0.08);
    border-radius: 6px;
    cursor:pointer;
}

@media(max-width:900px){
    .categories-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================
   TÍTULO SUPERIOR DE EMPRESA
============================= */

.menu-company {
    padding: 20px;
    padding-bottom: 14px;
    font-size: 17px;
    font-weight: 700;
    color: #e6f1ff;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 12px;
}

.menu-company i {
    color: #01bffe;
    font-size: 18px;
}

/* ======== SIDEBAR CON SCROLL INTERNO ======== */
.side-menu {
    height: 100vh;              /* ocupa toda la altura */
    overflow-y: auto;           /* su propio scroll */
    overflow-x: hidden;
    padding-bottom: 40px;       /* margen para que no corte opciones */
}

/* Oculta la barra fea en navegadores modernos */
.side-menu::-webkit-scrollbar {
    width: 6px;
}

.side-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 20px;
}

.side-menu::-webkit-scrollbar-track {
    background: transparent;
}

.btn-ia-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #16202d;
    border: 1px solid #2e3a4d;
    color: #b9c9df;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: .25s;
    text-decoration: none;
}

.btn-ia-toggle i {
    font-size: 18px;
    opacity: 0.8;
}

/* HOVER general */
.btn-ia-toggle:hover {
    background: #1c2a3b;
    border-color: #3a4a63;
}

/* --- MODO ACTIVADO --- */
.btn-ia-toggle.active {
    background: rgba(1,191,254,0.15);
    border-color: #01bffe;
    color: #01bffe;
    box-shadow: 0 0 10px rgba(1,191,254,0.25);
}

.btn-ia-toggle.active i {
    opacity: 1;
    color: #01bffe;
}

/* HOVER activado */
.btn-ia-toggle.active:hover {
    background: rgba(1,191,254,0.22);
}
.ia-limit-banner {
    margin-top: 10px;
    background: rgba(255, 74, 74, 0.15);
    border-left: 3px solid #ff4a4a;
    padding: 10px 12px;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    font-size: 14px;
    color: #ffbbbb;
    align-items: flex-start;
    animation: fadeIn .3s ease;
}
.ia-limit-banner .close-banner {
    margin-left: auto;
    cursor: pointer;
    opacity: .7;
}
@keyframes fadeIn {
    from {opacity:0; transform: translateY(4px);}
    to {opacity:1; transform: translateY(0);}
}

.btn-ia {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    background: #161c28;
    color: #fff;
    transition: .25s;
}

.btn-ia:hover {
    background: #1e2533;
}

.btn-ia.active {
    background: #01bffe;
    color: #00131d;
}

.limit-banner {
    margin-top: 12px;
    background: rgba(255,0,0,0.15);
    border: 1px solid rgba(255,0,0,0.35);
    padding: 12px;
    border-radius: 10px;
    color: #ff7777;
    animation: fadeIn .25s ease-out;
}

/* ---------- LED IA STATUS ---------- */
.ia-status-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 4px 0;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    width: fit-content;
}

.ia-status-badge .led {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

/* LED colores */
.ia-status-badge.on .led {
    background: #12e65f; /* Verde */
    box-shadow: 0 0 6px #12e65f;
}

.ia-status-badge.off .led {
    background: #ff4747; /* Rojo */
    box-shadow: 0 0 6px #ff4747;
}

.ia-status-badge.error .led {
    background: #ff9f22; /* Naranja */
    box-shadow: 0 0 6px #ff9f22;
}

.ia-status-badge .label {
    font-size: 14px;
    color: #e7f0fa;
    font-weight: 600;
}

/********************************************
    IA PRICING – ESTILOS FINTECH BOOH BRAIN
*********************************************/

/* Tabs superiores */
.pricing-topmenu {
    display:flex;
    gap:12px;
    margin-bottom:24px;
    padding-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    overflow-x:auto;
}
.pricing-topmenu::-webkit-scrollbar { display:none; }

.ptab {
    padding:10px 18px;
    border-radius:10px;
    background:rgba(255,255,255,0.05);
    color:#E8F4FF;
    text-decoration:none;
    font-size:15px;
    font-weight:500;
    white-space:nowrap;
    transition:0.2s;
}
.ptab:hover {
    background:rgba(1,191,254,0.12);
    color:#01bffe;
}
.ptab.active {
    back

/********************************************
   IA PRICING — ESTILOS COMPLETOS BOOH BRAIN
*********************************************/

/* ===== TOP MENU (tabs IA Pricing) ===== */
.pricing-topmenu {
    display: flex;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    overflow-x: auto;
    white-space: nowrap;
}
.pricing-topmenu::-webkit-scrollbar { display:none; }

.ptab {
    padding: 10px 18px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    color: #E6F1FA;
    text-decoration: none;
    font-size: 15px;
    transition: 0.25s;
}
.ptab:hover {
    background: rgba(1,191,254,0.18);
    color: #01bffe;
}
.ptab.active {
    background: rgba(1,191,254,0.27);
    color: #01bffe;
    font-weight: 700;
}

/* ===== SECTION BLOCK ===== */
.section-block {
    margin-bottom: 42px;
}

/* ===== PILLS RESTAURANTES ===== */
.restaurant-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.restaurant-pill {
    padding: 9px 16px;
    border-radius: 30px;
    background: #0C1623;
    border: 1px solid rgba(255,255,255,0.08);
    color: #EAF4FF;
    text-decoration: none;
    transition: 0.2s;
}
.restaurant-pill:hover {
    border-color: #01bffe;
    color: #01bffe;
}
.restaurant-pill.active {
    background: #01bffe;
    color: #000;
    border-color: transparent;
}

/* ===== KPIs ===== */
.kpi-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
.kpi-card {
    background: #0C1623;
    padding: 20px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    transition: 0.3s;
}
.kpi-card:hover {
    border-color: #01bffe;
}
.kpi-card h4 {
    color: #8DA3BB;
    font-size: 14px;
    margin-bottom: 6px;
}
.kpi-card .value {
    font-size: 34px;
    font-weight: 800;
    color: white;
}

/* KPI Actions */
.kpi-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ===== BUTTONS ===== */
.btn-primary {
    padding: 10px 16px;
    border-radius: 10px;
    background: #01bffe;
    color: #001018;
    text-decoration: none;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: .2s;
}
.btn-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.btn-ghost {
    padding: 10px 16px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #E8F4FF;
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: .2s;
}
.btn-ghost:hover {
    border-color: #01bffe;
    color: #01bffe;
}

/* ===== PRODUCTOS MONITORIZADOS ===== */
.product-table {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.product-row {
    background: #0C1623;
    border-radius: 12px;
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: .25s;
}
.product-row:hover {
    border-color: #01bffe;
}
.product-prices span {
    color: #8EA3B6;
}

/* ===== ALERTAS ===== */
.alert-row {
    background: #0C1623;
    padding: 16px;
    border-radius: 12px;
    border-left: 4px solid rgba(255,255,255,0.10);

/*******************************************************
    IA PRICING — STYLES (Booh Brain Futuristic V2)
********************************************************/

:root {
    --booh-blue: #01bffe;
    --text-light: #e7f7ff;
    --text-muted: #9bb4c9;
    --bg-card: #0f1824;
    --bg-soft: #0b121c;
    --border-soft: rgba(255,255,255,0.08);
}

/* ----------------------------------------------
    SUBNAV TABS (Dashboard / Alertas / Estrategias / Carta…)
---------------------------------------------- */
.pricing-topmenu {
    display:flex;
    gap:16px;
    margin-bottom:22px;
    overflow-x:auto;
    padding-bottom:4px;
}

.ptab {
    padding:10px 16px;
    border-radius:12px;
    background:rgba(255,255,255,0.04);
    color:var(--text-muted);
    text-decoration:none;
    font-weight:600;
    font-size:0.9rem;
    white-space:nowrap;
    border:1px solid rgba(255,255,255,0.04);
    transition:.2s;
}

.ptab:hover {
    color:var(--booh-blue);
    border-color:var(--booh-blue);
}

.ptab.active {
    background:rgba(1,191,254,0.18);
    border-color:var(--booh-blue);
    color:var(--booh-blue);
    font-weight:800;
}

/* ----------------------------------------------
    SECTION BLOCK (contenedores principales)
---------------------------------------------- */
.section-block {
    background:var(--bg-card);
    border:1px solid var(--border-soft);
    border-radius:18px;
    padding:22px;
    margin-bottom:26px;
}

/* ----------------------------------------------
    RESTAURANT PILLS
---------------------------------------------- */
.restaurant-list {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:10px;
}

.restaurant-pill {
    padding:8px 14px;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--border-soft);
    border-radius:16px;
    color:var(--text-light);
    text-decoration:none;
    font-size:0.85rem;
    font-weight:600;
    transition:.2s;
}

.restaurant-pill:hover {
    border-color:var(--booh-blue);
    color:var(--booh-blue);
}

.restaurant-pill.active {
    background:rgba(1,191,254,0.18);
    border-color:var(--booh-blue);
    color:var(--booh-blue);
}

/* ----------------------------------------------
    KPI CARDS
---------------------------------------------- */
.kpi-cards {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
    gap:16px;
}

.kpi-card {
    background:var(--bg-soft);
    border:1px solid var(--border-soft);
    padding:18px;
    border-radius:16px;
    text-align:left;
}

.kpi-card h4 {
    margin:0;
    font-size:0.9rem;
    color:var(--text-muted);
    font-weight:600;
}

.kpi-card .value {
    margin-top:6px;
    font-size:1.8rem;
    font-weight:800;
    color:var(--booh-blue);
}

/* ----------------------------------------------
    PRODUCTOS MONITORIZADOS
---------------------------------------------- */
.product-table {
    margin-top:14px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.product-row {
    background:var(--bg-soft);
    border:1px solid var(--border-soft);
    border-radius:14px;
    padding:14px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.product-row strong {
    color:var(--text-light);
    font-size:1rem;
}

.product-row small {
    color:var(--text-muted);
}

.product-prices {
    text-align:right;
    font-size:0.85rem;
    color:var(--text-light);
}

/* ----------------------------------------------
    ALERTAS IA
---------------------------------------------- */
.alert-row {
    padding:14px;
    border-radius:14px;
    background:var(--bg-soft);
    border:1px solid var(--border-soft);
    margin-top:12px;
}

.alert-row strong {
    color:var(--booh-blue);
}

.alert-row p {
    margin:6px 0;
    color:var(--text-light);
    font-size:0.9rem;
}

.alert-row small {
    color:var(--text-muted);
    font-size:0.78rem;
}

/* Importancia visual */
.importance-alta {
    border-color:#ff3b3b;
}
.importance-media {
    border-color:#ffbd2e;
}
.importance-baja {
    border-color:#28d07b;
}

/* ----------------------------------------------
    EVENTOS IA
---------------------------------------------- */
.event-row {
    padding:14px;
    border-radius:14px;
    background:var(--bg-soft);
    border:1px solid var(--border-soft);
    margin-top:12px;
}

.event-row strong {
    color:var(--booh-blue);
}

.event-row p {
    margin:6px 0;
    color:var(--text-light);
    font-size:0.9rem;
}

.event-row small {
    color:var(--text-muted);
    font-size:0.78rem;
}

/* ----------------------------------------------
    EMPTY BOX
---------------------------------------------- */
.empty-box {
    padding:18px;
    text-align:center;
    border:1px dashed rgba(255,255,255,0.15);
    border-radius:14px;
    background:rgba(255,255,255,0.03);
    color:var(--text-muted);
    font-size:0.9rem;
    margin-top:14px;
}

/* ----------------------------------------------
    CHARTS
---------------------------------------------- */
.chart-filter {
    display:flex;
    gap:10px;
    margin:12px 0 18px;
    flex-wrap:wrap;
}

.filter-btn {
    padding:8px 16px;
    background:rgba(255,255,255,0.06);
    border:1px solid var(--border-soft);
    color:var(--text-light);
    border-radius:16px;
    cursor:pointer;
    font-size:0.85rem;
    transition:.2s;
}

.filter-btn:hover {
    border-color:var(--booh-blue);
    color:var(--booh-blue);
}

.filter-btn.active {
    background:rgba(1,191,254,0.18);
    border-color:var(--booh-blue);
    color:var(--booh-blue);
}

.charts-wrap canvas {
    width:100% !important;
    max-height:320px;
}

  TP-LINE (filas, productos, alertas, eventos…)
----------------------------------------------------- */
.tp-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.tp-line:last-child {
    border-bottom: none;
}

.tp-line > div strong {
    color: #e7f7ff;
    font-size: 0.95rem;
    font-weight: 700;
}

.tp-line span {
    color: #01bffe;
    font-weight: 700;
    font-size: 0.9rem;
}

/* Detalles menores */
.mini-info {
    font-size: 0.78rem;
    color: #8da0b5;
    margin-top: 3px;
}

/* -----------------------------------------------------
   EMPTY STATES
----------------------------------------------------- */
.empty {
    color: #8da0b5;
    padding: 12px 0;
    text-align: center;
    font-size: 0.9rem;
}

/* -----------------------------------------------------
   TP-LIST (listas horizontales de pills)
----------------------------------------------------- */
.tp-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* -----------------------------------------------------
   TP-PILL (botones tipo filtro / navegación secundaria)
----------------------------------------------------- */
.tp-pill {
    padding: 8px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    color: #8da0b5;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: 0.2s;
}

.tp-pill:hover {
    color: #01bffe;
    border-color: #01bffe;
}

.tp-pill.active {
    background: rgba(1,191,254,0.18);
    border-color: #01bffe;
    color: #01bffe;
    font-weight: 800;
}

/* -----------------------------------------------------
   RESPONSIVE
----------------------------------------------------- */
@media (max-width: 600px) {
    .tp-pill {
        padding: 10px 18px;
        font-size: 1rem;
    }
}

/* =========================================================
   TP-LIST — CONTENEDOR HORIZONTAL DE PASTILLAS / PILLS
   Usado en Ventas, IA Pricing, Productos, etc.
========================================================= */
.tp-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 12px 0;
    padding: 0;
    list-style: none;
}
.tp-pill {
    padding: 8px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    color: #8da0b5;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: 0.2s;
}

.tp-pill:hover {
    border-color: #01bffe;
    color: #01bffe;
}

.tp-pill.active {
    background: rgba(1,191,254,0.20);
    border-color: #01bffe;
    color: #01bffe;
    font-weight: 800;
}

/* =========================================================
   BOOH BRAIN — BOTONES DE SUBMENÚ / PILLS (IA Pricing)
========================================================= */

.ia-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 25px 0;
}

.ia-tab {
    padding: 9px 20px;
    border-radius: 14px;
    border: 1px solid rgba(1,191,254,0.35); /* borde azul suave */
    background: rgba(13, 22, 35, 0.6);       /* gris oscuro semitransparente */
    color: #01bffe;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s ease;
}

.ia-tab:hover {
    border-color: #01bffe;
    box-shadow: 0 0 12px rgba(1,191,254,0.5);
}

.ia-tab.active {
    background: rgba(1,191,254,0.15);        /* más iluminado */
    border-color: #01bffe;
    color: #01bffe;
    font-weight: 700;
    box-shadow: 0 0 14px rgba(1,191,254,0.4);
}

/* =========================================================
   BOOH BRAIN — BTN OUTLINE (pills estilo IA Activa)
========================================================= */

.btn-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:10px 18px;
    border-radius:14px;

    background: rgba(13, 22, 35, 0.75);         /* gris oscuro */
    border: 1px solid rgba(1,191,254,0.35);     /* azul suave */
    color:#01bffe;

    font-size:0.95rem;
    font-weight:600;
    text-decoration:none;
    cursor:pointer;

    transition: all .2s ease;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.btn-outline:hover{
    border-color:#01bffe;
    box-shadow:
        0 0 10px rgba(1,191,254,0.45),
        inset 0 0 0 1px rgba(1,191,254,0.25);
    transform: translateY(-1px);
}

.btn-outline.active{
    background: rgba(1,191,254,0.12);           /* activo más iluminado */
    border-color:#01bffe;
    color:#01bffe;
    font-weight:700;
    box-shadow:
        0 0 12px rgba(1,191,254,0.50),
        inset 0 0 0 1px rgba(1,191,254,0.30);
}

/* opcional: si quieres versión “disabled” */
.btn-outline.disabled,
.btn-outline[disabled]{
    opacity:.45;
    pointer-events:none;
}

.btn-ia-toggle {
    text-decoration: none !important;
}

.btn-ia-toggle:hover {
    text-decoration: none !important;
}

.btn-ia-toggle.active {
    text-decoration: none !important;
}

/* =========================================================
   BOOH BRAIN — TP-PILL (selector de restaurantes)
========================================================= */

.tp-pill {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 18px;
    border-radius:14px;

    background: rgba(13, 22, 35, 0.75);
    border: 1px solid rgba(1,191,254,0.35);
    color:#01bffe;

    font-size:0.90rem;
    font-weight:600;
    text-decoration:none !important;
    cursor:pointer;

    transition: all .2s ease;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.tp-pill:hover {
    border-color:#01bffe;
    text-decoration:none !important;
    box-shadow:
        0 0 10px rgba(1,191,254,0.45),
        inset 0 0 0 1px rgba(1,191,254,0.25);
    transform: translateY(-1px);
}

.tp-pill.active {
    background: rgba(1,191,254,0.12);
    border-color:#01bffe;
    color:#01bffe;
    font-weight:700;
    text-decoration:none !important;

    box-shadow:
        0 0 12px rgba(1,191,254,0.50),
        inset 0 0 0 1px rgba(1,191,254,0.30);
}

/* ===============================================================
   IA PRICING V3 — UI Booh Brain x Booh Finance
================================================================ */

/* GENERAL WRAPPER */
.ia-wrapper {
    padding-bottom: 60px;
}

/* =========================
   HERO KPIs
========================= */
.ia-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    gap: 22px;
    margin-bottom: 32px;
}

.ia-kpi {
    background: #0d1623;
    padding: 24px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.06);
}

.ia-kpi .label {
    color: #8da0b5;
    font-size: .85rem;
    margin-bottom: 4px;
}

.ia-kpi h2 {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 800;
    color: #01bffe;
}

/* =========================
   ESTADO IA
========================= */
.ia-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-right {
    padding: 10px 18px;
    border-radius: 14px;
    font-weight: 700;
    display: inline-flex;
    gap: 8px;
}

.status-ok {
    border: 1px solid rgba(0,255,138,0.45);
    color: #00ff8a;
    box-shadow: 0 0 12px rgba(0,255,138,0.2);
}

/* =========================
   REGLAS IA
========================= */
.ia-rule {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ia-rule:last-child {
    border-bottom:none;
}

.ia-rule.activa {
    color: #01bffe;
}

.ia-rule.recomendada {
    color: #fe00fd;
}

/* =========================
   ALERTAS
========================= */
.alert {
    padding: 14px;
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: .9rem;
}

.alert.alta {
    background: rgba(255,0,0,0.12);
    border: 1px solid rgba(255,0,0,0.3);
}

.alert.media {
    background: rgba(255,200,0,0.1);
    border: 1px solid rgba(255,200,0,0.25);
}

/* =========================
   EVENTOS
========================= */
.evento-row {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.evento-row strong {
    color: #01bffe;
}

/* =========================
   PILLS (unificadas)
========================= */
.tp-pill {
    display:inline-flex;
    padding:10px 18px;
    border-radius:16px;
    background: rgba(13,22,35,0.7);
    border:1px solid rgba(1,191,254,0.35);
    color:#01bffe;
    text-decoration:none;
    font-weight:600;
    transition:.2s;
    margin-bottom: 8px;
}

.tp-pill:hover {
    border-color:#01bffe;
    box-shadow:0 0 10px rgba(1,191,254,0.4);
}

.tp-pill.active {
    background:rgba(1,191,254,0.15);
    border-color:#01bffe;
    box-shadow:0 0 12px rgba(1,191,254,0.45);
}

/* =========================
   GRID HELPERS
========================= */
.grid-2 {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:22px;
}

/* GRID 5 — usado en IA-Delivery KPIs */
.grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
}

/* Responsivo */
@media (max-width: 1200px) {
    .grid-5 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .grid-5 {
        grid-template-columns: 1fr;
    }
}

/* COLORES POR CANAL */

.glovo-color { color: #FFDA00 !important; }
.glovo-bg { background: rgba(255,218,0,0.15) !important; border-color: #FFDA00 !important; }

.uber-color { color: #06C167 !important; }
.uber-bg { background: rgba(6,193,103,0.15) !important; border-color: #06C167 !important; }

.justeat-color { color: #F36C21 !important; }
.justeat-bg { background: rgba(243,108,33,0.15) !important; border-color: #F36C21 !important; }

.wolt-color { color: #00AEEF !important; }
.wolt-bg { background: rgba(0,174,239,0.15) !important; border-color: #00AEEF !important; }

.booh-color { color: #01BFFE !important; }
.booh-bg { background: rgba(1,191,254,0.15) !important; border-color: #01BFFE !important; }