/* ============================================================
   DongoOS — shell del sistema operativo
   Arranque · barra OS · ventanas modal-OS · terminal · vida
   Reusa las variables de cmd.css / base.css.
   ============================================================ */

/* ── Variables locales ─────────────────────────────────────── */
.cmd-body {
  --dos-bar-h: 54px;
  --dos-win-radius: 16px;
}

/* ============================================================
   1) PANTALLA DE ARRANQUE
   ============================================================ */
.dongo-boot {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 30%, #2a211a 0%, #161109 60%, #0c0905 100%);
  color: #f3e8d6;
  opacity: 1;
  transition: opacity .6s ease, visibility .6s;
}
.dongo-boot.boot-done { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-inner { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding: 2rem; text-align: center; }
.boot-logo { display: flex; align-items: baseline; gap: .55rem; font-family: var(--sans, system-ui); }
.boot-paw { font-size: 1.6rem; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); animation: boot-paw 1.4s ease-in-out infinite; }
@keyframes boot-paw { 0%,100%{ transform: rotate(-8deg); } 50%{ transform: rotate(8deg); } }
.boot-word {
  font-size: clamp(2.4rem, 7.5vw, 3.8rem); font-weight: 800; letter-spacing: -.035em; color: #f9f1e2;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.boot-word b { color: var(--accent, #C97A3A); font-weight: 800; text-shadow: 0 0 28px rgba(201,122,58,.55); }
.boot-pups { display: flex; justify-content: center; align-items: flex-end; gap: .5rem; width: min(480px, 92vw); margin: .6rem 0 .3rem; }
/* Perros de PERFIL: entran (boot-pup-in) y se quedan CORRIENDO/JUGANDO en el sitio. */
.boot-pup {
  flex: 1; max-width: 116px; opacity: 0;
  transform: translateY(20px) scale(.7); transform-origin: center bottom;
  animation:
    boot-pup-in .6s cubic-bezier(.34,1.56,.64,1) var(--d,.15s) forwards,
    boot-pup-play 1.6s ease-in-out calc(var(--d,.15s) + .6s) infinite;
}
.boot-pup .pet-side-svg { width: 100%; height: auto; display: block;
  transform: scaleX(var(--flip,1)); transform-origin: center bottom;
  filter: drop-shadow(0 5px 9px rgba(0,0,0,.45)); }
/* patas con movimiento SUAVE de juego (no carrera frenética) + cola feliz */
.boot-pup .dw-fn, .boot-pup .dw-bb { animation: boot-leg .55s ease-in-out infinite; }
.boot-pup .dw-bn, .boot-pup .dw-fb { animation: boot-leg .55s ease-in-out infinite reverse; }
@keyframes boot-leg { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.boot-pup .dw-tail { animation: pf-tail .3s ease-in-out infinite; }
.boot-pup[data-pet="venus"]  { --d:.12s; }
.boot-pup[data-pet="toby"]   { --d:.34s; }
.boot-pup[data-pet="gladys"] { --d:.56s; }
.boot-pup[data-pet="lucy"]   { --d:.78s; }
@keyframes boot-pup-in { 0%{ opacity:0; transform: translateY(20px) scale(.7);} 70%{ opacity:1; transform: translateY(-5px) scale(1.06);} 100%{ opacity:1; transform: translateY(0) scale(1);} }
/* rebote de JUEGO: "play-bow" — se agacha al frente y rebota, pausado y alegre */
@keyframes boot-pup-play {
  0%, 100% { transform: translateY(0)     rotate(0deg)   scaleY(1); }
  20%      { transform: translateY(2px)   rotate(0deg)   scaleY(.94); }  /* agacha (play bow) */
  45%      { transform: translateY(-14px) rotate(-2deg)  scaleY(1.04); } /* salta */
  70%      { transform: translateY(0)     rotate(1deg)   scaleY(1); }
}
/* remate: salto colectivo justo antes del fade-out */
.dongo-boot.boot-hop .boot-pup { animation: boot-pup-hop .42s cubic-bezier(.34,1.7,.5,1) both; }
@keyframes boot-pup-hop { 0%{ transform: translateY(0) scale(1);} 45%{ transform: translateY(-22px) scale(1.1);} 100%{ transform: translateY(0) scale(1);} }
.boot-bar { width: min(320px, 70vw); height: 5px; border-radius: 5px; background: rgba(255,255,255,.14); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.boot-bar-fill { display: block; height: 100%; width: 0; border-radius: 5px;
  background: linear-gradient(90deg, var(--venus,#C8893F), var(--toby,#3E7FAD), var(--gladys,#5B8A6A), var(--lucy,#C2912E));
  box-shadow: 0 0 12px -2px rgba(201,122,58,.6);
  animation: boot-bar 3.9s cubic-bezier(.5,.05,.2,1) forwards; }
@keyframes boot-bar { 0%{ width:0; } 100%{ width:100%; } }
.boot-status { font-family: var(--mono, monospace); font-size: .82rem; font-weight: 500; color: #e4d8c4; min-height: 1.1em; letter-spacing: .02em; }
.boot-edition { font-family: var(--mono, monospace); font-size: .64rem; color: #9d8f7a; letter-spacing: .14em; text-transform: uppercase; }

/* ============================================================
   2) BARRA OS (extiende .cmd-nav existente)
   ============================================================ */
.cmd-nav-brandtext { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.cmd-nav-name { font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; color: var(--ink, #2a221a); }
.cmd-nav-name b { color: var(--accent, #C97A3A); }
.cmd-nav-user { font-size: .64rem; font-family: var(--mono, monospace); color: var(--ink-dim, #8a7d6a); letter-spacing: .02em; }

.cmd-os-status { display: flex; align-items: center; gap: .7rem; font-family: var(--mono, monospace); font-size: .72rem; color: var(--ink-mid, #6a5d4a); }
.os-stat { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.os-online i { color: var(--gladys, #5B8A6A); font-size: .5rem; animation: os-pulse 2.4s ease-in-out infinite; }
@keyframes os-pulse { 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
.os-clock { font-variant-numeric: tabular-nums; color: var(--ink, #2a221a); font-weight: 600; }
@media (max-width: 760px) { .cmd-os-status .os-online span, .cmd-nav-user { display: none; } .os-online { font-size: 0; } }

/* ============================================================
   3) ESCRITORIO con íconos de apps (vista principal, despejada)
   ============================================================ */
#dos-desktop {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--dos-bar-h);
  z-index: 2; padding: 1.4rem 1.2rem;
}
.dos-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, 92px);
  grid-auto-rows: 96px;
  gap: .5rem 1rem;
  justify-content: start; align-content: start;
  max-width: 420px;   /* columna de íconos a la izquierda, escritorio despejado */
}
.dos-icon {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  width: 88px; padding: .4rem .2rem; border: 0; background: transparent; cursor: pointer;
  border-radius: 12px; transition: transform .14s, background .14s;
}
.dos-icon:hover { transform: translateY(-3px); background: rgba(255,255,255,.10); }
.dos-icon:focus-visible { transform: translateY(-3px); background: rgba(255,255,255,.10);
  outline: 2px solid var(--accent); outline-offset: 3px; }
.dos-icon:active { transform: translateY(-1px) scale(.97); }

/* Placa editorial: papel cálido translúcido (glassmorphism), glyph EN COLOR del
   dominio, barra de acento superior (eco del borde de las ventanas .dos-window::before)
   y sombra de color. Legible sobre cualquier foto del escritorio. */
.di-img {
  position: relative; isolation: isolate;
  width: 60px; height: 60px; border-radius: 17px; display: grid; place-items: center;
  font-size: 1.45rem; color: var(--c); overflow: hidden;
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  -webkit-backdrop-filter: blur(11px) saturate(1.15);
          backdrop-filter: blur(11px) saturate(1.15);
  border: 1px solid color-mix(in srgb, var(--c) 38%, var(--line));
  box-shadow:
    0 10px 24px -10px color-mix(in srgb, var(--c) 52%, transparent),
    inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.di-img::before {                         /* barra de acento superior por dominio */
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--c); opacity: .92;
}
.dos-icon:hover .di-img {
  border-color: color-mix(in srgb, var(--c) 62%, var(--line));
  box-shadow:
    0 16px 32px -10px color-mix(in srgb, var(--c) 64%, transparent),
    inset 0 1px 0 rgba(255,255,255,.75);
}

/* Asistente: placa DORADA rellena (pieza central) — se distingue de las secciones. */
#open-terminal .di-img {
  color: #fff;
  background: linear-gradient(150deg, var(--accent), var(--accent-dk));
  border-color: color-mix(in srgb, var(--accent) 70%, #000 10%);
  box-shadow:
    0 12px 28px -8px color-mix(in srgb, var(--accent) 70%, transparent),
    0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,.4);
}
#open-terminal .di-img::before { background: rgba(255,255,255,.45); }
#open-terminal:hover .di-img {
  box-shadow:
    0 18px 36px -8px color-mix(in srgb, var(--accent) 78%, transparent),
    0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent),
    inset 0 1px 0 rgba(255,255,255,.5);
}

.di-label {
  font-family: var(--sans, system-ui); font-size: .72rem; font-weight: 600; color: var(--paper);
  text-align: center; line-height: 1.15;
  padding: .12rem .5rem; border-radius: 7px;
  background: rgba(26,18,10,.42);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
@media (max-width: 560px) {
  .dos-icons { grid-template-columns: repeat(auto-fill, 80px); max-width: 100%; }
  .dos-icon { width: 76px; } .di-img { width: 52px; height: 52px; font-size: 1.28rem; }
}

/* ============================================================
   3b) TERMINAL — la consola/chat como app abrible (cerrada por defecto)
   ============================================================ */
body:not(.term-open) .cmd-stage { display: none !important; }

/* Velo de enfoque: al abrir el asistente, el escritorio se atenúa detrás. */
body.cmd-body.term-open::after {
  content: ''; position: fixed; inset: 0; z-index: 1480;
  background: radial-gradient(130% 120% at 50% 32%, rgba(26,18,10,.40), rgba(26,18,10,.70));
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  animation: scrim-in .3s ease;
}
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }

/* ── OPTIMIZACIÓN: con el asistente abierto, el escritorio no necesita animarse ──
   Congela el Ken Burns del fondo y oculta perros/polvo/traductor (la física también
   se pausa en JS). Baja drásticamente el costo de pintado mientras se usa el chat. */
body.cmd-body.term-open #cmd-backdrop .bk-slide.on { animation-play-state: paused !important; }
body.cmd-body.term-open .dos-pets,
body.cmd-body.term-open .dos-dust,
body.cmd-body.term-open .dog-translator { display: none !important; }

/* Panel del asistente: GRANDE y CENTRADO, en la familia editorial del sitio. */
.cmd-body .cmd-stage {
  position: fixed; z-index: 1500;
  left: 50%; top: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  width: min(940px, 95vw); height: min(86vh, 880px);
  max-width: none; max-height: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 75% at 100% 0%, rgba(184,110,60,.08), transparent 55%),
    var(--paper, #fbf7ee);
  border: 1px solid rgba(184,110,60,.30);
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 44px 110px -34px rgba(20,14,8,.72);
  display: flex; flex-direction: column;
  animation: term-in .32s cubic-bezier(.34,1.4,.5,1);
}
@keyframes term-in {
  from { opacity: 0; transform: translate(-50%,-50%) scale(.955); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

/* Barra superior editorial: marca + estado + cerrar */
.term-bar {
  display: flex; align-items: center; gap: .7rem; flex: 0 0 auto;
  padding: .7rem 1.1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(247,242,233,.38));
  border-bottom: 1px solid rgba(184,110,60,.18);
  color: var(--ink, #2a221a);
}
.term-ico {
  width: 32px; height: 32px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: .9rem;
  background: linear-gradient(150deg, var(--accent, #C97A3A), var(--accent-dk, #8A4F2A));
  color: #fff; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent) 60%, transparent);
}
.term-head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; line-height: 1.1; }
.term-eyebrow {
  font-family: var(--mono, monospace); font-size: .58rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-dk, #8A4F2A);
}
.term-title {
  font-family: var(--serif, Georgia, serif); font-weight: 600; font-size: 1rem;
  color: var(--ink, #2a221a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.term-status {
  display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto;
  font-family: var(--sans, system-ui); font-size: .64rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--gladys, #5B8A6A);
}
.term-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gladys, #5B8A6A);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--gladys) 60%, transparent);
  animation: term-dot-pulse 2.4s ease-out infinite;
}
@keyframes term-dot-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gladys) 55%, transparent); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (max-width: 600px) { .term-status { display: none; } }
@media (prefers-reduced-motion: reduce) { .term-dot { animation: none; } }
.term-close { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line, rgba(0,0,0,.1)); background: var(--paper-warm, #f1e9dc); color: var(--ink-mid, #6a5d4a); cursor: pointer; display: grid; place-items: center; font-size: .9rem; transition: background .15s, color .15s, transform .12s; }
.term-close:hover { background: #ed6a5e; color: #fff; border-color: transparent; transform: rotate(90deg); }
.cmd-body .cmd-stage .transcript {
  flex: 1 1 auto; overflow-y: auto; min-height: 0;
  padding: 1.6rem clamp(1rem, 3vw, 2.2rem) 1.4rem;
  /* el header ya separa arriba: degradado de tope mínimo */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1rem, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 1rem, #000 100%);
}
/* el dock de entrada acompaña el ancho del panel */
.cmd-body .cmd-stage .dock { max-width: 820px; padding: .9rem clamp(1rem,3vw,2.2rem) 1.2rem; }

@media (max-width: 600px) {
  .cmd-body .cmd-stage { width: 96vw; height: 92vh; border-radius: 16px; }
  .term-bar { padding: .7rem .85rem; }
}

/* ============================================================
   4) VENTANAS flotantes, arrastrables (apps de cada sección)
   No bloquean el chat: floten sobre el escritorio, se mueven y apilan.
   ============================================================ */
.dos-window {
  position: fixed; z-index: 1000;
  display: flex; flex-direction: column;
  width: min(840px, 94vw); height: min(76vh, 680px);
  background: var(--paper, #fbf7ee);
  border: 1px solid var(--line, rgba(0,0,0,.14));
  border-radius: var(--dos-win-radius);
  box-shadow: 0 24px 64px -22px rgba(20,14,8,.5), 0 3px 12px rgba(20,14,8,.16);
  overflow: hidden;
  transform: translateY(14px) scale(.975); opacity: 0;
  transition: transform .28s cubic-bezier(.34,1.4,.5,1), opacity .22s ease;
}
.dos-window.show { transform: none; opacity: 1; }
.dos-window.closing { transform: translateY(10px) scale(.97); opacity: 0; }
.dos-window.focused { box-shadow: 0 30px 84px -20px rgba(20,14,8,.6), 0 0 0 1px rgba(201,122,58,.28); }
.dos-window.dragging { transition: none; user-select: none; }
.dos-window.maximized {
  left: 8px !important; top: calc(var(--dos-bar-h) + 6px) !important;
  width: calc(100vw - 16px); height: calc(100vh - var(--dos-bar-h) - 16px);
}
.dos-window.minimized { display: none; }
.dos-window::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2; }
.dos-window[data-pet="venus"]::before  { background: var(--venus); }
.dos-window[data-pet="toby"]::before   { background: var(--toby); }
.dos-window[data-pet="gladys"]::before { background: var(--gladys); }
.dos-window[data-pet="lucy"]::before   { background: var(--lucy); }

.dos-titlebar {
  position: relative; display: flex; align-items: center; gap: .7rem;
  padding: .55rem .7rem .55rem .9rem;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,242,233,.88));
  border-bottom: 1px solid var(--line, rgba(0,0,0,.1));
  flex: 0 0 auto; cursor: grab;
}
.dos-window.dragging .dos-titlebar { cursor: grabbing; }
.dos-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem; }
.dos-title-ico { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: var(--paper-warm, #f1e9dc); display: grid; place-items: center; }
.dos-title-ico svg { width: 118%; height: 118%; }
.dos-title-txt { font-family: var(--sans, system-ui); font-weight: 700; font-size: .9rem; color: var(--ink, #2a221a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dos-title-sub { font-family: var(--mono, monospace); font-size: .62rem; color: var(--ink-dim, #8a7d6a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .dos-title-sub { display: none; } }

/* Controles funcionales: minimizar · agrandar · cerrar */
.dos-wctrl { flex: 0 0 auto; display: inline-flex; gap: .3rem; }
.dos-wctrl .wc {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line, rgba(0,0,0,.1));
  background: var(--paper-warm, #f1e9dc); color: var(--ink-mid, #6a5d4a);
  cursor: pointer; font-size: .72rem; display: grid; place-items: center;
  transition: background .14s, color .14s, transform .14s;
}
.dos-wctrl .wc:hover { transform: translateY(-1px); }
.dos-wctrl .wc-min:hover   { background: #f4bf4f; color: #4a3a10; border-color: transparent; }
.dos-wctrl .wc-max:hover   { background: var(--gladys, #5B8A6A); color: #fff; border-color: transparent; }
.dos-wctrl .wc-close:hover { background: #ed6a5e; color: #fff; border-color: transparent; }

.dos-win-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 1rem clamp(.8rem, 2.6vw, 1.6rem) 1.6rem; -webkit-overflow-scrolling: touch; }
/* cuando el contenido es la página clásica embebida: sin padding, iframe a tope */
.dos-win-body.dos-win-frame { padding: 0; overflow: hidden; }
.dos-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

/* Grip de redimensionado (esquina inferior-derecha) */
.dos-resize {
  position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; z-index: 5;
  cursor: nwse-resize; opacity: .45; border-radius: 0 0 var(--dos-win-radius) 0;
  background:
    linear-gradient(135deg, transparent 46%, var(--ink-dim,#8a7d6a) 46% 56%, transparent 56% 66%,
                    var(--ink-dim,#8a7d6a) 66% 76%, transparent 76%);
}
.dos-resize:hover { opacity: .85; }
.dos-window.maximized .dos-resize { display: none; }
.dos-window.resizing { transition: none; user-select: none; }
/* Mientras se arrastra/redimensiona, el iframe NO debe capturar el mouse */
.dos-window.dragging .dos-frame, .dos-window.resizing .dos-frame { pointer-events: none; }
/* el contenido reusa .chat/.msg/.bubble; lo soltamos del layout de chat
   y lo forzamos a ocupar TODO el ancho de la ventana (responsive adentro) */
.dos-win-chat { display: block; width: 100%; }
.dos-win-chat .msg,
.dos-win-chat .msg.pet-stage { display: block; width: 100%; max-width: 100%; margin: 0; }
.dos-win-chat .msg.visitor, .dos-win-chat .msg.system { display: none; } /* no logs dentro de la app */
.dos-win-chat .avatar { display: none; }                                  /* la cara ya está en la titlebar */
.dos-win-chat .bubble { display: block; background: transparent; border: none; box-shadow: none; padding: 0; max-width: 100%; width: 100%; }
.dos-win-chat .bub-head { display: none; }
.dos-win-chat .bub-body,
.dos-win-chat .rsp,
.dos-win-chat .widget { width: 100%; max-width: 100%; }
.dos-win-chat .area-intro,
.dos-win-chat .cmd-back { display: none; }   /* el presentador/volver vive en la titlebar */
.dos-win-chat .pet-quip { display: none; }   /* sin coletillas dentro de la app */

/* ============================================================
   5) TASKBAR — apps minimizadas
   ============================================================ */
.dos-taskbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 1300;
  display: flex; gap: .4rem; padding: .35rem .4rem;
  background: rgba(251,247,238,.9); backdrop-filter: blur(8px);
  border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 14px;
  box-shadow: 0 10px 28px -12px rgba(20,14,8,.4);
  max-width: 92vw; overflow-x: auto;
}
.dos-taskbar:empty { display: none; }
.dos-taskchip {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  padding: .3rem .6rem .3rem .35rem; border-radius: 10px;
  background: var(--paper-warm, #f1e9dc); border: 1px solid var(--line, rgba(0,0,0,.1));
  font-family: var(--sans, system-ui); font-size: .74rem; font-weight: 600; color: var(--ink, #2a221a);
  cursor: pointer; transition: background .14s, transform .14s;
}
.dos-taskchip:hover { transform: translateY(-2px); background: #fff; }
.dos-taskchip .tc-ico { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #fff; }
.dos-taskchip .tc-ico svg { width: 120%; height: 120%; }

/* ============================================================
   6) VIDA — perros que caminan por el escritorio y hablan
   ============================================================ */
.dos-pets { position: fixed; inset: 0; pointer-events: none; z-index: 1200; overflow: hidden; }
/* lienzo de partículas (polvo que levantan al correr/cavar/chocar) */
.dos-dust { position: fixed; inset: 0; pointer-events: none; z-index: 1199; }

/* La posición horizontal, el salto y el gait los maneja cmd.js por frame
   (transform + variables CSS). Acá sólo poses y micro-loops decorativos. */
.dos-pet {
  position: fixed; left: 0; bottom: 0; width: clamp(96px, 12vw, 150px);
  opacity: calc(1 - var(--far, 0) * 0.22);
  transform: translate3d(-340px, 0, 0); will-change: transform;
}
/* sombra de contacto en el piso: da profundidad y se achica al saltar */
.dos-pet::before {
  content: ''; position: absolute; left: 50%; bottom: 1px; z-index: -1;
  width: 54%; height: 8px; transform: translateX(-50%) scaleX(var(--shsc, 1));
  background: radial-gradient(ellipse at center, rgba(20,14,8,.36), transparent 72%);
  opacity: calc(.6 - var(--jumpn, 0) * .42);
}
/* pointer-events: none → los perros NUNCA bloquean la UI; el acariciar se
   maneja por proximidad en cmd.js (click a vacío cerca de un perro). */
.dos-pet .dos-pet-svg {
  width: 100%; filter: drop-shadow(0 5px 10px rgba(20,14,8,.3));
  transform: scaleX(var(--flip, 1)) scale(var(--scale, 1)) translateY(var(--bob, 0px)) scaleY(var(--sqy, 1)) scaleX(var(--sqx, 1));
  transform-origin: center bottom; will-change: transform;
}
.dos-pet .dos-pet-svg svg { width: 100%; height: auto; display: block; }

/* GAIT procedural: cmd.js escribe --legA (grados) según la DISTANCIA
   recorrida; las patas diagonales van en contrafase (calc * -1), así el
   paso coincide con el suelo y el perro NO patina. */
.dw-leg { animation: none; }
.dw-fn, .dw-bb { transform: rotate(var(--legA, 0deg)); }
.dw-bn, .dw-fb { transform: rotate(calc(var(--legA, 0deg) * -1)); }

/* cola: loop cuya velocidad fija cmd.js (--tail) */
.dw-tail { animation: pf-tail var(--tail, .55s) ease-in-out infinite; }
/* cabeza (look-at + cabeceo) y orejas (inercia) las maneja cmd.js por frame */
.dos-pet .dw-head { transform: rotate(var(--look, 0deg)); }
.dw-ear { transform: rotate(var(--ear, 0deg)); }
.dos-pet.panting .pf-tongue { animation: pa-pant .26s ease-in-out infinite; transform-origin: center top; }

/* OLFATEAR: hocico al suelo */
.dos-pet.sniffing .dw-head { transform: rotate(15deg) translateY(5px); transform-origin: left bottom; }

/* CAVAR: hocico abajo; las patas delanteras escarban fuerte (cmd.js sube --legA) */
.dos-pet.digging .dw-head { transform: rotate(20deg) translateY(6px); transform-origin: left bottom; }

/* SENTADO */
.dos-pet.sitting .dos-pet-svg {
  transform: scaleX(var(--flip,1)) scale(var(--scale,1)) translateY(7%) rotate(-3deg);
}

/* JUGAR: al chocar entre ellos, jalón de oreja */
.dos-pet.ear-pulled .dw-ear { animation: ear-wiggle .16s ease-in-out 6; transform-origin: top center; }
@keyframes ear-wiggle { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-26deg) scaleY(1.15); } }

/* LADRAR: cabeza al frente (el saltito lo da cmd.js) */
.dos-pet.barking .dw-head { animation: dw-barkhead .24s ease-in-out 6; transform-origin: left center; }
@keyframes dw-barkhead { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-9deg); } }

/* DORMIR: se echa (aplastado) y flota un Zzz */
.dos-pet.napping .dos-pet-svg {
  transform: scaleX(var(--flip,1)) scale(var(--scale,1)) translateY(20%) scaleY(.58) skewX(-6deg);
}
.dos-pet.napping .dw-tail { animation-duration: 2.4s; }
.dos-pet.napping::after {
  content: 'z Z z'; position: absolute; left: 62%; bottom: 40%;
  font-family: var(--sans, system-ui); font-weight: 700; font-size: .8rem; color: #fff;
  letter-spacing: .12em; text-shadow: 0 1px 4px rgba(20,14,8,.6);
  animation: dw-zzz 2.6s ease-in-out infinite;
}
@keyframes dw-zzz { 0% { opacity: 0; transform: translateY(0) scale(.7); } 30% { opacity: .95; } 100% { opacity: 0; transform: translateY(-26px) scale(1.1); } }

/* TOMAR AGUA: hocico al piso lengüeteando */
.dos-pet.drinking .dw-head { transform: rotate(26deg) translateY(8px); transform-origin: left bottom; }
/* CAZAR: leve agazape, atención al frente */
.dos-pet.hunting .dos-pet-svg {
  transform: scaleX(var(--flip,1)) scale(var(--scale,1)) translateY(3%) scaleY(.94) scaleX(1.03);
}

/* efectos flotantes (corazones / signos al acariciar o interactuar) */
.dos-fx { position: fixed; z-index: 1242; pointer-events: none; font-size: 1.05rem;
  transform: translate(-50%, 0); animation: dos-fx-up 1.15s ease-out forwards; }
@keyframes dos-fx-up {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(.4); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -46px) scale(1.15); }
}

/* HOYOS que cavan (persisten un rato) */
.dos-hole { position: fixed; z-index: 1188; pointer-events: none; transform: translateX(-50%);
  width: 46px; height: 15px; }
.dos-hole .hole-pit { width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 32%, #241710, #432c18 68%, rgba(67,44,24,0)); }
.dos-hole .hole-dirt { position: absolute; right: -9px; bottom: 3px; width: 22px; height: 10px;
  border-radius: 50%; background: radial-gradient(ellipse at 50% 38%, #855631, #5a3a1c); }

/* PELOTA (física) */
.dos-ball { position: fixed; z-index: 1192; pointer-events: none; width: 26px; height: 26px;
  border-radius: 50%; background: radial-gradient(circle at 32% 28%, #ffd680, #e8852f 66%, #b5641f);
  box-shadow: 0 4px 9px -3px rgba(20,14,8,.55), inset -3px -4px 6px rgba(120,60,15,.5);
  transform: translateX(-50%); }
.dos-ball::after { content: ''; position: absolute; inset: 11px 0 auto 5px; height: 2px; width: 16px;
  border-radius: 2px; background: rgba(120,60,15,.45); }

/* CONEJO (presa) */
.dos-critter { position: fixed; z-index: 1205; pointer-events: none; font-size: 32px; line-height: 1;
  transform: translateX(-50%); filter: drop-shadow(0 3px 6px rgba(20,14,8,.45)); }

/* ============================================================
   TRADUCTOR PERRO → HUMANO (los perros sólo ladran; acá la "traducción")
   ============================================================ */
.dog-translator {
  position: fixed; left: 50%; top: 62px; bottom: auto; transform: translate(-50%, -14px);
  z-index: 1241; pointer-events: none; max-width: min(86vw, 560px);
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .9rem; border-radius: 14px;
  background: rgba(18, 14, 10, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 165, 110, .3);
  box-shadow: 0 16px 40px -18px rgba(0,0,0,.7);
  opacity: 0; transition: opacity .3s ease, transform .35s cubic-bezier(.34,1.4,.5,1);
  font-family: var(--sans, system-ui);
}
.dog-translator.show { opacity: 1; transform: translate(-50%, 0); }
.dog-translator .dt-label {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .58rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
  color: #d4a56e; opacity: .85; white-space: nowrap;
}
.dog-translator .dt-label i { font-size: .7rem; }
.dog-translator .dt-line { font-size: .86rem; color: #f4ede2; line-height: 1.3; }
.dog-translator .dt-line b { color: #f0cca0; font-weight: 700; }
@media (max-width: 560px){
  .dog-translator { top: 56px; flex-direction: column; gap: .15rem; text-align: center; padding: .45rem .7rem; }
  .dog-translator .dt-line { font-size: .78rem; }
}

/* globo de texto flotante */
.dos-say {
  position: absolute; bottom: calc(100% + 4px); left: 50%;
  transform: translateX(-50%) scale(.6); opacity: 0; transform-origin: bottom center;
  min-width: 110px; max-width: 230px; width: max-content;
  background: var(--paper, #fff); color: var(--ink, #2a221a);
  border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 12px;
  padding: .45rem .65rem; font-family: var(--sans, system-ui); font-size: .74rem; line-height: 1.3; text-align: center;
  box-shadow: 0 10px 24px -12px rgba(20,14,8,.45);
  transition: opacity .3s ease .25s, transform .35s cubic-bezier(.34,1.5,.5,1) .25s;
}
.dos-pet.saying .dos-say { opacity: 1; transform: translateX(-50%) scale(1); }
.dos-pet.leave .dos-say { opacity: 0; transform: translateX(-50%) scale(.6); transition-delay: 0s; }
.dos-say::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--paper, #fff);
}

/* ── POSE: ORINAR ── Toby (macho) levanta la pata; las hembras se agachan ── */
.dos-pet.peeing.peemale .dw-bn { transform: rotate(-62deg) !important; transform-origin: top center; }
.dos-pet.peeing.peemale .dos-pet-svg { transform: scaleX(var(--flip,1)) scale(var(--scale,1)) rotate(-3deg); }
.dos-pet.peeing:not(.peemale) .dos-pet-svg { transform: scaleX(var(--flip,1)) scale(var(--scale,1)) translateY(16%) scaleY(.78); } /* cuclillas */
.dos-puddle { position: fixed; z-index: 1186; pointer-events: none; transform: translateX(-50%); width: 36px; height: 12px; }
.dos-puddle::before {
  content: ''; display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 38%, rgba(235,200,95,.8), rgba(210,168,55,.4) 70%, rgba(210,168,55,0));
  box-shadow: 0 1px 4px rgba(150,110,20,.3);
}

/* ── POSE: REVOLCARSE en el pasto ── */
.dos-pet.rolling .dos-pet-svg { animation: dw-roll .6s ease-in-out infinite; transform-origin: center bottom; }
@keyframes dw-roll {
  0%,100% { transform: scaleX(var(--flip,1)) scale(var(--scale,1)) translateY(8%) rotate(-16deg); }
  50%     { transform: scaleX(var(--flip,1)) scale(var(--scale,1)) translateY(10%) rotate(16deg); }
}

/* ── CACERÍA EN MANADA: poses, presa, huesos, captions ── */
.dos-pet.stalking .dos-pet-svg { transform: scaleX(var(--flip,1)) scale(var(--scale,1)) translateY(10%) scaleY(.82); } /* agazapado */
.dos-pet.feasting .dw-head { transform: rotate(24deg) translateY(7px); transform-origin: left bottom; }                 /* hocico al cadáver */
.dos-prey { position: fixed; z-index: 1206; pointer-events: none; transform: translateX(-50%); transition: opacity .6s ease; }
.prey-emoji { font-size: 62px; line-height: 1; display: block; filter: drop-shadow(0 5px 9px rgba(20,14,8,.5)); transition: filter .5s ease; }
.dos-prey.running .prey-emoji { animation: prey-gallop .28s ease-in-out infinite; }   /* corre, no se arrastra */
@keyframes prey-gallop { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.dos-prey.dead .prey-emoji { transform: rotate(96deg) !important; animation: none !important; filter: grayscale(.5) drop-shadow(0 2px 4px rgba(20,14,8,.4)); transition: transform .5s ease; }
.dos-bone { position: fixed; z-index: 1204; pointer-events: none; font-size: 26px; line-height: 1; transform: translateX(-50%); filter: drop-shadow(0 2px 4px rgba(20,14,8,.4)); }
.hunt-caption {
  position: fixed; left: 50%; top: clamp(64px, 16vh, 140px); transform: translate(-50%, -10px);
  z-index: 1310; pointer-events: none; max-width: min(90vw, 460px); text-align: center;
  padding: .6rem 1.1rem; border-radius: 14px; font-family: var(--sans, system-ui);
  font-weight: 600; font-size: .95rem; color: #f4ede2;
  background: rgba(18,14,10,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(212,165,110,.3); box-shadow: 0 16px 40px -18px rgba(0,0,0,.7);
  opacity: 0; transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.4,.5,1);
}
.hunt-caption.show { opacity: 1; transform: translate(-50%, 0); }
.pd-btn--hunt { background: linear-gradient(135deg, #6a4a2a, #3a2616); color: #f4e9d7; border-color: transparent; }
.pd-btn--hunt:hover { color: #fff; transform: translateX(2px) translateY(-1px); }
@media (prefers-reduced-motion: reduce){ .hunt-caption { transition: opacity .2s !important; } .prey-emoji { transition: none !important; } }

/* ============================================================
   PANEL DE JUEGO (escritorio) — colapsable, dispara animaciones directo
   ============================================================ */
.play-dock {
  position: fixed; right: 16px; bottom: 16px; z-index: 1305;
  font-family: var(--sans, system-ui); width: max-content;
}
body.cmd-body.term-open .play-dock { display: none; }   /* oculto cuando el asistente está abierto */

/* Una escena a la vez: dock bloqueado mientras un juego está activo */
.play-dock.pd-busy .pd-btn { opacity: .4; pointer-events: none; filter: grayscale(.5); cursor: not-allowed; }
.play-dock.pd-busy .play-dock-toggle { opacity: .75; }

.play-dock-toggle {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent, #C97A3A), var(--accent-dk, #8A4F2A));
  color: #fff; font-weight: 600; font-size: .85rem;
  box-shadow: 0 10px 26px -10px rgba(20,14,8,.55), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .15s, box-shadow .2s;
}
.play-dock-toggle::-webkit-details-marker { display: none; }
.play-dock-toggle:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(20,14,8,.6); }
.play-dock-toggle .fa-paw { animation: pz-paw 2.6s ease-in-out infinite; }
.pd-chev { font-size: .7rem; transition: transform .3s ease; opacity: .9; }
.play-dock[open] .pd-chev { transform: rotate(180deg); }
.play-dock-menu {
  position: absolute; right: 0; bottom: calc(100% + .55rem);
  display: grid; gap: .35rem; width: 220px; padding: .55rem;
  background: var(--paper, #fbf7ee); border: 1px solid var(--line, rgba(0,0,0,.14));
  border-radius: 16px; box-shadow: 0 24px 60px -22px rgba(20,14,8,.6);
  animation: pd-in .26s cubic-bezier(.34,1.4,.5,1);
}
@keyframes pd-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.pd-btn {
  display: flex; align-items: center; gap: .55rem; text-align: left;
  padding: .5rem .7rem; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--ink, #2a221a); font-family: inherit;
  font-size: .82rem; font-weight: 500; cursor: pointer;
  transition: background .14s, transform .12s, border-color .14s;
}
.pd-btn:hover { background: var(--accent-soft, rgba(184,110,60,.1)); border-color: rgba(184,110,60,.3); transform: translateX(2px); }
.pd-btn:active { transform: scale(.97); }
.pd-emoji { font-size: 1.1rem; width: 1.3rem; text-align: center; }
.pd-btn--party { background: linear-gradient(135deg, var(--accent,#C97A3A), var(--accent-dk,#8A4F2A)); color: #fff; font-weight: 600; }
.pd-btn--party:hover { color: #fff; transform: translateX(2px) translateY(-1px); }
.play-dock[open] .pd-btn { animation: pd-pop .4s cubic-bezier(.34,1.56,.64,1) both; }
.play-dock[open] .pd-btn:nth-child(1){animation-delay:.02s}
.play-dock[open] .pd-btn:nth-child(2){animation-delay:.05s}
.play-dock[open] .pd-btn:nth-child(3){animation-delay:.08s}
.play-dock[open] .pd-btn:nth-child(4){animation-delay:.11s}
.play-dock[open] .pd-btn:nth-child(5){animation-delay:.14s}
.play-dock[open] .pd-btn:nth-child(6){animation-delay:.17s}
.play-dock[open] .pd-btn:nth-child(7){animation-delay:.20s}
.play-dock[open] .pd-btn:nth-child(8){animation-delay:.23s}
.play-dock[open] .pd-btn:nth-child(9){animation-delay:.26s}
@keyframes pd-pop { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
@media (max-width: 560px){ .play-dock { right: 10px; bottom: 10px; } .play-dock-menu { width: 200px; } }
@media (prefers-reduced-motion: reduce){ .play-dock-toggle .fa-paw, .play-dock[open] .pd-btn, .play-dock-menu { animation: none !important; } }

/* ============================================================
   7) Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .boot-paw, .boot-pup, .boot-bar-fill, .os-online i,
  .pet-side-svg, .dw-leg, .dw-tail, .dw-head, .dos-pet, .dos-pet *,
  .dos-pet.circling, .dos-pet.barking, .dos-pet.playing, .dos-pet.napping::after { animation: none !important; }
  .dw-leg { transform: rotate(0deg) !important; }
  .boot-pup { opacity: 1; transform: none; }
  .dos-window, .dos-pet, .dos-say { transition: none !important; }
  .dog-translator { transition: opacity .2s !important; }
}

/* ============================================================
   8) ASISTENTE — chips de sugerencia + recorrido guiado
   ============================================================ */
.dock-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .15rem .1rem 0; }
.dock-chip {
  font-family: var(--sans, system-ui); font-size: .74rem; font-weight: 600;
  padding: .34rem .72rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line, rgba(0,0,0,.14)); background: var(--paper-warm, #f1e9dc);
  color: var(--ink-mid, #6a5d4a); display: inline-flex; align-items: center; gap: .35rem;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.dock-chip:hover { background: var(--accent, #c97a3a); color: #fff; border-color: transparent; transform: translateY(-1px); }
.dock-chip i { font-size: .7rem; }

.w-tour .tour-stops {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: .7rem; margin-top: 1.1rem;
}
.tour-stop {
  text-align: left; cursor: pointer; padding: .9rem 1rem; border-radius: 14px;
  border: 1px solid var(--line, rgba(0,0,0,.12)); background: var(--paper, #fbf7ee);
  display: flex; flex-direction: column; gap: .18rem;
  transition: transform .18s var(--ease-cinema, ease), box-shadow .18s, border-color .18s;
}
.tour-stop:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(20,14,8,.5); border-color: var(--accent, #c97a3a); }
.tour-stop .ts-dog { font-size: .58rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--accent, #c97a3a); }
.tour-stop .ts-t { font-family: var(--font-display, Fraunces, serif); font-size: 1.05rem; color: var(--ink, #2a221a); display: flex; align-items: center; gap: .45rem; }
.tour-stop .ts-t i { color: var(--accent, #c97a3a); font-size: .9rem; }
.tour-stop .ts-d { font-size: .78rem; color: var(--ink-mid, #6a5d4a); }