/* Oficina EcoClean — piloto externo
   Identidad oficial: bosque #061d14, bosque suave #0c3022, verde marca #1e7b4f,
   lima #b8f52f, lima suave #d5ff72, dorado #f3c477 solo acento.
   Tipografías: Manrope en titulares, DM Sans en texto (con respaldo del sistema). */

:root {
  --bosque: #061d14;
  --bosque-suave: #0c3022;
  --verde: #1e7b4f;
  --lima: #b8f52f;
  --lima-suave: #d5ff72;
  --dorado: #f3c477;
  --blanco: #ffffff;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bosque);
  color: var(--blanco);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  overflow: hidden;
}

h1, h2, h3 {
  font-family: "Manrope", "DM Sans", system-ui, sans-serif;
}

.sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Puerta con clave única ----------
   Pantalla de acceso: lo único visible hasta que el Worker confirma la
   sesión. Identidad oficial (bosque y lima) sobre el fondo de la app. */
.puerta {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
  overflow-y: auto;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(30, 123, 79, 0.35), rgba(6, 29, 20, 0) 60%),
    var(--bosque);
}
.puerta[hidden] { display: none; }
.escena[hidden] { display: none; }
.puerta-caja {
  width: 100%;
  max-width: 380px;
  text-align: center;
  background: rgba(12, 48, 34, 0.82);
  border: 1px solid rgba(184, 245, 47, 0.4);
  border-radius: 1.2rem;
  padding: 1.8rem 1.5rem 1.5rem;
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.55);
}
.puerta-logo { width: 170px; max-width: 65%; height: auto; }
.puerta-caja h1 {
  margin: 0.7rem 0 0.4rem;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--blanco);
}
.puerta-texto {
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}
.puerta-form { display: flex; flex-direction: column; gap: 0.6rem; }
.puerta-form input {
  border-radius: 0.7rem;
  border: 1px solid rgba(184, 245, 47, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: var(--blanco);
  font-family: inherit;
  font-size: 1rem;
  padding: 0.65rem 0.8rem;
  min-height: 48px;
  text-align: center;
}
.puerta-form input::placeholder { color: rgba(255, 255, 255, 0.55); }
.puerta-msg {
  margin: 0.9rem 0 0;
  min-height: 1.2em;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--dorado);
}
.puerta-msg.error { color: #ff9d94; }

/* ---------- Escena ---------- */

.escena {
  position: relative;
  width: min(100vw, 150dvh);
  aspect-ratio: 3 / 2;
  max-height: 100dvh;
  overflow: hidden;
  background: var(--bosque-suave);
  user-select: none;
  -webkit-user-select: none;
}

.fondo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Escena oficial: la misma aprobada en la oficina de Muse (artefacto
   oficina-virtual-ecoclean) y en la vista previa externa. La animación va
   HORNEADA en un solo video MP4 (fondo + luz suave + sombras de contacto +
   los dos clips con alfa compuestos), porque Safari de iOS no renderiza la
   transparencia de los WebM VP9 con alfa y dejaba ver el magenta del recorte.
   El logo 3D sigue como imagen PNG encima del video, sin hornear. */

/* Logo 3D renderizado sobre la pared verde (franja 0 %–28,4 % del ancho):
   casi plano, rotateY(.5deg) con perspectiva, SIN brillo detrás; solo su
   sombra de silueta sutil abajo-izquierda y un realce mínimo. */
.logo-pared {
  position: absolute; z-index: 2;
  left: 2.7%;
  top: 14.5%;
  width: 23%;
  transform: perspective(90em) rotateY(.5deg);
  transform-origin: 50% 50%;
  filter: brightness(1.06) saturate(1.05)
    drop-shadow(-.10em .14em .14em rgba(3, 15, 9, .35))
    drop-shadow(-.30em .40em .45em rgba(3, 15, 9, .26));
  pointer-events: none;
}

/* Video horneado de la escena: cubre el fondo por completo (el MP4 es
   1920×1280, la misma proporción 3:2 de la escena). Dentro del video ya van
   las sombras de contacto (elipses en left 8.5% y 37.5%, bottom .2%,
   width 23%, height 5.5%) y las figuras en su geometría aprobada
   (aspecto 640/704; Nelly left 4.5% / bottom 1% / width 30.5%;
   Mónica left 33.5% / bottom 1% / width 30.5%, sin espejar). */
.video-escena {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Póster fijo (fotograma compuesto) para movimiento reducido */
.video-escena-poster {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Etiquetas pequeñas sobre la cabeza de cada trabajador (2026-11-03:
   reemplazan la fila de chips inferior, que Jorge vio grande y
   sobrepuesta). Pastilla oscura translúcida, solo punto verde de
   «Disponible» + nombre, en Manrope 600. Son botones: abren la ventana
   de cada quien. El transform deja el borde inferior de la pastilla
   justo sobre la cabeza, sin tapar la cara. */
.etiqueta {
  position: absolute; z-index: 6;
  transform: translate(-50%, -100%);
  display: flex; align-items: center; gap: 0.45em; white-space: nowrap;
  background: rgba(6, 29, 20, 0.85);
  color: var(--blanco);
  border: 1px solid rgba(184, 245, 47, 0.45);
  border-radius: 999px;
  padding: 0.34em 0.72em;
  box-shadow: 0 0.45em 1em rgba(6, 29, 20, 0.35);
  font-family: "Manrope", "DM Sans", system-ui, sans-serif;
  font-size: clamp(10px, 1.05vw, 12.5px);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.etiqueta:active { background: rgba(30, 123, 79, 0.9); }
.etiqueta:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }
.etiqueta-nelly    { left: 24%; top: 46%; }
.etiqueta-monica   { left: 51%; top: 45%; }
.etiqueta-emmanuel { left: 86%; top: 36.5%; }

/* Distintivo «N por revisar» en la etiqueta cuando hay entregas pendientes */
.badge-revision {
  display: inline-block;
  background: var(--lima);
  color: var(--bosque);
  border-radius: 999px;
  padding: 0.12em 0.55em;
  font-size: 0.8em;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.badge-revision[hidden] { display: none; }

.punto {
  display: inline-block;
  width: 0.55em; height: 0.55em;
  border-radius: 50%;
  background: var(--lima);
  box-shadow: 0 0 0 0.12em rgba(30, 123, 79, 0.35);
}

/* Zonas tocables (invisibles) */
.zona {
  position: absolute; z-index: 4;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.zona:focus-visible { outline: 3px solid var(--lima); outline-offset: -3px; border-radius: 1em; }
.zona-nelly  { left: 0%;  top: 36%; width: 37%; height: 64%; }
.zona-monica { left: 33%; top: 44%; width: 38%; height: 56%; }
/* Emmanuel: su figura y su escritorio (con el portátil de luces) a la
   derecha de la escena 3c; tocarlo abre su ventana, como las muchachas. */
.zona-emmanuel { left: 71%; top: 32%; width: 29%; height: 54%; }
/* Queda 1 escritorio libre: el tramo de la mesa larga de los ventanales
   a la izquierda del puesto de Emmanuel. */
.zona-libre-1 { left: 55%; top: 56%; width: 17%; height: 22%; }

/* Controles mínimos */
.hud {
  position: absolute;
  top: 2.2%;
  right: 2.2%;
  display: flex;
  gap: 0.5em;
  align-items: center;
  z-index: 9;
}
.hora {
  background: rgba(6, 29, 20, 0.82);
  border: 1px solid rgba(184, 245, 47, 0.45);
  color: var(--lima-suave);
  border-radius: 999px;
  padding: 0.35em 0.8em;
  font-size: clamp(10px, 1.3vw, 15px);
  font-weight: 600;
}
.btn-hud {
  background: rgba(6, 29, 20, 0.82);
  border: 1px solid rgba(184, 245, 47, 0.45);
  color: var(--blanco);
  border-radius: 999px;
  padding: 0.35em 0.8em;
  font-size: clamp(10px, 1.3vw, 15px);
  font-family: inherit;
  cursor: pointer;
  min-height: 40px;
}
.btn-hud:active { background: var(--verde); }

.aviso-giro {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 2.5%;
  transform: translateX(-50%);
  margin: 0;
  background: rgba(6, 29, 20, 0.85);
  border: 1px solid rgba(184, 245, 47, 0.4);
  color: var(--lima-suave);
  padding: 0.4em 0.9em;
  border-radius: 999px;
  font-size: 13px;
  z-index: 5;
  white-space: nowrap;
}
@media (orientation: portrait) and (max-width: 700px) {
  /* En vertical la franja va fija al borde inferior de la PANTALLA (no de
     la escena, que queda centrada y más arriba), para que nunca tape las
     etiquetas de nombre. */
  .aviso-giro {
    display: block;
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    z-index: 6;
  }
}

/* ---------- Ventanas flotantes ---------- */

.velo {
  position: fixed; inset: 0;
  background: rgba(3, 16, 10, 0.62);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  padding: 1rem;
}
.velo[hidden] { display: none; }

.ventana {
  background: linear-gradient(160deg, rgba(12, 48, 34, 0.97), rgba(6, 29, 20, 0.98));
  border: 1px solid rgba(184, 245, 47, 0.35);
  border-radius: 1.1rem;
  width: min(580px, 100%);
  max-height: min(760px, 94dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden auto;
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.55);
}
.ventana-corta { width: min(440px, 100%); }

.v-cabeza {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  padding: 1rem 1.1rem 0.6rem;
}
.v-avatar {
  width: 74px; height: 74px;
  object-fit: cover;
  object-position: 62% 18%;
  border-radius: 50%;
  border: 2px solid var(--lima);
  background: var(--bosque-suave);
  flex: none;
}
.v-avatar[hidden] { display: none; }
/* Inicial de quien aún no tiene póster propio (Emmanuel, mientras llega su
   clip): su letra sobre el verde de la casa, jamás una imagen inventada. */
.v-inicial {
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 2px solid var(--lima);
  background: var(--verde);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope", "DM Sans", system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 800;
  flex: none;
}
.v-inicial[hidden] { display: none; }
.v-titulos { flex: 1; min-width: 0; }
.v-titulos h2 { margin: 0; font-size: 1.45rem; font-weight: 800; }
.v-titulos p { margin: 0.1rem 0 0; color: var(--lima-suave); font-size: 0.9rem; }
.v-estado { display: flex; align-items: center; gap: 0.4em; color: #cfe8d6 !important; font-size: 0.82rem !important; }
.v-cerrar {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--blanco);
  border-radius: 50%;
  width: 42px; height: 42px;
  font-size: 1rem;
  cursor: pointer;
  flex: none;
}

.v-ficha {
  margin: 0.2rem 1.1rem 0.8rem;
  color: #e7f2ea;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* Chat */
.chat {
  margin: 0 1.1rem;
  border: 1px solid rgba(184, 245, 47, 0.25);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.7rem;
  overflow-y: auto;
  min-height: 150px;
  max-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.msg {
  max-width: 88%;
  padding: 0.55rem 0.75rem;
  border-radius: 0.8rem;
  font-size: 0.94rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg-ella { background: rgba(30, 123, 79, 0.35); align-self: flex-start; border-bottom-left-radius: 0.2rem; }
.msg-yo { background: var(--lima); color: var(--bosque); align-self: flex-end; border-bottom-right-radius: 0.2rem; font-weight: 600; }
.msg-sistema { background: transparent; border: 1px dashed rgba(243, 196, 119, 0.6); color: var(--dorado); align-self: center; font-size: 0.85rem; text-align: center; }

.chat-form {
  display: flex;
  gap: 0.5rem;
  margin: 0.7rem 1.1rem 0;
}
.chat-form textarea {
  flex: 1;
  resize: none;
  border-radius: 0.7rem;
  border: 1px solid rgba(184, 245, 47, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: var(--blanco);
  font-family: inherit;
  font-size: 1rem;
  padding: 0.6rem 0.7rem;
  min-height: 46px;
}
.chat-form textarea::placeholder { color: rgba(255, 255, 255, 0.55); }

.btn-lima {
  background: var(--lima);
  color: var(--bosque);
  border: none;
  border-radius: 0.7rem;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.98rem;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  min-height: 46px;
}
.btn-lima:disabled { opacity: 0.55; cursor: wait; }
.btn-fantasma {
  background: transparent;
  color: var(--blanco);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0.7rem;
  font-family: inherit;
  padding: 0.6rem 1rem;
  cursor: pointer;
  min-height: 46px;
}

.btn-pieza {
  margin: 0.8rem 1.1rem 1.1rem;
  background: rgba(184, 245, 47, 0.14);
  border: 1px solid var(--lima);
  color: var(--lima-suave);
  border-radius: 0.7rem;
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.7rem;
  cursor: pointer;
  min-height: 48px;
}

/* Formulario de pieza */
.pieza-form {
  margin: 0 1.1rem 1.1rem;
  border-top: 1px solid rgba(184, 245, 47, 0.25);
  padding-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.pieza-form[hidden] { display: none; }
.pieza-form h3 { margin: 0; font-size: 1.05rem; }
.pieza-nota { margin: 0; font-size: 0.85rem; color: var(--dorado); }
.pieza-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.88rem; color: #d9ecdf; }
.pieza-form input, .pieza-form select, .pieza-form textarea {
  border-radius: 0.6rem;
  border: 1px solid rgba(184, 245, 47, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: var(--blanco);
  font-family: inherit;
  font-size: 1rem;
  padding: 0.55rem 0.65rem;
}
.pieza-form select option { color: #111; }
.pieza-acciones { display: flex; gap: 0.5rem; }
.pieza-msg { margin: 0; font-size: 0.9rem; min-height: 1.2em; }
.pieza-msg.ok { color: var(--lima-suave); }
.pieza-msg.error { color: #ffb3a7; }

/* ---------- Trabajos para tu revisión ---------- */
.trabajos {
  margin: 0 1.1rem 0.9rem;
  border-top: 1px solid rgba(184, 245, 47, 0.25);
  padding-top: 0.8rem;
}
.trabajos h3 { margin: 0 0 0.55rem; font-size: 1.05rem; }
.trabajos-lista { display: flex; flex-direction: column; gap: 0.5rem; }
.tarjeta-trabajo {
  display: flex;
  align-items: stretch;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(184, 245, 47, 0.3);
  border-radius: 0.8rem;
  padding: 0.65rem 0.8rem;
  color: var(--blanco);
  font-family: inherit;
  cursor: pointer;
}
.tarjeta-trabajo .t-mini {
  flex: 0 0 4.2rem;
  width: 4.2rem;
  min-height: 4.2rem;
  object-fit: cover;
  border-radius: 0.55rem;
  border: 1px solid rgba(184, 245, 47, 0.35);
}
.tarjeta-trabajo .t-texto { display: block; flex: 1; min-width: 0; }
.tarjeta-trabajo:active { background: rgba(184, 245, 47, 0.16); }
.tarjeta-trabajo .t-tipo {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--lima-suave);
  text-transform: uppercase;
}
.tarjeta-trabajo .t-titulo { display: block; font-size: 0.98rem; font-weight: 700; margin-top: 0.15rem; }
.tarjeta-trabajo .t-meta { display: block; font-size: 0.82rem; color: #cfe8d6; margin-top: 0.2rem; }
.chip {
  display: inline-block;
  border-radius: 999px;
  padding: 0.08em 0.55em;
  font-size: 0.75rem;
  font-weight: 800;
  vertical-align: middle;
}
.chip-ejemplo { background: var(--dorado); color: var(--bosque); }
.chip-estado { background: rgba(184, 245, 47, 0.2); color: var(--lima-suave); border: 1px solid rgba(184, 245, 47, 0.45); }
.chip-revisado { background: rgba(255, 255, 255, 0.14); color: #d9ecdf; border: 1px solid rgba(255, 255, 255, 0.3); }
.trabajos-vacio {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #d9ecdf;
  border: 1px dashed rgba(184, 245, 47, 0.35);
  border-radius: 0.8rem;
  padding: 0.7rem 0.8rem;
}
.trabajos-vacio[hidden] { display: none; }

/* ---------- Interno: pases de trabajo entre las dos ---------- */
.internas {
  margin: 0 1.1rem 0.9rem;
  border-top: 1px solid rgba(184, 245, 47, 0.25);
  padding-top: 0.8rem;
}
.internas h3 { margin: 0 0 0.55rem; font-size: 1.05rem; }
.internas-lista { display: flex; flex-direction: column; gap: 0.5rem; }
.tarjeta-pase {
  background: rgba(243, 196, 119, 0.07);
  border: 1px dashed rgba(243, 196, 119, 0.55);
  border-radius: 0.8rem;
  padding: 0.65rem 0.8rem;
  color: var(--blanco);
}
.pase-cab { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pase-origen {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--dorado);
  text-transform: uppercase;
}
.pase-tema { display: block; font-size: 0.98rem; font-weight: 700; margin-top: 0.2rem; }
.pase-nota { margin: 0.3rem 0 0; font-size: 0.88rem; line-height: 1.45; color: #f2e7cf; }
.pase-acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.55rem; }
.internas-vacio {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #d9ecdf;
  border: 1px dashed rgba(243, 196, 119, 0.35);
  border-radius: 0.8rem;
  padding: 0.7rem 0.8rem;
}
.internas-vacio[hidden] { display: none; }
.internas-nota { margin: 0.5rem 0 0; font-size: 0.82rem; line-height: 1.45; color: #cfe8d6; }

/* ---------- Visor de entrega (página tipo documento) ---------- */
.velo-visor { z-index: 30; }
.visor {
  background: #f4f1e8;
  color: #1d2a21;
  border-radius: 0.9rem;
  width: min(640px, 100%);
  max-height: 92dvh;
  overflow-y: auto;
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.55);
}
.visor-cabeza {
  background: var(--bosque);
  color: var(--blanco);
  padding: 0.9rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.visor-cabeza .v-tipo { font-weight: 800; letter-spacing: 0.03em; font-size: 0.85rem; text-transform: uppercase; color: var(--lima-suave); flex: 1; }
.visor-doc { padding: 1.1rem 1.3rem 1.3rem; }
.visor-imagen {
  display: block;
  width: 100%;
  max-height: 46dvh;
  object-fit: contain;
  background: #e7e2d2;
  border-radius: 0.6rem;
  margin: 0 0 1rem;
}
.visor-imagen[hidden] { display: none; }
.visor-doc h3 { margin: 0 0 0.5rem; font-size: 1.3rem; line-height: 1.25; color: var(--bosque); }
.visor-meta { margin: 0 0 0.9rem; font-size: 0.88rem; color: #4c5c50; }
.visor-cuerpo {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.98rem;
  line-height: 1.55;
  border-top: 1px solid #ddd6c4;
  padding-top: 0.9rem;
}
.visor-acciones {
  display: flex;
  gap: 0.5rem;
  padding: 0 1.3rem 1.2rem;
  flex-wrap: wrap;
}
.visor-acciones .btn-lima { background: var(--verde); color: var(--blanco); }
.visor-acciones .btn-fantasma { color: var(--bosque); border-color: rgba(6, 29, 20, 0.4); }
.visor-nota { margin: 0; padding: 0 1.3rem 1.1rem; font-size: 0.82rem; color: #6b786d; }

/* ---------- Móvil: ventana como hoja inferior casi completa ---------- */
@media (max-width: 700px) {
  .velo { padding: 0; align-items: flex-end; }
  .ventana {
    width: 100%;
    max-height: 94dvh;
    border-radius: 1.2rem 1.2rem 0 0;
    border-bottom: none;
  }
  .chat { max-height: 34dvh; }
  /* Etiquetas sobre las cabezas: un poco más chicas en pantallas
     angostas, sin cambiar su ancla sobre cada cabeza. */
  .etiqueta {
    font-size: clamp(9px, 2.4vw, 11px);
    padding: 0.3em 0.6em;
    gap: 0.38em;
  }
}

/* Con movimiento reducido, app.js deja el póster fijo de la escena
   (escena-poster-3d.webp) y el video queda oculto y en pausa. */