/* ============================================================
   Sistema de logo — Sala Ensayo
   Marca reutilizable en CSS (mismo dibujo que la lámina del sistema de logo).

   Uso:
     <span class="se-mark" style="--se-size:120px" aria-hidden="true">
       <i class="se-pin"></i>
       <i class="se-disc"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></i>
     </span>

   Modificadores en .se-mark:
     .se-mark--orange   invertida (grafito sobre ámbar)
     .se-mark--light    reemplaza grafito por hueso
     .se-mark--mono     una sola tinta: usa currentColor
     .se-mark--loading  la onda "respira" (loader); respeta prefers-reduced-motion
   ============================================================ */
.se-mark{
  --se-size:112px;
  --se-amber:#ff8a00; --se-graphite:#0e0e10; --se-bone:#f4f1ea;
  position:relative; display:inline-block; flex:none;
  width:calc(var(--se-size) * .78); height:var(--se-size);
  transform:translateY(calc(var(--se-size) * .11));
}
.se-pin{
  position:absolute; top:0; left:50%;
  width:calc(var(--se-size) * .78); height:calc(var(--se-size) * .78);
  transform:translateX(-50%) rotate(45deg);
  border-radius:50% 50% 50% 0; background:var(--se-amber);
}
.se-disc{
  position:absolute; top:calc(var(--se-size) * .075); left:50%;
  width:calc(var(--se-size) * .6); height:calc(var(--se-size) * .6);
  transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center;
  gap:calc(var(--se-size) * .028);
  border-radius:50%; background:var(--se-graphite);
}
.se-disc > i{ width:calc(var(--se-size) * .036); border-radius:99px; background:var(--se-amber); }
.se-disc > i:nth-child(1), .se-disc > i:nth-child(7){ height:18%; }
.se-disc > i:nth-child(2), .se-disc > i:nth-child(6){ height:38%; }
.se-disc > i:nth-child(3), .se-disc > i:nth-child(5){ height:60%; }
.se-disc > i:nth-child(4){ height:79%; }

/* Invertida: grafito sobre ámbar */
.se-mark--orange .se-pin{ background:var(--se-graphite); }
.se-mark--orange .se-disc{ background:var(--se-amber); }
.se-mark--orange .se-disc > i{ background:var(--se-graphite); }

/* Claro: grafito → hueso */
.se-mark--light .se-disc{ background:var(--se-bone); }
.se-mark--light.se-mark--orange .se-disc{ background:var(--se-amber); }

/* Monocroma: una sola tinta */
.se-mark--mono .se-pin{ background:currentColor; }
.se-mark--mono .se-disc{ background:var(--se-graphite); }
.se-mark--mono.se-mark--light .se-disc{ background:var(--se-bone); }
.se-mark--mono .se-disc > i{ background:currentColor; }

/* Sin disco: el círculo no tiene fondo, la onda va directo sobre el pin (grafito
   sobre ámbar). Para usar sobre fondos variables —el mapa, un tab del navegador—
   donde un círculo negro fijo quedaría como un manchón. */
.se-mark--hollow .se-disc{ background:transparent; }
.se-mark--hollow .se-disc > i{ background:var(--se-graphite); }
.se-mark--hollow.se-mark--orange .se-disc > i{ background:var(--se-graphite); }

/* Loader: sólo respira la onda; el pin queda estable */
.se-mark--loading .se-disc > i{
  transform-origin:center;
  animation:se-wave 1.3s ease-in-out infinite;
}
.se-mark--loading .se-disc > i:nth-child(1){ animation-delay:-.90s; }
.se-mark--loading .se-disc > i:nth-child(2){ animation-delay:-.25s; }
.se-mark--loading .se-disc > i:nth-child(3){ animation-delay:-.70s; }
.se-mark--loading .se-disc > i:nth-child(4){ animation-delay:-.05s; }
.se-mark--loading .se-disc > i:nth-child(5){ animation-delay:-.50s; }
.se-mark--loading .se-disc > i:nth-child(6){ animation-delay:-1.05s; }
.se-mark--loading .se-disc > i:nth-child(7){ animation-delay:-.35s; }
@keyframes se-wave{
  0%,100%{ transform:scaleY(.48); opacity:.7; }
  50%{ transform:scaleY(1); opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .se-mark--loading .se-disc > i{ animation:none; }
}

/* Pantalla de arranque: tapa la UI mientras se resuelve la sesión, para que no
   se vea el panel un segundo antes de rebotar al login. Se quita por JS al
   confirmar la sesión; si no hay, queda mientras redirige. */
.se-boot{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:var(--graphite, #0e0e10);
}
.se-boot .se-mark{ --se-size:96px; }
body.auth-pending > .app,
body.auth-pending > .wrap,
html.auth-pending body{ visibility:hidden; }