/* ═══════════════════════════════════════════════════════════════════════
   SABAI · El sello de la casa
   ───────────────────────────────────────────────────────────────────────
   La marca de la casa, una sola pieza para todas las pantallas.

   Antes era `/marca/icono-256.png` puesto tal cual: un cuadrado con el
   fondo crema cocido dentro de la imagen. Eso traía tres problemas que
   se arrastraban desde el principio:

     · De noche salía un recuadro encendido —lo más brillante de toda la
       pantalla—, y para taparlo había que mantener una SEGUNDA imagen
       (`icono-180-noche.png`) y acordarse de conmutarla pantalla por
       pantalla. En la portada y en el juego nadie se acordó nunca.
     · Era el único objeto con esquinas de una casa hecha entera de
       discos y superficies redondeadas.
     · Y no se parecía en nada al logo que una familia se pone en
       Ajustes → El nombre de la casa, que sí es un disco: dos lenguajes
       distintos peleándose por el mismo hueco.

   Ahora es un disco de papel con el árbol dibujado en tinta, y los dos
   colores salen de los tokens del tema. Un solo objeto de día y de
   noche, sin segunda imagen que mantener, y nítido a cualquier tamaño
   porque el árbol es vectorial: `/marca/sabai-trazo.svg` recortado como
   máscara. De ahí que el color lo ponga el CSS y no el archivo.

   USO
     <span class="sello" aria-hidden="true"><i></i></span>
   y el tamaño desde la pantalla, que es quien sabe cuánto mide:
     header .sello{--d:54px}

   Cuando la casa tiene su propio logo, `SabaiFamilia.viste()` le añade
   la clase `propia` y su contenido: misma pieza, mismo tamaño, otro
   relleno. Al tocar este archivo hay que subir VERSION en sw.js, que lo
   precarga.
   ═══════════════════════════════════════════════════════════════════════ */

.sello {
  /* Los colores salen de los tokens de Sabai. La reserva es para
     «Nuestra casa», que lleva su propia paleta y no carga
     sabai-tokens.css, y para el caso de que los tokens no hayan
     llegado todavía. */
  --sb-sello-papel: var(--sb-superficie, var(--card, #FFFDF8));
  --sb-sello-tinta: var(--sb-acento, var(--green, #3F6B4E));
  --sb-sello-aire:  var(--sb-acento-tenue, rgba(63, 107, 78, .10));

  position: relative;
  width: var(--d, 54px);
  height: var(--d, 54px);
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* Primero el color plano y luego el degradado: si un navegador no
     entiende color-mix, se queda con el disco liso en vez de con un
     agujero transparente. */
  background: var(--sb-sello-papel);
  background: radial-gradient(118% 118% at 50% 0%,
      color-mix(in srgb, var(--sb-sello-tinta) 10%, var(--sb-sello-papel)) 0%,
      var(--sb-sello-papel) 68%);
  box-shadow: var(--sb-sombra, var(--shadow,
      0 1px 2px rgba(28, 31, 29, .05), 0 6px 20px rgba(28, 31, 29, .06)));
}

/* ── El sello como puerta ──────────────────────────────────────────────
   Desde el 30/08 el sello de cada pantalla es un <a href="/">: tocar la
   marca de la casa lleva al inicio, que es lo que todo el mundo intenta
   antes de buscar la flecha. Va aquí y no en cada pantalla para que sea
   el mismo gesto en todas.

     <a class="sello" href="/" aria-label="Ir al inicio"><i aria-hidden="true"></i></a>

   OJO en la pantalla que lo estrene: si su CSS tiene una regla
   `header a{position:absolute…}` para la flecha de volver —hay cinco
   así—, hay que acotarla a `header a:not(.sello)` o el disco se va a la
   esquina. El `aria-hidden` pasa del enlace al <i> de dentro: un
   elemento que se puede enfocar no puede estar oculto para el lector.

   No lo llevan la portada (ya está en el inicio), el Panel de la cocina
   (se mira, no se navega) ni la pantalla de sin conexión. */
a.sello {
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}
a.sello:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) { a.sello { transition: none; } }

/* El halo: un aro finísimo por fuera del disco, a un pelo de distancia.
   Es lo que separa una imagen pegada de una pieza puesta encima del
   papel. Va fuera de la caja, así que el sello NO lleva overflow
   oculto; lo que hace falta recortar (la foto de la casa) se recorta
   por su cuenta. */
.sello::after {
  content: '';
  position: absolute;
  inset: calc(var(--d, 54px) * -.085);
  border-radius: 50%;
  border: 1px solid var(--sb-sello-aire);
  pointer-events: none;
}

/* El árbol. Va como máscara y no como <img> para que el color lo ponga
   el token: el mismo archivo sirve de día y de noche.

   El 95 % no es un ajuste fino: desde el 02/09/2026 el archivo de la
   máscara lleva un 4 % de aire por los cuatro lados —para que ninguna
   línea del dibujo toque el borde del recorte, que es lo que hacía
   aparecer rayas rectas dentro del disco—, así que la caja tiene que
   crecer otro tanto para que el árbol se siga viendo del mismo tamaño
   de siempre. Si algún día cambia el margen de sabai-trazo.svg, este
   número cambia con él. */
.sello > i {
  display: block;
  width: 95%;
  height: 95%;
  background: var(--sb-sello-tinta);
  -webkit-mask: url('/marca/sabai-trazo.svg') center / contain no-repeat;
          mask: url('/marca/sabai-trazo.svg') center / contain no-repeat;
}

/* ── El logo de la casa ────────────────────────────────────────────────
   Cuando la familia se ha puesto el suyo, el disco se llena con su color
   y el icono va en blanco encima. El tamaño no se toca: lo sigue
   mandando `--d` de cada pantalla. */
.sello.propia {
  background: linear-gradient(145deg, var(--sb-sello-a, #3F6B4E), var(--sb-sello-b, #2E5039));
  color: #fff;
}
.sello.propia > i { display: none; }
.sello.propia > .ic { display: block; width: 56%; height: 56%; }
.sello.propia > .ic svg { display: block; width: 100%; height: 100%; }
/* La foto que sube la casa sí se recorta, aquí y sólo aquí.

   Con DOS recortes y no uno, a propósito (02/09/2026): `border-radius`
   deja de recortar a un hijo en cuanto el navegador manda la capa a la
   tarjeta gráfica —y el sello se anima al entrar en la portada y al
   pulsarlo—, y entonces asoman los bordes rectos de la imagen. Con
   `clip-path` el corte es del compositor y no se cae nunca. El de la
   foto, además, se guarda YA REDONDO en Ajustes (ver `encoge`), así que
   aunque fallaran los dos recortes de aquí no habría esquinas que
   enseñar. Tres redes para lo mismo porque la imagen la sube un cliente
   y puede traer cualquier cosa pegada al borde. */
.sello.propia > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip-path: circle(50%);
  object-fit: cover;
}