/* ============================================================
   HoK Tactics — TEMA GLOBAL (Fase 1: sobre tokens.css)
   Una sola paleta con la app: --hokt-* son alias de --hok-*.
   NOTA: esta hoja SÍ conserva !important — restyla elementos
   del theme de WordPress (body, header, footer, formularios) y
   necesita vencer su especificidad/importancia. Cada uno es un
   combate contra el theme, no deuda interna.
   FRONTERA (v2.2.2): todos los selectores genéricos llevan
   :not(#hokt-root *) — este skin restyla el SITIO y jamás debe
   alcanzar el interior de la app (que ya no usa !important).
   ============================================================ */
:root{
  --hokt-navy:var(--hok-navy-900);
  --hokt-navy-2:var(--hok-navy-750);
  --hokt-navy-3:var(--hok-navy-700);
  --hokt-gold:var(--hok-gold-struct);
  --hokt-gold-2:var(--hok-gold-bright);
  --hokt-ink:var(--hok-ink);
  --hokt-ink-dim:var(--hok-dim);
  --hokt-line:color-mix(in srgb, var(--hok-gold-struct) 28%, transparent);
}

/* ---- Fondo general del sitio ---- */
html,
body{
  background:
    radial-gradient(1200px 700px at 50% -10%, #123251 0%, rgba(18,50,81,0) 60%),
    radial-gradient(900px 600px at 100% 100%, var(--hok-navy-750) 0%, color-mix(in srgb, var(--hok-black) 0%, transparent) 55%),
    linear-gradient(180deg, var(--hok-navy-900) 0%, #05101b 100%) !important;
  background-attachment: fixed !important;
  color: var(--hokt-ink) !important;
}
body,
body.wp-site-blocks,
.wp-site-blocks:not(#hokt-root *){ background: transparent !important; }

/* malla decorativa sutil tipo "campo" detrás del contenido */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--hok-gold-struct) 3.5%, transparent) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--hok-gold-struct) 3.5%, transparent) 0 1px, transparent 1px 64px);
  mask-image: radial-gradient(80% 80% at 50% 30%, #000 40%, transparent 100%);
}
.wp-site-blocks:not(#hokt-root *),
main:not(#hokt-root *),
.wp-block-group:not(#hokt-root *){ position:relative; z-index:1; }

/* ---- Tipografía y textos ---- */
body,
p:not(#hokt-root *),
li:not(#hokt-root *),
span:not(#hokt-root *),
.wp-block-paragraph:not(#hokt-root *){ color: var(--hokt-ink) !important; }
h1:not(#hokt-root *),
h2:not(#hokt-root *),
h3:not(#hokt-root *),
h4:not(#hokt-root *),
h5:not(#hokt-root *),
h6:not(#hokt-root *),
.wp-block-heading:not(#hokt-root *),
.wp-block-site-title:not(#hokt-root *),
.wp-block-site-title a:not(#hokt-root *){
  color: var(--hokt-gold) !important;
  font-family:var(--hok-font-display), Georgia, serif !important;
  letter-spacing:.5px;
  text-shadow:0 1px 0 color-mix(in srgb, var(--hok-black) 50%, transparent);
}
.wp-block-site-tagline:not(#hokt-root *){ color: var(--hokt-ink-dim) !important; }

/* ---- Enlaces ---- */
a:not(#hokt-root *){ color: var(--hokt-gold-2) !important; }
a:hover:not(#hokt-root *){ color:#fff !important; }

/* ---- Header / Navegación ---- */
header.wp-block-template-part:not(#hokt-root *),
.wp-block-template-part[role="banner"]:not(#hokt-root *),
.wp-block-group.has-background:first-child:not(#hokt-root *){
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--hok-navy-750) 96%, transparent), color-mix(in srgb, var(--hok-navy-900) 96%, transparent)) !important;
  border-bottom:1px solid var(--hokt-line) !important;
  box-shadow:0 2px 18px color-mix(in srgb, var(--hok-black) 45%, transparent);
}
.wp-block-navigation a:not(#hokt-root *),
.wp-block-navigation .wp-block-navigation-item__content:not(#hokt-root *){
  color: var(--hokt-ink) !important; font-family:var(--hok-font-ui); font-weight:600;
  text-transform:uppercase; letter-spacing:.6px;
}
.wp-block-navigation a:hover:not(#hokt-root *){ color: var(--hokt-gold-2) !important; }

/* ---- Footer del tema: OCULTO y reemplazado por el footer del plugin ---- */
body footer.wp-block-template-part,
body .wp-block-template-part[role="contentinfo"]{
  display:none !important;
}

/* ---- Footer propio (Sesarvai): contacto + redes ---- */
.hokt-sitefoot:not(#hokt-root *){
  /* z-index 0, NO 1: con 1 empataba con .wp-site-blocks (que encierra a
     #hokt-root en su propio stacking context) y por orden de DOM el
     footer pintaba ENCIMA de los overlays del plugin — en páginas cortas
     (draft-heroes 375×812) tapaba media ficha y los botones de acción. */
  position:relative; z-index:0;
  text-align:center; padding:34px 18px 30px;
  background: linear-gradient(0deg, rgba(5,16,27,.99), color-mix(in srgb, var(--hok-navy-900) 92%, transparent));
  border-top:1px solid var(--hokt-line);
  font-family:"Inter",sans-serif; color:var(--hokt-ink-dim);
}
.hokt-sitefoot .hsf-brand:not(#hokt-root *){
  font-family:var(--hok-font-display); font-weight:700; font-size:20px; letter-spacing:1px;
  color:var(--hokt-gold); text-shadow:0 1px 0 color-mix(in srgb, var(--hok-black) 50%, transparent);
}
.hokt-sitefoot .hsf-tag:not(#hokt-root *){ font-size:12px; color:var(--hokt-ink-dim); margin:4px 0 16px }
.hokt-sitefoot .hsf-contact a:not(#hokt-root *){
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font:600 13px var(--hok-font-ui); letter-spacing:.5px; color:var(--hokt-gold-2) !important;
}
.hokt-sitefoot .hsf-contact a:hover:not(#hokt-root *){ color:#fff !important }
.hokt-sitefoot .hsf-social:not(#hokt-root *){ display:flex; justify-content:center; gap:14px; margin:16px 0 14px; flex-wrap:wrap }
.hokt-sitefoot .hsf-social a:not(#hokt-root *){
  display:grid; place-items:center; width:40px; height:40px; border-radius:10px;
  color:var(--hokt-ink); background:color-mix(in srgb, var(--hok-navy-900) 70%, transparent); border:1px solid var(--hokt-line);
  transition:transform .12s, color .15s, border-color .15s, box-shadow .15s;
}
.hokt-sitefoot .hsf-social a:hover:not(#hokt-root *){
  transform:translateY(-2px); color:var(--hokt-gold);
  border-color:var(--hokt-gold); box-shadow:0 6px 16px color-mix(in srgb, var(--hok-black) 45%, transparent);
}
.hokt-sitefoot .hsf-social svg:not(#hokt-root *){ width:20px; height:20px; fill:currentColor }
.hokt-sitefoot .hsf-social svg[stroke]:not(#hokt-root *){ stroke:currentColor }
.hokt-sitefoot .hsf-legal:not(#hokt-root *){ font-size:11px; color:var(--hokt-ink-dim); line-height:1.6; max-width:640px; margin:0 auto }
.hokt-sitefoot .hsf-legal a:not(#hokt-root *){ color:var(--hokt-gold-2) !important; text-decoration:none }
.hokt-sitefoot .hsf-legal a:hover:not(#hokt-root *){ color:#fff !important }


/* ---- Botones nativos de WP / formularios ---- */
.wp-block-button__link:not(#hokt-root *),
.wp-block-search__button:not(#hokt-root *),
input[type=submit]:not(#hokt-root *),
input[type=button]:not(#hokt-root *),
.wp-element-button:not(#hokt-root *){
  background: linear-gradient(180deg, var(--hokt-gold-2), var(--hokt-gold)) !important;
  color:#1a1206 !important; border:1px solid #8a6a1f !important;
  font-family:var(--hok-font-ui) !important; font-weight:700 !important;
  text-transform:uppercase; letter-spacing:.6px;
  box-shadow:0 4px 14px color-mix(in srgb, var(--hok-black) 45%, transparent), inset 0 1px 0 color-mix(in srgb, var(--hok-white) 40%, transparent);
}
.wp-block-button__link:hover:not(#hokt-root *),
.wp-element-button:hover:not(#hokt-root *){ filter:brightness(1.08); }

input[type=text]:not(#hokt-root *),
input[type=email]:not(#hokt-root *),
input[type=url]:not(#hokt-root *),
input[type=search]:not(#hokt-root *),
textarea:not(#hokt-root *),
select:not(#hokt-root *){
  background: color-mix(in srgb, var(--hok-navy-900) 70%, transparent) !important;
  border:1px solid var(--hokt-line) !important;
  color: var(--hokt-ink) !important; border-radius:8px !important;
}
::placeholder:not(#hokt-root *)::placeholder{ color: var(--hokt-ink-dim) !important; }

/* ---- Tarjetas / grupos con fondo ---- */
.wp-block-group.has-background:not(#hokt-root *){
  background: linear-gradient(180deg, rgba(16,43,68,.6), color-mix(in srgb, var(--hok-navy-900) 60%, transparent)) !important;
  border:1px solid var(--hokt-line); border-radius:14px;
}

/* ---- El contenedor del planner: que respire y se vea integrado ---- */
#hokt-root{
  border:1px solid var(--hokt-line);
  border-radius:16px;
  box-shadow:0 18px 60px color-mix(in srgb, var(--hok-black) 55%, transparent);
  overflow:hidden;
}

/* La página portada del planner sin márgenes que rompan la inmersión */
.hokt-fullbleed .wp-block-post-content:not(#hokt-root *),
body.page .entry-content.hokt-fullbleed{ max-width:none !important; }

/* ══════════════════════════════════════════════════════════════
   v1.5 · SKIN "HOK MOBILE" DEL SITIO — mismo lenguaje del juego
   en TODO WordPress: oro luminoso, chaflanes, marcos dobles.
   ══════════════════════════════════════════════════════════════ */
:root{
  --hokt-navy:var(--hok-navy-900); --hokt-navy-2:var(--hok-navy-750); --hokt-navy-3:var(--hok-navy-700);
  --hokt-gold:var(--hok-gold-struct); --hokt-gold-2:var(--hok-gold-bright); --hokt-gold-deep:#8a6a2c;
  --hokt-line:color-mix(in srgb, var(--hok-gold-struct) 28%, transparent);
}
html,
body{
  background:
    radial-gradient(1200px 700px at 70% -8%, #12283f 0%, rgba(18,40,63,0) 60%),
    radial-gradient(900px 600px at -10% 110%, var(--hok-navy-800) 0%, color-mix(in srgb, var(--hok-black) 0%, transparent) 55%),
    linear-gradient(180deg, var(--hok-steel-c) 0%, #050d18 100%) !important;
}
/* Títulos del sitio en serif dorado degradado (como los menús del juego) */
h1:not(#hokt-root *),
h2:not(#hokt-root *),
h3:not(#hokt-root *),
.wp-block-site-title:not(#hokt-root *),
.wp-block-site-title a:not(#hokt-root *),
.wp-block-post-title:not(#hokt-root *){
  font-family:var(--hok-font-display) !important; letter-spacing:.05em;
  background:linear-gradient(180deg,var(--hok-gold-cream),#d9b25c);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 3px color-mix(in srgb, var(--hok-black) 70%, transparent));
}
/* Botones de todo el sitio: dorado achaflanado con texto navy */
button:not(#hokt-root *),
.wp-block-button__link:not(#hokt-root *),
input[type="submit"]:not(#hokt-root *),
.wp-element-button:not(#hokt-root *){
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px) !important;
  background:linear-gradient(180deg,var(--hok-gold-cream) 0%,var(--hok-gold) 38%,var(--hok-gold-strong) 100%) !important;
  color:var(--hok-navy-750) !important; border:0 !important; border-radius:0 !important; font-weight:800 !important;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--hok-white) 75%, transparent), inset 0 -8px 14px color-mix(in srgb, var(--hok-gold-shadow) 45%, transparent), 0 0 16px color-mix(in srgb, var(--hok-gold-strong) 35%, transparent) !important;
  text-shadow:0 1px 0 color-mix(in srgb, var(--hok-white) 40%, transparent) !important;
}
button:hover:not(#hokt-root *),
.wp-block-button__link:hover:not(#hokt-root *),
.wp-element-button:hover:not(#hokt-root *){ filter:brightness(1.08); }
/* Paneles/tarjetas de contenido: marco doble dorado */
.wp-block-group.has-background:not(#hokt-root *),
.wp-block-columns.has-background:not(#hokt-root *),
.entry-content > .wp-block-cover:not(#hokt-root *){
  background:linear-gradient(180deg,color-mix(in srgb, var(--hok-navy-750) 94%, transparent),color-mix(in srgb, var(--hok-navy-900) 94%, transparent)) !important;
  border:1px solid var(--hokt-line) !important; border-radius:8px !important;
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--hok-gold) 10%, transparent), inset 0 1px 0 color-mix(in srgb, var(--hok-gold) 16%, transparent), 0 14px 40px color-mix(in srgb, var(--hok-black) 50%, transparent) !important;
}
/* Enlaces */
a:not(#hokt-root *){ color:var(--hokt-gold) !important; }
a:hover:not(#hokt-root *){ color:var(--hok-gold-cream) !important; text-shadow:0 0 10px color-mix(in srgb, var(--hok-gold) 50%, transparent); }
/* Inputs */
input[type="text"]:not(#hokt-root *),
input[type="email"]:not(#hokt-root *),
input[type="search"]:not(#hokt-root *),
textarea:not(#hokt-root *),
select:not(#hokt-root *){
  background:linear-gradient(180deg,var(--hok-steel-c),var(--hok-navy-750)) !important; color:var(--hokt-ink) !important;
  border:1px solid var(--hokt-line) !important; border-radius:4px !important;
  box-shadow:inset 0 2px 6px color-mix(in srgb, var(--hok-black) 55%, transparent) !important;
}
input:focus:not(#hokt-root *),
textarea:focus:not(#hokt-root *){ border-color:var(--hokt-gold) !important; box-shadow:inset 0 2px 6px color-mix(in srgb, var(--hok-black) 55%, transparent), 0 0 14px color-mix(in srgb, var(--hok-gold) 30%, transparent) !important; outline:none !important; }
/* Footer Sesarvai al estilo del juego */
.hokt-sitefoot:not(#hokt-root *){
  border-top:1px solid var(--hokt-line) !important;
  background:linear-gradient(180deg,color-mix(in srgb, var(--hok-steel-c) 97%, transparent),rgba(6,13,24,.99)) !important;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--hok-gold) 14%, transparent) !important; position:relative;
}
.hokt-sitefoot:not(#hokt-root *)::before{
  content:"◆"; position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  color:var(--hokt-gold); font-size:10px; text-shadow:0 0 8px color-mix(in srgb, var(--hok-gold) 90%, transparent);
}
/* Scrollbar global dorado */
::-webkit-scrollbar:not(#hokt-root *)::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track:not(#hokt-root *)::-webkit-scrollbar-track{ background:#060d18; }
::-webkit-scrollbar-thumb:not(#hokt-root *)::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--hok-gold-strong),var(--hok-gold-deep)); border-radius:5px; border:2px solid #060d18; }

/* ═══ v1.6 · SITIO en HOK TRUE BLUE: azul acero + blanco; oro solo acentos ═══ */
h1:not(#hokt-root *),
h2:not(#hokt-root *),
h3:not(#hokt-root *),
.wp-block-site-title:not(#hokt-root *),
.wp-block-site-title a:not(#hokt-root *),
.wp-block-post-title:not(#hokt-root *){
  background:none !important; -webkit-text-fill-color:#fff !important; color:#fff !important;
  filter:none !important; text-shadow:0 1px 3px color-mix(in srgb, var(--hok-black) 70%, transparent), 0 0 14px color-mix(in srgb, var(--hok-blue-soft) 30%, transparent) !important;
}
button:not(#hokt-root *),
.wp-block-button__link:not(#hokt-root *),
input[type="submit"]:not(#hokt-root *),
.wp-element-button:not(#hokt-root *){
  clip-path:none !important; border-radius:8px !important;
  background:linear-gradient(180deg,#2f6db4 0%,#1c4a82 55%,#173e6e 100%) !important;
  color:#fff !important; border:1px solid color-mix(in srgb, var(--hok-blue-pale) 55%, transparent) !important; font-weight:700 !important;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--hok-white) 35%, transparent), inset 0 -6px 10px color-mix(in srgb, var(--hok-steel-c) 50%, transparent) !important;
  text-shadow:0 1px 2px color-mix(in srgb, var(--hok-black) 55%, transparent) !important;
}
a:not(#hokt-root *){ color:var(--hok-cyan) !important; } a:hover:not(#hokt-root *){ color:var(--hok-ink-cool) !important; text-shadow:0 0 10px color-mix(in srgb, var(--hok-blue-pale) 60%, transparent); }
.wp-block-group.has-background:not(#hokt-root *),
.wp-block-columns.has-background:not(#hokt-root *),
.entry-content > .wp-block-cover:not(#hokt-root *){
  background:linear-gradient(180deg,rgba(31,64,102,.92),color-mix(in srgb, var(--hok-steel-b) 94%, transparent)) !important;
  border:1px solid rgba(120,180,235,.35) !important;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--hok-white) 14%, transparent), 0 12px 34px color-mix(in srgb, var(--hok-black) 45%, transparent) !important;
}
input[type="text"]:not(#hokt-root *),
input[type="email"]:not(#hokt-root *),
input[type="search"]:not(#hokt-root *),
textarea:not(#hokt-root *),
select:not(#hokt-root *){
  background:linear-gradient(180deg,var(--hok-steel-b),var(--hok-blu-3)) !important; border:1px solid rgba(120,180,235,.35) !important;
}
input:focus:not(#hokt-root *),
textarea:focus:not(#hokt-root *){ border-color:#7db9f0 !important; box-shadow:0 0 14px color-mix(in srgb, var(--hok-blue-soft) 40%, transparent) !important; }
::-webkit-scrollbar-thumb:not(#hokt-root *)::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--hok-blu-1),#1c4a82); border:2px solid var(--hok-steel-c); }
.hokt-sitefoot:not(#hokt-root *)::before{ color:var(--hok-blue-pale); text-shadow:0 0 8px color-mix(in srgb, var(--hok-blue-pale) 80%, transparent); }
.hokt-sitefoot:not(#hokt-root *){ border-top-color:rgba(120,180,235,.35) !important;
  background:linear-gradient(180deg,color-mix(in srgb, var(--hok-navy-750) 97%, transparent),color-mix(in srgb, var(--hok-steel-c) 99%, transparent)) !important;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--hok-white) 12%, transparent) !important; }

/* ═══ v2.0 · LAUNCHER en TODO el sitio ═══ */
html,
body{
  background:
    radial-gradient(42% 34% at 22% 8%, color-mix(in srgb, var(--hok-blue-action) 20%, transparent), transparent 70%),
    radial-gradient(36% 30% at 82% 4%, color-mix(in srgb, var(--hok-violet) 16%, transparent), transparent 70%),
    radial-gradient(46% 40% at 70% 100%, color-mix(in srgb, var(--hok-cyan-bright) 10%, transparent), transparent 72%),
    linear-gradient(180deg,var(--hok-steel-c) 0%,var(--hok-navy-900) 100%) !important;
}
h1:not(#hokt-root *),
h2:not(#hokt-root *),
h3:not(#hokt-root *){ font-family:"Orbitron",var(--hok-font-ui),"Exo 2",sans-serif !important; text-transform:uppercase; letter-spacing:.16em !important; }
button:not(#hokt-root *),
.wp-block-button__link:not(#hokt-root *),
input[type="submit"]:not(#hokt-root *),
.wp-element-button:not(#hokt-root *){
  border-radius:12px !important;
  background:linear-gradient(180deg,color-mix(in srgb, var(--hok-white) 10%, transparent),color-mix(in srgb, var(--hok-white) 3%, transparent)), linear-gradient(180deg,#1c346e,var(--hok-steel-surface)) !important;
  border:1px solid color-mix(in srgb, var(--hok-cyan-bright) 40%, transparent) !important;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--hok-white) 30%, transparent), 0 0 18px color-mix(in srgb, var(--hok-blue-action) 25%, transparent) !important;
  transition:transform .16s ease, box-shadow .25s ease;
}
button:hover:not(#hokt-root *),
.wp-block-button__link:hover:not(#hokt-root *){ transform:translateY(-2px); box-shadow:0 0 26px color-mix(in srgb, var(--hok-cyan-bright) 50%, transparent) !important; }
.wp-block-group.has-background:not(#hokt-root *),
.wp-block-columns.has-background:not(#hokt-root *){
  background:linear-gradient(180deg,color-mix(in srgb, var(--hok-white) 5%, transparent),color-mix(in srgb, var(--hok-white) 1.5%, transparent)), linear-gradient(180deg,color-mix(in srgb, var(--hok-steel-surface) 60%, transparent),rgba(10,20,44,.7)) !important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid color-mix(in srgb, var(--hok-cyan-bright) 30%, transparent) !important; border-radius:16px !important;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--hok-white) 15%, transparent), 0 16px 40px color-mix(in srgb, var(--hok-black) 50%, transparent) !important;
}
a:not(#hokt-root *){ color:var(--hok-cyan-bright) !important; }

/* ---- Blindaje: si el HTML cacheado enseña el header del tema, su menú
   móvil abría un overlay BLANCO ilegible — nunca debe verse ---- */
.wp-block-navigation__responsive-container:not(#hokt-root *){ display:none !important; }

/* ---- Jetpack (WP.com) inyecta «Share this / Like this» con su estilo
   claro dentro de .entry-content, DEBAJO de la app — ruido ajeno a la
   estética imperial en pantallas de aplicación. Se oculta SOLO donde
   monta la app (#hokt-root); los posts de Noticias conservan sus
   botones. Alternativa permanente: apagar sharing/likes por página en
   los ajustes de WordPress.com. ---- */
.entry-content:has(#hokt-root) .sharedaddy{ display:none; }