/**
 * lmgcv: portal de CV de Luis González, dirección "ficha técnica".
 *
 * Se lee como la hoja de datos de un componente: reglas negras, tablas,
 * cifras en monoespaciada y un único color de señal (naranja). Redefine los
 * tokens de drupalistas base para que botones, etiquetas y formularios del
 * core sigan el mismo estilo sin parecerse a Tramalia.
 */

@font-face { font-family: "IBM Plex Sans Condensed"; src: url("../fonts/IBMPlexSansCondensed-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("../fonts/IBMPlexSansCondensed-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("../fonts/IBMPlexSansCondensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("../fonts/IBMPlexSansCondensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --font-display: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-sans: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F2F3F5;
  --border: #D3D5D9;
  --border-strong: #1C1D1F;
  --text: #1C1D1F;
  --text-muted: #4D5057;
  --text-subtle: #676A71;
  --primary: #C2410C;
  --primary-hover: #9A3412;
  --on-primary: #FFFFFF;
  --primary-soft: #FDECE2;
  --on-primary-soft: #8A2E07;
  --focus: #C2410C;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --shadow-lg: 0 14px 30px -12px rgba(0, 0, 0, 0.3);
  --cv-signal: #E8590C;
  --cv-java: #8A8D93;
  --cv-rule: 2px solid var(--border-strong);
  --cv-header-h: 56px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131416;
    --surface: #18191C;
    --surface-raised: #1E2024;
    --surface-sunken: #202226;
    --border: #33363C;
    --border-strong: #E6E7EA;
    --text: #ECEDEF;
    --text-muted: #B4B7BE;
    --text-subtle: #8E929A;
    --primary: #FF8A4C;
    --primary-hover: #FFA877;
    --on-primary: #1A0A02;
    --primary-soft: #3A1E10;
    --on-primary-soft: #FFC29E;
    --focus: #FF8A4C;
    --cv-signal: #FF7A2E;
    --cv-java: #7D8189;
  }
}
:root[data-theme="dark"] {
  --bg: #131416;
  --surface: #18191C;
  --surface-raised: #1E2024;
  --surface-sunken: #202226;
  --border: #33363C;
  --border-strong: #E6E7EA;
  --text: #ECEDEF;
  --text-muted: #B4B7BE;
  --text-subtle: #8E929A;
  --primary: #FF8A4C;
  --primary-hover: #FFA877;
  --on-primary: #1A0A02;
  --primary-soft: #3A1E10;
  --on-primary-soft: #FFC29E;
  --focus: #FF8A4C;
  --cv-signal: #FF7A2E;
  --cv-java: #7D8189;
}

html { scroll-padding-top: calc(var(--cv-header-h) + var(--space-4)); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-size: 16px; line-height: 24px; }
h1, h2, h3 { font-family: var(--font-display); }
.cv-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cv-label {
  color: var(--text-subtle);
  font: 500 12px/18px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Cabecera: referencia, índice numerado y la descarga siempre a mano ---- */
.cv-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: var(--cv-rule);
}
.cv-header__inner { display: flex; align-items: center; gap: var(--space-4) var(--space-6); min-height: var(--cv-header-h); }
.cv-part {
  padding: 2px 8px;
  background: var(--text);
  color: var(--bg);
  font: 500 13px/20px var(--font-mono);
  text-decoration: none;
  white-space: nowrap;
}
.cv-part:hover { color: var(--bg); background: var(--primary); }
.cv-nav { display: flex; gap: var(--space-5); }
.cv-nav a { color: var(--text-muted); font: 500 13px/20px var(--font-mono); text-decoration: none; white-space: nowrap; }
.cv-nav a:hover { color: var(--primary); }
.cv-header__tools { display: flex; align-items: center; gap: var(--space-3); margin-inline-start: auto; }
.cv-lang { display: inline-flex; gap: 2px; font: 500 13px/20px var(--font-mono); color: var(--text-subtle); }
.cv-lang a { padding: 2px 4px; color: var(--text-subtle); text-decoration: none; }
.cv-lang a[aria-current="true"] { color: var(--text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cv-icon-button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.cv-icon-button:hover { color: var(--text); border-color: var(--border-strong); }
.cv-theme-toggle__dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cv-theme-toggle__light { display: none; }
  :root:not([data-theme="light"]) .cv-theme-toggle__dark { display: inline; }
}
:root[data-theme="dark"] .cv-theme-toggle__light { display: none; }
:root[data-theme="dark"] .cv-theme-toggle__dark { display: inline; }

.cv-export { position: relative; }
.cv-export > summary { list-style: none; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.cv-export > summary::-webkit-details-marker { display: none; }
.cv-export > summary .cv-chevron { display: inline-flex; transition: transform 0.15s; }
.cv-export[open] > summary .cv-chevron { transform: rotate(180deg); }
.cv-export__menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: 30;
  display: grid;
  width: min(300px, calc(100vw - 32px));
  border: var(--cv-rule);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}
.cv-export__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}
.cv-export__item:hover { background: var(--primary-soft); color: var(--on-primary-soft); }
.cv-export__item .dl-icon { grid-row: span 2; color: var(--primary); }
.cv-export__label { font: 600 15px/20px var(--font-sans); }
.cv-export__hint { font-size: 13px; line-height: 18px; color: var(--text-subtle); }
.cv-export__foot { margin: 0; padding: var(--space-2) var(--space-4); color: var(--text-subtle); font: 400 12px/18px var(--font-mono); }

@media (max-width: 900px) { .cv-nav { display: none; } }
@media (max-width: 480px) {
  .cv-export > summary .cv-export__word { display: none; }
  .cv-header__inner { gap: var(--space-3); }
}

/* Secciones numeradas -------------------------------------------------- */
.cv-sheet { border-bottom: var(--cv-rule); }
.cv-section { padding-block: var(--space-8) var(--space-12); border-bottom: 1px solid var(--border); }
.cv-section:last-child { border-bottom: 0; }
.cv-section__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.cv-section__title span { color: var(--primary); font: 500 14px/20px var(--font-mono); }
.cv-section__lead { margin: calc(var(--space-3) * -1) 0 var(--space-5); max-width: 70ch; color: var(--text-muted); }

/* 01 Resumen: título y tabla de características */
.cv-summary { display: grid; gap: var(--space-8); padding-block: var(--space-8) var(--space-12); border-bottom: var(--cv-rule); }
@media (min-width: 900px) { .cv-summary { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-12); } }
.cv-summary__copy { display: grid; gap: var(--space-3); justify-items: start; align-content: start; min-width: 0; }
.cv-summary__doc { color: var(--primary); }
.cv-summary h1 { margin: 0; font-size: clamp(36px, 5.4vw, 60px); line-height: 1; font-weight: 700; letter-spacing: -0.01em; }
.cv-summary__headline { margin: var(--space-1) 0 0; font-size: 19px; line-height: 26px; font-weight: 600; }
.cv-summary__text { margin: 0; max-width: 62ch; color: var(--text-muted); font-size: 17px; line-height: 27px; }
.cv-summary__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-3); }
.cv-summary__actions .dl-button--primary { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.cv-contact { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font: 500 14px/20px var(--font-mono); }
.cv-contact a { color: var(--text); }

.cv-spec { width: 100%; border-collapse: collapse; align-self: start; font-size: 15px; line-height: 22px; }
.cv-spec caption { padding-bottom: var(--space-2); text-align: start; }
.cv-spec th, .cv-spec td { padding: 9px 0; border-top: 1px solid var(--border); text-align: start; vertical-align: top; }
.cv-spec tr:first-child > * { border-top: var(--cv-rule); }
.cv-spec tr:last-child > * { border-bottom: 1px solid var(--border); }
.cv-spec th { width: 40%; padding-inline-end: var(--space-4); color: var(--text-muted); font-weight: 500; }
.cv-spec td { font-weight: 600; }
.cv-spec td small { display: block; color: var(--text-subtle); font-weight: 400; font-size: 13px; }

/* 02 Parámetros: tabla de habilidades, cada fila filtra el rango */
.cv-scroll { overflow-x: auto; }
.cv-params { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.cv-params thead th { padding: 6px var(--space-3) 6px 0; border-bottom: var(--cv-rule); text-align: start; }
.cv-params .num { text-align: end; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cv-params tbody th[colspan] { padding: var(--space-4) 0 var(--space-1); text-align: start; color: var(--primary); }
.cv-params td { padding: 0 var(--space-3) 0 0; border-bottom: 1px solid var(--border); }
.cv-params td:first-child { padding: 0; }
.cv-skill {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 38px;
  padding: 0 var(--space-2);
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.cv-skill::before { content: "+"; color: var(--text-subtle); font: 500 13px/1 var(--font-mono); width: 10px; }
.cv-skill:hover { background: var(--surface-sunken); }
.cv-skill[aria-pressed="true"] { background: var(--primary-soft); color: var(--on-primary-soft); font-weight: 600; }
.cv-skill[aria-pressed="true"]::before { content: "●"; color: var(--primary); }
.cv-skill--core { font-weight: 600; }
.cv-skill__origin { color: var(--primary); font-size: 11px; }
tr:has(.cv-skill[aria-pressed="true"]) td { background: var(--primary-soft); }
.cv-meter { width: 30%; min-width: 160px; }
.cv-meter span { display: block; height: 8px; background: var(--cv-signal); }
.cv-meter em { color: var(--text-subtle); font: 400 12px/18px var(--font-mono); font-style: normal; }

.cv-filter-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-height: 44px;
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-inline-start: 4px solid var(--cv-signal);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 15px;
}
.cv-filter-status strong { color: var(--text); }
.cv-filter-status button { margin-inline-start: auto; }

/* 03 Rango de operación: un carril por puesto, a escala de años */
.cv-range { display: grid; gap: 6px; min-width: 640px; }
.cv-range__row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-4); align-items: center; transition: opacity 0.2s; }
.cv-range__label { overflow: hidden; font-size: 14px; line-height: 20px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.cv-range__track { position: relative; height: 18px; background: repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px calc(100% / var(--years) * 2)); }
.cv-range__bar { position: absolute; top: 3px; bottom: 3px; background: var(--cv-signal); }
.cv-range__bar--java { background: var(--cv-java); }
.cv-range__axis { position: relative; height: 22px; border-top: var(--cv-rule); color: var(--text-subtle); font: 500 11px/22px var(--font-mono); font-variant-numeric: tabular-nums; }
.cv-range__axis span { position: absolute; transform: translateX(-50%); }
.cv-range__axis span:first-child { transform: none; }
.cv-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin: var(--space-3) 0 0; color: var(--text-muted); font-size: 14px; }
.cv-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.cv-legend i { display: inline-block; width: 16px; height: 8px; background: var(--cv-signal); }
.cv-legend i.is-java { background: var(--cv-java); }
.is-filtering [data-cv-job].is-dim { opacity: 0.2; }

/* 04 Historial de puestos */
.cv-jobs { margin: 0; padding: 0; list-style: none; border-top: var(--cv-rule); }
.cv-job {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border);
  transition: opacity 0.2s;
}
.cv-job__when { display: grid; align-content: start; gap: 2px; font: 500 13px/20px var(--font-mono); font-variant-numeric: tabular-nums; }
.cv-job__when small { color: var(--text-subtle); font-size: 12px; }
.cv-job__body { display: grid; gap: var(--space-2); min-width: 0; }
.cv-job__title { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; }
.cv-job__company { color: var(--text-muted); font-weight: 500; }
.cv-job__where { color: var(--text-subtle); font-size: 14px; }
.cv-job__summary { margin: 0; max-width: 72ch; color: var(--text-muted); }
.cv-job__highlights { margin: 0; padding-inline-start: 1.1em; color: var(--text-muted); }
.cv-job__tags { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.cv-job__tags .dl-tag { min-height: 22px; padding: 0 8px; font: 500 12px/18px var(--font-mono); }
.cv-job__tags .dl-tag.is-match { border-color: var(--primary); background: var(--primary-soft); color: var(--on-primary-soft); }
@media (max-width: 640px) {
  .cv-job { grid-template-columns: minmax(0, 1fr); }
  .cv-job__when { grid-auto-flow: column; justify-content: start; gap: var(--space-3); }
}

/* 05 Formación, certificaciones, idiomas y proyecto */
.cv-annex { display: grid; gap: var(--space-8) var(--space-12); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.cv-annex .cv-spec th { width: 34%; }
.cv-annex a { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; font-size: 14px; }
.cv-cefr { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; margin-top: 6px; max-width: 260px; }
.cv-cefr span { padding: 1px 0; border: 1px solid var(--border); color: var(--text-subtle); font: 500 11px/16px var(--font-mono); text-align: center; }
.cv-cefr span.is-on { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.cv-ai { color: var(--primary); }

/* Pie */
.cv-footer { padding-block: var(--space-6); color: var(--text-subtle); font: 400 13px/20px var(--font-mono); }
.cv-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; justify-content: space-between; }
.cv-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.cv-toast {
  position: fixed;
  inset-block-end: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  inset-inline-start: 50%;
  z-index: 40;
  transform: translateX(-50%);
  padding: var(--space-2) var(--space-4);
  background: var(--text);
  color: var(--bg);
  font: 500 13px/20px var(--font-mono);
}

@media print {
  .cv-header, .cv-summary__actions, .cv-filter-status, .cv-footer__links { display: none !important; }
}

/* 06 Contacto: el webform "contact" del sitio, con los estilos del tema */
.cv-contact-section { display: grid; gap: var(--space-8) var(--space-12); }
@media (min-width: 900px) { .cv-contact-section { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
.cv-contact-section .cv-section__title { grid-column: 1 / -1; margin-bottom: 0; }
.cv-contact-section .cv-section__lead { margin: 0; }
.cv-contact-form { min-width: 0; }
.cv-form { display: grid; gap: var(--space-5); min-width: 0; }
.cv-form .form-item { display: grid; gap: var(--space-1); margin: 0; min-width: 0; }
.cv-form label { font: 500 12px/18px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.cv-form label.form-required::after { content: "*"; color: var(--primary); margin-inline-start: 2px; }
.cv-form input.form-text, .cv-form input.form-email, .cv-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  font: 400 16px/24px var(--font-sans);
}
.cv-form textarea { min-height: 160px; resize: vertical; }
.cv-form input.form-text:hover, .cv-form input.form-email:hover, .cv-form textarea:hover { background: var(--surface-sunken); }
.cv-form input:focus-visible, .cv-form textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; background: var(--surface); }
.cv-form .error { border-color: var(--cv-danger); border-width: 2px; }
.cv-form .form-item--error-message { color: var(--cv-danger); font: 500 13px/18px var(--font-mono); }
.cv-form .form-actions { margin: 0; }
.cv-form .form-actions .dl-button { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.cv-form .grippie, .cv-form .form-item .description { display: none; }
.cv-contact-form .messages, .cv-contact-form [role="contentinfo"] { margin: 0 0 var(--space-4); padding: var(--space-4); border: 1px solid var(--border-strong); border-inline-start: 6px solid var(--success-strip); background: var(--surface-sunken); }

/* reCAPTCHA v2 only ships a light widget (the iframe cannot be styled), so invert it in dark mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .g-recaptcha { filter: invert(1) hue-rotate(180deg); }
}
:root[data-theme="dark"] .g-recaptcha { filter: invert(1) hue-rotate(180deg); }