/* visita.css — la vista de visita (lo que ve la gente) y el chat con los NPCs de equipo. Todo va dentro de #of, con clases v-*. */

/* Mientras se decide quién entra (Alec o una visita), no se muestra nada */
body.decidiendo #pro-root, body.decidiendo #of { visibility: hidden }
body.decidiendo { background: #0B0D10 }
body.decidiendo::after { content: "PB HQ"; position: fixed; inset: 0; display: grid; place-content: center; color: #98A1A9; font: 700 16px "Silkscreen", monospace; letter-spacing: .08em }

/* Lo del dueño no se ve en la visita */
body.modo-visita #o-c-animo, body.modo-visita #o-c-vivo, body.modo-visita #o-sync, body.modo-visita .pb-modo { display: none !important }
body.modo-visita #o-cv { touch-action: none }
body.modo-visita .o-top { gap: 8px }
#of .v-previa { background: var(--o-hi); color: #1A1500; border-color: transparent; font-weight: 600 }
@media (pointer: coarse) { body.modo-visita .o-zoom { display: none } }

/* Las salas de los equipos: se ven, pero en la puerta dice que no se entra */
.o-sign.v-privado { background: #3A1A17; color: #FFD9D3; border-color: #0B0D10; text-align: center; line-height: 1.35; font-size: 6px; padding: 2px 4px }

/* Capas: armar tu muñeco y "muy pronto" */
#of .v-capa { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(11,13,16,.88); overflow: auto }
#of .v-caja { width: min(560px, 100%); background: var(--o-surface); border: 1px solid var(--o-line); border-radius: 14px; padding: 20px; display: grid; gap: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.45) }
#of .v-caja h2 { margin: 0; font-family: var(--f-display); font-size: 26px; line-height: 1.1 }
#of .v-eyebrow { margin: 0; font-family: var(--f-pixel); font-size: 10px; letter-spacing: .1em; color: var(--o-hi) }
#of .v-grande { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 34px; color: var(--o-hi) }
#of .v-arm { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: start }
#of .v-arm-ret { display: grid; place-items: center; background: var(--o-sunk); border: 1px solid var(--o-line); border-radius: 10px; padding: 6px; min-height: 250px }
#of .v-arm-ret canvas { width: 120px; height: 240px; image-rendering: pixelated }
#of .v-arm-ops { display: grid; gap: 10px }
#of .v-fila-arm { display: grid; gap: 5px }
#of .v-ops { display: flex; flex-wrap: wrap; gap: 6px }
#of .v-op { min-width: 30px; height: 30px; border-radius: 99px; border: 2px solid var(--o-line); background: var(--o-sunk); color: var(--o-ink); font-size: 12px; padding: 0 9px; cursor: pointer }
#of .v-op[style] { padding: 0; width: 30px }
#of .v-op.on { border-color: var(--o-hi); box-shadow: 0 0 0 2px rgba(240,196,64,.35) }
#of .v-op:hover { border-color: var(--o-muted) }
@media (max-width: 520px) { #of .v-arm { grid-template-columns: 1fr } #of .v-arm-ret { min-height: 0 } #of .v-arm-ret canvas { width: 90px; height: 180px } }

/* La llegada en ascensor */
#of .v-intro { position: absolute; inset: 0; z-index: 30; background: #0B0D10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; transition: opacity .3s }
#of .v-intro canvas { width: min(100%, calc((100dvh - 40px) * 1.6)); height: auto; image-rendering: pixelated }
#of .v-intro.fuera { opacity: 0 }
#of .v-intro-bub { width: min(100%, 440px); background: #FFFFFF; color: #14181C; font-family: var(--f-display); font-weight: 600; font-size: 18px; line-height: 1.25; padding: 10px 14px; border-radius: 6px; border: 2px solid #1F1B26; text-align: center }
#of .v-saltar { position: absolute; top: 14px; right: 14px; background: rgba(22,26,31,.9) }

/* El chat con los NPCs */
#of .v-chat { align-content: start; min-height: 120px; max-height: 46vh; overflow: auto; padding: 4px 2px }
#of .v-escribe { display: inline-flex; align-items: center; gap: 4px }
#of .v-escribe i { width: 6px; height: 6px; border-radius: 99px; background: var(--o-muted); animation: v-punto 1s infinite ease-in-out }
#of .v-escribe i:nth-child(3) { animation-delay: .15s } #of .v-escribe i:nth-child(4) { animation-delay: .3s }
@keyframes v-punto { 0%, 80%, 100% { opacity: .3; transform: translateY(0) } 40% { opacity: 1; transform: translateY(-3px) } }
@media (prefers-reduced-motion: reduce) { #of .v-escribe i { animation: none } #of .v-intro { transition: none } }
#of .v-preg { display: flex; flex-wrap: wrap; gap: 6px }
#of .v-preg .o-btn { text-align: left }
#of .v-preg .o-btn:disabled { opacity: .5 }

/* Paneles públicos */
#of .v-cuentas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px }
#of .v-cuenta { display: grid; gap: 2px; background: var(--o-sunk); border: 1px solid var(--o-line); border-radius: 10px; padding: 10px 12px }
#of .v-cuenta b { font-family: var(--f-display); font-size: 32px; line-height: 1; color: var(--o-hi) }
#of .v-lista { display: grid; gap: 6px }
#of .v-video, #of .v-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--o-line) }
#of .v-logros { display: flex; flex-wrap: wrap; gap: 6px }
#of .v-checkin { display: grid; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--o-line) }
#of .v-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px }
#of .v-fotos img { width: 100%; border-radius: 8px; display: block }

/* Celular: el panel sale como hoja desde abajo */
@media (max-width: 700px) {
  body.modo-visita #o-panel, body.modo-visita #o-panel.o-ancho { top: auto; left: 0; right: 0; width: 100%; height: min(72%, 560px); border-left: 0; border-top: 1px solid var(--o-line); border-radius: 14px 14px 0 0; box-shadow: 0 -12px 32px rgba(0,0,0,.4) }
  body.modo-visita .o-top { padding-block: 7px }
  body.modo-visita .o-sala { display: none }
  body.modo-visita .o-nav { min-width: 0; flex: 1 }
  body.modo-visita #o-bar { gap: 2px; padding-inline: 8px }
  body.modo-visita .o-hint { right: 16px; font-size: 12px; text-align: center }
}

/* v6: el muro de los 400, grande en el panel */
.v-400 { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; margin: 10px 0 }
.v-400 i { aspect-ratio: 1; border-radius: 2px; background: var(--o-line, #2B3340) }
.v-400 i.on { background: #F0C440 } .v-400 i.no { background: #4A5568 } .v-400 i.hoy { background: #FFFFFF }
/* v8: el libro de visitas */
.v-check { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 1.35 } .v-check input { margin-top: 2px; flex: none }
.v-cita { margin: 0; flex: 1; padding: 8px 10px; border-left: 3px solid #F0C440; background: rgba(255,255,255,.06); font-style: italic; overflow-wrap: anywhere }