/* SI360 Brand Palette Override for HTML5UP Dimension */
:root{
  --brand-navy: #004d8d;
  --brand-deep: #002340;
  --brand-teal: #09a381;
  --brand-rust: #c75d3c;
  --bg-deep: #0a1520;
  --text-on-dark: #eef5f8;
  --text-muted: rgba(238,245,248,.75);
  --border-soft: rgba(255,255,255,.12);
}

body{ background: var(--bg-deep); color: var(--text-on-dark); }
#bg:before{ background-image: linear-gradient(135deg, var(--brand-deep), var(--brand-navy) 60%, var(--brand-teal) 120%); opacity:.9; }

#header .logo{ box-shadow: inset 0 0 0 2px var(--border-soft); background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 60%); }
#header .logo:before{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

a{ color: var(--brand-teal); }
a:hover{ color:#0fd1a9; text-decoration:underline; }

#main article .major{ color: var(--text-on-dark); border-bottom:2px solid var(--brand-teal); text-shadow:0 2px 12px rgba(0,0,0,.25); }

#header nav ul li a{ color: var(--text-muted); }
#header nav ul li a:hover{ color:#fff; box-shadow: inset 0 -2px 0 0 var(--brand-teal); }
#header nav ul li a.active{ color:#fff; box-shadow: inset 0 -2px 0 0 var(--brand-rust); }

.button, input[type="submit"], input[type="reset"], input[type="button"]{
  background-color: var(--brand-teal); color:#07231f; box-shadow:0 4px 14px rgba(9,163,129,.35); border:none;
}
.button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover{ background-color:#0db28e; }
.button.primary{ background-image: linear-gradient(180deg, #0db28e 0%, var(--brand-teal) 100%); color:#06211c; }
.button:focus-visible, input[type="submit"]:focus-visible, input[type="reset"]:focus-visible, input[type="button"]:focus-visible, a:focus-visible{
  outline:2px solid transparent; box-shadow:0 0 0 3px rgba(9,163,129,.55), 0 0 0 6px rgba(255,255,255,.15);
}

input[type="text"], input[type="password"], input[type="email"], select, textarea{
  background: rgba(255,255,255,.03); border:1px solid var(--border-soft); color: var(--text-on-dark);
}
input::placeholder, textarea::placeholder{ color: rgba(238,245,248,.55); }
input:focus, textarea:focus, select:focus{ border-color: var(--brand-teal); box-shadow:0 0 0 3px rgba(9,163,129,.25); }

#main article{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  box-shadow: 0 30px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.04);
}

ul li::marker{ color: var(--brand-teal); }
ul.icons li a{ color: var(--text-muted); border:1px solid var(--border-soft); }
ul.icons li a:hover{ color:#fff; border-color: var(--brand-teal); box-shadow:0 8px 24px rgba(9,163,129,.2); }

em{ color: var(--brand-rust); }
#footer{ color: var(--text-muted); }
#footer a{ color: var(--brand-teal); } #footer a:hover{ color:#0fd1a9; }
::selection{ background: rgba(9,163,129,.35); color:#001b18; }
#header .content .inner p.major{ color: var(--text-muted); }
.field label{ color: var(--text-muted); }

/* 1) Respeta reducción de movimiento del SO */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* 2) Tipografía y legibilidad en móviles */
html { font-size: 16px; }
@media (max-width: 480px) {
  html { font-size: 17px; }               /* un poco más grande en pantallas pequeñas */
}
body { line-height: 1.6; }

/* 3) Tamaños táctiles mínimos (44px) para navegación y botones */
#header nav ul li a,
.button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  min-height: 44px;
  min-width: 44px;
  padding: 0.75rem 1rem;
}

/* 4) Subrayado en links dentro de texto para mejor reconocimiento */
#main article p a { text-decoration: underline; text-underline-offset: 2px; }

/* 5) Mejora de foco para elementos de formulario en modo alto contraste */
@media (forced-colors: active) {
  a, button, input, select, textarea { outline: 2px solid SelectedItem; outline-offset: 2px; }
}

/* 6) Aumenta contraste de texto “muted” si el fondo es muy oscuro */
:root { --text-muted: rgba(238,245,248,.85); }

/* 7) Salto a contenido (añade un link .skip-link arriba del body) */
.skip-link {
  position: absolute; left: -9999px; top: 0; padding: .5rem .75rem;
  background: var(--brand-teal); color: #06211c; z-index: 10000;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; box-shadow: 0 0 0 3px rgba(255,255,255,.6); }

/* ===== Accesibilidad AAA: alto contraste & texto grande ===== */

/* Texto grande (incremento seguro) */
html.lg { font-size: 18px; }           /* base 18px */
@media (max-width: 480px){ html.lg { font-size: 19px; } }

/* Alto contraste: fondo oscuro puro, texto claro, enlaces bien destacados */
:root.hc{
  --bg-deep: #000000;
  --text-on-dark: #ffffff;
  --text-muted: rgba(255,255,255,.85);
  --border-soft: rgba(255,255,255,.6);

  /* Colores de énfasis con contraste AAA sobre negro */
  --brand-teal: #00E5FF;          /* cian brillante para links */
  --brand-teal-hover: #80F7FF;
  --brand-teal-cta: #FFD400;      /* amarillo para botones */
  --brand-teal-cta-hover: #FFE560;
  --brand-rust: #FFA07A;          /* para subrayados activos */
}

/* Aplicación global de alto contraste */
html.hc body { background:#000 !important; color:#fff !important; }
html.hc #bg:before{
  background: none !important; opacity: 1 !important;
}
html.hc a, html.hc #main article p a{
  color: var(--brand-teal) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
html.hc a:hover{ color: var(--brand-teal-hover) !important; }
html.hc .button, html.hc input[type="submit"], html.hc input[type="reset"], html.hc input[type="button"], html.hc button{
  background: var(--brand-teal-cta) !important; color: #000 !important; border: 2px solid #000 !important;
}
html.hc .button:hover, html.hc input[type="submit"]:hover, html.hc input[type="reset"]:hover, html.hc input[type="button"]:hover, html.hc button:hover{
  background: var(--brand-teal-cta-hover) !important;
}
html.hc #main article{
  background: #000 !important;
  border: 2px solid var(--border-soft) !important;
  box-shadow: none !important;
}
html.hc h1.major, html.hc h2.major, html.hc h3.major, html.hc h4.major{
  border-bottom: 3px solid var(--brand-teal) !important;
}
html.hc ul.icons li a{
  color: #fff !important;
  box-shadow: inset 0 0 0 2px var(--border-soft) !important;
}
html.hc ::selection{ background: #FFD400; color: #000; }

/* ===== Botones azules (más oscuros que el fondo) ===== */
:root{
  --brand-blue-btn: #003a6d;          /* azul más oscuro */
  --brand-blue-btn-hover: #005aa8;    /* hover */
}

/* Botones normales */
.button,
input[type="submit"], input[type="reset"], input[type="button"], button{
  background-color: var(--brand-blue-btn) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.button:hover,
input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, button:hover{
  background-color: var(--brand-blue-btn-hover) !important;
}

/* Mantén el modo Alto Contraste como estaba (no tocar reglas html.hc ...) */

/* ====== Nav: evitar solapamiento en EN manteniendo estética ====== */

/* Evita que el texto se rompa raro y colisione con separadores */
#header nav ul li a {
  white-space: nowrap;
}

/* En inglés: reduce ligeramente tamaño y tracking para que quepan todos */
html[lang="en"] #header nav ul li a {
  font-size: 0.95rem;     /* antes ~1rem */
  letter-spacing: 0.08em; /* la plantilla suele usar más, esto reduce ancho */
}

/* Ajuste adicional en pantallas estrechas */
/* ===== Corrección de solapamiento en menú EN ===== */

/* Añade espacio entre ítems del nav */
#header nav ul li {
  margin: 0 0.8rem;  /* antes era más estrecho, así separamos un poco más */
}

/* Ajuste fino solo cuando esté en inglés */
html[lang="en"] #header nav ul li {
  margin: 0 1.6rem;
}

/* En pantallas más pequeñas permite flexibilidad */
@media (max-width: 600px) {
  #header nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  #header nav ul li {
    flex: 1 1 auto;
    margin: 0.4rem;
  }
}

/* Oculta el campo trampa sin display:none (mejor para accesibilidad) */
.field.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* === Nav: ancho por contenido, sin solapes === */
#header nav ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;                    /* sin huecos, usamos bordes como separadores */
}

#header nav ul li{
  flex: 0 0 auto;            /* <-- clave: ancho según el texto */
  border: none;              /* limpiamos estilos del tema */
}

#header nav ul li + li{
  border-left: 1px solid rgba(255,255,255,.35); /* separador entre botones */
}

#header nav ul li a{
  display: block;
  padding: .65rem 1.1rem;    /* más aire a los lados */
  letter-spacing: .18em;     /* puedes bajarlo si aún aprieta */
  white-space: nowrap;       /* evita salto de línea dentro del botón */
}

/* Borde redondeado del contenedor (opcional) */
#header nav ul{
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 8px;
  padding: 2px;              /* que el borde no toque el texto */
}

@media (max-width: 420px){
  #header nav ul li a{
    padding: .55rem .9rem;
    letter-spacing: .12em;
    font-size: 0.95rem;
  }
}


/* ==== NAV flexible y sin solapes ==== */

/* Apaga los separadores rígidos del tema */
#header nav::before,
#header nav::after,
#header nav ul::before,
#header nav ul::after {
  content: none !important;
  display: none !important;
}

/* Contenedor: flex por contenido, con marco propio */
#header nav ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0; /* usamos bordes como separadores */
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 8px;
  padding: 2px;
}

/* Cada item mide según su texto */
#header nav ul li{
  flex: 0 0 auto !important;   /* clave */
  border: none !important;     /* limpiamos estilos previos */
  width: auto !important;
}

/* Separador entre items con borde izquierdo */
#header nav ul li + li{
  border-left: 1px solid rgba(255,255,255,.35);
}

/* Botones */
#header nav ul li a{
  display: block;
  white-space: nowrap;
  padding: .65rem 1.1rem;
  letter-spacing: .18em; /* valor base (ES) */
}

/* Cuando el documento esté en inglés, ajusta espaciado/tamaño */
html:lang(en) #header nav ul li a{
  letter-spacing: .12em;       /* menos separación */
  padding: .60rem 1.0rem;      /* un poco menos de padding */
  font-size: 0.97em;           /* sutilmente más compacto */
}

/* Extra por si el viewport es angosto */
@media (max-width: 420px){
  #header nav ul li a{
    padding: .55rem .9rem;
    letter-spacing: .12em;
    font-size: 0.95rem;
  }
  html:lang(en) #header nav ul li a{
    letter-spacing: .10em;
    font-size: 0.93rem;
  }
}

/* === Menú desplegable superior (override) === */
.top-controls{
  position: absolute;
  right: 1rem; top: 1rem;
  z-index: 100;
  display: flex; gap: .5rem;
}

#tools-toggle{
  min-width: 44px; min-height: 44px;
  padding: .5rem .75rem;
}

.tools-menu[hidden]{ display: none !important; }

.tools-menu{
  position: absolute;
  right: 0; top: calc(100% + .5rem);
  width: min(92vw, 420px);
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  padding: .75rem;
}

.tools-menu:focus{ outline: none; }

.tools-title{
  font-weight: 700;
  margin: .25rem 0 .5rem;
  opacity: .9;
}

.tools-row{
  display: flex; gap: .5rem; flex-wrap: wrap;
}

.tools-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .5rem;
}

.tools-sep{
  border: 0; height: 1px;
  background: linear-gradient(to right, rgba(255,255,255,.08), rgba(255,255,255,.3), rgba(255,255,255,.08));
  margin: .6rem 0 .8rem;
}

/* Estados visuales */
.tools-menu .button.small{
  width: 100%;
  justify-content: center;
}
.tools-row .button.small{
  width: auto;
}

/* Mobile tweaks */
@media (max-width: 480px){
  .tools-grid{ grid-template-columns: 1fr; }
}

/* Alto contraste hereda bien desde a11y.js */
html.a11y-contrast .tools-menu{
  background: #0b0f14;
  border-color: #fff;
}
/* === FIX: botón de opciones siempre visible por encima del header === */
.top-controls{
  position: fixed;            /* antes estaba absolute */
  right: 1rem;
  top: 1rem;
  z-index: 10000;             /* por encima de #header y overlays del tema */
  display: flex;
  gap: .5rem;
  pointer-events: auto;
}

#tools-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: .5rem .75rem;
}

/* Panel desplegable (si ya lo tienes, mantén; esto refuerza visibilidad) */
.tools-menu[hidden]{ display: none !important; }
.tools-menu{
  position: absolute;
  right: 0; top: calc(100% + .5rem);
  width: min(92vw, 420px);
  z-index: 10001;             /* encima del botón y del header */
}