/* ============================================
   Bloom Grupos Redesign - v1.8.0
   ============================================ */

/* ── 1. Ocultar sidebar ── */
#sidebar, div#sidebar, .sidebar, aside#sidebar {
    display: none !important;
}

/* ── 2. Ancho completo ── */
#content, div#content, .postbody, div.postbody {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
}

#wrapper, div#wrapper {
    display: block !important;
}

/* ── 3. Quitar caja gris ── */
.msg-ikigai-groups {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 20px 0 !important;
}

.bixbox {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* ── 4. Contenedor con margen lateral en desktop ── */
.msg-ikigai-groups-wrapper,
.msg-ikigai-groups {
    padding-left: 60px !important;
    padding-right: 60px !important;
}

/* ── 5. Grid ── */
.msg-ikigai-groups-grid {
    display: grid !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 !important;
}

@media (min-width: 600px) {
    .msg-ikigai-groups-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }
    .msg-ikigai-groups-wrapper,
    .msg-ikigai-groups {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Desktop: 5 columnas cuadradas */
@media (min-width: 900px) {
    .msg-ikigai-groups-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 20px !important;
    }
    .msg-ikigai-groups-wrapper,
    .msg-ikigai-groups {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }
    /* Cards más cuadradas en desktop */
    .msg-ikigai-cover {
        height: 160px !important;
    }
    .msg-ikigai-avatar-wrapper {
        width: 90px !important;
        height: 90px !important;
        margin-top: -45px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ── 6. Cards ── */
.msg-ikigai-card {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Área de color en móvil/tablet */
.msg-ikigai-cover {
    height: 100px !important;
}

@media (min-width: 600px) {
    .msg-ikigai-cover {
        height: 130px !important;
    }
}

/* Avatar móvil */
.msg-ikigai-avatar-wrapper {
    width: 60px !important;
    height: 60px !important;
    margin-top: -30px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 600px) {
    .msg-ikigai-avatar-wrapper {
        width: 75px !important;
        height: 75px !important;
        margin-top: -38px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.msg-ikigai-avatar-wrapper img,
.msg-ikigai-avatar {
    width: 100% !important;
    height: 100% !important;
}

/* Texto nombre */
.msg-ikigai-info h3,
.msg-ikigai-info .msg-group-name {
    font-size: 13px !important;
    margin: 6px 0 4px !important;
    line-height: 1.3 !important;
}

.msg-ikigai-info {
    padding: 4px 10px 8px !important;
}

.msg-ikigai-footer,
.msg-ikigai-btn {
    padding: 8px !important;
    font-size: 13px !important;
}

.msg-ikigai-badge {
    font-size: 11px !important;
    padding: 3px 8px !important;
}

/* ── 7. Toolbar ── */
.bgr-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1a1d29;
    border: 1px solid #2a2d3e;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    gap: 10px;
    flex-wrap: wrap;
}

.bgr-count {
    font-size: 0.85rem;
    color: #a0a3b1;
    font-weight: 500;
    white-space: nowrap;
}

.bgr-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
}

.bgr-search {
    display: flex;
    align-items: center;
    background: #0f1117;
    border: 1px solid #2a2d3e;
    border-radius: 8px;
    padding: 6px 10px;
    gap: 7px;
    flex: 1;
    max-width: 220px;
}

.bgr-search svg { color: #666; flex-shrink: 0; }

.bgr-search input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #fff !important;
    font-size: 0.82rem !important;
    width: 100% !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.bgr-search input::placeholder { color: #555; }

.bgr-sort {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #0f1117;
    border: 1px solid #2a2d3e;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    color: #ccc;
    font-size: 0.82rem;
    transition: border-color 0.2s;
    user-select: none;
    white-space: nowrap;
}

.bgr-sort:hover { border-color: #6c63ff; color: #fff; }

@media (max-width: 480px) {
    .bgr-toolbar { flex-direction: row; flex-wrap: wrap; }
    .bgr-count { width: 100%; }
    .bgr-controls { width: 100%; }
    .bgr-search { max-width: none; }
}

/* ── 8. Paginación ── */
.bgr-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.bgr-page-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1d29;
    border: 1px solid #2a2d3e;
    border-radius: 8px;
    color: #b4b8c9;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.bgr-page-btn:hover {
    border-color: #00d4aa;
    color: #00d4aa;
}

.bgr-page-btn.active {
    background: #00d4aa;
    border-color: #00d4aa;
    color: #0f111a;
}

.bgr-page-btn:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.bgr-page-btn.arrow {
    width: auto;
    padding: 0 12px;
    font-size: 1.1rem;
}

.bgr-page-dots {
    color: #555;
    padding: 0 4px;
}