/* Portal de empleo — estética de la casa (paleta de docs/GUIA-ESTETICA.md) con
   chasis propio, como atencion/ y booking/. Prefijo lab- en todo. */
* { box-sizing: border-box; }
/* La banda de la cabecera se sale del ancho con `calc(50% - 50vw)`, y `100vw`
   CUENTA la barra de scroll vertical: en un navegador con barras clásicas
   (Windows) la banda medía ~15 px más que la ventana y aparecía una barra de
   scroll HORIZONTAL en todo el portal. `clip` recorta ese sobrante sin crear
   un contenedor de scroll, así que la columna pegajosa del formulario de la
   oferta sigue funcionando (con `overflow: hidden` dejaría de pegarse). */
html { overflow-x: clip; }
/* El pie va ANCLADO abajo (propuesta A): una página corta —dos ofertas— es una
   página corta, pero el pie flotando a media pantalla se leía como «sin
   terminar». Body en columna flex: .lab-wrap crece y lleva width:100% (sin él
   un hijo de un flex en columna mide lo que mide su contenido). */
body { margin: 0; background: #F5F6F8; color: #1C2634; font-family: 'Outfit', system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; }
a { color: #2E86AB; }
/* Barra superior y pie: los MISMOS que el portal de Atención al cliente
   (atencion/assets/atencion.css, .atcp-topbar / .atcp-pie), con este prefijo. */
.lab-topbar { background: #fff; border-bottom: 1px solid #E8EBEE; padding: 10px 0; position: sticky; top: 0; z-index: 100; }
.lab-topbar-in { max-width: 1140px; margin: 0 auto; padding: 0 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lab-logo { display: flex; align-items: center; gap: 10px; color: #1C2634; font-weight: 700; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.lab-marca { font-weight: 500; color: #1C2634; }
.lab-marca strong { font-weight: 700; color: #1C2634; }
.lab-topbar-sec { margin-left: 4px; padding-left: 14px; border-left: 1px solid #E8EBEE; color: #4A5866; font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
@media (max-width: 560px) { .lab-topbar-sec { display: none; } .lab-logo { font-size: 15px; } }
.lab-wrap { max-width: 1060px; width: 100%; margin: 0 auto; padding: 24px 16px 40px; flex: 1; }
/* Portada: rejilla de dos áreas arriba (título · reenvío) y las ofertas a todo
   el ancho; en móvil el reenvío BAJA debajo de las ofertas, para que la
   primera pantalla sea título + oferta. */
.lab-portada { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 40px; align-items: start; }
.lab-hero { grid-column: 1; margin-bottom: 14px; }
.lab-abiertos { font-size: 1.05rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.lab-portada-hero { margin-top: 6px; } .lab-portada-hero .lab-reenvio { padding-top: 0; } .lab-portada-hero .lab-hero { margin-bottom: 8px; }
.lab-hero h1 { font-size: 2rem; letter-spacing: -.02em; font-weight: 600; margin: 0 0 6px; } .lab-hero p { margin: 0; color: #4A5866; max-width: 560px; font-size: 1rem; }
.lab-portada-avisos { grid-column: 1 / -1; } .lab-portada-avisos:empty { display: none; }
.lab-grid-ofertas { grid-column: 1 / -1; }
.lab-reenvio { grid-column: 2; justify-self: end; padding-top: 8px; }
.lab-reenvio-tit { font: inherit; font-size: .9rem; color: #1F6A89; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lab-reenvio-tit:hover { color: #2E86AB; }
.lab-reenvio-tit:focus-visible { outline: 2px solid #2E86AB; outline-offset: 3px; border-radius: 4px; }
/* Modal del reenvío: <dialog> nativo con el fondo de la casa. */
.lab-modal { border: 0; border-radius: 16px; padding: 22px 24px 24px; width: min(440px, calc(100vw - 32px)); background: #fff; color: #1C2634; box-shadow: 0 24px 60px -20px rgba(16,30,46,.45); }
.lab-modal::backdrop { background: rgba(16,30,46,.55); backdrop-filter: blur(4px); }
.lab-modal-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lab-modal-cab h2 { font-size: 1.15rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.lab-modal-x { font: inherit; background: none; border: 0; color: #4A5866; cursor: pointer; padding: 2px 6px; border-radius: 8px; line-height: 1; }
.lab-modal-x:hover { background: #EEF1F4; color: #1C2634; } .lab-modal-x:focus-visible { outline: 2px solid #2E86AB; outline-offset: 2px; }
.lab-modal .lab-reenvio-ayuda { margin: 8px 0 16px; }
/* El rótulo del botón de enviar sale ARRIBA dentro del modal: colgando por
   debajo (como en la portada) se salía del recuadro y el <dialog>, que lleva
   overflow:auto de fábrica, sacaba una barra de scroll por 5 px. */
.lab-modal .lab-tip::after { top: auto; bottom: calc(100% + 8px); }
.lab-modal-pie { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
.lab-test-falta { margin: 0 auto 0 0; color: #B52D46; font-size: .9rem; font-weight: 500; }
.lab-acciones .lab-test-falta { flex: 1 1 100%; }
.lab-reenvio-form { margin: 0; }
.lab-reenvio-fila { display: flex; gap: 6px; }
.lab-reenvio-fila input { flex: 1; min-width: 0; font: inherit; font-size: .9rem; padding: 8px 12px; border: 1px solid #D5DBE1; border-radius: 10px; background: #fff; color: #1C2634; }
.lab-reenvio-fila input:focus { outline: none; border-color: #2E86AB; box-shadow: 0 0 0 3px rgba(46,134,171,.15); }
.lab-reenvio-ayuda { margin: 8px 0 0; font-size: .82rem; color: #4A5866; line-height: 1.45; }
@media (max-width: 760px) {
    .lab-portada { grid-template-columns: 1fr; }
    .lab-hero, .lab-reenvio, .lab-grid-ofertas, .lab-portada-avisos { grid-column: 1; }
    .lab-reenvio { order: 3; justify-self: start; margin-top: 8px; }
    .lab-grid-ofertas { order: 2; } .lab-portada-avisos { order: 1; }
}
.lab-btn-ico { width: 40px; height: 40px; flex: none; border-radius: 10px; border: 1px solid #2E86AB; background: #fff; color: #2E86AB; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; }
.lab-btn-ico:hover { background: #2E86AB; color: #fff; } .lab-btn-ico[disabled] { opacity: .55; cursor: default; }
.lab-btn-ico:focus-visible { outline: 2px solid #2E86AB; outline-offset: 2px; }
.lab-tip { position: relative; }
.lab-tip::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); right: 0; background: #1C2634; color: #fff; font-size: .78rem; font-weight: 500; padding: 6px 10px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .12s, transform .12s; z-index: 5; }
.lab-tip:hover::after, .lab-tip:focus-visible::after { opacity: 1; transform: none; }
.lab-card { background: #fff; border: 1px solid #E8EBEE; border-radius: 14px; padding: 20px 22px; margin-bottom: 16px; }
.lab-card h1 { font-size: 1.5rem; margin: 0 0 12px; } .lab-card h2 { font-size: 1.15rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } .lab-card h2 i { color: #2E86AB; }
.lab-card h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #4A5866; margin: 18px 0 6px; }
.lab-card h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #2E86AB; margin: 18px 0 8px; }
/* Tarjetas de oferta (propuesta «premium» sobre fondo claro, 13/09/2026):
   foto o vídeo arriba en 16:9, cuerpo con puesto, lugar, carnet y sueldo, y
   «Ver la oferta» al pie. El CUERPO entero es el enlace (el vídeo va fuera del
   enlace: un iframe dentro de un <a> se come los clics). Dos columnas en
   escritorio, una en móvil. Plazas, inglés y test viven en la ficha: no
   cambian si alguien pulsa, cambian si se inscribe. */
.lab-grid-ofertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 720px) { .lab-grid-ofertas { grid-template-columns: 1fr; } }
/* Tarjeta HORIZONTAL: la foto es cuadrada y va al lado, no arriba a lo ancho.
   Puesta arriba había que recortarla a 16:9 —justo lo que pedimos que no pase—
   y un cuadrado de 500 px se comía la portada entera con dos ofertas. */
.lab-tarjeta { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,30,46,.06), 0 8px 24px -16px rgba(16,30,46,.25); display: flex; align-items: stretch; color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.lab-tarjeta:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16,30,46,.06), 0 16px 32px -16px rgba(16,30,46,.3); }
.lab-tarjeta:focus-visible { outline: 3px solid rgba(46,134,171,.55); outline-offset: 3px; }
.lab-tarjeta .lab-media { border-radius: 0; flex: none; width: 190px; align-self: stretch; }
.lab-tarjeta .lab-media-foto { aspect-ratio: auto; }
@media (max-width: 520px) { .lab-tarjeta .lab-media { width: 116px; } }
.lab-tarjeta-cuerpo { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; flex: 1; min-width: 0; }
.lab-tarjeta h2 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; }
.lab-tarjeta:hover h2 { color: #1F6A89; }
/* Jerarquía = orden de decisión: puesto, sueldo (Outfit, peso medio), carnet en gris. */
.lab-sal { font-size: .98rem; font-weight: 500; color: #1C2634; }
/* En la TARJETA manda el carnet (decisión del propietario, 13/09/2026): va
   arriba con el peso, y el sueldo debajo en gris. */
.lab-tarjeta-carnet { font-size: .98rem; font-weight: 500; color: #1C2634; }
.lab-tarjeta .lab-sal { font-size: .9rem; font-weight: 400; color: #4A5866; }
.lab-tarjeta-meta { font-size: .84rem; color: #4A5866; }
.lab-tarjeta-cta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 10px; margin-top: 12px; border-top: 1px solid #EEF1F4; color: #1F6A89; font-weight: 600; min-height: 40px; }
.lab-media { border-radius: 12px; overflow: hidden; background: #EEF1F4; }
/* La foto se pide CUADRADA, así que su hueco es cuadrado en todas partes: si
   aquí fuera 16:9 recortaríamos justo lo que hemos pedido que nos manden. */
.lab-media-foto { aspect-ratio: 1 / 1; } .lab-media-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lab-media-video { aspect-ratio: 16 / 9; } .lab-media-video iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Ficha de la oferta — CABECERA integrada (propuesta «premium»): banda
   oscura a todo el ancho con el vídeo o la foto dentro y el título sobre ella.
   .lab-wrap la envuelve con márgenes, así que la banda se sale de él con
   márgenes negativos y vuelve a centrar su contenido en .lab-hero-in. */
.lab-hero-det { position: relative; background: #1C2634; color: #fff; margin: -24px calc(50% - 50vw) 24px; overflow: hidden; }
.lab-hero-in { position: relative; max-width: 1060px; margin: 0 auto; padding: 18px 16px 24px; }
.lab-volver-hero { color: #C8D2DB; margin-bottom: 14px; } .lab-volver-hero:hover { color: #fff; }
/* Vídeo de FONDO: cubre la banda entera (laboral.js le da el tamaño de 16:9
   que la cubre y lo centra), sin recibir clics —no es un reproductor— y por
   debajo del degradado del título. La portada queda detrás mientras carga. */
.lab-hero-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border: 0; pointer-events: none; background: transparent; opacity: 0; transition: opacity 1.1s ease; }
.lab-hero-bg.on { opacity: 1; }
.lab-hero-video .lab-hero-img { display: none; }
@media (prefers-reduced-motion: reduce) { .lab-hero-video .lab-hero-img { display: block; } }
/* OPACO a propósito: con transparencia la portada se transparentaba detrás del
   vídeo (se veían las dos a la vez). El vídeo tapa la portada en cuanto
   arranca; el oscurecido para leer el título lo pone solo el degradado. */
.lab-hero-video { background: #0F1A26; }
@media (prefers-reduced-motion: reduce) { .lab-hero-bg { display: none; } }
.lab-hero-txt h1 { font-size: 2rem; letter-spacing: -.02em; font-weight: 600; margin: 0 0 8px; color: #fff; }
/* Todo en Outfit: la cifra en mono junto al resto en Outfit era un mix que afeaba la cabecera. */
.lab-meta-hero { font-size: .95rem; color: #C8D2DB; margin: 0; } .lab-meta-hero span { color: #C8D2DB; } .lab-meta-hero b { color: #fff; } .lab-meta-hero .lab-sal { color: #DDE6EC; font-family: inherit; font-size: inherit; font-weight: 400; }
/* Foto: la banda ES la foto (21:9, como en la propuesta) y el título va
   superpuesto abajo sobre un degradado, para que se lea sobre cualquier imagen. */
.lab-hero-foto { height: clamp(280px, 37vw, 470px); }
.lab-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; display: block; }
.lab-hero-foto .lab-hero-in { position: static; }
.lab-hero-foto .lab-volver-hero { position: absolute; top: 16px; opacity: .85; left: max(16px, calc(50% - 514px)); z-index: 1; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.lab-hero-foto .lab-hero-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 16px 24px; background: linear-gradient(transparent, rgba(16,30,46,.92)); }
.lab-hero-foto .lab-hero-txt > * { max-width: 1028px; margin-left: auto; margin-right: auto; }
.lab-hero-foto .lab-hero-txt h1 { margin-bottom: 8px; }
/* Portada: la frase bajo el título, en la banda. */
.lab-hero-portada .lab-hero-p { margin: 8px auto 0; color: #DDE6EC; font-size: 1.02rem; } .lab-hero-portada .lab-hero-p span { display: block; max-width: 52ch; }
.lab-hero-portada .lab-hero-txt { padding-bottom: 28px; }
.lab-hero-portada { height: clamp(300px, 38vw, 480px); }
/* EL MÓVIL NO REPRODUCE EL VÍDEO DE FONDO (13/09/2026). El teléfono no deja
   arrancar solo un vídeo a pantalla partida, y con el ahorro de batería puesto
   ni lo intenta: la banda se quedaba negra. Así que en el teléfono la cabecera
   ES la imagen del vídeo (la misma que ya sacamos de Vimeo o de YouTube) y el
   vídeo se OFRECE con la pastilla de abajo, que lo abre a pantalla completa y
   con sonido. laboral.js además no le pone dirección al iframe de fondo en
   estos anchos, así que tampoco se descarga. */
.lab-hero-play { display: none; }
@media (max-width: 760px) {
    .lab-hero-det { margin-left: -16px; margin-right: -16px; }
    .lab-hero-portada { height: clamp(260px, 72vw, 360px); } .lab-hero-portada .lab-hero-p { font-size: .95rem; }
    .lab-hero-txt h1 { font-size: 1.6rem; }
    .lab-hero-foto { height: clamp(240px, 70vw, 340px); }
    .lab-hero-video .lab-hero-img { display: block; }
    .lab-hero-video .lab-hero-bg { display: none; }
    .lab-hero-det .lab-hero-play { display: inline-flex; }
}
/* Pastilla «Ver el vídeo»: arriba a la derecha de la banda, para no taparle el
   título ni el botón de volver, y con fondo propio para que se lea sobre
   cualquier fotograma. */
.lab-hero-det .lab-hero-play { position: absolute; top: 14px; right: 14px; z-index: 2; align-items: center; gap: 7px;
    font: inherit; font-size: .82rem; font-weight: 600; color: #fff; cursor: pointer;
    background: rgba(16,30,46,.58); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 6px 13px;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lab-hero-det .lab-hero-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lab-hero-det .lab-hero-play .fa-play { font-size: .72rem; }
/* Reproduciendo EN LA BANDA (solo en el móvil, que es donde existe la
   pastilla): la banda pasa a 16:9 con una franja arriba para la pastilla de
   cerrar —que no puede caer sobre los mandos del reproductor—, y el título,
   la imagen y el «Ofertas» se retiran mientras dura. */
.lab-hero-det.lab-hero-playing { height: auto; background: #000; padding-top: 52px; }
.lab-hero-playing::before { content: ''; display: block; width: 100%; aspect-ratio: 16 / 9; }
.lab-hero-playing .lab-hero-img, .lab-hero-playing .lab-hero-txt, .lab-hero-playing .lab-volver-hero, .lab-hero-playing .lab-hero-in { display: none; }
.lab-hero-inline { position: absolute; left: 0; right: 0; bottom: 0; top: 52px; width: 100%; height: calc(100% - 52px); border: 0; background: #000; }
.lab-hero-playing .lab-hero-play { top: 9px; }
/* Mandos de la casa sobre el vídeo sin interfaz: la capa ocupa el vídeo y
   TOCARLA pausa o reanuda; el play solo se dibuja mientras está parado (o si
   el teléfono no lo arrancó solo), grande y sin tapar la imagen. */
.lab-hero-tap { position: absolute; left: 0; right: 0; bottom: 0; top: 52px; width: 100%; background: transparent; border: 0; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; }
.lab-hero-tap i { display: none; width: 68px; height: 68px; border-radius: 999px; background: rgba(16,30,46,.62); border: 1px solid rgba(255,255,255,.34); align-items: center; justify-content: center; font-size: 1.5rem; padding-left: 5px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lab-hero-pausado .lab-hero-tap i { display: inline-flex; }
.lab-hero-tap:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.lab-det { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(340px, 1fr); gap: 24px; align-items: start; }
.lab-det-txt h3:first-child { margin-top: 0; }
.lab-det-txt h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #4A5866; margin: 22px 0 6px; }
.lab-det-txt .lab-aviso { margin-top: 18px; }
.lab-det-form { position: sticky; top: 76px; margin-bottom: 0; }
.lab-form-intro { margin: -6px 0 12px; }
.lab-cta-movil { display: none; }
@media (max-width: 900px) {
    /* minmax(0, 1fr) y no `1fr` a secas: en una rejilla, `1fr` es `minmax(auto,
       1fr)`, así que un hijo que no sabe encogerse (un campo del formulario con
       su texto de ayuda) ensancha la COLUMNA ENTERA y con ella la página. En el
       teléfono eso dejaba el texto de la oferta cortado por la derecha: la
       página medía 433 px en una pantalla de 390 (13/09/2026). */
    .lab-det { grid-template-columns: minmax(0, 1fr); }
    .lab-det-form { position: static; }
    .lab-cta-movil { display: block; position: sticky; bottom: 0; z-index: 5; padding: 12px 0 14px; margin: 8px -16px -8px; padding-inline: 16px; background: linear-gradient(#F5F6F800, #F5F6F8 35%); }
    .lab-cta-movil .lab-btn { width: 100%; }
    .lab-cta-movil.oculto { display: none; }
}
.lab-oferta-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.lab-oferta-cab h2, .lab-oferta-cab h1 { margin: 0; } .lab-oferta-cab h2 a { color: #1C2634; text-decoration: none; } .lab-oferta-cab h2 a:hover { color: #2E86AB; }
.lab-chip { display: inline-flex; border-radius: 99px; padding: 3px 11px; font-size: .74rem; font-weight: 600; background: #E6F1F6; color: #1F6A89; white-space: nowrap; }
.lab-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .84rem; color: #4A5866; margin: 8px 0; } .lab-meta i { color: #2E86AB; margin-right: 4px; }
.lab-resumen { color: #4A5866; font-size: .92rem; margin: 6px 0 12px; }
.lab-oferta-pie { display: flex; gap: 8px; flex-wrap: wrap; }
.lab-texto { font-size: .95rem; }
.lab-volver { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: .9rem; margin-bottom: 12px; }
.lab-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; padding: 9px 16px; font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; text-decoration: none; border: 1px solid transparent; }
.lab-btn-primary { background: #2E86AB; color: #fff; } .lab-btn-primary:hover { background: #1F6A89; }
.lab-btn-outline { background: #fff; color: #2E86AB; border-color: #2E86AB; } .lab-btn-outline:hover { background: #E6F1F6; }
.lab-btn-ghost { background: transparent; color: #4A5866; } .lab-btn-ghost:hover { background: #EEF1F4; }
.lab-btn-danger { background: #FBE9EC; color: #B52D46; } .lab-btn-danger:hover { background: #F6D5DB; }
.lab-btn-lg { padding: 12px 22px; font-size: 1rem; } .lab-btn[disabled] { opacity: .55; cursor: default; }
.lab-grid { display: grid; gap: 10px 14px; } .lab-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lab-ancho { grid-column: 1 / -1; }
@media (max-width: 620px) { .lab-2 { grid-template-columns: 1fr; } }
.lab-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin-bottom: 10px; }
.lab-campo > span { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: #4A5866; font-weight: 600; }
.lab-campo input, .lab-campo select, .lab-campo textarea { font: inherit; font-size: .95rem; padding: 9px 12px; border: 1px solid #D5DBE1; border-radius: 10px; background: #fff; color: #1C2634; }
.lab-campo input:focus, .lab-campo select:focus, .lab-campo textarea:focus { outline: none; border-color: #2E86AB; box-shadow: 0 0 0 3px rgba(46,134,171,.15); }
.lab-campo.mal input, .lab-campo.mal select { border-color: #B52D46; box-shadow: 0 0 0 3px rgba(181,45,70,.12); }
.lab-campo small { font-size: .78rem; color: #4A5866; }
.lab-check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; margin: 14px 0; } .lab-check input { margin-top: 4px; } .lab-check.mal { color: #B52D46; }
.lab-acciones { display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }
.lab-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lab-aviso { border-radius: 10px; padding: 10px 14px; font-size: .92rem; margin-bottom: 14px; display: flex; gap: 10px; align-items: flex-start; }
.lab-aviso-ok { background: #E4F5EB; color: #177A46; } .lab-aviso-info { background: #E6F1F6; color: #1F6A89; } .lab-aviso-err { background: #FBE9EC; color: #B52D46; }
.lab-aviso .lab-sub { color: inherit; opacity: .85; }
.lab-sub { font-size: .86rem; color: #4A5866; }
.lab-vacio { text-align: center; color: #4A5866; padding: 40px 20px; } .lab-vacio i { font-size: 2rem; color: #2E86AB; display: block; margin-bottom: 10px; }
.lab-mi { max-width: 760px; margin: 0 auto; }
/* «Cambiar» NO ocupa sitio: la pastilla «Enviado» y el botón comparten la
   misma celda (rejilla de una sola casilla), así que la fila queda alineada a
   la derecha como las demás y al pasar por encima una se cambia por la otra.
   El ancho lo fija la más ancha de las dos, para que no baile al cambiar.
   Donde no hay ratón (móvil, tableta) se enseñan LAS DOS, una al lado de la
   otra: con el intercambio al pasar por encima nadie podría cambiar su
   currículum desde el móvil. Con el teclado, el foco enseña «Cambiar». */
/* El cursor de mano va en el CONTENEDOR: en reposo el ratón cae sobre la
   pastilla, que es texto, y salía la barra de selección; y el botón, que
   está por encima, no recibe el puntero hasta que el navegador recalcula
   el hover. Con la mano en el contenedor se ve bien desde el primer píxel. */
.lab-kv-swap { display: inline-grid; justify-items: end; cursor: pointer; user-select: none; }
.lab-kv-swap > .lab-badge:not(.lab-kv-accion) { pointer-events: none; }
.lab-kv-swap > * { grid-area: 1 / 1; transition: opacity .15s ease; }
.lab-kv-swap:hover > .lab-badge:not(.lab-kv-accion), .lab-kv-swap:focus-within > .lab-badge:not(.lab-kv-accion) { opacity: 0; }
.lab-kv-accion { font: inherit; font-size: .8rem; font-weight: 600; border: 0; cursor: pointer; opacity: 0; pointer-events: none; }
.lab-kv-swap:hover .lab-kv-accion, .lab-kv-accion:focus-visible { opacity: 1; pointer-events: auto; }
.lab-kv-accion:focus-visible { outline: 2px solid #2E86AB; outline-offset: 2px; }
.lab-b-primary { background: #E6F1F6; color: #1F6A89; }
@media (hover: none) {
    .lab-kv-swap { display: inline-flex; gap: 8px; align-items: center; }
    .lab-kv-swap > * { grid-area: auto; }
    .lab-kv-accion { opacity: 1; pointer-events: auto; }
}
.lab-foto-para { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 0; } .lab-foto-para i { margin-top: 3px; color: #2E86AB; }
.lab-foto-mini { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.lab-card-cab .lab-foto-mini { width: 44px; height: 44px; }
.lab-foto-acciones { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .lab-foto-quitar { margin-top: 14px; }
/* La foto ya puesta ES el botón de sus opciones (15/09/2026): tiene que
   parecerlo sin añadir ni un texto más a la tarjeta, así que el aviso es el
   cursor, un aro al pasar por encima y el aro de foco de siempre. */
/* Cabecera de la tarjeta: el título manda y la foto se retira a la derecha,
   a su misma altura. `min-width:0` en el h1 para que un título largo se parta
   en vez de empujar la foto fuera de la tarjeta. */
.lab-card-cab { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.lab-card-cab h1 { margin: 0; min-width: 0; }
.lab-card-cab .lab-foto-btn { flex: none; }
.lab-foto-btn { display: inline-flex; align-items: center; font: inherit; color: inherit; background: none; border: 0; padding: 2px; margin: -2px; border-radius: 999px; cursor: pointer; }
.lab-foto-btn .lab-foto-mini { transition: box-shadow .15s; }
.lab-foto-btn:hover .lab-foto-mini { box-shadow: 0 0 0 3px rgba(46,134,171,.22); }
.lab-foto-btn:focus-visible { outline: 2px solid #2E86AB; outline-offset: 2px; }
.lab-modal-foto { text-align: center; }
.lab-modal-foto .lab-modal-cab { text-align: left; }
.lab-foto-grande { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 6px auto 2px; display: block; }
.lab-modal-foto .lab-foto-para { text-align: left; margin: 10px 0 16px; }
/* Las dos acciones del modal, en una fila y centradas. */
.lab-modal-foto .lab-foto-acciones { justify-content: center; gap: 10px; margin-top: 14px; }
/* Campo de fichero que se abre con su ETIQUETA: se esconde a la vista pero
   sigue enfocándose y anunciándose (nunca display:none, que además deja un
   `required` sin poder reportarse — por eso este campo tampoco lo lleva). */
.lab-visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* La etiqueta hace de botón: mismo aspecto y mismo aro de foco cuando el campo
   que abre está enfocado (el aro no puede vivir en algo invisible). */
.lab-foto-acciones label.lab-btn { cursor: pointer; }
.lab-visualmente-oculto:focus-visible + label.lab-btn { outline: 2px solid #2E86AB; outline-offset: 2px; }
.lab-cv-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
/* Un `display` de clase gana al `hidden` del navegador: sin esto el
   formulario del CV salía igualmente. */
.lab-cv-form[hidden] { display: none; }
.lab-cv-form .nff { flex: 1; min-width: 240px; }
.lab-kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed #E8EBEE; font-size: .95rem; } .lab-kv span { color: #4A5866; }
.lab-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .9em; }
.lab-estado-txt { margin: 14px 0 0; font-size: 1rem; }
.lab-badge { display: inline-flex; border-radius: 99px; padding: 3px 12px; font-size: .8rem; font-weight: 600; }
.lab-b-warn { background: #FFF4DB; color: #8A5F00; }
.lab-b-info { background: #E6F1F6; color: #1F6A89; } .lab-b-primary { background: #E6F1F6; color: #1F6A89; } .lab-b-ok { background: #E4F5EB; color: #177A46; } .lab-b-muted { background: #EEF1F4; color: #4A5866; }
.lab-inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lab-retirar { border-color: #F6D5DB; }
/* Elegir hora (opción A): tira de días con sus huecos; debajo, las horas del
   día elegido en mañana y tarde. Pensado para el móvil: la tira se desliza con
   el dedo y las horas quedan a la altura del pulgar. */
.lab-tira-nav { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 6px; }
.lab-tira-flechas { display: flex; gap: 6px; }
.lab-tira-btn { width: 30px; height: 30px; border: 1px solid #DDE3E9; border-radius: 8px; background: #fff; color: #4A5866; cursor: pointer; font-size: 1.05rem; line-height: 1; }
.lab-tira-btn:hover { border-color: #2E86AB; color: #1F6A89; }
.lab-tira-btn[disabled] { opacity: .35; cursor: default; }
.lab-tira { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.lab-dia-chip { scroll-snap-align: start; flex: 0 0 auto; min-width: 78px; border: 1px solid #DDE3E9; border-radius: 12px; padding: 8px 10px; background: #fff; cursor: pointer; text-align: center; font: inherit; color: #1C2634; transition: border-color .12s, background .12s; }
.lab-dia-chip small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #5F6E7C; font-weight: 600; }
.lab-dia-chip b { display: block; font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.lab-dia-chip em { display: block; font-style: normal; font-size: .68rem; color: #4A5866; margin-top: 2px; }
.lab-dia-chip:hover { border-color: #2E86AB; }
.lab-dia-chip[aria-selected="true"] { background: #EAF4F8; border-color: #2E86AB; color: #1F6A89; }
.lab-dia-chip[aria-selected="true"] em, .lab-dia-chip[aria-selected="true"] small { color: #1F6A89; }
.lab-dia-chip:focus-visible { outline: 2px solid #2E86AB; outline-offset: 2px; }
.lab-tramo { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #5F6E7C; font-weight: 600; margin: 10px 0 6px; }
.lab-tramo i { font-style: normal; }
.lab-horas { display: flex; flex-wrap: wrap; gap: 8px; }
.lab-hora { font: inherit; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .9rem; padding: 8px 12px; border-radius: 9px; border: 1px solid #DDE3E9; background: #fff; color: #1C2634; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.lab-hora:hover { border-color: #2E86AB; color: #1F6A89; background: #EAF4F8; }
.lab-hora.on { background: #2E86AB; color: #fff; border-color: #2E86AB; }
.lab-hora:focus-visible { outline: 2px solid #2E86AB; outline-offset: 2px; }
#labElegido b { color: #1C2634; font-weight: 600; }
.lab-q { border: 1px solid #E8EBEE; border-radius: 10px; padding: 12px 16px; margin: 0 0 12px; } .lab-q legend { padding: 0 6px; font-size: .98rem; }
.lab-op { display: flex; gap: 10px; align-items: flex-start; padding: 6px 4px; border-radius: 8px; cursor: pointer; } .lab-op:hover { background: #F8F9FB; } .lab-op input { margin-top: 4px; }
.lab-pie { text-align: center; color: #5F6E7C; font-size: 0.78rem; padding: 14px 16px 30px; }
.lab-pie strong { color: #4A5866; font-weight: 700; }
.lab-pie a { color: #5F6E7C; text-decoration: none; } .lab-pie a:hover { color: #2E86AB; text-decoration: underline; }

/* Tarjeta de la cita: el día en palabras, la hora grande y el lugar con el
   enlace al mapa. Tres datos que se leen de un vistazo desde el móvil. */
.lab-cita-grid { display: grid; grid-template-columns: 1fr auto; gap: 14px 28px; margin-top: 12px; }
.lab-cita-dato { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lab-cita-dato > span { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #5F6E7C; font-weight: 600; }
.lab-cita-dato > b { font-size: 1.08rem; font-weight: 700; color: #1C2634; overflow-wrap: anywhere; }
.lab-cita-hora { font-family: var(--lab-mono, 'JetBrains Mono', ui-monospace, monospace); font-size: 1.5rem !important; line-height: 1.1; }
.lab-cita-lugar { grid-column: 1 / -1; }
.lab-cita-mapa { align-self: flex-start; margin-top: 8px; border: 1px solid #DDE3E9; color: #1F6A89; font-weight: 600; }
.lab-cita-mapa:hover { background: #EAF4F8; }
.lab-cita + .lab-sub, .lab-cita .lab-sub { margin-top: 14px; }
@media (max-width: 560px) { .lab-cita-grid { grid-template-columns: 1fr; } }

.lab-cita-acc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.lab-inline { display: inline; margin: 0; }
.lab-btn-borde { border: 1px solid #DDE3E9; }
.lab-btn-peligro { color: #A12036; } .lab-btn-peligro:hover { background: #FBE4E8; }
.lab-b-ok { background: #E6F3EA; color: #2F7D4F; }
.lab-modal-txt { margin: 0 0 16px; font-size: 1.02rem; font-weight: 600; }
.lab-modal-confirma .lab-acciones { justify-content: flex-end; }
.lab-modal-sub { margin: -8px 0 16px; }
.lab-modal-acc { flex-wrap: wrap; }
.lab-modal-3 .lab-modal-acc { flex-direction: column-reverse; align-items: stretch; }
.lab-modal-3 .lab-modal-acc .lab-btn { justify-content: center; }