/**
 * Ultimate Member — Identidad visual configurable REANL
 * Versión 1.2.1
 */

:root {
    --reanl-naranja: #ff8400;
    --reanl-naranja-hover: #e67600;
    --reanl-verde: #00ce7c;
    --reanl-verde-hover: #00b86f;
    --reanl-gris: #eeeeee;
    --reanl-gris-medio: #d8d8d8;
    --reanl-blanco: #ffffff;
    --reanl-texto: #333333;
    --reanl-texto-suave: #666666;
    --reanl-error-fondo: #fff4e8;
    --reanl-datepicker-fondo: #eeeeee;
    --reanl-naranja-rgb: 255, 132, 0;
    --reanl-verde-rgb: 0, 206, 124;
}

/* Hereda la tipografía general del tema. */
.um,
.um input,
.um textarea,
.um select,
.um button,
.um-modal,
.um-directory,
.picker {
    font-family: inherit;
}

.um {
    color: var(--reanl-texto);
}

/* Enlaces e indicadores activos. */
.um a.um-link,
.um .um-tip:hover,
.um .um-member-name a,
.um .um-member-more a,
.um .um-member-less a,
.um .um-item-meta a,
.um-account-name a,
.um-account-nav a.current,
.um-account-side li a.current span.um-account-icon,
i.um-active-color,
span.um-active-color {
    color: var(--reanl-naranja) !important;
}

.um a.um-link:hover,
.um a.um-link-hvr:hover,
.um .um-member-name a:hover,
.um .um-item-meta a:hover {
    color: var(--reanl-verde) !important;
}

/* Botones principales. */
.um .um-button,
.um a.um-button,
.um input[type="submit"].um-button,
.um input[type="button"].um-button,
.um button.um-button,
.um-modal-btn {
    background: var(--reanl-naranja) !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: var(--reanl-blanco) !important;
    text-shadow: none !important;
    transition: background-color .2s ease, transform .2s ease;
}

.um .um-button:hover,
.um a.um-button:hover,
.um input[type="submit"].um-button:hover,
.um input[type="button"].um-button:hover,
.um button.um-button:hover,
.um-modal-btn:hover {
    background: var(--reanl-verde) !important;
    color: var(--reanl-blanco) !important;
    transform: translateY(-1px);
}

.um .um-button:focus,
.um a.um-button:focus,
.um input[type="submit"].um-button:focus,
.um button.um-button:focus {
    outline: 2px solid var(--reanl-verde) !important;
    outline-offset: 2px;
}

/* Botones secundarios. */
.um .um-button.um-alt,
.um a.um-button.um-alt,
.um input[type="submit"].um-button.um-alt {
    background: var(--reanl-gris) !important;
    color: var(--reanl-texto) !important;
}

.um .um-button.um-alt:hover,
.um a.um-button.um-alt:hover,
.um input[type="submit"].um-button.um-alt:hover {
    background: var(--reanl-gris-medio) !important;
    color: var(--reanl-texto) !important;
}

/* Campos de formulario. */
.um .um-form input[type="text"],
.um .um-form input[type="search"],
.um .um-form input[type="tel"],
.um .um-form input[type="number"],
.um .um-form input[type="password"],
.um .um-form input[type="email"],
.um .um-form input[type="url"],
.um .um-form input[type="date"],
.um .um-form textarea,
.um .um-form select {
    background: var(--reanl-blanco) !important;
    border: 1px solid var(--reanl-gris-medio) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: var(--reanl-texto) !important;
}

.um .um-form input[type="text"]:focus,
.um .um-form input[type="search"]:focus,
.um .um-form input[type="tel"]:focus,
.um .um-form input[type="number"]:focus,
.um .um-form input[type="password"]:focus,
.um .um-form input[type="email"]:focus,
.um .um-form input[type="url"]:focus,
.um .um-form input[type="date"]:focus,
.um .um-form textarea:focus,
.um .um-form select:focus {
    border-color: var(--reanl-verde) !important;
    box-shadow: 0 0 0 2px rgba(var(--reanl-verde-rgb), .18) !important;
    outline: none !important;
}

.um .um-field-label label {
    color: var(--reanl-texto) !important;
    font-weight: 600;
}

.um .um-field-icon {
    color: var(--reanl-texto-suave) !important;
}

.um .um-field-icon.active,
.um .um-field-date .um-field-icon:hover {
    color: var(--reanl-verde) !important;
}

/* Checkbox y radio. */
.um .um-field-checkbox.active:not(.um-field-radio-state-disabled) i,
.um .um-field-radio.active:not(.um-field-radio-state-disabled) i {
    color: var(--reanl-naranja) !important;
}

.um .um-field-checkbox:hover:not(.um-field-radio-state-disabled) i,
.um .um-field-radio:hover:not(.um-field-radio-state-disabled) i {
    color: var(--reanl-verde) !important;
}

/* Navegación del perfil. */
.um .um-profile-nav {
    background: var(--reanl-gris) !important;
}

.um .um-profile-nav-item a {
    color: var(--reanl-texto) !important;
}

.um .um-profile-nav-item.active a,
.um .um-profile-nav-item.active a:hover {
    background: var(--reanl-naranja) !important;
    color: var(--reanl-blanco) !important;
}

.um .um-profile-nav-item a:hover {
    background: var(--reanl-verde) !important;
    color: var(--reanl-blanco) !important;
}

/*
 * Controles superiores de edición del perfil.
 * Se usan únicamente selectores nativos de Ultimate Member para evitar
 * observadores JavaScript que puedan interferir con la carga del perfil.
 * El menú desplegable conserva su comportamiento y sus estilos originales.
 */
.um .um-profile-edit {
    height: auto !important;
    width: auto !important;
}

.um .um-profile-edit > .um-profile-edit-a:not(.um-profile-save),
.um .um-profile-edit > .um-profile-edit-a.um-profile-save {
    align-items: center !important;
    background: var(--reanl-naranja) !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: var(--reanl-blanco) !important;
    display: inline-flex !important;
    font-size: 0 !important;
    font-weight: 600 !important;
    height: auto !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    min-height: 38px !important;
    min-width: 76px !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    text-shadow: none !important;
    width: auto !important;
}

.um .um-profile-edit > .um-profile-edit-a:not(.um-profile-save):hover,
.um .um-profile-edit > .um-profile-edit-a:not(.um-profile-save):focus,
.um .um-profile-edit > .um-profile-edit-a.um-profile-save:hover,
.um .um-profile-edit > .um-profile-edit-a.um-profile-save:focus {
    background: var(--reanl-naranja-hover) !important;
    color: var(--reanl-blanco) !important;
}

.um .um-profile-edit > .um-profile-edit-a:not(.um-profile-save):focus-visible,
.um .um-profile-edit > .um-profile-edit-a.um-profile-save:focus-visible {
    outline: 2px solid var(--reanl-verde) !important;
    outline-offset: 2px;
}

.um .um-profile-edit > .um-profile-edit-a:not(.um-profile-save) > i,
.um .um-profile-edit > .um-profile-edit-a.um-profile-save > i {
    display: none !important;
}

.um .um-profile-edit > .um-profile-edit-a:not(.um-profile-save)::after {
    content: "Editar";
    display: inline-block;
    font-size: 14px !important;
}

.um .um-profile-edit > .um-profile-edit-a.um-profile-save::after {
    content: "Guardar";
    display: inline-block;
    font-size: 14px !important;
}

/* Cuenta del usuario. */
.um-account-side li a {
    color: var(--reanl-texto) !important;
}

.um-account-side li a.current,
.um-account-side li a.current:hover,
div.uimob800 .um-account-side li a.current,
div.uimob800 .um-account-side li a.current:hover {
    background: var(--reanl-naranja) !important;
    color: var(--reanl-blanco) !important;
}

.um-account-side li a:hover {
    background: var(--reanl-gris) !important;
    color: var(--reanl-naranja) !important;
}

.um-account-side li a.current span.um-account-icon {
    color: var(--reanl-blanco) !important;
}

/* Directorio de miembros. */
.um-directory .um-member {
    background: var(--reanl-blanco) !important;
    border: 1px solid var(--reanl-gris) !important;
    box-shadow: none !important;
}

.um-directory .um-member:hover {
    border-color: var(--reanl-verde) !important;
}

.um-directory .um-member-name a {
    color: var(--reanl-texto) !important;
}

.um-directory .um-member-name a:hover {
    color: var(--reanl-naranja) !important;
}

/* Paginación. */
.um .um-members-pagi a {
    color: var(--reanl-texto) !important;
}

.um .um-members-pagi a:hover {
    color: var(--reanl-naranja) !important;
}

.um .um-members-pagi span.current,
.um .um-members-pagi span.current:hover {
    background: var(--reanl-naranja) !important;
    color: var(--reanl-blanco) !important;
}

/* Encabezados, modales y carga de archivos. */
.um .um-field-group-head,
.um-modal-header,
.um .upload {
    background: var(--reanl-naranja) !important;
    color: var(--reanl-blanco) !important;
}

.um .um-field-group-head:hover {
    background: var(--reanl-verde) !important;
}

/* Mensajes y avisos. */
.um .um-notice {
    background: var(--reanl-gris) !important;
    border-left: 4px solid var(--reanl-naranja) !important;
    color: var(--reanl-texto) !important;
}

.um .um-error-block {
    background: var(--reanl-error-fondo) !important;
    border-color: var(--reanl-naranja) !important;
    color: var(--reanl-texto) !important;
}

/* Select2. */
.um .select2-container .select2-choice,
.um .select2-container--default .select2-selection--single,
.um .select2-container--default .select2-selection--multiple {
    background: var(--reanl-blanco) !important;
    border-color: var(--reanl-gris-medio) !important;
}

.um .select2-container--default.select2-container--focus .select2-selection--multiple,
.um .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--reanl-verde) !important;
}

/* ==========================================================
   DATE PICKER DE ULTIMATE MEMBER (PICKADATE)
   El calendario se inserta fuera de .um, por eso requiere
   selectores independientes de los estilos principales.
   ========================================================== */

body .picker__holder {
    color: var(--reanl-texto) !important;
}

body .picker__frame,
body .picker__box,
body .picker__table,
body .picker__table tbody,
body .picker__table tr,
body .picker__table td {
    background-color: var(--reanl-datepicker-fondo) !important;
}

body .picker__box {
    background: var(--reanl-datepicker-fondo) !important;
    border-color: var(--reanl-gris-medio) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14) !important;
}

body .picker__header,
body .picker__month,
body .picker__year,
body .picker__table thead,
body .picker__footer {
    background: var(--reanl-datepicker-fondo) !important;
    color: var(--reanl-texto) !important;
}

body .picker__select--month,
body .picker__select--year {
    background: var(--reanl-datepicker-fondo) !important;
    border: 1px solid var(--reanl-gris-medio) !important;
    border-radius: 4px !important;
    color: var(--reanl-texto) !important;
}

body .picker__select--month:focus,
body .picker__select--year:focus {
    border-color: var(--reanl-verde) !important;
    box-shadow: 0 0 0 2px rgba(var(--reanl-verde-rgb), .18) !important;
    outline: none !important;
}

body .picker__weekday {
    color: var(--reanl-texto-suave) !important;
    font-weight: 600 !important;
}

body .picker__day {
    border-radius: 5px !important;
    color: var(--reanl-texto) !important;
}

body .picker__day--outfocus,
body .picker__day--disabled,
body .picker__day--disabled:hover {
    color: var(--reanl-texto-suave) !important;
    opacity: .45;
}

body .picker__day--today {
    color: var(--reanl-naranja) !important;
    font-weight: 700 !important;
}

body .picker__day--today::before {
    border-top-color: var(--reanl-naranja) !important;
}

body .picker__day--infocus:hover,
body .picker__day--outfocus:hover,
body .picker__day--highlighted:hover,
body .picker--focused .picker__day--highlighted {
    background: var(--reanl-datepicker-fondo) !important;
    color: var(--reanl-naranja) !important;
}

body .picker__day--highlighted {
    border-color: var(--reanl-verde) !important;
}

body .picker__day--selected,
body .picker__day--selected:hover,
body .picker--focused .picker__day--selected {
    background: var(--reanl-naranja) !important;
    border-color: var(--reanl-naranja) !important;
    color: var(--reanl-blanco) !important;
}

body .picker__nav--prev:hover,
body .picker__nav--next:hover {
    background: var(--reanl-gris) !important;
}

body .picker__nav--prev::before {
    border-right-color: var(--reanl-texto) !important;
}

body .picker__nav--next::before {
    border-left-color: var(--reanl-texto) !important;
}

body .picker__button--today,
body .picker__button--clear,
body .picker__button--close {
    background: var(--reanl-blanco) !important;
    border-color: var(--reanl-gris-medio) !important;
    color: var(--reanl-naranja) !important;
}

body .picker__button--today:hover,
body .picker__button--clear:hover,
body .picker__button--close:hover,
body .picker__button--today:focus,
body .picker__button--clear:focus,
body .picker__button--close:focus {
    background: var(--reanl-gris) !important;
    border-color: var(--reanl-verde) !important;
    color: var(--reanl-verde-hover) !important;
}

body .picker__button--today::before {
    border-top-color: var(--reanl-naranja) !important;
}

body .picker__button--clear::before {
    border-top-color: var(--reanl-verde) !important;
}

body .picker__button--close::before {
    color: var(--reanl-texto) !important;
}

body .picker__nav--disabled::before {
    border-left-color: var(--reanl-gris-medio) !important;
    border-right-color: var(--reanl-gris-medio) !important;
}

/* Time Picker incluido por compatibilidad con campos de hora de UM. */
body .picker__list {
    background: var(--reanl-datepicker-fondo) !important;
}

body .picker__list-item {
    border-color: var(--reanl-gris) !important;
    color: var(--reanl-texto) !important;
}

body .picker__list-item:hover,
body .picker__list-item--highlighted,
body .picker__list-item--highlighted:hover,
body .picker--focused .picker__list-item--highlighted {
    background: var(--reanl-gris) !important;
    border-color: var(--reanl-verde) !important;
    color: var(--reanl-naranja) !important;
}

body .picker__list-item--selected,
body .picker__list-item--selected:hover,
body .picker--focused .picker__list-item--selected {
    background: var(--reanl-naranja) !important;
    border-color: var(--reanl-naranja) !important;
    color: var(--reanl-blanco) !important;
}

/* Compatibilidad preventiva si una integración usa jQuery UI Datepicker. */
#ui-datepicker-div.ui-datepicker,
.ui-datepicker {
    background: var(--reanl-datepicker-fondo) !important;
    border: 1px solid var(--reanl-gris-medio) !important;
    border-radius: 8px !important;
    color: var(--reanl-texto) !important;
}

.ui-datepicker .ui-datepicker-header {
    background: var(--reanl-naranja) !important;
    border: 0 !important;
    color: var(--reanl-blanco) !important;
}

.ui-datepicker .ui-datepicker-title,
.ui-datepicker .ui-datepicker-title select {
    color: var(--reanl-texto) !important;
}

.ui-datepicker .ui-state-default {
    background: var(--reanl-gris) !important;
    border-color: var(--reanl-gris-medio) !important;
    color: var(--reanl-texto) !important;
}

.ui-datepicker .ui-state-hover {
    background: var(--reanl-verde) !important;
    border-color: var(--reanl-verde) !important;
    color: var(--reanl-blanco) !important;
}

.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-highlight.ui-state-active {
    background: var(--reanl-naranja) !important;
    border-color: var(--reanl-naranja) !important;
    color: var(--reanl-blanco) !important;
}

.ui-datepicker .ui-state-highlight {
    border-color: var(--reanl-verde) !important;
    color: var(--reanl-naranja) !important;
}


/* Compatibilidad con versiones o extensiones de UM que utilicen Flatpickr. */
body .flatpickr-calendar,
body .flatpickr-months,
body .flatpickr-month,
body .flatpickr-weekdays,
body .flatpickr-weekdaycontainer,
body .flatpickr-days,
body .dayContainer,
body .flatpickr-innerContainer,
body .flatpickr-rContainer {
    background: var(--reanl-datepicker-fondo) !important;
    color: var(--reanl-texto) !important;
}

body .flatpickr-calendar {
    border-color: var(--reanl-gris-medio) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14) !important;
}

body .flatpickr-day:hover,
body .flatpickr-day:focus,
body .flatpickr-day.inRange,
body .flatpickr-day.prevMonthDay:hover,
body .flatpickr-day.nextMonthDay:hover {
    background: var(--reanl-datepicker-fondo) !important;
    border-color: var(--reanl-verde) !important;
    color: var(--reanl-naranja) !important;
}

body .flatpickr-day.selected,
body .flatpickr-day.startRange,
body .flatpickr-day.endRange,
body .flatpickr-day.selected:hover,
body .flatpickr-day.startRange:hover,
body .flatpickr-day.endRange:hover {
    background: var(--reanl-naranja) !important;
    border-color: var(--reanl-naranja) !important;
    color: var(--reanl-blanco) !important;
}

body .flatpickr-current-month input.cur-year,
body .flatpickr-current-month .flatpickr-monthDropdown-months,
body .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background: var(--reanl-datepicker-fondo) !important;
    color: var(--reanl-texto) !important;
}

/* Accesibilidad de selección de texto dentro de controles. */
.um ::selection {
    background: rgba(var(--reanl-naranja-rgb), .22);
}

@media screen and (max-width: 800px) {
    .um .um-button,
    .um a.um-button,
    .um input[type="submit"].um-button {
        width: 100%;
    }

    .um .um-profile-edit > .um-profile-edit-a:not(.um-profile-save),
    .um .um-profile-edit > .um-profile-edit-a.um-profile-save {
        min-height: 36px !important;
        min-width: 72px !important;
        padding: 9px 14px !important;
    }
}