/* ====== Dashboard Stats ====== */
.stats-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border-radius: 12px;
    color: white;
    flex: 1;
    min-width: 250px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

    .stat-card .icon {
        font-size: 2rem;
    }

.stat-info h2 {
    margin: 0;
    font-size: 1.8rem;
}

.stat-info p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

.conversations {
    background: linear-gradient(135deg, #2196f3, #00bcd4);
}

.messages {
    background: linear-gradient(135deg, #4caf50, #8bc34a);
}

.options {
    background: linear-gradient(135deg, #ff9800, #ffc107);
}

/* ====== Colores personalizados WaRBot ====== */
:root {
    --warbot-blue: #00AEEF;
    --warbot-green: #58C472;
    --warbot-orange: #FFB400;
    --warbot-sidebar: #004B4B;
}

/* ====== Botones con colores personalizados (extiende Bootstrap) ====== */
.btn-primary {
    background-color: var(--warbot-blue);
    border-color: var(--warbot-blue);
}

    .btn-primary:hover {
        background-color: #008EC1;
        border-color: #008EC1;
    }

.btn-success {
    background-color: var(--warbot-green);
    border-color: var(--warbot-green);
}

    .btn-success:hover {
        background-color: #46A55F;
        border-color: #46A55F;
    }

.btn-outline-primary {
    color: var(--warbot-blue);
    border-color: var(--warbot-blue);
}

    .btn-outline-primary:hover {
        background-color: var(--warbot-blue);
        color: white;
    }

.btn-outline-danger {
    color: #d9534f;
    border-color: #d9534f;
}

    .btn-outline-danger:hover {
        background-color: #d9534f;
        color: white;
    }

/* ====== Sidebar (usando Bootstrap como base, solo color personalizado) ====== */
.sidebar {
    background-color: var(--warbot-sidebar);
}

    .sidebar a {
        color: white;
        text-decoration: none;
        display: block;
        padding: 0.5rem 1rem;
        border-radius: 0.4rem;
        transition: background 0.3s;
    }

        .sidebar a:hover {
            background-color: rgba(255,255,255,0.1);
        }

/* ====== Tablas ====== */
.table thead th {
    background-color: #f8f9fa;
    font-weight: 600;
}



/* ===== Sidebar fijo y estilizado ===== */
.sidebar {
    background-color: var(--warbot-sidebar, #004B4B);
    width: 220px;
    min-height: 100vh;
    padding-top: 1rem;
    position: fixed; /* Sidebar fijo */
    left: 0;
    top: 0;
}

    .sidebar .nav {
        flex-direction: column;
    }

    .sidebar .nav-link {
        color: white !important;
        padding: 0.6rem 1rem;
        border-radius: 0.4rem;
        margin: 0.2rem 0;
        font-weight: 500;
    }

        .sidebar .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

/* ===== Ajuste del contenido para no quedar debajo ===== */
main {
    margin-left: 220px; /* Igual al ancho del sidebar */
    background-color: #f8f9fa;
    min-height: 100vh;
}