:root {
  /* identidad Pide Un Domi (manual de marca: azul cielo + naranja) */
  --primary: #1389d4;
  --accent: #f47820;
  --bg: #0a0e14;
  --card: #161b22;
  --text: #e6edf3;
  --dim: #8b949e;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, 'Segoe UI', Inter, sans-serif;
  overflow: hidden;
}
.hide { display: none !important; }

/* ---- login (pantalla con el cielo Domi del manual de marca) ---- */
body:has(#login-card:not(.hide)) {
  background:
    radial-gradient(circle at 50% 110%, rgba(244, 120, 32, 0.35) 0%, rgba(244, 120, 32, 0) 55%),
    linear-gradient(180deg, #1ba2ec 0%, #1389d4 50%, #0d77c4 100%);
}
/* login de FDX (link ?fdx): marca verde FDX en vez del azul Domi */
body.fdx-login:has(#login-card:not(.hide)) {
  background:
    radial-gradient(circle at 50% 110%, rgba(43, 255, 149, 0.30) 0%, rgba(43, 255, 149, 0) 55%),
    linear-gradient(180deg, #1f9c66 0%, #157a4e 50%, #0e5e3b 100%);
}
#login-card {
  position: absolute; inset: 0; margin: auto;
  height: fit-content; width: 100%; max-width: 400px;
  background: rgba(10, 14, 20, 0.78); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px; padding: 28px; backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}
.login-logo { display: block; height: 96px; width: auto; margin: 0 auto 12px; }
#brand-logo { height: 30px; width: auto; display: block; }
#login-card h1 { font-size: 18px; margin-bottom: 4px; }
.eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
#login-card input {
  width: 100%; padding: 10px 12px; margin: 6px 0; border-radius: 8px;
  border: 1px solid #30363d; background: #0d1117; color: var(--text); font-size: 15px;
}
#login-card button {
  width: 100%; padding: 10px; margin-top: 10px; border: 0; border-radius: 8px;
  background: var(--primary); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
#login-card button:hover { background: var(--accent); }
.err { color: #f85149; font-size: 13px; min-height: 18px; margin-top: 8px; }

/* ---- oficina ---- */
#office { position: fixed; inset: 0; }
#world { width: 100%; height: 100%; display: block; touch-action: none; image-rendering: pixelated; image-rendering: crisp-edges; }

.topbar {
  position: absolute; top: 12px; left: 12px; display: flex; gap: 10px; align-items: center;
  background: rgba(11, 15, 22, 0.72); border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px; padding: 9px 16px; backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.topbar .dot { width: 9px; height: 9px; border-radius: 50%; background: #3fb950; box-shadow: 0 0 8px #3fb950; }
.topbar .dot.off { background: #f85149; }
#company { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
#room { font-weight: 700; font-size: 14px; }

.controls {
  position: absolute; top: 12px; right: 12px; display: flex; gap: 6px;
}
.controls button {
  border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(11, 15, 22, 0.72); color: var(--text);
  border-radius: 11px; padding: 8px 13px; font-size: 13px; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.controls button:hover {
  border-color: rgba(80, 180, 255, 0.55); box-shadow: 0 6px 22px rgba(40, 130, 220, 0.25);
  transform: translateY(-1px);
}

.statusbar {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; align-items: center; width: min(440px, 86vw);
}
.statusbar input {
  flex: 1; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(11, 15, 22, 0.74); color: var(--text); font-size: 13.5px;
  backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  transition: border-color .15s;
}
.statusbar input:focus { outline: none; border-color: rgba(80, 180, 255, 0.55); }
.statusbar input::placeholder { color: var(--dim); }

#feed {
  position: absolute; bottom: 14px; right: 12px; width: 280px; max-height: 200px; overflow: auto;
  background: rgba(11, 15, 22, 0.72); border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px; padding: 11px 14px; font-size: 12px; color: var(--dim);
  backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}
#feed div { padding: 2px 0; }
#feed .agent { color: #7ee2b8; }

/* ---- panel de llamada (S3) ----
   Card compacta y flotante (NO columna de alto completo — tapaba la interfaz,
   reporte centralistas 12-jun): arrastrable por el header, redimensionable por
   la esquina inferior, minimizable a barrita (el audio sigue). */
#call-panel {
  position: absolute; top: 64px; right: 12px;
  width: min(380px, 44vw); height: min(400px, 52vh);
  min-width: 280px; min-height: 160px;
  resize: both; padding-bottom: 12px; /* franja libre p/ el handle de resize (el iframe come el puntero) */
  display: flex; flex-direction: column;
  background: rgba(11, 15, 22, 0.9); border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px; overflow: hidden; backdrop-filter: blur(16px) saturate(1.3); z-index: 5;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
#call-panel.wide { width: min(960px, 78vw); height: min(640px, 82vh); }
#call-panel.full {
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100vw !important; height: 100vh !important; max-width: none; max-height: none;
  min-width: 0; border-radius: 0; resize: none; padding-bottom: 0; z-index: 200;
}
#call-panel.full #call-frame { flex: 1; }
#call-panel.min {
  width: auto !important; height: auto !important;
  min-width: 0; min-height: 0; resize: none; padding-bottom: 0;
}
#call-panel.min #call-frame { display: none; }
#call-panel.min .call-head { border-bottom: 0; }
.call-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid #21262d;
  cursor: move; touch-action: none; user-select: none; flex: none;
}
.call-head span {
  font-weight: 700; font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.call-actions { display: flex; flex: none; }
.call-head button {
  border: 1px solid #30363d; background: transparent; color: var(--text);
  border-radius: 7px; padding: 4px 9px; font-size: 12.5px; cursor: pointer; margin-left: 5px;
}
.call-head button:hover { border-color: var(--primary); }
.call-head button.muted { border-color: rgba(248, 81, 73, 0.65); color: #ff9a97; }
#call-frame { flex: 1; min-height: 0; }
#call-frame iframe { width: 100%; height: 100%; border: 0; }

/* ---- panel de inspección (S4) ---- */
#inspect-panel {
  position: absolute; top: 14px; left: 208px; width: min(330px, 70vw); max-height: 60vh;
  display: flex; flex-direction: column;
  background: rgba(11, 15, 22, 0.9); border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px; overflow: hidden; backdrop-filter: blur(16px) saturate(1.3); z-index: 6;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
#inspect-body { padding: 12px 14px; overflow: auto; font-size: 13px; }
.who-big { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.who-big .ava {
  width: 40px; height: 40px; border-radius: 50%; background: var(--primary);
  display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none;
}
.who-big .ava.ia { border-radius: 10px; background: #23a06b; color: #08130d; }
.who-big b { display: block; font-size: 14.5px; }
.who-big span { display: block; font-size: 12px; color: var(--dim); }
.who-big .st { color: #7ee2b8; }
.dim { color: var(--dim); font-size: 12px; }
.turno-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.turno-tabs button { background: var(--card); color: var(--dim); border: 1px solid #30363d; border-radius: 8px; padding: 6px 14px; cursor: pointer; font-size: 13px; }
.turno-tabs button:hover { border-color: var(--primary); }
.turno-tabs button.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.turno-ctrl { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.turno-ctrl select { background: var(--card); color: var(--text); border: 1px solid #30363d; border-radius: 8px; padding: 5px 9px; font-size: 13px; }
.turno-tabs.sub button { padding: 4px 11px; font-size: 12px; }
.company-sep { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); font-weight: 700; margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid rgba(120,190,255,0.25); }
.company-sep:first-child { margin-top: 0; }
tr.grp-row td { background: rgba(120,190,255,0.10); color: var(--primary); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; text-align: left; }
.hist-table th, .hist-table td { text-align: center; font-size: 12px; padding: 5px 7px; white-space: nowrap; }
.hist-table th:first-child, .hist-table td:first-child { text-align: left; }
.ev-list { display: flex; flex-direction: column; gap: 7px; }
.ev { display: flex; gap: 8px; align-items: flex-start; }
.ev i { display: block; font-style: normal; color: var(--dim); font-size: 11px; }
.chip {
  flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; background: #2d333b; color: var(--dim); margin-top: 1px;
}
.chip.c-alert { background: #5c2120; color: #ff9a97; }
.chip.c-task { background: #1d3a5f; color: #8ec3ff; }
.chip.c-done { background: #1d4430; color: #7ee2b8; }
.chip.c-message { background: #3b2d5c; color: #c0a8ff; }

.hint {
  position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%);
  font-size: 11.5px; color: var(--dim); background: rgba(11, 15, 22, 0.6);
  padding: 4px 12px; border-radius: 999px; backdrop-filter: blur(8px);
}

/* ---- editor "Mi look" (avatar personalizable) ---- */
#avatar-panel {
  position: absolute; top: 56px; left: max(calc(50% - 210px), 224px); transform: none;
  width: min(420px, calc(100vw - 240px)); max-height: calc(100vh - 76px);
  display: flex; flex-direction: column;
  background: rgba(11, 15, 22, 0.93); border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px; overflow: hidden; backdrop-filter: blur(16px) saturate(1.3); z-index: 8;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
.avatar-body { flex: 1 1 auto; min-height: 0; padding: 0 16px 14px; overflow-y: auto; overflow-x: hidden; }
.avatar-preview-wrap {
  display: flex; justify-content: center; padding: 10px 0;
  position: sticky; top: 0; z-index: 2;        /* el muñequito siempre a la vista al hacer scroll */
  background:
    radial-gradient(ellipse at center 80%, rgba(43, 217, 143, 0.07), transparent 70%),
    rgba(11, 15, 22, 0.97);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
#avatar-preview { width: 150px; height: 175px; }
.av-row { margin-bottom: 10px; }
.av-row.av-dim { opacity: 0.4; }
.av-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--dim); margin-bottom: 5px;
}
.av-vals { display: flex; flex-wrap: wrap; gap: 6px; }
.av-swatch {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.18); padding: 0;
}
.av-swatch:hover { border-color: rgba(255, 255, 255, 0.55); }
.av-swatch.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--primary); }
.av-chip {
  background: #1c2128; color: var(--text); border: 1px solid #2d333b;
  border-radius: 999px; padding: 4px 11px; font-size: 12px; cursor: pointer;
}
.av-chip:hover { border-color: var(--primary); }
.av-chip.sel { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
/* footer SIEMPRE visible: el botón Guardar no se va con el scroll del catálogo */
.avatar-actions {
  flex: 0 0 auto; padding: 10px 16px 12px;
  background: rgba(11, 14, 20, 0.96); border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0 0 16px 16px;
}
#avatar-save {
  width: 100%; padding: 10px; border: 0; border-radius: 9px;
  background: var(--primary); color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
#avatar-save:hover { filter: brightness(1.12); }
#avatar-panel .err { margin-top: 6px; }


/* ---- chat de texto (Oficina / Sala / DMs) ---- */
/* el botón del chat vive en la barra lateral (13-sep): 4 mensajes en 14 días no justifican un botón flotante */
#chat-toggle { position: relative; }
#chat-unread {
  display: inline-block; margin-left: 7px; min-width: 18px; text-align: center;
  background: var(--accent); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 5px;
}
#chat-panel {
  position: absolute; bottom: 58px; left: 208px; width: min(340px, 70vw); height: min(380px, 56vh);
  display: flex; flex-direction: column;
  background: rgba(11, 15, 22, 0.92); border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px; overflow: hidden; backdrop-filter: blur(16px) saturate(1.3); z-index: 6;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
#chat-tabs {
  display: flex; gap: 4px; padding: 8px 10px 6px; border-bottom: 1px solid #21262d;
  overflow-x: auto; flex: none; scrollbar-width: none;
}
#chat-tabs button {
  border: 1px solid #2d333b; background: transparent; color: var(--dim);
  border-radius: 999px; padding: 3px 11px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
#chat-tabs button.sel { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
#chat-tabs button .nbadge {
  display: inline-block; margin-left: 5px; min-width: 14px;
  background: var(--accent); color: #fff; border-radius: 999px; font-size: 10px; padding: 0 4px;
}
#chat-msgs { flex: 1; overflow-y: auto; padding: 8px 12px; font-size: 13px; }
#chat-msgs .cmsg { margin-bottom: 6px; line-height: 1.35; overflow-wrap: break-word; }
#chat-msgs .cmsg b { color: #8ec3ff; font-size: 12.5px; }
#chat-msgs .cmsg.own b { color: #7ee2b8; }
#chat-msgs .cmsg i { font-style: normal; color: var(--dim); font-size: 10.5px; margin-left: 6px; }
.chat-inputrow { padding: 8px; border-top: 1px solid #21262d; flex: none; }
.chat-inputrow input {
  width: 100%; padding: 8px 12px; border-radius: 9px; border: 1px solid #30363d;
  background: #0d1117; color: var(--text); font-size: 13px;
}
.chat-inputrow input:focus { outline: none; border-color: var(--primary); }

/* ---- TV de la sala (BI ambiental) ---- */
#board-card {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: min(330px, 82vw);
  background: rgba(11, 15, 22, 0.82); border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 13px; overflow: hidden; backdrop-filter: blur(14px) saturate(1.3); z-index: 4;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}
.board-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px; cursor: default;
}
.board-head span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.board-head button {
  border: 0; background: transparent; color: var(--dim); font-size: 13px; cursor: pointer; padding: 0 4px;
}
#board-lines { padding: 0 12px 9px; display: flex; flex-direction: column; gap: 3px; }
#board-card.min #board-lines { display: none; }
.bline { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.bline span { color: var(--dim); }
.bline b { font-variant-numeric: tabular-nums; }
.bline.t-ok b { color: #7ee2b8; }
.bline.t-warn b { color: #ffd27a; }
.bline.t-bad b { color: #ff9a97; }

/* ---- aviso de ritual ---- */
#ritual-toast {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%);
  background: rgba(19, 137, 212, 0.16); border: 1px solid rgba(19, 137, 212, 0.55); color: #bfe2ff;
  border-radius: 999px; padding: 8px 20px; font-size: 13px; font-weight: 600;
  backdrop-filter: blur(12px); z-index: 7; box-shadow: 0 8px 28px rgba(19, 137, 212, 0.25);
}

/* ---- panel Mi turno + vista supervisor ---- */
#turno-panel, #super-panel, #horarios-panel, #personas-panel, #plazas-panel {
  position: absolute; top: 56px; left: max(calc(50% - 230px), 224px); transform: none;
  width: min(460px, calc(100vw - 240px)); max-height: calc(100vh - 76px);
  display: flex; flex-direction: column;
  background: rgba(11, 15, 22, 0.93); border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px; overflow: hidden; backdrop-filter: blur(16px) saturate(1.3); z-index: 8;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
#super-panel { width: min(900px, 96vw); }
#horarios-panel { width: min(640px, 96vw); }
#turno-body, #super-body, #horarios-body { padding: 12px 16px 16px; overflow: auto; font-size: 13px; }

/* ---- Plazas y parques (catálogo con mapa) ---- */
#plazas-panel { width: min(1080px, 97vw); left: max(calc(50% - 540px), 224px); }
/* Pantalla completa: el mapa es la herramienta de trabajo, tiene que poder ocupar todo */
/* Pantalla completa DE VERDAD: ocupa TODO el viewport (antes dejaba la barra lateral
   afuera con left:234px, que no es pantalla completa). Se combina con la API del
   navegador; esto es lo que se ve si el navegador la niega. */
#plazas-panel.full { position: fixed; inset: 0; width: auto; max-width: none; max-height: none; border-radius: 0; z-index: 3000; }
#plazas-panel.full #plazas-body { height: calc(100vh - 58px); grid-template-columns: 320px 1fr; }
/* Con la API del navegador el panel ES el elemento en pantalla completa: el fondo se
   pinta explícito porque detrás el navegador pone negro. */
#plazas-panel:fullscreen { inset: 0; width: 100vw; height: 100vh; max-height: none; border-radius: 0; background: #101722; }
#plazas-panel:fullscreen #plazas-body { height: calc(100vh - 58px); grid-template-columns: 320px 1fr; }
#plazas-panel.full #plazas-ficha { max-height: 32vh; }
#plazas-body {
  display: grid; grid-template-columns: 250px 1fr; grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px; padding: 12px; overflow: hidden; min-height: 0; height: min(72vh, 620px);
}
#plazas-lista { grid-row: 1 / span 2; overflow: auto; border-right: 1px solid rgba(255,255,255,.08); padding-right: 8px; }
#plazas-mapa { border-radius: 12px; overflow: hidden; min-height: 240px; background: #0d1219; }
#plazas-ficha { overflow: auto; max-height: 232px; font-size: 12.5px; }
/* Detalle de plaza (levantamiento, checklist, bitácora) — mismo lenguaje que la webapp del ente */
#pz-detalle { position: fixed; inset: 0; z-index: 3200; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
#pz-detalle.hide { display: none; }
#pz-detalle-caja { width: min(960px, 96vw); max-height: 92vh; overflow: auto; background: #101722; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 0 16px 16px; font-size: 12.5px; }
#pz-detalle-caja .call-head { position: sticky; top: 0; background: #101722; padding: 12px 0; z-index: 1; }
#pz-detalle-titulo { font-weight: 700; font-size: 15px; }
.pl-dim { color: var(--dim); font-size: 11.5px; }
.pl-chip { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 999px; margin: 2px 3px 0 0; border: 1px solid transparent; }
.pl-chip-ok { background: rgba(46,204,113,.15); color: #3fbf7f; } .pl-chip-mid { background: rgba(230,162,60,.15); color: #e6a23c; }
.pl-chip-bad { background: rgba(224,82,82,.15); color: #e05252; } .pl-chip-dim { background: rgba(255,255,255,.05); color: var(--dim); border-color: rgba(255,255,255,.1); }
.pl-tag { display: inline-block; font-size: 10.5px; padding: 1px 6px; border-radius: 5px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--dim); margin-right: 4px; }
.pl-tag-riego { background: rgba(46,204,113,.15); color: #3fbf7f; border-color: transparent; } .pl-tag-noriego { background: rgba(224,82,82,.15); color: #e05252; border-color: transparent; }
.pl-tag-luz { background: rgba(230,162,60,.18); color: #e6a23c; border-color: transparent; } .pl-tag-cis { background: rgba(46,111,233,.15); color: #6b9cff; border-color: transparent; }
.pl-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 8px; }
.pl-fotos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: #0d1219; display: block; }
.pl-sec { margin-top: 16px; } .pl-sec h4 { margin: 0 0 8px; font-size: 13.5px; }
.pl-reg { border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: rgba(255,255,255,.03); }
.pl-bit { border-left: 3px solid rgba(255,255,255,.15); padding: 6px 10px; margin: 0 0 6px; }
.pl-bit .pl-txt { white-space: pre-wrap; font-size: 12.5px; margin-top: 4px; max-height: 64px; overflow: hidden; cursor: pointer; }
.pl-bit .pl-txt.open { max-height: none; }
.pl-btn-detalle { font-size: 12px; padding: 4px 10px; border-radius: 7px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: inherit; cursor: pointer; margin-top: 4px; }
/* Dentro del popup de Leaflet (fondo blanco) el botón y los chips tienen que verse: colores fijos */
.leaflet-popup .pl-btn-detalle { background: #1f2a3a; color: #fff; border-color: #1f2a3a; font-weight: 600; }
.leaflet-popup .pl-chip-dim { background: #f1f1f4; color: #555; border-color: #ddd; }
.leaflet-popup .pl-chip-ok { background: #e3f3ea; color: #1f7a4d; } .leaflet-popup .pl-chip-mid { background: #fbefd9; color: #9a5b00; } .leaflet-popup .pl-chip-bad { background: #fae3e1; color: #b3261e; }
/* Nunca más alto que el mapa: si no cabe, el contenido del popup se desplaza */
#plazas-mapa .leaflet-popup-content { max-height: min(60vh, 420px); overflow: auto; }
.pz-fuente { font-size: 11px; line-height: 1.45; color: var(--dim); background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10); border-radius: 8px; padding: 7px 9px; margin-bottom: 8px; }
.pz-filtro { width: 100%; margin-bottom: 8px; background: #0e131b; color: var(--text);
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 6px 8px; font-size: 12px; font-family: inherit; }
.pz-item { padding: 7px 8px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.pz-item:hover { background: rgba(255,255,255,.05); }
.pz-item.on { background: rgba(255,255,255,.08); border-color: var(--primary); }
.pz-item b { display: block; font-size: 12.5px; font-weight: 600; }
.pz-item span { font-size: 11px; color: var(--dim); }
.pz-badge { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.pz-activa { background: rgba(46,175,110,.18); color: #6fdca4; }
.pz-obra { background: rgba(232,163,61,.18); color: #f0be74; }
.pz-suspendida { background: rgba(214,84,61,.18); color: #f0947c; }
.pz-ajena { background: rgba(124,135,152,.18); color: #9fb0c4; }
#plazas-ficha .pz-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 10px; }
#plazas-ficha label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); margin-bottom: 3px; }
#plazas-ficha input, #plazas-ficha select, #plazas-ficha textarea {
  width: 100%; box-sizing: border-box; background: #0e131b; color: var(--text);
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; font-family: inherit;
}
#plazas-ficha .pz-full { grid-column: 1 / -1; }
.pz-label { background: rgba(11,15,22,.82); border: 1px solid rgba(255,255,255,.18); border-radius: 6px;
  padding: 1px 5px; font: 600 11px/1.3 system-ui, sans-serif; color: #eaf0f6; white-space: nowrap; box-shadow: none; }
.pz-label::before { display: none; }
.leaflet-container { background: #0d1219; }
.sec-title {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--dim); margin: 12px 0 6px;
}
#turno-body .sec-title:first-child { margin-top: 0; }
#checklist-items label { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; cursor: pointer; }
#checklist-items input { margin-top: 3px; accent-color: var(--primary); }
/* INICIO DE TURNO: preguntas de alistamiento Sí/No */
.inicio-q { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.inicio-lab { flex: 1; font-size: 12.5px; line-height: 1.25; }
.inicio-yn { display: flex; gap: 4px; flex: 0 0 auto; }
.inicio-yn .yn { padding: 4px 11px; border-radius: 7px; border: 1px solid #2d333b; background: #1c2128; color: var(--text); font-size: 12px; cursor: pointer; }
.inicio-yn .yn.yes { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.inicio-yn .yn.no { background: #cf4f43; border-color: #cf4f43; color: #fff; font-weight: 700; }
.inicio-falla { width: 100%; margin: 2px 0 6px; padding: 6px 8px; border-radius: 7px; border: 1px solid #cf4f43; background: #1c2128; color: var(--text); font-size: 12px; box-sizing: border-box; }
.inicio-save { margin-top: 8px; width: 100%; padding: 9px; border: 0; border-radius: 9px; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.inicio-save:disabled { opacity: .45; cursor: default; }
.inicio-done { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 11px; border-radius: 9px; }
.inicio-done.ok { background: rgba(35, 160, 107, 0.14); border: 1px solid rgba(35, 160, 107, 0.5); }
.inicio-done.warn { background: rgba(244, 120, 32, 0.12); border: 1px solid rgba(244, 120, 32, 0.5); }
.inicio-done b { font-size: 12.5px; }
.inicio-done i { font-style: normal; color: var(--dim); font-size: 11.5px; flex: 1 0 100%; }
.inicio-redo { margin-left: auto; padding: 4px 10px; border: 1px solid #30363d; border-radius: 7px; background: #1c2128; color: var(--text); font-size: 11.5px; cursor: pointer; }
#notes-list .note { padding: 6px 9px; border-left: 2px solid #2d333b; margin-bottom: 6px; }
#notes-list .note.unread { border-left-color: var(--accent); background: rgba(244, 120, 32, 0.06); }
#notes-list .note i { display: block; font-style: normal; color: var(--dim); font-size: 11px; margin-top: 2px; }
#notes-read, #shift-close-btn {
  margin-top: 6px; padding: 7px 14px; border: 1px solid #30363d; border-radius: 8px;
  background: transparent; color: var(--text); font-size: 12.5px; cursor: pointer;
}
#notes-read:hover, #shift-close-btn:hover { border-color: var(--primary); }
#turno-body textarea {
  width: 100%; padding: 9px 12px; border-radius: 9px; border: 1px solid #30363d;
  background: #0d1117; color: var(--text); font-size: 13px; resize: vertical; font-family: inherit;
}
#turno-body textarea:focus { outline: none; border-color: var(--primary); }
#super-body table, #horarios-body table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#super-body th, #horarios-body th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--dim); padding: 4px 8px 6px; border-bottom: 1px solid #21262d;
}
#super-body td, #horarios-body td { padding: 5px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); white-space: nowrap; }
#super-body .on, #horarios-body .on { color: #7ee2b8; }
#super-body .off, #horarios-body .off { color: var(--dim); }
#super-body .late, #horarios-body .late { color: #ffd27a; }
#super-body .abs, #horarios-body .abs { color: #ff9a97; }
.badge-chip {
  display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; background: #2d333b; color: #ffd27a; margin: 2px 4px 0 0;
}
.dmbtn {
  margin-top: 8px; padding: 6px 14px; border: 1px solid #30363d; border-radius: 8px;
  background: transparent; color: var(--text); font-size: 12.5px; cursor: pointer;
}
.dmbtn:hover { border-color: var(--primary); }

/* editor de horarios (panel Equipo, admins) */
#sched-editor {
  border: 1px solid rgba(19, 137, 212, 0.45); border-radius: 10px;
  padding: 10px 12px 12px; margin-bottom: 12px;
  /* PEGADO ARRIBA mientras se edita (pedido de Leonel 20-ago): el editor vive al tope de
     una lista que se scrollea; si se va con el scroll, el usuario pierde de vista lo que
     está editando y el clic en "Asignar" parece no haber hecho nada. Fondo OPACO a
     propósito: si fuera translúcido, las filas pasarían por debajo y se leería sucio. */
  position: sticky; top: 0; z-index: 6;
  background: #101722; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}
.sch-days { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.sch-day {
  display: flex; gap: 4px; align-items: center; font-size: 12px; cursor: pointer;
  border: 1px solid #2d333b; border-radius: 999px; padding: 3px 9px;
}
.sch-day input { accent-color: var(--primary); margin: 0; }
.sch-times { font-size: 12.5px; color: var(--dim); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sch-times input {
  background: #0d1117; border: 1px solid #30363d; color: var(--text);
  border-radius: 7px; padding: 4px 8px; font-size: 12.5px;
}
.sch-actions { display: flex; gap: 6px; margin-top: 9px; }
.sch-actions button, .sch-btn {
  padding: 5px 12px; border: 1px solid #30363d; border-radius: 7px;
  background: transparent; color: var(--text); font-size: 12px; cursor: pointer;
}
.sch-actions button:hover, .sch-btn:hover { border-color: var(--primary); }
#sch-save { border-color: var(--primary); background: var(--primary); color: #fff; font-weight: 600; }

/* pill para re-entrar a la llamada del lugar donde estoy parado */
#rejoin-call {
  position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%);
  border: 1px solid rgba(244, 120, 32, 0.6); background: rgba(58, 30, 8, 0.88); color: #ffd9b8;
  border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 700; cursor: pointer;
  backdrop-filter: blur(12px); box-shadow: 0 8px 28px rgba(244, 120, 32, 0.3); z-index: 4;
  animation: pulseCall 2.2s ease-in-out infinite;
}
#rejoin-call:hover { background: rgba(80, 42, 12, 0.92); }
@keyframes pulseCall {
  0%, 100% { box-shadow: 0 8px 28px rgba(244, 120, 32, 0.3); }
  50% { box-shadow: 0 8px 34px rgba(244, 140, 50, 0.55); }
}

/* ---------- editor de oficina (admin) ---------- */
/* El editor OCUPA el sidebar (no es card aparte): llena la altura, cuerpo scrolleable. */
#edit-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; color: #e8eef6; }
#edit-panel .edit-head { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 2px 0 8px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.10); }
#edit-panel .edit-head button { padding: 5px 9px; border-radius: 7px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #dfe7f2; cursor: pointer; font-size: 12px; }
#edit-panel .edit-head button:hover { border-color: var(--primary); }
#edit-panel .edit-head span { font-size: 13px; font-weight: 700; color: #8fc7ff; }
#edit-undo { padding: 5px 9px; border-radius: 7px; background: rgba(40,130,220,0.22); border: 1px solid rgba(120,190,255,0.45); color: #dfe7f2; cursor: pointer; font-size: 12px; }
#edit-undo:hover { background: rgba(40,130,220,0.4); }
#edit-undo.off { opacity: 0.4; pointer-events: none; }
#edit-redo { padding: 5px 9px; border-radius: 7px; background: rgba(40,130,220,0.22); border: 1px solid rgba(120,190,255,0.45); color: #dfe7f2; cursor: pointer; font-size: 12px; }
#edit-redo:hover { background: rgba(40,130,220,0.4); }
#edit-redo.off { opacity: 0.4; pointer-events: none; }

#edit-panel .sel-row button { font-size: 11px; padding: 4px 7px; }
#edit-panel .sel-row button.off { opacity: 0.4; pointer-events: none; }
#edit-panel .edit-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
/* cuando el editor está activo, el sidebar se ensancha un poco y oculta su nav normal */
#sidebar.editing { width: 246px; }
#sidebar.editing > .sb-brand, #sidebar.editing > .sb-group, #sidebar.editing > .sb-foot { display: none; }
#edit-panel h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .4px; color: #8fc7ff; }
#edit-panel .edit-tools { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
#edit-panel .edit-tools button {
  flex: 1 1 30%; padding: 5px 4px; font-size: 11.5px; border-radius: 7px;
  background: rgba(255,255,255,0.07); border: 1px solid transparent; color: #dfe7f2; cursor: pointer;
}
#edit-panel .edit-tools button.on { background: rgba(40,130,220,0.35); border-color: rgba(120,190,255,0.6); }
#edit-panel select, #edit-panel input[type=number] {
  width: 100%; margin: 3px 0; padding: 5px; border-radius: 7px; font-size: 12px;
  background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.12);
}
#edit-panel input[type=number] { width: 56px; }
#edit-panel label { font-size: 11px; display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }
#edit-panel #edit-hint { font-size: 11px; color: #9fb2c8; margin: 8px 0; line-height: 1.35; }
#edit-panel .edit-actions { display: flex; gap: 6px; }
#edit-panel .edit-actions button { flex: 1; padding: 7px; border-radius: 8px; font-size: 12px; cursor: pointer; border: none; }
#edit-save { background: #1389d4; color: #fff; font-weight: 700; }
#edit-cancel { background: rgba(255,255,255,0.10); color: #dfe7f2; }
#edit-upload { width: 100%; padding: 6px; border-radius: 7px; background: rgba(255,255,255,0.10); color: #fff; border: 1px dashed rgba(255,255,255,0.3); cursor: pointer; margin: 3px 0; }
#edit-img-name { font-size: 10.5px; color: #8fd0a0; display: block; margin-bottom: 3px; }

#edit-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; max-height: 280px; overflow-y: auto; padding: 4px 2px; }
#edit-gallery .lib {
  background: rgba(255,255,255,0.05); border: 1.5px solid transparent; border-radius: 8px;
  padding: 3px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px;
}
#edit-gallery .lib:hover { background: rgba(255,255,255,0.12); }
#edit-gallery .lib.on { border-color: #1389d4; background: rgba(40,130,220,0.22); }
#edit-gallery .lib img { width: 46px; height: 46px; image-rendering: pixelated; }
#edit-gallery .lib span { font-size: 8.5px; color: #aeb9c8; text-align: center; line-height: 1.05; }
#edit-panel #edit-add-opts { max-height: 360px; }

/* ---------- SIDEBAR estilo webapp (12-jun) ---------- */
#sidebar {
  position: fixed; left: 12px; top: 12px; width: 196px; z-index: 50;
  max-height: calc(100vh - 24px);
  display: flex; flex-direction: column; gap: 4px; padding: 10px 9px;
  background: rgba(11, 14, 20, 0.92); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px; box-shadow: 0 10px 34px rgba(0,0,0,0.45);
  backdrop-filter: blur(16px) saturate(1.2); overflow-y: auto;
}
#sidebar.collapsed { width: 56px; padding: 8px 6px; overflow: hidden; }
#sidebar.collapsed .sb-group, #sidebar.collapsed .sb-foot, #sidebar.collapsed .sb-co, #sidebar.collapsed .dot, #sidebar.collapsed .sb-sp { display: none; }
#sidebar.collapsed .sb-brand { border-bottom: none; padding: 0; margin: 0; flex-direction: column; gap: 6px; align-items: center; }
#sidebar.collapsed .sb-brand img { width: 30px; height: 30px; }
#sidebar.collapsed #sb-collapse { transform: rotate(180deg); }
#sb-collapse {
  background: rgba(255,255,255,0.07); border: none; color: #aeb9c8; cursor: pointer;
  border-radius: 7px; width: 22px; height: 22px; font-size: 14px; line-height: 1; padding: 0;
}
#sb-collapse:hover { background: rgba(255,255,255,0.16); }
#room-pop {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 45;
  background: rgba(11, 15, 22, 0.82); border: 1px solid rgba(120,180,255,0.28);
  color: #eaf2fb; font-size: 12.5px; font-weight: 700; letter-spacing: .4px;
  padding: 7px 16px; border-radius: 999px; backdrop-filter: blur(12px);
  box-shadow: 0 6px 22px rgba(0,0,0,0.4); transition: opacity .25s; pointer-events: none;
}
/* popup "Pulsa E para…" (interactuar con puerta/escalera) — centrado abajo, sobre los hints */
#interact-prompt {
  position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%); z-index: 46;
  background: rgba(11, 15, 22, 0.92); border: 1px solid rgba(120,190,255,0.5);
  color: #eaf2fb; font-size: 13px; font-weight: 700; letter-spacing: .3px;
  padding: 9px 18px; border-radius: 999px; backdrop-filter: blur(12px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.45); pointer-events: none;
}
#interact-prompt::before { content: '⌨ '; opacity: 0.8; }
#sidebar .sb-brand { display: flex; align-items: center; gap: 8px; padding: 4px 4px 10px; border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 6px; }
#sidebar .sb-brand img { width: 40px; height: 40px; object-fit: contain; border-radius: 9px; }
#sidebar .sb-sp { flex: 1; }
#sidebar .sb-co { flex: 1; min-width: 0; }
#sidebar #company { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sidebar #room { font-size: 10.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sidebar .sb-h { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #6f7d90; padding: 8px 6px 4px; }
#sidebar .sb-group button, #sidebar .sb-foot button {
  display: block; width: 100%; text-align: left; padding: 7px 10px; margin: 1px 0;
  background: transparent; border: none; border-radius: 8px; color: #d7dfe9;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
#sidebar .sb-group button:hover, #sidebar .sb-foot button:hover { background: rgba(255,255,255,0.08); }
#sidebar .sb-foot { margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 6px; }
#sidebar .sb-foot button { color: #c98a8a; }
/* editor desglosado DENTRO de la sidebar */
#sidebar #edit-panel { position: static; width: auto; padding: 4px 2px 8px; background: transparent; border: none; box-shadow: none; backdrop-filter: none; }
#sidebar #edit-panel .sec-t { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: #6f7d90; padding: 7px 4px 3px; }
#sidebar #edit-panel .edit-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
#sidebar #edit-panel .edit-tools button { padding: 5px 6px; font-size: 11.5px; text-align: center; background: rgba(255,255,255,0.06); }
#sidebar #edit-panel .edit-tools button.on { background: rgba(40,130,220,0.35); border: 1px solid rgba(120,190,255,0.55); }
#edit-cats { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 6px; }
#edit-cats button { flex: 1 1 28%; padding: 5px 4px; font-size: 11px; border-radius: 6px; background: rgba(255,255,255,0.06); border: none; color: #c4cedb; cursor: pointer; white-space: nowrap; }
#edit-cats button.on { background: rgba(40,130,220,0.35); color: #fff; }
#sidebar #edit-gallery { grid-template-columns: repeat(3, 1fr); max-height: 230px; }
#sidebar #edit-hint { font-size: 10.5px; }

#edit-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 4px 2px; }
#edit-swatches .lib img { width: 30px; height: 30px; }
#edit-swatches .lib span { font-size: 8px; }

/* celda Quién en dos líneas: el nombre no fuerza el ancho de la tabla */
#super-body td.quien, #horarios-body td.quien { white-space: normal; min-width: 150px; }
.q-name { font-weight: 600; line-height: 1.25; }
.q-label {
  font-size: 10.5px; color: var(--dim); line-height: 1.2;
  max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* editor de horarios por día: 7 filas Día [hh:mm]–[hh:mm] */
.sch-grid { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.sch-row { display: flex; align-items: center; gap: 7px; }
.sch-row .sch-day { width: 86px; flex: none; }
.sch-row input[type="time"] {
  background: #0d1117; border: 1px solid #30363d; color: var(--text);
  border-radius: 7px; padding: 3px 7px; font-size: 12.5px;
}
.sch-row input[type="time"]:disabled { opacity: 0.35; }
.sch-sep { color: var(--dim); }

.login-credits { margin-top: 14px; font-size: 10.5px; color: #5d6a7c; text-align: center; }
/* pantalla de entrada (13-sep): quién está adentro antes de entrar (el conteo es público en /healthz) */
.login-online { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #b9c6d6; margin: -6px 0 12px; }
.login-online::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #3fb950; box-shadow: 0 0 8px #3fb950; }
.login-credits a { color: #7a8ea6; text-decoration: none; }

.agent-kpis { margin: 8px 0 10px; padding: 8px 10px; background: rgba(40,130,220,0.10); border: 1px solid rgba(120,190,255,0.25); border-radius: 10px; }
.agent-kpis .sec-t { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: #7fb6e8; margin-bottom: 5px; }
.agent-kpis .kpi-row { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; }
.agent-kpis .t-ok { color: #7ee2b8; } .agent-kpis .t-warn { color: #ffd27a; } .agent-kpis .t-bad { color: #ff9a97; } .agent-kpis .t-info { color: #e6edf3; }

#zona-config { padding: 4px 2px 6px; }
#zona-config input, #zona-config select { width: 100%; margin: 3px 0; padding: 6px; border-radius: 7px; font-size: 12px; background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.14); }
#zona-config .zona-cfg-row { display: flex; align-items: center; gap: 6px; }
#zona-config .zona-cfg-row label { font-size: 11px; color: #9fb2c8; width: 34px; }
#zona-config .zona-cfg-row input[type=number] { width: 52px; margin: 3px 0; }
#zona-config .zona-cfg-row button { padding: 5px 8px; border-radius: 7px; font-size: 11px; background: rgba(40,130,220,0.22); border: 1px solid rgba(120,190,255,0.45); color: #dfe7f2; cursor: pointer; }
#zona-list { padding: 2px 0 6px; }
#zona-list-body { display: flex; flex-direction: column; gap: 3px; max-height: 190px; overflow-y: auto; }
#zona-list-body .zr { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 7px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); cursor: pointer; font-size: 12px; }
#zona-list-body .zr:hover { border-color: rgba(120,190,255,0.5); }
#zona-list-body .zr.on { background: rgba(255,200,80,0.14); border-color: rgba(255,200,80,0.6); }
#zona-list-body .zr b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
#zona-list-body .zr small { color: #9fb2c8; font-size: 10.5px; white-space: nowrap; }
#zona-del { width: 100%; margin-top: 6px; padding: 7px; border-radius: 8px; border: none; background: rgba(200,70,70,0.25); color: #ffb3b3; font-size: 12px; cursor: pointer; }
#zona-del:hover { background: rgba(200,70,70,0.4); }

#personas-panel { width: min(560px, calc(100vw - 240px)); }
#personas-body { padding: 4px 14px 14px; overflow-y: auto; }
.persona-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.persona-row .pr-info { flex: 1; min-width: 0; }
.persona-row .pr-info b { font-size: 13px; }
.persona-row .pr-info span { font-size: 11px; color: #9fb2c8; display: block; }
.persona-row button { padding: 5px 12px; border-radius: 7px; font-size: 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: #dfe7f2; cursor: pointer; }
.persona-edit { background: rgba(40,130,220,0.10); border: 1px solid rgba(120,190,255,0.25); border-radius: 10px; padding: 12px; margin: 6px 0; }
.persona-edit label { display: block; font-size: 11px; color: #9fb2c8; margin: 7px 0 2px; }
.persona-edit input, .persona-edit select { width: 100%; padding: 6px; border-radius: 7px; font-size: 12.5px; background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.14); }
.persona-edit .pe-actions { display: flex; gap: 6px; margin-top: 10px; }
.persona-edit .pe-actions button { flex: 1; padding: 7px; border-radius: 8px; font-size: 12px; border: none; cursor: pointer; }
.persona-edit .pe-save { background: #1389d4; color: #fff; font-weight: 700; }
.persona-edit .pe-sched { background: rgba(255,255,255,0.10); color: #dfe7f2; }
.persona-edit .pe-err { color: #ff9a97; font-size: 11px; margin-top: 6px; min-height: 14px; }

#edit-gallery .lib.upload { border: 1px dashed rgba(120,190,255,0.5); justify-content: center; }
#edit-gallery .lib.upload span { font-size: 18px; color: #7fb6e8; }
#edit-gallery .lib img.custom-thumb { object-fit: contain; background: rgba(255,255,255,0.06); }
.img-mode { display: flex; gap: 4px; margin: 4px 0; }
.img-mode button { flex: 1; padding: 4px; font-size: 11px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: #c4cedb; cursor: pointer; }
.img-mode button.on { background: rgba(40,130,220,0.35); color: #fff; border-color: rgba(120,190,255,0.55); }
#edit-active-tool { font-size: 10px; color: #7fb6e8; padding: 2px 4px 4px; text-transform: uppercase; letter-spacing: .5px; }

#size-ctl { padding: 2px 2px 6px; }
#size-ctl #size-label { font-size: 11px; color: #9fb2c8; display: block; margin-bottom: 4px; }
#size-ctl .size-row { display: flex; gap: 4px; }
#size-ctl .size-row button { flex: 1; padding: 5px 4px; font-size: 11px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: #dfe7f2; cursor: pointer; }
#size-ctl .size-row button:hover { background: rgba(40,130,220,0.25); }

/* botones Guardar/Descartar SIEMPRE visibles al editar (sticky al fondo del panel) */
#edit-panel .edit-actions { flex: 0 0 auto; display: flex; gap: 6px; background: rgba(11,14,20,0.96); padding: 8px 12px 10px; border-top: 1px solid rgba(255,255,255,0.10); border-radius: 0 0 12px 12px; }
#edit-log { max-height: 120px; overflow-y: auto; font-size: 10.5px; color: #9fb2c8; display: flex; flex-direction: column-reverse; gap: 1px; padding: 2px 0; }
#edit-log .le { padding: 2px 4px; border-radius: 5px; }
#edit-log .le:nth-child(odd) { background: rgba(255,255,255,0.03); }
#edit-log .le b { color: #7fb6e8; font-weight: 600; }

/* piso/muro SELECCIONADO bien visible (reporte Leonel: no se notaba) */
#edit-swatches .lib { border: 2px solid transparent; border-radius: 8px; position: relative; }
#edit-swatches .lib.on { border-color: #1389d4; box-shadow: 0 0 0 2px rgba(40,130,220,0.45); background: rgba(40,130,220,0.22); }
#edit-swatches .lib.on::after { content: '✓'; position: absolute; top: -6px; right: -4px; background: #1389d4; color: #fff; font-size: 10px; width: 15px; height: 15px; line-height: 15px; text-align: center; border-radius: 50%; }

#av-premade { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 6px 0; }
#av-premade .av-pm { background: rgba(255,255,255,0.05); border: 2px solid transparent; border-radius: 8px; padding: 2px; cursor: pointer; display: flex; justify-content: center; }
#av-premade .av-pm img { width: 34px; height: 68px; object-fit: contain; image-rendering: pixelated; }
#av-premade .av-pm:hover { background: rgba(255,255,255,0.12); }
#av-premade .av-pm.sel { border-color: #1389d4; background: rgba(40,130,220,0.25); }
/* generador de personajes del pack (14-sep): filas de miniaturas compuestas en canvas */
#av-gen .av-gen-vals { max-height: 152px; overflow-y: auto; padding-right: 4px; }
#av-gen .av-gen-cell { background: rgba(255,255,255,0.05); border: 2px solid transparent; border-radius: 8px; padding: 2px; cursor: pointer; display: flex; justify-content: center; }
#av-gen .av-gen-cell canvas { width: 32px; height: 64px; image-rendering: pixelated; }
#av-gen .av-gen-cell:hover { background: rgba(255,255,255,0.12); }
#av-gen .av-gen-cell.sel { border-color: #1389d4; background: rgba(40,130,220,0.25); }
#av-gen > .av-chip { margin: 4px 0 8px; }

/* cupo de llamadas (panel Personas) + aviso toast */
.calls-counter { font-size: 13px; padding: 7px 10px; margin-bottom: 8px; border-radius: 8px; background: rgba(40,130,220,0.15); border: 1px solid rgba(40,130,220,0.35); }
.calls-counter.over { background: rgba(220,150,40,0.15); border-color: rgba(220,150,40,0.45); }
.persona-row .pr-call.on { font-size: 12px; }
.pe-check { display: flex; align-items: center; gap: 7px; margin: 8px 0; font-size: 13px; cursor: pointer; }
.pe-check input { width: auto; margin: 0; }
.pe-creds { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,0.18); }
.pe-creds-t { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #9fb2c8; font-weight: 700; }
.pe-pwrow { display: flex; gap: 6px; align-items: stretch; }
.pe-pwrow input { flex: 1; }
.pe-pwrow .pe-gen { flex: 0 0 auto; padding: 6px 10px; border-radius: 7px; font-size: 12px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.10); color: #dfe7f2; cursor: pointer; }
/* ---- CIERRE DE TURNO (obligatorio): overlay modal, 10 min antes del fin ---- */
#cierre-overlay, #inicio-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(6, 9, 14, 0.8); backdrop-filter: blur(6px);
}
#cierre-box, #inicio-box {
  width: min(460px, 94vw); max-height: 90vh; overflow-y: auto;
  background: var(--card); border: 1px solid rgba(244, 120, 32, 0.5);
  border-radius: 16px; padding: 18px 20px 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
.cierre-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.cierre-head b { font-size: 16px; }
#cierre-box textarea {
  width: 100%; padding: 9px 12px; border-radius: 9px; border: 1px solid #30363d;
  background: #0d1117; color: var(--text); font-size: 13px; resize: vertical; font-family: inherit;
}
#cierre-box textarea:focus { outline: none; border-color: var(--primary); }
.cierre-actions { display: flex; gap: 8px; margin-top: 12px; }
#cierre-save, #inicio-save {
  flex: 1; padding: 11px; border: 0; border-radius: 10px;
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
}
#cierre-save:disabled, #inicio-save:disabled { opacity: .45; cursor: default; }
#cierre-cancel, #inicio-cancel {
  padding: 11px 16px; border: 1px solid #30363d; border-radius: 10px;
  background: transparent; color: var(--text); font-size: 13px; cursor: pointer;
}
#cierre-cancel:hover, #inicio-cancel:hover { border-color: var(--primary); }
#inicio-box { border-color: rgba(88, 166, 255, 0.5); }
#inicio-box .inicio-falla { width: 100%; margin-top: 6px; }

#toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: rgba(20,24,32,0.95); color: #fff; padding: 11px 18px; border-radius: 10px; font-size: 13px; max-width: 80vw; text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.12); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 9999; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }


/* Mapa de plazas: mismos estilos del control que en la webapp de la institucion, para
   que se vea IGUAL. El dibujo lo hace public/mapa-plazas.js (archivo compartido). */
#plazas-sync { padding: 4px 12px 0; font-size: 11.5px; color: #93a1b5; }
.leaflet-container path.leaflet-interactive:focus,
.leaflet-container path.leaflet-interactive:focus-visible { outline: none; }
.pl-ctrl { background: #161c26; border: 1px solid #2a3342; border-radius: 10px; padding: 8px;
  width: 232px; box-shadow: 0 6px 20px rgba(0,0,0,.35); font-size: 12.5px; color: #e8edf5; }
.pl-ctrl .pl-buscar { width: 100%; box-sizing: border-box; padding: 6px 8px; border-radius: 7px;
  border: 1px solid #2a3342; background: #0f1621; color: inherit; font-size: 12.5px; }
.pl-buscar-res { max-height: 190px; overflow: auto; }
.pl-buscar-res button { display: block; width: 100%; text-align: left; background: none; border: 0;
  color: inherit; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 12.5px; }
.pl-buscar-res button:hover { background: rgba(255,255,255,.07); }
.pl-buscar-res i { color: #e6a23c; font-style: normal; font-size: 11px; }
.pl-nada { padding: 6px; color: #93a1b5; font-size: 11.5px; }
.pl-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.pl-chip { font-size: 11.5px; color: #93a1b5; background: rgba(255,255,255,.05);
  border: 1px solid #2a3342; border-radius: 20px; padding: 3px 9px; }
.pl-chip-b { cursor: pointer; color: #e6a23c; border-color: rgba(230,162,60,.45); }
.pl-leyenda { margin-top: 8px; }
.pl-leyenda summary { cursor: pointer; color: #93a1b5; font-size: 11.5px; }
.pl-leyenda div { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 11.5px; }
.pl-mx { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.pl-rombo { width: 10px; height: 10px; transform: rotate(45deg); border: 2px dashed #fff; display: inline-block; flex: 0 0 auto; }
.pl-sep { color: #93a1b5; border-top: 1px solid #2a3342; padding-top: 6px; margin-top: 7px; display: block !important; }
.pl-lbl { font-size: 11.5px; }

.pl-ctrl { position: relative; }
.pl-ocultar { position: absolute; top: 4px; right: 4px; background: none; border: 0; color: #93a1b5;
  cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; }
.pl-ocultar:hover { color: #e8edf5; }
.pl-ctrl .pl-buscar { padding-right: 26px; }
.pl-abrir button { background: #161c26; border: 1px solid #2a3342; color: #e8edf5; border-radius: 8px;
  padding: 6px 12px; font-size: 12.5px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.35); }

/* Cuadro de diálogo del agente IA — estilo consola: el texto se ESCRIBE y se cierra al
   tocarlo. Antes era un párrafo fijo flotando sobre el mapa: tapaba la sala y los TVs, y a
   los dos minutos ya nadie lo leía (Leonel, 12-sep). Va por ENCIMA de la llamada, incluso en
   pantalla completa, porque es lo que el agente "dice" al entrar. */
#dialogo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3500;
  display: flex; justify-content: center; padding: 0 12px 16px;
  pointer-events: none;
}
#dialogo .dlg-caja {
  pointer-events: auto; width: min(760px, 96vw); cursor: pointer;
  background: rgba(7, 18, 14, 0.95); border: 2px solid rgba(43, 217, 143, 0.65);
  border-radius: 14px; padding: 10px 14px 8px; color: #eafff4;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); animation: dlg-in 0.22s ease-out;
}
.dlg-nombre { display: flex; align-items: center; gap: 7px; font-size: 12px; margin-bottom: 6px; }
#dlg-quien { font-weight: 700; color: #9ff0c8; }
#dlg-para { color: rgba(234, 255, 244, 0.55); }
.dlg-dot { width: 8px; height: 8px; border-radius: 50%; background: #2bd98f; flex: none; animation: ca-pulse 1.6s infinite; }
#dlg-voz, #dlg-x {
  background: none; border: 1px solid rgba(234, 255, 244, 0.22); color: rgba(234, 255, 244, 0.75);
  border-radius: 7px; font-size: 11px; line-height: 1; padding: 4px 7px; cursor: pointer;
}
#dlg-voz { margin-left: auto; }
#dlg-voz.off { opacity: 0.45; text-decoration: line-through; }
#dlg-voz:hover, #dlg-x:hover { color: #eafff4; border-color: rgba(43, 217, 143, 0.6); }
#dlg-texto { margin: 0; font-size: 16px; line-height: 1.5; min-height: 3em; }
#dlg-texto .cursor { color: #2bd98f; animation: ca-pulse 0.7s infinite; }
#dlg-pie { text-align: right; font-size: 11px; color: rgba(234, 255, 244, 0.45); margin-top: 4px; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ca-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* panel Objeto seleccionado (13-sep) */
#obj-config { padding: 2px 0 8px; }
#obj-title { font-size: 12.5px; font-weight: 600; color: #ffd24a; margin: 2px 0 6px; }
#obj-config .obj-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
#obj-config .obj-row button { font-size: 11px; padding: 4px 7px; border-radius: 7px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #dfe7f2; cursor: pointer; }
#obj-config .obj-row button:hover { border-color: var(--primary); }
#obj-variants { display: flex; flex-wrap: wrap; gap: 4px; }
#obj-variants .vr { width: 46px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 2px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.05); cursor: pointer; }
#obj-variants .vr img { width: 40px; height: 40px; image-rendering: pixelated; }
#obj-variants .vr span { font-size: 9px; color: #9fb2c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42px; }
#obj-variants .vr:hover { border-color: rgba(120,190,255,0.5); }
#obj-variants .vr.on { border-color: rgba(255,200,80,0.8); background: rgba(255,200,80,0.14); }
#obj-text-row input, #obj-size-row input { width: 100%; margin: 4px 0; padding: 6px; border-radius: 7px; font-size: 12px; background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.14); }
#obj-size-row { display: flex; gap: 6px; }
#obj-size-row label { font-size: 11px; color: #9fb2c8; flex: 1; }
#obj-size-row input { width: 100%; }
#edit-search { width: 100%; margin: 2px 0 6px; padding: 6px 8px; border-radius: 7px; font-size: 12px; background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.14); }
#edit-gallery .edit-empty { font-size: 11.5px; color: #9fb2c8; padding: 6px 2px; }

/* objeto interactivo (E) — modal con nota o sitio embebido */
#objeto-modal { position: fixed; inset: 0; z-index: 3600; background: rgba(4,8,14,0.62); display: flex; align-items: center; justify-content: center; padding: 16px; }
#objeto-modal .om-caja { width: min(1100px, 96vw); max-height: 92vh; display: flex; flex-direction: column; background: #101823; border: 1px solid rgba(120,190,255,0.35); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,0.6); overflow: hidden; }
#objeto-modal .om-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 13px; color: #dfe7f2; }
#om-titulo { font-weight: 700; color: #8fc7ff; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#om-abrir { font-size: 11.5px; color: #9fd2ff; }
#om-x { background: none; border: 1px solid rgba(255,255,255,0.18); color: #dfe7f2; border-radius: 7px; padding: 3px 8px; cursor: pointer; }
#om-nota { margin: 0; padding: 16px 18px; font-size: 15px; line-height: 1.55; color: #eef3f8; white-space: pre-wrap; max-height: 60vh; overflow: auto; }
#om-frame { width: 100%; height: min(78vh, 760px); border: 0; background: #fff; }
#obj-adv { margin-top: 6px; }
#obj-adv summary { font-size: 11px; color: #9fb2c8; cursor: pointer; margin-bottom: 4px; }
#obj-adv input, #obj-adv textarea, #obj-adv select { width: 100%; margin: 3px 0; padding: 6px; border-radius: 7px; font-size: 12px; background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.14); font-family: inherit; }
#obj-adv .zona-cfg-row select { width: auto; flex: 1; }
#obj-adv .obj-check { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #dfe7f2; margin-top: 4px; }
#obj-adv .obj-check input { width: auto; margin: 0; }
#obj-stairs-row label { font-size: 11px; color: #9fb2c8; display: flex; align-items: center; gap: 6px; }
#obj-stairs-row select { flex: 1; margin: 3px 0; padding: 6px; border-radius: 7px; font-size: 12px; background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.14); }

#zona-addpart, #zona-delpart { padding: 5px 8px; border-radius: 7px; font-size: 11px; background: rgba(40,130,220,0.22); border: 1px solid rgba(120,190,255,0.45); color: #dfe7f2; cursor: pointer; }
#zona-addpart.on { background: rgba(255,200,80,0.25); border-color: rgba(255,200,80,0.8); }
#zona-delpart { background: rgba(220,80,80,0.18); border-color: rgba(255,120,120,0.45); }

/* personas: lista de quién está, reacciones, seguir */
#online-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
#online-list .on-row { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 5px 8px; border-radius: 7px; background: transparent; border: 1px solid transparent; color: #dfe7f2; cursor: pointer; font-size: 12px; }
#online-list .on-row:hover { background: rgba(255,255,255,0.06); border-color: rgba(120,190,255,0.35); }
#online-list .on-row .dot2 { width: 7px; height: 7px; border-radius: 50%; background: #2bd98f; flex: none; }
#online-list .on-row b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
#online-list .on-row small { color: #9fb2c8; font-size: 10.5px; white-space: nowrap; }
#online-n { color: #9fb2c8; font-weight: 500; }
#emote-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 62px; z-index: 1200; display: flex; gap: 4px; background: rgba(10,14,22,0.72); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 4px 6px; }
#emote-bar button { background: none; border: 0; font-size: 18px; line-height: 1; padding: 3px 6px; border-radius: 999px; cursor: pointer; }
#emote-bar button:hover { background: rgba(255,255,255,0.14); transform: scale(1.15); }
#follow-chip { position: fixed; left: 50%; transform: translateX(-50%); bottom: 104px; z-index: 1200; background: rgba(255,210,74,0.92); color: #1a1400; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; }
.person-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.person-actions button { padding: 6px 10px; border-radius: 8px; font-size: 12px; background: rgba(40,130,220,0.22); border: 1px solid rgba(120,190,255,0.45); color: #dfe7f2; cursor: pointer; }
.person-actions button:hover { background: rgba(40,130,220,0.4); }
#edit-floor-mode, #edit-wall-mode { display: flex; gap: 4px; margin: 2px 0 6px; flex: 1 1 100%; width: 100%; }
#edit-floor-mode button, #edit-wall-mode button { flex: 1; font-size: 11px; padding: 4px 6px; border-radius: 7px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #dfe7f2; cursor: pointer; }
#edit-floor-mode button.on, #edit-wall-mode button.on { background: rgba(40,130,220,0.35); border-color: rgba(120,190,255,0.6); }

/* ---- estado con color (13-sep): modo Disponible / Ocupado / Ausente ---- */
#modo-bar { display: flex; gap: 4px; }
#modo-bar button {
  border: 1px solid rgba(255,255,255,0.10); background: rgba(11,15,22,0.74); color: var(--dim);
  border-radius: 999px; padding: 7px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer;
  backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 8px 28px rgba(0,0,0,0.4); white-space: nowrap;
}
#modo-bar button.m-disponible { --c: #3fb950; } #modo-bar button.m-ocupado { --c: #f85149; } #modo-bar button.m-ausente { --c: #d29922; }
#modo-bar button::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--c); opacity: .8; }
#modo-bar button:hover { color: var(--text); border-color: var(--c); }
#modo-bar button.on { color: var(--text); border-color: var(--c); box-shadow: 0 0 0 1px var(--c) inset, 0 8px 28px rgba(0,0,0,0.4); }
#avisos-btn.on { color: #7ee2b8; }
@media (max-width: 900px) { #modo-bar button { padding: 7px 8px; font-size: 0; } #modo-bar button::before { margin-right: 0; width: 10px; height: 10px; } }

/* ---- minimapa (13-sep) ---- */
#minimap {
  position: absolute; right: 12px; bottom: 14px; width: 220px; height: 132px; z-index: 3;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; background: rgba(8,11,16,0.9);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45); cursor: crosshair; image-rendering: auto;
}
#feed { bottom: 158px; }   /* la actividad se apila sobre el minimapa */
#ahorro-btn.on { color: #d29922; }
@media (max-width: 900px) { #minimap { display: none; } #feed { bottom: 14px; } }

/* ---- lista de salas: ordenar (13-sep) ---- */
.zr { position: relative; }
.zr .zr-ord { position: absolute; right: 6px; top: 6px; display: flex; gap: 2px; }
.zr .zr-ord button { border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: var(--text); border-radius: 5px; width: 20px; height: 18px; font-size: 10px; line-height: 1; padding: 0; cursor: pointer; }
.zr .zr-ord button:hover { background: rgba(255,255,255,0.16); }
.zr .zr-ord button:disabled { opacity: .3; cursor: default; }
/* vecinas y paso compartido */
#zona-vecinas { margin-top: 6px; font-size: 11.5px; }
#zona-vecinas .vz { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,0.06); }
#zona-vecinas .vz b { font-weight: 600; }
#zona-vecinas .vz .paso-ok { color: #7ee2b8; }
#zona-vecinas .vz button { border: 1px solid rgba(255,150,60,0.5); background: rgba(255,150,60,0.12); color: #ffb070; border-radius: 6px; padding: 3px 8px; font-size: 11px; cursor: pointer; }