/* ==========================================================================
   PLAZA — el lugar y los puestos

   La sensación que se busca es entrar a un sitio y recorrerlo: un suelo que
   curva hacia un horizonte cálido, bruma al fondo y los puestos apoyados
   encima. No hay perspective, ni preserve-3d, ni una sola librería: la
   profundidad se hace con escala, luz y el mismo canto duro que ya tienen
   los botones y los nodos de la Ruta. Es la misma física del resto de la app.

   EL PROBLEMA DE LOS COLORES AJENOS
   En la Plaza conviven varios negocios, y css/temas.css deja que el negocio
   del usuario sobrescriba una familia entera de tokens (--neg-*). Si un
   puesto ajeno escribiera data-negocio, cualquier componente .neg-* que
   cayera dentro se pintaría con el color de otra persona dentro de su app.

   Por eso la Plaza tiene familia propia, --pz-*, que sale del SECTOR (que sí
   es un dato publicable) y no del tema que esa persona eligió para su app
   (que es una preferencia suya y no le dice nada a nadie).

   Y el color ajeno tiene un presupuesto: solo pinta el toldo. El cuerpo, el
   texto, el botón y la luz de los caminos siguen siendo de Emprendo. Así la
   pantalla nunca deja de ser de la casa.
   ========================================================================== */

/* ------------------------- El lugar ------------------------- */

/* position: relative es obligatorio: el suelo y la bruma se anclan aquí. Sin
   esto se anclarían a .viewport, que es el contenedor de scroll, y el
   horizonte se desplazaría con el contenido en vez de quedarse quieto. */
.plaza {
  position: relative;
  padding: 0;
  gap: 0;
  overflow: hidden;
  --pz-cielo-1: #FFF4E8;
  --pz-cielo-2: #FFEAD8;
  --pz-cielo-3: #FDF3EA;
  --pz-suelo-1: #FFE6CE;
  --pz-suelo-2: #FFDCC0;
  --pz-suelo-3: #FBD3B6;
  --pz-bruma:   #FFF6EC;
  background: linear-gradient(180deg,
    var(--pz-cielo-1) 0%, var(--pz-cielo-2) 34%, var(--pz-cielo-3) 62%, var(--bg) 100%);
}

/* De noche la plaza no cierra: se enciende. Los mismos tres planos, con la
   calidez en las luces en vez de en el cielo. */
html[data-theme="dark"] .plaza {
  --pz-cielo-1: #1B2233;
  --pz-cielo-2: #161D2C;
  --pz-cielo-3: #121A28;
  --pz-suelo-1: #241E24;
  --pz-suelo-2: #1E1A22;
  --pz-suelo-3: #171620;
  --pz-bruma:   #1E2536;
}

/* El suelo. La elipse es lo que curva el horizonte; el ancho negativo la saca
   por los lados para que la curva se lea como lejanía y no como una pastilla
   dibujada en el centro. */
.plaza__suelo {
  position: absolute;
  left: -24%; right: -24%; top: 150px; bottom: -90px;
  border-radius: 50% 50% 0 0 / 46% 46% 0 0;
  background:
    radial-gradient(120% 78% at 50% 0%, rgba(255, 255, 255, .86), transparent 58%),
    linear-gradient(180deg, var(--pz-suelo-1) 0%, var(--pz-suelo-2) 44%, var(--pz-suelo-3) 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .72);
  /* El borde de la elipse, sin esto, es una curva blanca dura cruzando la
     pantalla: se lee como una línea dibujada, no como un horizonte. La
     máscara la disuelve en los primeros 70 píxeles, que es donde la bruma
     tendría que estar haciendo su trabajo y no llega. */
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 70px);
  mask: linear-gradient(180deg, transparent 0, #000 70px);
  pointer-events: none;
}
html[data-theme="dark"] .plaza__suelo {
  background:
    radial-gradient(120% 78% at 50% 0%, rgba(255, 168, 90, .13), transparent 58%),
    linear-gradient(180deg, var(--pz-suelo-1) 0%, var(--pz-suelo-2) 44%, var(--pz-suelo-3) 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .06);
}

.plaza__bruma {
  position: absolute;
  left: 0; right: 0; top: 118px; height: 118px;
  background: linear-gradient(180deg, var(--pz-bruma) 8%,
              rgba(255, 246, 236, .55) 52%, transparent 100%);
  pointer-events: none;
}
html[data-theme="dark"] .plaza__bruma {
  background: linear-gradient(180deg, var(--pz-bruma) 8%,
              rgba(30, 37, 54, .55) 52%, transparent 100%);
}

.plaza__sol {
  position: absolute;
  left: 50%; top: 56px;
  transform: translateX(-50%);
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 201, 140, .62), rgba(255, 201, 140, 0) 66%);
  pointer-events: none;
}

/* El contenido va por encima de los tres planos y recupera el padding que
   .plaza le quitó al .screen. */
.plaza__cont {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s5) var(--s5) calc(var(--s8) + 20px);
}

/* ==========================================================================
   EL MUNDO

   Los tres planos de arriba —cielo, bruma, suelo— hacían un fondo. Lo que
   falta para que sea un LUGAR son las cosas que uno espera encontrarse en
   una plaza: puestos al fondo, faroles, una guirnalda cruzando y el suelo
   empedrado yendo hacia el horizonte.

   TODO SE MUEVE CON EL MISMO MANDO
   js/screens/plaza.js escribe --pz-scroll en .plaza con lo que lleva
   desplazado el visor, y cada plano lo multiplica por su distancia: el cielo
   casi no se mueve, el suelo se queda casi quieto y lo que está a tus pies
   viaja contigo. Es la única forma de que el ojo lea profundidad sin
   perspective, sin preserve-3d y sin una sola librería, que es la misma regla
   que ya seguía el resto de esta hoja.

   Un plano que no declare su multiplicador se queda pegado al contenido, que
   es lo que hacían los tres de antes.

   NADA DE ESTO SE PUEDE TOCAR
   El mundo entero es `pointer-events: none`. Lo único de esta pantalla con lo
   que se interactúa son las tarjetas y los botones, y un adorno que se coma
   un toque es un adorno que rompe la pantalla.
   ========================================================================== */

.plaza {
  --pz-lejos:  #B0855C;
  --pz-junta:  rgba(150, 110, 78, .055);
  --pz-poste:  #C9A889;
  --pz-luz:    rgba(255, 193, 120, 0);
  --pz-vidrio: rgba(255, 215, 154, 0);
  --pz-nube:   rgba(255, 255, 255, .60);
  --pz-mota:   rgba(255, 255, 255, 0);
}
html[data-theme="dark"] .plaza {
  --pz-lejos:  #3E4766;
  --pz-junta:  rgba(255, 255, 255, .04);
  --pz-poste:  #4A4356;
  /* De noche los faroles se encienden. Es el mismo cambio de tema que hace
     el resto de la app, contado con luz en vez de con color de fondo. */
  --pz-luz:    rgba(255, 193, 120, .55);
  /* El vidrio del farol. En claro es transparente y el farol es un poste; de
     noche se enciende y es lo único que alumbra la plaza. Un solo token, dos
     lecturas: no hay dos dibujos que mantener. */
  --pz-vidrio: #FFD79A;
  --pz-nube:   rgba(190, 205, 235, .10);
  --pz-mota:   rgba(255, 214, 150, .70);
}

/* Nubes. Dos bandas a distinta altura y a distinta velocidad: con una sola,
   el ojo la sigue y deja de ser fondo. */
.plaza__nubes {
  position: absolute;
  left: -20%; right: -20%; top: 24px; height: 96px;
  transform: translateY(calc(var(--pz-scroll, 0px) * .86));
  background:
    radial-gradient(46px 17px at 12% 30%, var(--pz-nube), transparent 70%),
    radial-gradient(34px 13px at 34% 62%, var(--pz-nube), transparent 70%),
    radial-gradient(58px 20px at 63% 22%, var(--pz-nube), transparent 70%),
    radial-gradient(40px 15px at 86% 58%, var(--pz-nube), transparent 70%);
  animation: pzNubes 120s linear infinite;
  pointer-events: none;
}
@keyframes pzNubes {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 240px 0, -180px 0, 300px 0, -140px 0; }
}

/* La plaza sigue más allá. Son tejados y cuerpos de puestos, no vecinos: no
   dicen un nombre, no se pueden tocar y no prometen a nadie. Un mercado
   tiene puestos aunque hoy no haya venido nadie a montarlos.

   Los tejados salen de una teja cónica —el mismo truco que el festón del
   toldo, con el vértice arriba en vez de la mordida abajo— y los cuerpos de
   una franja con hueco a los lados, las dos con el MISMO periodo de 40px
   para que cada tejado caiga sobre su puesto. */
.plaza__lejania {
  position: absolute;
  left: -8%; right: -8%; top: 112px; height: 48px;
  transform: translateY(calc(var(--pz-scroll, 0px) * .68));
  background:
    conic-gradient(from 135deg at 50% 0, var(--pz-lejos) 0 90deg, transparent 0) 0 0 / 34px 17px repeat-x,
    linear-gradient(90deg, transparent 0 4px, var(--pz-lejos) 4px 30px, transparent 30px 34px) 0 17px / 34px 27px repeat-x;
  /* Se disuelve hacia ABAJO, no hacia arriba. La primera versión fundía los
     22 píxeles de arriba, que es justo donde están los tejados: la fila
     entera se veía como una banda de rectángulos pálidos. Lo que tiene que
     desaparecer es la base, que es donde el suelo empieza. */
  -webkit-mask: linear-gradient(180deg, #000 0 58%, transparent 100%);
  mask: linear-gradient(180deg, #000 0 58%, transparent 100%);
  opacity: .55;
  pointer-events: none;
}

/* Una segunda fila, más pequeña, más pálida y con otro paso. Sin ella la
   primera se lee como una valla: es la repetición exacta lo que delata que
   son una teja repetida, y basta con que algo no cuadre para que el ojo deje
   de contar. */
.plaza__lejania::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -9px; height: 34px;
  background:
    conic-gradient(from 135deg at 50% 0, var(--pz-lejos) 0 90deg, transparent 0) 11px 0 / 25px 12px repeat-x,
    linear-gradient(90deg, transparent 0 3px, var(--pz-lejos) 3px 22px, transparent 22px 25px) 11px 12px / 25px 22px repeat-x;
  opacity: .55;
}

/* El empedrado. Las juntas radiales salen de un cónico repetido con el
   vértice en el horizonte: eso es exactamente lo que hace la perspectiva, y
   sale de una sola declaración. Las hiladas horizontales van a paso
   constante y la máscara se encarga de que arriba no se distingan, que es lo
   que el ojo espera de algo que se aleja. */
.plaza__adoquin {
  position: absolute;
  left: -24%; right: -24%; top: 176px; bottom: -60px;
  transform: translateY(calc(var(--pz-scroll, 0px) * .30));
  background:
    repeating-conic-gradient(from 90deg at 50% 0,
      var(--pz-junta) 0 .26deg, transparent .26deg 7deg),
    repeating-linear-gradient(0deg,
      var(--pz-junta) 0 1px, transparent 1px 46px);
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 110px, #000 55%, transparent 96%);
  mask: linear-gradient(180deg, transparent 0, #000 110px, #000 55%, transparent 96%);
  pointer-events: none;
}

/* Los faroles. Dos, a los lados, plantados en el suelo. De día son postes; de
   noche son la razón de que la plaza no cierre. */
.plaza__farol {
  position: absolute;
  top: 206px;
  width: 34px; height: 104px;
  /* El elemento es ancho y el poste es una franja pintada en el medio. Así
     cabe debajo la sombra de apoyo, que es lo único que separa un farol
     plantado en el suelo de un palo flotando en el aire. */
  background:
    radial-gradient(15px 4px at 50% 100%, rgba(120, 80, 50, .26), transparent 72%),
    linear-gradient(180deg, var(--pz-poste), rgba(0, 0, 0, .10)) 50% 0 / 7px 100% no-repeat;
  transform: translateY(calc(var(--pz-scroll, 0px) * .16));
  pointer-events: none;
}
html[data-theme="dark"] .plaza__farol {
  background:
    radial-gradient(18px 5px at 50% 100%, rgba(255, 193, 120, .18), transparent 72%),
    linear-gradient(180deg, var(--pz-poste), rgba(0, 0, 0, .10)) 50% 0 / 7px 100% no-repeat;
}
.plaza__farol--izq { left: 4%; }
.plaza__farol--der { right: 4%; }
.plaza__farol::before {
  content: '';
  position: absolute;
  left: 50%; top: -19px;
  margin-left: -12px;
  width: 24px; height: 27px;
  border-radius: 12px 12px 5px 5px;
  background: linear-gradient(180deg, var(--pz-poste), rgba(0, 0, 0, .18));
  box-shadow: 0 0 26px 8px var(--pz-luz);
}
/* El vidrio encendido. En claro es transparente y no se ve: no hay dos
   dibujos, hay uno que de noche tiene luz dentro. */
.plaza__farol::after {
  content: '';
  position: absolute;
  left: 50%; top: -14px;
  margin-left: -7px;
  width: 14px; height: 16px;
  border-radius: 7px 7px 3px 3px;
  background: var(--pz-vidrio);
  box-shadow: 0 0 14px 3px var(--pz-luz);
}

/* La guirnalda. Cruza por delante de todo lo del fondo y por detrás del
   contenido. Dos capas de banderines desfasadas media teja: así alternan de
   color sin necesitar un nodo por banderín. */
.plaza__guirnalda {
  position: absolute;
  left: -6%; right: -6%; top: 96px; height: 15px;
  transform: translateY(calc(var(--pz-scroll, 0px) * .80));
  background:
    conic-gradient(from 135deg at 50% 0, #E0703C 0 90deg, transparent 0) 0 0 / 30px 14px repeat-x,
    conic-gradient(from 135deg at 50% 0, #2FA67B 0 90deg, transparent 0) 15px 0 / 30px 14px repeat-x;
  border-top: 1.5px solid rgba(154, 132, 104, .45);
  opacity: .58;
  pointer-events: none;
}
html[data-theme="dark"] .plaza__guirnalda { opacity: .40; }

/* Motas de luz. De día es polvo al sol y de noche son luciérnagas: la misma
   capa, y lo único que cambia es de qué color son. */
.plaza__motas {
  position: absolute;
  left: 0; right: 0; top: 120px; height: 340px;
  transform: translateY(calc(var(--pz-scroll, 0px) * .58));
  background:
    radial-gradient(2.5px 2.5px at 14% 18%, var(--pz-mota), transparent 60%),
    radial-gradient(2px 2px   at 78% 32%, var(--pz-mota), transparent 60%),
    radial-gradient(3px 3px   at 32% 64%, var(--pz-mota), transparent 60%),
    radial-gradient(2px 2px   at 62% 82%, var(--pz-mota), transparent 60%),
    radial-gradient(2.5px 2.5px at 88% 70%, var(--pz-mota), transparent 60%);
  /* Late en opacidad y no en posición. Mover esta capa significaría escribir
     `transform` en una animación, y `transform` es justo donde vive el
     paralaje: la animación ganaría y la capa dejaría de tener profundidad. */
  animation: pzMotas 9s var(--ease-in-out) infinite alternate;
  pointer-events: none;
}
@keyframes pzMotas {
  from { opacity: .45; }
  to   { opacity: 1; }
}

/* Los tres planos que ya existían entran en el mismo sistema. Sin esto, el
   mundo nuevo se movía y el suelo de siempre se quedaba clavado al texto. */
.plaza__sol   { transform: translateX(-50%) translateY(calc(var(--pz-scroll, 0px) * .90)); }
.plaza__bruma { transform: translateY(calc(var(--pz-scroll, 0px) * .56)); }
.plaza__suelo { transform: translateY(calc(var(--pz-scroll, 0px) * .34)); }

/* De noche, el sol es una luna: el mismo disco, más pequeño y frío. */
html[data-theme="dark"] .plaza__sol {
  background:
    radial-gradient(circle at 50% 50%, rgba(226, 236, 255, .92) 0 16%, rgba(226, 236, 255, 0) 17%),
    radial-gradient(circle, rgba(150, 180, 240, .22), rgba(150, 180, 240, 0) 62%);
}

/* Quien pidió menos movimiento ve el mundo entero, quieto. El paralaje es
   decoración: la información —quién hay, qué puedes hacer— no está en él.

   El !important es la única forma de ganarle al valor que js/screens/plaza.js
   escribe en línea. Ese código ya comprueba la preferencia y no debería
   escribir nada; esto es el cinturón por si algún día alguien lo olvida. */
@media (prefers-reduced-motion: reduce) {
  .plaza { --pz-scroll: 0px !important; }
  .plaza__nubes, .plaza__motas { animation: none; }
}

/* ------------------------- Los sitios libres -------------------------

   La plaza tiene sitio para más. Se dibujan como lo que son —una lona
   doblada sobre una tarima vacía— y no como un puesto apagado: un puesto
   apagado se lee como alguien que se fue, y aquí nunca hubo nadie.

   Son botones y no adorno a propósito: tocar un sitio libre es la forma más
   corta de decir "aquí cabe alguien que conozco". Lleva a lo mismo que el
   botón de invitar, que sigue estando debajo con todas sus letras.
   ------------------------------------------------------------------- */

.pz-libres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.pz-libre {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 78px;
  padding: 0 0 8px;
  border-radius: var(--r-lg);
  border: 2px dashed var(--line);
  background: rgba(255, 255, 255, .34);
  transition: transform .14s var(--spring), border-color .2s var(--ease-out);
}
html[data-theme="dark"] .pz-libre { background: rgba(255, 255, 255, .04); }
.pz-libre:active { transform: scale(.96); }

/* La lona doblada: una franja gris con el mismo festón del toldo, más corta
   y sin brillo. Es el mismo puesto, sin estrenar. */
.pz-libre::before {
  content: '';
  position: absolute;
  left: 8px; right: 8px; top: 8px;
  height: 22px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(150deg, var(--line), var(--line-2));
  -webkit-mask:
    radial-gradient(7px 8px at 50% 0, transparent 99%, #000 100%) 0 100% / 16px 9px repeat-x,
    linear-gradient(#000, #000) 0 0 / 100% calc(100% - 8px) no-repeat;
  mask:
    radial-gradient(7px 8px at 50% 0, transparent 99%, #000 100%) 0 100% / 16px 9px repeat-x,
    linear-gradient(#000, #000) 0 0 / 100% calc(100% - 8px) no-repeat;
}

.pz-libre__t {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ------------------------- El puesto ------------------------- */

.pz-hueco { position: relative; display: flex; flex-direction: column; align-items: center; }

.puesto {
  position: relative;
  width: 100%;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--card), var(--card-2));
  border: 2px solid var(--line-2);
  overflow: hidden;
  text-align: left;
  box-shadow: 0 6px 0 var(--pz-canto), 0 22px 34px -20px rgba(16, 32, 58, .30);
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
.puesto:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 var(--pz-canto), 0 10px 20px -16px rgba(16, 32, 58, .30);
}

/* El toldo. El festón —la fila de semicírculos mordidos del borde inferior—
   es la misma técnica de máscara que usa .node__ring: sin imágenes y sin SVG,
   así que hereda el color de la variable y no hay nada que redibujar. */
.puesto__toldo {
  position: relative;
  height: 52px;
  display: flex;
  align-items: flex-start;
  padding: 11px var(--s4) 0;
  background: linear-gradient(150deg, var(--pz-toldo), var(--pz-toldo-2));
  -webkit-mask:
    radial-gradient(9px 11px at 50% 0, transparent 99%, #000 100%) 0 100% / 22px 12px repeat-x,
    linear-gradient(#000, #000) 0 0 / 100% calc(100% - 11px) no-repeat;
  mask:
    radial-gradient(9px 11px at 50% 0, transparent 99%, #000 100%) 0 100% / 22px 12px repeat-x,
    linear-gradient(#000, #000) 0 0 / 100% calc(100% - 11px) no-repeat;
}
/* El mismo brillo especular que llevan .node y .pbar__fill. */
.puesto__toldo::after {
  content: '';
  position: absolute;
  inset: 5px 14px auto;
  height: 34%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), transparent);
  pointer-events: none;
}

/* Lo único que va en blanco sobre el color ajeno. Los seis valores de abajo
   son los --neg-acento de css/temas.css, que ya están medidos a >= 4.5:1
   contra blanco: por eso esta línea se puede leer siempre. El nombre y las
   frases van en el cuerpo, nunca sobre el toldo, y con eso desaparece de
   golpe todo el riesgo de contraste de una paleta ajena. */
.puesto__sector {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #fff;
  opacity: .94;
}

.puesto__cuerpo { padding: 12px var(--s4) var(--s4); }
.puesto__nombre { font-size: var(--fs-lg); font-weight: 900; letter-spacing: -.2px; color: var(--ink); }
.puesto__linea  { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); line-height: 1.45; margin-top: 3px; }

/* El puesto propio. El anillo naranja es de marca, no del sector: lo que
   distingue tu puesto es que es tuyo, no de qué es tu negocio. */
.puesto--tuyo {
  box-shadow: 0 6px 0 var(--pz-canto), 0 0 0 3px rgba(255, 107, 26, .20),
              0 22px 34px -20px rgba(16, 32, 58, .30);
}
/* Sin este hueco, la etiqueta se sienta encima del rótulo del sector en las
   pantallas estrechas. */
.puesto--tuyo .puesto__toldo { padding-right: 96px; }

.puesto__mio {
  position: absolute;
  top: 11px; right: 12px;
  z-index: 3;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .7px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .92);
  color: var(--brand-dark);
  padding: 4px 9px;
  border-radius: var(--r-full);
}

.pz-aura { border-radius: var(--r-xl); animation: glowPulse 2.6s var(--ease-in-out) infinite; }

/* --- El porqué ---

   Va DENTRO de la tarjeta y no debajo: es parte de la recomendación, no un
   pie de página. En naranja de marca y no en el color del toldo, porque
   quien lo dice es Emprendo, no el negocio de enfrente. */
.puesto__porque {
  margin-top: 11px;
  padding: 9px 12px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: var(--brand-soft);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.4;
  color: var(--brand-dark);
}
/* 15px dejaba el icono dibujado en una mancha de color ilegible: los del
   alfabeto visual escalan con el tamaño de letra. */
.puesto__porque__ico { flex: none; font-size: 19px; line-height: 1; margin-top: -1px; }

.puesto__pie { padding: 0 var(--s4) var(--s4); }

/* Ya le dijo que ve valor. Deja de ser una tarjeta con la que actuar y pasa a
   ser una espera, así que baja de intensidad en vez de desaparecer: quitarla
   haría parecer que no pasó nada. */
.puesto--enviado { opacity: .82; }
.puesto__espera {
  display: flex;
  gap: 9px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--line-2);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  transition: transform .12s var(--spring);
}
.puesto__espera:active { transform: scale(.97); }

/* --- Las intenciones --- */
.pz-intencion {
  display: flex;
  gap: 11px;
  align-items: center;
  text-align: left;
  width: 100%;
}
.pz-intencion__ico { flex: none; font-size: 22px; }

/* ------------------------- Los toldos ------------------------- */

/* Lista cerrada y derivada del sector, que ya es un campo publicable. Los hex
   son los --neg-acento de css/temas.css: no se inventa una paleta nueva y no
   hace falta volver a medir el contraste.

   Selector de atributo pelado, como en temas.css, para que las variables
   hereden solo dentro de su puesto y no manchen la pantalla. */
[data-toldo]              { --pz-toldo: #14807A; --pz-toldo-2: #1FA59C; --pz-canto: #0C635E; }
[data-toldo="comida"]     { --pz-toldo: #B5451B; --pz-toldo-2: #E0703C; --pz-canto: #8A3312; }
[data-toldo="hechoamano"] { --pz-toldo: #94651F; --pz-toldo-2: #C08B33; --pz-canto: #6B4915; }
[data-toldo="servicios"]  { --pz-toldo: #1E7A5A; --pz-toldo-2: #2FA67B; --pz-canto: #145C42; }
[data-toldo="digital"]    { --pz-toldo: #585CD1; --pz-toldo-2: #7A7DE8; --pz-canto: #383BA5; }
[data-toldo="reventa"]    { --pz-toldo: #1F6FA8; --pz-toldo-2: #3E9AD4; --pz-canto: #15547F; }

/* El cortafuegos. Si algún día alguien reutiliza un componente .neg-* dentro
   de un puesto que no es el suyo, se pinta neutro: ni con SU color (sería
   mentira, no es su negocio) ni con el del otro (sería dejar entrar un estilo
   ajeno a su app). Vale la pena aunque hoy no haya puestos ajenos: el día que
   los haya, esta regla ya estará puesta. */
.puesto:not(.puesto--tuyo) {
  --neg-acento:        #14807A;
  --neg-acento-2:      #1FA59C;
  --neg-acento-dark:   #0C635E;
  --neg-acento-soft:   #E6F5F3;
  --neg-acento-fuerte: #0B5C57;
  --neg-acento-rgb:    31, 165, 156;
}

/* El interruptor de apariencia apaga TU toldo, igual que apaga el héroe del
   expediente: significa "la app no se pinta con mi negocio". No apaga los
   toldos ajenos, porque ahí el color no es adorno sino lo que te deja
   distinguir un puesto de otro. */
html[data-personaliza="off"] .puesto--tuyo {
  --pz-toldo: #14807A; --pz-toldo-2: #1FA59C; --pz-canto: #0C635E;
}

/* ------------------------- El camino ------------------------- */

/* Existe siempre, apagado. Encenderlo ES la recomendación: no hay un adorno
   que se ilumine además de la tarjeta, la luz es el mensaje. */
.camino {
  position: relative;
  width: 5px;
  height: 56px;
  margin: 0 auto;
  border-radius: 99px;
  background: repeating-linear-gradient(180deg,
    rgba(190, 160, 130, .42) 0 7px, transparent 7px 14px);
}
.camino--largo { height: 44px; }

html[data-theme="dark"] .camino {
  background: repeating-linear-gradient(180deg,
    rgba(255, 255, 255, .16) 0 7px, transparent 7px 14px);
}

.camino--on {
  background: linear-gradient(180deg,
    rgba(255, 107, 26, .14), rgba(255, 107, 26, .42), rgba(255, 107, 26, .14));
  box-shadow: 0 0 12px rgba(255, 107, 26, .34);
}

/* El farol que viaja. Sube cuando eres tú quien puede acercarse y baja cuando
   alguien ya se acercó a ti: dos direcciones, dos significados. */
.camino--on::after {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  margin-left: -5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF0D8, var(--brand));
  box-shadow: 0 0 12px 3px rgba(255, 107, 26, .55);
  --pz-viaje: 46px;
  animation: caminoViaja 2.4s var(--ease-in-out) infinite;
}
.camino--baja::after {
  --pz-viaje: -46px;
  top: auto; bottom: 0;
  animation-delay: .6s;
}

@keyframes caminoViaja {
  0%   { transform: translateY(0); opacity: 0 }
  14%  { opacity: 1 }
  86%  { opacity: 1 }
  100% { transform: translateY(var(--pz-viaje)); opacity: 0 }
}

/* Quien pidió menos movimiento sigue viendo que el camino está encendido —eso
   es información, no adorno—, pero el farol deja de viajar. La regla global de
   css/tokens.css ya lo congelaría; esta lo esconde del todo para que no quede
   una bolita parada a medio camino. */
@media (prefers-reduced-motion: reduce) {
  .camino--on::after { display: none; }
  .pz-aura { animation: none; }
}

/* ------------------------- Revisar la vitrina ------------------------- */

.vit-fila {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  width: 100%;
  padding: 13px 0;
  border-bottom: 2px solid var(--line-2);
  text-align: left;
  background: none;
}
.vit-fila:last-child { border-bottom: 0; }
.vit-fila__et {
  display: block;
  font-size: 10px; font-weight: 900;
  letter-spacing: .7px; text-transform: uppercase;
  color: var(--ink-3);
}
.vit-fila__val {
  font-size: var(--fs-md); font-weight: 800;
  color: var(--ink); line-height: 1.45; margin-top: 2px;
}
.vit-fila__val.is-falta { color: var(--ink-3); font-weight: 700; font-style: italic; }
.vit-fila__lapiz {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--line-2);
  font-size: 13px;
  transition: transform .12s var(--spring);
}
.vit-fila:active .vit-fila__lapiz { transform: scale(.88); }

/* Lo que se queda dentro. Borde discontinuo a propósito: se lee como "esto no
   está publicado" sin necesidad de escribirlo dos veces. */
.pz-fuera {
  background: var(--card);
  border: 2px dashed var(--line);
  border-radius: var(--r-lg);
  padding: var(--s4);
}
.pz-fuera__f {
  display: flex; gap: 9px; align-items: center;
  padding: 5px 0;
  font-size: var(--fs-sm); font-weight: 800; color: var(--ink-3);
}
.pz-fuera__f > span:first-child { color: var(--green-dark); font-size: 15px; }

/* ------------------------- La promesa de la Plaza -------------------------

   No hay estilos aquí a propósito: la segunda promesa reutiliza el molde de
   .promesa entero (css/components.css:646). Es la misma escena, el mismo aire
   y las mismas tres filas, y tiene que serlo — quien ya vio "Tu idea es tuya"
   debe reconocer al instante que esto es lo mismo, un escalón más arriba.
   Lo único que no se hereda es el escudo, que se inyecta en promesa.js y
   allí se queda.                                                            */

/* ------------------------- La conversación -------------------------

   Dos burbujas y nada más. Sin avatares, sin horas, sin "visto": lo que
   importa aquí es lo que se dicen, y cada adorno de más es una cosa que
   mirar en vez de leer.

   El mío va en naranja de marca y el suyo en la tarjeta neutra — nunca en el
   color de su sector. El toldo dice de qué es su negocio; un mensaje no. */
.pz-msg {
  max-width: 84%;
  align-self: flex-start;
  padding: 11px 14px;
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sm);
  background: var(--card);
  border: 2px solid var(--line-2);
  box-shadow: var(--sh-1);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  /* Lo escribió otra persona: puede venir con un salto de línea o con una
     palabra kilométrica sin espacios. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pz-msg--mio {
  align-self: flex-end;
  border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
  background: var(--brand-soft);
  border-color: var(--brand-soft);
  color: var(--brand-dark);
}