/* ============================================================
   Líderes Mayores — CSS GLOBAL DE LAYOUT (todo el sitio)
   ------------------------------------------------------------
   AUTOCONTENIDO / PORTABLE: este archivo viaja con el plugin y NO depende
   del child theme. Define sus propios tokens de layout Y de marca (fallback),
   de modo que /perfiles se vea igual en cualquier WordPress con este plugin,
   sin necesidad de brand.css.

   Se carga en TODAS las páginas del front, después de perfiles.css.
   Convención: prefijá todo con .lm- para no colisionar con el theme.
   ============================================================ */


/* ------------------------------------------------------------
   1. Variables de layout + marca (fallback autocontenido)
   ------------------------------------------------------------
   Los tokens de marca se declaran también acá con valores LITERALES para que
   layout.css no dependa de brand.css. Si el child theme define --lm-* en :root,
   esos prevalecen por cascada normal (mismo valor de marca de todos modos).
   NUNCA usar var(--lm-x, fallback) para declarar --lm-x (auto-referencia = vacío).
   ------------------------------------------------------------ */
:root {
  --lm-container: 1180px;   /* ancho máx. del contenido centrado */
  --lm-gutter: 5%;          /* padding lateral en móvil/desktop  */
  --lm-section-y: clamp(40px, 6vw, 72px); /* espaciado vertical de sección */
}
/* Fallback de tokens de marca en el scope de la página de perfiles (portable). */
body.lm-perfiles-page {
  --lm-primary: #655ef6;
  --lm-accent:  #eb44e7;
  --lm-text:    #283382;
  --lm-bg:      #efece4;
  --lm-white:   #ffffff;
  --lm-font-display: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --lm-font-body:    'Atkinson Hyperlegible', system-ui, sans-serif;
}


/* ------------------------------------------------------------
   2. Contenedores y secciones globales
   ------------------------------------------------------------ */
/* Contenedor centrado reutilizable */
.lm-container {
  max-width: var(--lm-container);
  margin-inline: auto;
  padding-inline: var(--lm-gutter);
}

/* Sección con espaciado vertical estándar */
.lm-section {
  padding-block: var(--lm-section-y);
}


/* ------------------------------------------------------------
   3. Ajustes de layout sobre páginas Elementor
   ------------------------------------------------------------
   Ojo: Elementor mete estilos inline por ID de sección/columna.
   Para ganarles suele hacer falta targetear por .elementor-element-<id>
   o usar !important. Agregá acá esos overrides puntuales.
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   3b. /perfiles — ocultar #pagetitle del theme + grilla de filtros
   ------------------------------------------------------------ */
/* Ocultar la barra #pagetitle del theme en la página de perfiles.
   Portable: usa la body class lm-perfiles-page que agrega el plugin cuando
   detecta el shortcode [lm_perfiles] (no depende del ID de página). */
body.lm-perfiles-page #pagetitle { display: none !important; }

/* Banner de /perfiles: cambiar imagen laptop/smartphone según viewport
   (los widgets image de Elementor llevan las clases lm-banner-desktop / -mobile) */
.lm-banner-mobile { display: none; }
@media (max-width: 767px) {
  .lm-banner-desktop { display: none; }
  .lm-banner-mobile { display: block; }
}

/* Filtros en grilla de 6 pistas: fila 1 Región · Comuna (2 selects de media
   fila), fila 2 Año · Edad · Género (3 selects de un tercio). Así las 2 filas
   quedan completas tras quitar el filtro de país (1.40.0).
   Prefijado con body.lm-perfiles-page para ganar por especificidad a cualquier
   .lm-filtro-selects{display:flex} que quede en un brand.css antiguo del theme. */
body.lm-perfiles-page .lm-filtro-selects {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px 24px;
  align-items: end;
}
body.lm-perfiles-page .lm-filtro-selects .lm-select { width: 100%; grid-column: span 2; }
body.lm-perfiles-page .lm-filtro-selects .lm-select:nth-child(-n+2) { grid-column: span 3; }
body.lm-perfiles-page .lm-filtro-selects .lm-select select { width: 100%; min-width: 0; box-sizing: border-box; }
/* Texto del select en violeta #655ef6 (mockup). !important porque el theme/Elementor
   pisa el color con azul marino. La flecha custom violeta se define en perfiles.css. */
.lm-perfiles .lm-select select,
.lm-filtro-selects .lm-select select {
  color: var(--lm-primary) !important;
  border-color: var(--lm-primary) !important;
}
/* Acciones de filtros: "Aplicar" (principal) + "Limpiar" (secundario)
   centrados respecto al ancho completo del formulario de filtros (ocupan
   toda la fila, debajo de los selects). */
.lm-filtro-selects .lm-filtros__acciones {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 30px;
}
.lm-filtro-selects .lm-filtros__acciones .lm-btn {
  flex: 0 1 auto;
  padding-block: 12px;
  padding-inline: 40px;
}
/* Móvil: botones "Aplicar" / "Limpiar" en vertical y a ancho completo del form. */
@media (max-width: 767px) {
  .lm-filtro-selects .lm-filtros__acciones { flex-direction: column; align-items: stretch; }
  .lm-filtro-selects .lm-filtros__acciones .lm-btn { width: 100%; flex: 1 1 auto; }
}
/* Jerarquía J1 (principal) — "Aplicar filtros": magenta sólido, hover azul marino.
   !important porque los CSS dinámicos de Elementor (post-<id>.css) se encolan
   DESPUÉS de layout.css y pisan el fill. */
.lm-perfiles .lm-btn.lm-filtros__apply,
.lm-filtro-selects .lm-filtros__apply {
  background-color: var(--lm-accent) !important;
  color: var(--lm-white) !important;
  border: 2px solid var(--lm-accent) !important;
  box-shadow: none !important;
}
.lm-perfiles .lm-btn.lm-filtros__apply:hover,
.lm-filtro-selects .lm-filtros__apply:hover {
  background-color: var(--lm-text) !important;
  color: var(--lm-white) !important;
  border-color: var(--lm-text) !important;
}
/* Jerarquía J2 (secundario) — "Limpiar filtros": outline magenta, hover relleno.
   Se distingue de "Aplicar" (principal) sin salirse de la paleta de marca. */
.lm-perfiles .lm-btn.lm-btn--clear,
.lm-filtro-selects .lm-btn--clear {
  background-color: transparent !important;
  color: var(--lm-accent) !important;
  border: 2px solid var(--lm-accent) !important;
  box-shadow: none !important;
}
.lm-perfiles .lm-btn.lm-btn--clear:hover,
.lm-filtro-selects .lm-btn--clear:hover {
  background-color: var(--lm-accent) !important;
  color: var(--lm-white) !important;
  border-color: var(--lm-accent) !important;
}

/* Toggle ▾ del buscador: sin recuadro, solo la flecha violeta dentro del input */
.lm-search__field .lm-search__toggle {
  border: 0;
  background: transparent;
  box-shadow: none;
}
/* Input "Busca un Líder Mayor": pill violeta como los selects (el theme le mete
   su estilo de input genérico gris/cuadrado, por eso va con especificidad). */
/* Ancho completo: un brand.css antiguo del theme deja .lm-search{max-width:640px};
   con la body class lo llevamos a todo el ancho del formulario. */
body.lm-perfiles-page .lm-search,
body.lm-perfiles-page .lm-search__field { max-width: 100% !important; width: 100%; }
body.lm-perfiles-page .lm-search .lm-search__input {
  border: 2px solid var(--lm-primary) !important;
  border-radius: 999px !important;
  background-color: #fff !important;
  color: var(--lm-primary) !important;
  min-height: 48px;
  padding: 10px 46px 10px 22px !important;
  font-family: var(--lm-font-body);
  font-size: 16px;
  box-shadow: none !important;
}
body.lm-perfiles-page .lm-search .lm-search__input::placeholder { color: var(--lm-primary); opacity: .7; }

@media (max-width: 900px) {
  body.lm-perfiles-page .lm-filtro-selects { grid-template-columns: repeat(2, 1fr); }
  body.lm-perfiles-page .lm-filtro-selects .lm-select,
  body.lm-perfiles-page .lm-filtro-selects .lm-select:nth-child(-n+2) { grid-column: auto; }
  /* 5 selects en 2 columnas: el último (Género) ocupa la fila completa. */
  body.lm-perfiles-page .lm-filtro-selects .lm-select:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  body.lm-perfiles-page .lm-filtro-selects { grid-template-columns: 1fr; }
  body.lm-perfiles-page .lm-filtro-selects .lm-select:nth-child(5) { grid-column: auto; }
}

/* ------------------------------------------------------------
   3c. nice-select — el theme Consultio reemplaza los <select> nativos por
   <div class="nice-select"> vía JS (nuestro <select> queda display:none).
   Hay que estilar ESE div para conseguir el borde violeta + pill del mockup.
   Prefijado con body.lm-perfiles-page para no afectar otros selects del sitio.
   ------------------------------------------------------------ */
body.lm-perfiles-page .lm-select .nice-select {
  width: 100%;
  height: auto;
  min-height: 48px;
  display: flex;
  align-items: center;
  border: 2px solid var(--lm-primary) !important;
  border-radius: 999px !important;
  background-color: #fff !important;
  padding: 10px 44px 10px 20px !important;
  font-family: var(--lm-font-body);
  font-size: 16px;
  color: var(--lm-primary) !important;
  line-height: 1.2;
}
body.lm-perfiles-page .lm-select .nice-select .current { color: var(--lm-primary) !important; font-weight: 400; }
/* Flecha del select unificada con la del buscador «Busca un Líder Mayor»
   (.lm-search__toggle usa el carácter ▾ tipográfico centrado con
   top:50% + translateY(-50%)). nice-select dibuja su flecha con bordes rotados
   45°; la reemplazamos por el mismo glifo ▾, centrado igual, para que ambas se
   vean idénticas (mismo color, tamaño, posición y alineación vertical). */
body.lm-perfiles-page .lm-select .nice-select::after {
  content: "\25BE";                          /* ▾ igual que el buscador */
  border: 0 !important;                      /* anula el chevron de bordes */
  width: auto !important;
  height: auto !important;
  margin-top: 0 !important;                  /* anula el -4px nativo */
  right: 20px;
  top: 50%;                                  /* centrado vertical al alto del select */
  transform: translateY(-50%) !important;    /* igual que .lm-search__toggle */
  color: var(--lm-primary) !important;
  font-size: 20px;
  line-height: 1;
}
/* Al abrir, la librería rota el ::after con transform (rotate(-135deg)); como
   ahora es un glifo, conservamos SOLO el centrado vertical (sin rotación). */
body.lm-perfiles-page .lm-select .nice-select.open::after {
  transform: translateY(-50%) !important;
}
/* Estado deshabilitado (comuna sin región elegida): violeta pleno como el resto
   (solo cambia el cursor); mantiene la coherencia visual del mockup. */
body.lm-perfiles-page .lm-select .nice-select.disabled {
  border-color: var(--lm-primary) !important;
  color: var(--lm-primary) !important;
  opacity: 1;
  cursor: not-allowed;
}
body.lm-perfiles-page .lm-select .nice-select.disabled .current { color: var(--lm-primary) !important; }
body.lm-perfiles-page .lm-select .nice-select.disabled::after { border-color: var(--lm-primary) !important; }
/* Panel desplegable: opciones e ítem activo en la paleta de marca */
/* El .nice-select abierto y su panel deben quedar por ENCIMA de la grilla/cards.
   nice-select trae z-index:9 en .list, demasiado bajo: las cards (position:relative)
   vienen DESPUÉS en el DOM e interceptaban el click en las opciones.
   Elevamos todo el bloque de filtros por encima del grid. */
body.lm-perfiles-page .lm-filtros { position: relative; z-index: 20; }
body.lm-perfiles-page .lm-filtro-selects { position: relative; z-index: 20; }
body.lm-perfiles-page #lm-perfiles-grid { position: relative; z-index: 1; }
body.lm-perfiles-page .lm-select .nice-select.open { z-index: 100; }

/* El buscador y su panel de sugerencias deben quedar por ENCIMA del resto
   del bloque de filtros (categorías, selects nice-select y botón limpiar).
   Sin esto, .lm-search__suggestions (z-index:20) empata con .lm-filtros
   (z-index:20) y, al ser los otros bloques hermanos POSTERIORES en el DOM,
   se dibujan encima y "se comen" la lista de resultados. */
body.lm-perfiles-page .lm-search { position: relative; z-index: 60; }
body.lm-perfiles-page .lm-search__field { position: relative; z-index: 60; }
body.lm-perfiles-page .lm-search__suggestions { z-index: 200; }
body.lm-perfiles-page .lm-select .nice-select .list {
  width: 100%;
  border-radius: 14px;
  border: 1px solid #e7e3f8;
  box-shadow: 0 10px 30px rgba(40, 51, 130, .16);
  z-index: 100;
}
body.lm-perfiles-page .lm-select .nice-select .option:hover,
body.lm-perfiles-page .lm-select .nice-select .option.focus,
body.lm-perfiles-page .lm-select .nice-select .option.selected.focus {
  background-color: var(--lm-bg);
  color: var(--lm-accent);
}
body.lm-perfiles-page .lm-select .nice-select .option.selected { color: var(--lm-primary); font-weight: 700; }


/* ------------------------------------------------------------
   4. Responsive global
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  /* tablets */
}
@media (max-width: 640px) {
  /* móvil */
}