/*
  Job One+ · tema único para las páginas Laravel (Blade) y cualquier página fuera del front único.

  Mismo diseño que el perfil (joboneplus.com/app/#/me, one/src/platform/kit.css y one/src/profile/dark.ts):
  neutros cálidos (fondo #FAF9F5, superficies blancas, líneas #E6E3D8; oscuro #262624 / #30302E), tinta #141413,
  acento elegido por la persona (--acc-* de theme.js, ya ajustado a contraste AA en claro y en oscuro), Plus Jakarta
  Sans en la interfaz, Source Serif 4 en títulos, IBM Plex Mono en cifras. Sin azules.

  Requiere static/jo/theme.js en <head> (pone html[data-theme] y las variables --acc-*). Sin él, quedan los valores de
  respaldo del diseño (magenta del logo, tema claro).

  Capas:
  1. Tokens --jo-* en html[data-theme] (claro/oscuro, alto contraste, daltonismo). Cualquier página puede usarlos.
  2. Puente con Bootstrap 5.3 (--bs-*) y con las hojas heredadas (custom-bootstrap-colors.css, global.css): los
     selectores llevan html[data-theme] para ganar a [data-bs-theme] y a :root sin depender del orden de carga.
  3. Componentes .jo-* (botones, campos, tarjetas, chips, etiquetas, barra superior, pie, tablas, avisos, modal,
     logotipo con módulo). Solo se aplican con su clase: no cambian maquetas existentes.
*/

/* ───── 1. Tokens ───── */
html[data-theme], html:not([data-theme]) {
  --jo-bg: #FAF9F5; --jo-bg-2: #F5F4EE; --jo-surface: #FFFFFF; --jo-surface-2: #F5F4EE; --jo-hover: #F0EEE6; --jo-top: #F0EEE6;
  --jo-line: #E6E3D8; --jo-line-2: #EFEDE5; --jo-line-3: #CFCBBE;
  --jo-ink: #141413; --jo-tx: #3D3D3A; --jo-mut: #66655F; --jo-ink-2: #3D3D3A; --jo-ink-3: #5E5D59;
  --jo-acc: var(--acc-l, #B61272); --jo-acc-h: var(--acc-l-h, #960F5E); --jo-acc-soft: var(--acc-l-soft, #F6E3EE);
  --jo-on-acc: var(--acc-l-on, #FFFFFF); --jo-acc-rgb: var(--acc-l-rgb, 182, 18, 114);
  --jo-ads: var(--ads-l, #141413); --jo-ads-soft: var(--ads-l-soft, #F0EEE6); --jo-on-ads: var(--ads-l-on, #FFFFFF);
  --jo-logo-plus: var(--logo-plus-l, #C4137B);
  --jo-dark: #141413; --jo-on-dark: #FFFFFF; --jo-dark-h: #3D3D3A; --jo-block: #1F1E1D; --jo-on-block: #FAF9F5;
  /* Acento sobre bloques que son oscuros en los dos temas (pie, héroes oscuros): siempre la versión ajustada a oscuro. */
  --jo-acc-on-block: var(--acc-d, #F066B7); --jo-on-acc-on-block: var(--acc-d-on, #141413);
  --jo-ok: #2A7347; --jo-ok-soft: #E3F1E7; --jo-warn: #8F5409; --jo-warn-soft: #FBF0DD; --jo-err: #B42318; --jo-err-soft: #FBE9E7;
  --jo-info: #5E5D59; --jo-info-soft: #F0EEE6; --jo-pur: #6D28D9; --jo-pur-soft: #F1E8FF;
  --jo-scrim: rgba(20, 20, 19, .5);
  --jo-shadow: 0 1px 2px rgba(20, 20, 19, .04), 0 4px 14px rgba(20, 20, 19, .05);
  --jo-shadow-lg: 0 12px 40px rgba(20, 20, 19, .16);
  --jo-r-sm: 8px; --jo-r: 12px; --jo-r-lg: 16px; --jo-r-xl: 20px; --jo-pill: 999px;
  --jo-s1: 4px; --jo-s2: 8px; --jo-s3: 12px; --jo-s4: 16px; --jo-s5: 20px; --jo-s6: 24px; --jo-s8: 32px;
  --jo-font: var(--jo-f-ui, "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif);
  --jo-head: var(--jo-f-head, "Source Serif 4", Georgia, "Times New Roman", serif);
  --jo-num: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --jo-lock: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --jo-fs: var(--fs, 1);
  --jo-focus: 0 0 0 3px var(--jo-acc-soft);
  color-scheme: light;
}
html[data-theme="dark"] {
  --jo-bg: #262624; --jo-bg-2: #2A2A27; --jo-surface: #30302E; --jo-surface-2: #2A2A27; --jo-hover: #3A3936; --jo-top: #1F1E1D;
  --jo-line: #42413B; --jo-line-2: #393833; --jo-line-3: #5A5850;
  --jo-ink: #FAF9F5; --jo-tx: #E4E2D9; --jo-mut: #A6A39A; --jo-ink-2: #E4E2D9; --jo-ink-3: #C9C6BC;
  --jo-acc: var(--acc-d, #F066B7); --jo-acc-h: var(--acc-d-h, #F386C6); --jo-acc-soft: var(--acc-d-soft, #3A2C33);
  --jo-on-acc: var(--acc-d-on, #141413); --jo-acc-rgb: var(--acc-d-rgb, 240, 102, 183);
  --jo-ads: var(--ads-d, #E4E2D9); --jo-ads-soft: var(--ads-d-soft, #3A3936); --jo-on-ads: var(--ads-d-on, #141413);
  --jo-logo-plus: var(--logo-plus-d, #F066B7);
  --jo-dark: #FAF9F5; --jo-on-dark: #141413; --jo-dark-h: #E4E2D9; --jo-block: #1F1E1D; --jo-on-block: #FAF9F5;
  --jo-ok: #6CC28E; --jo-ok-soft: #21352A; --jo-warn: #E4A853; --jo-warn-soft: #3A2F1E; --jo-err: #F28B82; --jo-err-soft: #3D2220;
  --jo-info: #C9C6BC; --jo-info-soft: #3A3936; --jo-pur: #C9A8FF; --jo-pur-soft: #2E2742;
  --jo-scrim: rgba(0, 0, 0, .6);
  --jo-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 4px 14px rgba(0, 0, 0, .2);
  --jo-shadow-lg: 0 18px 50px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
/* Alto contraste y paleta para daltonismo (Configuración → Accesibilidad del perfil) */
html[data-contrast] { --jo-mut: #3A3934; --jo-tx: #1F1E1D; --jo-line: #8C897E; --jo-line-2: #A3A094; --jo-line-3: #6F6E68; }
html[data-contrast][data-theme="dark"] { --jo-mut: #E4E2D9; --jo-tx: #FAF9F5; --jo-line: #8F8C82; --jo-line-2: #6F6C63; --jo-line-3: #A6A39A; }
html[data-cvd] { --jo-ok: #8F5409; --jo-ok-soft: #FBF0DD; --jo-warn: #9C4F00; --jo-warn-soft: #FBEBDC; }
html[data-cvd][data-theme="dark"] { --jo-ok: #E4A853; --jo-ok-soft: #3A2F1E; --jo-warn: #F0A24B; --jo-warn-soft: #3A2A18; }

/* Base: fondo, tinta y letra del perfil en toda página que cargue el tema. */
html[data-theme] { background: var(--jo-bg); }
html[data-theme] body { background-color: var(--jo-bg); color: var(--jo-ink); font-family: var(--jo-font); -webkit-font-smoothing: antialiased; }
/* Enlaces sin estilo propio: nunca el azul por defecto del navegador; toman el acento como en el perfil. Prioridad mínima
   (:where) para no pisar ningún estilo de la página. */
:where(html[data-theme]) :where(a:not([class])) { color: var(--jo-acc); }
:where(html[data-theme]) :where(a:not([class]):visited) { color: var(--jo-acc); }
html[data-theme] ::selection { background: var(--jo-acc-soft); color: var(--jo-ink); }
html[data-focus] :focus-visible { outline: 3px solid var(--jo-acc) !important; outline-offset: 3px; box-shadow: 0 0 0 7px var(--jo-acc-soft) !important; }
html[data-underline] main a:not([class*="btn"]):not([role="tab"]):not(.jo-logo) { text-decoration: underline; text-underline-offset: 3px; }
html[data-spacing] body { line-height: 1.75; letter-spacing: .02em; word-spacing: .1em; }
html[data-motion] *, html[data-motion] *::before, html[data-motion] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* ───── 2. Puente con Bootstrap 5.3 y las hojas heredadas ───── */
html[data-theme] {
  --bs-body-bg: var(--jo-bg); --bs-body-bg-rgb: 250, 249, 245; --bs-body-color: var(--jo-ink); --bs-body-color-rgb: 20, 20, 19;
  --bs-emphasis-color: var(--jo-ink); --bs-emphasis-color-rgb: 20, 20, 19;
  --bs-heading-color: inherit; /* como Bootstrap: el título toma el color de su bloque (héroes oscuros o de acento) */
  --bs-secondary-color: var(--jo-mut); --bs-secondary-color-rgb: 102, 101, 95; --bs-tertiary-color: var(--jo-mut);
  --bs-secondary-bg: var(--jo-surface); --bs-tertiary-bg: var(--jo-surface-2); --bs-tertiary-bg-rgb: 245, 244, 238;
  --bs-border-color: var(--jo-line); --bs-border-color-translucent: rgba(20, 20, 19, .1);
  --bs-primary: var(--jo-acc); --bs-primary-rgb: var(--jo-acc-rgb);
  --bs-info: var(--jo-info); --bs-info-rgb: 94, 93, 89;
  --bs-dark: var(--jo-dark); --bs-dark-rgb: 20, 20, 19; --bs-light: var(--jo-surface-2); --bs-light-rgb: 245, 244, 238;
  --bs-secondary: var(--jo-mut); --bs-secondary-rgb: 102, 101, 95;
  --bs-white-rgb: 255, 255, 255;
  --bs-link-color: var(--jo-acc); --bs-link-color-rgb: var(--jo-acc-rgb);
  --bs-link-hover-color: var(--jo-acc-h); --bs-link-hover-color-rgb: var(--jo-acc-rgb);
  --bs-primary-text-emphasis: var(--jo-acc-h); --bs-primary-bg-subtle: var(--jo-acc-soft); --bs-primary-border-subtle: var(--jo-line-3);
  --bs-info-text-emphasis: var(--jo-tx); --bs-info-bg-subtle: var(--jo-info-soft); --bs-info-border-subtle: var(--jo-line-3);
  --bs-focus-ring-color: rgba(var(--jo-acc-rgb), .25);
  --bs-body-font-family: var(--jo-font); --bs-font-sans-serif: var(--jo-font);
  --bs-border-radius: 10px; --bs-border-radius-sm: 8px; --bs-border-radius-lg: 16px; --bs-border-radius-xl: 20px;
  --bs-box-shadow-sm: var(--jo-shadow); --bs-box-shadow: var(--jo-shadow); --bs-box-shadow-lg: var(--jo-shadow-lg);
  --bs-code-color: var(--jo-acc);
  /* Variables del tema heredado (joboneplus-theme.css, custom-bootstrap-colors.css) a los tokens del perfil */
  --jo-magenta: var(--jo-acc); --jo-magenta-bright: var(--jo-acc-h); --jo-magenta-rgb: var(--jo-acc-rgb);
  --jo-ink-strong: var(--jo-ink); --jo-navy: var(--jo-ink); --jo-paper: var(--jo-bg);
  --jo-font-display: var(--jo-head); --jo-font-body: var(--jo-font); --jo-font-brand: var(--jo-font); --jo-font-mono: var(--jo-num);
  --corporate-color: var(--jo-acc); --corporate-hover: var(--jo-acc-h);
  --corporate-light: rgba(var(--jo-acc-rgb), .1); --corporate-lighter: rgba(var(--jo-acc-rgb), .05);
  --success-color: var(--jo-ok); --danger-color: var(--jo-err); --secondary-color: var(--jo-mut);
  --bg: var(--jo-bg); --layer: var(--jo-surface); --layer2: var(--jo-surface-2); --field: var(--jo-surface); --field-hover: var(--jo-hover);
  --bd: var(--jo-line); --bd-strong: var(--jo-line-3); --t1: var(--jo-ink); --t2: var(--jo-mut); --t3: var(--jo-mut);
  --inverse: var(--jo-ink); --on-inverse: var(--jo-surface);
  --accent: var(--jo-acc); --accent-hover: var(--jo-acc-h); --accent-soft: var(--jo-acc-soft); --accent-text: var(--jo-acc-h);
  --mg-600: var(--jo-acc); --mg-500: var(--jo-acc); --mg-700: var(--jo-acc-h);
  --ok: var(--jo-ok); --ok-bg: var(--jo-ok-soft); --warn: var(--jo-warn); --warn-bg: var(--jo-warn-soft); --err: var(--jo-err); --err-bg: var(--jo-err-soft);
  --navy-soft: var(--jo-hover);
}
html[data-theme="dark"] {
  --bs-body-bg-rgb: 38, 38, 36; --bs-body-color-rgb: 250, 249, 245; --bs-emphasis-color-rgb: 250, 249, 245;
  --bs-secondary-color-rgb: 166, 163, 154; --bs-tertiary-bg-rgb: 42, 42, 39;
  --bs-border-color-translucent: rgba(255, 255, 255, .1);
  --bs-dark-rgb: 250, 249, 245; --bs-light-rgb: 42, 42, 39; --bs-secondary-rgb: 166, 163, 154; --bs-info-rgb: 201, 198, 188;
  --bs-card-bg: var(--jo-surface); --bs-card-border-color: var(--jo-line); --bs-card-cap-bg: var(--jo-surface-2);
  --bs-list-group-bg: var(--jo-surface); --bs-modal-bg: var(--jo-surface); --bs-dropdown-bg: var(--jo-surface);
  --bs-dropdown-link-color: var(--jo-ink); --bs-dropdown-link-hover-bg: var(--jo-hover); --bs-dropdown-border-color: var(--jo-line);
  --bs-offcanvas-bg: var(--jo-surface);
}
/* Componentes de Bootstrap con el acento (Bootstrap escribe su azul literal en cada componente) */
html[data-theme] .btn { --bs-btn-font-family: var(--jo-font); --bs-btn-font-weight: 700; border-radius: var(--jo-pill); }
html[data-theme] .btn-sm { border-radius: var(--jo-pill); }
html[data-theme] .btn-primary, html[data-theme] .btn-info, html[data-theme] .btn-brand {
  --bs-btn-bg: var(--jo-acc); --bs-btn-border-color: var(--jo-acc); --bs-btn-color: var(--jo-on-acc);
  --bs-btn-hover-bg: var(--jo-acc-h); --bs-btn-hover-border-color: var(--jo-acc-h); --bs-btn-hover-color: var(--jo-on-acc);
  --bs-btn-active-bg: var(--jo-acc-h); --bs-btn-active-border-color: var(--jo-acc-h); --bs-btn-active-color: var(--jo-on-acc);
  --bs-btn-disabled-bg: var(--jo-acc); --bs-btn-disabled-border-color: var(--jo-acc); --bs-btn-disabled-color: var(--jo-on-acc);
  background-color: var(--jo-acc) !important; border-color: var(--jo-acc) !important; color: var(--jo-on-acc) !important; box-shadow: none;
}
html[data-theme] .btn-primary:hover, html[data-theme] .btn-primary:focus, html[data-theme] .btn-primary:active,
html[data-theme] .btn-info:hover, html[data-theme] .btn-brand:hover { background-color: var(--jo-acc-h) !important; border-color: var(--jo-acc-h) !important; color: var(--jo-on-acc) !important; filter: none; transform: none; }
html[data-theme] .btn-primary *, html[data-theme] .btn-info *, html[data-theme] .btn-brand * { color: inherit !important; }
html[data-theme] .btn-dark { --bs-btn-bg: var(--jo-dark); --bs-btn-border-color: var(--jo-dark); --bs-btn-color: var(--jo-on-dark); --bs-btn-hover-bg: var(--jo-dark-h); --bs-btn-hover-border-color: var(--jo-dark-h); --bs-btn-hover-color: var(--jo-on-dark); }
html[data-theme] .btn-outline-primary, html[data-theme] .btn-outline-info, html[data-theme] .btn-outline-brand {
  --bs-btn-color: var(--jo-acc); --bs-btn-border-color: var(--jo-acc); --bs-btn-hover-bg: var(--jo-acc); --bs-btn-hover-color: var(--jo-on-acc);
  color: var(--jo-acc) !important; border-color: var(--jo-acc) !important; background: transparent !important;
}
html[data-theme] .btn-outline-primary:hover, html[data-theme] .btn-outline-info:hover, html[data-theme] .btn-outline-brand:hover { background: var(--jo-acc) !important; color: var(--jo-on-acc) !important; }
html[data-theme] .btn-outline-secondary, html[data-theme] .btn-outline-dark, html[data-theme] .btn-light {
  --bs-btn-color: var(--jo-tx); --bs-btn-bg: var(--jo-surface); --bs-btn-border-color: var(--jo-line-3);
  --bs-btn-hover-color: var(--jo-ink); --bs-btn-hover-bg: var(--jo-surface); --bs-btn-hover-border-color: var(--jo-ink);
  --bs-btn-active-color: var(--jo-ink); --bs-btn-active-bg: var(--jo-hover); --bs-btn-active-border-color: var(--jo-ink);
}
html[data-theme] .btn-secondary { --bs-btn-bg: var(--jo-hover); --bs-btn-color: var(--jo-ink); --bs-btn-border-color: var(--jo-line-3); --bs-btn-hover-bg: var(--jo-line); --bs-btn-hover-color: var(--jo-ink); --bs-btn-hover-border-color: var(--jo-ink); }
html[data-theme] .btn-link { color: var(--jo-acc); } html[data-theme] .btn-link:hover { color: var(--jo-acc-h); }
html[data-theme] .text-primary, html[data-theme] .text-info, html[data-theme] .link-primary { color: var(--jo-acc) !important; }
html[data-theme] .text-success { color: var(--jo-ok) !important; } html[data-theme] .text-danger { color: var(--jo-err) !important; } html[data-theme] .text-warning { color: var(--jo-warn) !important; }
html[data-theme] .text-muted, html[data-theme] .text-secondary, html[data-theme] .text-body-secondary { color: var(--jo-mut) !important; }
html[data-theme] .text-dark, html[data-theme] .text-body, html[data-theme] .text-body-emphasis, html[data-theme] .text-black { color: var(--jo-ink) !important; }
html[data-theme] .bg-primary, html[data-theme] .bg-info { background-color: rgba(var(--jo-acc-rgb), var(--bs-bg-opacity, 1)) !important; }
html[data-theme] .bg-primary:not([class*="bg-opacity"]), html[data-theme] .bg-info:not([class*="bg-opacity"]) { color: var(--jo-on-acc) !important; }
html[data-theme] .bg-white, html[data-theme] .bg-body { background-color: var(--jo-surface) !important; }
html[data-theme] .bg-light, html[data-theme] .bg-body-tertiary, html[data-theme] .bg-body-secondary { background-color: var(--jo-surface-2) !important; }
html[data-theme] .bg-dark { background-color: var(--jo-block) !important; color: var(--jo-on-block) !important; }
html[data-theme] .border-primary { border-color: var(--jo-acc) !important; }
html[data-theme] .border, html[data-theme] .border-top, html[data-theme] .border-bottom, html[data-theme] .border-start, html[data-theme] .border-end { border-color: var(--jo-line) !important; }
html[data-theme] .card { --bs-card-bg: var(--jo-surface); --bs-card-border-color: var(--jo-line); --bs-card-border-radius: var(--jo-r-lg); --bs-card-inner-border-radius: calc(var(--jo-r-lg) - 1px); --bs-card-cap-bg: transparent; --bs-card-color: var(--jo-ink); background-color: var(--jo-surface) !important; border-color: var(--jo-line) !important; color: var(--jo-ink); }
html[data-theme] .card-header, html[data-theme] .card-footer { background-color: transparent !important; border-color: var(--jo-line-2) !important; }
html[data-theme] .shadow-sm, html[data-theme] .shadow { box-shadow: var(--jo-shadow) !important; }
html[data-theme] .shadow-lg { box-shadow: var(--jo-shadow-lg) !important; }
html[data-theme] .form-control, html[data-theme] .form-select, html[data-theme] .input-group-text {
  background-color: var(--jo-surface); color: var(--jo-ink); border: 1.5px solid var(--jo-line); border-radius: 10px; font-family: var(--jo-font);
}
html[data-theme] .form-control::placeholder { color: var(--jo-mut); opacity: 1; }
html[data-theme] .form-control:focus, html[data-theme] .form-select:focus { border-color: var(--jo-acc); box-shadow: var(--jo-focus); background-color: var(--jo-surface); color: var(--jo-ink); }
html[data-theme] .form-check-input { background-color: var(--jo-surface); border-color: var(--jo-line-3); }
html[data-theme] .form-check-input:checked { background-color: var(--jo-acc); border-color: var(--jo-acc); }
html[data-theme] .form-check-input:focus { border-color: var(--jo-acc); box-shadow: var(--jo-focus); }
html[data-theme] .form-switch .form-check-input:focus:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23CFCBBE'/%3e%3c/svg%3e"); }
html[data-theme] .form-range::-webkit-slider-thumb { background-color: var(--jo-acc); }
html[data-theme] .form-range::-moz-range-thumb { background-color: var(--jo-acc); }
html[data-theme] .nav-link { color: var(--jo-tx); } html[data-theme] .nav-link:hover, html[data-theme] .nav-link:focus { color: var(--jo-ink); }
html[data-theme] .nav-pills .nav-link.active, html[data-theme] .nav-pills .show > .nav-link { background-color: var(--jo-acc); color: var(--jo-on-acc); }
html[data-theme] .nav-tabs { border-color: var(--jo-line); }
html[data-theme] .nav-tabs .nav-link.active { color: var(--jo-acc); background: transparent; border-color: transparent transparent var(--jo-acc); border-bottom-width: 2.5px; }
html[data-theme] .page-link { color: var(--jo-ink); background: var(--jo-surface); border-color: var(--jo-line); }
html[data-theme] .page-link:hover { color: var(--jo-ink); background: var(--jo-hover); }
html[data-theme] .page-link:focus { box-shadow: var(--jo-focus); }
html[data-theme] .page-item.active .page-link, html[data-theme] .active > .page-link { background-color: var(--jo-dark); border-color: var(--jo-dark); color: var(--jo-on-dark); }
html[data-theme] .dropdown-menu { background: var(--jo-surface); border-color: var(--jo-line); border-radius: var(--jo-r); box-shadow: var(--jo-shadow-lg); }
html[data-theme] .dropdown-item { color: var(--jo-ink); } html[data-theme] .dropdown-item:hover { background: var(--jo-hover); color: var(--jo-ink); }
html[data-theme] .dropdown-item.active, html[data-theme] .dropdown-item:active { background-color: var(--jo-acc-soft); color: var(--jo-acc); }
html[data-theme] .list-group-item { background: var(--jo-surface); border-color: var(--jo-line); color: var(--jo-ink); }
html[data-theme] .list-group-item.active { background-color: var(--jo-acc); border-color: var(--jo-acc); color: var(--jo-on-acc); }
html[data-theme] .progress { background: var(--jo-line-2); } html[data-theme] .progress-bar { background-color: var(--jo-acc); }
html[data-theme] .accordion-button:not(.collapsed) { color: var(--jo-acc); background-color: var(--jo-acc-soft); }
html[data-theme] .accordion-button:focus { box-shadow: var(--jo-focus); border-color: var(--jo-acc); }
html[data-theme] .modal-content { background: var(--jo-surface); color: var(--jo-ink); border: 0; border-radius: var(--jo-r-xl); box-shadow: var(--jo-shadow-lg); }
html[data-theme] .modal-header, html[data-theme] .modal-footer { border-color: var(--jo-line-2); }
html[data-theme] .offcanvas { background: var(--jo-surface) !important; color: var(--jo-ink); }
html[data-theme] .table { --bs-table-color: var(--jo-ink); --bs-table-bg: transparent; --bs-table-border-color: var(--jo-line-2); --bs-table-striped-bg: var(--jo-surface-2); --bs-table-hover-bg: var(--jo-surface-2); }
html[data-theme] .table > thead th { color: var(--jo-mut); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-bottom-color: var(--jo-line); }
html[data-theme] .alert { border-radius: var(--jo-r); border: 0; color: var(--jo-tx); }
html[data-theme] .alert-primary, html[data-theme] .alert-info, html[data-theme] .alert-secondary, html[data-theme] .alert-light { background: var(--jo-info-soft); color: var(--jo-tx); }
html[data-theme] .alert-success { background: var(--jo-ok-soft); color: var(--jo-ok); }
html[data-theme] .alert-warning { background: var(--jo-warn-soft); color: var(--jo-warn); }
html[data-theme] .alert-danger { background: var(--jo-err-soft); color: var(--jo-err); }
html[data-theme] .badge { border-radius: var(--jo-pill); font-weight: 700; }
html[data-theme] .badge.bg-primary, html[data-theme] .badge.bg-info { background: var(--jo-acc-soft) !important; color: var(--jo-acc) !important; }
html[data-theme] .badge.bg-success { background: var(--jo-ok-soft) !important; color: var(--jo-ok) !important; }
html[data-theme] .badge.bg-warning { background: var(--jo-warn-soft) !important; color: var(--jo-warn) !important; }
html[data-theme] .badge.bg-danger { background: var(--jo-err-soft) !important; color: var(--jo-err) !important; }
html[data-theme] .badge.bg-secondary, html[data-theme] .badge.bg-light { background: var(--jo-hover) !important; color: var(--jo-tx) !important; }
html[data-theme] .btn-close { filter: none; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
html[data-theme] hr { border-color: var(--jo-line); opacity: 1; }
html[data-theme] h1, html[data-theme] .h1, html[data-theme] .display-1, html[data-theme] .display-2, html[data-theme] .display-3, html[data-theme] .display-4, html[data-theme] .display-5, html[data-theme] .display-6 { font-family: var(--jo-head); font-weight: 600; letter-spacing: -.01em; }
html[data-theme] h2, html[data-theme] .h2 { font-family: var(--jo-head); font-weight: 600; }
/* Texto: hereda la tinta del perfil (--bs-body-color). Las hojas heredadas ya no fuerzan color en todo el texto. */
html[data-theme] body { color: var(--jo-ink); }
html[data-theme] .text-white { color: #FFFFFF !important; }

/* Navbar de Bootstrap (layouts guest, candidate, employer…) con la barra superior del perfil */
html[data-theme] .navbar {
  --bs-navbar-color: var(--jo-ink-3); --bs-navbar-hover-color: var(--jo-ink); --bs-navbar-active-color: var(--jo-ink);
  --bs-navbar-brand-color: var(--jo-ink); --bs-navbar-brand-hover-color: var(--jo-ink); --bs-navbar-toggler-border-color: var(--jo-line);
  background-color: var(--jo-top) !important; border-bottom: 1px solid var(--jo-line); box-shadow: none !important; min-height: 64px; font-family: var(--jo-font);
}
html[data-theme] .navbar .nav-link { font-weight: 600; font-size: 14px; color: var(--jo-ink-3); }
html[data-theme] .navbar .nav-link:hover, html[data-theme] .navbar .nav-link.active { color: var(--jo-ink); }
html[data-theme="dark"] .navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28250,249,245,0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

/* Logotipo oficial: versión marino en claro y blanca en oscuro (las plantillas traen las dos imágenes). */
.gnb-logo .gnb-logo-dark, .jo-logo .jo-logo-d, .lg-d { display: none !important; }
html[data-theme="dark"] .gnb-logo .gnb-logo-light, html[data-theme="dark"] .jo-logo .jo-logo-l, html[data-theme="dark"] .lg-l { display: none !important; }
html[data-theme="dark"] .gnb-logo .gnb-logo-dark, html[data-theme="dark"] .jo-logo .jo-logo-d, html[data-theme="dark"] .lg-d { display: block !important; }

/* Botón de tema flotante heredado (partials/theme-toggle): mismo botón redondo que el perfil */
.jo-theme-toggle { position: fixed; z-index: 1080; bottom: 18px; left: 18px; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--jo-surface); color: var(--jo-ink); border: 1px solid var(--jo-line); box-shadow: var(--jo-shadow); cursor: pointer; padding: 0; }
.jo-theme-toggle:hover { border-color: var(--jo-acc); color: var(--jo-acc); }
.jo-theme-toggle svg { width: 18px; height: 18px; }
.jo-theme-toggle .jo-ic-moon, html[data-theme="dark"] .jo-theme-toggle .jo-ic-sun { display: none; }
html[data-theme="dark"] .jo-theme-toggle .jo-ic-moon { display: block; }
/* Con botón de tema en la barra superior, el flotante sobra */
body:has(.jo-top [data-jo-theme-toggle]) .jo-theme-toggle, body:has(.navbar [data-jo-theme-toggle]) .jo-theme-toggle { display: none; }
@media print { .jo-theme-toggle { display: none !important; } }

/* ───── 3. Componentes .jo-* ───── */
.jo-ui { font: calc(15px * var(--jo-fs))/1.5 var(--jo-font); color: var(--jo-ink); background: var(--jo-bg); }
.jo-ui *, .jo-ui *::before, .jo-ui *::after { box-sizing: border-box; }
.jo-ui a:not([class]) { color: var(--jo-acc); text-decoration: none; } .jo-ui a:not([class]):hover { text-decoration: underline; }
.jo-ui :focus-visible { outline: 2px solid var(--jo-acc); outline-offset: 2px; }
.jo-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.jo-h1 { margin: 0; font-family: var(--jo-head); font-size: clamp(26px, 4vw, 32px); line-height: 1.2; font-weight: 600; letter-spacing: -.3px; color: var(--jo-ink); }
.jo-h2 { margin: 0; font-family: var(--jo-head); font-size: 22px; line-height: 1.3; font-weight: 600; color: var(--jo-ink); }
.jo-h3 { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 800; color: var(--jo-ink); }
.jo-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--jo-acc); }
.jo-lead { color: var(--jo-mut); font-size: 15px; line-height: 1.55; margin: 6px 0 0; }
.jo-muted { color: var(--jo-mut); } .jo-num { font-family: var(--jo-num); font-variant-numeric: tabular-nums; }

.jo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--jo-pill); border: 1.5px solid transparent; font: 700 14px/1 var(--jo-font); cursor: pointer; white-space: nowrap; text-decoration: none !important; transition: background .15s, border-color .15s, color .15s; background: transparent; color: var(--jo-tx); }
.jo-btn:disabled, .jo-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.jo-btn--primary { background: var(--jo-acc); color: var(--jo-on-acc) !important; } .jo-btn--primary:hover { background: var(--jo-acc-h); }
.jo-btn--dark { background: var(--jo-dark); color: var(--jo-on-dark) !important; } .jo-btn--dark:hover { background: var(--jo-dark-h); }
.jo-btn--secondary { background: var(--jo-surface); border-color: var(--jo-ink); color: var(--jo-ink) !important; } .jo-btn--secondary:hover { background: var(--jo-hover); }
.jo-btn--ghost { background: var(--jo-surface); border-color: var(--jo-line-3); color: var(--jo-tx) !important; } .jo-btn--ghost:hover { border-color: var(--jo-ink); color: var(--jo-ink) !important; }
.jo-btn--link { min-height: 0; padding: 0; border: 0; color: var(--jo-acc) !important; background: none; }
.jo-btn--sm { min-height: 36px; padding: 0 14px; font-size: 13px; } .jo-btn--lg { min-height: 52px; padding: 0 26px; font-size: 15px; }
.jo-btn--block { width: 100%; }
.jo-icon-btn { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--jo-line); background: var(--jo-surface); color: var(--jo-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.jo-icon-btn:hover { border-color: var(--jo-acc); color: var(--jo-acc); }
.jo-icon-btn svg { width: 18px; height: 18px; }

.jo-field { display: flex; flex-direction: column; gap: 6px; font: 700 13px var(--jo-font); color: var(--jo-tx); min-width: 0; }
.jo-hint { font: 500 12px/1.45 var(--jo-font); color: var(--jo-mut); }
.jo-input, .jo-select, .jo-textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--jo-line); border-radius: 10px; background: var(--jo-surface); color: var(--jo-ink); font: 500 15px/1.4 var(--jo-font); }
.jo-textarea { min-height: 96px; resize: vertical; }
.jo-input::placeholder, .jo-textarea::placeholder { color: var(--jo-mut); }
.jo-input:focus, .jo-select:focus, .jo-textarea:focus { outline: none; border-color: var(--jo-acc); box-shadow: var(--jo-focus); }

.jo-card { background: var(--jo-surface); border: 1px solid var(--jo-line); border-radius: var(--jo-r-lg); min-width: 0; color: var(--jo-ink); }
.jo-card--p { padding: 24px; } @media (max-width: 640px) { .jo-card--p { padding: 18px; } }
.jo-card__hd { padding: 18px 24px; border-bottom: 1px solid var(--jo-line-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.jo-card__ft { padding: 16px 24px; border-top: 1px solid var(--jo-line-2); display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.jo-panel { background: var(--jo-surface-2); border: 1px solid var(--jo-line-2); border-radius: var(--jo-r); padding: 16px; }

.jo-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: var(--jo-pill); background: var(--jo-surface); border: 1px solid var(--jo-line-3); font: 700 13px/1 var(--jo-font); color: var(--jo-tx); cursor: pointer; white-space: nowrap; text-decoration: none !important; }
.jo-chip:hover { border-color: var(--jo-ink); color: var(--jo-ink); }
.jo-chip[aria-pressed="true"], .jo-chip.is-on { background: var(--jo-dark); border-color: var(--jo-dark); color: var(--jo-on-dark); }
.jo-badge { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 9px; border-radius: var(--jo-pill); font: 700 12px/1 var(--jo-font); white-space: nowrap; background: var(--jo-hover); color: var(--jo-tx); }
.jo-badge--acc { background: var(--jo-acc-soft); color: var(--jo-acc); } .jo-badge--ok { background: var(--jo-ok-soft); color: var(--jo-ok); }
.jo-badge--warn { background: var(--jo-warn-soft); color: var(--jo-warn); } .jo-badge--err { background: var(--jo-err-soft); color: var(--jo-err); }
.jo-badge--dark { background: var(--jo-block); color: var(--jo-on-block); } .jo-badge--ads { background: var(--jo-ads-soft); color: var(--jo-ads); }

.jo-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--jo-r); font-size: 14px; line-height: 1.5; background: var(--jo-info-soft); color: var(--jo-tx); }
.jo-alert--ok { background: var(--jo-ok-soft); color: var(--jo-ok); } .jo-alert--warn { background: var(--jo-warn-soft); color: var(--jo-warn); }
.jo-alert--err { background: var(--jo-err-soft); color: var(--jo-err); } .jo-alert--acc { background: var(--jo-acc-soft); color: var(--jo-acc); }

.jo-table-wrap { overflow-x: auto; }
.jo-table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--jo-ink); }
.jo-table th { text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--jo-mut); border-bottom: 1px solid var(--jo-line); white-space: nowrap; background: var(--jo-surface-2); }
.jo-table td { padding: 14px 16px; border-bottom: 1px solid var(--jo-line-2); vertical-align: middle; }
.jo-table tr:last-child td { border-bottom: 0; } .jo-table tbody tr:hover { background: var(--jo-surface-2); }

.jo-scrim { position: fixed; inset: 0; z-index: 1000; background: var(--jo-scrim); display: flex; align-items: center; justify-content: center; padding: 16px; }
.jo-modal { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--jo-surface); color: var(--jo-ink); border-radius: var(--jo-r-xl); box-shadow: var(--jo-shadow-lg); display: flex; flex-direction: column; }
.jo-modal__hd { padding: 20px 24px; border-bottom: 1px solid var(--jo-line-2); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.jo-modal__bd { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }

/* Barra superior (misma que el perfil: fondo cálido, logo, buscador, navegación, tema, avatar o Entrar) */
.jo-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1030; background: var(--jo-top); border-bottom: 1px solid var(--jo-line); font-family: var(--jo-font); }
.jo-top__in { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.jo-top__search { flex: 1 1 200px; max-width: 340px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; background: var(--jo-surface); border: 1px solid var(--jo-line); border-radius: 10px; color: var(--jo-mut); }
.jo-top__search input { border: 0; outline: none; background: transparent; width: 100%; font: 500 14px var(--jo-font); color: var(--jo-ink); }
.jo-top__nav { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.jo-top__nav > a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 10px; font: 600 14px var(--jo-font); color: var(--jo-ink-3); text-decoration: none !important; border-bottom: 2px solid transparent; }
.jo-top__nav > a:hover { color: var(--jo-ink); background: var(--jo-hover); }
.jo-top__nav > a[aria-current="page"] { color: var(--jo-ink); border-radius: 0; border-bottom-color: var(--jo-acc); }
.jo-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--jo-ink-2); color: var(--jo-surface); font: 800 12px/1 var(--jo-font); overflow: hidden; background-size: cover; background-position: center; }
.jo-avatar--ring { box-shadow: 0 0 0 2px var(--jo-surface), 0 0 0 4px var(--jo-acc); }
@media (max-width: 640px) { .jo-top__search { display: none; } .jo-top__in { gap: 8px; } .jo-top__nav > a.jo-hide-sm { display: none; } }

/* Logotipo oficial (imagen) con el «+» del color de acento (máscara con la misma geometría del «+» del logo) */
.jo-logo { position: relative; display: inline-flex; align-items: center; flex: none; text-decoration: none !important; line-height: 0; }
.jo-logo img { display: block; height: 34px; width: auto; }
.jo-logo__plus { position: absolute; inset: 0; pointer-events: none; background: var(--jo-logo-plus); -webkit-mask: url("/static/jo/logo-plus.svg") center / contain no-repeat; mask: url("/static/jo/logo-plus.svg") center / contain no-repeat; }
/* Nombre de módulo: logotipo + filete + nombre en Bodoni Moda versalitas espaciadas («Job One+ STORE») */
.jo-mod { font-family: var(--jo-lock); font-weight: 500; text-transform: uppercase; letter-spacing: .32em; margin-right: -.32em; line-height: 1.1; padding-left: 10px; border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent); font-size: 13.5px; white-space: nowrap; color: var(--jo-ink); }

/* Pie con enlaces legales */
.jo-foot { border-top: 1px solid var(--jo-line); background: var(--jo-bg); color: var(--jo-mut); font: 500 13.5px/1.5 var(--jo-font); padding: 24px 0 32px; }
.jo-foot a, .jo-legal a, .jo-legal button { color: var(--jo-mut) !important; text-decoration: none; }
.jo-foot a:hover, .jo-legal a:hover, .jo-legal button:hover { color: var(--jo-ink) !important; text-decoration: underline; }

/* Aviso de cookies (partials/cookie-consent) con los tokens del perfil */
html[data-theme] .cc-popup-card, html[data-theme] .cc-modal-card { background: var(--jo-surface) !important; color: var(--jo-ink) !important; border: 1px solid var(--jo-line) !important; border-radius: var(--jo-r-lg) !important; box-shadow: var(--jo-shadow-lg) !important; font-family: var(--jo-font) !important; }
html[data-theme] .cc-popup-card *, html[data-theme] .cc-modal-card * { font-family: var(--jo-font); }
html[data-theme] .cc-title, html[data-theme] .cc-modal-card h2, html[data-theme] .cc-modal-card h3 { color: var(--jo-ink) !important; }
html[data-theme] .cc-body, html[data-theme] .cc-body p, html[data-theme] .cc-body-secondary, html[data-theme] .cc-modal-card p { color: var(--jo-tx) !important; }
html[data-theme] .cc-header-icon { background: var(--jo-acc-soft) !important; color: var(--jo-acc) !important; }
html[data-theme] .btn-primary-cc { background: var(--jo-dark) !important; color: var(--jo-on-dark) !important; border: 1.5px solid var(--jo-dark) !important; border-radius: var(--jo-pill) !important; box-shadow: none !important; }
html[data-theme] .btn-primary-cc:hover { background: var(--jo-dark-h) !important; }
html[data-theme] .btn-outline-cc { background: var(--jo-surface) !important; color: var(--jo-ink) !important; border: 1.5px solid var(--jo-ink) !important; border-radius: var(--jo-pill) !important; }
html[data-theme] .btn-link-cc, html[data-theme] .cc-footer-links a { color: var(--jo-acc) !important; }
html[data-theme] .cc-dismiss-btn { color: var(--jo-mut) !important; background: transparent !important; }
html[data-theme] .cc-overlay { background: var(--jo-scrim) !important; }
html[data-theme] .cc-modal-card .form-check-input:checked, html[data-theme] .cc-switch input:checked + span, html[data-theme] .cc-toggle input:checked + .cc-slider { background-color: var(--jo-acc) !important; border-color: var(--jo-acc) !important; }

/* Botón de tema de la barra superior: luna en claro (pasar a oscuro) y sol en oscuro, como el perfil.
   .jo-ic-l se ve en claro, .jo-ic-d en oscuro. */
.jo-ic-d { display: none; } html[data-theme="dark"] .jo-ic-l { display: none; } html[data-theme="dark"] .jo-ic-d { display: block; }