/* =====================================================================
   JAKE MATE · Sistema de identidad visual
   ---------------------------------------------------------------------
   Fuente única de la marca. Se carga ANTES que app.css, home.css,
   admin.css y legal.css en todas las pantallas: la experiencia del
   participante, la home comercial, las páginas legales y el panel.

   Aquí solo viven tokens y el componente de la marca JEDIS. Ningún
   layout, ninguna pantalla concreta.

   ---------------------------------------------------------------------
   POR QUÉ ESTO NO PISA EL BRANDING DEL CLIENTE

   Los tokens --jm-* son el sistema BASE. Los colores que de verdad
   pintan la experiencia de un evento son --event-*, que Branding::
   cssVariables() inyecta después en un <style> propio:

     Plan Base        --event-* = paleta Jake Mate (estos tokens)
     Plan Pro         --event-* = colores del cliente
     Plan White Label --event-* = colores del cliente

   Es decir: el rojo Jake Mate es el fallback, nunca una imposición.
   Un evento Pro con su propio azul sigue siendo azul.
   ===================================================================== */

:root {
  /* --------------------------------------------------------------
     Núcleo cromático
     --jm-red es el rojo OFICIAL, muestreado pixel a pixel del asset
     icono_caballo_rojo.png que entregó la marca. No es una
     aproximación: es el color que ya usa el caballo.

     --jm-black es un negro cálido, no el #000000 puro con el que está
     dibujado el icono. En superficies grandes —pie de página, bloques
     de cierre— el negro puro vibra contra el blanco y endurece la
     lectura; el icono, que es una línea fina, sí lo aguanta y se deja
     tal como vino.
     -------------------------------------------------------------- */
  --jm-red:       #941e21;
  --jm-red-dark:  #73171a;
  --jm-red-soft:  #f5e9e9;
  --jm-black:     #171313;
  --jm-charcoal:  #2b2422;
  --jm-white:     #ffffff;
  --jm-warm-bg:   #f6f1ef;
  --jm-warm-alt:  #ece4e1;

  /* Texto y estructura */
  --jm-text:      #171313;
  --jm-soft:      #443b39;
  --jm-muted:     #6b5f5c;
  --jm-border:    #e3d9d5;

  /* Estados. Desaturados hacia el terreno cálido de la marca para que
     no parezcan avisos de otro sistema. */
  --jm-ok:        #1f6f4f;
  --jm-warn:      #9a6410;
  --jm-danger:    #a32017;

  /* --------------------------------------------------------------
     Tipografía

     Sans para todo lo que se opera: formularios, datos, botones,
     panel. Serif SOLO para hero, frases de marca y cierres: es un
     acento editorial, no una tipografía de trabajo.

     No se carga ninguna fuente externa. El proyecto no incluye
     archivos de fuente y no se va a añadir una dependencia de red a
     la pantalla que un participante abre con la señal de un centro
     de eventos.
     -------------------------------------------------------------- */
  --jm-sans: "Figtree", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --jm-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
              "Times New Roman", "Noto Serif", serif;

  /* Sombras cálidas: la sombra neutra azulada delataba el sistema
     anterior incluso con la paleta cambiada. */
  --jm-shadow-sm: 0 1px 2px rgba(23, 19, 19, .07);
  --jm-shadow:    0 4px 16px rgba(23, 19, 19, .10);
  --jm-shadow-lg: 0 14px 34px rgba(23, 19, 19, .16);
}

/* =================================================================
   BASE TIPOGRÁFICA
   -----------------------------------------------------------------
   ESTA ES LA REGLA QUE FALTABA.

   Hasta ahora --jm-sans se declaraba en :root y no la consumía nadie
   en la cadena de herencia. Declarar una custom property no aplica
   nada: :root es un contenedor de valores, no un selector con estilo.

   El resultado era que en la home (body.is-home) y en la experiencia
   del participante (body.is-event) NINGUNA regla ponía font-family en
   el elemento raíz, así que el navegador usaba su hoja de agente de
   usuario, cuyo valor por defecto para <body> es la «fuente estándar»
   del usuario: una serif, es decir Times New Roman.

   Y como los controles de formulario y los botones llevan
   `font-family: inherit`, heredaban Times New Roman también. Solo se
   salvaban body.is-legal y body.admin, que sí declaraban la suya.

   Un @font-face de Figtree quedaba declarado y jamás referenciado por
   el mismo motivo: nada nombraba esa familia en la herencia.

   Se pone en <html> y no en <body> para que herede TODO, incluidos
   los elementos que el navegador cuelga fuera del flujo.
   ================================================================= */

html {
  font-family: var(--jm-sans);
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: inherit;
  margin: 0;
}

/* Los controles nativos no heredan la fuente por su cuenta en ningún
   navegador: hay que decírselo. */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}

/* =================================================================
   FOCO VISIBLE
   -----------------------------------------------------------------
   Un único anillo para toda la plataforma. :focus-visible y no :focus
   para que quien navega con el ratón no vea el anillo al hacer clic,
   pero quien navega con teclado lo vea siempre.

   Nunca se usa outline:none sin reemplazo: si alguna regla lo quita,
   estas de aquí lo devuelven con offset y contraste propios.
   ================================================================= */

:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--jm-red);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sobre fondo oscuro el anillo rojo se pierde: allí va en blanco. */
:where(.home-hero, .home-statement, .home-contact, .home-footer, .app-footer,
       .admin-foot, .legal-top, .final-quote, .home-nav)
  :where(a, button, [role="button"]):focus-visible {
  outline-color: var(--jm-white);
}

/* Salto al contenido: invisible hasta que se le da foco con el
   teclado. Es la primera parada de quien navega sin ratón. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 200;
  background: var(--jm-red);
  color: var(--jm-white);
  padding: 12px 18px;
  border-radius: 0 0 8px 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: top .15s ease;
}

.skip-link:focus-visible { top: 0; }

/* ---------------------------------------------------------------- */
/* Acento editorial                                                  */
/* ---------------------------------------------------------------- */

.jm-editorial {
  font-family: var(--jm-serif);
  font-weight: 400;
  letter-spacing: -.01em;
}

/* =================================================================
   MARCA JEDIS · el caballo Jake Mate
   -----------------------------------------------------------------
   Componente preparado. El helper PHP jedi_mark() decide qué pinta
   dentro:

     · Si existe el archivo oficial del caballo, un <img> con él.
     · Si no existe, el rombo neutro de abajo, que NO es el caballo
       ni pretende parecerlo: es un marcador de «siguiente jugada»
       que sostiene la composición hasta que suban el asset.

   Nunca se redibuja el caballo aquí. Si algún día aparece un caballo
   dibujado a mano en este archivo, alguien se saltó la regla.
   ================================================================= */

.jedis-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--jedis-size, 28px);
  height: var(--jedis-size, 28px);
  line-height: 0;
  vertical-align: middle;
}

.jedis-mark img,
.jedis-mark svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Tamaños de uso */
.jedis-sm { --jedis-size: 18px; }
.jedis-md { --jedis-size: 28px; }
.jedis-lg { --jedis-size: 44px; }
.jedis-xl { --jedis-size: 68px; }

/* Sobre fondo oscuro el caballo oficial (blanco) va tal cual; sobre
   fondo claro se tiñe con la marca. Solo aplica al placeholder y a
   los SVG, nunca al PNG oficial, que ya viene resuelto. */
.jedis-mark svg { fill: currentColor; }

.jedis-on-dark { color: var(--jm-white); }
.jedis-on-light { color: var(--jm-red); }

/* El caballo oficial es blanco: sobre fondo claro necesita un disco
   oscuro detrás para no desaparecer. */
.jedis-badge {
  width: calc(var(--jedis-size, 28px) + 18px);
  height: calc(var(--jedis-size, 28px) + 18px);
  border-radius: 50%;
  background: var(--jm-black);
  padding: 9px;
  box-sizing: border-box;
}

.jedis-badge-red { background: var(--jm-red); }

/* Marcador de posición: rombo de «siguiente jugada». Geometría
   deliberadamente abstracta. */
.jedis-placeholder {
  position: relative;
  border-radius: 4px;
  background: currentColor;
  width: calc(var(--jedis-size, 28px) * .58);
  height: calc(var(--jedis-size, 28px) * .58);
  transform: rotate(45deg);
  opacity: .9;
}

.jedis-placeholder::after {
  content: "";
  position: absolute;
  inset: 26%;
  border-radius: 2px;
  background: var(--jm-white);
}

.jedis-badge .jedis-placeholder::after { background: var(--jm-black); }
.jedis-badge-red .jedis-placeholder::after { background: var(--jm-red); }