/* bmo OS — escritorio falso. Toda la web es un mini sistema operativo local.
   Reusa los tokens de marca (ámbar + menta, mono). CSS puro. */
@import url("tokens.css");

*,*::before,*::after { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body.os {
  margin: 0; background: var(--bg); color: var(--txt);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow: hidden; /* el escritorio no scrollea; las ventanas sí */
  height: 100dvh; position: relative;
}

/* Atmósfera del escritorio */
body.os::after {
  content:""; position: fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 80% 0%, rgba(255,176,0,.12), transparent 60%),
    radial-gradient(55% 55% at 0% 100%, rgba(95,227,203,.08), transparent 60%);
}
body.os::before {
  content:""; position: fixed; inset:0; z-index:9998; pointer-events:none; opacity:.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#bmo-net { position: fixed; inset:0; z-index:0; pointer-events:none; width:100%; height:100%; opacity:.5;
  -webkit-mask-image: radial-gradient(130% 100% at 50% 40%, #000 55%, transparent 95%);
          mask-image: radial-gradient(130% 100% at 50% 40%, #000 55%, transparent 95%); }

@media (prefers-reduced-motion: reduce){ #bmo-net{ display:none } *{ animation:none!important; transition:none!important } }

a { color: var(--mint); text-decoration: none; }
a:hover { color: var(--gold-2); }
em { color: var(--gold); font-style: normal; }
strong { color: var(--txt); }
h1,h2,h3 { font-family: var(--font-display); font-weight: 400; margin: 0 0 .35em; line-height: 1; letter-spacing: .005em; }
h1 { text-shadow: 0 0 18px rgba(255,176,0,.28); }  /* glow CRT en titulares */

/* ============================ MENUBAR (arriba) ============================ */
.menubar {
  position: fixed; top:0; left:0; right:0; height: 38px; z-index: 500;
  display:flex; align-items:center; gap: 1rem; padding: 0 .9rem;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-pixel); font-size: 9px; letter-spacing:.02em; color: var(--muted);
}
.menubar .os-brand { color: var(--txt); font-weight:700; display:inline-flex; align-items:center; gap:.5rem; letter-spacing:.02em; }
.menubar .os-brand::before { content:""; width:.65rem; height:.65rem; border-radius:3px; background: linear-gradient(135deg, var(--gold), var(--gold-dim)); box-shadow:0 0 10px rgba(255,176,0,.6); }
.menubar .mb-item { padding:.25em .6em; border-radius:6px; cursor:default; }
.menubar .mb-item:hover { background: var(--raise); color: var(--txt); }
.menubar .spacer { flex:1; }
.menubar .mb-stat { display:inline-flex; align-items:center; gap:.45rem; }
.menubar .mb-stat::before { content:""; width:.45rem; height:.45rem; border-radius:50%; background: var(--green); box-shadow:0 0 8px var(--green); }
.menubar .clock { color: var(--gold-2); letter-spacing:.06em; min-width: 4.2em; text-align:right; }
@media (max-width:640px){ .menubar .hide-sm { display:none; } }

/* ============================ ESCRITORIO ============================ */
#desktop { position: fixed; inset: 38px 0 0 0; z-index: 1; }

/* Iconos del escritorio — emblemas planos, sin chrome de botón */
.icons { position:absolute; top: 1.4rem; left: 1.1rem; display:flex; flex-direction:column; gap:.55rem; z-index:2; }
.dicon {
  position:relative; width: 100px; padding:.55rem .3rem .4rem;
  border:1px solid transparent; border-radius:10px; background: transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-family: var(--font-pixel); font-size: 9px; line-height:1.3; color: var(--txt); text-align:center;
  -webkit-appearance:none; appearance:none; transition: background var(--dur), border-color var(--dur);
}
.dicon .glyph {
  font-size: 2.3rem; line-height:1; color: var(--gold);
  text-shadow: 0 0 16px rgba(255,176,0,.45);
  filter: drop-shadow(0 5px 9px rgba(0,0,0,.55));
  transition: transform var(--dur), text-shadow var(--dur);
}
.dicon .glyph.mint { color: var(--mint); text-shadow: 0 0 16px rgba(95,227,203,.42); }
.dicon .lbl { padding:.12em .5em; border-radius:6px; line-height:1.1; transition: background var(--dur), color var(--dur); }
.dicon:hover .glyph { transform: translateY(-3px) scale(1.07); text-shadow: 0 0 22px rgba(255,176,0,.7); }
.dicon:hover .lbl { background: color-mix(in srgb, var(--gold) 18%, transparent); }
.dicon:focus-visible { outline:none; }
.dicon:focus-visible .lbl { background: color-mix(in srgb, var(--gold) 18%, transparent); box-shadow:0 0 0 1px var(--gold); }
/* seleccionado = su ventana está al frente (como un icono marcado en el escritorio) */
.dicon.selected { background: color-mix(in srgb, var(--gold) 9%, transparent); border-color: color-mix(in srgb, var(--gold) 28%, var(--line-2)); }
.dicon.selected .lbl { background: var(--gold); color:#1a1407; }
/* abierto = punto, como indicador de app activa en el dock de un OS */
.dicon.open .lbl::after { content:" ●"; color: var(--mint); font-size:.62em; vertical-align:middle; }

/* ============================ VENTANAS ============================ */
.winos {
  position: absolute; min-width: 280px; max-width: min(94vw, 720px);
  border:1px solid var(--line-2); border-radius: 12px; overflow:hidden;
  background: var(--panel); box-shadow: 0 30px 80px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.03) inset;
  display:flex; flex-direction:column; max-height: calc(100dvh - 92px);
  transform-origin: var(--ox, 50%) var(--oy, 50%);
}
/* Apertura tipo Mac: crece desde el icono que la lanzó */
.winos.opening { animation: winOpen .34s var(--ease-smooth); }
@keyframes winOpen {
  from { opacity:0; transform: scale(.16); }
  55%  { opacity:1; }
  to   { opacity:1; transform: scale(1); }
}
/* Cierre tipo Mac: se encoge hacia su origen */
.winos.closing { animation: winClose .2s var(--ease-smooth) forwards; pointer-events:none; }
@keyframes winClose {
  from { opacity:1; transform: scale(1); }
  to   { opacity:0; transform: scale(.16); }
}
.winos.active { border-color: color-mix(in srgb, var(--gold) 45%, var(--line-2)); box-shadow: 0 34px 90px -26px rgba(0,0,0,.9), var(--glow-gold); }
.winos.min { display:none; }

.winos .titlebar {
  display:flex; align-items:center; gap:.5rem; padding:.55rem .7rem;
  background: var(--raise); border-bottom:1px solid var(--line);
  font-family: var(--font-pixel); font-size: 9px; letter-spacing:.02em; color: var(--muted);
  cursor: grab; user-select:none; touch-action:none;
}
.winos .titlebar:active { cursor: grabbing; }
.winos .tdots { display:flex; gap:.4rem; }
.winos .tdot { width:11px; height:11px; border-radius:50%; border:0; padding:0; cursor:pointer; }
.tdot.close { background:#ff5f57 } .tdot.min { background:#febc2e } .tdot.zoom { background:#28c840 }
.tdot:hover { filter: brightness(1.25); }
.winos .ttl { margin-left:.4rem; color: var(--gold-2); letter-spacing:.02em; }
.winos .ttl::before { content:"~/"; color: var(--gold-dim); }

.winos .winbody { padding: 1.05rem 1.25rem 1.2rem; overflow:auto; scrollbar-width: thin; }
.winos .winbody h1 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.3rem); line-height:.95; margin-bottom:.25em; }
.winos .winbody h2 { font-size: clamp(1.5rem,1.2rem+1.1vw,2rem); margin-top: .7em; margin-bottom:.2em; }
.winos .winbody p { margin:.2em 0 .65em; color: var(--txt); max-width: 60ch; }
.winos .winbody .muted { color: var(--muted); }
.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem; font-family: var(--font-pixel);
  font-size: 9px; text-transform:uppercase; letter-spacing:.1em; color: var(--gold-dim); margin-bottom:.7rem;
}
.eyebrow::before { content:"$"; color: var(--gold); }

/* Tarjetas dentro de ventanas (lista de servicios, etc.) */
.oslist { list-style:none; margin: .5rem 0 0; padding:0; display:grid; gap:.45rem; }
.oslist li { border:1px solid var(--line); border-radius:9px; padding:.55rem .8rem; background: var(--bg-2); transition: border-color var(--dur), transform var(--dur), background var(--dur); }
.oslist li:hover { border-color: var(--line-2); transform: translateX(3px); background: linear-gradient(90deg, rgba(255,176,0,.06), transparent 60%), var(--bg-2); }
.oslist .tag { display:inline-block; font-family:var(--font-pixel); font-size:8px; color:var(--gold); background:rgba(255,176,0,.1); border:1px solid rgba(255,176,0,.22); padding:.3em .55em; border-radius:6px; margin-bottom:.4rem; letter-spacing:.04em; text-transform:uppercase; }
.oslist h3 { font-size: 1.55rem; line-height:.95; margin:.05rem 0 .15rem; }
.oslist p { margin:0; color: var(--muted); font-size: .84rem; line-height:1.4; }

.checks { list-style:none; padding:0; margin:.5rem 0 0; display:grid; gap:.3em; }
.checks li { padding-left:1.6em; position:relative; color: var(--txt); font-size: .86rem; line-height:1.4; }
.checks li::before { content:"\2713"; position:absolute; left:0; color: var(--green); font-weight:700; }

.winactions { display:flex; gap:.5rem 1.3rem; flex-wrap:wrap; align-items:center; margin-top: 1.2rem; }

/* Atajos: links tipo terminal/archivo, NO botones */
.shortcut {
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--mint);
  display:inline-flex; align-items:center; gap:.45rem; padding:.1em 0;
  border-bottom:1px dashed transparent; transition: color var(--dur), border-color var(--dur);
}
.shortcut:hover { color: var(--gold); border-color: var(--gold-dim); }

/* Lanzador (única acción real: WhatsApp) — tile estilo launcher, no botón genérico */
.launch {
  display:inline-flex; align-items:center; gap:.6rem; font-family: var(--font-mono); font-weight:600;
  font-size: var(--text-sm); color: var(--gold-2); padding:.5em .9em .5em .55em;
  border:1px solid var(--line-2); border-radius:11px;
  background: linear-gradient(180deg, rgba(255,176,0,.08), transparent 70%), var(--bg-2);
  transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur);
}
.launch:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--glow-gold); color: var(--gold-2); }
.launch .launch-ico { display:grid; place-items:center; width:1.8em; height:1.8em; border-radius:8px; background: rgba(95,227,203,.15); color: var(--mint); font-size:1.05em; }

/* prompt mono dentro de ventana */
.prompt { font-family: var(--font-mono); color: var(--gold-2); font-size: var(--text-sm); }
.cursor::after { content:"\2588"; color: var(--gold); animation: blink 1.05s steps(2) infinite; margin-left:.05em; }
@keyframes blink { 50%{ opacity:0 } }

/* ASCII bmo dentro de ventana */
pre.ascii { font-family: var(--font-mono); color: var(--gold); margin:0; white-space:pre; line-height:1.05;
  font-size: clamp(.6rem,.45rem+.8vw,.92rem); text-shadow:0 0 10px rgba(255,176,0,.4); display:inline-block; }
pre.ascii.alive { animation: bmoBreathe 3.6s ease-in-out infinite; }
@keyframes bmoBreathe { 0%,100%{ text-shadow:0 0 9px rgba(255,176,0,.4) } 50%{ text-shadow:0 0 16px rgba(255,176,0,.62) } }
.ascii-wrap { display:grid; place-items:center; padding:.6rem 0 1rem; }

/* ============================ MASCOTA BMO ============================ */
#pet { position: fixed; right: 20px; bottom: 22px; z-index: 10; display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; cursor:pointer; }
#pet pre { font-family: var(--font-mono); color: var(--gold); margin:0; white-space:pre; line-height:1.05;
  font-size: clamp(.42rem,.35rem+.4vw,.62rem); text-shadow:0 0 10px rgba(255,176,0,.4); }
#pet .bubble {
  align-self:flex-end; max-width: 230px; font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--txt); background: var(--panel); border:1px solid var(--line-2); border-radius:12px 12px 4px 12px;
  padding:.55rem .75rem; box-shadow: var(--shadow); opacity:0; transform: translateY(6px) scale(.97);
  transition: opacity .3s var(--ease-smooth), transform .3s var(--ease-smooth);
}
#pet .bubble.show { opacity:1; transform:none; }
#pet .bubble b { color: var(--gold); }
@media (max-width: 760px){ #pet { display:none; } }

/* ============================ BOOT ============================ */
#boot { position: fixed; inset:0; z-index:9999; background: var(--bg); color: var(--gold);
  font-family: var(--font-mono); font-size: var(--text-sm); line-height:1.7;
  display:flex; flex-direction:column; justify-content:center; padding: 8vh 8vw; white-space:pre-wrap; }
#boot.done { display:none; }

/* ============================ MÓVIL ============================ */
@media (max-width: 760px){
  body.os { overflow:auto; }
  .icons { position:static; flex-direction:row; flex-wrap:wrap; gap:.6rem; padding: 1.2rem 1rem; justify-content:center; }
  .dicon { width: 30%; max-width:110px; }
  #desktop { inset: 38px 0 0 0; overflow:auto; }
  .winos { position: fixed !important; left: 8px !important; right: 8px !important; top: 46px !important;
    width:auto !important; max-width:none; bottom: 12px; max-height:none;
    transform:none !important; }
  .winos.min { display:none; }
  .winos .titlebar { cursor:default; }
}

/* Pequeño "wallpaper" de texto, marca de agua del escritorio */
.wallmark {
  position: fixed; right: 2.5vw; bottom: 12vh; z-index:0; pointer-events:none;
  font-family: var(--font-display); font-weight:800; font-size: clamp(4rem, 14vw, 13rem);
  color: rgba(255,176,0,.035); letter-spacing:-.04em; line-height:.8; user-select:none;
}
@media (max-width:760px){ .wallmark{ display:none } }