/* Landing de LabLink — propuesta C "Doble filtro".
   Medidas y colores tomados del artboard (1440 px de ancho, contenido a 112 px
   de cada borde) y de su version mobile (390 px, gutter de 16 px). Todo cuelga
   de clases tl-* para no tocar las demas pantallas que usan new-design. */

:root {
    /* Paleta 1b (ajustes pre-lanzamiento, A7): el contrato de colores de todas las páginas LabLink. El PDF no carga
       este CSS y usa los mismos hex. */
    --tl-ink: #002553;
    --tl-hero: #172033;
    --tl-blue: #156194;
    --tl-muted: #375478;
    --tl-soft: #375478;
    --tl-blue-light: #A2BCD6;
    --tl-line: #D3DEEA;
    --tl-field-border: #A4B1C2;
    --tl-bg: #F4F6F9;
    --tl-ok: #1E7A4C;
    --tl-ok-bg: #E8F5EE;
    --tl-partial: #8A5A00;
    --tl-partial-bg: #FFF4DC;
    --tl-neutral: #4A5060;
    --tl-neutral-bg: #F1F2F4;
    --tl-amber: #B4690E;
    --tl-focus: #1D5C6B;
    --tl-selected-bg: #E8F1F3;
    --tl-info-bg: #EEF2F7;
    /* El rojo de la marca va solo en la rayita del rótulo del hero: nunca en texto, botones ni estados. */
    --tl-red: #F9353E;
    /* Errores: rojo oscuro, sobre su fondo suave. */
    --tl-red-dark: #A40E26;
    --tl-red-soft: #FBEAEC;
    /* Texto corrido en tinta y hover de los botones en tinta. */
    --tl-text: var(--tl-ink);
    --tl-ink-dark: #001A3D;
    /* Escala de las medidas de desktop respecto del artboard: a 1:1 el diseño
       se ve sobredimensionado en un notebook. La escala achica tipografía y
       espacios, no el ancho de la columna. */
    --tl-scale: 0.76;
    /* El texto se achica menos que el resto y nunca baja de 12 px. */
    --tl-type-scale: 0.84;
    /* Barra, hero y tarjeta (H1 a H6) van en px reales desde 1.200 px de ancho; bajo eso siguen la escala. */
    --tl-hs: var(--tl-scale);
    --tl-hts: var(--tl-type-scale);
    /* Desde 1.200 px el contenido es una columna de 1.200 px centrada (H2). */
    --tl-gutter: max(24px, calc((100% - 1200px) / 2));
}

@media (min-width: 1200px) {
    :root {
        --tl-hs: 1;
        --tl-hts: 1;
    }
}

body.f-body {
    color: var(--tl-text);
    font-family: 'Roboto', sans-serif;
    background: var(--tl-bg);
}

/* El contenido crece y el pie llega al borde inferior aunque la página sea corta (U17). */
.content-cont {
    flex: 1 0 auto;
    padding-bottom: 0;
}

/* Foco visible, el mismo en todos los controles. */
.tl-header a:focus-visible,
.tl-header button:focus-visible,
.tl-finder button:focus-visible,
.tl-filtered button:focus-visible,
.tl-filtered a:focus-visible {
    outline: 2px solid var(--tl-focus);
    outline-offset: 2px;
}

#content-all {
    padding: 0;
}


/* ---------- Header ---------- */

.tl-header-cont {
    position: relative;
    z-index: 30;
    background: #ffffff;
    border-bottom: 1px solid var(--tl-line);
}

/* H1: barra blanca con línea fina inferior, alineada con la columna del contenido. */
.tl-header {
    height: calc(72px * var(--tl-hs));
    box-sizing: border-box;
    padding: 0 var(--tl-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(24px * var(--tl-scale));
}

/* Logo oficial de la agencia (cápsulas enlazadas, ~5,9:1): se escala solo por la altura, sin tocar proporciones. */
.tl-header-logo img {
    display: block;
    height: calc(36px * var(--tl-scale));
    width: auto;
}

.tl-nav {
    display: flex;
    align-items: center;
    gap: calc(28px * var(--tl-hs));
    margin-left: auto;
    font-size: 16px;
}

/* Como la maqueta D-74: 16 px, peso 500 y en tinta. */
.tl-nav .tl-nav-link {
    color: var(--tl-ink);
    font-weight: 500;
    text-decoration: none;
}

.tl-nav .tl-nav-link:hover,
.tl-nav .tl-nav-link:focus {
    color: var(--tl-ink);
}

/* Página actual: subrayada. */
.tl-nav .tl-nav-link[aria-current="page"] {
    color: var(--tl-ink);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

.tl-user-menu .navbar-nav {
    flex-direction: row;
    align-items: center;
}

.tl-menu-toggle {
    display: none;
    width: calc(44px * var(--tl-scale));
    height: calc(44px * var(--tl-scale));
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tl-text);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ---------- Hero ---------- */

/* Bienvenida D-74, versión B de la maqueta «LabLink · Bienvenida D-74»: bloque --tl-hero a todo el ancho con la foto
   de fondo en la mitad derecha, a sangre, fundida con el azul por un degradado desde la izquierda; el texto, en la
   columna de 1.200 px, a la izquierda. */
.tl-hero {
    position: relative;
    overflow: hidden;
    background: var(--tl-hero);
    color: #ffffff;
    padding: calc(56px * var(--tl-hs)) var(--tl-gutter) calc(128px * var(--tl-hs));
}

.tl-hero-copy {
    position: relative;
    z-index: 1;
    max-width: min(calc(520px * var(--tl-hs)), 46%);
    display: flex;
    flex-direction: column;
    gap: calc(20px * var(--tl-hs));
}

/* Titular en dos líneas: la 1 entra entera en la columna de texto a 1.200 px; «Disponible hoy» va en la suya, con el
   acento de la marca (--tl-blue-light), y nunca se une a la línea 1. */
.tl-hero .tl-hero-title {
    margin: 0;
    font-size: calc(34px * var(--tl-hs));
    line-height: 1.18;
    letter-spacing: -0.4px;
    font-weight: 500;
    color: #ffffff;
}

.tl-hero-line,
.tl-hero-accent {
    display: block;
}

.tl-hero-accent {
    color: var(--tl-blue-light);
}

.tl-hero-lead {
    margin: 0;
    max-width: calc(560px * var(--tl-hs));
    font-size: max(14px, calc(18px * var(--tl-hts)));
    line-height: 1.5556;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.86);
}

.tl-hero-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 54%;
    margin: 0;
}

.tl-hero-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right 22%;
}

/* Degradado de la maqueta: azul pleno en el borde izquierdo de la foto, que se abre hacia la derecha. */
.tl-hero-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--tl-hero) 0%, rgba(23, 32, 51, 0.7) 16%, rgba(23, 32, 51, 0) 42%);
    pointer-events: none;
}

/* En pantallas bajas (notebook de 14" al 150 %, 1280×630) el hero se compacta para que «Buscar perfiles» se vea sin scroll. */
@media (min-width: 1200px) and (max-height: 800px) {
    .tl-hero {
        padding-top: 28px;
        padding-bottom: 92px;
    }
}

/* ---------- Tarjeta con pestañas, filtros y resultados ---------- */

/* H6: la tarjeta sube 72 px sobre el borde del hero. */
.tl-search {
    position: relative;
    z-index: 10;
    margin: calc(-72px * var(--tl-hs)) var(--tl-gutter) 0;
    display: flex;
    flex-direction: column;
    gap: calc(18px * var(--tl-scale));
}

.tl-search [hidden] {
    display: none !important;
}

/* La tarjeta, montada sobre el borde del hero. Sin overflow oculto: los
   desplegables de select2 cuelgan del formulario y deben salir de ella. */
.tl-finder {
    position: relative;
    z-index: 20;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #E4E6EB;
    border-radius: calc(12px * var(--tl-hs));
    box-shadow: 0 1px 2px rgba(27, 34, 48, 0.04), 0 16px 40px rgba(27, 34, 48, 0.08);
    padding: calc(28px * var(--tl-hs));
    display: flex;
    flex-direction: column;
    gap: calc(20px * var(--tl-hs));
}

/* Desde la primera búsqueda por filtros la tarjeta queda fija arriba mientras
   se recorren los resultados. El contenedor .tl-search acota el sticky. */
.tl-finder.is-filtros:has(.tl-search-form.is-sticky) {
    position: sticky;
    top: 16px;
}

/* Mientras se busca, la barra de progreso reemplaza pestañas y paneles. */
.tl-finder.is-esperando > .tl-tabs,
.tl-finder.is-esperando > .tl-tab-panel {
    display: none !important;
}

/* Pestañas subrayadas (patrón tabs de WAI-ARIA): la activa en tinta con un subrayado de 2 px sobre la línea fina. */
.tl-tabs {
    align-self: flex-start;
    display: inline-flex;
    gap: calc(24px * var(--tl-hs));
    border-bottom: 1px solid var(--tl-line);
}

.tl-tab {
    margin: 0 0 -1px;
    padding: 0 0 calc(12px * var(--tl-hs));
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: max(12px, calc(15px * var(--tl-hts)));
    line-height: 1.3;
    font-weight: 400;
    color: var(--tl-muted);
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.tl-tab:hover {
    color: var(--tl-ink);
}

.tl-tab[aria-selected="true"] {
    color: var(--tl-ink);
    font-weight: 500;
    border-bottom-color: var(--tl-ink);
}

.tl-tab:focus:not(:focus-visible) {
    outline: none;
}

.tl-tab:focus-visible {
    outline: 2px solid var(--tl-focus);
    outline-offset: 2px;
}

/* El formulario de filtros ya no es tarjeta: vive en su panel. */
.tl-search-form.form-content {
    position: relative;
    z-index: 20;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: auto;
    max-width: none;
    overflow: visible;
}

/* El conteo de cada campo y las casillas del desplegable, en tinta como los
   botones: el rojo queda para el logo y los errores. */
.tl-search-form .select2-count {
    background-color: var(--tl-ink);
}

.tl-search-form .select2-results__option[aria-selected="true"] .facet-check {
    background-color: var(--tl-ink);
    border-color: var(--tl-ink);
}

.tl-search-fields {
    display: flex;
    align-items: flex-end;
    gap: calc(16px * var(--tl-scale));
}

.tl-field {
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--tl-scale));
    min-width: 0;
    padding: 0;
}

/* Sin Industria ni botón (ajustes 1 y 2 del 10-nov), los tres campos llenan la fila; Cargo, con su ejemplo largo,
   se lleva la mitad. */
.tl-field-charge { flex: 2 1 0; }
.tl-field-level,
.tl-field-area { flex: 1 1 0; }

.tl-search-form .tl-field-label {
    margin: 0;
    font-size: max(12px, calc(14px * var(--tl-type-scale)));
    font-weight: 400;
    color: var(--tl-muted);
    line-height: 1.2;
}

.tl-search-form .tl-field-label-strong {
    font-weight: 500;
    color: var(--tl-text);
}

/* select2 con la forma de los campos del diseño: 56 px, radio 10, borde gris.
   Los selectores repiten .form-content.lite-form-content para empatar con las
   reglas de .multi-facet de style.css y ganarles por venir despues. */
.tl-search-form.form-content .select2-container {
    width: 100% !important;
}

.tl-search-form.form-content.lite-form-content .select2-container--default .select2-selection--multiple,
.tl-search-form.form-content.lite-form-content .multi-facet .select2-container--default .select2-selection--multiple,
.tl-search-form.form-content .select2-container--default .select2-selection--single {
    height: calc(56px * var(--tl-scale)) !important;
    min-height: calc(56px * var(--tl-scale)) !important;
    box-sizing: border-box;
    padding: 0 !important;
    border: 1px solid var(--tl-field-border) !important;
    border-radius: calc(10px * var(--tl-scale)) !important;
    background: #ffffff;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
}

.tl-search-form.form-content.lite-form-content .tl-field-charge.multi-facet .select2-container--default .select2-selection--multiple {
    border-width: 1.5px !important;
}

.tl-search-form.form-content .select2-container--default.select2-container--focus .select2-selection--multiple,
.tl-search-form.form-content .select2-container--default.select2-container--open .select2-selection--multiple,
.tl-search-form.form-content .select2-container--default.select2-container--open .select2-selection--single,
.tl-search-form.form-content .select2-container--default .select2-selection--single:focus {
    outline: 2px solid var(--tl-focus);
    outline-offset: 2px;
    border-color: var(--tl-ink) !important;
}

.tl-search-form.form-content.lite-form-content .multi-facet .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    width: 100%;
    height: calc(54px * var(--tl-scale));
    padding: 0 calc(12px * var(--tl-scale));
    font-size: max(12px, calc(15px * var(--tl-type-scale)));
}

.tl-search-form.form-content.lite-form-content .tl-field-charge.multi-facet .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 calc(18px * var(--tl-scale));
}

.tl-search-form.form-content.lite-form-content .multi-facet .select2-container--default .select2-selection--multiple .select2-selection__choice {
    font-size: max(12px, calc(15px * var(--tl-type-scale)));
    line-height: calc(54px * var(--tl-scale));
    color: var(--tl-muted);
}

.tl-search-form.form-content.lite-form-content .tl-field-charge.multi-facet .select2-container--default .select2-selection--multiple .select2-selection__choice {
    font-size: max(12px, calc(17px * var(--tl-type-scale)));
    color: var(--tl-ink);
}

.tl-search-form.form-content.lite-form-content .multi-facet .select2-container--default .select2-selection__placeholder,
.tl-search-form.form-content.lite-form-content .multi-facet .select2-container--default .select2-search--inline .select2-search__field::placeholder {
    color: var(--tl-muted);
    opacity: 1;
    font-size: max(12px, calc(15px * var(--tl-type-scale)));
}

.tl-search-form.form-content.lite-form-content .tl-field-charge.multi-facet .select2-container--default .select2-search--inline .select2-search__field::placeholder {
    color: var(--tl-muted);
    font-size: max(12px, calc(17px * var(--tl-type-scale)));
}

.tl-search-form.form-content.lite-form-content .multi-facet .select2-container--default .select2-search--inline .select2-search__field {
    height: calc(54px * var(--tl-scale)) !important;
    line-height: calc(54px * var(--tl-scale));
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: inherit;
    font-size: max(12px, calc(15px * var(--tl-type-scale)));
    color: var(--tl-ink);
    background: transparent;
    text-overflow: ellipsis;
    cursor: pointer;
}

.tl-search-form.form-content.lite-form-content .tl-field-charge.multi-facet .select2-container--default .select2-search--inline .select2-search__field {
    font-size: max(12px, calc(17px * var(--tl-type-scale)));
    cursor: text;
}

.tl-search-form.form-content .select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 100%;
    padding: 0 calc(30px * var(--tl-scale)) 0 calc(12px * var(--tl-scale)) !important;
    line-height: calc(54px * var(--tl-scale));
    font-size: max(12px, calc(15px * var(--tl-type-scale)));
    color: var(--tl-muted);
}

.tl-search-form.form-content .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(54px * var(--tl-scale));
    right: calc(8px * var(--tl-scale));
}

.tl-search-form .tl-search-note {
    margin: calc(14px * var(--tl-scale)) 0 0;
    font-size: max(12px, calc(13px * var(--tl-type-scale)));
    line-height: 1.45;
    color: var(--tl-muted);
}

/* Bajo la tarjeta, con la pestaña Filtros: contador, chips y «Quitar filtros». */
.tl-filtered {
    display: flex;
    flex-direction: column;
    gap: calc(18px * var(--tl-scale));
}

.tl-filtered .applied-filters {
    gap: 6px calc(12px * var(--tl-scale));
    margin: calc(4px * var(--tl-scale)) 0 0;
    padding: 0;
    border-top: 0;
}

/* Chips neutros: el rojo queda para el logo y los errores. */
.tl-filtered .applied-chip {
    margin: 0;
    border-color: var(--tl-line);
    background: var(--tl-info-bg);
    color: var(--tl-ink);
}

/* Resultados: aparecen entre el filtro y la franja roja. Activos, ocupan al
   menos el resto de la ventana bajo el filtro fijado, para que la pagina pueda
   desplazarse hasta dejar el filtro arriba aunque la busqueda traiga poco. */
.tl-results {
    display: none;
}

.tl-results.is-active {
    display: block;
    min-height: calc(100vh - var(--tl-form-h, calc(140px * var(--tl-scale))) - calc(48px * var(--tl-scale)));
    padding-top: calc(12px * var(--tl-scale));
}

.tl-results .advisors-grid {
    width: auto;
    margin: 0 calc(-12px * var(--tl-scale));
}

.tl-results .item {
    margin-bottom: 24px;
    padding: 0 calc(12px * var(--tl-scale));
}

/* Cuatro tarjetas por fila como máximo, desde 1200 px y en cualquier ancho mayor. */
@media (min-width: 1200px) {
    .tl-results .tl-item {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* La foto sigue el ancho de la tarjeta en proporción 4:3, para que comparta el
   alto con la descripción. La miniatura llega sin recortar (alto 0) y se ancla
   arriba: lo que sobra se corta abajo, nunca en la cabeza (D-09). */
.tl-results .avatar-container.avatar-container-carousel {
    height: auto;
    aspect-ratio: 4 / 3;
    background-position: center top;
}

/* La tarjeta no se abre (D-09): sin cursor de enlace fuera de los botones. En
   columna para que los botones queden al pie aunque no haya descripción. */
.tl-results .person {
    cursor: default;
    display: flex;
    flex-direction: column;
}

.tl-results .tl-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Desde dos por fila, todas las tarjetas miden lo mismo y los botones quedan
   alineados, tengan o no descripción: el cuerpo reserva el nombre, las siete
   líneas de la descripción y los botones. En content-box para que el padding
   (el de .p-3, sea cual sea) quede fuera de la cuenta. */
@media (min-width: 576px) {
    .tl-results .tl-card-body {
        box-sizing: content-box;
        min-height: calc(56px + 7 * 1.5em + 16px * var(--tl-scale) + 36px);
    }
}

/* El nombre va en tinta, como los títulos de la landing; el rojo queda para las
   acciones. */
.tl-results .person .p-name {
    height: 56px !important;
    color: var(--tl-ink);
}

/* Hasta siete líneas: con cuatro tarjetas por fila caben enteros los 220
   caracteres del máximo. Si alguna se pasara, termina en "…" y el tooltip (JS
   de la landing) muestra el resto. El alto de línea va fijo porque el cuerpo de
   la tarjeta reserva esas siete líneas. */
.tl-card-brief {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    line-height: 1.5;
    overflow: hidden;
    margin: 0;
    font-style: italic;
    text-align: center;
    color: var(--tl-text);
}

/* Sin mouse no hay tooltip: la descripción sale entera. Son 220 caracteres
   como máximo, unas cinco a siete líneas. */
@media (hover: none) {
    .tl-card-brief {
        display: block;
        overflow: visible;
    }
}

.tl-card-actions {
    margin-top: auto;
    padding-top: calc(16px * var(--tl-scale));
    display: flex;
    gap: 8px;
}

/* Dos botones que caben en la tarjeta más angosta (~160 px útiles a seis por
   fila). Mismo par que tenía el modal: CV en blanco, LinkedIn azul con su ícono.
   Cada uno toma el ancho de su texto y reparten el sobrante: a partes iguales,
   "LinkedIn" con ícono no cabe en la mitad de la tarjeta más angosta.

   En bloque y no en flex, por lo mismo que los botones del modal (style.css):
   los glifos de fuse-iconfont se sientan en la línea base como una mayúscula,
   y centrarlos por caja con align-items los descuadra respecto del texto. */
.tl-card-btn {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-block;
    height: 36px;
    /* 36 px menos el borde de arriba y el de abajo. */
    line-height: 34px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: max(12px, calc(14px * var(--tl-type-scale)));
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}

.tl-card-btn:hover,
.tl-card-btn:focus {
    text-decoration: none;
}

.tl-card-btn .icon {
    font-size: 1.15em;
    margin-right: 5px;
    color: inherit;
}

/* El glifo de linkedin es el único que baja de la línea base (yMin = -43 de
   1024 unidades): se sube exactamente eso, como en el modal. */
.tl-card-btn .icon-linkedin {
    position: relative;
    top: -0.042em;
}

.tl-card-cv {
    background: #fff;
    border-color: var(--tl-line);
    color: var(--tl-text);
}

.tl-card-cv:hover,
.tl-card-cv:focus {
    background: var(--tl-bg);
    color: var(--tl-text);
}

.tl-card-linkedin {
    background: #0A66C2;
    border-color: #0A66C2;
    color: #fff;
}

.tl-card-linkedin:hover,
.tl-card-linkedin:focus {
    background: #004182;
    border-color: #004182;
    color: #fff;
}

/* El .tooltip-inner global (main.css) mide 200 px y centra: pensado para
   rótulos de una palabra, no para un párrafo de 220 caracteres. */
.tl-brief-tooltip .tooltip-inner {
    max-width: 320px;
    padding: 8px 12px;
    border-radius: 6px;
    background-color: var(--tl-ink);
    font-size: max(12px, calc(14px * var(--tl-type-scale)));
    line-height: 1.45;
    text-align: left;
}

.tl-brief-tooltip.bs-tooltip-top .arrow::before {
    border-top-color: var(--tl-ink);
}

.tl-brief-tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: var(--tl-ink);
}

/* Contador al inicio de la fila, como en el video; «Quitar filtros» al extremo derecho. */
.tl-results-count {
    margin-right: calc(4px * var(--tl-scale));
    font-size: max(13px, calc(16px * var(--tl-type-scale)));
    font-weight: 500;
    color: var(--tl-ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tl-results-count.is-loading {
    font-weight: 400;
    color: var(--tl-soft);
}

.tl-filtered .applied-filters .clear-filters {
    margin-left: auto;
    padding: 6px 2px;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: max(12px, calc(14px * var(--tl-type-scale)));
    color: var(--tl-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.tl-filtered .applied-filters .clear-filters:hover {
    color: var(--tl-ink);
}

.tl-filtered .applied-filters .clear-filters:focus-visible {
    outline: 2px solid var(--tl-focus);
    outline-offset: 2px;
}

/* Mientras llega la búsqueda nueva, la lista anterior queda a la vista pero
   atenuada y sin clics: no se vacía ni hace saltar la página. */
.tl-results .advisors-grid {
    transition: opacity 0.18s ease;
}

.tl-results .advisors-grid.is-loading {
    opacity: 0.4;
    pointer-events: none;
}

/* Vacío de los filtros: tarjeta plana, con «Quitar filtros» y «Describir el cargo». */
.tl-empty-state {
    padding: calc(40px * var(--tl-scale)) calc(24px * var(--tl-scale));
    border: 1px solid var(--tl-line);
    border-radius: calc(18px * var(--tl-scale));
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10px * var(--tl-scale));
    text-align: center;
}

.tl-empty-title {
    font-size: max(14px, calc(17px * var(--tl-type-scale)));
    font-weight: 500;
    color: var(--tl-ink);
}

.tl-empty-text {
    max-width: 560px;
    font-size: max(13px, calc(15px * var(--tl-type-scale)));
    line-height: 1.55;
    color: var(--tl-muted);
}

.tl-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: calc(8px * var(--tl-scale));
}

.tl-empty-actions .tl-empty-clear,
.tl-empty-actions .tl-empty-describe {
    height: calc(48px * var(--tl-scale));
    min-height: 40px;
    box-sizing: border-box;
    padding: 0 calc(22px * var(--tl-scale));
    border-radius: calc(10px * var(--tl-scale));
    font-family: inherit;
    font-size: max(13px, calc(15px * var(--tl-type-scale)));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.tl-empty-actions .tl-empty-clear {
    border: 1px solid var(--tl-field-border);
    background: #ffffff;
    color: var(--tl-ink);
}

.tl-empty-actions .tl-empty-clear:hover {
    border-color: var(--tl-ink);
}

.tl-empty-actions .tl-empty-describe {
    border: 0;
    background: var(--tl-ink);
    color: #ffffff;
    font-weight: 500;
}

.tl-empty-actions .tl-empty-describe:hover {
    background: var(--tl-ink-dark);
}

.tl-empty-actions button:focus:not(:focus-visible) {
    outline: none;
}

.tl-empty-actions button:focus-visible {
    outline: 2px solid var(--tl-focus);
    outline-offset: 2px;
}

.tl-results .context-loader {
    position: relative;
    margin: calc(24px * var(--tl-scale)) 0;
    min-height: calc(60px * var(--tl-scale));
}

.tl-results .context-loader.hidden {
    visibility: hidden;
}

/* ---------- Recuadro "Tus resultados aparecerán aquí" (1.11/1.12) ---------- */

.tl-results-placeholder {
    min-height: calc(160px * var(--tl-scale));
    box-sizing: border-box;
    padding: calc(24px * var(--tl-scale)) 24px;
    border: 1.5px dashed var(--tl-field-border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.tl-results-placeholder-title {
    font-size: max(15px, calc(18px * var(--tl-type-scale)));
    font-weight: 500;
    color: var(--tl-text);
}

.tl-results-placeholder-text {
    font-size: max(13px, calc(15px * var(--tl-type-scale)));
    color: var(--tl-soft);
}

/* ---------- Franja de cifras (H7) ---------- */

/* Bajo la tarjeta, solo con «Describir el cargo»: tres tarjetas blancas y la nota de la fuente. Va fuera de .tl-search,
   así que su [hidden] necesita regla propia. */
.tl-cifras {
    margin: 48px var(--tl-gutter) 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tl-cifras[hidden] {
    display: none;
}

.tl-cifras-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 16px;
}

.tl-cifra {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    border: 1px solid var(--tl-line);
    border-radius: 12px;
    background: #ffffff;
}

.tl-cifra-num {
    flex: 0 0 auto;
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    color: var(--tl-ink);
}

.tl-cifra-text {
    font-size: 15px;
    line-height: 22px;
    color: var(--tl-muted);
}

.tl-cifras-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--tl-muted);
}

/* ---------- Footer ---------- */

.tl-footer {
    margin-top: calc(80px * var(--tl-scale));
    padding: calc(28px * var(--tl-scale)) var(--tl-gutter);
    border-top: 1px solid var(--tl-line);
    display: flex;
    justify-content: space-between;
    gap: calc(16px * var(--tl-scale));
    font-size: max(12px, calc(14px * var(--tl-type-scale)));
    color: var(--tl-soft);
    background: #ffffff;
}

/* ---------- Tablet ---------- */

@media (max-width: 1199.98px) {
    /* Bajo 1.200 px, barra, hero y tarjeta siguen las medidas de arriba a la escala del sitio (--tl-hs). */
    :root {
        --tl-gutter: calc(48px * var(--tl-scale));
    }

    .tl-search-fields {
        flex-wrap: wrap;
    }

    .tl-field-charge {
        flex: 1 1 100%;
    }

    .tl-field-level,
    .tl-field-area {
        flex: 1 1 0;
    }
}

@media (max-width: 991.98px) {
    /* Sin espacio para el fondo: la foto pasa debajo de la bajada, entera y sin degradado. */
    .tl-hero-copy {
        max-width: none;
    }

    .tl-hero-photo {
        position: relative;
        width: 100%;
        margin-top: 20px;
    }

    .tl-hero-photo img {
        height: auto;
        border-radius: 12px;
    }

    .tl-hero-photo::after {
        display: none;
    }

}

/* ---------- Mobile (artboard C-mobile) ---------- */

@media (max-width: 767.98px) {
    .tl-results-placeholder {
        min-height: 110px;
        border-radius: 14px;
        padding: 16px 20px;
    }

    :root {
        /* Mobile va a las medidas de su artboard, sin escalar. */
        --tl-scale: 1;
        --tl-type-scale: 1;
        --tl-gutter: 16px;
    }



    .tl-header {
        position: relative;
        height: 64px;
        padding: 0 16px;
    }

    .tl-header-logo img {
        height: 26px;
    }

    .tl-menu-toggle {
        display: flex;
    }

    .tl-nav {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 16px 12px;
        background: #ffffff;
        border-bottom: 1px solid var(--tl-line);
        box-shadow: 0 12px 24px rgba(20, 24, 33, 0.08);
    }

    .tl-nav.is-open {
        display: flex;
    }

    .tl-nav .tl-nav-link {
        display: flex;
        align-items: center;
        min-height: 48px;
        font-size: 16px;
    }

    .tl-hero {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 36px 16px 96px;
    }

    .tl-hero-copy {
        gap: 14px;
    }

    .tl-hero .tl-hero-title {
        font-size: 28px;
        line-height: 1.18;
    }

    .tl-hero-lead {
        font-size: 16px;
    }

    .tl-search {
        gap: 16px;
    }

    .tl-finder {
        padding: 16px;
        gap: 16px;
    }

    /* Apilada, la tarjeta ocupa media pantalla: fija taparía los resultados.
       En mobile se desplaza hasta arriba pero no se queda pegada. */
    .tl-finder.is-filtros:has(.tl-search-form.is-sticky) {
        position: relative;
        top: auto;
    }

    /* Pestañas subrayadas como en escritorio (maqueta a 390), con alto para el dedo. */
    .tl-tab {
        min-height: 44px;
        padding-top: 10px;
    }

    .tl-search-fields {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .tl-field,
    .tl-field-charge,
    .tl-field-level,
    .tl-field-area {
        flex: none;
        gap: 6px;
    }

    .tl-search-form.form-content.lite-form-content .select2-container--default .select2-selection--multiple,
    .tl-search-form.form-content.lite-form-content .multi-facet .select2-container--default .select2-selection--multiple,
    .tl-search-form.form-content .select2-container--default .select2-selection--single {
        height: 50px !important;
        min-height: 50px !important;
    }

    .tl-search-form.form-content.lite-form-content .multi-facet .select2-container--default .select2-selection--multiple .select2-selection__rendered,
    .tl-search-form.form-content.lite-form-content .multi-facet .select2-container--default .select2-search--inline .select2-search__field {
        height: 48px !important;
        line-height: 48px;
    }

    .tl-search-form.form-content.lite-form-content .multi-facet .select2-container--default .select2-selection--multiple .select2-selection__choice,
    .tl-search-form.form-content .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 48px;
    }

    .tl-search-form.form-content .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 48px;
    }

    .tl-search-form.form-content.lite-form-content .tl-field-charge.multi-facet .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        padding: 0 14px;
    }

    .tl-search-form.form-content.lite-form-content .tl-field-charge.multi-facet .select2-container--default .select2-search--inline .select2-search__field,
    .tl-search-form.form-content.lite-form-content .tl-field-charge.multi-facet .select2-container--default .select2-search--inline .select2-search__field::placeholder {
        font-size: 16px;
    }

    .tl-search-form .tl-search-note {
        margin-top: 12px;
        font-size: 13px;
    }

    .tl-filtered .applied-filters .clear-filters {
        margin-left: 0;
    }




    .tl-footer {
        margin-top: 56px;
        flex-direction: column;
        gap: 4px;
    }
}