/* oficina.css — la Oficina (modo de la compu). Un solo look oscuro, como pantalla de juego.
   Layout: barra arriba · el mundo al centro (canvas pixel + capa de textos) con el panel a la derecha · menú de abajo. Todo va dentro de #of con clases o-*. */
#of {
  --o-void: #0B0D10; --o-bg: #0F1215; --o-surface: #161A1F; --o-sunk: #11151A; --o-ink: #ECEFEA; --o-muted: #98A1A9; --o-line: #283037;
  --o-accent: #8098FF; --o-accent-ink: #0C1122; --o-hi: #F0C440; --o-good: #52C483; --o-warn: #E6A646; --o-crit: #F2786A;
  --o-good-bg: #15291E; --o-warn-bg: #2C2213; --o-crit-bg: #2E1714;
  --f-pixel: "Silkscreen", "Courier New", monospace;
  color-scheme: dark; position: fixed; inset: 0; z-index: 4; display: grid; grid-template-rows: auto 1fr auto;
  background: var(--o-void); color: var(--o-ink); font-family: var(--f-body); font-size: 15px; line-height: 1.45;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.modo-oficina { background: #0B0D10; overflow: hidden }
body.modo-oficina::before { background: #0B0D10 }
#of button, #of input, #of select, #of textarea { font: inherit; color: inherit }
#of :focus-visible { outline: 2px solid var(--o-accent); outline-offset: 2px }

/* Barra de arriba */
.o-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--o-bg); border-bottom: 1px solid var(--o-line); padding-block: 9px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.o-brand { font-family: var(--f-pixel); font-weight: 700; font-size: 16px; letter-spacing: .04em; white-space: nowrap }
.o-sala { font-family: var(--f-display); font-weight: 600; font-size: 18px; color: var(--o-muted); white-space: nowrap }
.o-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--o-line); background: var(--o-surface); border-radius: 99px; padding: 4px 12px; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer }
.o-chip b { font-family: var(--f-display); font-size: 18px; font-weight: 700; line-height: 1 }
.o-chip:hover { border-color: var(--o-muted) }
.o-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--o-muted) }
.o-sync { color: var(--o-muted); font-size: 13px; margin-left: auto }

/* Mundo */
#o-stage { position: relative; overflow: hidden; background: var(--cielo, #9CC8EE) }   /* el cielo lo pone ciudad.js según la hora; la ciudad va en el canvas */
#o-world { position: absolute; left: 0; top: 0 }
#o-cv { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges }
#o-ov { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none }
.o-w { position: absolute; white-space: nowrap; line-height: 1 }
.o-wr { transform-origin: 0 0; transform: skewY(26.565deg) }
.o-wl { transform-origin: 0 0; transform: skewY(-26.565deg) }
.o-sign { font-family: var(--f-pixel); font-size: 8px; color: #ECEFEA; background: #1F232A; padding: 3px 5px; border-radius: 1px; border: 1px solid #0B0D10; transform: translate(-50%, -100%) }
.o-badge { font-family: var(--f-pixel); font-size: 8px; color: #1A1D21; background: #F0C440; padding: 2px 4px; border-radius: 1px; border: 1px solid #1F1B26; transform: translate(-50%, -100%) }
.o-tag { font-family: var(--f-pixel); font-size: 8px; color: #fff; background: rgba(12,14,18,.82); padding: 3px 5px; border-radius: 2px; transform: translate(-50%, -100%); z-index: 5 }
.o-tag.o-me { background: #F0C440; color: #1A1500; font-weight: 700 }
.o-st { font-family: var(--f-pixel); font-weight: 700; font-size: 16px; line-height: 1; transform: translate(-50%, -100%); padding: 1px 5px; border-radius: 2px; color: #fff; border: 1px solid #1F1B26 }
.o-st.fallo { background: #D23A2E } .o-st.aviso { background: #D18A1E }
.o-zz { font-family: var(--f-pixel); font-size: 10px; color: #CFE0FF; transform: translate(-50%, -100%); animation: o-zz 2.4s ease-in-out infinite }
@keyframes o-zz { 0%,100% { opacity: .35; margin-top: 0 } 50% { opacity: 1; margin-top: -5px } }
.o-bubble { position: absolute; transform: translate(-50%, -100%); background: #FFFFFF; color: #14181C; font-family: var(--f-display); font-weight: 500; font-size: 13px; line-height: 1.15; padding: 4px 7px; border-radius: 3px; border: 1px solid #1F1B26; width: max-content; max-width: 210px; white-space: normal; box-shadow: 0 2px 0 rgba(0,0,0,.35) }
.o-bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -5px; border: 5px solid transparent; border-top-color: #FFFFFF; border-bottom: 0 }
.o-area { font-family: var(--f-pixel); font-size: 8px; color: rgba(20,24,28,.55); letter-spacing: .08em; transform: translateY(-100%) }
.o-area.o-claro { color: rgba(236,239,234,.55) }
.o-zoom { display: inline-flex; gap: 4px }
.o-zoom button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--o-line); background: var(--o-surface); font-size: 18px; line-height: 1; cursor: pointer }
.o-hint { position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); bottom: 10px; color: #DCE3E8; background: rgba(11,13,16,.62); padding: 3px 9px; border-radius: 99px; font-size: 13px; pointer-events: none }
@media (prefers-reduced-motion: reduce) { .o-zz { animation: none; opacity: .8 } }

/* Menú de abajo */
#o-bar { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; background: var(--o-bg); border-top: 1px solid var(--o-line); padding-block: 6px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.o-nav { position: relative; display: grid; justify-items: center; gap: 3px; min-width: 64px; padding: 6px 8px 5px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--o-muted); cursor: pointer }
.o-nav svg { fill: currentColor }
.o-nav span { font-size: 12px; font-weight: 600; letter-spacing: .02em }
.o-nav em { font-style: normal; font-size: 11px; color: var(--o-hi); font-family: var(--f-display); font-weight: 600 }
.o-nav:hover { color: var(--o-ink); background: var(--o-surface) }
.o-nav[aria-pressed="true"] { color: var(--o-ink); background: var(--o-surface); border-color: var(--o-line) }
.o-badge-n { position: absolute; top: 2px; right: 10px; background: var(--o-crit); color: #fff; font-style: normal; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; display: grid; place-content: center }

/* Panel */
#o-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--o-surface); border-left: 1px solid var(--o-line); display: grid; grid-template-rows: auto 1fr; box-shadow: -12px 0 32px rgba(0,0,0,.35); z-index: 3 }
.o-ph { display: flex; justify-content: space-between; align-items: start; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--o-line) }
.o-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--o-muted) }
.o-ph h2 { font-family: var(--f-display); font-weight: 700; font-size: 26px; line-height: 1.05; margin: 2px 0 0; text-wrap: balance; color: var(--o-ink); text-transform: none; letter-spacing: 0 }
.o-x, .o-icon { width: 36px; height: 36px; flex: none; border-radius: 99px; border: 1px solid var(--o-line); background: var(--o-sunk); font-size: 18px; line-height: 1; cursor: pointer }
.o-icon:disabled { opacity: .35; cursor: default }
#o-body { overflow-y: auto; padding: 14px 18px 22px; display: grid; gap: 14px; align-content: start }
#o-body h3 { font-family: var(--f-display); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--o-muted); margin: 6px 0 -6px }
.o-muted { color: var(--o-muted) } .o-small { font-size: 13px } .o-meta { font-size: 12px; color: var(--o-muted) }
.o-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap } .o-between { justify-content: space-between }
.o-stack { display: grid; gap: 8px }
.o-quote { background: var(--o-sunk); border: 1px solid var(--o-line); border-radius: 8px; padding: 10px 12px; font-size: 14px }
.o-pill { display: inline-block; border-radius: 99px; padding: 2px 9px; font-size: 12px; font-weight: 600 }
.o-pill.ok { background: var(--o-good-bg); color: var(--o-good) } .o-pill.warn { background: var(--o-warn-bg); color: var(--o-warn) } .o-pill.crit { background: var(--o-crit-bg); color: var(--o-crit) }
.o-pill.off { background: var(--o-sunk); color: var(--o-muted); border: 1px solid var(--o-line) } .o-pill.hi { background: var(--o-hi); color: #1A1500 }
.o-list { display: grid }
.o-li { padding: 10px 0; border-top: 1px solid var(--o-line); display: grid; gap: 4px; min-width: 0; text-align: left }
.o-li:first-child { border-top: 0; padding-top: 0 }
.o-click { background: none; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; padding-inline: 0 }
.o-click:hover b { color: var(--o-accent) }
.o-kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 14px; align-items: center }
.o-kv b { font-family: var(--f-display); font-size: 18px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums }
.o-big { font-family: var(--f-display); font-weight: 700; font-size: 52px; line-height: .9 }
.o-meter { height: 10px; background: var(--o-sunk); border: 1px solid var(--o-line); border-radius: 99px; overflow: hidden }
.o-meter i { display: block; height: 100% }
.o-empty { color: var(--o-muted); font-size: 14px; padding: 12px; border: 1px dashed var(--o-line); border-radius: 8px; background: var(--o-sunk) }
.o-btn { border: 1px solid var(--o-line); background: var(--o-sunk); border-radius: 8px; padding: 8px 13px; font-weight: 600; font-size: 14px; cursor: pointer }
.o-btn.pri { background: var(--o-accent); border-color: var(--o-accent); color: var(--o-accent-ink) }
.o-btn.bad { color: var(--o-crit) }
.o-btn:disabled { opacity: .45; cursor: default }
#of .o-in { width: 100%; background: var(--o-sunk); border: 1px solid var(--o-line); border-radius: 8px; padding: 9px 11px; min-width: 0 }
#of textarea.o-in { min-height: 64px; resize: vertical }
#of select.o-in { width: auto; flex: 1 }
.o-f { display: grid; gap: 4px; font-size: 13px; color: var(--o-muted); font-weight: 500; flex: 1; min-width: 0 }
.o-hook { font-family: var(--f-display); font-weight: 600; font-size: 21px; line-height: 1.15; text-wrap: balance }
.o-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--o-line); border-radius: 8px; overflow: hidden }
.o-seg button { background: var(--o-sunk); border: 0; border-right: 1px solid var(--o-line); padding: 10px 6px; font-weight: 600; font-size: 14px; cursor: pointer }
.o-seg button:last-child { border-right: 0 }
.o-seg button[aria-pressed="true"] { background: var(--o-accent); color: var(--o-accent-ink) }
.o-seg button:disabled { cursor: default }
#of details > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 8px }
#of details > summary::-webkit-details-marker { display: none }
#of details > summary::after { content: "+"; color: var(--o-muted) } #of details[open] > summary::after { content: "–" }
.o-md { min-width: 0; overflow-wrap: anywhere; font-size: 14px }
.o-md h1, .o-md h2, .o-md h3 { font-family: var(--f-display); color: var(--o-ink); margin: 14px 0 4px; line-height: 1.15; text-transform: none; letter-spacing: 0 }
.o-md h1 { font-size: 21px } .o-md h2 { font-size: 18px } .o-md h3 { font-size: 16px }
.o-md p { margin: 6px 0 } .o-md ul, .o-md ol { margin: 6px 0; padding-left: 20px } .o-md li.task { list-style: none; margin-left: -18px }
.o-md blockquote { margin: 8px 0; padding: 8px 10px; background: var(--o-sunk); border-radius: 6px }
.o-md code { background: var(--o-sunk); border: 1px solid var(--o-line); padding: 0 4px; border-radius: 4px; font-size: .92em }
.o-md .tbl { overflow-x: auto } .o-md table { border-collapse: collapse; font-size: 13px } .o-md td, .o-md th { border: 1px solid var(--o-line); padding: 4px 6px }
.o-chart svg { width: 100%; height: auto; display: block }
.o-chart { --line: #283037; --muted: #98A1A9; --accent: #8098FF; --c-ig: #E7739F; --c-tt: #4CC3CD; --c-yt: #F07A5E }
.o-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--o-muted) } .o-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px }
.o-legend { --c-ig: #E7739F; --c-tt: #4CC3CD; --c-yt: #F07A5E }
.o-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.o-kpis div { background: var(--o-sunk); border: 1px solid var(--o-line); border-radius: 10px; padding: 10px 12px; display: grid }
.o-kpis span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--o-muted); font-weight: 600 }
.o-kpis b { font-family: var(--f-display); font-size: 28px; font-weight: 700; line-height: 1.05 } .o-kpis em { font-style: normal; font-size: 12px; color: var(--o-muted) }
.o-hito { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--o-line) }
.o-hito:first-child { border-top: 0 }
.o-ic { width: 22px; height: 22px; border-radius: 6px; display: grid; place-content: center; font-family: var(--f-pixel); font-size: 11px; background: var(--o-sunk); border: 1px dashed var(--o-line); color: var(--o-muted) }
.o-hito.on .o-ic { background: var(--o-hi); border: 0; color: #1A1500 }
.o-map { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.o-room { text-align: left; display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--o-line); background: var(--o-sunk); cursor: pointer; min-width: 0 }
.o-room b { font-family: var(--f-display); font-size: 16px; font-weight: 600 } .o-room span { font-size: 12px; color: var(--o-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-room.aqui { border-color: var(--o-hi) } .o-room:hover { border-color: var(--o-muted) }
.o-coin { font-family: var(--f-display); font-weight: 700; font-size: 16px; color: var(--o-hi) } .o-coin::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 99px; background: var(--o-hi); margin-right: 5px; box-shadow: inset 0 0 0 2px #B88E1E }
.o-mis { display: flex; gap: 10px; align-items: center }
.o-check { width: 26px; height: 26px; flex: none; border-radius: 6px; border: 2px solid var(--o-line); background: var(--o-sunk); display: grid; place-content: center; font-weight: 700; color: #1A1500; cursor: pointer; padding: 0 }
.o-mis.ok .o-check { background: var(--o-good); border-color: var(--o-good) }
.o-mis.ok b { text-decoration: line-through; color: var(--o-muted) }
.o-chat { display: grid; gap: 8px }
.o-msg { padding: 8px 11px; border-radius: 10px; font-size: 14px; max-width: 90%; overflow-wrap: anywhere }
.o-msg p { margin: 0 0 6px } .o-msg p:last-child { margin: 0 } .o-msg ul, .o-msg ol { margin: 4px 0; padding-left: 18px }
.o-msg.me { justify-self: end; background: var(--o-accent); color: var(--o-accent-ink); white-space: pre-wrap }
.o-msg.ag { justify-self: start; background: var(--o-sunk); border: 1px solid var(--o-line) }
.o-msg.err { justify-self: start; color: var(--o-crit); padding: 0 2px; font-size: 13px }

/* Botón para cambiar de modo en el modo pro (solo en la compu) */
.pb-modo { display: none; border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 4px 12px; font-weight: 600; font-size: 13px; color: var(--ink) }
@media (min-width: 900px) { .pb-modo { display: inline-block } }
/* Retrato del muñeco en los paneles */
#of .o-retrato { display: flex; justify-content: center; align-items: end; gap: 6px; padding: 8px 0 4px; background: rgba(255,255,255,.04); border-radius: 10px; margin-bottom: 4px }
#of .o-retrato canvas { image-rendering: pixelated; display: block }
#of .o-ret-chico { padding: 2px 4px; margin: 0; flex: none }
#of .o-col { display: flex; flex-direction: column; gap: 4px; align-items: start }

/* Panel ancho (catálogo, vestidor, inventario) */
#of #o-panel.o-ancho { width: min(640px, 100%) }
#of .o-btn-chico { padding: 4px 10px; font-size: 13px }
#of .o-select { width: 100%; background: var(--o-sunk); border: 1px solid var(--o-line); border-radius: 8px; padding: 7px 9px }

/* Modo construir: barra arriba del mundo */
#o-build { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100% - 32px); background: rgba(22,26,31,.94); border: 1px solid var(--o-line); border-radius: 12px; padding: 8px 10px 8px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.4) }
#o-build b { font-family: var(--f-display); font-size: 17px; font-weight: 700 }
#o-build .o-muted { color: var(--o-muted); font-size: 13px; margin-right: 4px }
#o-build .o-btn { padding: 6px 11px; font-size: 13px }

/* Catálogo e inventario: pestañas, grilla de cosas y la elegida arriba */
#of .o-cat-tabs { display: flex; flex-wrap: wrap; gap: 6px }
#of .o-chip-cat { border: 1px solid var(--o-line); background: var(--o-sunk); border-radius: 99px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer }
#of .o-chip-cat.on { background: var(--o-hi); border-color: var(--o-hi); color: #1A1500 }
#of .o-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px }
#of .o-card { position: relative; display: grid; justify-items: center; gap: 3px; padding: 8px 6px 9px; background: var(--o-sunk); border: 1px solid var(--o-line); border-radius: 10px; cursor: pointer; text-align: center; min-width: 0 }
#of .o-card:hover { border-color: var(--o-muted) }
#of .o-card.on { border-color: var(--o-hi); box-shadow: inset 0 0 0 1px var(--o-hi) }
#of .o-card b { font-size: 12.5px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere }
#of .o-card .o-coin { font-size: 14px }
#of .o-card .o-meta { font-size: 12px; color: var(--o-muted) }
#of .o-lock { position: absolute; top: 6px; right: 6px; font-style: normal; font-size: 10.5px; font-weight: 700; background: var(--o-line); color: var(--o-muted); border-radius: 6px; padding: 1px 5px }
#of .o-lock.ok { background: var(--o-good-bg); color: var(--o-good) }
#of .o-thumb { display: grid; place-items: center; width: 64px; height: 64px; background: radial-gradient(circle at 50% 60%, #232A33, transparent 70%); border-radius: 8px }
#of .o-thumb canvas { image-rendering: pixelated; display: block }
#of .o-thumb.grande { width: 112px; height: 112px; flex: none }
#of .o-cat-sel { display: flex; gap: 14px; align-items: center; background: var(--o-sunk); border: 1px solid var(--o-line); border-radius: 12px; padding: 10px 12px }
#of .o-cat-nombre { font-family: var(--f-display); font-size: 22px; font-weight: 700; line-height: 1.1 }

/* Vestidor */
#of .o-vest { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: start }
#of .o-vest-izq { display: grid; gap: 8px; position: sticky; top: 0 }
#of .o-vest-prev { min-height: 250px; align-items: center }
#of .o-vest-der { display: grid; gap: 8px; min-width: 0 }
#of .o-vest-der h3 { margin: 6px 0 0 }
#of .o-vest-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px }
#of .o-vest-op { position: relative; display: grid; justify-items: center; gap: 2px; padding: 5px 3px 6px; background: var(--o-sunk); border: 1px solid var(--o-line); border-radius: 9px; cursor: pointer; overflow: hidden }
#of .o-vest-op span { height: 56px; overflow: hidden; display: block }
#of .o-vest-op canvas { image-rendering: pixelated; display: block; margin-top: -4px }
#of .o-vest-op i { font-style: normal; font-size: 11.5px; font-weight: 600 }
#of .o-vest-op.on { border-color: var(--o-hi); box-shadow: inset 0 0 0 1px var(--o-hi) }
#of .o-vest-op[data-bloq] { opacity: .55 }
#of .o-vest-op em { position: absolute; top: 3px; right: 3px; font-style: normal; font-size: 9.5px; font-weight: 700; background: var(--o-hi); color: #1A1500; border-radius: 5px; padding: 0 4px }
#of .o-swatches { display: flex; flex-wrap: wrap; gap: 5px }
#of .o-sw { width: 24px; height: 24px; border-radius: 7px; border: 2px solid rgba(255,255,255,.12); cursor: pointer; padding: 0 }
#of .o-sw.on { border-color: var(--o-ink); box-shadow: 0 0 0 2px var(--o-bg) inset }
#of .o-check-l { display: flex; align-items: center; gap: 8px; font-size: 14px }
@media (max-width: 1100px) { #of .o-vest { grid-template-columns: 1fr } #of .o-vest-izq { position: static } }
#of .o-input { width: 100%; background: var(--o-sunk); border: 1px solid var(--o-line); border-radius: 8px; padding: 8px 10px; resize: vertical }

/* Ajustes y onboarding */
#of .o-col { display: flex; flex-direction: column; min-width: 0 }
#of .o-aj-sec { display: grid; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--o-line) }
#of .o-aj-sec h3 { margin: 0 }
#of .o-aj-sec p, #of #o-body > p { margin: -4px 0 0 }
#of .o-aj-sec h4, #of #o-body > h4 { margin: 6px 0 0; font-size: 14px }
#of .o-aj-fila { display: grid; grid-template-columns: 1.4fr 1fr 70px auto; gap: 6px; align-items: center }
#of .o-aj-fila:has(.o-aj-num) { grid-template-columns: 110px 1.3fr 1fr auto }
#of .o-aj-pie { position: sticky; bottom: -22px; background: var(--o-surface); padding: 12px 0; margin-top: 4px }
#of .o-aj-hola { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center }
#of .o-aj-hola p { margin: 0 }
#of .o-pasos { display: flex; gap: 6px }
#of .o-pasos i { flex: 1; height: 4px; border-radius: 9px; background: var(--o-line) }
#of .o-pasos i.on { background: var(--o-hi) }
#of .o-aj-sec > .o-btn, #of #o-body > .o-btn-chico { justify-self: start }

/* Negocio: pipeline, finanzas, marcas */
#of .o-kpis3 { grid-template-columns: repeat(3, 1fr) }
#of .o-kpis3 b { font-size: 22px; overflow-wrap: anywhere }
#of .o-ok { color: var(--o-good) } #of .o-mal { color: var(--o-crit) }
#of .o-kanban { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: start }
#of .o-kcol { display: grid; gap: 6px; background: var(--o-sunk); border: 1px solid var(--o-line); border-radius: 10px; padding: 7px 6px; min-width: 0 }
#of .o-kcol h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; display: flex; justify-content: space-between }
#of .o-kcol h4 i { font-style: normal; color: var(--o-muted) }
#of .o-kcard { background: var(--o-surface); border: 1px solid var(--o-line); border-radius: 8px; display: grid; min-width: 0 }
#of .o-kcard.hoy { border-color: var(--o-hi) }
#of .o-kcard.tarde { border-color: var(--o-crit); box-shadow: inset 3px 0 0 var(--o-crit) }
#of .o-kc-ir { background: none; border: 0; text-align: left; padding: 6px 7px 2px; display: grid; gap: 2px; cursor: pointer; min-width: 0 }
#of .o-kc-ir b { font-size: 12px } #of .o-kc-ir span { font-size: 11.5px; color: var(--o-muted); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
#of .o-kc-bt { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 2px 4px 5px }
#of .o-kc-bt .o-icon { width: 28px; height: 28px; font-size: 16px }
#of .o-kc-bt .o-btn-chico { padding: 3px 7px; font-size: 11.5px }
#of .o-barras { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; height: 96px; align-items: end }
#of .o-barras > div { display: grid; grid-template-rows: 1fr auto; height: 100%; justify-items: center }
#of .o-bar2 { display: flex; gap: 3px; align-items: end; height: 100% }
#of .o-bar2 i { width: 12px; border-radius: 3px 3px 0 0; min-height: 2px }
#of .o-bar2 i.ing { background: var(--o-good) } #of .o-bar2 i.gas { background: var(--o-crit) }
#of .o-barras em { font-style: normal; font-size: 11px; color: var(--o-muted) }
#of .o-fin-f { background: var(--o-sunk); border: 1px solid var(--o-line); border-radius: 10px; padding: 10px }
#of details > .o-fin-f { margin-top: 8px }
#of .o-kit { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center }
#of .o-kit .o-retrato { min-height: 120px }
#of .o-kit-nombre { font-family: var(--f-display); font-size: 22px }
@media (max-width: 1100px) { #of .o-kanban { grid-template-columns: repeat(3, minmax(0, 1fr)) } }


/* Hoja (celular): solo el panel, a pantalla completa */
body.modo-hoja #o-world, body.modo-hoja .o-hint, body.modo-hoja #o-build, body.modo-hoja #o-bar, body.modo-hoja .o-zoom, body.modo-hoja #o-c-animo, body.modo-hoja .o-sala, body.modo-hoja #o-c-vivo { display: none }
body.modo-hoja #of { grid-template-rows: auto 1fr }
body.modo-hoja #o-stage { background: var(--o-surface) }
body.modo-hoja #o-panel, body.modo-hoja #o-panel.o-ancho { width: 100%; border-left: 0; box-shadow: none }
@media (max-width: 600px) { #of .o-kanban { grid-template-columns: repeat(2, minmax(0, 1fr)) } #of .o-aj-fila { grid-template-columns: 1fr 1fr } #of .o-aj-hola, #of .o-kit { grid-template-columns: 1fr } }

/* Equipo en vivo y fichas */
.o-st.vivo { background: #1E8E4A; font-size: 7px; padding: 3px 4px; letter-spacing: .06em }
#of .o-dot-vivo { background: #52C483; box-shadow: 0 0 0 3px rgba(82,196,131,.25) }
#of .o-vivo { color: var(--o-good); font-weight: 700; font-size: 13px }
#of .o-ficha { display: grid; gap: 6px }
@media (prefers-reduced-motion: no-preference) { #of .o-dot-vivo { animation: o-late 1.6s ease-in-out infinite } @keyframes o-late { 50% { box-shadow: 0 0 0 5px rgba(82,196,131,.1) } } }

/* "Ver el piso": el plano entero con el nombre de cada sala */
.o-piso-nombre { display: none; transform: translate(-50%, -50%) scale(var(--k, 1)); text-align: center; pointer-events: none; background: rgba(15,18,24,.82); border: 2px solid var(--c, #8C939B); border-radius: 6px; padding: 6px 12px; color: #F5F7F2; white-space: nowrap }
.o-piso-nombre b { display: block; font-family: var(--f-display); font-size: 30px; font-weight: 700; line-height: 1.05 }
.o-piso-nombre small { display: block; font-family: var(--f-pixel); font-size: 13px; letter-spacing: .1em; color: #52C483; margin-top: 3px }
.o-piso-nombre.cerrada small { color: #F2786A }
#of.viendo-piso .o-piso-nombre { display: block }
#of.viendo-piso .o-tag, #of.viendo-piso .o-bubble, #of.viendo-piso .o-sign, #of.viendo-piso .o-area { visibility: hidden }
#o-c-piso[aria-pressed="true"] { background: var(--o-hi); color: #1A1500; border-color: transparent; font-weight: 600 }
/* v6: los nombres de las alas (en los pasillos), con "Ver el piso" */
.o-piso-nombre.o-ala { border-style: dashed; border-color: #F0C440; background: rgba(15,18,24,.6) }
.o-piso-nombre.o-ala b { font-size: 22px; color: #F0C440; letter-spacing: .02em }