:root {
  /* Piel oscura de marca. Queda disponible (body class="marca") para páginas
     de puro escaparate, pero NO es la de trabajo: donde se lee y se escribe
     manda la piel clara de más abajo. */
  color-scheme: dark;
  --fondo: #0d0d0d;
  --superficie: #1a1a1a;
  --superficie-2: #212121;
  --texto: #f2f2f2;
  --texto-suave: #a3a3a3;
  --borde: #2f2f2f;
  --acento: #e2ba42;              /* oro de marca */
  --acento-claro: #f5d46e;
  --sobre-acento: #0d0d0d;        /* texto encima del oro */
  --acento-suave: #241f10;
  --error: #f08a8a;
  --error-suave: #2b1616;
  --exito: #4ade80;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35);
}


* { box-sizing: border-box; }

/* El atributo `hidden` del navegador vale `display: none`, pero lo pisa
   CUALQUIER clase que ponga otro `display` —un `display: flex` en una tarjeta,
   por ejemplo— porque el estilo del autor gana al del navegador. El resultado
   es un bloque marcado como oculto que se ve igual. Esta línea lo arregla para
   todo el sitio de una vez, en vez de acordarse caso por caso. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.contenedor { max-width: 860px; margin: 0 auto; padding: 0 20px; }
main.ancho { max-width: 1240px; }
.cabecera { background: var(--superficie); border-bottom: 1px solid var(--borde); }
.cabecera-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 62px; padding: 10px 20px; flex-wrap: wrap;
}
.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca img { height: 40px; width: auto; display: block; }
@media (max-width: 560px) {
  .marca img { height: 32px; }
  .nav-admin { gap: 12px; font-size: .82rem; }
  main.contenedor { padding-top: 22px; }
  h1 { font-size: 1.45rem; }
}

main.contenedor { padding-top: 32px; padding-bottom: 56px; }

h1 { font-size: 1.75rem; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 8px; }
h2 { font-size: 1.15rem; margin: 28px 0 10px; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin: 20px 0 6px; }
.entradilla { color: var(--texto-suave); margin: 0 0 28px; }
a { color: var(--acento); }

/* ---------- Formulario ---------- */
fieldset {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px 22px 24px;
  margin: 0 0 18px;
  box-shadow: var(--sombra);
}
legend { font-weight: 650; padding: 0 8px; font-size: .95rem; letter-spacing: .01em; }

.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .fila { grid-template-columns: 1fr; } }

.campo { margin-bottom: 16px; }
label, .etiqueta { display: block; font-weight: 550; font-size: .92rem; margin-bottom: 6px; }
.req { color: var(--error); }

input[type=text], input[type=email], input[type=tel], input[type=search],
input[type=date], input[type=number],
input:not([type]), select, textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--texto);
  background: #121212;
  border: 1px solid var(--borde);
  border-radius: 8px;
}
input::placeholder, textarea::placeholder { color: #6b6b6b; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}
input[type=file] { width: 100%; font-size: .9rem; }
textarea { resize: vertical; }

.opciones { display: flex; flex-wrap: wrap; gap: 8px 18px; }
/* Dos columnas siempre: se ve casi todo desde el movil sin hacer scroll. */
.opciones-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
/* En pantallas muy estrechas dos columnas parten las etiquetas: una sola. */
@media (max-width: 359px) { .opciones-grid { grid-template-columns: 1fr; } }
.opcion { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; margin: 0; cursor: pointer; }
.opcion input { margin-top: 4px; flex: none; width: 17px; height: 17px; accent-color: var(--acento); }

.ayuda { color: var(--texto-suave); font-size: .85rem; margin: 4px 0 8px; font-weight: 400; }
.error { color: var(--error); font-size: .85rem; margin: 6px 0 0; font-weight: 500; }

.aviso { padding: 12px 16px; border-radius: var(--radio); margin-bottom: 20px; font-size: .92rem; }
.aviso-error { background: var(--error-suave); color: var(--error); border: 1px solid currentColor; }

.oculto { position: absolute; left: -9999px; }

/* ---------- Bloque RGPD ---------- */
.rgpd .caja-info {
  background: var(--acento-suave);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 18px;
  font-size: .875rem;
}
.rgpd .caja-info h3 { margin-top: 0; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.rgpd dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; }
.rgpd dt { font-weight: 650; }
.rgpd dd { margin: 0; }
@media (max-width: 620px) { .rgpd dl { grid-template-columns: 1fr; } .rgpd dd { margin-bottom: 8px; } }
.consentimiento { margin: 12px 0; font-size: .92rem; }
.consentimiento em { color: var(--texto-suave); font-style: normal; }

/* ---------- Botones ---------- */
.boton {
  display: inline-block;
  background: var(--acento);
  color: var(--sobre-acento);
  border: 0;
  border-radius: 8px;
  padding: 12px 22px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.boton:hover { filter: brightness(1.08); }
.boton-secundario { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); }
.boton-peligro { background: #b3261e; color: #fff; }
.enlace-suave { color: var(--texto-suave); font-size: .9rem; }

/* ---------- Gracias ---------- */
.tarjeta-exito {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--exito);
  border-radius: var(--radio);
  padding: 28px 30px;
  box-shadow: var(--sombra);
}

/* ---------- Admin ---------- */
.nav-admin { display: flex; align-items: center; gap: 16px; font-size: .9rem; }
.usuario { color: var(--texto-suave); }
.admin-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.contador { background: var(--acento-suave); color: var(--acento); border-radius: 20px; padding: 2px 12px; font-size: .9rem; vertical-align: middle; }

.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.filtros input, .filtros select { width: auto; min-width: 160px; flex: 1 1 160px; }

.tabla-scroll { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla th { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--borde); color: var(--texto-suave); font-weight: 600; white-space: nowrap; }
.tabla td { padding: 12px 14px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr.caduca { background: var(--error-suave); }
/* ---------- Bitácora ---------- */
.tarjeta-ancha { grid-column: 1 / -1; }
.fila-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 700px) { .fila-3 { grid-template-columns: 1fr; } }
.form-gestion { background: var(--acento-suave); border-radius: 8px; padding: 16px 18px 18px; }
.form-gestion .campo { margin-bottom: 12px; }

.bitacora { list-style: none; margin: 0; padding: 0; }
.bitacora li { position: relative; padding: 10px 0 10px 22px; border-bottom: 1px solid var(--borde); }
.bitacora li:last-child { border-bottom: 0; }
.bitacora li::before {
  content: ""; position: absolute; left: 4px; top: 17px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--borde);
}
.bitacora li.gestion::before { background: var(--acento); }
.bit-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: .9rem; }
.bit-detalle { margin: 4px 0 0; font-size: .88rem; color: var(--texto-suave); white-space: pre-wrap; }
.chip-resultado { background: var(--borde); color: var(--texto); }

.tabla-mini { font-size: .82rem; margin-top: 6px; }
.tabla-mini td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--borde); }
.nowrap { white-space: nowrap; }
.vacio { color: var(--texto-suave); padding: 40px; text-align: center; background: var(--superficie); border: 1px dashed var(--borde); border-radius: var(--radio); }

.chip { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: .78rem; font-weight: 600; background: var(--acento-suave); color: var(--acento); white-space: nowrap; }
.chip-contratada { background: #10381f; color: #6ee7a0; }
.chip-descartada { background: #242424; color: #8a8a8a; }

.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .ficha { grid-template-columns: 1fr; } }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px 20px; box-shadow: var(--sombra); }
.tarjeta h2 { margin-top: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: .9rem; }
.datos dt { color: var(--texto-suave); }
.datos dd { margin: 0; }
.cita { border-left: 3px solid var(--borde); padding-left: 12px; color: var(--texto-suave); font-size: .9rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
hr { border: 0; border-top: 1px solid var(--borde); margin: 22px 0; }

/* ---------- Legal ---------- */
.legal { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 28px 32px; box-shadow: var(--sombra); }
.legal table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 12px 0; }
.legal th, .legal td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.legal th { width: 34%; color: var(--texto-suave); font-weight: 600; }
.legal li { margin-bottom: 6px; }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--borde); background: var(--superficie); padding: 20px 0; color: var(--texto-suave); font-size: .85rem; }

/* ═══════════════ Cuadro de mando ═══════════════ */

/* Paleta de datos. Rampa ordinal de un solo tono, validada con el validador
   del skill dataviz (monotonía, salto mínimo entre pasos y contraste del
   extremo claro contra la superficie) en modo claro y oscuro. */
.viz-root {
  /* Rampa ordinal de un tono, validada contra la superficie de marca:
     luminancia monótona, salto mínimo entre pasos y extremo claro con contraste. */
  --serie:    #d9ae35;
  --etapa-1:  #fae3a0;
  --etapa-2:  #eecb63;
  --etapa-3:  #d9ae35;
  --etapa-4:  #a9832a;
  --etapa-5:  #7a5e18;
}

/* ---- Indicadores ---- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.tile {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px 18px;
  box-shadow: var(--sombra);
}
.tile-aviso { border-left: 3px solid #d03b3b; }
.icono-aviso { color: #d03b3b; }
.t-valor {
  display: block;
  font-size: 1.9rem;
  font-weight: 650;
  letter-spacing: -.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.t-etiqueta { display: block; font-size: .82rem; color: var(--texto-suave); margin-top: 4px; }

.rejilla-viz {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

/* ---- Barras horizontales ---- */
.barras { list-style: none; margin: 4px 0 0; padding: 0; }
.barras li {
  display: grid;
  grid-template-columns: minmax(110px, 44%) 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
  font-size: .86rem;
}
.b-etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.b-pista { display: block; height: 14px; }
.b-marca {
  display: block; height: 100%;
  background: var(--serie);
  border-radius: 0 4px 4px 0;       /* extremo de dato redondeado, base anclada */
  min-width: 2px;
  transition: filter .12s;
}
.b-valor { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 2ch; text-align: right; }

.embudo .etapa-1 { background: var(--etapa-1); }
.embudo .etapa-2 { background: var(--etapa-2); }
.embudo .etapa-3 { background: var(--etapa-3); }
.embudo .etapa-4 { background: var(--etapa-4); }
.embudo .etapa-5 { background: var(--etapa-5); }

/* ---- Columnas (evolución semanal) ---- */
.columnas {
  display: flex; align-items: flex-end; gap: 2px;   /* 2px de superficie entre marcas */
  height: 150px; margin-top: 8px;
}
.col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.col-valor {
  font-size: .7rem; text-align: center; color: var(--texto-suave);
  font-variant-numeric: tabular-nums; height: 14px;
}
.col-marca {
  background: var(--serie);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: filter .12s;
}
.col-etiqueta {
  font-size: .65rem; text-align: center; color: var(--texto-suave);
  margin-top: 5px; white-space: nowrap;
}

/* ---- Capa de hover ---- */
[data-tip] { position: relative; cursor: default; }
[data-tip]:hover { filter: brightness(1.15); }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 6px; padding: 5px 9px;
  background: var(--texto); color: var(--superficie);
  border-radius: 6px; font-size: .76rem; white-space: nowrap;
  z-index: 20; pointer-events: none;
}
.barras [data-tip]:hover::after { left: 0; transform: none; }

.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Acceso restringido ---------- */
.tarjeta-acceso {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--error);
  border-radius: var(--radio);
  padding: 28px 30px;
  box-shadow: var(--sombra);
  max-width: 620px;
}
.tarjeta-acceso .boton { margin-right: 8px; margin-top: 8px; }
code { background: var(--acento-suave); padding: 1px 6px; border-radius: 4px; font-size: .88em; }

/* ---------- Listado como fichas en el móvil ---------- */
@media (max-width: 760px) {
  .tabla-scroll:has(.tabla-fichas) { overflow-x: visible; background: none; border: 0; box-shadow: none; }
  .tabla-fichas thead { position: absolute; left: -9999px; }
  .tabla-fichas, .tabla-fichas tbody, .tabla-fichas tr, .tabla-fichas td { display: block; width: 100%; }
  .tabla-fichas tr {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    margin-bottom: 10px;
    padding: 4px 2px;
  }
  .tabla-fichas td { border: 0; padding: 5px 14px; }
  .tabla-fichas td[data-etq]::before {
    content: attr(data-etq);
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texto-suave);
    margin-bottom: 1px;
  }
  .tabla-fichas td.sin-etq::before { content: none; }
  .tabla-fichas td:first-child { padding-top: 10px; }
  .tabla-fichas td:last-child { padding-bottom: 10px; }
  .filtros input, .filtros select { flex: 1 1 100%; min-width: 0; }
}

/* ---------- Portada del formulario público ---------- */
.hero {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: 26px;
  background: #000;
  border: 1px solid var(--borde);
}
.hero img {
  display: block; width: 100%; height: 280px;
  /* La foto es muy apaisada y la repartidora queda a la derecha del centro:
     con `cover` en un móvil estrecho se recorta por los lados, así que el
     encuadre se desplaza para que su cara no se pierda. Y se sube el punto de
     anclaje para que la cara quede por encima del texto, no detrás. */
  object-fit: cover; object-position: 56% 28%;
}
.hero::after {
  /* El texto va encima de la foto, así que necesita fondo propio: sin esto el
     subtítulo dorado cae sobre la caja amarilla de la repartidora y no se lee.
     El degradado deja limpia la mitad de arriba —donde está su cara— y oscurece
     de verdad la de abajo. */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(13,13,13,.10) 0%,
              rgba(13,13,13,.14) 38%, rgba(13,13,13,.72) 68%,
              rgba(13,13,13,.94) 100%);
}
.hero-texto {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 0 26px 22px; text-align: center;
}
.hero-texto h1 {
  font-size: 2.3rem; margin: 0 0 6px; color: #fff;
  letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(0,0,0,.65);
}
.hero-texto p {
  margin: 0; color: var(--acento-claro); font-weight: 550;
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
}
@media (max-width: 620px) {
  .hero img { height: 240px; }
  .hero-texto { padding: 0 18px 18px; }
  .hero-texto h1 { font-size: 1.7rem; }
  .hero-texto p { font-size: .9rem; }
}

/* Portada de la página de documentación: más baja, porque ahí lo que importa
   es la lista de lo que hay que subir, no la marca. El encuadre se va a la
   izquierda de la foto —los escaparates, que son fondo tranquilo— para que el
   saludo no caiga sobre la cara de la repartidora. */
.hero-docs img { height: 150px; object-position: 20% 48%; }
.hero-docs .hero-texto h1 { font-size: 1.55rem; }
@media (max-width: 620px) {
  .hero-docs img { height: 130px; }
  .hero-docs .hero-texto h1 { font-size: 1.4rem; }
}

/* Filete dorado en el pie, para cerrar la página con la marca */
.pie { border-top: 2px solid var(--acento); }

/* ═════════ Piel clara: la de todas las pantallas de trabajo ═════════
   Fondo hueso, no blanco puro: cansa menos en sesiones largas y también al
   candidato, que tiene que leer y rellenar quince campos. La marca la sostienen
   la cabecera negra con filete dorado y la portada, no el fondo. */
body.claro {
  color-scheme: light;
  --fondo: #f6f6f4;
  --superficie: #ffffff;
  --superficie-2: #faf9f6;
  --texto: #1c1b19;
  --texto-suave: #6b6963;
  --borde: #e3e1da;
  --acento: #8a6b1c;              /* oro oscuro: legible sobre blanco */
  --acento-claro: #6d5416;
  --sobre-acento: #1c1b19;
  --acento-suave: #fdf5e0;
  --error: #b3261e;
  --error-suave: #fdf0ef;
  --exito: #0f7a3d;
  --sombra: 0 1px 2px rgba(28, 27, 25, .06), 0 1px 3px rgba(28, 27, 25, .08);
}
body.claro .boton { background: #e2ba42; color: #1c1b19; }   /* el oro vivo, con texto oscuro */
body.claro .boton-peligro { background: #b3261e; color: #fff; }
body.claro input, body.claro select, body.claro textarea { background: #fff; }
body.claro .cabecera { background: #1a1a1a; border-bottom: 2px solid #e2ba42; }
body.claro .cabecera .nav-admin a { color: #f5d46e; }
body.claro .cabecera .usuario { color: #a3a3a3; }
body.claro .chip { background: var(--acento-suave); color: #6d5416; }
body.claro .chip-contratada { background: #e3f6e9; color: #0f5c30; }
body.claro .chip-descartada { background: #f0efec; color: #6b6963; }
body.claro .chip-resultado { background: #eeece6; color: #3a3833; }
body.claro .pie { background: var(--superficie); border-top: 2px solid #e2ba42; }

/* Rampa de datos para fondo claro, validada contra la superficie clara */
body.claro .viz-root {
  --serie:    #b8912b;
  --etapa-1:  #d9ae35;
  --etapa-2:  #b8912b;
  --etapa-3:  #957321;
  --etapa-4:  #6d5416;
  --etapa-5:  #4a3a0f;
}

body.claro .hero { border-color: #d9d6cd; }
body.claro .hero::after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, .05) 0%,
              rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, .74) 100%);
}
body.claro .hero-texto h1 { color: #fff; }
body.claro .hero-texto p { color: #f5d46e; }
body.claro .marca img { filter: none; }

/* ---------- Botón de WhatsApp ---------- */
.boton-whatsapp {
  display: inline-flex; align-items: center; gap: 9px;
  background: #25d366; color: #0b2e18;
}
.boton-whatsapp:hover { filter: brightness(1.05); }
/* Versión de tabla: el mismo botón, del tamaño de un chip. */
.boton-mini { padding: 5px 10px; font-size: .82rem; gap: 6px; }
.boton-mini svg { width: 15px; height: 15px; }
.detalle-mensaje { margin-top: 12px; }
.detalle-mensaje summary {
  cursor: pointer; font-size: .86rem; color: var(--texto-suave);
}
.detalle-mensaje .cita { margin-top: 8px; }

/* ── Documentación del candidato (móvil) ─────────────────────────────────── */
.docs { max-width: 640px; margin: 0 auto; }
.docs h1 { margin-bottom: 6px; }
.entradilla { color: var(--texto-suave); margin-bottom: 22px; }

.progreso { margin: 0 0 22px; }
.progreso-barra {
  height: 8px; border-radius: 99px; background: var(--borde); overflow: hidden;
}
.progreso-barra span {
  display: block; height: 100%; background: var(--acento);
  transition: width .35s ease;
}

.lista-docs { list-style: none; padding: 0; margin: 0 0 28px; }
.doc {
  border: 1px solid var(--borde); border-radius: 14px;
  padding: 16px; margin-bottom: 14px; background: var(--superficie);
}
.doc-hecho { border-color: #2e7d4f; background: #f2f8f4; }
.doc-cabecera { display: flex; gap: 12px; align-items: flex-start; }
.doc-cabecera h2 { font-size: 1.02rem; margin: 0 0 3px; }
.doc-marca {
  flex: 0 0 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .92rem;
  background: var(--borde); color: var(--texto);
}
.doc-hecho .doc-marca { background: #2e7d4f; color: #fff; }
.doc-estado { margin: 12px 0 4px; font-size: .9rem; color: #2e7d4f; }

.doc-subida { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.doc-subida input[type="file"] { position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; }
.doc-subida input[type="file"]:focus-visible + .doc-nombre { outline: 2px solid var(--acento); }
.boton-camara { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.doc-nombre { flex: 1 1 100%; word-break: break-all; }

.aviso {
  border-radius: 12px; padding: 14px 16px; margin: 0 0 20px;
  border: 1px solid var(--borde);
}
.aviso p { margin: 5px 0 0; }
.aviso .consejo { font-size: .92rem; color: var(--texto-suave); }
.aviso-mal { background: #fdf1f0; border-color: #d98b84; color: #7a1c16; }
.aviso-bien { background: #f1f8f4; border-color: #7fb996; color: #0f5c30; }
.aviso-atencion { background: #fdf7e8; border-color: #d9bd7a; color: #5c4712; margin-top: 14px; }
.aviso-atencion ul { margin: 6px 0 0; padding-left: 20px; }

.tarjeta-legal { font-size: .88rem; color: var(--texto-suave); }
.tarjeta-legal h2 { font-size: .95rem; }

.enlace-copiable { display: flex; gap: 8px; margin: 10px 0 14px; }
.enlace-copiable input {
  flex: 1; font-size: .82rem; padding: 8px 10px;
  border: 1px solid var(--borde); border-radius: 8px;
  background: var(--fondo); color: var(--texto);
}
.casilla { display: block; margin: 10px 0; font-size: .92rem; }

@media (max-width: 480px) {
  .doc-subida .boton { width: 100%; justify-content: center; }
  .enlace-copiable { flex-direction: column; }
}

/* Dos formas de mandar lo mismo, una al lado de la otra */
.botonera { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.botonera form { margin: 0; }
@media (max-width: 480px) {
  .botonera { flex-direction: column; align-items: stretch; }
  .botonera .boton { width: 100%; justify-content: center; text-align: center; }
}

/* Documento voluntario y cierre del envío */
.doc-extra { border-style: dashed; margin-bottom: 22px; }
.doc-extra .doc-marca { background: transparent; border: 1px dashed var(--borde);
  color: var(--texto-suave); font-weight: 400; font-size: 1.2rem; }
.voluntario {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  background: var(--acento-suave); color: #6d5416;
  border-radius: 99px; padding: 3px 9px; vertical-align: middle; margin-left: 6px;
  font-weight: 650;
}
.lista-extras { list-style: none; padding: 0; margin: 12px 0 4px; font-size: .92rem; }
.lista-extras li { padding: 4px 0; }
.terminar { margin: 0 0 28px; text-align: center; }
.terminar .ayuda { margin-top: 8px; }

/* Correo aún sin confirmar: llama la atención sin parecer un error */
.chip-pendiente { background: var(--acento-suave); color: var(--acento); }
body.claro .chip-pendiente { background: #fdf3dc; color: #7a5c10; }


/* ── Bitácora recogida al final de la ficha ──────────────────────────────────
   Es el historial completo, y casi nunca se necesita nada más que el último
   apunte, que ya se ve en el listado. Va cerrada para que la ficha empiece por
   lo que se usa (gestionar) y no por lo que se consulta de vez en cuando. */
.bitacora-caja > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 2px 0;
}
.bitacora-caja > summary::-webkit-details-marker { display: none; }
.bitacora-caja > summary::before {
  content: "▸";
  color: var(--acento);
  font-size: .85em;
  transition: transform .15s ease;
}
.bitacora-caja[open] > summary::before { transform: rotate(90deg); }
.bitacora-caja > summary .bit-titulo {
  font-size: 1.05rem;
  font-weight: 700;
}
.bitacora-caja > summary:hover .bit-titulo { color: var(--acento); }
.bitacora-caja[open] > summary { margin-bottom: 10px; }

/* Los dos formularios de gestión, separados sin necesidad de una línea. */
.form-notas { margin-top: 18px; }

/* Opciones en columna: para respuestas largas que no caben una al lado de otra,
   como las de «¿puedes trabajar en España?». */
.opciones-columna { display: flex; flex-direction: column; gap: 10px; }
.opciones-columna .opcion { display: flex; align-items: flex-start; gap: 10px; }

/* ── Aprobación de vacantes ──────────────────────────────────────────────────
   Pantalla aparte del panel: la usa un responsable que no entra a ver
   candidaturas. Fichas grandes, decidibles de un vistazo y desde el móvil. */
.resumen-vacantes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.dato-vacante {
  background: var(--acento-suave);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 14px 16px;
}
.dato-vacante .n { display: block; font-size: 28px; font-weight: 800; line-height: 1.1; }
.dato-vacante .t { display: block; font-size: 12px; color: var(--suave); margin-top: 2px; }

.tarjeta-vacante { margin-bottom: 16px; }
.tarjeta-vacante h2 { margin: 0; font-size: 1.15rem; }
/* Las urgentes sin decidir llevan una barra al costado: se localizan sin leer. */
.vacante-urgente { border-left: 4px solid var(--mal); }

.vacante-cab {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.vacante-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.datos-vacante { margin-bottom: 10px; }
.decision-hecha { background: var(--acento-suave); border-radius: 8px; padding: 10px 14px; }

.form-vacante { background: var(--acento-suave); border-radius: 10px; padding: 14px 16px; }
.form-vacante .campo { margin-bottom: 10px; }
.campo-ancho { grid-column: span 2; }

.boton-aprobar { background: #1f7a45; color: #fff; }
.boton-aprobar:hover { background: #196138; }

@media (max-width: 640px) {
  .vacante-cab { flex-direction: column; }
  .campo-ancho { grid-column: span 1; }
}

/* ── Panel con menú lateral ───────────────────────────────────────────────────
   El panel ya no cabe en una cabecera: candidaturas, resumen, vacantes… y lo
   que venga. El menú a la izquierda es donde se van colgando las opciones sin
   que nada se apriete, igual que en los otros sistemas de la casa. */
body.con-menu { background: var(--fondo); }

.marco-admin { display: flex; min-height: 100vh; align-items: stretch; }

.menu-lateral {
  width: 232px;
  flex: 0 0 232px;
  background: #1a1a1a;
  border-right: 2px solid #e2ba42;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.menu-marca { display: block; padding: 20px 18px 16px; border-bottom: 1px solid #2e2e2e; }
.menu-marca img { width: 100%; height: auto; max-width: 160px; }

.menu-opciones { flex: 1; padding: 14px 0; overflow-y: auto; }
.menu-grupo {
  margin: 14px 18px 6px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #7d7d7d;
}
.menu-grupo:first-child { margin-top: 4px; }

.menu-opciones a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  color: #e8e8e8;
  text-decoration: none;
  font-size: .92rem;
  border-left: 3px solid transparent;
}
.menu-opciones a:hover { background: #242424; color: #f5d46e; }
/* La opción en la que estás: filete dorado y fondo, para no perderse. */
.menu-opciones a.activa {
  background: #262010;
  color: #f5d46e;
  border-left-color: #e2ba42;
  font-weight: 700;
}
.menu-opciones .mi { font-size: 1rem; line-height: 1; }

/* Cuántas vacantes esperan visto bueno, sin tener que entrar a mirar. */
.menu-globo {
  margin-left: auto;
  background: #e2ba42;
  color: #1a1a1a;
  font-size: .72rem;
  font-weight: 800;
  border-radius: 10px;
  padding: 1px 8px;
}

.menu-pie {
  padding: 14px 18px;
  border-top: 1px solid #2e2e2e;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.menu-usuario {
  font-size: .74rem;
  color: #9a9a9a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-salir { font-size: .82rem; color: #f5d46e; text-decoration: none; }
.menu-salir:hover { text-decoration: underline; }

.cuerpo-admin {
  flex: 1;
  min-width: 0;                 /* sin esto, una tabla ancha estira el flex */
  padding: 30px 32px 60px;
}

@media (max-width: 860px) {
  /* En móvil el menú se tumba: una tira arriba que se desplaza a lo ancho. */
  .marco-admin { flex-direction: column; }
  .menu-lateral {
    width: auto; flex: none; height: auto; position: static;
    flex-direction: row; align-items: center; gap: 4px;
    border-right: 0; border-bottom: 2px solid #e2ba42;
    overflow-x: auto;
  }
  .menu-marca { padding: 10px 14px; border-bottom: 0; flex: 0 0 auto; }
  .menu-marca img { max-width: 92px; }
  .menu-opciones {
    display: flex; align-items: center; padding: 0; gap: 2px;
    overflow: visible; flex: 0 0 auto;
  }
  .menu-grupo { display: none; }
  .menu-opciones a {
    padding: 12px 12px; border-left: 0; border-bottom: 3px solid transparent;
    white-space: nowrap;
  }
  .menu-opciones a.activa { border-left: 0; border-bottom-color: #e2ba42; }
  .menu-pie { flex-direction: row; align-items: center; gap: 10px;
              border-top: 0; padding: 0 14px; margin-left: auto; flex: 0 0 auto; }
  .menu-usuario { display: none; }
  .cuerpo-admin { padding: 20px 16px 44px; }
}

/* ── Panel de peticiones de vacantes ──────────────────────────────────────── */
/* El código de la solicitud es para buscarlo, no para leerlo: pequeño, gris y
   con el código entero en el «title». Lo que importa es la ciudad. */
.cod{font-size:.7rem;color:var(--texto-suave);letter-spacing:.02em;white-space:nowrap}

/* Los indicadores de Peticiones son botones: cada uno filtra por lo que dice. */
a.tile{text-decoration:none;color:inherit;transition:border-color .12s,transform .12s}
a.tile:hover{border-color:var(--acento);transform:translateY(-1px)}
a.tile.on{border-color:var(--acento);box-shadow:inset 0 0 0 1px var(--acento)}
a.tile .t-etiqueta{text-decoration:none}
.tile-pie{display:block;margin-top:6px;font-size:.72rem;color:var(--texto-suave)}
a.tile.on .tile-pie{color:var(--acento)}

.tabla-vacantes .num { font-weight: 800; font-size: 1.05rem; }
.fila-cubierta td { opacity: .55; }
.barra-cobertura {
  display: block; height: 6px; border-radius: 3px;
  background: var(--borde); overflow: hidden; margin-top: 4px; min-width: 70px;
}
.barra-cobertura span { display: block; height: 100%; background: #1f7a45; }

/* El desplegable de vacante va fuera del <form> y se le engancha con el
   atributo `form`: así puede ir antes de las notas sin anidar formularios,
   que el navegador no permite. */
.campo-vacante { margin: 4px 0 18px; }
.campo-vacante select { width: 100%; max-width: 620px; }

.detalle-gente summary { font-size: .8rem; font-weight: 600; }
.lista-gente { list-style: none; margin: 6px 0 0; padding: 0; font-size: .84rem; }
.lista-gente li { padding: 3px 0; }
.lista-gente .ayuda { margin-left: 6px; }

.bloque-correccion { margin: 0 0 18px; }
.bloque-correccion .form-gestion { margin-top: 12px; }
.aviso-encaje { color: var(--mal); margin-top: 6px; }
.desajuste td { background: #fff8f0; }
.chip-desajuste { background: #fdecec; color: #a4232a; border: 1px solid #f3c4c4; }

.aviso-desajuste { border-left: 4px solid var(--mal); }

/* El aviso de la puerta: sin documentación no se contrata. Se dice antes de
   intentarlo, no solo al chocar. */
.puerta { border-radius: 8px; padding: 11px 15px; margin: 0 0 14px; font-size: .92rem; }
.puerta-abierta { background: #edf7f1; color: #1f5c3d; border: 1px solid #bfe3ce; }
.puerta-cerrada { background: #fdf3e8; color: #8a5308; border: 1px solid #f0d5ad; }

/* ── Vacantes: tabla estilo sheet ──────────────────────────────────────────── */
.vac-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.vac-kpi {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 12px 16px;
  border-left: 4px solid var(--borde);
}
.vac-kpi--pendiente { border-left-color: #c9a84c; }
.vac-kpi--aprobada  { border-left-color: #1f7a45; }
.vac-kpi-n { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; }
.vac-kpi-t { display: block; font-size: 11px; color: var(--texto-suave); margin-top: 2px; }

.vac-tabla-scroll { overflow-x: auto; border-radius: 10px; box-shadow: var(--sombra); }
.vac-tabla {
  width: 100%; border-collapse: collapse; font-size: .875rem;
  background: var(--superficie);
}
.vac-tabla thead th {
  background: #1a1a1a;
  color: #c9a84c;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 14px;
  white-space: nowrap;
  border-bottom: 2px solid #c9a84c;
  text-align: left;
}
.vac-tabla td { padding: 11px 14px; vertical-align: middle; border-bottom: 1px solid var(--borde); }
.vac-tabla .vac-num { text-align: center; font-weight: 700; font-size: 1.1rem; }

/* Estado: pendiente — blanco roto, borde dorado izquierdo, animación pulso */
.vac-fila--pendiente {
  background: rgba(201, 168, 76, 0.07);
  border-left: 4px solid #c9a84c;
  font-weight: 600;
  animation: vac-pulse 2.2s ease-in-out infinite;
}
@keyframes vac-pulse {
  0%, 100% { border-left-color: #c9a84c; }
  50%       { border-left-color: #f0d070; }
}
.vac-fila-form--pendiente td { background: rgba(201, 168, 76, 0.04); border-left: 4px solid #c9a84c; }

/* Estado: aprobada — fondo dorado suave */
.vac-fila--aprobada      { background: rgba(201, 168, 76, 0.13); border-left: 4px solid #1f7a45; }
.vac-fila-form--aprobada td { background: rgba(201, 168, 76, 0.07); border-left: 4px solid #1f7a45; }

/* Estado: rechazada — fondo rojo suave */
.vac-fila--rechazada      { background: rgba(179, 38, 30, 0.08); border-left: 4px solid #b3261e; }
.vac-fila-form--rechazada td { background: rgba(179, 38, 30, 0.04); border-left: 4px solid #b3261e; }

.vac-sub { color: var(--texto-suave); font-size: .78rem; }
.vac-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
}
.vac-badge--pendiente { background: rgba(201,168,76,.2); color: #a07c1e; }
.vac-badge--ok  { background: rgba(31,122,69,.15); color: #1f7a45; }
.vac-badge--ko  { background: rgba(179,38,30,.15); color: #b3261e; }
.vac-prio--alta  { background: #b3261e; color: #fff; border-radius: 4px; padding: 2px 6px; font-size: .72rem; font-weight: 700; }
.vac-prio--media { background: #e07b00; color: #fff; border-radius: 4px; padding: 2px 6px; font-size: .72rem; font-weight: 700; }

.vac-form-inline {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 4px;
}
.vac-form-inline input[type=number] { padding: 6px 8px; }
.vac-form-inline input[type=text]   { padding: 6px 10px; }

/* ---------- Barra de filtros (listado, peticiones) ---------- */
.flt {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 10px 14px; margin-bottom: 14px;
}
.flt-fila { display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.flt-fila + .flt-fila { margin-top:8px; padding-top:8px; border-top:1px solid var(--borde); }
.flt input[type=search], .flt select {
  padding:5px 9px; font-size:.8rem; height:30px;
  min-width:120px; flex:1 1 120px;
  border-radius:6px; background:var(--fondo);
  border:1px solid var(--borde); color:var(--texto);
}
.flt input[type=search]:focus, .flt select:focus { border-color:var(--acento); outline:none; }
.flt select.on, .flt input.on { border-color:var(--acento); color:var(--acento-claro); }
.flt-pie { display:flex; align-items:center; gap:10px; margin-top:8px; padding-top:8px; border-top:1px solid var(--borde); }
.flt-badge { font-size:.72rem; font-weight:700; padding:2px 9px; background:var(--acento); color:var(--sobre-acento); border-radius:999px; }
.flt-limpiar {
  font-size:.78rem; padding:3px 12px; background:none;
  border:1px solid var(--borde); border-radius:6px;
  color:var(--texto-suave); cursor:pointer; text-decoration:none;
  line-height:1.6; display:inline-flex; align-items:center; gap:4px;
}
.flt-limpiar:hover { border-color:var(--error); color:var(--error); }

/* ── Vacantes canceladas por Operaciones ──────────────────────────────────
   Cancelar en Nachito Operativo no borra la solicitud: la deja con estado
   «Cancelada» para que quede el rastro. Aquí se enseña en rojo y con el icono,
   nunca se esconde: si desapareciera, la gente apuntada a ella se quedaría
   esperando una llamada que no va a llegar. */
.vac-titulo-cancelado {
  color: #b3261e;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
h2.vac-titulo-cancelado { text-decoration: none; }

.vac-badge--cancelada { background: rgba(179,38,30,.18); color: #b3261e; }

.vac-fila--cancelada {
  background: rgba(179, 38, 30, 0.10);
  border-left: 4px solid #b3261e;
  opacity: .85;
}
.vac-fila-form--cancelada td {
  background: rgba(179, 38, 30, 0.05);
  border-left: 4px solid #b3261e;
}
.vac-cancelada-nota {
  margin: 4px 0 0;
  padding: 8px 10px;
  font-size: .82rem;
  line-height: 1.5;
  color: #b3261e;
  background: rgba(179, 38, 30, 0.06);
  border-radius: 6px;
}
.vac-kpi--cancelada .vac-kpi-n { color: #b3261e; }

.aviso-cancelada { border-left: 4px solid #b3261e; }
.tile-cancelada .t-valor { color: #b3261e; }
.tabla-vacantes tr.fila-cancelada { background: rgba(179, 38, 30, 0.06); }

/* ── Panel de aprobación: la vista de seguimiento ─────────────────────────
   Cuando ya está todo decidido, esta pantalla deja de servir para aprobar y
   pasa a servir para vigilar. Lo que salta a la vista tiene que ser lo que va
   mal: fecha pasada (rojo) y nadie apuntado (ámbar). */

/* Atajos de un clic. Cada uno tiene su definición exacta en vacantes.py */
.vac-atajos { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.vac-atajo {
  border: 1px solid var(--borde); border-radius: 20px; padding: 5px 12px;
  font-size: .79rem; font-weight: 600; text-decoration: none; color: var(--texto);
  background: var(--superficie-2); display: inline-flex; align-items: center; gap: 7px;
}
.vac-atajo:hover { border-color: #c9a84c; }
.vac-atajo.on { background: #e2ba42; border-color: #c9a84c; color: #1c1b19; }
.vac-atajo-n {
  background: rgba(0,0,0,.08); border-radius: 10px; padding: 0 7px;
  font-variant-numeric: tabular-nums; font-size: .76rem;
}
.vac-atajo-bien.on { background: #1f7a45; border-color: #1f7a45; color: #fff; }

.vac-pista {
  margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid #1f7a45;
  background: rgba(31,122,69,.08); border-radius: 0 6px 6px 0;
  font-size: .87rem; line-height: 1.5;
}
.vac-pista-linea { margin: 10px 0 0; color: #155c34; }

.tile-mal .t-valor { color: #b3261e; }
.tile-aviso .t-valor { color: #b06a00; }

/* Filas que piden atención. El borde izquierdo del estado lo pisa el aviso:
   que una vacante esté aprobada importa menos que que se pasó de fecha. */
.vac-fila--pasada   { border-left: 4px solid #b3261e !important;
                      background: rgba(179,38,30,.05) !important; }
.vac-fila--sinnadie { border-left: 4px solid #d18b1a !important;
                      background: rgba(176,106,0,.06) !important; }

.vac-num-linea { font-weight: 800; font-size: 1.05rem; }
.vac-semaforo { font-size: .76rem; font-weight: 700; margin-top: 3px; }
.vac-sem-mal   { color: #b3261e; }
.vac-sem-aviso { color: #b06a00; }
.vac-sem-bien  { color: #1f7a45; }
.vac-quieto { color: #b06a00; font-weight: 600; }
.vac-bien   { color: #1f7a45; font-weight: 600; }
.vac-falta  { color: #b3261e; }
.vac-vacio  { color: #b06a00; font-weight: 600; font-size: .82rem; }

.vac-desplegar {
  background: none; border: 1px solid var(--borde); border-radius: 6px;
  padding: 4px 10px; font: inherit; font-size: .82rem; font-weight: 700;
  cursor: pointer; color: var(--texto); white-space: nowrap;
}
.vac-desplegar:hover { border-color: #c9a84c; }
.vac-minichips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.vac-minichips .chip { font-size: .72rem; padding: 1px 8px; }
.chip-nota { font-size: .7rem; }

/* El desplegable de quién opta a la vacante */
.vac-gente { padding: 4px 4px 12px; }
.vac-gente h4 { margin: 0 0 8px; font-size: .9rem; }
.vac-gente-tabla th { text-transform: none; font-size: .74rem; white-space: nowrap; }
.vac-gente-tabla td { font-size: .82rem; vertical-align: top; }
.vac-fria td { opacity: .72; }

/* Distintivos por estado de la candidatura, para leer la columna de un vistazo */
.chip-entrevista            { background: #e6eefb; color: #1c4f9c; }
.chip-iniciar-contratacion  { background: #e3f6e9; color: #0f5c30; }
.chip-preseleccionada       { background: #f3e9fb; color: #6b2f9c; }
.chip-en-revision           { background: #fdf0e3; color: #8a5a12; }

/* ── Cerrar una vacante a mano ────────────────────────────────────────────
   El equipo contrató sin pasar por el portal. La vacante figuraba sin cubrir
   para siempre y ensuciaba todos los avisos del panel. */
.aviso-ops {
  margin-top: 6px; padding: 4px 8px; border-radius: 5px;
  background: rgba(176,106,0,.10); color: #8a5a12;
  font-size: .74rem; line-height: 1.4; font-weight: 600;
}
.vac-pista-ops { border-left-color: #d18b1a; background: rgba(176,106,0,.08); }

.fila-cerrar > td { background: var(--superficie-2); border-left: 4px solid #c9a84c; }
.form-cerrar { padding: 12px 14px 14px; }
.opcion-cerrar {
  display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0;
  font-size: .88rem; cursor: pointer;
}
.opcion-cerrar input { margin-top: 3px; }
.form-cerrar .sangria { margin: 4px 0 0 26px; }
.form-cerrar .sangria select { min-width: 260px; max-width: 100%; }
.form-cerrar .sangria .ayuda { margin: 5px 0 0; }
.marca-doc {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 10px;
  font-size: .8rem; color: var(--texto-suave);
}
.cerrar-pie {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--borde);
}
/* Cerrada a mano por el equipo: VERDE, porque es trabajo terminado.
   El rojo (.vac-badge--cancelada) se reserva a las canceladas por Operaciones,
   que es lo contrario —un puesto que ya no existe— y lo peor que podía pasar
   era que las dos cosas se parecieran de un vistazo. El verde relleno la
   distingue a su vez de .vac-badge--ok, que es el recuento de aprobadas. */
.vac-badge--cerrada { background: #1f7a45; color: #fff; }

/* Cerrada solo en parte: sigue abierta, así que ni verde ni rojo. Dice
   cuántas faltan, que es lo único que hay que hacer con ella. */
.vac-badge--parcial { background: rgba(224,123,0,.16); color: #a85a00; }

/* Marcas de «sí / todavía no» dentro de una celda, al lado del dato al que
   acompañan. Sustituyen a dos columnas enteras que solo decían eso mismo con
   una etiqueta grande: mismo dato, sin gastar ancho ni alto de tabla. */
.marca-si, .marca-no {
  font-size: .82rem; font-weight: 700; line-height: 1;
  margin-left: 4px; cursor: help;
}
.marca-si { color: #1f7a45; }
.marca-no { color: #c0b6a0; }

/* El nombre, en una sola línea. «CARLOS ALFREDO RAMIREZ DUEÑAS» se partía en
   cuatro y estiraba de alto TODA la fila, columnas vecinas incluidas: el nombre
   es lo primero que se busca al recorrer la tabla y era lo peor de leer. La
   tabla ya se desplaza en horizontal, así que el ancho extra no rompe nada. */
/* ---------- Anchos del listado de candidaturas ----------
   El navegador reparte el sobrante entre las columnas a ojo, y con trece
   columnas eso salía desproporcionado: «Candidato» y «Contacto» se estiraban
   hasta la mitad de la pantalla mientras «Puesto» y «Vehículo» se partían en
   tres líneas. No era culpa del contenido: es que nunca se dijo qué columna
   manda.

   El truco: `width: 1%` + `nowrap` encoge una columna a exactamente lo que
   mide su contenido, en vez de dejar que se reparta el hueco libre. Se lo
   ponemos a todo lo corto —fechas, marcas, chips— y el sobrante se queda para
   las que sí tienen texto de largo variable.

   Solo en pantalla ancha: por debajo de 760px cada fila es una ficha y aquí no
   pinta nada. */
@media (min-width: 761px) {
  /* Lo que mide justo lo que ocupa */
  .tabla-fichas th:nth-child(1),  .tabla-fichas td:nth-child(1),   /* Fecha    */
  .tabla-fichas th:nth-child(2),  .tabla-fichas td:nth-child(2),   /* Candidato*/
  .tabla-fichas th:nth-child(3),  .tabla-fichas td:nth-child(3),   /* Contacto */
  .tabla-fichas th:nth-child(7),  .tabla-fichas td:nth-child(7),   /* Puede trabajar */
  .tabla-fichas th:nth-child(9),  .tabla-fichas td:nth-child(9),   /* CV       */
  .tabla-fichas th:nth-child(10), .tabla-fichas td:nth-child(10),  /* Estado   */
  .tabla-fichas th:nth-child(13), .tabla-fichas td:nth-child(13) { /* Ver      */
    width: 1%;
    white-space: nowrap;
  }

  /* Lo que se partía en tres líneas: un mínimo para que quepa en dos */
  .tabla-fichas th:nth-child(4),  .tabla-fichas td:nth-child(4)  { min-width: 104px; } /* Puesto   */
  .tabla-fichas th:nth-child(5),  .tabla-fichas td:nth-child(5)  { min-width: 116px; } /* Zona     */
  .tabla-fichas th:nth-child(6),  .tabla-fichas td:nth-child(6)  { min-width: 132px; } /* Vehículo */
  .tabla-fichas th:nth-child(8),  .tabla-fichas td:nth-child(8)  { min-width: 160px; } /* Gestión  */
  .tabla-fichas th:nth-child(11), .tabla-fichas td:nth-child(11) { min-width: 110px; } /* Campaña  */
  .tabla-fichas th:nth-child(12), .tabla-fichas td:nth-child(12) { min-width: 96px;  } /* Vacantes */

  /* Trece columnas no caben en un portátil a base de buena voluntad: hay que
     devolver ancho de algún sitio. De aquí, que no cuesta nada. */
  .tabla-fichas th, .tabla-fichas td { padding-left: 10px; padding-right: 10px; }

  /* El correo largo era el que más estiraba «Contacto». Se recorta con puntos
     suspensivos y entero al pasar el ratón; el enlace de mailto sigue llevando
     la dirección completa, así que no se pierde nada. */
  .tabla-fichas .correo-corto {
    display: inline-block;
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }
}

/* El nombre nunca se parte: es lo primero que se busca al recorrer la tabla. */
.tabla-fichas .col-nombre { white-space: nowrap; }

/* Reenviar la confirmación del correo. Va donde estaba la marca de «sin
   confirmar», porque ver el problema y poder resolverlo tienen que estar en el
   mismo sitio: una marca que solo informa obliga a irse a otra pantalla. */
.boton-reenviar {
  font: inherit; font-size: .72rem; font-weight: 600;
  color: var(--texto-suave); background: transparent;
  border: 1px solid var(--borde); border-radius: 5px;
  padding: 1px 7px; margin-left: 5px; cursor: pointer; white-space: nowrap;
}
.boton-reenviar:hover { color: var(--texto); border-color: var(--texto-suave); }

/* «Sin vehículo no podemos seguir». Ámbar y no rojo: no ha hecho nada mal, es
   que el puesto pide algo que ahora no tiene. Y el texto dice qué lo cambiaría,
   que es lo único que puede hacer con esta información. */
.parada-vehiculo {
  background: var(--acento-suave);
  border-left: 3px solid var(--acento);
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
  margin-top: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.parada-vehiculo strong { font-size: .95rem; }
.parada-vehiculo p { margin: 0; font-size: .88rem; color: var(--texto-suave); line-height: 1.5; }


/* ── El panel de una vacante, con el cajón de quién encaja ──────────────────
   El cajón va a la IZQUIERDA a propósito: mientras se lee la lista de gente,
   los números de la vacante siguen a la vista a la derecha. Saber cuántas
   plazas quedan mientras se elige a quién llamar es justo lo que se perdía
   teniendo que volver atrás a mirarlo.

   En el ordenador el cajón EMPUJA el contenido en vez de taparlo; en el móvil
   no cabe al lado, así que se convierte en lo de siempre: una capa encima con
   su velo. Es el mismo cajón, no dos componentes distintos. */

.miga { font-size: .85rem; margin: 0 0 10px; }
.miga a { text-decoration: none; }
.miga a:hover { text-decoration: underline; }

.vac-panel { position: relative; display: flex; gap: 0; align-items: flex-start; }
.vac-panel-cuerpo { flex: 1; min-width: 0; }
.vac-panel-cab h1 { margin-bottom: 6px; }
.vac-panel-cab .vacante-chips { margin-bottom: 6px; }

.cajon {
  flex: none;
  width: 370px;
  margin-right: 24px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: var(--sombra);
  overflow: hidden;
  display: none;                 /* cerrado: no ocupa nada */
  flex-direction: column;
  max-height: calc(100vh - 90px);
  position: sticky;
  top: 20px;
}
.vac-panel.cajon-abierto .cajon { display: flex; }

.cajon-cab { padding: 14px 16px 12px; border-bottom: 1px solid var(--borde); }
.cajon-cab-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cajon-cab h2 { margin: 0; font-size: 1rem; }
.cajon-cab p { margin: 4px 0 0; font-size: .82rem; color: var(--texto-suave); }
.cajon-cerrar {
  flex: none; width: 30px; height: 30px; cursor: pointer;
  border: 1px solid var(--borde); border-radius: 6px;
  background: transparent; color: var(--texto-suave);
  font: inherit; font-size: 1.15rem; line-height: 1;
}
.cajon-cerrar:hover { color: var(--texto); border-color: var(--texto-suave); }

.cajon-filtros {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--borde);
  background: rgba(0, 0, 0, .02);
}
.cajon-filtro {
  font: inherit; font-size: .78rem; font-weight: 600;
  padding: 5px 11px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--borde); background: var(--superficie);
  color: var(--texto-suave);
}
.cajon-filtro[aria-pressed="true"] { background: #e2ba42; border-color: #e2ba42; color: #1c1b19; }
.cajon-n { font-variant-numeric: tabular-nums; opacity: .75; }

.cajon-lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.encaje { padding: 12px 16px; border-bottom: 1px solid var(--borde); display: grid; gap: 5px; }
.encaje:last-child { border-bottom: 0; }
.encaje-nombre { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.encaje-nombre a { font-weight: 600; font-size: .94rem; color: var(--texto); text-decoration: none; }
.encaje-nombre a:hover { color: var(--acento); text-decoration: underline; }
.encaje-rasgos { font-size: .82rem; color: var(--texto-suave); }
.encaje-gestion {
  font-size: .82rem; color: var(--texto-suave);
  border-left: 2px solid var(--borde); padding-left: 9px;
}
.encaje-gestion b { color: var(--texto); font-weight: 600; }
/* Parado: nadie lo ha tocado en una semana. Ámbar, no rojo: no es un fallo,
   es una cosa que se está enfriando. */
.encaje-parado .encaje-gestion { border-left-color: #b8860b; }
.encaje-parado .encaje-gestion b { color: #8a6b1c; }
.encaje-acciones { display: flex; gap: 14px; font-size: .82rem; }

.cajon-pie, .cajon-vacio { padding: 12px 16px; font-size: .82rem; color: var(--texto-suave); }
.cajon-pie { border-top: 1px solid var(--borde); margin: 0; background: rgba(0, 0, 0, .02); }
.cajon-vacio p { margin: 0 0 10px; }
.cajon-vacio p:last-child { margin-bottom: 0; }

.cajon-velo { display: none; }

.vac-datos { display: grid; grid-template-columns: max-content 1fr; gap: 7px 18px; margin: 0 0 8px; font-size: .93rem; }
.vac-datos dt { color: var(--texto-suave); }
.vac-datos dd { margin: 0; }

.vac-apuntados { list-style: none; margin: 0; padding: 0; }
.vac-apuntados li {
  padding: 9px 0; border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.vac-apuntados li:last-child { border-bottom: 0; }

@media (max-width: 900px) {
  /* Aquí ya no cabe al lado: el cajón pasa a ser una capa sobre la pantalla. */
  .cajon {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
    width: min(380px, 90%); margin: 0; max-height: none;
    border-radius: 0; border: 0; border-right: 1px solid var(--borde);
    box-shadow: 4px 0 24px rgba(28, 27, 25, .22);
  }
  .vac-panel.cajon-abierto .cajon-velo {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(28, 27, 25, .45);
  }
  .vac-datos { grid-template-columns: 1fr; gap: 2px 0; }
  .vac-datos dd { margin-bottom: 8px; }
}

/* El sueldo del convenio, en la fila de números de la vacante. En oro y no en
   verde: no es un logro conseguido como las plazas cubiertas, es el dato que
   se dice por teléfono. Y en cuerpo algo menor, que «1.234,56 €» ocupa mucho
   más que «3» y si va al mismo tamaño se come la fila entera. */
.vac-kpi--sueldo { border-left-color: #e2ba42; }
.vac-kpi-euros { font-size: 20px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* ── Secciones plegables del panel de vacantes ──────────────────────────────
   Son ocho bloques y solo uno es el trabajo del día. Plegados, la pantalla
   cabe de una vez y se ve de un vistazo cuánto hay en cada sitio; el que hace
   falta se abre con un clic, como la bitácora de una ficha.

   El estado abierto/cerrado NO se guarda a propósito: el filtro de arriba ya
   abre el bloque que corresponde («ver cuáles» abre las canceladas), así que
   guardar además una preferencia por navegador daría dos verdades sobre qué
   tiene que estar abierto. */
.seccion-plegable > summary { padding: 2px 0 0; }
.seccion-plegable > summary .contador { margin-left: 0; }
.seccion-plegable[open] > summary { margin-bottom: 12px; }

/* El punto: aquí dentro hay algo que decidir, no solo algo que mirar. Se ve
   con el bloque cerrado, que es cuando hace falta. */
.punto-aviso {
  color: #b3261e;
  font-size: .7rem;
  line-height: 1;
  align-self: center;
}

/* ── El cuadre de plazas ────────────────────────────────────────────────────
   Dos columnas de renglones: dónde está cada plaza pedida, y qué se hizo con
   las aprobadas. Números a la derecha y con cifras de ancho fijo, que es la
   única forma de que una columna de restas se pueda leer de un vistazo. */
.cuadre { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
@media (max-width: 720px) { .cuadre { grid-template-columns: 1fr; } }
.cuadre-col h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-suave); margin: 0 0 8px; }
.cuadre-tabla td { padding: 6px 0; border-bottom: 1px solid var(--borde); }
.cuadre-tabla td.n { text-align: right; font-variant-numeric: tabular-nums; width: 1%; white-space: nowrap; }
.cuadre-resta td { color: var(--texto-suave); }
.cuadre-total td { font-weight: 700; border-top: 2px solid var(--borde); border-bottom: 0; }
.cuadre-mal td { color: #b3261e; font-weight: 700; }
.cuadre-cambios { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borde); }
.cuadre-cambios h3 { font-size: .95rem; margin: 0 0 4px; }
.cuadre-cambios .n { text-align: right; font-variant-numeric: tabular-nums; }

/* Listas de barras que pueden ser largas (los municipios pasan de cien): se
   enseñan enteras, pero dentro de su caja, para que el resto del resumen no
   se vaya a tomar viento. El hueco a la derecha es para que la barra de
   desplazamiento no se coma el número. */
.barras-scroll { max-height: 460px; overflow-y: auto; padding-right: 8px; }

/* ── El buscador de todo ────────────────────────────────────────────────────
   La caja es grande a propósito: es lo único que hay que hacer en esa
   pantalla, y una caja del tamaño de un filtro invita a escribir una palabra
   cuando lo que se quiere es que escriban la pregunta entera. */
.buscador-grande { display: flex; gap: 10px; margin-bottom: 18px; }
.buscador-grande input[type="search"] {
  flex: 1; min-width: 0; font-size: 1.05rem; padding: 12px 16px;
}
@media (max-width: 560px) {
  .buscador-grande { flex-direction: column; }
  .buscador-grande .boton { width: 100%; }
}

/* Lo que se ha entendido de la pregunta. Va arriba y con el oro de marca:
   es una afirmación del sistema sobre lo que cree que le han preguntado, y
   quien busca tiene que poder desmentirla de un vistazo. */
.buscar-entendido {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  background: var(--acento-suave); border-left: 3px solid var(--acento);
  border-radius: 0 8px 8px 0; padding: 12px 16px; margin-bottom: 16px;
}
.buscar-entendido-tit { font-weight: 700; font-size: .88rem; }
.buscar-entendido .boton-mini { margin-left: auto; }

.buscar-ejemplos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.buscar-ejemplos li { display: grid; gap: 2px; }
.buscar-ejemplos .ayuda { font-size: .88rem; }

.buscar-lista { list-style: none; margin: 0; padding: 0; }
.buscar-lista > li {
  padding: 10px 0; border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.buscar-lista > li:last-child { border-bottom: 0; }
.buscar-lista a { font-weight: 600; text-decoration: none; }
.buscar-lista a:hover { text-decoration: underline; }
/* El texto de la gestión va en su propia línea y sangrado: es una cita de lo
   que alguien escribió, no un dato de la ficha. */
.buscar-detalle {
  flex-basis: 100%; margin: 4px 0 0; font-size: .86rem;
  color: var(--texto-suave); border-left: 2px solid var(--borde);
  padding-left: 10px;
}

/* La caja de buscar del menú lateral. Va sobre el fondo oscuro del menú, así
   que el campo es claro: un campo oscuro sobre oscuro no parece un campo. */
.ux-menu-buscar { padding: 0 14px 12px; }
.ux-menu-buscar input {
  width: 100%; font: inherit; font-size: .88rem;
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid #3d3d3d; background: #212121; color: #f2f2f2;
}
.ux-menu-buscar input::placeholder { color: #8a8a8a; }
.ux-menu-buscar input:focus {
  outline: 2px solid var(--oro, #e2ba42); outline-offset: 1px;
  background: #2a2a2a;
}

/* Cada desajuste en su línea, con la etiqueta y la frase alineadas arriba:
   la frase puede ocupar dos renglones y la etiqueta no debe irse al centro. */
.desajuste-linea {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .86rem; line-height: 1.45;
}
.desajuste-linea + .desajuste-linea { margin-top: 6px; }
.desajuste-linea .chip { flex: none; }

/* Ex trabajador (filtro_contacto.py): estado «información», icono + texto. */
.chip-ex { background: #1b2633; color: #8fb4d9; }
body.claro .chip-ex { background: #e5edf4; color: #2f5577; }
.ex-linea { color: #8fb4d9; }
body.claro .ex-linea { color: #2f5577; }
.ex-bloque { border-radius: 10px; padding: 16px 18px; margin: 0 0 16px; background: #1b2633; color: #cfe0f0; }
body.claro .ex-bloque { background: #e5edf4; color: #1a1713; }
.ex-bloque h3 { margin: 0 0 10px; font-size: 1rem; color: #8fb4d9; }
body.claro .ex-bloque h3 { color: #2f5577; }
.ex-bloque dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.ex-bloque dt { color: #8fb4d9; }
body.claro .ex-bloque dt { color: #2f5577; }
.ex-bloque dd { margin: 0; font-weight: 500; }
.ex-bloque .ayuda { margin: 10px 0 0; }