:root {
    --oga-dark: #2C2C2C;
    --oga-orange: #E67E22;
    --oga-white: #ffffff;
    --oga-gray: #f4f4f4;
}

.oga-dashboard-container {
    background: var(--oga-white);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    max-width: 900px;
    margin: 20px auto;
}

.oga-dashboard-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--oga-gray);
    padding-bottom: 20px;
}

.oga-business-logo {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid var(--oga-gray);
}

.oga-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.oga-card {
    background: var(--oga-gray);
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.3s ease;
}

.oga-card:hover {
    transform: translateY(-5px);
}

.oga-card h4 {
    margin: 0 0 10px 0;
    color: var(--oga-dark);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.oga-card .stat-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--oga-orange);
}

.oga-logout-btn {
    display: inline-block;
    margin-top: 30px;
    background: var(--oga-dark);
    color: var(--oga-white) !important;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}


/* Obligar al submenú de Solace a quedarse en pantalla en celulares */
@media (max-width: 767px) {
    /* 1. Controlar la caja del submenú */
    .oga-menu-lateral .elementor-nav-menu--main .sub-menu {
        right: auto !important; /* Anula el escape hacia la izquierda */
        left: 50% !important; /* Lo mueve al centro del botón Servicios */
        transform: translateX(-25%) !important; /* Lo alinea perfectamente a la mitad */
        width: max-content !important; /* Que crezca lo necesario... */
        max-width: 85vw !important; /* ...pero que nunca rebase el ancho del celular */
    }
    
    /* 2. Controlar el texto para que baje de renglón */
    .oga-menu-lateral .elementor-nav-menu--main .sub-menu a {
        white-space: normal !important; /* Permite saltos de línea */
        line-height: 1.4 !important; /* Separación cómoda para leer */
        text-align: center !important; /* Se ve más elegante en celular */
        padding: 10px 15px !important; /* Un poco de aire para que no se vea apretado */
    }
}