/* ============================================================================ 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, la aparición al bajar y, desde el 17 oct 2026, los controles de formulario (casillas, interruptores, deslizadores, campos…: ver «LOS CONTROLES DE FORMULARIO» al final). 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)} /* Los macizos no llevan filo propio: sin esto heredan el `--filo-color` de la `.caja` donde caen (marrón) y `.btn::after` pinta un aro oscuro sobre el amarillo. El foco lo vuelve a poner más abajo (--sobre-amarillo). */ .btn-primary,.btn-live,.pill-live,.pill-open{--filo-color:transparent} @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