/* =========================================================================
 * Socios AJE — estilos del shortcode [mi_perfil_socio]
 * ====================================================================== */

/* Tipografía del plugin: Helvetica en todo el contenido (hereda a hijos). */
.mi-perfil-socio,
.socios-perfil-imagenes,
.socios-edit-form-container,
.socios-login-container,
.socios-aviso {
    font-family: "Helvetica", sans-serif;
}

/* ---------- Vista del perfil ---------- */

/* Contenedor horizontal en grilla: las dos tarjetas blancas (perfil + edición)
   comparten la fila 1, así quedan EXACTAMENTE a la misma altura entre sí. Los
   botones de acción caen en la fila 2 (debajo de la tarjeta de perfil) sin
   contar para la altura de las tarjetas. La card va en la 3ra columna. */
.socios-perfil-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: stretch;
    column-gap: 24px;
    row-gap: 16px;
    margin: 0 0 24px;
    max-width: 1180px;
}

/* El wrapper de la columna izquierda no genera caja propia: sus hijos
   (tarjeta de info + botones) se vuelven items directos de la grilla. */
.socios-col-perfil {
    display: contents;
}

/* Tarjeta de info: columna 1, fila 1. Se estira a la altura de la fila, que
   queda definida por la tarjeta más alta de las dos (perfil o formulario). */
.socios-perfil-layout > .socios-col-perfil > .mi-perfil-socio {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    margin: 0;
}

/* Formulario de edición: columna 2, fila 1. Misma altura que la tarjeta de info. */
.socios-perfil-layout > .socios-edit-form-container {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    margin: 0;
}

/* Fila de botones de acción (Guardar cambios + Cerrar sesión): columna 1,
   fila 2 de la grilla, justo debajo de la tarjeta de info. align-self:start
   evita que los botones se estiren a lo alto cuando el aviso de éxito aparece
   en la misma fila (si no, "engordarían"). */
.socios-perfil-layout > .socios-col-perfil > .socios-acciones {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
}

/* El aviso AJAX del formulario va en su propia fila, debajo de los botones,
   para no compartir altura con ellos. */
.socios-perfil-layout > .socios-col-perfil > .socios-aviso-ajax {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
}

.socios-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
}

/* Botones del mismo tamaño: se reparten el ancho en partes iguales y comparten
   altura, padding y tipografía. */
.socios-acciones .socios-btn-guardar,
.socios-acciones .socios-btn-salir {
    flex: 1 1 0;
    align-self: stretch;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
}

/* Dentro de la grilla la separación botones↔aviso la da row-gap (16px). Este
   margin-top solo actúa como respaldo cuando el aviso no es item de grilla
   (p. ej. el fallback del JS que lo inserta fuera del layout). */
.socios-acciones + .socios-aviso-ajax {
    margin-top: 16px;
}
.socios-perfil-layout > .socios-col-perfil > .socios-acciones + .socios-aviso-ajax {
    margin-top: 0;
}

/* Columna de la card: se ajusta al ancho de la tarjeta del buscador (265px).
   padding-top iguala el padding superior de los recuadros blancos (24px) para
   que el título "Card de socio" quede alineado con los otros dos. */
.socios-perfil-layout > .socios-card-col {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    padding-top: 24px;
}

/* Título de la columna de la card (mismo estilo que las otras columnas). */
.socios-card-col > h3 {
    margin: 0 0 20px;
    font-size: 20px;
    color: #1a4f5c;
    border-bottom: 2px solid #eef0f2;
    padding-bottom: 12px;
}

/* Sacamos el "panel" gris que el buscador le pone a su contenedor: queremos
   que la card flote sola sobre el fondo. (id + clase para ganarle al #id.) */
#buscador-socios-pg.socios-card-preview {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

/* El grid del buscador, dentro del preview, no necesita centrarse ni
   estirarse: lo dejamos a la izquierda y al ancho natural de una card. */
.socios-card-preview #resultados-socios {
    justify-content: flex-start;
    max-width: none;
    margin: 0;
}

/* Más sombra a la tarjeta (le gana a la --bs-shadow del buscador).
   height:auto !important: en el directorio la card tiene altura fija (438px)
   para alinear todas las cards entre sí. Esa regla del Buscador
   (#buscador-socios-pg.bs-con-contacto .socio-card) tiene la MISMA
   especificidad que esta y carga después, así que sin !important le ganaba y
   recortaba el contenido (el teléfono). Con !important la card crece para
   mostrar todo (empresa + nombre + email + teléfono) sin recortes. */
#buscador-socios-pg.socios-card-preview .socio-card {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    height: auto !important;
}

/* El nombre del socio (.empresa-info) en el CSS del Buscador tiene color sin
   !important (el tema lo pisa) y un recorte a 1 línea (white-space:nowrap +
   overflow:hidden) pensado para el ancho de la card del directorio. En la
   columna del perfil ese recorte oculta el nombre, así que forzamos color
   visible y dejamos que el texto se muestre entero (puede ir a 2 líneas). */
.socios-card-preview .empresa-info {
    color: var(--bs-muted, #6d7c7a) !important;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.mi-perfil-socio {
    background: #ffffff;
    color: #2c2f33;
    padding: 24px 28px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    margin: 0 0 24px;
    max-width: 720px;
    font-size: 15px;
    line-height: 1.6;
}

/* Título de la columna izquierda (mismo estilo que el del form de edición). */
.mi-perfil-socio > h3 {
    margin: 0 0 20px;
    font-size: 20px;
    color: #1a4f5c;
    border-bottom: 2px solid #eef0f2;
    padding-bottom: 12px;
}

/* Contenedor del par avatar + logo de empresa, arriba del perfil. */
.socios-perfil-imagenes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 0 0 24px;
    flex-wrap: wrap;
}

/* Avatar circular: <label> que abre el file picker asociado a #sae_foto_personal. */
.socios-avatar {
    display: block;
    cursor: pointer;
    margin: 0;
}

.socios-avatar-circle {
    position: relative;
    display: block;
    width: 160px;
    height: 160px;
}

.socios-avatar img,
.socios-avatar-iniciales {
    box-sizing: border-box;
    width: 160px;
    height: 160px;
    border-radius: 16px;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: block;
}

.socios-avatar img {
    object-fit: cover;
    background: #f3f4f6;
}

.socios-avatar-iniciales {
    background: #1a4f5c;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    font-weight: 600;
    line-height: 1;
    user-select: none;
}

/* Overlay con ícono de cámara que aparece en hover/focus. */
.socios-avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    height: 160px;
    border-radius: 16px;
    background: rgba(26, 79, 92, 0.78);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-sizing: border-box;
    border: 3px solid transparent;
    pointer-events: none;
}

.socios-avatar-icon {
    width: 40px;
    height: 40px;
    display: block;
}

.socios-avatar:hover .socios-avatar-overlay,
.socios-avatar:focus-within .socios-avatar-overlay {
    opacity: 1;
}

/* Estado durante la subida AJAX: backdrop oscuro + spinner blanco. */
.socios-avatar.socios-avatar-uploading {
    cursor: progress;
    pointer-events: none;
}

.socios-avatar.socios-avatar-uploading .socios-avatar-overlay {
    display: none;
}

.socios-avatar.socios-avatar-uploading .socios-avatar-circle::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
    border: 3px solid transparent;
    z-index: 2;
}

.socios-avatar.socios-avatar-uploading .socios-avatar-circle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: socios-spin 0.7s linear infinite;
    z-index: 3;
}

/* ---------- Logo de empresa (al lado del avatar) ---------- */

.socios-logo {
    display: block;
    cursor: pointer;
    margin: 0;
}

.socios-logo-frame {
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
}

.socios-logo img,
.socios-logo-placeholder {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    border-radius: 16px;
    border: 2px solid #ffffff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    display: block;
}

.socios-logo img {
    object-fit: contain;
    background: #ffffff;
    padding: 6px;
}

.socios-logo-placeholder {
    background: #f3f4f6;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
}

.socios-logo-placeholder svg {
    width: 36px;
    height: 36px;
}

.socios-logo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border-radius: 16px;
    background: rgba(26, 79, 92, 0.78);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-sizing: border-box;
    border: 2px solid transparent;
    pointer-events: none;
}

.socios-logo-icon {
    width: 28px;
    height: 28px;
    display: block;
}

.socios-logo:hover .socios-logo-overlay,
.socios-logo:focus-within .socios-logo-overlay {
    opacity: 1;
}

/* Estado durante la subida AJAX del logo. */
.socios-logo.socios-logo-uploading {
    cursor: progress;
    pointer-events: none;
}

.socios-logo.socios-logo-uploading .socios-logo-overlay {
    display: none;
}

.socios-logo.socios-logo-uploading .socios-logo-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
    border: 2px solid transparent;
    z-index: 2;
}

.socios-logo.socios-logo-uploading .socios-logo-frame::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: socios-spin 0.7s linear infinite;
    z-index: 3;
}

/* Input file totalmente fuera de layout para que al asociarlo con el label
   el navegador no haga scroll al ponerle foco. El click via <label for=""> sigue
   funcionando con display:none en todos los browsers modernos, y el archivo
   se incluye normalmente en el FormData del submit. */
.socios-avatar-input {
    display: none;
}

.mi-perfil-socio > div {
    padding: 10px 0;
    border-bottom: 1px solid #eef0f2;
}

.mi-perfil-socio > div:last-child {
    border-bottom: none;
}

/* Título y valor de cada campo, todos al mismo tamaño. Se fija explícito y con
   especificidad alta (+ !important) porque algunos temas agrandan el primer
   bloque (ej. "Nombre Completo") al heredar de un estilo de encabezado. */
.socios-perfil-layout .mi-perfil-socio strong {
    display: block;
    min-width: 0;
    margin-bottom: 2px;
    color: #1a4f5c;
    font-weight: 600;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

.socios-perfil-layout .mi-perfil-socio .socios-valor {
    color: #2c2f33;
    font-weight: 500;
    font-size: 15px !important;
    line-height: 1.4 !important;
}

/* Red de seguridad: forzar color legible aunque el tema lo pise. */
.mi-perfil-socio,
.mi-perfil-socio > div {
    color: #2c2f33;
}

.mi-perfil-socio .foto_personal,
.mi-perfil-socio .logo_empresa {
    padding: 12px 0;
}

.mi-perfil-socio .foto_personal img,
.mi-perfil-socio .logo_empresa img {
    max-width: 180px;
    height: auto;
    border-radius: 6px;
    display: block;
    border: 1px solid #e5e7eb;
    padding: 4px;
    background: #f9fafb;
}

.mi-perfil-socio a.empresa-link {
    color: #1a73e8;
    text-decoration: none;
}

.mi-perfil-socio a.empresa-link:hover {
    text-decoration: underline;
}

/* ---------- Formulario de edición ---------- */

.socios-edit-form-container,
.socios-login-container {
    background: #ffffff;
    color: #2c2f33;
    padding: 24px 28px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    max-width: 720px;
    font-size: 15px;
}

/* La tarjeta de login es más angosta y centrada. */
.socios-login-container {
    max-width: 420px;
    margin: 0 auto;
}

.socios-edit-form-container h3,
.socios-login-container h3 {
    margin: 0 0 20px;
    font-size: 20px;
    color: #1a4f5c;
    border-bottom: 2px solid #eef0f2;
    padding-bottom: 12px;
}

.socios-edit-form,
.socios-login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* "Recordarme": checkbox en línea, label normal (no bold como los demás). */
.socios-login-remember label {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    color: #2c2f33;
    cursor: pointer;
    display: flex;
}

.socios-login-remember input[type="checkbox"] {
    margin: 0;
}

/* Campo de contraseña con botón "mostrar/ocultar" (ojito). */
.socios-password-wrap {
    position: relative;
    display: block;
}

.socios-field-group .socios-password-wrap input[type="password"],
.socios-field-group .socios-password-wrap input[type="text"] {
    padding-right: 44px;
}

.socios-password-wrap .socios-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px;
    margin: 0;
    cursor: pointer;
    color: #6b7280 !important;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover y estado ACTIVO (contraseña visible, aria-pressed="true"): pintado
   oscuro. !important para ganarle a button:hover del tema/Elementor.
   El :focus solo saca el outline — sin fijar color — así al desactivar el
   toggle vuelve al gris normal en vez de quedar pegado oscuro. */
.socios-password-wrap .socios-password-toggle:hover,
.socios-password-wrap .socios-password-toggle[aria-pressed="true"] {
    color: #1f2937 !important;
    background: none !important;
    box-shadow: none;
}

.socios-password-wrap .socios-password-toggle:focus {
    outline: none;
}

/* El ícono hereda el color del botón; forzamos currentColor por si el
   tema le aplica un stroke propio en hover. */
.socios-password-wrap .socios-password-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
    stroke: currentColor !important;
}

.socios-login-lost {
    margin: 4px 0 0;
    font-size: 13px;
    text-align: center;
}

.socios-login-lost a {
    color: #1a73e8;
    text-decoration: none;
}

.socios-login-lost a:hover {
    text-decoration: underline;
}

.socios-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Todas las etiquetas del formulario, exactamente al mismo tamaño.
   Se sube la especificidad (contenedor + grupo) para que el tema no
   agrande algunas según el tipo de campo. */
.socios-edit-form-container .socios-field-group > label,
.socios-field-group label {
    display: block;
    font-weight: 600;
    color: #1a4f5c;
    font-size: 14px;
    line-height: 1.3;
    margin: 0;
}

/* Cualquier aclaración dentro de una etiqueta no debe pesar como el título. */
.socios-field-group label small {
    font-weight: 500;
    font-size: 12px;
    color: #6b7280;
}

.socios-field-group input[type="text"],
.socios-field-group input[type="email"],
.socios-field-group input[type="url"],
.socios-field-group input[type="tel"],
.socios-field-group input[type="password"],
.socios-field-group select {
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: #2c2f33;
    box-sizing: border-box;
    line-height: 1.4;
}

/* El desplegable usa la flecha nativa del navegador pero igualamos altura y padding. */
.socios-field-group select {
    height: 42px;
    cursor: pointer;
    appearance: auto;
}

.socios-field-group input[type="text"]:focus,
.socios-field-group input[type="email"]:focus,
.socios-field-group input[type="url"]:focus,
.socios-field-group input[type="tel"]:focus,
.socios-field-group input[type="password"]:focus,
.socios-field-group select:focus {
    outline: none;
    border-color: #1a4f5c;
    box-shadow: 0 0 0 3px rgba(26, 79, 92, 0.15);
}

.socios-field-group input[type="file"] {
    padding: 6px 0;
    font-size: 14px;
    color: #2c2f33;
}

/* ---- Selector de rubros (chips, hasta 3) ---- */
.socios-rubros {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.socios-rubros-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Sin chips todavía: no dejar un hueco vacío arriba del select. */
.socios-rubros-chips:empty {
    display: none;
}

.socios-rubro-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 12px;
    background: #e8f0f2;
    color: #1a4f5c;
    border: 1px solid #cfe0e4;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.socios-rubro-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(26, 79, 92, 0.12);
    color: #1a4f5c;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.socios-rubro-remove:hover,
.socios-rubro-remove:focus {
    background: #1a4f5c;
    color: #ffffff;
    outline: none;
}

/* Al completar el máximo de rubros, el selector desaparece; reaparece al quitar uno. */
.socios-rubros-lleno .socios-rubro-add {
    display: none;
}

/* Cápsulas de rubro de solo lectura (tarjeta de info): mismo look que las del
   formulario, pero sin botón para quitar. */
.socios-rubros-view {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.socios-rubro-chip--static {
    padding: 5px 12px;
}

/* Campos no editables (ej. email): oscurecido, no clickleable. */
.socios-field-group input[disabled],
.socios-field-group input[readonly] {
    background: #eef0f2;
    color: #6b7280;
    border-color: #d1d5db;
    cursor: not-allowed;
}

.socios-field-group input[disabled]:focus,
.socios-field-group input[readonly]:focus {
    outline: none;
    border-color: #d1d5db;
    box-shadow: none;
}

.socios-field-group img {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 4px;
    background: #f9fafb;
}

.socios-field-group small {
    color: #6b7280;
    font-size: 12px;
}

.socios-btn-guardar {
    background: #1a4f5c;
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
    align-self: flex-start;
    margin-top: 8px;
}

.socios-btn-guardar:hover,
.socios-btn-guardar:focus {
    background: #134048;
    outline: none;
}

.socios-btn-guardar:disabled {
    opacity: 0.85;
    cursor: progress;
}

/* Botón de cerrar sesión (secundario, estilo outline). */
.socios-logout {
    max-width: 1180px;
    margin: 16px 0 0;
    display: flex;
    justify-content: flex-end;
}

.socios-btn-salir {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #b91c1c;
    background: #ffffff;
    border: 1px solid #e5c2c2;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.socios-btn-salir:hover,
.socios-btn-salir:focus {
    background: #fdecec;
    border-color: #d99a9a;
    color: #991b1b;
    outline: none;
}

.socios-btn-salir svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Spinner minimalista para el botón en estado "Guardando…". */
.socios-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    vertical-align: -2px;
    margin-right: 8px;
    animation: socios-spin 0.7s linear infinite;
}

@keyframes socios-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Avisos ---------- */

.socios-aviso {
    padding: 12px 16px;
    border-radius: 6px;
    margin: 0 0 16px;
    font-size: 14px;
    background: #fff3cd;
    color: #664d03;
    border: 1px solid #ffe69c;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.socios-aviso.socios-aviso-fade {
    opacity: 0;
}

.socios-exito {
    background: #d1fae5;
    color: #065f46;
    border-color: #6ee7b7;
}

.socios-error {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}

/* Aviso específico que sale debajo del avatar (centrado, más compacto). */
.socios-aviso-avatar {
    margin: -8px auto 20px;
    max-width: 320px;
    text-align: center;
    font-size: 14px;
}

/* ---------- Responsive ---------- */

/* Por debajo del ancho donde entran las tres columnas, la grilla se apila en
   una sola columna y los items vuelven al flujo natural del DOM:
   info → botones → formulario → card. */
@media (max-width: 1023px) {
    .socios-perfil-layout {
        grid-template-columns: 1fr;
    }

    .socios-perfil-layout > .socios-col-perfil > .mi-perfil-socio,
    .socios-perfil-layout > .socios-col-perfil > .socios-acciones,
    .socios-perfil-layout > .socios-col-perfil > .socios-aviso-ajax,
    .socios-perfil-layout > .socios-edit-form-container,
    .socios-perfil-layout > .socios-card-col {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 600px) {
    .mi-perfil-socio,
    .socios-edit-form-container,
    .socios-login-container {
        padding: 18px 16px;
    }

    .mi-perfil-socio strong {
        display: block;
        min-width: 0;
        margin-bottom: 2px;
    }

    .socios-avatar-circle,
    .socios-avatar img,
    .socios-avatar-iniciales,
    .socios-avatar-overlay {
        width: 130px;
        height: 130px;
    }

    .socios-avatar-iniciales {
        font-size: 52px;
    }

    .socios-avatar-icon {
        width: 32px;
        height: 32px;
    }

    .socios-logo,
    .socios-logo-frame,
    .socios-logo img,
    .socios-logo-placeholder,
    .socios-logo-overlay {
        width: 80px;
        height: 80px;
    }

    .socios-logo-icon,
    .socios-logo-placeholder svg {
        width: 24px;
        height: 24px;
    }
}