/* ============================================================================
   SOMOS TRUFAS — LOS COMPONENTES COMUNES
   ============================================================================

   Lo que se ve igual en la web (somostrufas.org) y en el panel
   (admin.somostrufas.org): el aro del bisel, el antetítulo, los botones, las
   píldoras, la caja biselada, el menú de la cuenta y la aparición al bajar.
   Separado de base.css el 28 sep 2026 para que los dos sitios lean EL MISMO
   archivo y no dos copias que se van separando (el panel tenía las suyas).

   EL ORDEN DE LAS TRES HOJAS: marca.css (tokens y fuentes) → este →
   base.css o panel.css (la maqueta de cada sitio, que puede retocar lo de
   aquí porque se carga después).

   CÓMO LLEGA AL PANEL: NO lo lee de somostrufas.org. Cada vez que Cloudflare
   publica el panel (producción o una preview), `scripts/comun-panel.mjs`
   copia este archivo, marca.css, colocar.js y las fuentes a
   panel/assets/comun/ (el paso `build` de panel/wrangler.jsonc). Así cada
   rama se prueba con su versión y las fuentes cargan desde el propio panel.
   ⚠ Tocar algo aquí cambia LOS DOS sitios: se mira en los dos.

   Lo que NO va aquí: la barra, el hero, las tarjetas de evento, las tablas
   del panel… todo lo que solo existe en un sitio.
   ========================================================================== */

/* ---------- EL ANTETÍTULO ---------- */
.eyebrow{
  font-family:'Poppins',sans-serif;
  font-size:var(--tipo-antetitulo);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--yellow);
}

/* ---------- EL FILO DEL BISEL ----------
   `clip-path` recorta TODO lo que pinta el elemento, el borde incluido, y el
   borde se dibuja sobre el rectángulo: los dos chaflanes se llevaban su trozo
   por delante y el contorno se quedaba con dos huecos. Esto lo repone con un
   aro que SÍ tiene la forma del bisel. El cómo, el porqué y la geometría —que
   no es «lo mismo menos 1px»— están escritos junto a `--filo` en marca.css.

   Y de paso arregla el foco, que era el mismo fallo con otra cara: el
   `:focus-visible` de aquí arriba va por FUERA (outline-offset:3px), o sea que
   en cualquier cosa biselada caía entero fuera del recorte y no se veía nada.
   Ningún botón del sitio enseñaba dónde estaba el teclado. Ahora el anillo es
   el mismo aro, en amarillo y a 2px, por dentro.

   EL `::after` SE DECLARA EN TODOS LOS `.btn` Y TODAS LAS `.pill`, no solo en
   los que llevan filo: en los macizos (.btn-primary, .pill-live) nace
   transparente y solo aparece al enfocar. Un pseudo transparente no cuesta
   nada y evita tener dos listas de selectores que mantener a la par.

   ⚠ El `@supports` NO es decorativo: sin él, un navegador que no entienda el
   `fill-rule` dejaría el `clip-path` en `none` y el pseudo taparía el
   elemento con un rectángulo macizo. Con él se degrada a lo de antes. */
/* ⚠ `--filo-color` VA FUERA DEL `@supports`, y esto no es colocación: la
   reserva `box-shadow` de cada regla lo lee como
   `var(--filo-borde, var(--filo-color))`. Declarado dentro, un navegador sin
   `evenodd` se quedaría sin la variable, el `var()` no resolvería y el
   `box-shadow` entero se caería — la reserva desaparecería justo en el único
   navegador que la necesita. Pasó, y se vio en los botones de la barra. */
.btn-ghost,.pill-soon,.pill-done,.nav-toggle{--filo-color:var(--line)}

@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  /* UNA VEZ POR DOCUMENTO: apaga todas las reservas `box-shadow`/`border` del
     sitio, las de esta hoja y las de los <style> de cada página. */
  :root{--filo-borde:transparent}
  .btn,.pill,.nav-toggle{position:relative}
  .btn::after,.pill::after,.nav-toggle::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    clip-path:var(--filo-sm);background:var(--filo-color,transparent);
  }
  /* La píldora es una etiqueta: su corte es el de 5px (--bevel-xs). */
  .pill::after{clip-path:var(--filo-xs)}

  /* Las etiquetas: sin `border`, el pseudo ya es la caja de borde. */
  .bv-tag::after,.bv-chip::after{content:'';position:absolute;inset:0;pointer-events:none;
    clip-path:var(--filo-xs);background:var(--filo-color,transparent)}

  .btn:focus-visible,.nav-toggle:focus-visible{outline:none;--filo-color:var(--yellow)}
  .btn:focus-visible::after,
  .nav-toggle:focus-visible::after{clip-path:var(--filo-foco-sm)}
  /* Sobre los amarillos, el anillo amarillo no se veía: amarillo sobre
     amarillo. Va en la tinta oscura, la misma del texto del botón. */
  .btn-primary:focus-visible,.btn-live:focus-visible{--filo-color:var(--sobre-amarillo)}
}

/* ---------- LAS ETIQUETAS · un tamaño, tres niveles ----------
   Sistema de diseño (26 sep 2026). Todas a --tipo-etiqueta y en CHIP: bisel
   pequeño y el aro --filo-sm completo (el `::after`, en el `@supports` de más
   abajo; el `box-shadow` es la reserva de quien no entienda `evenodd`). La
   importancia la da el estilo, NUNCA el tamaño:
     · principal  — relleno: la región (su color), «En vivo», la ronda
     · normal     — contorno amarillo al 45 % y texto amarillo: juego, nivel, cupos
     · secundaria — contorno --line y texto --texto-3 (`.menor`): edición, borrador
   Con el mismo patrón van los tags de los cuadros (.cd-*), el estado de un
   jugador (.jug-st), la pastilla de la Escalera (.pf-n-tag) y la del campeón.
   Antes había seis tamaños (9,3–12,8px) y dos formas, recta y biselada. */
.bv-tags{list-style:none;margin:0 0 .9rem;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.bv-tag,.bv-chip{position:relative;display:inline-flex;align-items:center;gap:.4em;
  padding:.32rem .65rem;white-space:nowrap;
  font-family:'Poppins',sans-serif;font-size:var(--tipo-etiqueta);font-weight:600;line-height:1.2;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--yellow);--filo-color:rgba(255,198,33,.45);clip-path:var(--bevel-xs);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color))}
.bv-tag.menor,.bv-chip.menor,.bv-chip.borrador{color:var(--texto-3);--filo-color:var(--line)}
.bv-tag-ico{width:1.25em;height:1.25em;flex:none;fill:currentColor;display:block}
/* La región: relleno de su color y el texto «hueco», en el color del fondo.
   Se distingue también sin ver el color: es la única con relleno de la fila. */
.bv-tag.region{background:var(--tag, var(--yellow));--filo-color:var(--tag, var(--yellow));color:var(--ink)}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:'Poppins',sans-serif;font-size:var(--tipo-control);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  padding:.85rem 1.5rem;
  clip-path:var(--bevel-sm);
  transition:transform .15s ease, background .15s ease, color .15s ease;
  cursor:pointer;border:none;
}
.btn-primary{background:var(--yellow);color:var(--sobre-amarillo)}
.btn-primary:hover{transform:translateY(-2px);background:var(--yellow-alto)}
.btn-ghost{background:rgba(242,232,220,.07);color:var(--texto-1);box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color))}
.btn-ghost:hover{background:rgba(242,232,220,.13)}
.btn-sm{padding:.6rem 1.05rem;font-size:var(--tipo-leyenda)}

/* ---------- EL MENÚ DE PÁGINAS (.nav-paginas) ----------
   Los enlaces de página de una barra: Comunidad · Esports · Media kit en la
   web, Administración · Bot de Discord en el panel. En mayúsculas a
   `--tipo-control`, en --texto-3, y la página en la que estás en --texto-1
   con la raya amarilla abajo (`aria-current="page"`). Dónde va en cada
   barra lo decide cada sitio (base.css / panel.css). */
.nav-paginas{display:flex;align-items:center;gap:1.75rem;align-self:stretch}
.nav-paginas .nav-pagina{
  display:inline-flex;align-items:center;align-self:stretch;
  font-size:var(--tipo-control);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-3);transition:color .15s;white-space:nowrap;
}
.nav-paginas .nav-pagina:hover{color:var(--texto-1)}
.nav-paginas .nav-pagina[aria-current="page"]{color:var(--texto-1);box-shadow:inset 0 -2px 0 var(--yellow)}

/* ---------- LAS PÍLDORAS (etiquetas) ---------- */
.pill{
  font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:.32rem .65rem;clip-path:var(--bevel-xs);white-space:nowrap;
}
/* LA JERARQUÍA DE LAS CUATRO PÍLDORAS, que es lo único que ordena la parrilla
   de un vistazo: en vivo → abierto → próximo → finalizado, de más a menos.

   Antes la llevaba el matiz —rojo, amarillo, contorno, contorno apagado— y hoy
   la lleva el PESO, que es lo que sobrevive a quitar un color: amarillo macizo,
   marrón macizo, contorno claro, contorno apagado. En vivo y abierto son los
   dos que compiten, y por eso son los dos rellenos; lo que los separa es cuál
   de los dos colores de la marca los rellena, que a este tamaño se distingue
   antes que cualquier borde. */
.pill-live{background:var(--yellow);color:var(--sobre-amarillo)}
.pill-open{background:var(--brown);color:var(--texto-1)}
.pill-soon{background:rgba(242,232,220,.1);color:var(--texto-1);box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color))}
.pill-done{background:transparent;color:var(--texto-3);box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color))}

/* LOS OTROS DOS NIVELES DE ETIQUETA de la skill (28 sep 2026, del panel):
   la NORMAL, contorno amarillo al 45 % y texto amarillo (juego, cupos, lo
   nuevo); y la de AVISO, en la gama gris (error, sin verificar). */
.pill-normal,.pill-aviso{box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color))}
.pill-normal{background:transparent;color:var(--yellow);--filo-color:rgba(255,198,33,.45)}
.pill-aviso{background:var(--gris-1);color:var(--gris-3);--filo-color:var(--gris-2)}

/* ---------- EL SELLO DE UNA OFERTA (30 sep 2026) ----------
   Cada oferta dice de un vistazo QUIÉN la respalda, con tres sellos que se
   ordenan por PESO y no por matiz (la misma idea que las cuatro píldoras):

     Oferta oficial           .pill.pill-live    + .sello  amarillo macizo + ojo
     Oferta de Confianza      .pill.pill-normal  + .sello  contorno amarillo + palomita
     Oferta sin verificar     .pill.pill-aviso   + .sello  gris, sin marca (el defecto)

   LA OFICIAL NO LLEVA AUTOR: es de la casa. Las de terceros (Confianza y sin
   verificar) llevan debajo al autor —su usuario de Discord, con el logo de
   Discord— y un «?» que abre el aviso de que la oferta no es de Trufas
   (assets/ayuda.js). El autor puede llevar, junto al nombre, la marca de su
   verificación: el ojo de la cicatriz si es staff, la palomita amarilla si es
   de Confianza y nada si no. Manda la de más arriba.
   Las marcas son símbolos: el significado lo lleva el texto (aria-label). */
.sello{display:inline-flex;align-items:center;gap:.45rem}
.sello svg{height:1.45em;width:auto;flex:none}
.publica{position:relative;display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:var(--tipo-descripcion);color:var(--texto-2);line-height:1.4}
.publica b{font-weight:500;color:var(--texto-1)}
.ico-discord{width:1.3em;height:1.3em;fill:currentColor;flex:none;color:var(--texto-2)}
.marca-trufas,.marca-confianza{display:inline-flex;align-items:center;flex:none;color:var(--yellow)}
.marca-trufas svg{height:1.3em;width:auto}
.marca-confianza svg{height:1.05em;width:auto}

/* EL «?» DE LAS OFERTAS DE TERCEROS: una píldora pulsable que abre un globo
   con el aviso. Es un botón (aria-expanded/aria-controls); Escape y clic fuera
   lo cierran. El globo es una .caja, colgada del .publica que lo contiene. */
.ayuda-boton{border:0;cursor:pointer;font-family:inherit;letter-spacing:0;padding-inline:.6rem}
.ayuda-boton:hover,.ayuda-boton[aria-expanded="true"]{background:var(--yellow);color:var(--sobre-amarillo)}
.ayuda-boton:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.ayuda-globo{position:absolute;z-index:5;top:calc(100% + .5rem);left:0;width:min(22rem,calc(100vw - 3rem));
  padding:var(--esp-rejilla);font-size:var(--tipo-leyenda);color:var(--texto-2);line-height:1.55}
.ayuda-globo[hidden]{display:none}

/* El aviso de que se sale del espacio oficial: va antes del enlace que lleva
   a ofertas de terceros (Empleos → «Ver tablero completo»), con el mismo
   texto que el «?». Una caja, no un modal: se lee y se sigue. */
.aviso-salida{display:flex;align-items:center;gap:var(--esp-rejilla);padding:var(--esp-rejilla);
  font-size:var(--tipo-leyenda);color:var(--texto-2);line-height:1.5}
.aviso-salida>*{min-width:0}
.aviso-salida>.pill{flex:none}

/* ---------- LA CAJA BISELADA (.caja) ----------
   Una caja opaca de más de 60 px de alto: tarjeta, panel, ficha, aviso,
   menú. CAPA DOBLE, como la `.card` de siempre pero sin envoltorio:

     · el FONDO del elemento es el color del contorno (`--filo-color`),
     · un `::before` recortado con el mismo bisel 1 px por dentro pone el
       relleno (`--caja-fondo`). Al estar metido 1 px en cada eje, su
       diagonal queda a 1,4 px de la de fuera: el chaflán sale con raya.

   POR QUÉ NO EL ARO `--filo` (28 sep 2026): el aro va recortado DENTRO de
   un elemento que ya está recortado, y en una caja que cae en medio píxel
   (una rejilla de `1fr`, una pantalla a 1× o 1,25×) los dos bordes
   suavizados se multiplican: medido, los cantos bajaban a 55 de 74. Y
   depende de `polygon(evenodd…)`; el navegador que no lo entiende cae a la
   reserva, que deja los chaflanes sin raya. La capa doble no depende de nada
   y midió 74 en los cuatro cantos y los dos chaflanes.

   El `clip-path` ya crea su propio contexto de apilamiento, así que el
   relleno con `z-index:-1` queda entre el fondo y el contenido.

   Estados: se cambian `--filo-color` y `--caja-fondo`, nada más. El foco
   lleva el relleno a `inset:2px` (ver cada sitio). El aro `--filo` se queda
   para lo pequeño o translúcido (botones, píldoras, chips), donde no hay
   relleno opaco que poner encima. */
.caja,.cuenta-menu{
  position:relative;clip-path:var(--bevel);
  --filo-color:var(--line);--caja-fondo:var(--surface);
  background:var(--filo-color);
}
.caja::before,.cuenta-menu::before{
  content:'';position:absolute;inset:1px;z-index:-1;pointer-events:none;
  clip-path:var(--bevel);background:var(--caja-fondo);
}
.cuenta-menu{--caja-fondo:var(--surface-2)}

/* ---------- EL BOTÓN DE DISCORD (assets/cuenta.js) ----------
   Invitación y login en un solo botón, en el hueco del icono de siempre: el
   logo ▾ sin sesión, el avatar ▾ con ella. El menú lleva las acciones. */
.cuenta-sustituido{display:none!important}
.cuenta{position:relative;display:flex;align-items:center;flex:none}
/* La altura cae a 37px, la de un .btn-sm, donde la barra no define --btn-h
   (en /esports/ salía de 22px, más bajo que «Inscribirse»). */
.cuenta-boton{gap:.3rem;padding:0 .7rem 0 .85rem;cursor:pointer;height:var(--btn-h, 37px)}
.cuenta-boton svg:not(.cuenta-chevron){width:22px;height:22px;fill:currentColor;flex:none;display:block}
.cuenta-chevron{width:12px;height:12px;flex:none;opacity:.7;transition:transform .2s ease}
.cuenta-boton[aria-expanded="true"] .cuenta-chevron{transform:rotate(180deg)}
.cuenta-avatar{width:26px;height:26px;border-radius:50%;display:block;flex:none;background:var(--surface-2);object-fit:cover}
/* EL MENÚ ES UNA CAJA BISELADA (28 sep 2026), con la capa doble de `.caja`
   (ver arriba) y SIN SOMBRA: la llevaba, y la skill diseno-trufas no admite
   sombras. El relleno lateral de 1 px es para que el fondo de un ítem al
   pasar el cursor no tape el contorno. */
.cuenta-menu{
  position:absolute;top:calc(100% + .5rem);right:0;min-width:220px;z-index:80;
  padding:.35rem 1px;
}
.cuenta-menu[hidden]{display:none}
/* EN ESTRECHO EL MENÚ SE ALINEA CON LA BARRA, NO CON EL BOTÓN. Colgado del
   botón se salía por la izquierda donde el botón no queda pegado al borde
   (el media kit a 360px, con «PDF» y la hamburguesa a su derecha). Así cae
   siempre bajo la barra, a 16px del borde derecho. */
@media (max-width:620px){
  .nav-in{position:relative}
  .cuenta{position:static}
  .cuenta-menu{right:16px;top:calc(100% - .35rem)}
}
.cuenta-nombre{
  padding:.55rem 1rem .65rem;margin:0 0 .3rem;font-size:var(--tipo-descripcion);font-weight:600;color:var(--texto-1);
  border-bottom:1px solid var(--line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Un ítem puede ser <a> (enlace) o <button> (acción, como «Cerrar sesión»
   en el panel): el botón se desnuda para que los dos se vean igual. */
.cuenta-item{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;white-space:nowrap;
  padding:.65rem 1rem;font-size:var(--tipo-descripcion);color:var(--texto-3);
  width:100%;text-align:left;font-family:inherit;font-weight:400;
  background:transparent;border:0;cursor:pointer;
}
.cuenta-item.es-principal{color:var(--yellow);font-weight:600}
.cuenta-item.es-externo::after{content:'↗';font-size:var(--tipo-control);opacity:.8}
.cuenta-item:hover,.cuenta-item:focus-visible{color:var(--texto-1);background:var(--surface-2);outline:none}
.cuenta-item.es-principal:hover,.cuenta-item.es-principal:focus-visible{color:var(--yellow-alto)}
/* UNA OPCIÓN QUE TODAVÍA NO FUNCIONA («Autocuarentena», 28 sep 2026): se
   enseña para que se sepa que va a existir, pero apagada. Es un <a> SIN
   href y con aria-disabled: no se enfoca ni se pulsa. La opacidad aquí es un
   ESTADO, no un nivel de texto (la excepción está escrita en la skill). La
   descripción puede partirse en dos líneas: el resto del menú no. */
.cuenta-item.es-inactivo{
  flex-direction:column;align-items:flex-start;gap:.15rem;
  white-space:normal;opacity:.45;cursor:not-allowed;
}
.cuenta-item.es-inactivo:hover{color:var(--texto-3);background:transparent}
.cuenta-item-desc{font-size:var(--tipo-leyenda);line-height:1.4}
@media (prefers-reduced-motion: reduce){ .cuenta-chevron{transition:none} }
/* En estrecho, la flecha fuera y el mismo relleno que .btn-icon: el botón
   ocupa exactamente el hueco del icono al que sustituye. Con la flecha, la
   barra de la portada se pasaba 14px a 360. */
@media (max-width:640px){
  .cuenta-chevron{display:none}
  .cuenta-boton{padding:0 .78rem}
}

/* ============================================================
   APARICIÓN AL BAJAR — DESVANECIDO + COLOCACIÓN (26 sep 2026)
   ------------------------------------------------------------
   UNA SOLA VEZ PARA TODO EL SITIO. Hasta hoy cada página llevaba la
   suya (el home y esports un `surgir` de 10px, el media kit un `subir`
   de 26px desde opacidad 0), y la misma entrada se sentía distinta al
   cambiar de página. Los valores son los tokens `--mov-*` de marca.css
   y las reglas de uso, la skill diseno-trufas.

   DOS EFECTOS QUE SE SUMAN, en dos propiedades distintas para que no
   se pisen:
     1 · DESVANECIDO (`opacity`) — lo conduce el scroll con
         animation-timeline:view(): de .35 a 1 en los primeros 160px.
     2 · COLOCACIÓN (`translate`) — cuando el bloque ya está un poco
         dentro de la pantalla, assets/colocar.js le pone `.colocado` y
         sube 20px con un rebote leve. En `translate` y NO en `transform`
         para no pisar el `transform` del hover de las tarjetas.

   REGLA DE ORO, LA MISMA DE SIEMPRE: EL CONTENIDO SIEMPRE ESTÁ VISIBLE.
   El desplazamiento solo existe bajo `html.colocar`, que pone el script;
   si el script no llega, no hay nada desplazado. Con menos movimiento
   pedido, ni lo uno ni lo otro.
   ============================================================ */
@supports (animation-timeline: view()){
 @media (prefers-reduced-motion: no-preference){
  @keyframes aparecer{from{opacity:.35} to{opacity:1}}
  .reveal{
    animation:aparecer linear both;
    animation-timeline:view();
    animation-range:entry 0px entry var(--mov-tramo, 160px);
  }
 }
}
@media (prefers-reduced-motion: no-preference){
  .colocar .reveal{
    translate:0 var(--mov-desde, 1.25rem);
    transition:translate var(--mov-colocar, .6s) var(--mov-rebote, ease-out);
    /* En una rejilla, cada hermano lleva su `--i` y entra detrás del
       anterior. Sin `--i`, sin retraso. */
    transition-delay:calc(var(--i, 0) * var(--mov-escalon, 80ms));
  }
  .colocar .reveal.colocado{translate:0 0}
  /* Lo que se repinta ya a la vista (una lista que llega de la base, el
     cambio de pestaña de esports) se coloca SIN salto: saltaría con cada
     repintado, y eso es un parpadeo, no una entrada. */
  .colocar .reveal.colocado-quieto{transition:none}
}
/* Donde no hay animation-timeline (Safari, Firefox), el desvanecido
   viaja con el salto para no perderse. */
@supports not (animation-timeline: view()){
 @media (prefers-reduced-motion: no-preference){
  .colocar .reveal{opacity:.35;transition-property:translate,opacity}
  .colocar .reveal.colocado{opacity:1}
 }
}
/* En papel, todo en su sitio. */
@media print{
  .reveal{animation:none!important;opacity:1!important;translate:none!important}
}