/*
 * yoy-brand.css — identidad visual yoy (2026-11): yaw-ui en tema oscuro +
 * fondo vivo de yoy-gear.
 *
 * Fuentes de verdad: c:\laragon\www\yaw-ui\src\style.css (tokens del tema
 * oscuro: #202529 / #2D353A, primario #4096CC, Montserrat, radios 16/20/30)
 * y la animación de yoy-gear (velo, retícula y partículas que suben), la
 * misma de la skill entregables-yoy. El naranjo #FF6600 es la marca: va en el
 * botón principal y en lo que hay que mirar.
 *
 * Se mantienen los nombres de clase del sistema anterior (yoy_sky_glass:
 * .yoy-glass-panel, .yoy-btn, .yoy-input…) y alias de sus variables, para que
 * las páginas que ya lo usan cambien de piel sin tocar su HTML.
 */

:root {
  color-scheme: dark;
  /* yaw-ui · tema oscuro */
  --bg: #202529;
  --surface: #2D353A;
  --surface-2: #343E44;
  --surface-hundida: #1A1F22;
  --border: #FFFFFF14;
  --border-strong: #3A4650;
  --text: #FFFFFFE6;
  --text-2: #FFFFFFB3;
  --text-3: #FFFFFF82;
  --primary: #4096CC;
  --primary-strong: #2E7FB5;
  --primary-soft: #4096CC2E;
  --primary-light: #8CC4E8;
  --accent: #818CF8;
  --brand: #FF6600;
  --brand-2: #FF8A3D;
  --brand-hover: #E85D04;
  --ok: #3DBE8B;
  --work: #E8A93A;
  --plan: #9B8AFB;
  --risk: #F15A24;
  --hl: linear-gradient(100deg, #FFFFFF 0%, #FFD0AD 38%, #FF6600 100%);
  --r-control: 16px;
  --r-panel: 20px;
  --r-card: 24px;
  --shadow: 0 8px 24px rgb(0 0 0 / .28), 0 3px 8px rgb(0 0 0 / .18);

  /* Alias del sistema anterior (yoy_sky_glass) */
  --palette-primary: var(--brand);
  --palette-primary-hover: var(--brand-hover);
  --palette-secondary: var(--primary);
  --palette-danger: var(--risk);
  --palette-info: var(--primary-light);
  --text-primary: var(--text);
  --text-secondary: var(--text-2);
  --text-muted: var(--text-3);
  --view-bg: var(--surface);
  --panel-bg: var(--surface);
  --element-radius: var(--r-control);
}

body.yoy-app-bg {
  background: var(--bg);
  color: var(--text);
}

.yoy-glass-panel {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow);
}

.yoy-input {
  background: #FFFFFF0D;
  border: 1px solid #FFFFFF26;
  border-radius: var(--r-control);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 11px 14px;
  outline: none;
  font-family: inherit;
  width: 100%;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.yoy-input:focus { border-color: var(--primary); background: #FFFFFF14; box-shadow: 0 0 0 3px var(--primary-soft); }
.yoy-input::placeholder { color: #FFFFFF73; }
select.yoy-input option { background: var(--surface); color: var(--text); }

.yoy-btn {
  border: 1px solid transparent;
  border-radius: var(--r-control);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  padding: 11px 18px;
  width: 100%;
  color: var(--text);
  background: #FFFFFF12;
  border-color: #FFFFFF1F;
  box-shadow: var(--shadow);
  transition: transform 0.1s, opacity 0.15s, box-shadow 0.15s, background 0.15s;
}
.yoy-btn:hover:not(:disabled) { background: #FFFFFF1F; }
.yoy-btn:active { transform: scale(0.97); }
.yoy-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.yoy-btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.yoy-btn-primary:hover:not(:disabled) { background: var(--brand-hover); }

.yoy-btn-accent {
  background: var(--primary-strong);
  border-color: var(--primary-strong);
  color: #fff;
}
.yoy-btn-accent:hover:not(:disabled) { background: var(--primary); }

.yoy-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-2);
}

/* ── Fondo vivo de yoy-gear ───────────────────────────────────────────────
 * Velo de luz, retícula de puntos y partículas que suben (cada quinta,
 * naranja). Posiciones y tiempos fijos: no "salta" al recargar. El nodo lo
 * inyecta particles.js.
 */
.yoy-particle-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.yoy-fx-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 560px at 18% -12%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%),
    radial-gradient(900px 520px at 92% 4%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%),
    radial-gradient(700px 420px at 80% 110%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 70%);
}
.yoy-fx-grid {
  position: absolute;
  inset: 0;
  opacity: .55;
  background-image: radial-gradient(circle at 1px 1px, #FFFFFF12 1px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.yoy-particle-dust {
  position: absolute;
  bottom: -8vh;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 70%, transparent);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--primary) 45%, transparent);
  animation: yoy-fx-rise linear infinite;
  will-change: transform, opacity;
}
.yoy-particle-dust.marca {
  background: color-mix(in srgb, var(--brand) 75%, transparent);
  box-shadow: 0 0 7px 2px color-mix(in srgb, var(--brand) 40%, transparent);
}
@keyframes yoy-fx-rise {
  0% { transform: translateY(0) scale(.5); opacity: 0; }
  15% { opacity: .7; }
  85% { opacity: .5; }
  100% { transform: translateY(-112vh) scale(1); opacity: 0; }
}

/* ── Núcleo de yoy-gear (órbitas + anillos + logo con destello) ──────────── */
.yoy-core { position: relative; width: 120px; aspect-ratio: 1; display: grid; place-items: center; margin: 0 auto; }
.yoy-core .ring { position: absolute; border-radius: 50%; border: 2px solid transparent; }
.yoy-core .r1 { inset: 0; border-top-color: var(--brand); border-right-color: color-mix(in srgb, var(--brand) 30%, transparent); animation: yoy-core-spin 2.8s cubic-bezier(.4, 0, .2, 1) infinite; }
.yoy-core .r2 { inset: 12%; border-width: 1.5px; border-bottom-color: #FFFFFF99; border-left-color: #FFFFFF26; animation: yoy-core-spin 3.6s cubic-bezier(.4, 0, .2, 1) infinite reverse; }
.yoy-core .r3 { inset: 26%; border-width: 1px; border-color: #FFFFFF14; border-top-color: var(--primary); animation: yoy-core-spin 5.2s linear infinite; }
.yoy-core .orbit { position: absolute; inset: -5px; border-radius: 50%; animation: yoy-core-spin var(--sp) linear infinite; }
.yoy-core .o1 { --sp: 6s; }
.yoy-core .o2 { --sp: 9s; transform: rotate(120deg); }
.yoy-core .o3 { --sp: 12s; transform: rotate(240deg); }
.yoy-core .orbit i { position: absolute; top: -3px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 12px 3px color-mix(in srgb, var(--brand) 55%, transparent); }
.yoy-core .o2 i { width: 5px; height: 5px; background: #fff; box-shadow: 0 0 10px 2px #FFFFFF80; }
.yoy-core .o3 i { background: var(--primary); box-shadow: 0 0 10px 3px color-mix(in srgb, var(--primary) 60%, transparent); }
.yoy-core .glow { position: absolute; inset: 28%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 32%, transparent), transparent 70%); animation: yoy-core-breathe 3.2s ease-in-out infinite; }
.yoy-core .mark { position: relative; width: 30%; overflow: hidden; }
.yoy-core .mark img { display: block; width: 100%; height: auto; }
.yoy-core .mark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, #FFFFFFAA 50%, transparent 70%); transform: translateX(-120%); animation: yoy-core-shine 3.4s ease-in-out infinite; }
@keyframes yoy-core-spin { to { transform: rotate(360deg); } }
@keyframes yoy-core-breathe { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes yoy-core-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

@media (prefers-reduced-motion: reduce) {
  .yoy-particle-dust, .yoy-core *, .yoy-core .mark::after { animation: none !important; }
}