/* ==========================================================
   JHR.dev — Tema global + accesibilidad persistente
   Este archivo se carga después del CSS propio de cada página.
========================================================== */

:root {
  --jhr-bg: #1a1c2b;
  --jhr-surface: #1a1c2b;
  --jhr-text: #f5f6fa;
  --jhr-muted: #a3a9b8;
  --jhr-border: rgba(255,255,255,.14);
  --access-brightness: 1;
  --access-font-scale: 1;
  --access-line-height: 1.5;
  color-scheme: dark;
}

html[data-theme="light"] {
  --jhr-bg: #ffffff;
  --jhr-surface: #f2f4f8;
  --jhr-text: #17191f;
  --jhr-muted: #505766;
  --jhr-border: rgba(0,0,0,.16);
  --bg: #ffffff;
  --bg-card: #ffffff;
  --text: #17191f;
  --muted: #505766;
  color-scheme: light;
}

html[data-theme="dark"] {
  --jhr-bg: #1a1c2b;
  --jhr-surface: #1a1c2b;
  --jhr-text: #f5f6fa;
  --jhr-muted: #a3a9b8;
  --bg: #1a1c2b;
  --bg-card: #1a1c2b;
  --text: #f5f6fa;
  --muted: #a3a9b8;
  color-scheme: dark;
}

html[data-theme="light"] body,
body.light-mode {
  --bg: #ffffff;
  --bg-card: #ffffff;
  --primary: #2272FF;
  --accent: #ff0000;
  --text: #1D1D1D;
  --muted: #6b6b6b;
  background-color: #ffffff !important;
  color: var(--text) !important;
}

html[data-theme="dark"] body,
body.dark-mode {
  --bg: #1a1c2b;
  --bg-card: #1a1c2b;
  --primary: #2272FF;
  --accent: #ff0000;
  --text: #f5f6fa;
  --muted: #a3a9b8;
  background-color: #1a1c2b !important;
  color: var(--text) !important;
}

/* En modo claro las tarjetas legales dejan de heredar el rojo original. */
html[data-theme="light"] .legal-card,
body.light-mode .legal-card {
  background: #ffffff !important;
  color: #1D1D1D !important;
}

html[data-theme="light"] header.scrolled,
body.light-mode header.scrolled {
  background: rgba(255,255,255,.96) !important;
}

/* El tamaño y espaciado se heredan por todo el documento. */
html[data-access-font="1"] { font-size: 112.5%; }
html[data-access-font="2"] { font-size: 125%; }
html[data-access-font="3"] { font-size: 137.5%; }
html[data-access-font="0"] { font-size: 100%; }

body {
  line-height: var(--access-line-height);
}

body.access-readable-font,
body.access-readable-font *:not(i):not(.fa):not(.fas):not(.fab):not(.far) {
  font-family: Arial, Verdana, Tahoma, sans-serif !important;
}

body.access-line-spacing,
body.access-line-spacing p,
body.access-line-spacing li,
body.access-line-spacing label,
body.access-line-spacing input,
body.access-line-spacing textarea,
body.access-line-spacing button {
  line-height: 1.9 !important;
  letter-spacing: .035em;
  word-spacing: .08em;
}

body.access-underline-links a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: .2em;
}

body.access-large-cursor,
body.access-large-cursor a,
body.access-large-cursor button,
body.access-large-cursor input,
body.access-large-cursor textarea,
body.access-large-cursor select,
body.access-large-cursor [role="button"] {
  cursor: pointer !important;
}
body.access-large-cursor { cursor: crosshair !important; }

body.access-focus-highlight :focus-visible {
  outline: 4px solid #ffd400 !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 7px rgba(0,0,0,.85) !important;
}

body.access-pause-animations *,
body.access-pause-animations *::before,
body.access-pause-animations *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* Alto contraste: se aplica a TODO el contenido, no solo a la portada. */
body.access-high-contrast {
  background: #000 !important;
  color: #fff !important;
}
body.access-high-contrast :where(header, nav, main, section, article, aside, footer, div, form, ul, ol, li, p, span, label, table, tr, td, th) {
  border-color: #fff !important;
}
body.access-high-contrast :where(h1,h2,h3,h4,h5,h6,p,span,li,label,strong,small) {
  color: #fff !important;
  text-shadow: none !important;
}
body.access-high-contrast a { color: #00ffff !important; }
body.access-high-contrast button,
body.access-high-contrast input,
body.access-high-contrast textarea,
body.access-high-contrast select {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

/* Escala de grises útil para reducir estímulos cromáticos. */
body.access-grayscale > *:not(#accessToggle):not(#accessToolbar):not(#readingNow) {
  filter: grayscale(1);
}

/* Brillo global del contenido. El panel queda legible y sin filtrar. */
body[data-access-brightness="70"] > *:not(#accessToggle):not(#accessToolbar):not(#readingNow) { filter: brightness(.70); }
body[data-access-brightness="85"] > *:not(#accessToggle):not(#accessToolbar):not(#readingNow) { filter: brightness(.85); }
body[data-access-brightness="100"] > *:not(#accessToggle):not(#accessToolbar):not(#readingNow) { filter: brightness(1); }
body[data-access-brightness="115"] > *:not(#accessToggle):not(#accessToolbar):not(#readingNow) { filter: brightness(1.15); }
body.access-grayscale[data-access-brightness="70"] > *:not(#accessToggle):not(#accessToolbar):not(#readingNow) { filter: grayscale(1) brightness(.70); }
body.access-grayscale[data-access-brightness="85"] > *:not(#accessToggle):not(#accessToolbar):not(#readingNow) { filter: grayscale(1) brightness(.85); }
body.access-grayscale[data-access-brightness="100"] > *:not(#accessToggle):not(#accessToolbar):not(#readingNow) { filter: grayscale(1) brightness(1); }
body.access-grayscale[data-access-brightness="115"] > *:not(#accessToggle):not(#accessToolbar):not(#readingNow) { filter: grayscale(1) brightness(1.15); }

/* ==========================================================
   Apoyo para deficiencias de visión del color
   Cambia la paleta de acentos sin borrar el diseño original.
========================================================== */
html[data-color-vision="protanopia"] body {
  --primary: #0067d9 !important;
  --accent: #ffb000 !important;
  --ok: #0072b2 !important;
}

html[data-color-vision="deuteranopia"] body {
  --primary: #0057b8 !important;
  --accent: #e69f00 !important;
  --ok: #0072b2 !important;
}

html[data-color-vision="tritanopia"] body {
  --primary: #d81b60 !important;
  --accent: #009e73 !important;
  --ok: #009e73 !important;
}

html[data-color-vision]:not([data-color-vision="none"]) body a {
  text-decoration: underline;
  text-underline-offset: .18em;
}

html[data-color-vision]:not([data-color-vision="none"]) body button,
html[data-color-vision]:not([data-color-vision="none"]) body [role="button"] {
  outline-offset: 2px;
}

/* Toolbox global */
#accessToggle {
  position: fixed !important;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 2147483000 !important;
  width: 48px;
  min-width: 48px;
  height: 52px;
  border: 0;
  border-radius: 0 12px 12px 0;
  background: #2272ff !important;
  color: #fff !important;
  font-size: 22px;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  cursor: grab !important;
}

#accessToolbar {
  position: fixed !important;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  z-index: 2147483001 !important;
  width: min(330px, calc(100vw - 24px));
  max-height: min(82vh, 720px);
  overflow-y: auto;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  background: rgba(18,20,30,.98) !important;
  color: #fff !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  display: none;
  gap: 10px;
}
#accessToolbar[data-open="true"] { display: block; }

.access-toolbar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.access-toolbar__title { font-size: 1rem; font-weight: 700; margin: 0; color: #fff !important; }
.access-toolbar__status { font-size: .78rem; color: #c9cede !important; margin: 0 0 10px; }
.access-toolbar__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#accessToolbar button {
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 10px !important;
  background: #2a2e40 !important;
  color: #fff !important;
  padding: 9px 10px !important;
  font-size: .86rem !important;
  font-weight: 600;
  line-height: 1.25 !important;
  cursor: pointer !important;
}
#accessToolbar button:hover,
#accessToolbar button[aria-pressed="true"] { background: #2272ff !important; }
#accessToolbar .access-toolbar__wide { grid-column: 1 / -1; }
#accessClose { width: 42px; min-width: 42px; padding: 6px !important; }

#readingNow {
  position: fixed !important;
  left: 20px;
  bottom: 20px;
  z-index: 2147483002 !important;
  max-width: min(520px, calc(100vw - 40px));
  padding: 12px 16px;
  border-radius: 10px;
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #fff;
  display: none;
}

@media (max-width: 600px) {
  #accessToolbar { left: 8px; width: calc(100vw - 16px); max-height: 78vh; }
  .access-toolbar__grid { grid-template-columns: 1fr; }
  #accessToolbar .access-toolbar__wide { grid-column: auto; }
}