/* =========================================================
   UM – Directorio (Header: buscador + filtros)
   Autor: Mauro López Rodríguez
   Paleta: --lte-blue #0A1828, --lte-green #178582
   ========================================================= */
:root{
  --lte-blue:  #0A1828;
  --lte-green: #178582;
  --lte-border: #0A1828;
  --lte-radius: 28px;
  --lte-height: 50px;
  --lte-pad-x: 18px;
  --lte-bw: 2px;          /* grosor del borde */
  --lte-wrap: 950px;      /* ancho de trabajo centrado */
}

/* ===== Contenedor general del header (centra todo y da aire abajo) ===== */
.um-member-directory-header.um-form{
  max-width: 1240px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 48px;           
}

/* ===== Fila 1: buscador + botón (centrada) ===== */
.um-member-directory-search-line{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 14px;
  row-gap: 12px;
  width: 100%;
  max-width: var(--lte-wrap);
  margin-inline: auto;
  margin-bottom: 18px;
}

/* ===== Fila(s) de filtros (centradas) ===== */
.um-directory .um-search-filter{
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: var(--lte-wrap);
  margin-inline: auto;
  margin-bottom: 22px;
}

/* Centrado específico de la fila de fechas (la marcada en rojo) */
.um-directory .um-search-filter.um-datepicker-filter-type{
  justify-content: center !important;
  width: 100%;
  max-width: var(--lte-wrap);
  margin-inline: auto;
}

.um-directory .um-search-filter .select2.select2-container .select2-selection, 
.um-directory .um-search-filter .select2-container .select2-selection {
	height: var(--lte-height) !important; 
	border: var(--lte-border-width) solid var(--lte-border) !important; 
	border-radius: var(--lte-radius) !important; 
	background: #fff !important; 
	box-shadow: none !important; 
	overflow: hidden !important; 
} 

.um-directory .um-search-filter .select2-selection__rendered { 
	line-height: var(--lte-height) !important; 
	padding: 0 40px 0 var(--lte-pad-x) !important; 
	color: #666 !important; 
} 

.um-directory .um-search-filter .select2-selection__arrow { 
	height: var(--lte-height) !important; 
	right: 12px !important; 
}

/* ===== Campos: texto / búsqueda / datepicker / Select2 – mismo estilo ===== */
.um-directory :is(
  .um-search-filter input[type="text"],
  .um-search-filter input[type="search"],
  .um-search-filter .picker__input,
  .um-member-directory-search-line .um-search-line
){
  height: var(--lte-height) !important;
  padding: 0 var(--lte-pad-x) !important;
  border: var(--lte-bw) solid var(--lte-blue) !important;   
  border-radius: var(--lte-radius) !important;              
  background: #fff !important;
  color: #333 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Select2: caja */
.um-directory :is(.select2.select2-container .select2-selection, .select2-container .select2-selection){
  height: var(--lte-height) !important;
  border: var(--lte-bw) solid var(--lte-blue) !important;   
  border-radius: var(--lte-radius) !important;              
  background: #fff !important;
  overflow: hidden !important;
}

/* Select2: texto + flecha centrados verticalmente */
.um-directory .select2-selection__rendered{
  line-height: var(--lte-height) !important;
  padding: 0 40px 0 var(--lte-pad-x) !important;
  color: #666 !important;
}
.um-directory .select2-selection__arrow{ height: var(--lte-height) !important; right: 12px !important; }

/* Placeholder */
.um-directory :is(.um-search-filter input::placeholder, .um-member-directory-search-line .um-search-line::placeholder){
  color: #999 !important;
}

/* Focus/Hover – verde corporativo */
.um-directory :is(
  .um-search-filter input:hover,
  .um-search-filter input:focus,
  .um-member-directory-search-line .um-search-line:focus,
  .select2.select2-container .select2-selection:focus
){
  border-color: var(--lte-green) !important;
  box-shadow: 0 0 0 3px rgba(23,133,130,.18) !important;
}

/* ===== Botón Buscar ===== */
.um-directory .um-member-directory-search-line .um-do-search,
.um-directory .um-member-directory-search-line .um-do-search.um-button{
  height: var(--lte-height) !important;
  padding: 0 28px !important;
  border-radius: var(--lte-radius) !important;              /* redondeado */
  border: var(--lte-bw) solid var(--lte-blue) !important;   /* borde azul */
  background: var(--lte-blue) !important;                   /* relleno azul */
  color: #fff !important;
}
.um-directory .um-member-directory-search-line .um-do-search:hover{
  background: var(--lte-green) !important;
  transform: translateY(-1px);
}

/* ===== Chips de filtros activos ===== */
.um-directory .um-filtered-line{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 36px;    /* aire antes de las tarjetas */
}
.um-directory .um-members-filter-tag{
  background: var(--lte-blue) !important;
  color: #fff !important;
  border-radius: 30px !important;
  padding: 6px 14px !important;
  font-size: 14px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.um-directory .um-members-filter-remove{
  color: #fff !important;
  font-weight: 700;
  margin-left: 4px;
  cursor: pointer;
  transition: color .2s ease;
}
.um-directory .um-members-filter-remove:hover{ color: var(--lte-green) !important; }

/* ===== Enlace “Vaciar todo” (verde corporativo) ===== */
.um-directory .um-clear-filters-a{
  color: var(--lte-green) !important;
  font-weight: 600;
  text-decoration: none;
}
.um-directory .um-clear-filters-a:hover{
  color: #0fb3a7 !important;           /* un tono más claro al hover */
  text-decoration: underline;
}

/* ===== Responsive ===== */
@media (max-width: 768px){
  .um-member-directory-search-line,
  .um-directory .um-search-filter{
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
  }
  .um-directory .um-member-directory-search-line .um-do-search{ width: 100%; }
}
/* ================================
   UM – Datepicker (Pickadate) skin
   Paleta: --lte-blue #0A1828 / --lte-green #178582
   Scope: solo dentro del directorio de miembros
   ================================ */
:root{
  --lte-blue:  #0A1828;
  --lte-green: #178582;
  --lte-bg:    #0A1828;   /* cabecera / botones principales */
  --lte-chip:  #e9f5f4;   /* resaltados suaves */
  --lte-border:#dfe7f2;   /* bordes suaves */
}

.um-directory .picker{ z-index: 9999; } /* por si queda tapado */

/* Contenedor oscurecido */
.um-directory .picker__holder{
  background: rgba(10,24,40,.35) !important;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

/* Caja principal */
.um-directory .picker__box{
  border-radius: 16px !important;
  border: 1px solid var(--lte-border) !important;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(10,24,40,.25) !important;
  font-family: inherit;
}

/* ===== Header ===== */
.um-directory .picker__header{
  background: var(--lte-bg) !important;
  color: #fff !important;
  padding: 18px 16px !important;
  position: relative;
}
.um-directory .picker__month,
.um-directory .picker__year{
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: .2px;
}
.um-directory .picker__select--month,
.um-directory .picker__select--year{
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
}

/* Flechas navegación */
.um-directory .picker__nav--prev,
.um-directory .picker__nav--next{
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  top: 50%; transform: translateY(-50%);
}
.um-directory .picker__nav--prev:hover,
.um-directory .picker__nav--next:hover{
  background: var(--lte-green) !important;
}

/* ===== Tabla de días ===== */
.um-directory .picker__table{
  border-collapse: separate !important;
  border-spacing: 6px !important;
  padding: 12px 14px !important;
  background: #fff;
}
.um-directory .picker__weekday{
  color: var(--lte-blue) !important;
  font-weight: 700;
  text-transform: lowercase;
  opacity: .85;
}

/* Día base */
.um-directory .picker__day{
  width: 44px; height: 44px;
  border-radius: 12px !important;
  line-height: 44px !important;
  color: #334155 !important;
  border: 1px solid var(--lte-border) !important;
  background: #fff !important;
  transition: all .15s ease;
}
.um-directory .picker__day:hover{
  border-color: var(--lte-green) !important;
  box-shadow: 0 0 0 3px rgba(23,133,130,.18);
}

/* Hoy */
.um-directory .picker__day--today{
  position: relative;
  border-color: var(--lte-green) !important;
}
.um-directory .picker__day--today:before{
  content:'';
  position:absolute; bottom:6px; left:50%;
  width:6px; height:6px; border-radius:999px;
  background: var(--lte-green);
  transform: translateX(-50%);
}

/* Seleccionado / activo */
.um-directory .picker__day--selected,
.um-directory .picker__day--highlighted{
  background: var(--lte-green) !important;
  border-color: var(--lte-green) !important;
  color: #fff !important;
  box-shadow: 0 8px 16px rgba(23,133,130,.28);
}

/* Inactivo / fuera de mes / deshabilitado */
.um-directory .picker__day--outfocus,
.um-directory .picker__day--disabled{
  color: #9aa6b2 !important;
  background: #f7f9fc !important;
  border-color: #eef2f7 !important;
  cursor: not-allowed !important;
  opacity: .65;
}

/* Rango (si se usa) */
.um-directory .picker__day--infocus.picker__day--highlighted,
.um-directory .picker__day--inrange{
  background: var(--lte-chip) !important;
  border-color: var(--lte-green) !important;
  color: var(--lte-blue) !important;
}

/* ===== Footer (Hoy / Borrar / Cerrar) ===== */
.um-directory .picker__footer{
  display:flex; gap:10px; justify-content:space-between;
  padding: 14px 16px;
  background: #fff;
  border-top: 1px solid var(--lte-border);
}
.um-directory .picker__button--today,
.um-directory .picker__button--clear,
.um-directory .picker__button--close{
  border: 1px solid var(--lte-border) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-weight: 600;
  background: #fff !important;
  color: var(--lte-blue) !important;
  transition: all .15s ease;
}
.um-directory .picker__button--today:hover,
.um-directory .picker__button--clear:hover,
.um-directory .picker__button--close:hover{
  border-color: var(--lte-green) !important;
  color: #fff !important;
  background: var(--lte-green) !important;
}

/* Accesibilidad: anillo de foco */
.um-directory .picker__day:focus,
.um-directory .picker__button--today:focus,
.um-directory .picker__button--clear:focus,
.um-directory .picker__button--close:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(23,133,130,.25) !important;
}
/* 1) Centrar el modal en el viewport */
.um-directory .picker__holder{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px;                     /* aire en bordes en pantallas pequeñas */
}

/* anulamos posiciones absolutas del frame para que el flex centre */
.um-directory .picker__frame{
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
}

/* 2) Caja principal: ancho/alto coherentes y responsivos */
.um-directory .picker__box{
  width: clamp(320px, 92vw, 560px) !important;  /* ancho máx 560 */
  max-height: 86vh !important;                  /* por si hay meses largos */
  overflow: hidden !important;
  display: grid;                                /* repartimos zonas */
  grid-template-rows: auto 1fr auto;            /* header | tabla | footer */
}

/* 3) Cabecera: altura y espaciado uniforme */
.um-directory .picker__header{
  padding: 14px 16px !important;
  min-height: 56px;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
}
.um-directory .picker__month,
.um-directory .picker__year{
  justify-self: center;
  font-size: 16px !important;
}

/* Botones de navegación con tamaño fijo */
.um-directory .picker__nav--prev,
.um-directory .picker__nav--next{
  width: 40px; height: 40px;
}

/* 4) Tabla de días: celdas cuadradas y separaciones consistentes */
.um-directory .picker__table{
  border-spacing: 8px !important;     /* separación entre celdas */
  padding: 12px 14px !important;
}

/* cabeceras de días (lun, mar, …) */
.um-directory .picker__weekday{
  padding: 6px 0 !important;
  font-size: 13px !important;
  text-transform: lowercase;
}

/* día base (cuadrado) */
.um-directory .picker__day{
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  font-size: 14px !important;
  border-radius: 12px !important;
}

/* compactamos estados fuera de foco para que no “salten” de tamaño */
.um-directory .picker__day--outfocus,
.um-directory .picker__day--disabled{
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
}

/* 5) Footer: botones bien alineados y sin “bailes” */
.um-directory .picker__footer{
  padding: 12px 14px !important;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* Hoy | Borrar | Cerrar */
  gap: 10px;
}
.um-directory .picker__button--today,
.um-directory .picker__button--clear,
.um-directory .picker__button--close{
  width: 100%;
  text-align: center;
}

/* 6) Ajustes finos en móviles muy pequeños */
@media (max-width: 380px){
  .um-directory .picker__box{
    width: 96vw !important;
  }
  .um-directory .picker__day{
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 13px !important;
  }
  .um-directory .picker__table{
    border-spacing: 6px !important;
    padding: 10px 12px !important;
  }
}

/* UM – ocultar el campo “Último acceso To” */
.um-directory .um-search-filter input#last_login_to,
.um-directory .um-search-filter input.um-datepicker-filter[data-range="to"],
/* oculta también el contenedor del datepicker asociado */
.um-directory .um-search-filter #last_login_to_root {
  display: none !important;
}

.um-member-directory-sorting-a-text {
    background-color: transparent;
    color: #178582 !important;
    text-decoration: none;
}

.um-sortyng-by-last_name,
.um-sortyng-by-first_name,
.um-sortyng-by-user_registered_desc,
.um-sortyng-by-user_registered_asc,
.um-sortyng-by-last_login {
	background-color: transparent;
    color: #0a1828 !important;
    text-decoration: none;
}

/* === Tipografía de filtros y barra de búsqueda === */
.um-directory .um-members-wrapper input[type="text"],
.um-directory .um-members-wrapper input[type="search"],
.um-directory .um-members-wrapper select,
.um-directory .um-members-wrapper .um-members-filter-label,
.um-directory .um-members-wrapper .um-members-order a,
.um-directory .um-members-wrapper .um-members-order span,
.um-directory .um-members-wrapper .um-members-filter .um-filter-field,
.um-directory .um-members-wrapper .um-members-filter input::placeholder,
.um-directory .um-members-wrapper .um-members-filter select option,
.um-directory .um-members-wrapper .um-members-filter input,
.um-directory .um-members-wrapper .um-members-filter select,
.um-directory .um-members-wrapper .um-members-filter button {
  font-family: "Open Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 15px !important;
  color: #0A1828 !important;
}

/* Placeholder coherente */
.um-directory .um-members-wrapper input::placeholder {
  color: #888 !important;
  opacity: 1 !important;
  font-family: "Open Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* Dropdown / opciones */
.um-directory .um-members-wrapper select option {
  font-family: "Open Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  color: #0A1828 !important;
}