/* ==========================================================================
   Level Premios — Perfil de usuario (Ultimate Member)
   Mismo lenguaje visual que el circuito de votación: navy + lima.
   ========================================================================== */

.um-form[data-mode="profile"] form {
    background: linear-gradient(160deg, #0d1b3e 0%, #172f5e 100%);
    border: 1px solid rgba(225,255,1,.15);
    border-radius: 18px;
    padding: 36px 32px 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    color: #fff;
}

/* ── Cabecera ──────────────────────────────────────────────────────────── */

.um-form[data-mode="profile"] .um-header {
    border-bottom: 1px solid rgba(255,255,255,.10);
    padding-bottom: 24px;
    margin-bottom: 24px;
}

/* Icono de guardado rápido (lápiz/check): no aporta nada aquí, ya está
   el botón "Actualizar el perfil" — lo ocultamos en vez de estilizarlo. */
.um-form[data-mode="profile"] .um-profile-edit.um-profile-headericon {
    display: none !important;
}

/* ── Foto de perfil ────────────────────────────────────────────────────── */

.um-form[data-mode="profile"] a.um-profile-photo-img {
    border: 3px solid #e1ff01;
    box-shadow: 0 0 20px rgba(225,255,1,.25);
    border-radius: 50%;
    overflow: hidden;
    display: block;
    transition: box-shadow .25s ease, transform .25s ease;
}
.um-form[data-mode="profile"] a.um-profile-photo-img:hover {
    box-shadow: 0 0 30px rgba(225,255,1,.45);
    transform: scale(1.03);
}
.um-form[data-mode="profile"] a.um-profile-photo-img img {
    border-radius: 50%;
}

.um-form[data-mode="profile"] .um-profile-photo-overlay {
    background: rgba(13,27,62,.55) !important;
    border-radius: 50%;
}
.um-form[data-mode="profile"] .um-profile-photo-overlay-s i {
    color: #e1ff01;
}

/* ── Estado de la cuenta ───────────────────────────────────────────────── */

.um-form[data-mode="profile"] .um-profile-status {
    font-size: 12px;
    color: rgba(255,255,255,.55);
    margin-top: 10px;
    text-align: center;
}
.um-form[data-mode="profile"] .um-profile-status.approved span::before {
    content: '●';
    color: #22c55e;
    margin-right: 6px;
}

/* ── Botones ───────────────────────────────────────────────────────────── */

.um-form[data-mode="profile"] .um-button,
.um-form[data-mode="profile"] input[type="submit"].um-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e1ff01;
    color: #0d1b3e !important;
    font-weight: 800;
    font-size: 13px;
    border: none;
    border-radius: 10px;
    padding: 11px 24px;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.um-form[data-mode="profile"] .um-button:hover,
.um-form[data-mode="profile"] input[type="submit"].um-button:hover {
    background: #d9ff26;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(225,255,1,.25);
}

/* Cerrar sesión: estilo secundario (contorno), no el lima de acción principal.
   Usamos las dos clases juntas (.um-button.mi-boton-logout) para que esta
   regla pese más que la genérica de arriba y no se mezclen los estilos. */
.um-form[data-mode="profile"] .um-button.mi-boton-logout {
    background: transparent !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255,255,255,.30) !important;
    box-shadow: none !important;
}
.um-form[data-mode="profile"] .um-button.mi-boton-logout:hover {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.50) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Ir a votaciones: vive fuera del formulario de Ultimate Member (es un
   bloque HTML aparte en la página), así que esta regla va sin el prefijo
   .um-form y necesita el estilo completo, no solo los colores. */
.um-button.mi-boton-votaciones {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #e1ff01 !important;
    color: #0d1b3e !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 11px 24px !important;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.um-button.mi-boton-votaciones:hover {
    background: #d9ff26 !important;
    transform: translateY(-1px);
}

/* ── Cuerpo del formulario / campos ────────────────────────────────────── */

.um-form[data-mode="profile"] .um-profile-body {
    padding-top: 28px;
}

.um-form[data-mode="profile"] .um-field-label label {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}
.um-form[data-mode="profile"] .um-field-label-icon i {
    color: #e1ff01;
}

.um-form[data-mode="profile"] select.um-form-field,
.um-form[data-mode="profile"] input.um-form-field,
.um-form[data-mode="profile"] textarea.um-form-field {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 10px !important;
    color: #fff !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    box-shadow: none !important;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.um-form[data-mode="profile"] select.um-form-field:focus,
.um-form[data-mode="profile"] input.um-form-field:focus {
    border-color: rgba(225,255,1,.5) !important;
    background: rgba(255,255,255,.10) !important;
    box-shadow: 0 0 0 3px rgba(225,255,1,.10) !important;
    outline: none;
}
.um-form[data-mode="profile"] select.um-form-field option {
    color: #0d1b3e;
}

.um-form[data-mode="profile"] .um-col-alt {
    margin-top: 14px;
    text-align: center;
}

/* ── Desplegable "Equipo favorito" (Select2) ─────────────────────────────
   Select2 sustituye visualmente al <select> original. La caja cerrada
   queda dentro del formulario, pero el menú abierto se inyecta en <body>,
   fuera de .um-form — por eso esta segunda parte no va con ese prefijo. */

.um-form[data-mode="profile"] .select2-container--default .select2-selection--single {
    background: #fff !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 10px !important;
    height: 46px !important;
    padding: 0 14px !important;
    position: relative !important;
    display: block !important;
}
.um-form[data-mode="profile"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #111 !important;
    line-height: 46px !important;
    padding: 0 64px 0 0 !important;
    position: static !important;
}
.um-form[data-mode="profile"] .select2-container--default .select2-selection--single .select2-selection__arrow,
.um-form[data-mode="profile"] .select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: auto !important;
    line-height: normal !important;
    margin: 0 !important;
}
.um-form[data-mode="profile"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 14px !important;
}
.um-form[data-mode="profile"] .select2-container--default .select2-selection--single .select2-selection__clear {
    right: 48px !important;
    font-size: 18px !important;
    color: #888 !important;
}

/* Menú desplegable abierto (vive en <body>, sin el prefijo .um-form) */
.select2-dropdown {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.select2-search--dropdown {
    padding: 8px;
    background: #fff;
}
.select2-search__field {
    background: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    color: #111 !important;
    padding: 8px 10px !important;
}
.select2-results__options {
    max-height: 280px;
}
.select2-results__option {
    color: #111 !important;
    background: #fff !important;
    padding: 4px 8px;
    font-size: 13px;
}
.select2-results__option--highlighted {
    background: #e1ff01 !important;
    color: #111 !important;
}
.select2-results__option[aria-selected="true"] {
    font-weight: 700;
}