/* geo-jobs — capa propia, encima de la plantilla Jobtex.
 *
 * El aspecto y la maqueta salen de la demo "list sidebar" de Jobtex
 * (Themesflat), cuyas hojas van en assets/vendor/ SIN TOCAR:
 *   bootstrap.min.css · icon-font.css · jobtex-base.css ·
 *   jobtex-shortcodes.css · jobtex-responsive.css
 * Se cargan antes que esta, así que aquí se gana por orden, no por peso de
 * selector. No hay que editar nunca las de vendor/: si la plantilla se
 * actualiza, se sustituyen y este fichero sigue valiendo.
 *
 * Esta hoja hace tres cosas y ninguna más:
 *   1. Sirve la tipografía de la plantilla desde aquí, no desde Google.
 *   2. Arregla el contraste donde Jobtex no llega al mínimo de WCAG.
 *   3. Viste lo que la plantilla no trae: las cifras de arriba, el resumen de
 *      la oferta, el cuadrado con la inicial de la empresa, las etiquetas de
 *      GEO y remoto, el alta por correo, los gráficos y el pie.
 *
 * Sin tema oscuro: Jobtex es una plantilla clara y no tiene variante oscura.
 * Mantener las dos habría obligado a repintar sus 240 KB de reglas.
 */

/* ------------------------------------------------------------------ *
 * 1. Tipografía
 *
 * Plus Jakarta Sans, la de la plantilla, servida desde assets/fonts/. Es la
 * fuente variable oficial: un fichero por juego de caracteres cubre de 400 a
 * 800. Quien lea en español o en alemán se baja los dos (26 + 20 KB) y nadie
 * se baja el cirilico ni el vietnamita. Jobtex la pide a fonts.gstatic.com;
 * eso metería una peticion a un tercero en cada visita.
 * ------------------------------------------------------------------ */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ *
 * 2. Colores
 *
 * Los de Jobtex, con dos correcciones de contraste medidas con la fórmula de
 * WCAG 2.1 y apuntadas al lado:
 *   - El verde de la plantilla, #14a077, da 3,32:1 sobre blanco. No vale ni
 *     para texto ni para un botón con letra blanca. Se usa su propio verde
 *     oscuro de hover, #148160 (4,84:1), y el claro queda solo para bordes,
 *     que son decorativos.
 *   - El morado del rayo, #504cfe, da 4,37:1. Se usa #4340d6 (7,13:1).
 * ------------------------------------------------------------------ */

:root {
  --text: #121212;          /* 18,88:1 sobre blanco */
  --muted: #64666c;         /*  4,51:1 sobre blanco */
  --accent: #148160;        /*  4,84:1 sobre blanco */
  --accent-line: #14a077;   /* solo bordes y adornos */
  --geo: #4340d6;           /*  7,13:1 sobre blanco */
  --geo-bg: #eeedfd;        /* --geo sobre este fondo: 5,48:1 */
  --accent-bg: #e6f4ef;     /* --accent sobre este fondo: 4,53:1 */
  --border: #e5e5e5;
  --panel: #f5f5f5;
  --chip-bg: #f1f1f1;       /* --text sobre este fondo: 16,60:1 */
  --danger: #c4362c;        /*  5,06:1 sobre blanco */
  --footer-bg: #121212;
  --footer-text: #b1b1b1;   /*  8,71:1 sobre el pie */
}

/* Foco visible para quien navega con teclado. La plantilla lo apaga con
   `:focus { outline: 0 }`, que deja sin rastro a quien va con el tabulador. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Los enlaces de la plantilla heredan el color; los del texto corrido, no. */
a { color: var(--accent); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[hidden] { display: none !important; }

/* ------------------------------------------------------------------ *
 * 3. Cabecera, migas de pan y título
 * ------------------------------------------------------------------ */

/* El logotipo de Jobtex es una imagen; el nuestro es el nombre escrito. */
#logo a {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.header .main-nav .menu { display: flex; gap: 32px; margin: 0; padding: 0; }
.header .main-nav .menu > li { list-style: none; }
.header .main-nav .menu > li > a {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  padding-block: 8px;
  border-bottom: 2px solid transparent;
}
.header .main-nav .menu > li.current-item > a {
  color: var(--accent);
  font-weight: 700;
  border-bottom-color: var(--accent-line);
}

.header-customize-item.button a {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--accent);
  border-radius: 4px;
  padding: 8px 20px;
  text-decoration: none;
}

/* La franja gris de las migas de pan, donde además va el <h1>. */
.breadcrumb-section { background: var(--panel); padding-block: 32px 40px; }
.breadcrumb-section .widget-menu-link ul {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  font-size: 0.875rem;
  color: var(--muted);
}
/* La plantilla ya pone su propio separador entre migas con un ::after, así que
   aquí no se añade ninguno: saldrían dos seguidos. */
.breadcrumb-section .widget-menu-link li { list-style: none; }
.breadcrumb-section .widget-menu-link a { color: var(--muted); text-decoration: none; }
.breadcrumb-section .widget-menu-link a:hover { color: var(--accent); }

.page-h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.page-lede {
  margin-top: 12px;
  max-width: 70ch;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------------ *
 * 4. Cifras de arriba
 *
 * No están en la plantilla. Rejilla con las tarjetas estiradas: todas las de
 * una fila miden lo mismo aunque una etiqueta ocupe dos líneas.
 * ------------------------------------------------------------------ */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 16px;
  margin-bottom: 32px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 24px;
}
.stat-num {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
}
.stat-label {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.4;
  margin-top: auto;
  padding-top: 4px;
}

/* ------------------------------------------------------------------ *
 * 5. Columna de filtros
 *
 * Se apoya en `.widget-filter.st2` de la plantilla y solo cambia lo que hace
 * falta: nuestros controles son un buscador, dos desplegables y tres casillas,
 * no los seis desplegables de adorno del original.
 * ------------------------------------------------------------------ */

.widget-filter.filters { position: sticky; top: 24px; }

.filters .group-form { margin-bottom: 20px; }
.filters .group-form .title {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  /* La plantilla pone en mayúscula la inicial de CADA palabra, que en inglés cuela y en
     español da "Publicada En". Aquí se escribe cada etiqueta como toca y punto. */
  text-transform: none;
}

.filters .group-input { position: relative; }
.filters .group-input select,
.filters .group-input input[type="search"] {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 1rem;          /* 16 px: por debajo, iOS hace zoom al enfocar */
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  height: auto;
}
.filters .group-input select { cursor: pointer; }
.filters .search-ip input[type="search"] { padding-left: 44px; }
.filters .search-ip .icon-search {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--muted);
  pointer-events: none;
}
.filters ::placeholder { color: var(--muted); opacity: 1; }

.filters .group-check { display: flex; flex-direction: column; gap: 12px; }
.filters .field-check { display: flex; align-items: center; gap: 10px; }
.filters .field-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.filters .field-check label {
  font-size: 0.9375rem;
  color: var(--text);
  cursor: pointer;
  margin: 0;
}

.filters .btn-clear {
  width: 100%;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--accent);
  background: #ffffff;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 12px 20px;
  cursor: pointer;
}
.filters .btn-clear:hover { background: var(--accent-bg); }

/* ------------------------------------------------------------------ *
 * 6. Listado
 * ------------------------------------------------------------------ */

.wd-meta-select-job { margin-bottom: 24px; }
.nofi-job.results-count {
  color: var(--muted);
  font-size: 0.9375rem;
  margin: 0;
}
.list-note { color: var(--muted); font-size: 0.9375rem; margin-bottom: 16px; }

.jobs { list-style: none; margin: 0; padding: 0; }
.jobs > li { list-style: none; }

/* La plantilla reserva un hueco para el logotipo de la empresa. Aquí no hay
   logotipos, así que la tarjeta empieza directamente en el texto. */
.features-job .box-content { width: 100%; }

/* ------------------------------------------------------------------ *
 * 6 bis. Banderas
 *
 * Dibujadas aquí, no con emojis: Windows no trae glifos de bandera y pintaría
 * dos letras dentro de una caja. Son cuatro SVG en línea, sin peticiones y sin
 * ficheros que mantener. Van con aria-hidden y siempre con el país escrito al
 * lado, así que quien no las vea no se pierde nada.
 * ------------------------------------------------------------------ */

.flag {
  display: inline-block;
  width: 20px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.flag-ES {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Crect width='9' height='6' fill='%23c60b1e'/%3E%3Crect y='1.5' width='9' height='3' fill='%23ffc400'/%3E%3C/svg%3E");
}

.flag-DE {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='3'/%3E%3Crect y='1' width='5' height='1' fill='%23dd0000'/%3E%3Crect y='2' width='5' height='1' fill='%23ffce00'/%3E%3C/svg%3E");
}

.flag-GB {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 60,30 M60,0 0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 60,30 M60,0 0,30' stroke='%23c8102e' stroke-width='4'/%3E%3Cpath d='M30,0 V30 M0,15 H60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 V30 M0,15 H60' stroke='%23c8102e' stroke-width='6'/%3E%3C/svg%3E");
}

.flag-US {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 13'%3E%3Crect width='26' height='13' fill='%23fff'/%3E%3Cg fill='%23b22234'%3E%3Crect width='26' height='1'/%3E%3Crect y='2' width='26' height='1'/%3E%3Crect y='4' width='26' height='1'/%3E%3Crect y='6' width='26' height='1'/%3E%3Crect y='8' width='26' height='1'/%3E%3Crect y='10' width='26' height='1'/%3E%3Crect y='12' width='26' height='1'/%3E%3C/g%3E%3Crect width='10.4' height='7' fill='%233c3b6e'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='1.3' cy='1.2' r='.4'/%3E%3Ccircle cx='3.3' cy='1.2' r='.4'/%3E%3Ccircle cx='5.3' cy='1.2' r='.4'/%3E%3Ccircle cx='7.3' cy='1.2' r='.4'/%3E%3Ccircle cx='9.3' cy='1.2' r='.4'/%3E%3Ccircle cx='2.3' cy='2.4' r='.4'/%3E%3Ccircle cx='4.3' cy='2.4' r='.4'/%3E%3Ccircle cx='6.3' cy='2.4' r='.4'/%3E%3Ccircle cx='8.3' cy='2.4' r='.4'/%3E%3Ccircle cx='1.3' cy='3.6' r='.4'/%3E%3Ccircle cx='3.3' cy='3.6' r='.4'/%3E%3Ccircle cx='5.3' cy='3.6' r='.4'/%3E%3Ccircle cx='7.3' cy='3.6' r='.4'/%3E%3Ccircle cx='9.3' cy='3.6' r='.4'/%3E%3Ccircle cx='2.3' cy='4.8' r='.4'/%3E%3Ccircle cx='4.3' cy='4.8' r='.4'/%3E%3Ccircle cx='6.3' cy='4.8' r='.4'/%3E%3Ccircle cx='8.3' cy='4.8' r='.4'/%3E%3Ccircle cx='1.3' cy='6' r='.4'/%3E%3Ccircle cx='3.3' cy='6' r='.4'/%3E%3Ccircle cx='5.3' cy='6' r='.4'/%3E%3Ccircle cx='7.3' cy='6' r='.4'/%3E%3Ccircle cx='9.3' cy='6' r='.4'/%3E%3C/g%3E%3C/svg%3E");
}
.features-job .job-company {
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
}
.features-job .job-title { margin: 2px 0 0; }
.features-job .job-title a { color: var(--text); text-decoration: none; }
.features-job .job-title a:hover { color: var(--accent); text-decoration: underline; }

/* El resumen de 300 caracteres, que la plantilla no tiene. */
.job-summary {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* Las etiquetas: la píldora gris de Jobtex. El texto va en --text y no en el
   gris suave porque el gris sobre el gris de la píldora se queda en 3,99:1. */
.features-job .job-tag li span {
  display: inline-block;
  background: var(--chip-bg);
  color: var(--text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 52px;
}
.features-job .job-tag li span.chip-new {
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
}
.features-job .job-tag li span.chip-geo {
  background: var(--geo-bg);
  color: var(--geo);
  font-weight: 700;
}
.features-job .job-tag li span.chip-remote {
  background: var(--accent-bg);
  color: var(--accent);
}

.features-job .job-footer-right { align-items: center; gap: 16px; }
.features-job .price p { margin: 0; font-weight: 600; }
.features-job .price .no-salary { color: var(--muted); font-weight: 400; font-size: 0.875rem; }

/* El botón verde de "Apply" de la plantilla, aquí llevando a LinkedIn. */
.features-job .job-link {
  display: inline-block;
  background: var(--accent);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 8px 24px;
  text-decoration: none;
  white-space: nowrap;
}
.features-job .job-link:hover { opacity: 0.85; color: #ffffff; }

.empty {
  background: var(--panel);
  border: 1px dashed #b1b1b1;
  border-radius: 8px;
  padding: 32px 16px;
  margin-bottom: 24px;
  text-align: center;
  color: var(--muted);
}

/* ------------------------------------------------------------------ *
 * 7. Cómo lo medimos
 * ------------------------------------------------------------------ */

.method { max-width: 68ch; margin-bottom: 32px; }
.method h2 { font-size: 1.25rem; font-weight: 700; margin: 32px 0 8px; }
.method h2:first-child { margin-top: 0; }
.method p { margin-bottom: 12px; color: var(--muted); line-height: 1.7; }

/* ------------------------------------------------------------------ *
 * 8. Alta en los avisos
 * ------------------------------------------------------------------ */

.subscribe {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 40px;
}
.subscribe h2 { font-size: 1.375rem; font-weight: 700; margin-bottom: 8px; }
.subscribe > p { color: var(--muted); max-width: 62ch; margin: 0; }

.sub-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: end;
  gap: 16px;
  margin-top: 20px;
}
.sub-form .field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sub-form .field label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.sub-form .field-check { flex-direction: row; align-items: center; gap: 10px; }
.sub-form .field-check label { font-weight: 400; font-size: 0.9375rem; }
.sub-form .field-check input[type="checkbox"] {
  width: 18px; height: 18px; flex: none; margin: 0;
  accent-color: var(--accent); cursor: pointer;
}
.sub-form input[type="email"],
.sub-form select {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  height: auto;
}
.sub-form button[type="submit"] {
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 12px 24px;
  cursor: pointer;
}
.sub-form button[type="submit"]:hover { opacity: 0.85; }
.sub-form button[type="submit"][disabled] { opacity: 0.6; cursor: progress; }

/* Casilla trampa: nunca la ve nadie, pero sigue en el DOM para los robots. */
.hp,
.sub-form input[name="website"],
.sub-form label[for="website"] {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
}

.sub-msg { margin-top: 12px; font-size: 0.9375rem; min-height: 1.5em; }
.sub-msg.is-ok { color: var(--text); font-weight: 700; }
.sub-msg.is-error { color: var(--danger); font-weight: 700; }
.sub-privacy { margin-top: 8px; color: var(--muted); font-size: 0.8125rem; max-width: 62ch; }

/* ------------------------------------------------------------------ *
 * 9. Gráficos
 *
 * Los pinta src/lib/charts.js en SVG, sin librerías. Los ejes heredan el color
 * con currentColor y las series usan --serie-*.
 * ------------------------------------------------------------------ */

:root {
  --serie-es: #148160;      /* 4,84:1 */
  --serie-us: #c4362c;      /* 5,06:1 */
  --serie-gb: #4340d6;      /* 7,13:1 */
  --serie-de: #9a4b00;      /* 6,21:1 */
}

.chart-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  margin: 0 0 16px;
  overflow-x: auto;         /* el único sitio donde se permite desplazamiento */
}
.chart-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 16px; }
.chart {
  display: block;
  width: 100%;
  height: auto;
  color: var(--muted);
  /* El dibujo mide 720 de ancho. Dejándolo encoger hasta un móvil, las letras
     de los ejes acabarían a 5 px reales. Con este mínimo salen a 10,7 px y la
     tarjeta se desplaza a un lado. */
  min-width: 640px;
}
.chart text { fill: var(--text); font-family: inherit; }

.chart-data {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-top: 16px;
}
.chart-data th, .chart-data td {
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  text-align: right;
  white-space: nowrap;
}
.chart-data th:first-child, .chart-data td:first-child { text-align: left; }
.chart-data th { color: var(--muted); font-weight: 700; }

.chart-empty {
  border: 1px dashed #b1b1b1;
  border-radius: 8px;
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
}
.chart-note { margin-top: 16px; color: var(--muted); font-size: 0.875rem; max-width: 62ch; }

/* ------------------------------------------------------------------ *
 * 10. Pie
 * ------------------------------------------------------------------ */

.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  font-size: 0.875rem;
  padding-block: 40px;
  margin-top: 40px;
}
.site-footer p { margin-bottom: 6px; max-width: 80ch; }
.site-footer .foot-updated { color: #ffffff; font-weight: 700; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; }
/* Sobre el pie oscuro el verde de la marca se queda en 3,87:1, así que aquí
   los enlaces van en el verde claro, que da 5,64:1 sobre ese fondo. */
.foot-nav a { color: var(--accent-line); }

/* ------------------------------------------------------------------ *
 * 11. Pantallas estrechas y movimiento reducido
 * ------------------------------------------------------------------ */

@media (max-width: 991px) {
  .widget-filter.filters { position: static; }
}

@media (max-width: 767px) {
  .header .main-nav .menu { gap: 16px; font-size: 0.9375rem; }
  .features-job .job-footer-right { flex-wrap: wrap; }
  .features-job .job-link { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}