/* Mi oficina (of-*), docs/mi-oficina.md: el equipo en un plano visto desde arriba, como un juego de
   8 bits. El cromo (tarjetas, texto, botones) usa los tokens del tema; el dibujo (pisos, cartel,
   personajes, la pantalla del chat en vivo) lleva colores fijos y sólidos, igual de claro y de
   oscuro, como una ilustración. Nada de degradados ni imágenes de terceros. */

.of-para { color: var(--color-text-muted); margin: 0 0 var(--sp-4); max-width: 75ch; text-wrap: pretty; }
.of-reloj { font-weight: 600; color: var(--color-text-soft); font-variant-numeric: tabular-nums; }

/* ---- Misión del día y leyenda ---- */

.of-tablero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-4); align-items: start; }
.of-tablero-solo { grid-template-columns: minmax(0, 1fr); }
.of-leyenda .btn-link { min-width: 32px; min-height: 32px; }
.of-mision,
.of-leyenda { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); box-shadow: var(--elev-1); }
.of-mision-titulo { font-family: var(--font-titulo); font-weight: 800; font-size: 1.05rem; margin: 0 0 var(--sp-1); }
.of-mision-texto { margin: 0 0 var(--sp-2); }
.of-mision-pie { margin: var(--sp-2) 0 0; color: var(--color-text-soft); font-size: .9rem; font-variant-numeric: tabular-nums; }
.of-leyenda .of-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-2) 0; padding: 0; font-size: inherit; }
.of-chips li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--color-surface-2); border: 1px solid var(--color-border); font-size: .85rem; font-weight: 600; }
.of-leyenda summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; }
.of-leyenda ul { margin: var(--sp-2) 0 0; padding-left: 1.1rem; font-size: .92rem; display: grid; gap: 4px; }
.of-punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.of-punto-activo { background: var(--color-success); }

.of-barra { display: block; height: 12px; background: var(--color-surface-2); border: 2px solid #0f172a; border-radius: 4px; overflow: hidden; }
.of-barra-grande { height: 16px; }
.of-barra-relleno { display: block; height: 100%; background: #3b82f6; transition: width var(--dur-3) var(--ease-out); }
.of-barra-lista { background: #22c55e; }

/* ---- El plano: una consola oscura con los cuartos dentro ---- */

.of-plano { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--sp-3); padding: var(--sp-3); background: #1f2937; border-radius: var(--radius); box-shadow: var(--elev-2); margin-bottom: var(--sp-4); }

.of-cuarto { display: flex; flex-direction: column; min-height: 250px; border: 3px solid #0f172a; border-radius: 10px; overflow: hidden; background-size: 32px 32px; image-rendering: pixelated; }
.of-cartel { background: #0f172a; padding: 6px 8px; display: flex; justify-content: center; }
.of-cartel span:not(.of-luz) { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #1e293b; color: #ffffff; border: 2px solid #94a3b8; border-radius: 4px; padding: 3px 12px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .92rem; }
.of-sala { flex: 1; display: flex; flex-direction: column; padding: 8px 10px 10px; }
.of-muebles { display: block; width: 100%; height: auto; max-height: 88px; overflow: visible; }
.of-led { animation: of-parpadeo 1.4s steps(1) infinite; }
.of-led-b { animation-delay: .7s; }
.of-vacio { margin: auto; text-align: center; font-size: .85rem; font-weight: 600; color: #0f172a; background: #ffffff; border: 2px solid #0f172a; border-radius: 8px; padding: 6px 10px; }

.of-progreso { background: #0f172a; color: #ffffff; padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-variant-numeric: tabular-nums; }
.of-progreso .of-barra { border-color: #94a3b8; background: #334155; }

/* Pisos de baldosas, uno por tipo de cuarto (dos colores sólidos). */
.of-piso-general { background-color: #e0f2fe; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23e0f2fe'/%3E%3Crect width='16' height='16' fill='%23bae6fd'/%3E%3Crect x='16' y='16' width='16' height='16' fill='%23bae6fd'/%3E%3C/svg%3E"); }
.of-piso-caja { background-color: #fef3c7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23fef3c7'/%3E%3Crect width='16' height='16' fill='%23fde68a'/%3E%3Crect x='16' y='16' width='16' height='16' fill='%23fde68a'/%3E%3C/svg%3E"); }
.of-piso-credito { background-color: #dcfce7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23dcfce7'/%3E%3Crect width='16' height='16' fill='%23bbf7d0'/%3E%3Crect x='16' y='16' width='16' height='16' fill='%23bbf7d0'/%3E%3C/svg%3E"); }
.of-piso-tecnologia { background-color: #334155; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23334155'/%3E%3Crect width='16' height='16' fill='%23283548'/%3E%3Crect x='16' y='16' width='16' height='16' fill='%23283548'/%3E%3C/svg%3E"); }
.of-piso-rrhh { background-color: #ede9fe; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23ede9fe'/%3E%3Crect width='16' height='16' fill='%23ddd6fe'/%3E%3Crect x='16' y='16' width='16' height='16' fill='%23ddd6fe'/%3E%3C/svg%3E"); }
.of-piso-contabilidad { background-color: #f5e6d3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23f5e6d3'/%3E%3Crect width='16' height='16' fill='%23ead2b5'/%3E%3Crect x='16' y='16' width='16' height='16' fill='%23ead2b5'/%3E%3C/svg%3E"); }
.of-piso-gerencia { background-color: #e2e8f0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23e2e8f0'/%3E%3Crect width='16' height='16' fill='%23cbd5e1'/%3E%3Crect x='16' y='16' width='16' height='16' fill='%23cbd5e1'/%3E%3C/svg%3E"); }
.of-piso-cumplimiento { background-color: #ccfbf1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23ccfbf1'/%3E%3Crect width='16' height='16' fill='%2399f6e4'/%3E%3Crect x='16' y='16' width='16' height='16' fill='%2399f6e4'/%3E%3C/svg%3E"); }
.of-piso-mercadeo { background-color: #ffedd5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23ffedd5'/%3E%3Crect width='16' height='16' fill='%23fed7aa'/%3E%3Crect x='16' y='16' width='16' height='16' fill='%23fed7aa'/%3E%3C/svg%3E"); }
.of-piso-reuniones { background-color: #e0e7ff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23e0e7ff'/%3E%3Crect width='16' height='16' fill='%23c7d2fe'/%3E%3Crect x='16' y='16' width='16' height='16' fill='%23c7d2fe'/%3E%3C/svg%3E"); }
.of-piso-comedor { background-color: #ecfccb; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23ecfccb'/%3E%3Crect width='16' height='16' fill='%23d9f99d'/%3E%3Crect x='16' y='16' width='16' height='16' fill='%23d9f99d'/%3E%3C/svg%3E"); }
.of-piso-fuera { background-color: #fef3c7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23fef3c7'/%3E%3Crect width='16' height='16' fill='%23fde68a'/%3E%3Crect x='16' y='16' width='16' height='16' fill='%23fde68a'/%3E%3C/svg%3E"); }

/* ---- Cada puesto: nube, personaje en su escritorio y nombre ---- */

.of-puestos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px 4px; margin-top: 6px; }
.of-puesto { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; min-height: 44px; padding: 2px 2px 4px; border-radius: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.of-puesto:focus-visible { outline: 3px solid #facc15; outline-offset: 2px; }
.of-puesto:active .of-figura { transform: translateY(2px); }
@media (hover: hover) and (pointer: fine) {
  .of-puesto:hover .of-nombre { background: #1e3a8a; }
}

.of-nube-lugar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 100%; min-height: 44px; }
.of-nube { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; background: #ffffff; color: #0f172a; border: 2px solid #0f172a; border-radius: 10px; padding: 3px 7px; font-size: .72rem; line-height: 1.25; font-weight: 600; text-align: center; box-shadow: 0 2px 0 #0f172a; overflow-wrap: anywhere; }
.of-nube-lugar:has(.of-nube)::after { content: ""; width: 8px; height: 8px; margin-top: -5px; background: #ffffff; border-right: 2px solid #0f172a; border-bottom: 2px solid #0f172a; transform: rotate(45deg); }
.of-zz { font-size: 1.15rem; line-height: 1; animation: of-flota 2.4s var(--ease-in-out) infinite; }

.of-figura { position: relative; display: flex; justify-content: center; align-items: flex-start; width: 64px; height: 66px; transition: transform var(--dur-1) var(--ease-out); }
.of-sin-escritorio { height: 64px; }
.of-avatar { display: block; image-rendering: pixelated; }
.of-escritorio { position: absolute; left: 2px; bottom: 0; width: 60px; height: 22px; overflow: visible; }
.of-insignia { position: absolute; top: -2px; right: -2px; font-size: .95rem; line-height: 1; }
.of-insignia-izq { right: auto; left: -2px; }
.of-nombre { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #0f172a; color: #ffffff; border-radius: 4px; padding: 1px 7px; font-size: .74rem; font-weight: 700; }
.of-yo .of-nombre { background: #16a34a; }

/* Los estados: quien trabaja respira (dos cuadros, como en los juegos); quien no está, en gris. */
.of-activo .of-avatar,
.of-concentrado .of-avatar,
.of-reunion .of-avatar,
.of-pausa .of-avatar { animation: of-respira 1.4s linear infinite; animation-delay: var(--retraso, 0ms); }
.of-ausente .of-avatar { filter: grayscale(1); opacity: .6; }
.of-sin-entrar .of-avatar { filter: grayscale(1); opacity: .38; }
.of-ausente .of-escritorio,
.of-sin-entrar .of-escritorio { filter: grayscale(.7); }
.of-zz-luna { animation: none; opacity: .8; }

/* Celebración breve: salta y suelta confeti de pixeles. */
.of-celebra .of-figura { animation: of-salto .45s steps(2) 3; }
.of-confeti { position: absolute; inset: 0; pointer-events: none; }
.of-confeti i { position: absolute; left: calc(50% + (var(--i) - 5) * 6px); top: 26px; width: 5px; height: 5px; background: #ef4444; opacity: 0; animation: of-confeti 1.5s var(--ease-out) forwards; animation-delay: calc(var(--i) * 40ms); }
.of-confeti i:nth-child(5n + 2) { background: #facc15; }
.of-confeti i:nth-child(5n + 3) { background: #22c55e; }
.of-confeti i:nth-child(5n + 4) { background: #3b82f6; }
.of-confeti i:nth-child(5n + 5) { background: #a78bfa; }

@keyframes of-respira { 0%, 49% { transform: translateY(0); } 50%, 100% { transform: translateY(-2px); } }
@keyframes of-flota { 0%, 100% { transform: translateY(0); opacity: .65; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes of-parpadeo { 50% { opacity: .25; } }
@keyframes of-salto { 0% { transform: translateY(0); } 100% { transform: translateY(-6px); } }
@keyframes of-confeti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  55% { opacity: 1; transform: translate(calc((var(--i) - 5) * 3px), -40px) rotate(90deg); }
  100% { opacity: 0; transform: translate(calc((var(--i) - 5) * 5px), -6px) rotate(180deg); }
}

/* ---- Chat en vivo / actividades: la pantalla de abajo ---- */

.of-vivo { background: #1e293b; border: 3px solid #0f172a; border-radius: var(--radius); padding-bottom: var(--sp-3); box-shadow: var(--elev-2); margin-bottom: var(--sp-4); overflow: hidden; }
.of-vivo-cabeza { display: flex; align-items: center; justify-content: center; gap: 12px; background: #334155; padding: 8px; border-bottom: 3px solid #0f172a; }
.of-vivo-cabeza h2 { margin: 0; background: #0f172a; color: #ffffff; border: 2px solid #94a3b8; border-radius: 4px; padding: 4px 14px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.of-vivo-luz { flex: none; width: 10px; height: 10px; border-radius: 2px; background: #ef4444; }
.of-vivo-para { color: #cbd5e1; font-size: .85rem; margin: 8px 14px 6px; max-width: 75ch; }
.of-vivo-lineas { margin: 0 12px; padding: 10px 12px; max-height: 300px; overflow-y: auto; background: #0f172a; border-radius: 8px; color: #f8fafc; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .88rem; }
.of-vivo-linea { margin: 0 0 4px; line-height: 1.45; overflow-wrap: anywhere; }
.of-vivo-hora { color: #cbd5e1; margin-right: 1ch; }
.of-vivo-depto { color: #4ade80; font-weight: 700; margin-right: 1ch; }
.of-vivo-nombre { all: unset; color: #67e8f9; font-weight: 700; cursor: pointer; margin-right: 1ch; }
.of-vivo-nombre::before { content: "@"; }
.of-vivo-nombre:focus-visible { outline: 2px solid #facc15; outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
  .of-vivo-nombre:hover { text-decoration: underline; }
}
.of-vivo-vacio { margin: 0; color: #cbd5e1; }

/* ---- La tarjeta de una persona ---- */

.of-ficha { max-width: 540px; }
.of-ficha-cuerpo { display: flex; gap: var(--sp-4); align-items: flex-start; }
.of-ficha-retrato { flex: none; background: #bae6fd; border: 3px solid #0f172a; border-radius: 12px; padding: 10px 14px; }
.of-ficha-retrato.of-ausente svg,
.of-ficha-retrato.of-sin-entrar svg { filter: grayscale(1); opacity: .6; }
.of-ficha-datos { margin: 0; }
.of-ficha-datos dt { margin-top: 6px; font-size: .78rem; font-weight: 700; color: var(--color-text-soft); }
.of-ficha-datos dt:first-child { margin-top: 0; }
.of-ficha-datos dd { margin: 0; }
.of-ficha-botones { gap: var(--sp-2); }
.of-ficha-yo { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--color-border); }

/* ---- Mi cuenta: elegir el personaje ---- */

.of-elegir { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: flex-start; }
.of-elegir-vista { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #bae6fd; border: 3px solid #0f172a; border-radius: 12px; padding: 12px 18px; }
.of-elegir-vista .form-hint { color: #0f172a; margin: 0; }
.of-elegir-opciones { flex: 1; min-width: 240px; }
.of-elegir-fila { display: flex; flex-wrap: wrap; gap: 8px; }
.of-opcion { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 76px; min-height: 44px; padding: 6px 4px; background: var(--color-surface-2); color: var(--color-text); border: 2px solid var(--color-border); border-radius: 10px; font: inherit; font-size: .75rem; cursor: pointer; }
.of-muestra { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--color-border-strong); cursor: pointer; }
.of-opcion.elegida,
.of-muestra.elegida { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-ring); }

/* ---- Teléfono ---- */

@media (max-width: 900px) {
  .of-tablero { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .of-plano { padding: 8px; gap: 10px; border-radius: 12px; }
  .of-cuarto { min-height: 0; }
  .of-puestos { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .of-vivo-lineas { max-height: 280px; font-size: .8rem; margin: 0 8px; }
  .of-vivo-cabeza h2 { font-size: .85rem; padding: 4px 8px; }
  .of-ficha-cuerpo { flex-direction: column; align-items: center; }
  .of-ficha-datos { align-self: stretch; }
  .of-mision, .of-leyenda { padding: var(--sp-3) var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
  .of-avatar, .of-zz, .of-led, .of-celebra .of-figura { animation: none !important; }
  .of-confeti { display: none; }
  .of-barra-relleno { transition: none; }
}

/* ---- Cuadro de honor (récords), estilo máquina de juegos ---- */
.of-records {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; padding: .5rem .7rem;
  border-radius: var(--radius-sm); background: #1e293b; color: #f8fafc; overflow-x: auto;
}
.of-records-titulo { margin: 0; font-weight: 800; letter-spacing: .08em; white-space: nowrap; color: #facc15; font-family: ui-monospace, monospace; }
.of-records-lista { display: flex; gap: .45rem; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; }
.of-record {
  display: flex; align-items: center; gap: .4rem; padding: .3rem .55rem; border: 1px solid #334155; border-radius: 10px;
  background: #0f172a; color: inherit; cursor: pointer; white-space: nowrap; font: inherit;
}
.of-record:disabled { cursor: default; }
.of-record:not(:disabled):hover { border-color: #facc15; }
.of-record-leyenda { opacity: .75; }
.of-record-puesto { font-size: 1.05rem; min-width: 1.6rem; text-align: center; font-weight: 700; }
.of-record-datos { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.of-record-datos strong { font-size: .85rem; }
.of-record-datos span { font-size: .8rem; color: #facc15; font-family: ui-monospace, monospace; }
.of-record-datos small { font-size: .7rem; color: #94a3b8; }
.modal-box.of-editor { max-width: 720px; }

/* ---- La oficina se mueve (solo transform y opacity, a saltos con steps(): como un videojuego) ----
   Dos capas: .of-cuerpo pasea, mira a los lados, se balancea o brinca; .of-avatar, por dentro,
   teclea, respira, cabecea o asiente. Cada persona arranca con su propio retraso (--retraso).
   Todo se queda quieto con prefers-reduced-motion y cuando la oficina no está a la vista (.of-quieta). */
.of-cuerpo { display: block; will-change: transform; }

/* Activo sin tarea: respira (ya lo hacía el avatar) y de vez en cuando mira al otro lado. */
.of-activo:not(.of-trabajando) .of-cuerpo { animation: of-mira 9s steps(1) infinite; animation-delay: var(--retraso, 0ms); }

/* Trabajando: teclea rápido y, de cuando en cuando, se levanta, da dos pasitos y vuelve. */
.of-trabajando .of-avatar { animation: of-teclea .36s steps(2) infinite; animation-delay: var(--retraso, 0ms); }
.of-trabajando.of-activo .of-cuerpo { animation: of-paseo 17s steps(1) infinite; animation-delay: calc(var(--retraso, 0ms) * 9); }
.of-tecleo { position: absolute; left: 50%; bottom: 17px; transform: translateX(-50%); display: flex; gap: 2px; pointer-events: none; }
.of-tecleo i { width: 3px; height: 3px; background: #e0f2fe; opacity: .25; animation: of-punto 1.2s steps(1) infinite; }
.of-tecleo i:nth-child(2) { animation-delay: .3s; }
.of-tecleo i:nth-child(3) { animation-delay: .6s; }

/* Concentrado: teclea con audífonos y se balancea un poco al ritmo. */
.of-concentrado .of-cuerpo { animation: of-balanceo 2.4s steps(2) infinite; transform-origin: 50% 100%; animation-delay: var(--retraso, 0ms); }

/* Ausente: cabecea dormido (los 💤 ya suben). */
.of-ausente .of-avatar { animation: of-cabecea 3.2s steps(2) infinite; transform-origin: 50% 90%; animation-delay: var(--retraso, 0ms); }

/* En reunión: asiente de vez en cuando. */
.of-reunion .of-avatar { animation: of-asiente 3s steps(1) infinite; animation-delay: var(--retraso, 0ms); }

/* En su pausa: la taza va y viene de la boca. */
.of-taza { position: absolute; left: calc(50% + 10px); top: 22px; font-size: .8rem; line-height: 1; pointer-events: none; animation: of-sorbo 3.4s steps(1) infinite; animation-delay: var(--retraso, 0ms); }

/* Cumpleaños: gorrito (en el dibujo) y un saltito de vez en cuando. */
.of-cumple .of-cuerpo { animation: of-brinca 5s steps(1) infinite; animation-delay: var(--retraso, 0ms); }

/* Sin entrar hoy: quieto y en gris. Fuera hoy: quieto. */
.of-sin-entrar .of-avatar, .of-sin-entrar .of-cuerpo, .of-fuera .of-avatar, .of-fuera .of-cuerpo { animation: none; }

/* Al entregar una tarea: el salto de alegría (además del confeti) manda sobre lo demás. */
.of-celebra .of-cuerpo { animation: of-salto .45s steps(2) 3; }

/* Fuera de la vista o con la pestaña escondida: todo en pausa (no gasta batería). */
.of-quieta *, .of-quieta *::before, .of-quieta *::after { animation-play-state: paused !important; }

@keyframes of-mira { 0%, 62% { transform: none; } 63%, 74% { transform: scaleX(-1); } 75%, 100% { transform: none; } }
@keyframes of-teclea { 0%, 49% { transform: translateY(0); } 50%, 100% { transform: translateY(1px); } }
@keyframes of-paseo {
  0%, 80% { transform: translateX(0); }
  81% { transform: translateX(-3px) translateY(-1px); }
  83% { transform: translateX(-6px); }
  85% { transform: translateX(-9px) translateY(-1px); }
  87%, 89% { transform: translateX(-9px) scaleX(-1); }
  90% { transform: translateX(-6px) translateY(-1px) scaleX(-1); }
  92% { transform: translateX(-3px) scaleX(-1); }
  94%, 100% { transform: translateX(0); }
}
@keyframes of-punto { 0%, 49% { opacity: .25; } 50%, 100% { opacity: 1; } }
@keyframes of-balanceo { 0%, 49% { transform: rotate(-2deg); } 50%, 100% { transform: rotate(2deg); } }
@keyframes of-cabecea { 0%, 49% { transform: rotate(0); } 50%, 100% { transform: rotate(7deg) translateY(1px); } }
@keyframes of-asiente { 0%, 70% { transform: translateY(0); } 71%, 76% { transform: translateY(2px); } 77%, 82% { transform: translateY(0); } 83%, 88% { transform: translateY(2px); } 89%, 100% { transform: translateY(0); } }
@keyframes of-sorbo { 0%, 60% { transform: translate(0, 0); opacity: 1; } 61%, 80% { transform: translate(-9px, -9px); opacity: 1; } 81%, 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes of-brinca { 0%, 84% { transform: translateY(0); } 85%, 89% { transform: translateY(-5px); } 90%, 100% { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .of-cuerpo, .of-tecleo i, .of-taza { animation: none !important; }
}

/* ---- Semáforo del cartel de cada departamento ---- */
.of-cartel { display: flex; align-items: center; justify-content: center; gap: .4rem; }
.of-cartel .of-luz {
  all: unset; box-sizing: border-box; flex-shrink: 0; width: 14px; height: 14px; border-radius: 3px;
  border: 2px solid #0f172a; box-shadow: 0 0 0 2px #f8fafc; cursor: default;
}
button.of-luz { cursor: pointer; }
button.of-luz:focus-visible { outline: 3px solid #facc15; outline-offset: 2px; }
.of-cartel .of-luz-verde { background: #22c55e; }
.of-cartel .of-luz-amarillo { background: #facc15; }
.of-cartel .of-luz-rojo { background: #ef4444; }
.of-semaforo-resumen { display: block; margin-top: .25rem; font-size: .76rem; font-weight: 600; }
.of-semaforo-detalle {
  margin: .35rem .5rem; padding: .5rem .7rem; border-radius: 8px; background: #ffffff; color: #0f172a;
  border: 2px solid #0f172a; font-size: .82rem; max-height: 220px; overflow-y: auto;
}
.of-semaforo-detalle ul { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.of-semaforo-detalle li { display: flex; gap: .4rem; flex-wrap: wrap; }
.of-item-que { font-weight: 700; color: #92400e; }
.of-item-rojo .of-item-que { color: #b91c1c; }

/* ---- Modo TV (/oficina/tv): pantalla completa, letra y personajes grandes ---- */
.of-tv-marco { min-height: 100vh; background: #0b1220; color: #f8fafc; }
.of-tv { padding: 1rem 1.25rem; font-size: 1.15rem; }
.of-tv-cabeza { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.of-tv-cabeza h1 { margin: 0; font-size: 1.8rem; color: #f8fafc; }
.of-tv-mision { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: .3rem; }
.of-tv .of-reloj { color: #cbd5e1; }
.of-tv-salir {
  margin-left: auto; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; color: #94a3b8; text-decoration: none; opacity: .5; border: 1px solid #334155;
}
.of-tv-salir:hover, .of-tv-salir:focus-visible { opacity: 1; color: #f8fafc; }
.of-tv-aviso { font-size: 1.4rem; }
.of-tv-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1rem; align-items: start; }
.of-tv .of-puestos { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.of-tv .of-figura { width: 84px; height: 88px; }
.of-tv .of-puesto .of-avatar { width: 64px; height: 86px; }
.of-tv .of-escritorio { width: 80px; height: 29px; }
.of-tv .of-nombre { font-size: .95rem; }
.of-tv .of-cartel span:not(.of-luz) { font-size: 1.05rem; }
.of-tv .of-records { font-size: 1.1rem; }
.of-tv .of-cartel .of-luz { width: 20px; height: 20px; }
.of-tv .of-vivo-lineas { max-height: calc(100vh - 260px); }
@media (orientation: portrait), (max-width: 1100px) {
  .of-tv-cuerpo { grid-template-columns: 1fr; }
  .of-tv .of-vivo-lineas { max-height: 40vh; }
}

/* ---- «🚶 Moverme a…»: cada quien decide dónde está ---- */
.of-aviso-mover { margin-bottom: var(--sp-3); }
.of-ficha > .of-ficha-yo { margin: 0 0 var(--sp-3); padding: 0 0 var(--sp-3); border-top: 0; border-bottom: 1px solid var(--color-border); }
.of-mover-titulo { margin: 0 0 var(--sp-2); font-size: 1.05rem; }
.of-mover-ahora { margin: 0 0 var(--sp-2); }
.of-mover-lista { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: flex; flex-direction: column; gap: 6px; }
.of-mover-item { border: 2px solid var(--color-border); border-radius: 12px; background: var(--color-surface-2); overflow: hidden; }
.of-mover-abierta { border-color: var(--color-primary); }
.of-mover-opcion { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; cursor: pointer; color: var(--color-text); -webkit-tap-highlight-color: transparent; }
.of-mover-opcion:focus-visible { outline: 3px solid var(--color-primary-ring); outline-offset: -3px; }
.of-mover-opcion:disabled { cursor: default; opacity: .6; }
@media (hover: hover) and (pointer: fine) {
  .of-mover-opcion:not(:disabled):hover { background: var(--color-surface); }
}
.of-mover-emoji { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; background: var(--color-surface); border: 2px solid var(--color-border); border-radius: 10px; }
.of-mover-textos { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.of-mover-textos small { color: var(--color-text-soft); font-size: .85rem; }
.of-mover-detalle { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.of-mover-pregunta { margin: 4px 0 0; font-weight: 700; font-size: .9rem; }
.of-mover-areas, .of-mover-tiempos { display: flex; flex-wrap: wrap; gap: 6px; }
.of-mover-chip { min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: 600; cursor: pointer; }
.of-mover-chip[aria-pressed="true"] { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-ring); }
.of-mover-ir { align-self: stretch; min-height: 48px; margin-top: 4px; }

/* De visita en otra área: de pie, con su distintivo; y quien trabaja fuera. */
.of-visitas-titulo { margin: 8px 0 0; align-self: flex-start; background: #0f172a; color: #ffffff; border-radius: 4px; padding: 1px 8px; font-size: .74rem; font-weight: 700; }
.of-puestos-visita { border-top: 2px dashed #0f172a; padding-top: 4px; }
.of-etiqueta-visita { background: #facc15; color: #0f172a; border-radius: 4px; padding: 0 6px; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.of-visita .of-avatar,
.of-remoto .of-avatar { animation: of-respira 1.4s linear infinite; animation-delay: var(--retraso, 0ms); }
.of-visita .of-cuerpo { animation: of-mira 9s steps(1) infinite; animation-delay: var(--retraso, 0ms); }

/* La cocina: el vapor de la cafetera. Trabajando fuera: su piso. */
.of-vapor { animation: of-parpadeo 1.6s steps(1) infinite; }
.of-vapor-b { animation-delay: .8s; }
.of-piso-remoto { background-color: #f1f5f9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23f1f5f9'/%3E%3Crect width='16' height='16' fill='%23e2e8f0'/%3E%3Crect x='16' y='16' width='16' height='16' fill='%23e2e8f0'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) {
  .of-vapor, .of-visita .of-avatar, .of-visita .of-cuerpo, .of-remoto .of-avatar { animation: none !important; }
}