:root {
  --ink: #000;
  --paper: #f4ecd8;
  --accent: #e6194b;
  --accent2: #ffe119;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --glow-title: 0 0 8px var(--accent), 0 0 20px var(--accent), 3px 3px 0 #000;
  --glow-spin: 0 0 10px var(--accent2), 0 0 24px var(--accent2), 4px 4px 0 #000;
  --dock-w: 312px;            /* ancho del chat dock lateral (desktop) */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: transparent; /* el crema vive en html; el clima (#weather-bg, z-index:-1) se ve detrás del contenido */
  color: var(--ink);
  /* subtle scanline texture */
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,.025) 3px,
    rgba(0,0,0,.025) 4px
  );
  min-height: 100vh;
}

h1, .logo, .brand, .tab, button { font-family: 'Press Start 2P', monospace; }

/* ---- Entrada ---- */
#entry {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.card {
  background: #fff;
  border: 4px solid var(--ink);
  box-shadow: var(--shadow);
  padding: 2rem;
  max-width: 480px;
  width: 100%;
  text-align: center;
}

.logo {
  font-size: 2rem;
  line-height: 1.4;
  margin: 0 0 .5rem;
  text-shadow: var(--glow-title);
  animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { text-shadow: 0 0 8px var(--accent), 0 0 20px var(--accent), 3px 3px 0 #000; }
  50%       { text-shadow: 0 0 14px var(--accent), 0 0 36px var(--accent), 3px 3px 0 #000; }
}

.tag { margin: 0 0 1.5rem; font-size: .7rem; opacity: .75; letter-spacing: .03em; }

/* ---- Entry pickers ---- */
.picker-section { margin-bottom: 1rem; text-align: left; }
.picker-label { display: block; font-weight: 700; font-size: .75rem; margin-bottom: .4rem; font-family: 'Press Start 2P', monospace; }
.color-picker { display: grid; grid-template-columns: repeat(8, 1fr); gap: .35rem; }
.color-swatch {
  width: 100%; aspect-ratio: 1; min-width: 28px; min-height: 28px;
  border: 3px solid var(--ink); padding: 0; box-shadow: none;
  cursor: pointer; transition: transform .06s steps(1);
  background: #ccc;
}
.color-swatch:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }
.color-swatch.sel { outline: 4px solid #fff; outline-offset: -5px; box-shadow: 0 0 0 4px var(--ink); transform: translate(2px,2px); }
.avatar-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; }
.avatar-btn {
  width: 100%; aspect-ratio: 1; min-width: 36px; min-height: 36px;
  border: 3px solid var(--ink); background: #fff; font-size: 1.2rem;
  cursor: pointer; padding: 0; box-shadow: none;
  transition: transform .06s steps(1);
}
.avatar-btn:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }
.avatar-btn.sel { background: var(--ink); transform: translate(2px,2px); }

label { display: block; text-align: left; margin-bottom: .4rem; font-weight: 700; font-size: .8rem; }

input {
  width: 100%;
  padding: .8rem;
  font-size: 1rem;
  border: 4px solid var(--ink);
  margin-bottom: 1rem;
  background: #fff;
  font-family: 'Press Start 2P', monospace;
  outline: none;
}
input:focus {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Buttons ---- */
button {
  cursor: pointer;
  border: 4px solid var(--ink);
  background: var(--accent);
  color: #fff;
  padding: .8rem 1.2rem;
  font-size: .75rem;
  box-shadow: var(--shadow);
  transition: transform .06s steps(1), box-shadow .06s steps(1);
  position: relative;
  outline: none;
}
button:hover  { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--ink); }
button:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--ink); }
button:focus-visible {
  outline: 3px solid var(--accent2);
  outline-offset: 3px;
}

#enter-btn { width: 100%; margin-top: .4rem; font-size: .9rem; }

/* ---- App layout ---- */
/* El chat es un overlay flotante (position: fixed) que NO reflowea ni achica
   el contenido. El #app vuelve a ocupar el ancho completo como antes. */
#app:not([hidden]) {
  display: block;
  min-height: 100vh;
}

/* ---- Header ---- */
header {
  border-bottom: 4px solid var(--ink);
  padding: .75rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  font-size: .85rem;
  white-space: nowrap;
  text-shadow: 2px 2px 0 var(--accent);
}

.users { display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; min-width: 0; }
.my-chip-slot { display: inline-flex; flex-shrink: 0; }

.chip {
  border: 3px solid var(--ink);
  padding: .25rem .5rem;
  font-size: .65rem;
  background: var(--chip, #ccc);
  color: #000;
  text-shadow: 0 0 3px #fff, 0 0 6px #fff;
  box-shadow: var(--shadow-sm);
  font-family: 'Press Start 2P', monospace;
  white-space: nowrap;
  animation: chip-pop .15s steps(3) both;
}
@keyframes chip-pop {
  0%   { transform: scale(.7); opacity: 0; }
  100% { transform: scale(1);  opacity: 1; }
}

/* Tabs = segmented control: un solo bloque conectado, no 5 botones sueltos */
.tabs {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto; /* empuja la navegación (tabs + misión) hacia la derecha */
  border: 4px solid var(--ink);
  box-shadow: var(--shadow-sm);
  background: #fff;
  overflow: hidden;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #fff;
  color: #000;
  font-size: .55rem;
  padding: .5rem .65rem;
  border: none;
  border-right: 3px solid var(--ink);
  box-shadow: none;
  border-radius: 0;
}
.tab:last-child { border-right: none; }
.tab .tab-ico { font-size: .9rem; line-height: 1; }
/* anular el translate/hover de los botones base para que el bloque no "salte" */
.tab:hover { background: var(--accent2); transform: none; box-shadow: none; }
.tab:active { transform: none; box-shadow: none; }
.tab.active {
  background: var(--ink);
  color: #fff;
  transform: none;
  box-shadow: none;
}
.tab:focus-visible {
  outline: 3px solid var(--accent2);
  outline-offset: -3px;
}

/* ---- Main panels ---- */
main { padding: 1rem; }
.tab-panel { display: block; }

/* ---- Pixel Art ---- */
.pixel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

#pixel-canvas {
  border: 4px solid var(--ink);
  box-shadow: var(--shadow);
  image-rendering: pixelated;
  cursor: crosshair;
  /* responsive: never wider than 90vw, max 500px logical */
  width: min(90vw, 500px);
  height: auto;
  background: #fff;
  touch-action: none; /* prevent scroll while painting */
}

/* ---- Palette fix: full-width grid with tappable swatches ---- */
.palette {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: .4rem;
  width: min(90vw, 500px);   /* match canvas width so it lines up */
  max-width: 500px;
}

.swatch {
  /* force a square that is finger-friendly (min 36px) */
  min-width: 36px;
  min-height: 36px;
  width: 100%;
  aspect-ratio: 1;
  border: 3px solid var(--ink);
  padding: 0;
  box-shadow: none;
  background: #ccc; /* overridden inline */
  transition: transform .06s steps(1), box-shadow .06s steps(1);
}
.swatch:focus-visible {
  outline: 3px solid var(--accent2);
  outline-offset: 2px;
}
.swatch.sel {
  outline: 4px solid #fff;
  outline-offset: -6px;
  box-shadow: 0 0 0 4px var(--ink);
  transform: translate(2px, 2px);
}
/* El swatch NO se traslada al apretar (el translate global movía el botón fuera del cursor
   y el click cerca del borde no registraba). Feedback en el lugar, sin moverse. */
.swatch:active {
  transform: none;
  box-shadow: none;
  filter: brightness(.82);
}

.danger {
  background: var(--accent);
  color: #fff;
}

.pixel-tools {
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
}
#undo-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: .6rem;
  color: var(--ink);
  background: var(--accent2);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding: .6rem .8rem;
  cursor: pointer;
  border-radius: 2px;
}
#undo-btn:hover { transform: translate(-1px, -1px); }
#undo-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
#undo-btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: var(--shadow-sm); }

/* ---- Canvas stack + cursor overlay ---- */
.canvas-stack { position: relative; line-height: 0; }
#cursor-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.remote-cursor { position: absolute; transform: translate(-1px, -1px); display: flex; align-items: center; gap: 3px; will-change: transform, left, top; transition: left .08s linear, top .08s linear; }
.remote-cursor .dot { width: 10px; height: 10px; border: 2px solid #000; background: var(--rc, #000); flex: none; }
.remote-cursor .tag { font-family: 'Press Start 2P', monospace; font-size: .5rem; padding: 2px 4px; border: 2px solid #000; background: var(--rc, #000); white-space: nowrap; line-height: 1.2; }

/* ---- Ruleta ---- */
.ruleta-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 140px);
}

.wheel-area {
  position: relative;
  flex-shrink: 0;
}

.pointer {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  color: var(--accent);
  z-index: 2;
  text-shadow: 2px 2px 0 #000, 0 0 8px var(--accent);
}

#wheel {
  border: 4px solid var(--ink);
  border-radius: 50%;
  box-shadow: var(--shadow);
  background: #fff;
  display: block;
  /* responsive wheel */
  width: min(80vw, 320px);
  height: min(80vw, 320px);
}

.winner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 1rem;
  text-align: center;
  background: rgba(255, 255, 255, .9);
  border: 4px solid var(--ink);
  border-radius: 50%;
  padding: 1rem;
  animation: winner-pop .2s steps(3) both;
  cursor: pointer;
}
@keyframes winner-pop {
  0%   { transform: scale(.5); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1);   opacity: 1; }
}

.ruleta-controls {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  width: min(90vw, 360px);
}

textarea {
  border: 4px solid var(--ink);
  padding: .6rem;
  font-size: .9rem;
  font-family: system-ui, sans-serif;
  resize: vertical;
  background: #fff;
  width: 100%;
  outline: none;
}
textarea:focus {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
/* textarea de la ruleta: pixel font (chica + interlineado) para matchear la app */
#options-input,
#options-input::placeholder {
  font-family: 'Press Start 2P', monospace;
  font-size: .55rem;
  line-height: 1.8;
  letter-spacing: .3px;
}

.ruleta-buttons { display: flex; flex-direction: column; gap: .6rem; }

/* GIRAR button: arcade glow */
.spin {
  background: var(--ink);
  color: var(--accent2);
  font-size: 1rem;
  padding: 1rem;
  text-shadow: var(--glow-spin);
  box-shadow: 6px 6px 0 var(--accent), 0 0 16px rgba(255,225,25,.3);
  animation: spin-glow-pulse 2s ease-in-out infinite;
}
.spin:hover {
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0 var(--accent), 0 0 20px rgba(255,225,25,.5);
}
.spin:active {
  transform: translate(6px, 6px);
  box-shadow: 0 0 0 var(--accent);
}
@keyframes spin-glow-pulse {
  0%, 100% { box-shadow: 6px 6px 0 var(--accent), 0 0 10px rgba(255,225,25,.2); }
  50%       { box-shadow: 6px 6px 0 var(--accent), 0 0 22px rgba(255,225,25,.55); }
}

/* ---- Confetti canvas (posicionado fijo sobre todo) ---- */
#confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  width: 100%;
  height: 100%;
}

/* ════════════════════════════════════════
   COWORK — room map layout
   ════════════════════════════════════════ */

/* Outer wrapper: vertically centers the room in available space */
.cowork-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 1.5rem 1rem;
}

/*
  .room is the top-down floor plan.
  Three columns: left (TV) | center (decoration + table zone + decoration) | right (puff + end chair + windows)
*/
.room {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "left center right";
  align-items: center;
  gap: 0;
}

/* ════════════════════════════════════════════════════════════════
   COZY ROOM AMBIANCE — additive, decorative, NON-interactive.
   Scoped strictly to the main cowork tab so the check-in modal
   mini-map (.loc-mini-room) is never affected.
   ════════════════════════════════════════════════════════════════ */

/* Turn the main cowork room into an enclosed, framed room.
   Padding creates the "walls"; the ambiance layer fills behind content. */
#tab-cowork .room {
  position: relative;
  /* alto arriba/abajo para las paredes; padding derecho extra para la ventana montada en la pared */
  padding: 100px 104px 100px 40px;
  /* the wood-paneled wall frame */
  border: 5px solid #6b4a2b;
  box-shadow:
    0 0 0 3px #4a3018,
    10px 14px 0 rgba(0, 0, 0, 0.28),
    inset 0 0 0 2px rgba(255, 240, 210, 0.25);
  background: #cdb48a; /* fallback floor tone behind the layer */
  isolation: isolate;
}

/* Base de "diorama": zócalo con profundidad debajo de la sala + sombra de apoyo,
   para que se lea como una maqueta flotante intencional (Habbo) y no una habitación
   volando suelta sobre el cielo. Solo en la tab cowork. */
#tab-cowork .room::after {
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  top: 100%;
  height: 40px;
  box-sizing: border-box;
  /* franjas verticales sutiles = bloques del zócalo, más "maqueta" */
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.16) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #5a3c22 0%, #3a2410 55%, #241509 100%);
  border: 5px solid #241509;
  border-top: 5px solid #7a5634; /* bisel iluminado donde apoya la sala */
  border-radius: 0 0 5px 5px;
  /* doble sombra: contacto cercano + halo suave = peso, objeto colocado */
  box-shadow:
    0 10px 0 rgba(0, 0, 0, 0.22),
    0 30px 44px rgba(0, 0, 0, 0.5);
  z-index: 0;
}

/* All real, functional columns must float ABOVE the ambiance layer */
#tab-cowork .room > .room-left,
#tab-cowork .room > .table-zone,
#tab-cowork .room > .room-right {
  position: relative;
  z-index: 2;
}

/* Ambiance container fills the whole room, behind the furniture */
#tab-cowork .room-ambiance {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#tab-cowork .room-ambiance > * { pointer-events: none; }

/* ── FLOOR: warm parquet / checker tiles, low contrast ── */
#tab-cowork .amb-floor {
  position: absolute;
  inset: 0;
  background-color: #c9ac80;
  background-image:
    /* diagonal plank sheen */
    repeating-linear-gradient(
      90deg,
      rgba(120, 80, 40, 0.10) 0,
      rgba(120, 80, 40, 0.10) 2px,
      transparent 2px,
      transparent 52px
    ),
    /* plank rows */
    repeating-linear-gradient(
      0deg,
      rgba(90, 60, 30, 0.14) 0,
      rgba(90, 60, 30, 0.14) 2px,
      transparent 2px,
      transparent 30px
    ),
    /* warm wood grain wash */
    linear-gradient(115deg, #d2b585 0%, #c4a572 45%, #cdb082 100%);
}
/* soft vignette so the center reads brighter (sense of place) */
#tab-cowork .amb-floor::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 70% at 50% 48%,
    rgba(255, 245, 220, 0.30) 0%,
    rgba(120, 80, 40, 0.0) 55%,
    rgba(60, 38, 18, 0.22) 100%);
}

/* ── TOP WALL strip behind TV / posters ── */
#tab-cowork .amb-wall-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background:
    linear-gradient(180deg, #8a6440 0%, #7a5636 70%, #5e3f24 100%);
  border-bottom: 4px solid #4a3018;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2), inset 0 4px 0 rgba(255,225,190,0.25);
}

/* ── BASEBOARD at the bottom for room depth ── */
#tab-cowork .amb-baseboard {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 14px;
  background: linear-gradient(180deg, #4a3018 0%, #2f1d0e 100%);
  border-top: 3px solid #2a1809;
  z-index: 2; /* sits in front of the bottom wall strip */
}

/* ── BOTTOM WALL strip (mirrors the top wall) so the lower decorations
   read as mounted on a wall, not floating on the floor ── */
#tab-cowork .amb-wall-bot {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background:
    linear-gradient(0deg, #8a6440 0%, #7a5636 70%, #5e3f24 100%);
  border-top: 4px solid #4a3018;
  box-shadow: inset 0 3px 0 rgba(0,0,0,0.2), inset 0 -4px 0 rgba(255,225,190,0.25);
  z-index: 1; /* above floor, below baseboard accent */
}

/* ── RUG / ALFOMBRA: lives in the center .table-zone so it is always
   centered UNDER the table regardless of the asymmetric side columns ── */
#tab-cowork .table-zone { position: relative; }
#tab-cowork .amb-rug {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(96%, 560px);
  height: 80%;
  z-index: 0; /* behind seats + table (which are z-index:2 via .room rule) */
  pointer-events: none;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.05) 0 12px,
      transparent 12px 24px),
    linear-gradient(135deg, #b23a48 0%, #9c2f3c 100%);
  border: 5px solid #f2d98c;
  box-shadow:
    inset 0 0 0 4px #7e2530,
    inset 0 0 0 10px #f2d98c,
    0 8px 18px rgba(0,0,0,0.18);
  border-radius: 4px;
}
/* keep seats + table painted above the rug */
#tab-cowork .table-zone > .seats-row,
#tab-cowork .table-zone > .table-surface { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════════════
   WALL-MOUNTED DECORATIONS — Ropería + Corchos (top wall),
   Cuadros + Aire (bottom wall). Each gets a framed "hung on the wall"
   look (like the old posters) and sits over the wall strips.
   ════════════════════════════════════════════════════════════════ */
#tab-cowork .wall-decor {
  position: absolute;
  z-index: 4; /* above wall strips + baseboard */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
/* The wood frame around the CSS-art (mounted-on-wall feel) */
#tab-cowork .wall-frame {
  padding: 4px 5px;
  background: linear-gradient(160deg, #f4e4c4 0%, #e6cfa0 100%);
  border: 3px solid #3a2412;
  box-shadow:
    2px 3px 0 rgba(0,0,0,0.35),
    inset 0 0 0 2px rgba(255,255,255,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* sin texto: las decoraciones se reconocen por el dibujo */
#tab-cowork .wall-tag { display: none; }

/* Top wall items hang just under the top wall strip */
#tab-cowork .wall-decor-top  { top: 4px; }
#tab-cowork .wall-roperia    { left: 16%; }
#tab-cowork .wall-corchos    { right: 16%; }

/* Bottom wall items hang just above the bottom wall strip */
#tab-cowork .wall-decor-bot  { bottom: 6px; }
#tab-cowork .wall-cuadros    { left: 16%; }
#tab-cowork .wall-aire       { right: 16%; }

/* Interactive wall items (corchos + aire) must be clickable even though
   the ambiance layer is pointer-events:none. */
#tab-cowork .room-ambiance > .decor-corchos-interactive,
#tab-cowork .room-ambiance > .decor-aire-interactive {
  pointer-events: auto;
}

/* ── CORNER PLANTS ── */
#tab-cowork .amb-plant {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(2px 4px 2px rgba(0,0,0,0.25));
}
#tab-cowork .amb-plant-leaves { font-size: 1.7rem; line-height: 1; }
#tab-cowork .amb-plant-pot {
  width: 20px; height: 14px;
  margin-top: -4px;
  background: linear-gradient(180deg, #c8703a 0%, #9c4f22 100%);
  border: 2px solid #5e2e12;
  border-radius: 0 0 6px 6px;
}
/* La planta interactiva: maceta más ancha y el follaje más metido adentro,
   así se ve "plantado" y se disimula el desfasaje propio del glyph del emoji. */
#tab-cowork #cowork-plant .amb-plant-leaves { font-size: 1.55rem; }
#tab-cowork #cowork-plant .amb-plant-pot {
  width: 24px; height: 14px;
  margin-top: -5px;
}
#tab-cowork .amb-plant-tl { top: 46px; left: 6px; }
#tab-cowork .amb-plant-br { bottom: 46px; right: 8px; }

/* ── COFFEE CORNER ── */
#tab-cowork .amb-coffee {
  position: absolute;
  bottom: 46px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(2px 4px 2px rgba(0,0,0,0.25));
}
#tab-cowork .amb-coffee-machine { font-size: 1.4rem; line-height: 1; }
#tab-cowork .amb-coffee-counter {
  width: 40px; height: 12px;
  margin-top: -3px;
  background: linear-gradient(180deg, #d8c19a 0%, #a9875c 100%);
  border: 2px solid #5e3f24;
  border-radius: 2px;
}

/* ── DEPTH: soft ambient shadows under the furniture (top-down 3D feel) ── */
#tab-cowork .table-surface::after {
  content: '';
  position: absolute;
  inset: 6px -10px -14px;
  z-index: -1;
  background: rgba(0,0,0,0.20);
  filter: blur(9px);
  border-radius: 8px;
  pointer-events: none;
}
#tab-cowork .seat::after,
#tab-cowork .tv-block::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%;
  bottom: -7px;
  height: 8px;
  background: rgba(0,0,0,0.22);
  filter: blur(4px);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}
#tab-cowork .tv-block { position: relative; }

/* ── LEFT COLUMN: TV only ── */
.room-left {
  grid-area: left;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-right: 0.5rem;
  /* align TV with the table surface vertically */
  align-self: center;
}

/* TV block */
.tv-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 52px;
}
.tv-screen {
  font-size: 2.6rem;
  line-height: 1;
  filter: drop-shadow(0 0 4px #3af);
}
.tv-label {
  display: none;
}

/* ── CENTER: table zone with top/bottom decoration rows ── */
.table-zone {
  grid-area: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

/* Seat rows: top and bottom — with a small gap from the table */
.seats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
}
.seats-top { margin-bottom: 5px; } /* gap between top chairs and table */
.seats-bot { margin-top: 5px; }    /* gap between bottom chairs and table */

/* Top chairs face down (toward the table) */
.seat-top { transform-origin: center bottom; }
/* Bottom chairs face up (toward the table) */
.seat-bot { transform-origin: center top; }

/* The table surface */
.table-surface {
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  background: #fffef5;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 28px,
      rgba(160, 120, 60, 0.08) 28px,
      rgba(160, 120, 60, 0.08) 30px
    );
  min-width: 320px;
  width: min(60vw, 520px);
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.table-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.42rem;
  color: rgba(160, 120, 60, 0.35);
  letter-spacing: 0.25em;
  user-select: none;
  pointer-events: none;
}

/* ── RIGHT COLUMN: puff + end chair (stacked) + ventanas bar ── */
.room-right {
  grid-area: right;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.5rem;
  padding-left: 0.5rem;
}

/* Inner column for puff + end chair.
   Puff lives near the top-right of the table zone;
   end chair is vertically centered on the table surface.
   Use flex column with a spacer to push end chair to the vertical midpoint. */
.right-end-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;  /* fill the full height of room-right */
  justify-content: flex-start;
  gap: 0;
}

/* Spacer that pushes the end chair down to the table's vertical center.
   The table center sits roughly at: decor-row(~20px) + seats-top(~50px) + table/2(~50px) = ~120px.
   The puff takes ~46px + top margin. The spacer fills the gap so end chair lands at center. */
.right-end-col .end-spacer {
  flex: 1;
  min-height: 16px;
  max-height: 52px;
}

/* The end chair — faces the table (to the left) */
.seat-end {
  flex-shrink: 0;
}

/* ── SEATS (all) ── */
.seat {
  width: 46px;
  height: 46px;
  border: 3px solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  font-size: 1.25rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .06s steps(1), box-shadow .06s steps(1);
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}
.seat:hover  { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.seat:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.seat:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }

/*
  Occupied seat: accent ring around avatar, NOT a flood fill.
  The seat keeps its paper background; the color appears as a
  bold 3-px inset border ring only.
*/
.seat.occupied {
  background: var(--paper);
  border-color: var(--ink);
  outline: none;
  /* inner colored ring via box-shadow */
  box-shadow: inset 0 0 0 3px var(--seat-color, var(--accent)), var(--shadow-sm);
  /* switch to column layout to stack avatar + name */
  flex-direction: column;
  gap: 1px;
  font-size: 1rem;
  padding: 2px 0 1px;
}

/* The avatar emoji inside an occupied seat */
.seat.occupied .seat-ring {
  font-size: 1.4rem;
  line-height: 1;
  display: block;
  /* colored halo drop-shadow behind the emoji */
  filter: drop-shadow(0 0 3px var(--seat-color, var(--accent)));
}

/* Name label: tiny, legible, truncated */
.seat.occupied .seat-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.28rem;
  line-height: 1.1;
  color: var(--ink);
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  letter-spacing: 0;
  pointer-events: none;
}

/* "vos" badge on own seat: small colored chip in top-right */
.seat.occupied .seat-vos {
  position: absolute;
  top: -1px;
  right: -1px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.2rem;
  background: var(--seat-color, var(--accent2));
  color: #fff;
  padding: 1px 3px;
  border: 1.5px solid var(--ink);
  line-height: 1.2;
  pointer-events: none;
  z-index: 1;
}

/* Own seat: slightly brighter ring to set it apart */
.seat.mine {
  background: var(--paper);
  border-color: var(--ink);
  box-shadow: inset 0 0 0 3px var(--seat-color, var(--accent2)), var(--shadow-sm);
  outline: none;
}

/* ── PUFF: beanbag / pouf — plump rounded cushion shape ── */
.seat.puff {
  border-radius: 44% 56% 48% 52% / 50% 46% 54% 50%;
  width: 54px;
  height: 46px;
  background: radial-gradient(ellipse 70% 60% at 40% 35%, #e0b8e8 0%, #b880c8 60%, #9060a8 100%);
  border: 3px solid #6a3a8a;
  box-shadow: 3px 3px 0 #6a3a8a, inset 0 3px 0 rgba(255,255,255,0.45);
  overflow: hidden;
  padding: 0;
  /* hide any stray text when empty */
  font-size: 0;
  margin-top: 4px;
  flex-shrink: 0;
}
/* seam highlight pseudo — horizontal crease across the cushion */
.seat.puff::before {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  top: 46%;
  height: 2.5px;
  background: rgba(80,20,120,0.22);
  border-radius: 50%;
  pointer-events: none;
}

/* Puff occupied: keep shape, add color ring */
.seat.puff.occupied {
  background: radial-gradient(ellipse 70% 60% at 40% 35%, #e0b8e8 0%, #b880c8 60%, #9060a8 100%);
  border-color: #6a3a8a;
  box-shadow: inset 0 0 0 3px var(--seat-color, var(--accent)), 3px 3px 0 #6a3a8a, inset 0 3px 0 rgba(255,255,255,0.35);
  font-size: 1rem;
}
.seat.puff.mine {
  background: radial-gradient(ellipse 70% 60% at 40% 35%, #e0b8e8 0%, #b880c8 60%, #9060a8 100%);
  border-color: #6a3a8a;
  box-shadow: inset 0 0 0 3px var(--seat-color, var(--accent2)), 3px 3px 0 #6a3a8a, inset 0 3px 0 rgba(255,255,255,0.35);
  font-size: 1rem;
}

/* ── DECORATION ART: mini CSS illustrations (now framed on the wall) ── */
.decor-art {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  /* each art piece sets its own height */
}

/* ── ROPERÍA: wardrobe cabinet with two doors and hanging garments ── */
.decor-art-roperia {
  flex-direction: column;
  gap: 2px;
}
.roperia-cabinet {
  width: 40px;
  height: 28px;
  border: 2px solid #333;
  background: #d6cfc6;
  display: flex;
  box-shadow: 2px 2px 0 #333;
}
.roperia-door {
  flex: 1;
  border: 1px solid #555;
  position: relative;
  background: #e4ddd4;
}
.roperia-door-l { border-right: 1.5px solid #555; }
.roperia-door-r { border-left: 1.5px solid #555; }
.roperia-handle {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 7px;
  background: #888;
  border: 1px solid #444;
  border-radius: 1px;
}
.roperia-door-r .roperia-handle { right: auto; left: 3px; }
.roperia-hanger {
  width: 40px;
  height: 10px;
  border-bottom: 2px solid #555;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  position: relative;
}
.roperia-garment {
  width: 8px;
  height: 8px;
  border: 1.5px solid #555;
  border-top: none;
  border-radius: 0 0 4px 4px;
  position: relative;
}
.roperia-g1 { background: #e6194b; }
.roperia-g2 { background: #4363d8; }

/* ── CORCHOS: cork board with pins and note papers ── */
.decor-corchos {
  /* free-standing: background/border on the board itself, not the container */
}
.decor-art-corchos { }
.corchos-board {
  width: 56px;
  height: 32px;
  background: #d4a84b;
  border: 2px solid #8a5c1a;
  box-shadow: 2px 2px 0 #8a5c1a;
  position: relative;
  background-image: radial-gradient(circle, rgba(100,60,10,0.2) 1px, transparent 1px);
  background-size: 5px 5px;
  flex-shrink: 0;
}
.corchos-note {
  position: absolute;
  border: 1.5px solid rgba(0,0,0,0.3);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}
.corchos-note-1 {
  width: 16px; height: 12px;
  background: #fffde0;
  top: 4px; left: 5px;
  transform: rotate(-4deg);
}
.corchos-note-2 {
  width: 14px; height: 10px;
  background: #d4f0d0;
  top: 8px; right: 6px;
  transform: rotate(3deg);
}
.corchos-pin {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.5);
  z-index: 1;
}
.corchos-pin-1 { background: #e6194b; top: 3px; left: 12px; }
.corchos-pin-2 { background: #ffe119; top: 3px; right: 14px; }
.corchos-pin-3 { background: #4363d8; bottom: 5px; left: 28px; }

/* ── CUADROS: two small framed paintings ── */
.decor-cuadros {
  /* free-standing: frames have their own borders */
}
.decor-art-cuadros {
  gap: 4px;
}
.cuadro-frame {
  width: 22px;
  height: 18px;
  border: 2px solid #5a3e10;
  box-shadow: 1px 1px 0 #5a3e10;
  background: #a8d0f0;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.cuadro-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #a8d0f0 55%, #c8e8a0 55%);
}
.cuadro-sky-2 {
  background: linear-gradient(180deg, #f0c898 50%, #c8e0a0 50%);
}
.cuadro-mountain {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 10px solid #7a6050;
}
.cuadro-mountain-2 {
  border-bottom-color: #5a7040;
  border-left-width: 10px;
  border-right-width: 6px;
  left: 40%;
}
.cuadro-sun {
  position: absolute;
  top: 2px; right: 3px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #ffe119;
  box-shadow: 0 0 2px #f5a623;
}

/* ── AIRE: wall AC unit with louvres ── */
.decor-aire {
  /* free-standing: unit body has its own style */
}
.decor-art-aire { flex-direction: column; gap: 2px; }
.aire-unit { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.aire-body {
  width: 50px;
  height: 18px;
  background: #d0eaf8;
  border: 2px solid #2a8fc0;
  border-radius: 3px;
  box-shadow: 2px 2px 0 #2a8fc0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-evenly;
  padding: 2px 3px;
  gap: 2px;
}
.aire-louvre {
  height: 2px;
  background: #2a8fc0;
  border-radius: 1px;
  opacity: 0.7;
}
.aire-airflow {
  display: flex;
  flex-direction: row;
  gap: 2px;
  justify-content: center;
}
.aire-wave {
  font-family: monospace;
  font-size: 0.55rem;
  color: #3bb5e8;
  line-height: 1;
  opacity: 0.85;
}

/* ── VENTANAS (windows) — vertical bar at far right ── */
.ventanas-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 4px solid var(--ink);
  box-shadow: var(--shadow-sm);
  background: #c8e8f5;
  padding: 4px;
  min-width: 40px;
  align-self: stretch; /* stretch to match the full height of the right column */
}
/* Panes wrapper: fills all available height */
.ventanas-panes {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 3px;
}
/* Each window pane: flex:1 so all 4 fill the height evenly */
.ventana-pane {
  flex: 1;
  min-height: 20px;
  border: 2px solid var(--ink);
  background: linear-gradient(135deg, #e8f5ff 40%, #a8d8f0 100%);
  position: relative;
  overflow: hidden;
}
/* Mullion cross inside each pane */
.ventana-pane::before,
.ventana-pane::after {
  content: '';
  position: absolute;
  background: var(--ink);
}
.ventana-pane::before {
  left: 50%; top: 0; bottom: 0;
  width: 1.5px;
  transform: translateX(-50%);
}
.ventana-pane::after {
  top: 50%; left: 0; right: 0;
  height: 1.5px;
  transform: translateY(-50%);
}

/* ── WINDOW VIEW (cowork tab only): sky + sun + clouds beyond the glass ──
   Scoped to #tab-cowork so the look stays consistent with the cozy room.
   Sun + clouds are painted as gradient layers (no extra elements needed),
   so the mullion ::before/::after cross still draws on top. */
#tab-cowork .ventanas-bar {
  background: linear-gradient(180deg, #7fc3e8 0%, #aee0f0 100%);
}
#tab-cowork .ventana-pane {
  background:
    /* a fluffy cloud */
    radial-gradient(ellipse 38% 22% at 26% 64%, #ffffff 0%, #ffffff 60%, transparent 64%),
    radial-gradient(ellipse 26% 16% at 48% 60%, #ffffff 0%, #ffffff 60%, transparent 64%),
    /* sky gradient */
    linear-gradient(180deg, #6fc0ea 0%, #a8def2 70%, #d8f2ff 100%);
}
/* top pane gets a warm sun in the corner */
#tab-cowork .ventana-pane:first-child {
  background:
    radial-gradient(circle 14px at 74% 30%, #ffe680 0%, #ffd24d 55%, #ffd24d 62%, transparent 66%),
    radial-gradient(circle 22px at 74% 30%, rgba(255,225,90,0.35) 0%, transparent 70%),
    linear-gradient(180deg, #6fc0ea 0%, #a8def2 100%);
}

/* Interactive window: pedir abrir/cerrar (espeja el control del aire) */
#tab-cowork .ventanas-bar {
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
#tab-cowork .ventanas-bar:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  filter: brightness(1.04);
}
#tab-cowork .ventanas-bar:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
#tab-cowork .ventanas-bar:focus-visible { outline: 3px solid var(--accent2); outline-offset: 3px; }

/* Ventana montada en la pared derecha: absoluta, pegada al borde derecho, centrada vertical */
#tab-cowork .room > .ventanas-bar {
  position: absolute;
  right: 14px;
  top: 50%;
  margin-top: -105px;   /* mitad de la altura para centrar (sin transform, así no rompe el hover) */
  height: 210px;
  align-self: auto;
  z-index: 4;
}

.ventanas-label {
  display: none;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.28rem;
  color: var(--ink);
  text-align: center;
  margin-top: 3px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* ── Mobile / narrow screens: scale down the whole room ── */
@media (max-width: 900px) {
  .table-surface {
    min-width: 200px;
    width: min(55vw, 320px);
    height: 80px;
  }
  .seat { width: 36px; height: 36px; font-size: 1rem; }
  .seat.puff { width: 42px; height: 42px; }
  .corchos-board { width: 46px; height: 26px; }
  .aire-body { width: 42px; }
  .roperia-cabinet { width: 34px; }
  .roperia-hanger { width: 34px; }

  /* tighten the room frame and shrink ambient props on narrow screens */
  #tab-cowork .room { padding: 86px 92px 86px 26px; }
  #tab-cowork .amb-plant-leaves { font-size: 1.3rem; }
  #tab-cowork .amb-coffee-machine { font-size: 1.1rem; }
  /* pull the wall items closer to the edges to make room for seats */
  #tab-cowork .wall-roperia, #tab-cowork .wall-cuadros { left: 8%; }
  #tab-cowork .wall-corchos, #tab-cowork .wall-aire { right: 8%; }
  #tab-cowork .wall-frame { padding: 3px 4px; }
}

@media (max-width: 600px) {
  .cowork-wrap { padding: 0.5rem; align-items: flex-start; }
  .room { transform-origin: top left; transform: scale(0.72); }

  /* tighten the room frame; keep wall decorations visible but compact */
  #tab-cowork .room { padding: 80px 84px 80px 18px; }
  #tab-cowork .amb-coffee { display: none; }
  /* hide tiny label plates on the smallest screens to avoid clutter */
  #tab-cowork .wall-tag { display: none; }
}

/* ════════════════════════════════════════
   REACCIONES FLOTANTES
   ════════════════════════════════════════ */

/* Floating layer — covers viewport, non-interactive */
#reaction-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  overflow: hidden;
}

/* Each floating emoji */
.floating-reaction {
  position: absolute;
  bottom: 80px; /* start just above the bar */
  font-size: 2rem;
  line-height: 1;
  animation: reaction-float 2.5s ease-out forwards;
  will-change: transform, opacity;
  user-select: none;
  pointer-events: none;
}

@keyframes reaction-float {
  0% {
    transform: translateY(0) translateX(0) scale(0.6);
    opacity: 1;
  }
  15% {
    transform: translateY(-30px) translateX(calc(var(--drift, 0px) * 0.1)) scale(1.25);
    opacity: 1;
  }
  100% {
    transform: translateY(-280px) translateX(var(--drift, 0px)) scale(0.9);
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════
   TOAST NOTIFICATIONS — brutalist cards, top-center
   ═══════════════════════════════════════════════ */
#toast-layer {
  position: fixed;
  top: 0;
  /* centrado sobre todo el viewport: la app ya no se achica por el chat */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding-top: 0.9rem;
  width: max-content;
  max-width: 92vw;
}
.toast {
  pointer-events: none;
  background: #fffdf5;
  border: 4px solid var(--ink);
  box-shadow: var(--shadow);
  padding: 0.7rem 0.95rem;
  min-width: 200px;
  max-width: 88vw;
  border-radius: 2px;
  position: relative;
  animation: toast-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* franja roja decorativa a la izquierda */
.toast::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 7px;
  background: var(--accent);
  border-right: 2px solid var(--ink);
}
.toast-who {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.35rem;
  padding-left: 0.35rem;
}
.toast-text {
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--ink);
  padding-left: 0.35rem;
  word-break: break-word;
}
.toast.toast-out {
  animation: toast-out 0.45s ease-in forwards;
}
@keyframes toast-pop {
  0%   { transform: translateY(-26px) scale(0.82); opacity: 0; }
  70%  { transform: translateY(3px) scale(1.04); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes toast-out {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-22px) scale(0.92); opacity: 0; }
}

/* ═══════════════════════════════════════════════
   AIRE — control interactivo + popover
   ═══════════════════════════════════════════════ */
.decor-aire-interactive {
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
  border-radius: 4px;
}
.decor-aire-interactive:hover,
.decor-aire-interactive:focus-visible {
  transform: translateY(-3px);
  filter: drop-shadow(2px 4px 0 rgba(0, 0, 0, 0.35));
  outline: none;
}
.decor-aire-interactive:focus-visible { outline: 3px solid var(--accent2); outline-offset: 3px; }
.decor-aire-interactive:active { transform: translateY(-1px); }

.aire-popover[hidden] { display: none; }
.aire-popover {
  position: fixed;
  z-index: 10002;
}
.aire-popover-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: -1;
}
.aire-popover-card {
  background: #fffdf5;
  border: 4px solid var(--ink);
  box-shadow: var(--shadow);
  border-radius: 2px;
  padding: 0.7rem;
  width: 220px;
  animation: toast-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.aire-popover-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.62rem;
  text-align: center;
  color: var(--ink);
  background: var(--accent2);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding: 0.4rem 0.3rem;
  margin-bottom: 0.7rem;
  letter-spacing: 1px;
}
.aire-popover-btns {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.aire-opt {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.58rem;
  line-height: 1.5;
  letter-spacing: .02em;
  font-weight: 700;
  text-align: left;
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  border-radius: 2px;
  transition: transform 0.08s ease, background 0.08s ease;
}
.aire-opt:hover { background: var(--accent2); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.aire-opt:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.aire-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* En mobile: mini-sheet centrado */
.aire-popover-sheet {
  position: fixed !important;
  inset: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aire-popover-sheet .aire-popover-backdrop {
  background: rgba(0, 0, 0, 0.35);
}
.aire-popover-sheet .aire-popover-card {
  width: min(86vw, 280px);
}

/* ═══════════════════════════════════════════════
   CORCHOS — memorial interactivo + pay respects
   ═══════════════════════════════════════════════ */
.decor-corchos-interactive {
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
  border-radius: 4px;
}
.decor-corchos-interactive:hover,
.decor-corchos-interactive:focus-visible {
  transform: translateY(-3px);
  filter: drop-shadow(2px 4px 0 rgba(0, 0, 0, 0.35));
  outline: none;
}
.decor-corchos-interactive:focus-visible { outline: 3px solid var(--accent2); outline-offset: 3px; }
.decor-corchos-interactive:active { transform: translateY(-1px); }

.respects-popover-card {
  position: relative;
  width: 250px;
  text-align: center;
}
.respects-title {
  background: var(--ink);
  color: #fffdf5;
}
.respects-line {
  margin: 0 0 0.7rem;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.52rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--ink);
}
.respects-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.62rem;
  line-height: 1.5;
  width: 100%;
  background: var(--accent);
  color: #fffdf5;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding: 0.7rem 0.5rem;
  cursor: pointer;
  border-radius: 2px;
  letter-spacing: 0.5px;
  transition: transform 0.08s ease, background 0.08s ease, box-shadow 0.08s ease;
}
.respects-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.respects-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.respects-btn:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }
.respects-btn-done {
  background: var(--accent2);
  color: var(--ink);
  cursor: default;
}
.respects-btn-done:hover { transform: none; box-shadow: var(--shadow-sm); }
.respects-btn:disabled { cursor: default; }
.respects-counter {
  margin-top: 0.7rem;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  line-height: 1.7;
  color: var(--ink);
  background: #fff;
  border: 2px dashed var(--ink);
  border-radius: 2px;
  padding: 0.5rem 0.4rem;
}
.respects-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0;
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  line-height: 1;
  z-index: 1;
}
.respects-close:active { transform: translate(2px, 2px); box-shadow: none; }
.respects-close:hover { background: var(--accent2); }
.respects-close:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }

/* 🫡 que flota al recordar a los caídos */
.respect-float {
  position: fixed;
  z-index: 10003;
  font-size: 1.8rem;
  pointer-events: none;
  transform: translate(-50%, 0);
  animation: respect-rise 1.4s ease-out forwards;
}
@keyframes respect-rise {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  15%  { opacity: 1; transform: translate(-50%, -10px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(1); }
}

/* ---- Status popover (presencia) ---- */
/* Marca tu propio chip: clickeable, con borde de acento y micro-hover */
.chip-me {
  cursor: pointer;
  transition: transform 0.08s ease;
}
/* el ▾ caret indica que es tu chip; sutil realce al pasar el mouse */
.chip-me:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.chip-caret {
  display: inline-block;
  margin-left: 5px;
  padding: 0 3px;
  background: var(--accent2);
  color: #000 !important;
  border: 2px solid var(--ink);
  font-size: 0.85em;
  line-height: 1;
  text-shadow: none !important;
  vertical-align: middle;
}
.chip-me:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }

.status-popover[hidden] { display: none; }
.status-popover {
  position: fixed;
  z-index: 10003;
}
.status-popover-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: -1;
}
.status-popover-card {
  background: #fffdf5;
  border: 4px solid var(--ink);
  box-shadow: var(--shadow);
  border-radius: 2px;
  padding: 0.7rem;
  width: 220px;
  animation: toast-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.status-popover-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.58rem;
  text-align: center;
  color: var(--ink);
  background: var(--accent2);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding: 0.4rem 0.3rem;
  margin-bottom: 0.7rem;
  letter-spacing: 1px;
}
.status-popover-btns {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.status-opt {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.58rem;
  line-height: 1.5;
  letter-spacing: .02em;
  font-weight: 700;
  text-align: left;
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  border-radius: 2px;
  transition: transform 0.08s ease, background 0.08s ease;
}
.status-opt:hover { background: var(--accent2); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.status-opt:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.status-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Estado actual resaltado */
.status-opt-current {
  background: var(--accent);
  color: #fff;
  text-shadow: 1px 1px 0 var(--ink);
}
.status-opt-current:hover { background: var(--accent); }
/* Separador + acción de identidad (cambiar) al final del popover de tu chip */
.status-popover-sep {
  height: 3px;
  margin: .15rem 0;
  background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 11px);
  opacity: .55;
}
.status-opt-cambiar {
  font-size: .52rem;
  background: var(--paper);
}
.status-opt-cambiar:hover { background: var(--accent2); }

/* En mobile cae a mini-sheet centrado (misma clase que aire) */
.status-popover.aire-popover-sheet {
  position: fixed !important;
  inset: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.status-popover.aire-popover-sheet .status-popover-backdrop {
  background: rgba(0, 0, 0, 0.35);
}
.status-popover.aire-popover-sheet .status-popover-card {
  width: min(86vw, 280px);
}

/* ════════════════════════════════════════
   PRESENCE PILL — stack de avatares + conteo
   ════════════════════════════════════════ */
.presence-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding: .2rem .5rem .2rem .35rem;
  border-radius: 2px;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.presence-pill:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.presence-pill:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.presence-pill:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }
.presence-pill[aria-expanded="true"] { background: var(--accent2); }

.presence-stack { display: inline-flex; align-items: center; }
.presence-bubble {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  line-height: 1;
  border: 2px solid var(--ink);
  border-radius: 2px;          /* cuadradito brutalist con esquinas mínimas */
  background: #ccc;
  box-shadow: 1px 1px 0 var(--ink);
  margin-left: -8px;           /* overlap cute */
}
.presence-bubble:first-child { margin-left: 0; }
.presence-bubble-more {
  font-family: 'Press Start 2P', monospace;
  font-size: .5rem;
  background: var(--accent);
  color: #fff;
  text-shadow: 1px 1px 0 var(--ink);
}
.presence-count {
  font-family: 'Press Start 2P', monospace;
  font-size: .6rem;
  white-space: nowrap;
  color: var(--ink);
}

/* ════════════════════════════════════════
   PRESENCE PANEL — dropdown de conectados
   ════════════════════════════════════════ */
.presence-panel[hidden] { display: none; }
.presence-panel { position: fixed; z-index: 10003; }
.presence-panel-backdrop { position: fixed; inset: 0; background: transparent; z-index: -1; }
.presence-panel-card {
  background: #fffdf5;
  border: 4px solid var(--ink);
  box-shadow: var(--shadow);
  border-radius: 2px;
  padding: .7rem;
  width: 304px;
  max-height: min(60vh, 420px);
  display: flex;
  flex-direction: column;
  animation: toast-pop .22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.presence-panel-title {
  font-family: 'Press Start 2P', monospace;
  font-size: .55rem;
  text-align: center;
  color: var(--ink);
  background: var(--accent2);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding: .45rem .3rem;
  margin-bottom: .6rem;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.presence-panel-num {
  background: var(--ink);
  color: var(--accent2);
  padding: .1rem .35rem;
  border-radius: 2px;
}
.presence-panel-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  overflow-y: auto;
}
.presence-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: #fff;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding: .35rem .45rem;
  border-radius: 2px;
}
.presence-row-me { background: var(--accent2); }
.presence-row-avatar { margin-left: 0; flex-shrink: 0; }
.presence-row-name {
  font-family: 'Press Start 2P', monospace;
  font-size: .55rem;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.presence-row-status { font-size: .9rem; line-height: 1; flex-shrink: 0; }
.presence-row-loc {
  font-size: .85rem;
  line-height: 1;
  flex-shrink: 0;
  border: 2px solid var(--ink);
  background: #fff;
  padding: .05rem .2rem;
  border-radius: 2px;
}
/* Orden consistente de la fila: avatar, puntito de estado (pegado al avatar, no
   flotando), nombre, ubicacion, y el boton/timer siempre pineado a la derecha. */
.presence-row-avatar { order: 0; }
.presence-row-status { order: 1; }
.presence-row-name   { order: 2; }
.presence-row-loc    { order: 3; }
.presence-row-zumbar { order: 4; }

/* Mobile: el panel cae a sheet centrado */
.presence-panel.presence-panel-sheet {
  position: fixed !important;
  inset: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.presence-panel.presence-panel-sheet .presence-panel-backdrop { background: rgba(0,0,0,.35); }
.presence-panel.presence-panel-sheet .presence-panel-card {
  width: min(86vw, 320px);
  max-height: 70vh;
}

/* Reaction bar — brutalist chips, bottom-center */
#reaction-bar {
  position: fixed;
  bottom: 5.2rem;         /* arriba del FAB 🎉 (abajo-izquierda) */
  left: 1.1rem;
  z-index: 9997;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: min(92vw, 460px);
  gap: 0.35rem;
  padding: 0.45rem 0.65rem;
  background: var(--paper);
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  /* Colapsado por defecto (desktop Y mobile): se abre con el FAB y se cierra al elegir */
  transform: scale(0);
  transform-origin: bottom left;
  opacity: 0;
  pointer-events: none;
  transition: transform .12s steps(3, end), opacity .12s steps(3, end);
}
#reaction-bar.reactions-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Hide bar when it has no buttons yet */
#reaction-bar:empty {
  display: none;
}

/* FAB de reacciones: siempre visible (desktop y mobile). La barra se despliega al tocarlo. */
.reaction-toggle {
  display: inline-flex;
  position: fixed;
  bottom: 1.1rem;
  left: 1.1rem;
  z-index: 9998;
  width: 3.4rem;
  height: 3.4rem;
  font-size: 1.5rem;
  background: var(--accent2);
  border: 4px solid var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.reaction-btn {
  border: 3px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font-size: 1.25rem;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  transition: transform .06s steps(1), box-shadow .06s steps(1), background .06s steps(1);
  line-height: 1;
  /* override global button styles */
  font-family: inherit;
}
.reaction-btn:hover {
  background: var(--accent2);
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--ink);
}
.reaction-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
  background: var(--accent);
  color: #fff;
}
.reaction-btn:focus-visible {
  outline: 3px solid var(--accent2);
  outline-offset: 2px;
}

/* ════════════════════════════════════════
   MISIÓN DEL DÍA — chip en el header + popover brutalist
   ════════════════════════════════════════ */

.mission-chip-wrap {
  position: relative;
  flex-shrink: 0;
}

.mission-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: .6rem;
  background: var(--accent2);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .06s steps(1), box-shadow .06s steps(1);
}
.mission-chip-ico { font-size: 1.05rem; line-height: 1; }
.mission-chip[hidden] { display: none; }
.mission-chip:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.mission-chip:active,
.mission-chip[aria-expanded="true"] { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.mission-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Indicador "pendiente": punto rojo arriba a la derecha del chip */
.mission-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-family: 'Press Start 2P', monospace;
  font-size: .5rem;
  line-height: 1;
  box-shadow: 1px 1px 0 var(--ink);
  animation: chip-pop .15s steps(3) both;
}
.mission-badge[hidden] { display: none; }

/* Popover: tarjeta crema anclada bajo el chip */
.mission-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 10002; }
.mission-popover[hidden] { display: none; }

.mission-popover-card {
  background: #fffdf5;
  border: 4px solid var(--ink);
  box-shadow: var(--shadow);
  border-radius: 2px;
  padding: .7rem;
  width: 260px;
  animation: toast-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.mission-popover-title {
  font-family: 'Press Start 2P', monospace;
  font-size: .6rem;
  text-align: center;
  color: var(--ink);
  background: var(--accent2);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding: .4rem .3rem;
  margin-bottom: .7rem;
  letter-spacing: 1px;
}

.mission-popover-text {
  font-family: 'Press Start 2P', monospace;
  font-size: .55rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--ink);
  margin: 0 0 .7rem;
}

.mission-popover-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
}

.mission-count {
  font-family: 'Press Start 2P', monospace;
  font-size: .5rem;
  line-height: 1.5;
  color: var(--ink);
  opacity: .75;
}

.mission-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: .5rem;
  padding: .45rem .7rem;
  background: var(--accent2);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: transform .06s steps(1), box-shadow .06s steps(1), background .06s steps(1);
}

.mission-btn:hover {
  background: #fff;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}

.mission-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.mission-btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.mission-btn.mission-done,
.mission-btn:disabled {
  background: #e8e2d0;
  color: var(--ink);
  box-shadow: 1px 1px 0 var(--ink);
  cursor: default;
  transform: none;
  opacity: .8;
}

/* En mobile: el popover se centra como mini-sheet */
@media (max-width: 640px) {
  .mission-chip { font-size: .5rem; padding: .45rem .55rem; }
  /* tabs solo-ícono Y barra full-width abajo del header: no se cortan ni empujan raro */
  .tab .tab-txt { display: none; }
  .tab { padding: .55rem .55rem; gap: 0; flex: 1 1 0; justify-content: center; }
  .tabs { order: 9; flex: 1 1 100%; margin-left: 0; }
  .mission-popover,
  .foro-popover,
  .eventos-popover {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .35);
  }
  .mission-popover-card { width: min(86vw, 300px); }
  .eventos-popover .mission-popover-card { width: min(90vw, 320px); }
  .foro-chip { font-size: .5rem; padding: .45rem .55rem; }
}

/* ---- Mobile ---- */
@media (max-width: 480px) {
  .logo { font-size: 1.4rem; }
  .brand { font-size: .7rem; }
  .tab  { font-size: .55rem; padding: .45rem .6rem; }
  .chip { font-size: .55rem; }

  .palette {
    grid-template-columns: repeat(8, 1fr);
    width: min(90vw, 360px);
  }

  .ruleta-wrap { flex-direction: column; align-items: center; }
  .ruleta-controls { min-width: 0; width: min(90vw, 360px); }

  .winner { font-size: .75rem; }
}

/* ════════════════════════════════════════
   SALAS — meeting rooms with auto-expiry
   ════════════════════════════════════════ */

.salas-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem;
  min-height: calc(100vh - 120px);
}

.salas-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  width: 100%;
  max-width: 960px;
}

/* Group heading: tag brutalista angulado + chip de conteo + línea pixel.
   Cada parte tiene relleno opaco => legible sobre el clima (día y noche). */
.salas-group-heading {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  max-width: 900px;
  margin-bottom: 0.2rem;
}
.salas-tag {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--paper);
  background: var(--ink);
  border: 4px solid var(--ink);
  box-shadow: 4px 4px 0 var(--accent2);
  padding: 0.5rem 0.75rem;
  transform: rotate(-1.2deg);
  white-space: nowrap;
  flex-shrink: 0;
}
.salas-count {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.48rem;
  color: #1a8a3a;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  padding: 0.4rem 0.5rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.salas-count-full { color: #c0140c; } /* ninguna libre: rojo */
.salas-rule {
  /* stub corto (no full-width): el divisor no "sigue hacia la nada" cuando hay pocas cards */
  flex: 0 1 200px;
  min-width: 20px;
  height: 6px;
  /* perforación pixel ink/paper: visible sobre cualquier fondo */
  background: repeating-linear-gradient(90deg, var(--ink) 0 7px, var(--paper) 7px 13px);
}

/* Cards row inside each group */
.salas-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 900px;
}

/* Base card */
.sala-card {
  border: 4px solid var(--ink);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.5rem;
  min-width: 200px;
  max-width: 260px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  text-align: center;
  background: #fff;
  transition: transform .06s steps(1), box-shadow .06s steps(1);
}

.sala-card.libre {
  background: #e8fff0;
  border-color: #1a8a3a;
  box-shadow: 6px 6px 0 #1a8a3a;
}

.sala-card.ocupada {
  background: #fff0f0;
  border-color: #c0140c;
  box-shadow: 6px 6px 0 #c0140c;
}

/* Micro-interacción: la card se levanta un toque al pasar el mouse */
.sala-card.libre:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 #1a8a3a; }
.sala-card.ocupada:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 #c0140c; }

.sala-nombre {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--ink);
}

/* LIBRE badge */
.libre-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.85rem;
  color: #1a8a3a;
  text-shadow: 1px 1px 0 rgba(0,128,0,.2);
  padding: 0.35rem 0.75rem;
  border: 3px solid #1a8a3a;
  background: #fff;
  box-shadow: 3px 3px 0 #1a8a3a;
}

/* OCUPADA badge */
.ocupada-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.75rem;
  color: #fff;
  background: #c0140c;
  padding: 0.35rem 0.75rem;
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

/* Occupant name line */
.sala-ocupant {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Big countdown */
.sala-countdown {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.6rem;
  color: #c0140c;
  text-shadow: 2px 2px 0 var(--ink);
  letter-spacing: 0.1em;
  animation: countdown-pulse 1s steps(1) infinite;
}

@keyframes countdown-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.75; }
}

/* Sala action buttons */
.sala-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.sala-btn {
  font-size: 0.55rem;
  padding: 0.55rem 0.75rem;
  box-shadow: var(--shadow-sm);
}

.ocupar-btn {
  background: #1a8a3a;
  color: #fff;
  border-color: var(--ink);
}

.liberar-btn {
  background: var(--accent);
  color: #fff;
  border-color: var(--ink);
}

/* Mobile */
@media (max-width: 600px) {
  .salas-container { gap: 1rem; }
  .sala-card { min-width: 160px; padding: 1rem; }
  .sala-countdown { font-size: 1.2rem; }
}

/* ════════════════════════════════════════
   LOCATION MODAL — ¿Dónde estás?
   Full-viewport blocking overlay. Cream card,
   thick black border, hard offset shadow, pixel
   title, an embedded compact seat picker.
   ════════════════════════════════════════ */

.loc-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;            /* above header (10), mission (9), reactions/cursors */
  display: grid;
  place-items: center;
  padding: 1rem;
  overflow-y: auto;
}

.loc-modal[hidden] { display: none !important; }

/* Translucent backdrop: dims + blurs the whole app, carries the scanline texture */
.loc-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 8, 0.62);
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.10) 3px,
    rgba(0, 0, 0, 0.10) 4px
  );
  backdrop-filter: blur(2px);
  animation: loc-backdrop-in 0.18s ease-out both;
}

@keyframes loc-backdrop-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* The cream card */
.loc-modal-card {
  position: relative;
  z-index: 1;
  background: #fffdf3;
  border: 5px solid var(--ink);
  box-shadow: 10px 10px 0 var(--accent), 0 0 0 5px var(--ink), 18px 18px 40px rgba(0,0,0,.35);
  padding: 1.6rem 1.5rem 1.4rem;
  width: 100%;
  max-width: 460px;
  text-align: center;
  margin: auto;
  animation: loc-card-pop 0.22s steps(4) both;
}

@keyframes loc-card-pop {
  0%   { transform: translateY(-28px) scale(.94); opacity: 0; }
  100% { transform: translateY(0) scale(1);       opacity: 1; }
}

/* little arcade tag pinned to the top edge */
.loc-modal-badge {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--accent2);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  padding: 0.4rem 0.65rem;
  white-space: nowrap;
}

.loc-modal-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.5rem;
  line-height: 1.35;
  margin: 0.5rem 0 0.6rem;
  color: var(--ink);
  text-shadow: 4px 4px 0 var(--accent2), 6px 6px 0 var(--accent);
}

.loc-modal-hint {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.52rem;
  line-height: 1.7;
  letter-spacing: .02em;
  margin: 0 0 1.1rem;
  color: #4a4036;
}

/* Map wrapper: scrollable on tiny screens so the picker never overflows the card */
.loc-modal-mapwrap {
  border: 4px solid var(--ink);
  background: var(--paper);
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,.03) 3px, rgba(0,0,0,.03) 4px
  );
  box-shadow: inset 0 0 0 2px #fffdf3, 5px 5px 0 var(--ink);
  padding: 0.9rem 0.7rem;
  overflow-x: auto;
  margin-bottom: 1.1rem;
}

/* Compact floor plan inside the modal: TV | seats+table | puff+end */
.loc-mini-room {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  min-width: 300px;
  margin: 0 auto;
  width: fit-content;
}

.loc-mini-tv {
  font-size: 1.6rem;
  line-height: 1;
  filter: drop-shadow(0 0 4px #3af);
}

.loc-mini-center {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.loc-mini-seats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
  gap: 4px;
}

.loc-mini-table {
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  background: #fffef5;
  background-image: repeating-linear-gradient(
    90deg, transparent, transparent 22px,
    rgba(160,120,60,0.08) 22px, rgba(160,120,60,0.08) 24px
  );
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loc-mini-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Seats inside the modal: slightly smaller than the main map */
.loc-mini-room .seat { width: 40px; height: 40px; font-size: 1.1rem; }
.loc-mini-room .seat.puff { width: 46px; height: 40px; }
.loc-mini-room .seat.occupied { font-size: 0.85rem; }
.loc-mini-room .seat.occupied .seat-ring { font-size: 1.15rem; }

/* Divider label between the seat picker and the location buttons */
.loc-modal-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.42rem;
  letter-spacing: 0.05em;
  color: #8a7d6c;
}
.loc-modal-divider::before,
.loc-modal-divider::after {
  content: '';
  flex: 1;
  height: 3px;
  background: var(--ink);
  opacity: 0.55;
}

.loc-modal-btns {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.loc-modal-btn {
  font-size: 0.7rem;
  padding: 0.85rem 1rem;
  border: 4px solid var(--ink);
  width: 100%;
}

.loc-modal-btn-casa {
  background: var(--accent2);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}
.loc-modal-btn-casa:hover {
  background: #fff06b;
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink);
}
.loc-modal-btn-casa:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 var(--ink);
}

.loc-modal-btn-arriba {
  background: var(--accent);
  color: #fff;
  box-shadow: 5px 5px 0 var(--ink);
}
.loc-modal-btn-arriba:hover {
  background: #ff2e62;
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink);
}
.loc-modal-btn-arriba:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 var(--ink);
}

@media (max-width: 480px) {
  .loc-modal-title { font-size: 1.15rem; }
  .loc-modal-card { padding: 1.3rem 1rem 1.1rem; }
  .loc-mini-room .seat { width: 34px; height: 34px; font-size: 0.95rem; }
  .loc-mini-room .seat.puff { width: 40px; height: 34px; }
}

/* ════════════════════════════════════════
   CAMBIAR button — tiny identity reset in header
   ════════════════════════════════════════ */

.cambiar-btn {
  font-size: 0.45rem;
  padding: 0.4rem 0.65rem;
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity .1s, transform .06s steps(1), box-shadow .06s steps(1);
}

.cambiar-btn:hover {
  opacity: 1;
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

.cambiar-btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════
   CHAT EFÍMERO + SYSTEM LOG (brutalist / arcade)
   ══════════════════════════════════════════════════════════ */

/* ── Chat dock: OVERLAY flotante sobre el margen derecho (no reflowea la app) ──
   Es una tarjeta brutalist fija que flota sobre la zona derecha (normalmente
   vacía) del cowork. Colapsable: al colapsar se esconde y deja el botón 💬. */
.chat-dock {
  position: fixed;
  top: 4.75rem;                /* arranca bajo el header sticky */
  right: 1rem;
  bottom: 1rem;
  width: var(--dock-w);
  max-width: calc(100vw - 2rem);
  z-index: 9990;               /* flota sobre el contenido y el header */
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 5px solid var(--ink);
  box-shadow: var(--shadow);   /* hard shadow brutalist */
  transition: transform .18s steps(4, end), opacity .18s steps(4, end);
}

/* Colapsado en desktop: el panel se va de la vista (sin reflow) */
.chat-dock.chat-dock-collapsed {
  transform: translateX(calc(100% + 1.5rem));
  opacity: 0;
  pointer-events: none;
}

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  padding: .65rem .8rem;
  background: var(--ink);
  color: #fff;
  border-bottom: 4px solid var(--ink);
  flex-shrink: 0;
}
.chat-head-titles {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}
.chat-head-title {
  font-family: 'Press Start 2P', monospace;
  font-size: .68rem;
  text-shadow: 2px 2px 0 var(--accent);
  letter-spacing: .02em;
}
.chat-ephemeral-note {
  font-size: .58rem;
  opacity: .8;
  letter-spacing: .02em;
}
/* Control de colapsar/minimizar: visible siempre (desktop y mobile) */
.chat-dock-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .7rem;
  padding: .4rem .6rem;
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* Botón flotante 💬 — reabre el chat colapsado (desktop) y el drawer (mobile).
   Por defecto oculto; se muestra cuando el dock está colapsado/cerrado. */
.chat-toggle {
  display: none;
  position: fixed;
  bottom: 1.1rem;
  right: 1.1rem;
  z-index: 9998;
  width: 3.4rem;
  height: 3.4rem;
  font-size: 1.5rem;
  background: var(--accent2);
  border: 4px solid var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  padding: 0;
}
/* En desktop, mostrar el 💬 sólo cuando el chat está colapsado */
.chat-dock.chat-dock-collapsed ~ .chat-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-toggle-dot {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border: 3px solid var(--ink);
  box-shadow: 1px 1px 0 var(--ink);
  animation: chat-dot-blink .9s steps(2, end) infinite;
}
@keyframes chat-dot-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

.chat-feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: .8rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  /* sutil textura de terminal sobre el fondo blanco */
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 5px,
    rgba(0,0,0,.018) 5px,
    rgba(0,0,0,.018) 6px
  );
  scrollbar-width: thin;
  scrollbar-color: var(--ink) #fff;
}

/* Mensaje de usuario: burbuja brutalist con borde grueso y hard shadow */
.chat-msg {
  border: 3px solid var(--ink);
  background: #fff;
  box-shadow: var(--shadow-sm);
  padding: .4rem .6rem;
  max-width: 85%;
  align-self: flex-start;
  word-break: break-word;
  animation: chat-pop .14s steps(3) both;
}
.chat-msg.chat-mine {
  align-self: flex-end;
  background: #fffdf2;
}
@keyframes chat-pop {
  from { transform: translate(-3px, -3px); }
  to   { transform: translate(0, 0); }
}

.chat-author {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: .58rem;
  margin-bottom: .3rem;
  padding: .12rem .3rem;
  border: 2px solid var(--ink);
  background: var(--chip, #ccc);
  color: #000;
}
.chat-body {
  font-size: .85rem;
  line-height: 1.35;
}

/* Mensaje de sistema: línea centrada, chica, tinte de acento, claramente distinta */
.chat-sys {
  align-self: center;
  max-width: 92%;
  text-align: center;
  font-size: .68rem;
  font-style: italic;
  letter-spacing: .02em;
  color: #5a3a00;
  background: var(--accent2);
  border: 2px dashed var(--ink);
  padding: .22rem .55rem;
  box-shadow: 1px 1px 0 var(--ink);
  animation: chat-pop .14s steps(3) both;
}

.chat-composer {
  display: flex;
  gap: .5rem;
  padding: .65rem;
  border-top: 4px solid var(--ink);
  background: var(--paper);
}
.chat-input {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
  padding: .6rem .7rem;
  font-family: system-ui, sans-serif;
  font-size: .95rem;
  border: 3px solid var(--ink);
  background: #fff;
}
.chat-input:focus {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.chat-send {
  flex-shrink: 0;
  font-size: .62rem;
  padding: .6rem .8rem;
  background: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* ── Mobile / tablet angosto: el dock se colapsa en un drawer deslizante ── */
@media (max-width: 820px) {
  /* drawer a pantalla casi completa por el borde derecho, cerrado por defecto */
  .chat-dock {
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 360px);
    max-width: 86vw;
    border: none;
    border-left: 5px solid var(--ink);
    box-shadow: -8px 0 0 rgba(0,0,0,.18);
    transform: translateX(100%);
    transition: transform .22s steps(4, end);
    opacity: 1;
    pointer-events: auto;
    z-index: 9999;
  }
  /* en mobile el estado abierto/cerrado lo maneja .chat-dock-open (drawer);
     anulamos el colapso de desktop para que no interfiera */
  .chat-dock.chat-dock-collapsed {
    transform: translateX(100%);
    opacity: 1;
    pointer-events: auto;
  }
  .chat-dock.chat-dock-open {
    transform: translateX(0);
  }
  /* el 💬 flotante siempre disponible en mobile (sin importar el colapso) */
  .chat-toggle,
  .chat-dock.chat-dock-collapsed ~ .chat-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .chat-head-title { font-size: .6rem; }
  .chat-ephemeral-note { font-size: .55rem; }
  .chat-body { font-size: .8rem; }
  .chat-send { font-size: .55rem; padding: .6rem .55rem; }
}

/* Mobile: tiles de reacción un poco más chicos (el colapso en FAB ya es el comportamiento base) */
@media (max-width: 640px) {
  #reaction-bar { max-width: min(80vw, 320px); }
  .reaction-btn { width: 2.3rem; height: 2.3rem; font-size: 1.15rem; }
}

/* ════════════════════════════════════════════════════════
   🍕 VOTACIÓN DE COMIDA — brutalist + arcade
   ════════════════════════════════════════════════════════ */
.comida-wrap {
  display: flex;
  justify-content: center;
  padding: 1rem .5rem 2rem;
}
.comida-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  width: min(94vw, 860px);
  align-items: start;
}
.comida-card {
  position: relative;
  background: #fffdf6;
  border: 4px solid var(--ink);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.2rem 1.2rem;
}
/* etiqueta esquinada estilo sticker */
.comida-badge {
  position: absolute;
  top: -14px;
  left: 16px;
  background: var(--accent);
  color: #fff;
  font-family: 'Press Start 2P', monospace;
  font-size: .55rem;
  letter-spacing: 1px;
  padding: .45rem .6rem;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  transform: rotate(-3deg);
}
.comida-badge-alt { background: var(--accent2); color: #000; }
.comida-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.15rem;
  line-height: 1.5;
  margin: .6rem 0 1.1rem;
  text-shadow: 3px 3px 0 var(--accent2);
}
.comida-title-sm { font-size: .95rem; text-shadow: 3px 3px 0 var(--accent); }

/* ══ Comida v2: Almuerzo + Bajón ══ */

/* Banner de fase: ocupa todo el ancho, anuncia almuerzo o bajón */
.lunch-phase-banner {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1rem;
  padding: .85rem 1.1rem;
  background: var(--ink);
  border: 4px solid var(--ink);
  box-shadow: var(--shadow);
}
.lunch-phase-now {
  font-family: 'Press Start 2P', monospace;
  font-size: .85rem;
  letter-spacing: 1px;
  color: var(--accent2);
  text-shadow: 2px 2px 0 #000;
}
.lunch-phase-banner.is-bajon .lunch-phase-now { color: var(--accent); }
.lunch-phase-hint {
  font-family: 'Press Start 2P', monospace;
  font-size: .5rem;
  line-height: 1.6;
  letter-spacing: .02em;
  font-weight: 700;
  color: #fffdf6;
  opacity: .85;
}

/* Cada sección hereda .comida-card; la inactiva se atenúa y bloquea */
.lunch-section { transition: opacity .15s ease; }
.lunch-section.is-locked { opacity: .55; }
.lunch-section.is-locked .lunch-add-row { display: none; }
.lunch-locked-note {
  display: none;
  font-family: 'Press Start 2P', monospace;
  font-size: .5rem;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: .04em;
  margin: 0 0 1rem;
  padding: .5rem .6rem;
  background: var(--paper);
  border: 3px dashed var(--ink);
}
.lunch-section.is-locked .lunch-locked-note { display: block; }

/* Fila de input + botón (crear pedido / sumar bajón) */
.lunch-add-row {
  display: flex;
  gap: .5rem;
  margin-bottom: 1rem;
}
.lunch-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .65rem .7rem;
  background: #fff;
  border: 3px solid var(--ink);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.08);
  font-family: 'Press Start 2P', monospace;
  font-size: .58rem;
  line-height: 1.5;
  letter-spacing: .02em;
}
.lunch-input::placeholder {
  font-family: 'Press Start 2P', monospace;
  font-size: .52rem;
  letter-spacing: .02em;
  opacity: .55;
}
.lunch-input:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }
.lunch-add-btn {
  flex: 0 0 auto;
  padding: .65rem .85rem;
  background: var(--accent);
  color: #fff;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-family: 'Press Start 2P', monospace;
  font-size: .6rem;
  letter-spacing: 1px;
  transition: transform .08s ease, box-shadow .08s ease;
}
.lunch-add-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.lunch-add-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.lunch-add-btn:focus-visible { outline: 3px solid var(--accent2); outline-offset: 3px; }

/* ── pedidos (runs) del almuerzo ── */
.lunch-runs { display: flex; flex-direction: column; gap: .9rem; }
.lunch-run-card {
  border: 3px solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  padding: .7rem .75rem;
}
.lunch-run-card.is-mine { background: #fffdf6; box-shadow: 4px 4px 0 var(--accent2), 4px 4px 0 0 var(--ink); }
.lunch-run-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .55rem;
  margin-bottom: .6rem;
  padding-bottom: .5rem;
  border-bottom: 2px dashed var(--ink);
}
.lunch-run-place {
  font-family: 'Press Start 2P', monospace;
  font-size: .72rem;
  letter-spacing: .5px;
  word-break: break-word;
}
.lunch-run-count {
  font-size: .68rem;
  font-weight: 800;
  padding: .1rem .4rem;
  background: var(--ink);
  color: var(--accent2);
}
.lunch-run-joiners { display: flex; flex-direction: column; gap: .4rem; }
.lunch-joiner {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
}
.lunch-joiner-text { opacity: .8; font-style: italic; }
.lunch-joiner-text::before { content: '— '; }
.lunch-run-actions { margin-top: .65rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.lunch-join-text {
  flex: 1 1 120px;
  min-width: 0;
  padding: .5rem .6rem;
  border: 3px solid var(--ink);
  font-family: 'Press Start 2P', monospace;
  font-size: .55rem;
  line-height: 1.5;
  letter-spacing: .02em;
}
.lunch-join-text::placeholder {
  font-family: 'Press Start 2P', monospace;
  font-size: .5rem;
  letter-spacing: .02em;
  opacity: .55;
}
.lunch-join-text:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }
.lunch-pill-btn {
  padding: .5rem .8rem;
  background: #fff;
  color: var(--ink); /* sin esto heredaba el blanco del botón global => texto invisible */
  border: 3px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: .72rem;
  transition: transform .08s ease, box-shadow .08s ease, background .12s ease;
}
.lunch-pill-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.lunch-pill-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.lunch-pill-btn:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }
.lunch-pill-join { background: var(--accent2); }
.lunch-pill-leave { background: #fff; }

/* ── bajón: lista compartida ── */
.bajon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.bajon-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .6rem;
  border: 3px solid var(--ink);
  background: var(--paper);
  box-shadow: 2px 2px 0 var(--ink);
}
.bajon-item.is-mine { background: #fffdf6; box-shadow: 2px 2px 0 var(--accent2); }
.bajon-item-text { flex: 1 1 auto; font-family: 'Press Start 2P', monospace; font-size: .55rem; line-height: 1.55; letter-spacing: .02em; word-break: break-word; }
.bajon-remove {
  flex: 0 0 auto;
  padding: .2rem .5rem;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--ink);
  cursor: pointer;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}
.bajon-remove:hover { background: #c2103c; }
.bajon-remove:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }

/* ── chip avatar (mismo lenguaje que los chips de usuarios) ── */
.comida-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: var(--chip, #999);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  padding: .15rem .45rem;
  border-radius: 2px;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
/* badge "vos" amarillo discreto (consistente con el resto de la app) */
.comida-vos-badge {
  margin-left: 2px;
  padding: 0 3px;
  background: var(--accent2);
  color: #000;
  border: 2px solid var(--ink);
  font-size: .6em;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
}
.comida-empty {
  font-family: 'Press Start 2P', monospace;
  font-size: .52rem;
  line-height: 1.6;
  letter-spacing: .02em;
  opacity: .55;
  display: block;
  padding: .3rem 0;
}

/* ── responsive: una columna en mobile ── */
@media (max-width: 720px) {
  .comida-board { grid-template-columns: 1fr; width: min(94vw, 460px); }
  .comida-title { font-size: 1rem; }
  .comida-title-sm { font-size: .85rem; }
  .lunch-add-row { flex-wrap: wrap; }
  .lunch-add-btn { flex-basis: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   CLIMA EN VIVO — fondo ambiental pixel-art / CRT detrás de toda la app.
   El cliente setea body[data-weather] y body[data-daytime]; el CSS hace todo.
   ═══════════════════════════════════════════════════════════════════ */

html { background: var(--paper); } /* fallback crema detrás del clima */

/* Paleta del cielo por momento del día (bandas duras, look 8-bit) */
body { --sky-1: #6fb7e0; --sky-2: #9bd4ee; --sky-3: #cfeefb; --sun: #ffd23f; --cloud: #ffffff; --rain: #aedcf5; }
body[data-daytime="atardecer"] { --sky-1:#ff7a4d; --sky-2:#ffa55c; --sky-3:#ffd27a; --sun:#fff0b0; --cloud:#ffe0c2; --rain:#ffd9b3; }
body[data-daytime="noche"]     { --sky-1:#070b1e; --sky-2:#111733; --sky-3:#1e2750; --sun:#e8eef7; --cloud:#39426a; --rain:#9fb6d6; }
body[data-weather="nublado"]   { --cloud:#c7d0d9; }
body[data-weather="tormenta"]  { --cloud:#79859b; --sky-1:#3a4254; --sky-2:#4a5468; --sky-3:#5b6679; }

#weather-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  image-rendering: pixelated;
  background: linear-gradient(to bottom,
    var(--sky-1) 0 34%, var(--sky-2) 34% 68%, var(--sky-3) 68% 100%);
}
#weather-bg > div { position: absolute; inset: 0; }

/* El header base ya es opaco (background var(--paper)) y sticky (z-index:10), así que
   tapa el clima (z-index:-1) sin tocar nada. NO sobreescribir position/z-index acá:
   romper el sticky o crear otra capa atrapa los popovers del header bajo el chip del clima. */

/* ── Capas: ocultas por defecto, se prenden según la condición ── */
.wx-stars, .wx-celestial, .wx-clouds, .wx-fog, .wx-rain, .wx-snow, .wx-lightning { display: none; }

/* Sol / Luna (disco pixel redondo: muchos lados para que no se vea "cortado" arriba/abajo) */
#weather-bg .wx-celestial {
  inset: 9vh 13vw auto auto; width: 60px; height: 60px;
  background: var(--sun);
  clip-path: polygon(40% 0,60% 0,75% 4%,88% 12%,96% 25%,100% 40%,100% 60%,96% 75%,88% 88%,75% 96%,60% 100%,40% 100%,25% 96%,12% 88%,4% 75%,0 60%,0 40%,4% 25%,12% 12%,25% 4%);
  box-shadow: 0 0 0 7px rgba(255,210,63,.18), 0 0 0 14px rgba(255,210,63,.08);
  animation: wx-pulse 3.2s steps(2) infinite;
}
@keyframes wx-pulse { 50% { box-shadow: 0 0 0 10px rgba(255,210,63,.22), 0 0 0 18px rgba(255,210,63,.1); } }
body[data-daytime="noche"] .wx-celestial {
  background: #eef2fb; box-shadow: 0 0 0 6px rgba(238,242,251,.12); animation: none;
}
body[data-daytime="noche"] .wx-celestial::after { /* media luna: tapa con color de cielo */
  content: ''; position: absolute; inset: 0; left: 34%;
  background: var(--sky-1);
  clip-path: polygon(40% 0,60% 0,75% 4%,88% 12%,96% 25%,100% 40%,100% 60%,96% 75%,88% 88%,75% 96%,60% 100%,40% 100%,25% 96%,12% 88%,4% 75%,0 60%,0 40%,4% 25%,12% 12%,25% 4%);
}
body[data-weather="despejado"] .wx-celestial,
body[data-daytime="noche"] .wx-celestial { display: block; }

/* Estrellas pixel que titilan (solo de noche) */
.wx-stars::before {
  content: ''; position: absolute; width: 2px; height: 2px; background: #fff;
  box-shadow:
    8vw 14vh #fff, 17vw 9vh #fff, 23vw 22vh #cfe0ff, 31vw 7vh #fff, 39vw 18vh #fff,
    46vw 11vh #fff, 54vw 24vh #cfe0ff, 61vw 6vh #fff, 68vw 16vh #fff, 76vw 10vh #fff,
    83vw 21vh #fff, 90vw 13vh #cfe0ff, 13vw 28vh #fff, 35vw 31vh #fff, 58vw 33vh #fff,
    79vw 29vh #fff, 27vw 4vh #fff, 50vw 3vh #cfe0ff, 72vw 26vh #fff, 95vw 19vh #fff;
  animation: wx-twinkle 2.4s steps(2) infinite;
}
@keyframes wx-twinkle { 50% { opacity: .35; } }
body[data-daytime="noche"] .wx-stars { display: block; }

/* Nubes pixel a la deriva (bordes duros) */
.wx-clouds::before, .wx-clouds::after {
  content: ''; position: absolute; height: 66px; width: 164px;
  /* posiciones en px para que ningún puff se salga de la caja (top/bottom completos) */
  background:
    radial-gradient(circle at 30px 42px, var(--cloud) 0 21px, transparent 22px),
    radial-gradient(circle at 76px 36px, var(--cloud) 0 27px, transparent 28px),
    radial-gradient(circle at 120px 44px, var(--cloud) 0 19px, transparent 20px);
  background-repeat: no-repeat;
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,.12));
  animation: wx-drift 46s linear infinite;
}
.wx-clouds::before { top: 14vh; transform: scale(1.1); }
.wx-clouds::after  { top: 30vh; left: -40vw; transform: scale(.8); animation-duration: 64s; opacity: .9; }
@keyframes wx-drift { from { left: -200px; } to { left: 110vw; } }
body[data-weather="despejado"] .wx-clouds,
body[data-weather="nublado"] .wx-clouds,
body[data-weather="lluvia"] .wx-clouds,
body[data-weather="tormenta"] .wx-clouds,
body[data-weather="nieve"] .wx-clouds { display: block; }

/* Lluvia: gotas pixel discretas cayendo (lentas, se ve una por una). Dos capas = parallax.
   Cada gota es una elipse en su celda, con espacio alrededor, así no se ven como líneas. */
/* La capa se agranda y se rota: las gotas quedan inclinadas y caen en diagonal.
   El id-prefijo gana especificidad al base #weather-bg > div { inset:0 }. */
#weather-bg .wx-rain {
  inset: -30%;
  transform: rotate(14deg);
  opacity: .9;
  background-image: radial-gradient(1.7px 6px at 50% 30%, var(--rain) 0 72%, transparent 80%);
  background-size: 22px 32px;
  animation: wx-rainfall 0.9s linear infinite;
}
.wx-rain::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(1.4px 5px at 50% 30%, var(--rain) 0 72%, transparent 80%);
  background-size: 33px 32px;
  background-position: 13px 0;
  opacity: .6;
  animation: wx-rainfall 1.4s linear infinite;
}
/* baja exactamente una celda (32px) => loop continuo y lento */
@keyframes wx-rainfall { to { background-position-y: 32px; } }
body[data-weather="lluvia"] .wx-rain,
body[data-weather="tormenta"] .wx-rain { display: block; }
/* Tormenta: gotas más rápidas y densas */
body[data-weather="tormenta"] .wx-rain { animation-duration: .7s; opacity: 1; }
body[data-weather="tormenta"] .wx-rain::after { animation-duration: 1.1s; }

/* Tormenta: flashes de relámpago */
.wx-lightning { background: #fff; opacity: 0; mix-blend-mode: screen; animation: wx-flash 6.5s steps(1) infinite; }
@keyframes wx-flash { 0%,100%{opacity:0} 1.5%{opacity:.75} 3%{opacity:0} 5%{opacity:.5} 6.5%{opacity:0} }
body[data-weather="tormenta"] .wx-lightning { display: block; }

/* Nieve: copos cuadrados cayendo lento con leve deriva */
.wx-snow, .wx-snow::after {
  background-image: radial-gradient(var(--cloud) 0 2px, transparent 3px);
  background-size: 26px 26px;
}
.wx-snow { opacity: .9; animation: wx-snowfall 7s linear infinite; }
.wx-snow::after { content: ''; position: absolute; inset: 0; background-size: 38px 38px; background-position: 12px 0; opacity: .6; animation: wx-snowfall 11s linear infinite; }
@keyframes wx-snowfall { to { background-position: 8px 26px; } }
body[data-weather="nieve"] .wx-snow { display: block; }

/* Niebla: banda translúcida que se desplaza */
.wx-fog {
  background: linear-gradient(180deg, transparent, rgba(225,230,235,.6) 45%, rgba(225,230,235,.6) 55%, transparent);
  animation: wx-fogmove 18s ease-in-out infinite;
}
@keyframes wx-fogmove { 0%,100%{transform:translateY(-6%)} 50%{transform:translateY(6%)} }
body[data-weather="niebla"] .wx-fog { display: block; }

/* Scanlines CRT por encima de todo el clima */
.wx-scanlines {
  display: block;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.05) 3px 4px);
  opacity: .7;
}

/* Pausa de animaciones (pestaña oculta) + accesibilidad */
body.wx-paused #weather-bg *,
body.wx-paused #weather-bg *::before,
body.wx-paused #weather-bg *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  #weather-bg *, #weather-bg *::before, #weather-bg *::after { animation: none !important; }
}

/* ── Mini-cartel del clima: flotante arriba-derecha, sobre el cielo ── */
.weather-chip {
  position: fixed;
  top: 4.75rem;
  right: 1rem;
  /* por debajo del header (z-index:10) para que los popovers del header (misión)
     queden por encima del chip; sigue por encima del clima (z-index:-1) y del contenido */
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .6rem;
  background: var(--paper);
  color: var(--ink); /* sin esto la temp heredaba el blanco del botón global => ilegible sobre el crema */
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  line-height: 1;
  transition: transform .12s ease, box-shadow .12s ease;
}
.weather-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.weather-chip:active { transform: translateY(0); box-shadow: 2px 2px 0 var(--ink); }
.weather-chip:focus-visible { outline: 3px solid var(--accent2); outline-offset: 3px; }
.weather-chip-icon { font-size: 1.1rem; }
.weather-chip-temp { font-family: 'Press Start 2P', monospace; font-size: .6rem; }

/* Popover de detalle (hereda aire-popover; ajustes propios) */
.weather-popover .weather-pop-cond {
  font-family: 'Press Start 2P', monospace;
  font-size: .65rem;
  text-align: center;
  margin: .2rem 0 .6rem;
  color: var(--accent);
}
.weather-pop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.weather-pop-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 2px dotted rgba(0,0,0,.25); padding-bottom: .3rem; }
.weather-pop-list .wx-pop-k { font-family: 'Press Start 2P', monospace; font-size: .5rem; }
.weather-pop-list .wx-pop-v { font-family: 'Press Start 2P', monospace; font-size: .58rem; }
.weather-pop-updated { margin-top: .8rem; font-family: 'Press Start 2P', monospace; font-size: .45rem; line-height: 1.6; text-align: center; opacity: .7; }

/* Mobile: chip del clima abajo-centro (barra inferior limpia: reacciones izq · clima centro · chat der).
   DEBE ir después de la regla base .weather-chip para ganarle al top/right de desktop. */
@media (max-width: 640px) {
  .weather-chip {
    top: auto; right: auto; bottom: 1rem;
    left: 50%; transform: translateX(-50%);
    padding: .35rem .55rem;
  }
  .weather-chip:hover { transform: translateX(-50%) translateY(-2px); }
  .weather-chip:active { transform: translateX(-50%); }
}

/* ── Easter eggs en la ventana del cowork (reaccionan al clima, solo aspecto) ── */
/* Lluvia / tormenta: vidrios opacos + gotas, sensación de "cerrada" */
body[data-weather="lluvia"] #tab-cowork .ventana-pane,
body[data-weather="tormenta"] #tab-cowork .ventana-pane {
  background:
    repeating-linear-gradient(18deg, transparent 0 7px, rgba(255,255,255,.45) 7px 8px, transparent 8px 12px),
    linear-gradient(180deg, #6b7f93 0%, #54647a 100%) !important;
  filter: brightness(.92);
}
/* Nublado: vidrios grises */
body[data-weather="nublado"] #tab-cowork .ventana-pane {
  background: linear-gradient(180deg, #b9c4ce 0%, #9aa7b3 100%) !important;
}
/* Despejado de día: vidrios brillantes (deja el sol del primer pane) */
body[data-weather="despejado"][data-daytime="dia"] #tab-cowork .ventana-pane {
  filter: brightness(1.06) saturate(1.08);
}
/* Noche: vidrios oscuros con reflejo de luna/estrellas */
body[data-daytime="noche"] #tab-cowork .ventana-pane {
  background:
    radial-gradient(circle 2px at 30% 35%, #fff 0 2px, transparent 3px),
    radial-gradient(circle 2px at 68% 60%, #cfe0ff 0 2px, transparent 3px),
    radial-gradient(circle 9px at 78% 26%, #eef2fb 0 9px, transparent 10px),
    linear-gradient(180deg, #0c1430 0%, #1a2547 100%) !important;
}
body[data-daytime="noche"] #tab-cowork .ventana-pane:first-child { background:
    radial-gradient(circle 12px at 72% 30%, #eef2fb 0 12px, transparent 13px),
    linear-gradient(180deg, #0c1430 0%, #1a2547 100%) !important;
}

/* ════════════════════════════════════════
   FORO DEL DÍA — chip + popover (espejo de Misión)
   ════════════════════════════════════════ */

.foro-chip-wrap {
  position: relative;
  flex-shrink: 0;
}

/* Chip: botón cuadrado con ícono + horario líder + badge pendiente */
.foro-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  font-family: 'Press Start 2P', monospace;
  font-size: .6rem;
  background: var(--accent2);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 .35rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .06s steps(1), box-shadow .06s steps(1);
}
.foro-chip-ico { font-size: 1.05rem; line-height: 1; }
.foro-chip-leader {
  font-family: 'Press Start 2P', monospace;
  font-size: .42rem;
  color: var(--ink);
  line-height: 1;
  max-width: 3.5rem;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}
.foro-chip[hidden] { display: none; }
.foro-chip:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.foro-chip:active,
.foro-chip[aria-expanded="true"] { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.foro-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Badge "!" rojo arriba-derecha: visible cuando no votaste */
.foro-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-family: 'Press Start 2P', monospace;
  font-size: .5rem;
  line-height: 1;
  box-shadow: 1px 1px 0 var(--ink);
  animation: chip-pop .15s steps(3) both;
}
.foro-badge[hidden] { display: none; }

/* Popover: hereda posicionamiento de .mission-popover (absolute bajo el chip) */
.foro-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 10002; }
.foro-popover[hidden] { display: none; }

/* Lista de slots: columna de botones votables */
.foro-slots {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: .6rem;
}

/* Cada slot: fondo blanco, ink text (override global button color:#fff), borde negro, hard shadow */
.foro-slot {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  min-height: 2.5rem;          /* altura fija: el avatar no agranda la fila ni mueve el layout */
  box-sizing: border-box;
  background: #fff;
  color: var(--ink);           /* CRÍTICO: override del button { color:#fff } global */
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding: .35rem .55rem;
  cursor: pointer;
  font-family: 'Press Start 2P', monospace;
  font-size: .5rem;
  text-align: left;
  transition: transform .06s steps(1), box-shadow .06s steps(1), background .06s steps(1);
}
.foro-slot:hover {
  background: var(--paper);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}
.foro-slot:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
.foro-slot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Tu voto resaltado: amarillo + borde rojo grueso */
.foro-slot-mine {
  background: var(--accent2);
  border-color: var(--accent);
  border-width: 3px;
  box-shadow: 3px 3px 0 var(--accent);
}
.foro-slot-mine:hover {
  background: var(--accent2);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--accent);
}

/* Horario del slot: pixel font prominente */
.foro-slot-time {
  font-family: 'Press Start 2P', monospace;
  font-size: .55rem;
  color: var(--ink);
  flex-shrink: 0;
  min-width: 2.8rem;
}

/* Conteo de votos: chip chico con borde */
.foro-slot-count {
  font-family: 'Press Start 2P', monospace;
  font-size: .45rem;
  background: var(--ink);
  color: #fff;
  border-radius: 2px;
  padding: .15rem .3rem;
  flex-shrink: 0;
  min-width: 1.2rem;
  text-align: center;
}

/* Pila de avatares: círculos solapados con el color del usuario */
.foro-slot-avatars {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.foro-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  box-sizing: border-box;
  padding-bottom: 3px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--chip, #ccc);
  font-size: .85rem;
  line-height: 1;
  text-align: center;
  overflow: hidden;
  margin-left: -.35rem;
  box-shadow: 1px 1px 0 var(--ink);
}
/* el glifo del emoji se centra solo dentro del círculo (sin descenso de línea) */
.foro-av { font-style: normal; }
.foro-av:first-child { margin-left: 0; }
/* "+N" cuando hay más votantes que avatares mostrados */
.foro-av-more {
  font-family: 'Press Start 2P', monospace;
  font-size: .4rem;
  padding-bottom: 0;
  color: #fff;
  background: var(--ink);
}

/* Línea de resultado: pixel font, centrada, chica */
.foro-result {
  font-family: 'Press Start 2P', monospace;
  font-size: .45rem;
  color: var(--ink);
  text-align: center;
  line-height: 1.6;
  padding-top: .3rem;
  border-top: 2px solid var(--ink);
  opacity: .85;
}

/* ════════════════════════════════════════
   CARTELERA DE EVENTOS — chip + popover (espejo de Misión/Foro)
   ════════════════════════════════════════ */
.eventos-chip-wrap { position: relative; flex-shrink: 0; }
.eventos-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  font-family: 'Press Start 2P', monospace;
  font-size: .6rem;
  background: var(--accent2);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 .35rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .06s steps(1), box-shadow .06s steps(1);
}
.eventos-chip-ico { font-size: 1.05rem; line-height: 1; }
.eventos-count { font-family: 'Press Start 2P', monospace; font-size: .42rem; color: var(--ink); line-height: 1; white-space: nowrap; }
.eventos-chip[hidden] { display: none; }
.eventos-chip:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.eventos-chip:active,
.eventos-chip[aria-expanded="true"] { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.eventos-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.eventos-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 10002; }
.eventos-popover[hidden] { display: none; }
.eventos-popover .mission-popover-card { width: 290px; }

.eventos-list {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: .65rem;
  padding-right: .15rem;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) var(--paper);
}
.eventos-list::-webkit-scrollbar { width: 6px; }
.eventos-list::-webkit-scrollbar-track { background: var(--paper); border: 1px solid var(--ink); }
.eventos-list::-webkit-scrollbar-thumb { background: var(--ink); }

.evento-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .4rem;
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  min-height: 2rem;
  font-family: 'Press Start 2P', monospace;
  font-size: .45rem;
  color: var(--ink);
}
.evento-main { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.evento-when-label { flex-shrink: 0; font-family: 'Press Start 2P', monospace; font-size: .4rem; color: var(--ink); opacity: .75; white-space: nowrap; }
.evento-del {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: .45rem;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--ink);
  box-shadow: 1px 1px 0 var(--ink);
  cursor: pointer;
  line-height: 1;
  transition: transform .06s steps(1), box-shadow .06s steps(1);
}
.evento-del:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--ink); }
.evento-del:active { transform: translate(1px, 1px); box-shadow: none; }
.evento-del:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }

.eventos-empty { text-align: center; font-family: 'Press Start 2P', monospace; font-size: .45rem; color: var(--ink); opacity: .6; padding: .6rem .4rem; }

.evento-form { display: flex; flex-direction: column; gap: .5rem; border-top: 2px dashed var(--ink); padding-top: .55rem; }
.evento-emojis { display: flex; flex-wrap: wrap; gap: .3rem; }
.evento-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1rem;
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  transition: transform .06s steps(1), box-shadow .06s steps(1), background .06s steps(1);
}
.evento-emoji:hover { background: var(--paper); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.evento-emoji:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.evento-emoji.sel { background: var(--accent2); border-color: var(--ink); border-width: 3px; box-shadow: 2px 2px 0 var(--ink); transform: translate(1px, 1px); }
.evento-emoji:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.evento-title {
  width: 100%;
  box-sizing: border-box;
  padding: .45rem .5rem;
  font-family: 'Press Start 2P', monospace;
  font-size: .5rem;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  outline: none;
  margin: 0;
  transition: box-shadow .06s steps(1);
}
.evento-title:focus { box-shadow: 4px 4px 0 var(--ink); }
.evento-title::placeholder { color: var(--ink); opacity: .45; }

.evento-when { display: flex; gap: .4rem; }
.evento-date,
.evento-time {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  padding: .4rem .45rem;
  font-family: 'Press Start 2P', monospace;
  font-size: .45rem;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  outline: none;
  margin: 0;
  transition: box-shadow .06s steps(1);
}
.evento-date:focus,
.evento-time:focus { box-shadow: 4px 4px 0 var(--ink); }

.evento-add-btn {
  width: 100%;
  padding: .5rem .7rem;
  font-family: 'Press Start 2P', monospace;
  font-size: .5rem;
  color: #fff;
  background: var(--accent);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .06s steps(1), box-shadow .06s steps(1), background .06s steps(1);
  letter-spacing: .03em;
}
.evento-add-btn:hover { background: #c0002f; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.evento-add-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.evento-add-btn:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }

/* Planta regable */
#tab-cowork .plant-interactive { cursor: pointer; pointer-events: auto; }
#tab-cowork .plant-interactive:hover { transform: scale(1.08); }
.plant-status {
  font-family: 'Press Start 2P', monospace;
  font-size: .55rem;
  line-height: 1.5;
  color: var(--ink);
  text-align: center;
  margin: 0 0 .6rem;
}
.plant-water-btn { color: var(--ink); width: 100%; text-align: center; white-space: nowrap; font-size: 0.5rem; }
.plant-water-btn:disabled { opacity: .6; cursor: default; }

/* ---- Riego: efecto pixel (rebote + gotas + aro + "+10") ---- */

/* la planta (hojas) rebota al regarse: squash & stretch desde la base */
#tab-cowork #plant-emoji.plant-bounce {
  transform-origin: bottom center;
  animation: plant-bounce .55s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes plant-bounce {
  0%   { transform: scale(1, 1); }
  28%  { transform: scale(1.28, 0.78); }  /* squash al impacto */
  55%  { transform: scale(0.88, 1.2); }   /* estira hacia arriba */
  100% { transform: scale(1, 1); }
}

/* gotas pixeladas (cuadraditos celestes, crisp) que caen y salpican */
.plant-drop {
  position: absolute;
  top: -16px;
  width: 4px;
  height: 7px;
  background: #5cc8f5;
  box-shadow: 0 -3px 0 #a7e4ff; /* brillo pixel arriba */
  pointer-events: none;
  animation: plant-drop .55s cubic-bezier(.4, .1, .7, 1) forwards;
}
@keyframes plant-drop {
  0%   { transform: translateY(-6px) scaleY(1); opacity: 0; }
  20%  { opacity: 1; }
  82%  { transform: translateY(20px) scaleY(1.1); opacity: 1; }
  100% { transform: translateY(22px) scale(2.2, 0.25); opacity: 0; } /* splash */
}

/* aro verde que pulsa detrás de la planta */
.plant-fx-ring {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 3px solid #5fbf4f;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  animation: plant-ring .6s ease-out forwards;
}
@keyframes plant-ring {
  0%   { transform: scale(0.4); opacity: .85; }
  100% { transform: scale(3.6); opacity: 0; }
}

/* "+10 💧" que sube y se desvanece */
.plant-plus {
  position: absolute;
  left: 50%;
  top: -4px;
  transform: translateX(-50%);
  font-family: 'Press Start 2P', monospace;
  font-size: .5rem;
  color: #2e8b3d;
  text-shadow: 1px 1px 0 #fff;
  white-space: nowrap;
  pointer-events: none;
  animation: plant-plus .9s ease-out forwards;
}
@keyframes plant-plus {
  0%   { transform: translate(-50%, 0); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translate(-50%, -28px); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   EL MURO — galería de fotos (Task 3)
   ═══════════════════════════════════════════════════════════════════ */
#tab-cowork .cuadros-interactive { cursor: pointer; pointer-events: auto; }
/* Agrandar un poco los cuadros + el target clickeable (id-specificity para ganarle al hover viejo) */
#tab-cowork #cuadros-control { transform: scale(1.3); }
#tab-cowork #cuadros-control:hover { transform: scale(1.4); }
#tab-cowork .cuadros-interactive.drag-over { animation: cuadros-pulse .6s ease-in-out infinite; }
#tab-cowork .cuadros-interactive.drag-over::after {
  content: '📷 soltá acá';
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Press Start 2P', monospace; font-size: .4rem; text-align: center;
  color: #fff; background: rgba(230,25,75,.78); border: 2px dashed #fff; z-index: 4;
}
@keyframes cuadros-pulse {
  0%, 100% { transform: scale(1.05); }
  50% { transform: scale(1.16); }
}
.cuadros-absorb { animation: cuadros-absorb .45s ease-out; }
@keyframes cuadros-absorb {
  0% { transform: scale(1.2); }
  50% { transform: scale(0.82); }
  100% { transform: scale(1); }
}
.cuadros-badge {
  position: absolute; top: -5px; right: -5px;
  /* contrarresta el scale(1.3) del control para quedar chico y crisp */
  transform: scale(.77); transform-origin: top right;
  min-width: 16px; height: 16px; padding: 0 3px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Press Start 2P', monospace; font-size: .46rem; line-height: 1;
  background: var(--accent); color: #fff;
  border: 2px solid var(--ink); border-radius: 999px; z-index: 3;
}
.cuadros-badge[hidden] { display: none; }

/* El Muro es un modal centrado de pantalla completa (no un popover anclado como aire/ventana).
   Hay que sobreescribir el posicionamiento de .aire-popover para que no quede off-screen. */
.muro-popover { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10008; }
.muro-popover[hidden] { display: none; }
.muro-popover .aire-popover-backdrop { position: absolute; inset: 0; z-index: 0; background: rgba(0, 0, 0, .5); }
/* Layout fijo: título arriba + grilla scrolleable + footer abajo (no scrollea todo junto) */
.muro-card { position: relative; z-index: 1; width: min(92vw, 460px); max-height: 86vh; padding: 0; overflow: hidden; display: flex; flex-direction: column; animation: none; }
/* Título: misma barra amarilla inset que los otros popovers (borde + sombra + margen crema). Fijo. */
.muro-card .muro-title { flex-shrink: 0; margin: .55rem .6rem .45rem; }
.muro-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: .1rem .6rem .4rem; }
/* Footer slim: misma altura aprox que el header (botón compacto, poco aire). */
.muro-footbar { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .4rem .6rem; border-top: 3px solid var(--ink); background: #fffdf5; }

/* Splash de carga inicial (tapa el flash del cielo vacío mientras carga la app). */
.app-loader { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; background: var(--paper, #fffdf5); }
.app-loader[hidden] { display: none; }
.app-loader-brand { font-family: 'Press Start 2P', monospace; font-size: 1.6rem; letter-spacing: 2px; color: var(--accent, #e6194b); text-shadow: 3px 3px 0 var(--ink, #1a1a1a); }

/* Loader pixel/arcade reusable: barra con sweep de color tipo knight-rider + label. */
.neo-loader { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: 2.4rem .5rem; }
.neo-loader-bar { display: flex; gap: 5px; padding: 6px; border: 3px solid var(--ink); background: #fffdf5; box-shadow: var(--shadow-sm, 3px 3px 0 #1a1a1a); }
.neo-loader-bar i { width: 13px; height: 24px; background: #e7e0cf; border: 2px solid var(--ink); animation: neo-blip 1s linear infinite; }
.neo-loader-bar i:nth-child(1) { animation-delay: 0s; }
.neo-loader-bar i:nth-child(2) { animation-delay: .12s; }
.neo-loader-bar i:nth-child(3) { animation-delay: .24s; }
.neo-loader-bar i:nth-child(4) { animation-delay: .36s; }
.neo-loader-bar i:nth-child(5) { animation-delay: .48s; }
@keyframes neo-blip {
  0%, 9% { background: #e7e0cf; }
  10%, 14% { background: var(--accent2, #ffe119); }
  15%, 22% { background: var(--accent, #e6194b); }
  23%, 100% { background: #e7e0cf; }
}
.neo-loader-label { font-family: 'Press Start 2P', monospace; font-size: .55rem; letter-spacing: 2px; color: var(--ink); animation: neo-loader-blink 1s steps(2, jump-none) infinite; }
@keyframes neo-loader-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Estado vacío */
.muro-empty { grid-column: 1 / -1; text-align: center; padding: 1.6rem .5rem; }
.muro-empty-ico { font-size: 2.1rem; display: block; margin-bottom: .6rem; }
.muro-empty-txt { font-family: 'Press Start 2P', monospace; font-size: .5rem; line-height: 1.8; color: var(--ink); opacity: .8; }

/* Tarjeta de foto (postal con marco) */
.muro-item { min-width: 0; background: #fffdf5; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); display: flex; flex-direction: column; transition: transform .08s steps(2); }
.muro-item:hover { transform: translate(-1px, -1px); }
.muro-item.top { border-color: var(--accent); box-shadow: 3px 3px 0 var(--accent); }

.muro-photo-wrap { position: relative; padding: 4px; }
.muro-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; cursor: zoom-in; display: block; border: 2px solid var(--ink); }

/* Medallita de la ganadora (sobre la foto, esquina) */
.muro-crown { position: absolute; top: 7px; left: 7px; width: 21px; height: 21px; display: flex; align-items: center; justify-content: center; font-size: .75rem; background: var(--accent2); border: 2px solid var(--ink); border-radius: 50%; box-shadow: 1px 1px 0 var(--ink); z-index: 2; }

/* Borrar: ✕ discreta en la esquina, aparece al pasar el mouse */
.muro-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-family: 'Press Start 2P', monospace; font-size: .5rem; color: #fff; background: rgba(26,26,26,.8); border: none; cursor: pointer; opacity: 0; transition: opacity .12s; z-index: 2; }
.muro-item:hover .muro-del, .muro-del:focus-visible { opacity: 1; }
.muro-del:hover { background: var(--accent); }

/* Pie: caption + chip de voto */
.muro-item-foot { display: flex; align-items: center; gap: .4rem; padding: .45rem .5rem; border-top: 2px solid var(--ink); }
.muro-caption { flex: 1; min-width: 0; font-family: 'Press Start 2P', monospace; font-size: .42rem; line-height: 1.45; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.muro-caption:empty::before { content: 'sin título'; opacity: .4; }

/* Chip de voto: corazón + número */
.muro-vote { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-family: 'Press Start 2P', monospace; font-size: .46rem; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 3px 8px; cursor: pointer; transition: transform .06s steps(2); }
.muro-vote:hover { transform: scale(1.07); }
.muro-vote:active { transform: scale(.93); }
.muro-heart { font-size: .6rem; line-height: 1; color: var(--ink); }
.muro-vote.mine { background: var(--accent); color: #fff; border-color: var(--ink); }
.muro-vote.mine .muro-heart { color: #fff; }


/* Botones de la footbar con jerarquia (camara principal, archivo secundario). */
/* Boton principal: grande, amarillo, brutalista. Lo usa la camara, y el de archivo
   cuando NO hay camara (sin .is-secondary). */
.muro-cam-btn, .muro-file-btn {
  font-family: 'Press Start 2P', monospace; font-size: .6rem;
  background: var(--accent2, #ffe119); color: var(--ink, #1a1a1a);
  border: 3px solid var(--ink, #1a1a1a); box-shadow: var(--shadow-sm, 3px 3px 0 #1a1a1a);
  padding: .5rem .85rem; cursor: pointer; border-radius: 2px; white-space: nowrap;
}
.muro-cam-btn:hover, .muro-file-btn:hover { transform: translate(-1px,-1px); }
.muro-cam-btn:active, .muro-file-btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink,#1a1a1a); }
/* Boton secundario: el "subir un archivo" cuando la camara es principal. */
.muro-file-btn.is-secondary {
  font-size: .55rem; background: none; border: none; box-shadow: none;
  color: var(--ink, #1a1a1a); text-decoration: underline; padding: .2rem .4rem;
}
.muro-file-btn.is-secondary:hover { transform: none; color: var(--accent, #e6194b); }

/* Festejo al quedar primera, en clave 8-bit/arcade (fixed, no se recorta con el scroll) */
/* Confeti pixelado: cuadraditos crisp de la paleta que estallan */
.muro-confeti { position: fixed; width: 9px; height: 9px; pointer-events: none; z-index: 10020; image-rendering: pixelated; will-change: transform, opacity; animation: muro-confeti 1s ease-out forwards; }
@keyframes muro-confeti {
  0%   { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -70px))) scale(.55) rotate(var(--rot, 200deg)); opacity: 0; }
}
/* Banner "#1" chunky pixel (no emoji formal) */
.muro-top-banner { position: fixed; z-index: 10021; pointer-events: none; font-family: 'Press Start 2P', monospace; font-size: 1rem; letter-spacing: 1px; color: var(--ink); background: var(--accent2); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: .5rem .7rem; white-space: nowrap; will-change: transform, opacity; animation: muro-banner 1.1s cubic-bezier(.2, 1.5, .4, 1) forwards; }
@keyframes muro-banner {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(-12deg); opacity: 0; }
  30%  { transform: translate(-50%, -50%) scale(1.15) rotate(5deg); opacity: 1; }
  62%  { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -125%) scale(1); opacity: 0; }
}
.muro-item.muro-win { animation: muro-win .7s ease-out; }
@keyframes muro-win {
  0%, 100% { box-shadow: 3px 3px 0 var(--accent); }
  25% { box-shadow: 0 0 0 4px var(--accent2), 4px 4px 0 var(--accent); }
  55% { box-shadow: 0 0 0 2px var(--accent2), 4px 4px 0 var(--accent); }
}

/* Iconito de ayuda en la barra de título + cartelito */
.muro-title { position: relative; }
/* Centrado con margin-top (NO transform) para que el hover de los botones brutalistas no
   le pise el translateY(-50%) y lo haga oscilar (hover-flicker). transition/transform off. */
.muro-help-btn { position: absolute; right: 7px; top: 50%; margin-top: -12.5px; transform: none; transition: none; width: 25px; height: 25px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-family: 'Press Start 2P', monospace; font-size: .62rem; color: var(--ink); background: #fffdf5; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 1px 1px 0 var(--ink); cursor: pointer; line-height: 1; }
.muro-help-btn:hover { background: #fff; transform: none; }
.muro-help-btn:active { transform: none; box-shadow: 1px 1px 0 var(--ink); }
.muro-help { position: absolute; top: calc(100% + 6px); right: 4px; width: min(82vw, 300px); text-align: left; background: #fffdf5; border: 3px solid var(--ink); box-shadow: var(--shadow); padding: .75rem .8rem; z-index: 6; }
.muro-help[hidden] { display: none; }
.muro-help-title { font-family: 'Press Start 2P', monospace; font-size: .5rem; color: var(--ink); margin-bottom: .55rem; }
.muro-help ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.muro-help li { font-family: 'Press Start 2P', monospace; font-size: .44rem; line-height: 1.6; color: var(--ink); }
.muro-help b { color: var(--accent); }

.muro-lightbox { position: fixed; inset: 0; z-index: 10010; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; padding: 4vw; }
.muro-lightbox[hidden] { display: none; }
.muro-lightbox img { max-width: 92vw; max-height: 88vh; border: 4px solid #fff; image-rendering: auto; }

.muro-upload { position: fixed; inset: 0; z-index: 10012; display: flex; align-items: center; justify-content: center; }
.muro-upload[hidden] { display: none; }
.muro-upload-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.muro-upload-card { position: relative; background: #fffdf5; border: 4px solid var(--ink); box-shadow: var(--shadow); padding: .8rem; width: min(86vw, 320px); display: flex; flex-direction: column; gap: .6rem; }
.muro-upload-preview { width: 100%; max-height: 240px; object-fit: contain; border: 3px solid var(--ink); background: #fff; }
.muro-upload-caption { font-family: 'Press Start 2P', monospace; font-size: .5rem; color: var(--ink); border: 3px solid var(--ink); padding: .5rem; }
.muro-upload-actions { display: flex; gap: .6rem; }
.muro-upload-actions button { flex: 1; font-family: 'Press Start 2P', monospace; font-size: .55rem; color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--shadow-sm); padding: .55rem; cursor: pointer; }
.muro-upload-send { background: var(--accent2); }
.muro-upload-cancel { background: #fff; }

/* ---- Zumbido ---- */
@keyframes zumbido-shake {
  0%   { transform: translate(0, 0) rotate(0deg); }
  12%  { transform: translate(-9px, 5px) rotate(-1.4deg); }
  25%  { transform: translate(8px, -6px) rotate(1.2deg); }
  38%  { transform: translate(-7px, -4px) rotate(-1deg); }
  50%  { transform: translate(7px, 6px) rotate(0.9deg); }
  62%  { transform: translate(-5px, 3px) rotate(-0.7deg); }
  75%  { transform: translate(4px, -3px) rotate(0.5deg); }
  88%  { transform: translate(-2px, 2px) rotate(-0.3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
body.zumbido-shaking { animation: zumbido-shake 0.6s cubic-bezier(.36,.07,.19,.97) both; }

#zumbido-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  pointer-events: none; /* no bloquear la app */
}
.zumbido-card {
  background: var(--paper, #fffdf5);
  border: 4px solid var(--ink, #1a1a1a);
  box-shadow: 8px 8px 0 var(--ink, #1a1a1a);
  padding: 0 0 1.1rem; min-width: 240px;
  animation: zumbido-pop 0.28s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes zumbido-pop {
  0% { transform: scale(.6) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.zumbido-card-title {
  font-family: 'Press Start 2P', monospace;
  font-size: .72rem; line-height: 1.5;
  background: var(--accent2, #ffe119);
  border-bottom: 4px solid var(--ink, #1a1a1a);
  padding: .6rem .7rem; text-align: center; color: var(--ink, #1a1a1a);
}
.zumbido-card-who {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1rem .8rem 0;
}
.zumbido-card-avatar { font-size: 1.8rem; }
.zumbido-card-name {
  font-family: 'Press Start 2P', monospace; font-size: .7rem; color: var(--ink, #1a1a1a);
}
@media (prefers-reduced-motion: reduce) {
  body.zumbido-shaking { animation: none; }
  body.zumbido-flash { box-shadow: inset 0 0 0 8px var(--accent, #e6194b); transition: box-shadow .15s; }
}

/* ---- Zumbar button + person menu ---- */
.zumbar-btn {
  font-family: 'Press Start 2P', monospace; font-size: .55rem; line-height: 1;
  background: var(--accent2, #ffe119); color: var(--ink, #1a1a1a);
  border: 3px solid var(--ink, #1a1a1a); box-shadow: 3px 3px 0 var(--ink, #1a1a1a);
  padding: .35rem .5rem; cursor: pointer; white-space: nowrap; border-radius: 2px;
}
/* En la fila de conectados: compacto, no estira el alto ni le come lugar al nombre.
   min-width fijo para que no salte entre "Zumbar" y el contador. */
.presence-row-zumbar {
  margin-left: auto; flex-shrink: 0;
  font-size: .5rem; padding: .3rem .4rem;
  min-width: 6rem; text-align: center;
}
.zumbar-btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink, #1a1a1a); }
.zumbar-btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink, #1a1a1a); }
.zumbar-btn.is-cooling, .zumbar-btn:disabled {
  background: #d7d2c4; color: #6c6658; box-shadow: none; cursor: default; transform: none;
}
.person-menu {
  position: fixed; z-index: 9000; background: var(--paper, #fffdf5);
  border: 3px solid var(--ink, #1a1a1a); box-shadow: 5px 5px 0 var(--ink, #1a1a1a);
  padding: .5rem; display: flex; flex-direction: column; gap: .4rem;
}
.person-menu-title { font-family: 'Press Start 2P', monospace; font-size: .55rem; padding: .1rem .2rem; }

/* ---- Modal de camara de El Muro ---- */
.muro-cam[hidden] { display: none; }
.muro-cam { position: fixed; inset: 0; z-index: 10012; display: grid; place-items: center; }
.muro-cam-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); }
.muro-cam-card {
  position: relative; background: var(--paper, #fffdf5);
  border: 4px solid var(--ink, #1a1a1a); box-shadow: var(--shadow, 8px 8px 0 #1a1a1a);
  padding: 0 0 .8rem; width: min(92vw, 380px); border-radius: 2px;
  display: flex; flex-direction: column; gap: .6rem;
}
.muro-cam-viewport {
  position: relative; margin: .6rem .6rem 0; aspect-ratio: 3/4; max-height: 56vh;
  background: #000; border: 3px solid var(--ink, #1a1a1a); overflow: hidden;
  display: grid; place-items: center;
}
.muro-cam-video, .muro-cam-shot { width: 100%; height: 100%; object-fit: cover; display: block; }
.muro-cam-msg {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-family: 'Press Start 2P', monospace; font-size: .6rem; color: #fff; padding: 1rem; gap: .6rem;
}
.muro-cam-error-file {
  font-family: 'Press Start 2P', monospace; font-size: .55rem; margin-top: .6rem;
  background: var(--accent2, #ffe119); color: var(--ink, #1a1a1a);
  border: 3px solid var(--ink, #1a1a1a); padding: .4rem .6rem; cursor: pointer;
}
.muro-cam-flash {
  position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none;
}
.muro-cam-flash.is-flashing { animation: muro-cam-flash .3s ease-out; }
@keyframes muro-cam-flash { 0% { opacity: .9; } 100% { opacity: 0; } }
.muro-cam-flip {
  position: absolute; top: .4rem; right: .4rem; z-index: 2;
  font-size: 1rem; background: var(--paper, #fffdf5); border: 3px solid var(--ink, #1a1a1a);
  box-shadow: var(--shadow-sm, 3px 3px 0 #1a1a1a); cursor: pointer; padding: .25rem .4rem; border-radius: 2px;
}
.muro-cam-actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; padding: 0 .6rem; }
.muro-cam-actions button {
  font-family: 'Press Start 2P', monospace; font-size: .6rem;
  border: 3px solid var(--ink, #1a1a1a); cursor: pointer; padding: .5rem .7rem; border-radius: 2px;
}
.muro-cam-shoot, .muro-cam-use { background: var(--accent2, #ffe119); color: var(--ink, #1a1a1a); box-shadow: var(--shadow-sm, 3px 3px 0 #1a1a1a); }
.muro-cam-close, .muro-cam-retake { background: #fff; color: var(--ink, #1a1a1a); }

/* ---- Gatito (Michi) ---- */
.pet[hidden] { display: none; }
.pet {
  position: fixed; z-index: 9500; transform: translate(-50%, -100%);
  cursor: pointer; user-select: none; text-align: center;
  transition: left var(--pet-walk, 2500ms) linear, top var(--pet-walk, 2500ms) linear;
}
/* Sprite pixel-art de Michi (asset CC0, sheet 64x48 = 12 frames de 16x16, escalado 3x = 48px). */
.cat-sprite {
  width: 48px; height: 48px;
  background-image: url('/sprites/michi.png');
  background-repeat: no-repeat;
  background-size: 192px 144px;        /* 64*3 x 48*3 */
  image-rendering: pixelated;
}
.pet.face-r .cat-sprite { transform: scaleX(-1); } /* el sprite mira a la izquierda; flip al ir a la derecha */
/* Triste: grisáceo, apagado y agachado (decaído). */
.pet.sad .cat-sprite { filter: grayscale(0.8) brightness(0.82); transform: translateY(3px) scaleY(0.84); transform-origin: bottom center; }
/* Humor: feliz más brillante, gruñón apagado. */
.pet.mood-feliz .cat-sprite { filter: brightness(1.08) saturate(1.15); }
.pet.mood-grunon .cat-sprite { filter: saturate(0.72) brightness(0.95); }
/* Perseguir la cola: giradita rápida. */
.pet.play .cat-sprite { animation: cat-spin .95s linear; }
@keyframes cat-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Marcas de estado (✨/💢/💤): aparecen unos segundos en un lugar random del gato y se desvanecen. */
.pet-mark { position: absolute; font-size: .8rem; pointer-events: none; animation: pet-puff 1.7s ease-out forwards; }
@keyframes pet-puff {
  0% { opacity: 0; transform: translateY(5px) scale(.5); }
  18% { opacity: 1; transform: translateY(0) scale(1); }
  72% { opacity: 1; transform: translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translateY(-15px) scale(1.05); }
}

/* Mimito: saltito del gato + ráfaga de corazones. */
.pet.is-petted .cat-sprite { animation: cat-pet-pop .5s ease-out; }
@keyframes cat-pet-pop { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-8px) scale(1.15); } 100% { transform: translateY(0) scale(1); } }
.pet.face-r.is-petted .cat-sprite { animation: cat-pet-pop-r .5s ease-out; }
@keyframes cat-pet-pop-r { 0% { transform: scaleX(-1) translateY(0) scale(1); } 35% { transform: scaleX(-1) translateY(-8px) scale(1.15); } 100% { transform: scaleX(-1) translateY(0) scale(1); } }
/* Corazoncitos del mimito (mismo espíritu que las gotitas de la planta) */
.pet-heart { position: fixed; z-index: 9600; font-size: 1.1rem; pointer-events: none; animation: pet-heart 1s ease-out forwards; }
@keyframes pet-heart { 0% { opacity: 1; transform: translateY(0) scale(.7); } 100% { opacity: 0; transform: translateY(-40px) scale(1.2); } }