/* WSS Socios — estilos mínimos de los formularios y widgets de socio.
   Sin decoración fuerte para no pelearse con Elementor / el tema.
   Sirven solo para que sin ningún estilo aplicado los forms se vean
   estructurados, no rotos. */

:root {
    --wss-soc-brand: #AB192D;
    --wss-soc-brand-hover: #8a1424;
}

.wss-soc-form {
    display: block;
    max-width: 480px;
}

.wss-soc-form__field {
    margin-bottom: 14px;
}

.wss-soc-form__label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

.wss-soc-form__input {
    width: 100%;
    box-sizing: border-box;
}

.wss-soc-form__row {
    margin: 14px 0;
}

.wss-soc-form__row a {
    color: var(--wss-soc-brand);
    text-decoration: underline;
}

.wss-soc-form__row a:hover,
.wss-soc-form__row a:focus {
    color: var(--wss-soc-brand-hover);
}

.wss-soc-form__submit {
    cursor: pointer;
    background: var(--wss-soc-brand);
    color: #fff;
    border: 1px solid var(--wss-soc-brand);
    padding: 10px 22px;
    font-weight: 600;
    border-radius: 4px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.wss-soc-form__submit:hover,
.wss-soc-form__submit:focus {
    background: var(--wss-soc-brand-hover);
    border-color: var(--wss-soc-brand-hover);
}

.wss-soc-message {
    padding: 10px 14px;
    margin: 0 0 14px;
    border-left: 4px solid var(--wss-soc-brand);
    background: #fbeef0;
}

.wss-soc-message--error {
    border-left-color: #d63638;
    background: #fcf0f1;
}

.wss-soc-message--success {
    border-left-color: #00a32a;
    background: #f0f9f3;
}

.wss-soc-carnet {
    display: block;
}

.wss-soc-carnet__preview {
    max-width: 100%;
    height: auto;
    margin-bottom: 14px;
}

.wss-soc-carnet__downloads .wss-soc-carnet__download {
    display: inline-block;
    margin-right: 8px;
    padding: 8px 16px;
    background: var(--wss-soc-brand);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background 0.15s ease;
}

.wss-soc-carnet__downloads .wss-soc-carnet__download:hover,
.wss-soc-carnet__downloads .wss-soc-carnet__download:focus {
    background: var(--wss-soc-brand-hover);
    color: #fff;
}

.wss-soc-account__meta {
    margin: 0 0 14px;
    color: #555;
}

.wss-soc-account__meta strong {
    color: var(--wss-soc-brand);
}

.wss-soc-register-link,
.wss-soc-logout-link {
    display: inline-block;
    color: var(--wss-soc-brand);
    font-weight: 600;
    text-decoration: underline;
}

.wss-soc-register-link:hover,
.wss-soc-register-link:focus,
.wss-soc-logout-link:hover,
.wss-soc-logout-link:focus {
    color: var(--wss-soc-brand-hover);
}

/* ------------------------------------------------------------------ */
/* [wss_socios_account_info] — datos del socio en read-only           */
/* ------------------------------------------------------------------ */

.wss-soc-account-info {
    display: flex;
    flex-direction: column;
    margin: 16px 0;
    border-top: 1px solid #e2e2e2;
}

.wss-soc-account-info__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid #e2e2e2;
}

.wss-soc-account-info__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--wss-soc-brand);
    flex: 0 0 auto;
}

.wss-soc-account-info__value {
    color: #222;
    word-break: break-word;
    text-align: right;
}

@media (max-width: 480px) {
    .wss-soc-account-info__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .wss-soc-account-info__value { text-align: left; }
}

/* ------------------------------------------------------------------ */
/* [wss_socios_documents] — extensiones para mostrar título + meta    */
/* ------------------------------------------------------------------ */

.wss-soc-document__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.wss-soc-document__meta {
    font-size: 12px;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.wss-soc-account-card--list.wss-soc-document:hover .wss-soc-document__meta,
.wss-soc-account-card--list.wss-soc-document:focus .wss-soc-document__meta {
    color: var(--wss-soc-brand);
}

/* ------------------------------------------------------------------ */
/* [wss_socios_account_links] — base + variantes                       */
/* ------------------------------------------------------------------ */

/* Reset común para todas las variantes (anchor + reset de margin). */
.wss-soc-account-card {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, transform 0.15s ease,
                border-color 0.15s ease, color 0.15s ease;
}

.wss-soc-account-card__title {
    font-weight: 600;
    word-break: break-word;
    color: inherit;
}

.wss-soc-account-card__arrow {
    /* La flecha solo se usa en variantes "tiles", "list" y "minimal". */
    display: none;
    flex: 0 0 auto;
    font-size: 1.4em;
    line-height: 1;
    margin-left: 12px;
}

/* --- Variantes que usan grid (cards / tiles / outlined). ----------- */
.wss-soc-account-links--cards,
.wss-soc-account-links--tiles,
.wss-soc-account-links--outlined {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(var(--wss-cols, 3), 1fr);
    margin: 16px 0;
}

@media (max-width: 640px) {
    .wss-soc-account-links--cards,
    .wss-soc-account-links--tiles,
    .wss-soc-account-links--outlined {
        grid-template-columns: 1fr;
    }
}

/* --- Variante 1: "cards" (default, layout original). --------------- */
.wss-soc-account-card--cards {
    justify-content: center;
    text-align: center;
    aspect-ratio: 1 / 1;
    padding: 16px;
    background: var(--wss-soc-brand);
    border: 1px solid var(--wss-soc-brand);
    border-radius: 8px;
    color: #fff;
}

.wss-soc-account-card--cards:hover,
.wss-soc-account-card--cards:focus {
    background: var(--wss-soc-brand-hover);
    border-color: var(--wss-soc-brand-hover);
    color: #fff;
    transform: translateY(-1px);
}

/* --- Variante 2: "tiles" (rectángulo brand con flecha derecha). ---- */
.wss-soc-account-card--tiles {
    justify-content: space-between;
    text-align: left;
    padding: 18px 20px;
    background: var(--wss-soc-brand);
    border: 1px solid var(--wss-soc-brand);
    border-radius: 8px;
    color: #fff;
    min-height: 72px;
}

.wss-soc-account-card--tiles .wss-soc-account-card__arrow {
    display: inline-block;
}

.wss-soc-account-card--tiles:hover,
.wss-soc-account-card--tiles:focus {
    background: var(--wss-soc-brand-hover);
    border-color: var(--wss-soc-brand-hover);
    color: #fff;
    transform: translateX(2px);
}

/* --- Variante 3: "outlined" (blanca, borde brand, título brand). --- */
.wss-soc-account-card--outlined {
    justify-content: center;
    text-align: center;
    aspect-ratio: 1 / 1;
    padding: 16px;
    background: #fff;
    border: 2px solid var(--wss-soc-brand);
    border-radius: 8px;
    color: var(--wss-soc-brand);
}

.wss-soc-account-card--outlined:hover,
.wss-soc-account-card--outlined:focus {
    background: var(--wss-soc-brand);
    color: #fff;
    transform: translateY(-1px);
}

/* --- Variante 4: "list" (vertical full-width con separadores). ----- */
.wss-soc-account-links--list {
    display: flex;
    flex-direction: column;
    margin: 16px 0;
    border-top: 1px solid #e2e2e2;
}

.wss-soc-account-card--list {
    justify-content: space-between;
    padding: 16px 4px;
    border-bottom: 1px solid #e2e2e2;
    color: #222;
}

.wss-soc-account-card--list .wss-soc-account-card__title {
    color: inherit;
}

.wss-soc-account-card--list .wss-soc-account-card__arrow {
    display: inline-block;
    color: var(--wss-soc-brand);
}

.wss-soc-account-card--list:hover,
.wss-soc-account-card--list:focus {
    color: var(--wss-soc-brand);
    background: #fbeef0;
    padding-left: 12px;
    padding-right: 12px;
}

/* --- Variante 5: "minimal" (texto plano, sin fondo, con flecha). --- */
.wss-soc-account-links--minimal {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
}

.wss-soc-account-card--minimal {
    justify-content: flex-start;
    padding: 4px 0;
    color: var(--wss-soc-brand);
}

.wss-soc-account-card--minimal .wss-soc-account-card__title {
    text-decoration: underline;
}

.wss-soc-account-card--minimal .wss-soc-account-card__arrow {
    display: inline-block;
    margin-left: 8px;
}

.wss-soc-account-card--minimal:hover,
.wss-soc-account-card--minimal:focus {
    color: var(--wss-soc-brand-hover);
}