/* Paleta y tipografía compartidas entre la app cliente y el panel admin,
   tomadas 1:1 del prototipo (F Cosme App.dc.html). */

:root {
  --bg: #06080f;
  --text: #eef1f7;
  --text-dim: rgba(238, 241, 247, 0.55);
  --text-faint: rgba(238, 241, 247, 0.42);
  --text-mute: rgba(238, 241, 247, 0.34);
  --border: rgba(255, 255, 255, 0.10);
  --border-soft: rgba(255, 255, 255, 0.07);
  --panel: rgba(255, 255, 255, 0.04);

  --orange: #FF7A1A;
  --orange-mid: #FF9A4D;
  --orange-soft: #FFB07A;
  --blue: #3B4CFF;
  --blue-soft: #9FA9FF;
  --green: #3ddc84;
  --green-soft: #7ef0b0;
  --red: #ff6b6b;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

/* Blindaje contra el bug clásico de CSS: si un elemento tiene el atributo
   `hidden` Y también una clase de author-CSS con `display:flex/grid/block`,
   esa clase gana (author-origin le gana al user-agent-origin aunque la
   especificidad del selector [hidden] sea igual o mayor). Sin esta regla,
   paneles que se ocultan con el atributo `hidden` quedan visibles igual. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-mid); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 99px; }

.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1100px 700px at 78% -10%, rgba(59,76,255,.20), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(255,122,26,.16), transparent 60%),
    var(--bg);
}

.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .35;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
}

@keyframes orbRing { 0% { transform: scale(.72); opacity: .55; } 70% { opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes orbBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes orbGlow { 0%, 100% { opacity: .55; filter: blur(26px); } 50% { opacity: .95; filter: blur(34px); } }
@keyframes spinSlow { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes spinRev { 0% { transform: rotate(360deg); } 100% { transform: rotate(0); } }
@keyframes bar { 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }
@keyframes riseIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes sheetUp { 0% { opacity: 0; transform: translateY(28px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes blip { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes grow { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }