/* =============================================================
   Wollo Comunidades — Estilos del panel
   Namespace: .wc-*
   Construido sobre los tokens compartidos --wollo-* de panel-koia
   (wollo-design-system.css), incluyendo el override de color por
   vertical (body.pkoi-sitio-comunidades), mismo patrón que
   wollo-tienda/recursos/css/tienda.css.
   ============================================================= */

.pkoi-pagina-contenido {
    font-family: var(--wollo-font);
}

body.pkoi-sitio-comunidades .content-wrapper {
    padding: 32px 24px 100px 24px;
}
body.pkoi-sitio-comunidades .content-wrapper > .pkoi-pagina-contenido {
    margin: -32px -24px -100px -24px;
}
@media (max-width: 768px) {
    body.pkoi-sitio-comunidades .content-wrapper {
        padding: 20px 16px 100px 16px;
    }
    body.pkoi-sitio-comunidades .content-wrapper > .pkoi-pagina-contenido {
        margin: -20px -16px -100px -16px;
    }
}

/* =============================================================
   UTILIDADES
   ============================================================= */

.wc-error { color: var(--wollo-error-dark); font-weight: 600; padding: 16px; }

.wc-estado-bloqueo {
    max-width: 600px;
    margin: 60px auto;
    text-align: center;
    background: var(--wollo-bg-white);
    border: 1px solid var(--wollo-border);
    border-radius: var(--wollo-radius-xl);
    padding: 40px;
}
.wc-estado-bloqueo h2 { margin: 0 0 12px; font-weight: 900; color: var(--wollo-text-darkest); }
.wc-estado-bloqueo p { color: var(--wollo-text-muted); margin: 0; }
.wc-estado-bloqueo--error h2 { color: var(--wollo-error-dark); }

.wc-container { max-width: 900px; margin: 0 auto; padding: 24px; }

.wc-midis-saludo h1 { font-size: var(--wollo-font-size-2xl); font-weight: 800; color: var(--wollo-text-darkest); margin: 0 0 4px; }
.wc-midis-saludo p  { color: var(--wollo-text-muted); margin: 0 0 24px; }

/* =============================================================
   BOTONES
   ============================================================= */

.wc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--wollo-radius-md);
    font-family: var(--wollo-font);
    font-weight: 700;
    font-size: var(--wollo-font-size-base);
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: var(--wollo-transition);
    white-space: nowrap;
}
.wc-btn--primario { background: var(--wollo-primary); color: #fff; }
.wc-btn--primario:hover { background: var(--wollo-primary-hover); transform: translateY(-2px); }

/* =============================================================
   FEEDBACK / ALERTAS
   ============================================================= */

.wc-feedback {
    padding: 14px;
    border-radius: var(--wollo-radius-md);
    margin-top: 15px;
    display: none;
    text-align: center;
    font-weight: 700;
}
.wc-feedback.success { background: var(--wollo-success-light); color: var(--wollo-success-dark); display: block; }
.wc-feedback.error   { background: var(--wollo-error-light);   color: var(--wollo-error-dark);   display: block; }