/* Matching LabLink: el compositor de la pestaña «Describir el cargo» (Match/includes/_composer.html.twig). Medidas del
   video a la escala de lablink-landing.css (--tl-scale en espacios, --tl-type-scale en texto) y colores de su paleta
   (tokens --tl-*, que esa hoja define y toda página LabLink carga): tinta para actuar y rojo oscuro solo para los
   errores. */
.tl-cmp {
    --cmp-muted: var(--tl-muted);
    --cmp-border: var(--tl-field-border);
    --cmp-placeholder: var(--tl-muted);
    display: flex;
    flex-direction: column;
    gap: calc(12px * var(--tl-scale, 1));
    font-family: 'Roboto', sans-serif;
    color: var(--tl-ink);
}
.tl-cmp *, .tl-cmp *::before, .tl-cmp *::after { box-sizing: border-box; }
.tl-cmp [hidden] { display: none !important; }

/* Label, campo, errores y pie. */
.tl-cmp-form { display: flex; flex-direction: column; gap: calc(8px * var(--tl-scale, 1)); margin: 0; }
.tl-cmp-label { margin: 0; font-size: max(12px, calc(15px * var(--tl-type-scale, 1))); font-weight: 500; line-height: 1.3; color: var(--tl-ink); }
.tl-cmp-field {
    display: block;
    width: 100%;
    height: calc(118px * var(--tl-scale, 1));
    min-height: 84px;
    margin: 0;
    padding: calc(13px * var(--tl-scale, 1)) calc(16px * var(--tl-scale, 1));
    border: 1px solid var(--cmp-border);
    border-radius: calc(10px * var(--tl-scale, 1));
    background: #fff;
    font-family: inherit;
    font-size: max(13px, calc(15px * var(--tl-type-scale, 1)));
    line-height: 1.55;
    color: var(--tl-ink);
    resize: vertical;
}
.tl-cmp-field::placeholder { color: var(--cmp-placeholder); opacity: 1; }
.tl-cmp-field:focus { outline: 2px solid var(--tl-focus); outline-offset: 2px; border-color: var(--tl-ink); }
.tl-cmp-form.is-invalid .tl-cmp-field { border-color: var(--tl-red-dark); box-shadow: 0 0 0 1px var(--tl-red-dark); }
.tl-cmp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: calc(4px * var(--tl-scale, 1)); }
.tl-cmp-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 16px; }
.tl-md-note { display: inline-flex; align-items: center; gap: 6px; font-size: max(12px, calc(13px * var(--tl-type-scale, 1))); line-height: 1.4; color: var(--cmp-muted); }
.tl-md-note svg { flex: 0 0 auto; }

/* «Buscar perfiles»: mismo botón que «Buscar talento» de la pestaña Filtros. */
.tl-md-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: calc(56px * var(--tl-scale, 1));
    min-height: 40px;
    padding: 0 calc(28px * var(--tl-scale, 1));
    border: 0;
    border-radius: calc(10px * var(--tl-scale, 1));
    background: var(--tl-ink);
    font-family: inherit;
    font-size: max(12px, calc(17px * var(--tl-type-scale, 1)));
    font-weight: 500;
    color: #fff;
    cursor: pointer;
}
.tl-md-btn:hover { background: var(--tl-ink-dark); }
.tl-md-btn:focus:not(:focus-visible) { outline: none; }
.tl-md-btn:focus-visible { outline: 2px solid var(--tl-focus); outline-offset: 2px; }
/* Sin texto se ve apagado, como en el canvas, pero sigue enfocable: al pulsarlo dice qué falta. */
.tl-md-btn[aria-disabled="true"], .tl-md-btn[aria-disabled="true"]:hover { background: var(--tl-neutral-bg); color: var(--tl-neutral); cursor: not-allowed; }

.tl-md-error { margin: 0; font-size: max(12px, calc(14px * var(--tl-type-scale, 1))); line-height: 1.45; color: var(--tl-red-dark); }

/* «Borrar» dentro del campo, arriba a la derecha (patrón de Google Translate): botón fantasma con × y texto. El campo
   deja libre esa columna para que el texto no pase por debajo. */
.tl-md-field { position: relative; }
.tl-md-field .tl-cmp-field { padding-right: calc(16px * var(--tl-scale, 1) + 84px); }
.tl-md-clear {
    position: absolute;
    top: calc(8px * var(--tl-scale, 1));
    right: calc(8px * var(--tl-scale, 1));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: max(12px, calc(13px * var(--tl-type-scale, 1)));
    line-height: 1;
    color: var(--cmp-muted);
    cursor: pointer;
}
.tl-md-clear:hover { color: var(--tl-ink); }
.tl-md-clear:focus-visible { outline: 2px solid var(--tl-focus); outline-offset: 2px; }
.tl-md-clear svg { flex: 0 0 auto; }

/* «Deshacer» tras Borrar o Quitar (patrón de Gmail): una línea chica bajo el campo que se va sola. is-quiet: el texto
   aún no entra (el JS lo escribe un cuadro después, para que se anuncie). */
.tl-md-undo { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0; font-size: max(12px, calc(13px * var(--tl-type-scale, 1))); line-height: 1.4; color: var(--cmp-muted); }
.tl-md-undo.is-quiet { opacity: 0; }
.tl-md-undo__btn { min-height: 32px; padding: 0 2px; border: 0; background: transparent; font-family: inherit; font-size: inherit; font-weight: 500; color: var(--tl-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tl-md-undo__btn:hover { color: var(--tl-ink-dark); }
.tl-md-undo__btn:focus-visible { outline: 2px solid var(--tl-focus); outline-offset: 2px; border-radius: 4px; }

/* El aviso de IA caída sobre el campo, en una fila dentro de la tarjeta: ícono, título y texto, y «Reintentar». */
.tl-cmp-ai .tl-match-state { min-height: 0; padding: calc(14px * var(--tl-scale, 1)) 16px; }
.tl-cmp-ai .tl-match-state-center {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icono titulo accion" "icono texto accion";
    align-items: center;
    gap: 2px 14px;
    text-align: left;
}
.tl-cmp-ai .tl-match-state-icon { grid-area: icono; width: 40px; height: 40px; }
.tl-cmp-ai .tl-match-state-title { grid-area: titulo; font-size: max(14px, calc(16px * var(--tl-type-scale, 1))); }
.tl-cmp-ai .tl-match-state-body { grid-area: texto; max-width: none; }
.tl-cmp-ai .tl-match-state-actions { grid-area: accion; margin: 0; }

/* «Tu última búsqueda» sobre el campo (patrón búsqueda reciente): enlace a Resultados o botón para retomar el borrador. */
.tl-md-recent { display: flex; align-items: center; gap: 12px; margin: 0; padding: calc(10px * var(--tl-scale, 1)) calc(16px * var(--tl-scale, 1)); border: 1px solid var(--tl-line); border-radius: calc(14px * var(--tl-scale, 1)); background: #fff; text-decoration: none; color: inherit; }
.tl-md-recent:hover { border-color: var(--tl-ink); color: inherit; text-decoration: none; }
.tl-md-recent:focus-visible { outline: 2px solid var(--tl-focus); outline-offset: 2px; }
button.tl-md-recent { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.tl-md-recent__icon { flex: 0 0 auto; color: var(--cmp-muted); display: flex; }
/* Una sola línea en escritorio: si el título es largo, se corta con "…" y la etiqueta y la meta quedan enteras. */
.tl-md-recent__body { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.tl-md-recent__label { flex: 0 0 auto; font-size: max(12px, calc(13px * var(--tl-type-scale, 1))); white-space: nowrap; color: var(--cmp-muted); }
.tl-md-recent__title { flex: 0 1 auto; min-width: 0; max-width: 100%; font-size: max(13px, calc(15px * var(--tl-type-scale, 1))); font-weight: 500; color: var(--tl-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-md-recent__meta { flex: 0 0 auto; font-size: max(12px, calc(13px * var(--tl-type-scale, 1))); white-space: nowrap; color: var(--cmp-muted); }
/* En escritorio la fecha sigue al título en la misma línea, separada por un punto; en el celular va en su línea. */
.tl-md-recent__meta::before { content: '· '; }
.tl-md-recent__go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: max(13px, calc(15px * var(--tl-type-scale, 1))); font-weight: 500; color: var(--tl-ink); }
/* Cada fila va en un envoltorio con «Quitar» al lado (patrón de las búsquedas recientes): la fila crece y la × es un
   círculo fuera del enlace. El hidden va en el envoltorio y lo oculta la regla [hidden] de .tl-cmp. */
.tl-md-recent-wrap { display: flex; align-items: center; gap: 8px; }
.tl-md-recent-wrap > .tl-md-recent { flex: 1 1 auto; min-width: 0; }
.tl-md-recent__remove { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--tl-bg); color: var(--tl-ink); cursor: pointer; }
.tl-md-recent__remove:hover { background: var(--tl-info-bg); }
.tl-md-recent__remove:focus-visible { outline: 2px solid var(--tl-focus); outline-offset: 2px; }

@media (max-width: 767.98px) {
    .tl-cmp-field { height: 132px; }
    /* U18: «Buscar perfiles» queda pegado al borde inferior de la pantalla mientras el formulario está a la vista. El
       pie se disuelve (display: contents) para que solo la fila del botón sea sticky, dentro del formulario: no sale de
       la tarjeta ni tapa nada fuera de ella, y la nota de reserva queda en su lugar. */
    .tl-cmp-foot { display: contents; }
    .tl-cmp-actions {
        position: sticky;
        bottom: 0;
        z-index: 1;
        flex-direction: column-reverse;
        align-items: stretch;
        padding: 12px 0;
        border-top: 1px solid var(--tl-line);
        background: #fff;
    }
    .tl-md-btn { width: 100%; height: 52px; }
    .tl-cmp-ai .tl-match-state-center { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icono titulo" "texto texto" "accion accion"; gap: 8px 12px; }
    .tl-cmp-ai .tl-match-state-actions .tl-match-state-btn { width: 100%; }
}
@media (max-width: 600px) {
    /* En el celular «Borrar» queda solo con la × y el texto del campo no pierde ancho; el nombre lo da su aria-label. */
    .tl-md-field .tl-cmp-field { padding-right: 48px; }
    .tl-md-clear { width: 36px; padding: 0; justify-content: center; }
    .tl-md-clear__text { display: none; }
    .tl-md-recent { flex-wrap: wrap; align-items: flex-start; }
    .tl-md-recent__icon { padding-top: 2px; }
    .tl-md-recent__body { flex-basis: calc(100% - 30px); flex-direction: column; align-items: stretch; gap: 2px; }
    .tl-md-recent__meta { white-space: normal; }
    .tl-md-recent__meta::before { content: none; }
    .tl-md-recent__go { flex-basis: 100%; padding-left: 30px; }
}