/* ============================================================================================
   CAPA ESTACIONAL — SOLO DECORACION, TEMPORAL

   Tres adornos y un unico mando en el encabezado: nevada, arbolito y guirnalda. No cambia el
   tema de la aplicacion; los colores salen de las variables que ya existen, salvo los del propio
   dibujo navideno, que son los de la paleta de marca.

   Todas las clases de aqui las crea nieve.js, y solo cuando sus tres puertas lo permiten. Si no
   se enciende, este archivo no selecciona nada. Para retirar la capa antes de tiempo basta
   quitar sus dos etiquetas de index.html.
   ============================================================================================ */

:root { --adorno-mint: #5fc9ab; }

/* ================================== NEVADA ================================================= */
/* Capa fija, por encima del contenido y por debajo de los dialogos, sin capturar eventos. */
.nieve-campo {
  position: fixed; inset: 0; z-index: 24; overflow: hidden; pointer-events: none;
  opacity: 1; transition: opacity .3s ease-out;
}
.nieve-campo[data-activa="false"] { opacity: 0; }

.nieve-copo {
  position: absolute; top: -32px; color: #fff; font-size: 15px; user-select: none;
  text-shadow: 0 0 5px rgb(30 46 42 / 18%);
  animation-name: nieve-caida; animation-timing-function: linear; animation-iteration-count: infinite;
}
/* Sobre un fondo claro un copo blanco no se ve: dos de cada tres van en un tono apagado. */
.nieve-copo.suave { color: #7faea2; text-shadow: none; }
:root[data-theme="dark"] .nieve-copo.suave { color: var(--brand-mint-soft, #cfede2); }

@keyframes nieve-caida {
  from { transform: translate3d(0, -28px, 0) rotate(0deg); }
  to   { transform: translate3d(44px, 110vh, 0) rotate(300deg); }
}

/* ================================== ARBOLITO =============================================== */
/* El left lo publica nieve.js midiendo el borde real de la barra lateral, que se pliega. */
.adorno-arbol {
  position: fixed; z-index: 23; bottom: 14px; left: var(--adorno-arbol-left, 206px);
  width: 104px; pointer-events: none;
  filter: drop-shadow(0 10px 16px rgb(30 46 42 / 18%));
  animation: adorno-flotar 6s ease-in-out infinite;
}
.adorno-arbol svg { display: block; width: 100%; height: auto; }
@keyframes adorno-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* En pantallas estrechas esa esquina es de la navegacion. nieve.js ni lo monta; esto es la red. */
@media (max-width: 980px) { .adorno-arbol { display: none; } }

/* ================================== GUIRNALDA ==============================================
   El dibujo va de FONDO REPETIDO, no estirado: `background-size: auto 131px` fija su escala en
   pixeles, de modo que se ve exactamente igual en una pantalla de 1200 que en una de 2560 y el
   encabezado nunca cambia de alto. El ancho lo cubre `repeat-x`, y el dibujo lleva dentro una
   copia espejada, asi que el borde de un mosaico es el reflejo del siguiente y no hay costura.

   Se ancla abajo: lo que se recorta es follaje por arriba, nunca el resplandor de las luces.

   El encabezado NO crece hasta el alto de la banda. El titulo y los botones se apoyan sobre el
   follaje, dentro de la banda: por eso se retiraron las bombillas de los dos extremos, que es
   donde caen. El contenido se pinta por encima (z-index 1), asi que tapa follaje, no al reves. */
.topbar:has(.adorno-guirnalda) { position: relative; padding-top: 22px; }
.topbar > *:not(.adorno-guirnalda) { position: relative; z-index: 1; }
.adorno-guirnalda {
  position: absolute; top: 0; left: 0; right: 0; height: 84px;
  background-image: url("./nieve-guirnalda.svg");
  background-repeat: repeat-x; background-position: left bottom; background-size: auto 131px;
  overflow: hidden; pointer-events: none; z-index: 0; line-height: 0;
}

/* El parpadeo del hilo de movil va aqui porque ese SVG es inline y si recibe el CSS de la
   pagina; el de escritorio viaja como imagen y lleva el suyo dentro. */
.adorno-farol .halo {
  transform-box: fill-box; transform-origin: center;
  animation: adorno-halo 3.1s ease-in-out infinite; animation-delay: var(--retraso);
}
.adorno-farol .bulb-glass {
  animation: adorno-brillo 3.1s ease-in-out infinite; animation-delay: var(--retraso);
}
@keyframes adorno-halo { 0%, 100% { opacity: .34; transform: scale(.96); } 50% { opacity: .9; transform: scale(1.16); } }
@keyframes adorno-brillo { 0%, 100% { filter: brightness(.96); } 50% { filter: brightness(1.24); } }

/* En movil el follaje se come el titulo y resulta invasivo: la banda se queda solo con las
   luces, mas baja, y el titulo pasa por debajo sin que nada lo cruce. nieve.js dibuja ahi un
   SVG propio al ancho real, de modo que el fondo sobra.
   mobile-navigation.css fija `#app-shell .topbar { padding-block: 12px }`, que gana por
   especificidad: hay que igualar el selector o el respiro no se aplica. */
@media (max-width: 980px) {
  #app-shell .topbar:has(.adorno-guirnalda) { padding-top: 30px; }
  .adorno-guirnalda { height: 52px; background-image: none; }
}

/* ========================= LEGIBILIDAD SOBRE LA GUIRNALDA ===================================
   Los controles del encabezado quedan por encima del follaje, y sobre unas ramas con luces el
   texto fino se lee mal. Estas reglas cuelgan TODAS de :has(.adorno-guirnalda): existen solo
   mientras la guirnalda esta montada. Al cerrarse la ventana el 31 de diciembre nieve.js no
   monta nada, el selector no encuentra a quien aplicarse y el encabezado vuelve exactamente a
   como estaba, sin tocar una linea. */

/* Un velo translucido bajo todo el grupo de botones: suaviza el follaje sin taparlo. */
.topbar:has(.adorno-guirnalda) .top-actions {
  padding: 5px 8px; border-radius: 16px;
  background: rgb(255 255 255 / 55%);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
:root[data-theme="dark"] .topbar:has(.adorno-guirnalda) .top-actions {
  background: rgb(30 46 42 / 55%);
}

/* El nombre y el rol son texto suelto, sin pastilla propia: se les da fondo solido para que no
   compitan con las bombillas. En oscuro el solido es la superficie del tema, no blanco. */
.topbar:has(.adorno-guirnalda) .auth-user {
  background: #fff; color: var(--ink);
  padding: 4px 9px; border-radius: 9px;
  border: 1px solid var(--line);
}
:root[data-theme="dark"] .topbar:has(.adorno-guirnalda) .auth-user {
  background: var(--surface);
}

/* =============================== MANDO DEL ENCABEZADO ====================================== */
.adorno-mando { position: relative; display: inline-flex; }
.adorno-mando > .icon-button svg { width: 16px; height: 16px; display: block; }
.adorno-mando > .icon-button[aria-expanded="true"] { border-color: var(--adorno-mint); color: var(--adorno-mint); }

.adorno-popover {
  position: absolute; z-index: 60; top: calc(100% + 9px); right: 0;
  width: 182px; padding: 7px; border-radius: 12px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  font: 600 12.5px var(--font);
}
.adorno-popover[hidden] { display: none; }
.adorno-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; padding: 7px 9px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: inherit; font: inherit; text-align: left;
}
.adorno-fila:hover { background: var(--surface-soft); }
.adorno-fila:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.adorno-fila[disabled] { cursor: default; opacity: .5; }

/* Interruptor: pastilla con perilla, apagado gris y encendido menta. */
.adorno-switch {
  flex: 0 0 auto; width: 34px; height: 19px; border-radius: 99px; position: relative;
  background: var(--muted-2); transition: background-color .2s ease-out;
}
.adorno-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(30 46 42 / 35%);
  transition: transform .2s ease-out;
}
.adorno-fila[aria-checked="true"] .adorno-switch { background: var(--adorno-mint); }
.adorno-fila[aria-checked="true"] .adorno-switch::after { transform: translateX(15px); }

/* Preferencia del sistema de menos movimiento: sin nevada y sin nada que parpadee. */
@media (prefers-reduced-motion: reduce) {
  .nieve-campo { display: none; }
  .adorno-arbol, .adorno-farol .halo, .adorno-farol .bulb-glass { animation: none; }
}