/* Pórtico · demo — respaldo del cascarón (portico-demo). Sólo pinta las clases pd-*: el marco y los bloques
   sencillos que app.js usa cuando falta una plantilla de assets/bloques.js, la hoja de roles y el aviso «listo».
   assets/portico.css (portico-design) se carga después y manda; los colores salen de sus fichas (--persona = decide una
   persona, el semáforo = lo que decidió la puerta), con un valor de respaldo por si todavía no carga. */
.pd-marco { min-height: 100%; display: flex; flex-direction: column; background: radial-gradient(110% 60% at 80% 0%, #24262b 0%, #121316 55%, #0b0c0e 100%); }
.pd-barra { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px; background: rgba(18,19,22,.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid rgba(255,255,255,.07); }
.pd-titulos { min-width: 0; }
.pd-titulos small { display: block; color: var(--pd-s0); font: 11px/1.3 ui-monospace, 'Chivo Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.pd-titulos h1 { margin: 2px 0 0; font-size: 20px; line-height: 1.2; font-weight: 650; overflow-wrap: anywhere; }
.pd-volver, .pd-volver-hueco { width: 40px; height: 40px; }
.pd-volver { display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--pd-w); cursor: pointer; }
.pd-rol, .pd-rol-flotante { border: 1px solid color-mix(in srgb, var(--persona, #8f2fa6) 55%, transparent); background: color-mix(in srgb, var(--persona, #8f2fa6) 12%, transparent); color: var(--persona-luz, #d49ae3);
  border-radius: 999px; padding: 7px 12px; font: 600 13px/1 inherit; font-family: inherit; cursor: pointer; }
.pd-rol-flotante { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 12px; z-index: 20;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pd-contenido { flex: 1; padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 96px); display: grid; gap: 12px; align-content: start; }
.pd-horizonte { margin: 0; justify-self: start; padding: 4px 10px; border-radius: 999px; font: 12px/1.3 ui-monospace, 'Chivo Mono', monospace;
  background: rgba(255,255,255,.07); color: var(--pd-s1); }
.pd-pestanas { position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 5;
  display: flex; gap: 4px; padding: 6px; border-radius: 26px; background: rgba(26,27,31,.72);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.09); box-shadow: 0 18px 40px -18px rgba(0,0,0,.8); }
.pd-pestanas button { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 3px; padding: 8px 2px; border: 0; border-radius: 20px;
  background: transparent; color: var(--pd-s0); font: 600 11px/1.1 inherit; font-family: inherit; cursor: pointer; }
.pd-pestanas button i { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid currentColor; }
.pd-pestanas button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-pestanas button[aria-current] { color: var(--pd-w); background: rgba(255,255,255,.1); }

.pd-bloque { margin: 0; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08); min-width: 0; }
.pd-bloque h2 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 650; display: flex; gap: 8px; align-items: baseline; overflow-wrap: anywhere; }
.pd-bloque p { margin: 6px 0 0; color: var(--pd-s1); overflow-wrap: anywhere; }
.pd-bloque[data-ir] { cursor: pointer; }
.pd-decision { border-color: color-mix(in srgb, var(--persona, #8f2fa6) 60%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--persona, #8f2fa6) 16%, transparent), color-mix(in srgb, var(--persona, #8f2fa6) 5%, transparent)); }
.pd-estado[data-estado="verde"] { border-color: rgba(47,191,113,.55); }
.pd-estado[data-estado="rojo"] { border-color: rgba(200,50,47,.7); }
.pd-estado[data-estado="amarillo"] { border-color: rgba(245,197,24,.55); }
.pd-estado[data-estado="azul"] { border-color: rgba(78,161,255,.55); }
.pd-punto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--gris); display: inline-block; transform: translateY(-1px); }
.pd-punto[data-estado="verde"] { background: var(--verde); } .pd-punto[data-estado="azul"] { background: var(--azul); }
.pd-punto[data-estado="amarillo"] { background: var(--amarillo); } .pd-punto[data-estado="rojo"] { background: var(--rojo); }
.pd-punto[data-estado="oro"] { background: var(--persona, #8f2fa6); }
.pd-filas { list-style: none; margin: 10px -8px -8px; padding: 0; }
.pd-fila { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 8px; border: 0; border-radius: 12px; background: transparent;
  color: inherit; font: inherit; text-align: left; }
button.pd-fila { cursor: pointer; }
button.pd-fila:active, .pd-boton:active { transform: scale(.98); }
.pd-fila-txt { flex: 1; min-width: 0; display: grid; }
.pd-fila-txt b { font-weight: 600; overflow-wrap: anywhere; }
.pd-fila-txt small { color: var(--pd-s0); overflow-wrap: anywhere; }
.pd-fila em { flex: none; max-width: 40%; font: 12px/1.3 ui-monospace, 'Chivo Mono', monospace; font-style: normal; color: var(--pd-s1); text-align: right; }
.pd-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.pd-cifras > * { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.05); border: 0; color: inherit; font: inherit; text-align: left; }
.pd-cifras strong { font-size: 22px; font-weight: 650; }
.pd-cifras small { color: var(--pd-s0); }
.pd-campos { display: grid; gap: 10px; margin-top: 10px; }
.pd-campos label { display: grid; gap: 4px; }
.pd-campos span { color: var(--pd-s0); font-size: 13px; }
.pd-campos input, .pd-campos select, .pd-campos textarea { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); color: var(--pd-w); font: inherit; }
.pd-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pd-boton { flex: 1 1 auto; min-height: 44px; padding: 10px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08); color: var(--pd-w); font: 600 15px/1.2 inherit; font-family: inherit; cursor: pointer; }
.pd-acciones .pd-boton:first-child { background: var(--pd-w); color: #121316; border-color: transparent; }
.pd-visor-caja { display: grid; place-items: center; aspect-ratio: 16 / 10; margin: -4px -4px 12px; border-radius: 12px;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 10px, rgba(255,255,255,.07) 10px 20px); }
.pd-visor-caja span { font: 12px/1 ui-monospace, 'Chivo Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--pd-s1); }

.pd-aviso { position: absolute; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); z-index: 40;
  display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--dia-luz, #fcfbfd) 92%, transparent); color: var(--dia-tinta, #1c1421);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 20px 40px -18px rgba(0,0,0,.7);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .35s cubic-bezier(.2,.7,.2,1); }
.pd-aviso b { font-weight: 700; }
.pd-aviso.pd-visible { opacity: 1; transform: none; }
.pd-hoja-fondo { position: absolute; inset: 0; z-index: 50; display: flex; align-items: flex-end; background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pd-hoja { width: 100%; box-sizing: border-box; display: grid; gap: 8px; padding: 18px 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
  border-radius: 28px 28px 0 0; background: rgba(26,27,31,.9); border-top: 1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.pd-hoja small { color: var(--pd-s0); font: 11px/1.3 ui-monospace, 'Chivo Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.pd-hoja-rol { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05); color: var(--pd-w); font: inherit; cursor: pointer; }
.pd-hoja-rol span { color: var(--pd-s0); font-size: 14px; }
.pd-hoja-rol[aria-current] { border-color: color-mix(in srgb, var(--persona, #8f2fa6) 70%, transparent); }
.pd-hoja-mapa { background: transparent; border-style: dashed; }
.pd-hoja-cerrar { padding: 12px; border: 0; border-radius: 14px; background: transparent; color: var(--pd-s1); font: inherit; cursor: pointer; }

/* ---- Segunda vuelta: reproductor de recorridos, aviso que llega solo, portada, panel de escritorio, marca IA.
   Sencillo a propósito: portico-design lo viste (clases pd-*, o su propia plantilla Portico.portada). ---- */
.pd-ia { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; vertical-align: 2px;
  font: 700 10px/1.4 var(--mono, ui-monospace, monospace); letter-spacing: .06em;
  color: var(--persona-luz, #df90c5); border: 1px solid color-mix(in srgb, var(--persona, #9e2e79) 55%, transparent); }

.pd-recorrido { position: absolute; left: 12px; right: 12px; z-index: 30;
  bottom: calc(var(--abajo, env(safe-area-inset-bottom, 0px)) + var(--alto-pestanas, 68px) + 22px);
  display: grid; gap: 8px; padding: 12px 14px 12px; border-radius: 22px; color: #f4f9fa;
  background: color-mix(in srgb, #0a1a1e 84%, transparent); border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,.7); animation: pd-sube .35s var(--suave, ease-out); }
.pd-rec-cabeza { display: flex; align-items: center; gap: 8px; }
.pd-rec-cabeza small { flex: 1; min-width: 0; color: rgba(244,249,250,.7); font: 11px/1.35 var(--mono, ui-monospace, monospace);
  letter-spacing: .05em; text-transform: uppercase; }
.pd-rec-cerrar { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.1); color: inherit; cursor: pointer; }
.pd-recorrido p { margin: 0; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.pd-rec-botones { display: flex; gap: 8px; }
.pd-rec-botones button { flex: 1; min-height: 40px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06); color: inherit; font: 600 14px/1.1 var(--sans, inherit); cursor: pointer; }
.pd-rec-botones button[disabled] { opacity: .4; cursor: default; }
.pd-rec-botones .pd-rec-sigue { background: #f4f9fa; color: #0a1a1e; border-color: transparent; }

.pd-llegada { position: absolute; top: calc(var(--arriba, env(safe-area-inset-top, 0px)) + 8px); left: 10px; right: 10px; z-index: 60;
  display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 22px; text-align: left; cursor: pointer;
  border: 1px solid rgba(255,255,255,.5); color: var(--dia-tinta, #112227); font: inherit;
  background: color-mix(in srgb, var(--dia-luz, #f9fcfc) 82%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 22px 44px -16px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(-120%); transition: opacity .3s, transform .5s var(--resorte, cubic-bezier(.3,1.35,.5,1)); }
.pd-llegada.pd-visible { opacity: 1; transform: none; }
.pd-llegada img { flex: none; border-radius: 10px; }
.pd-llegada > span { display: grid; min-width: 0; }
.pd-llegada small { color: var(--dia-tenue, #5d7479); font-size: 12px; }
.pd-llegada b { font-size: 15px; }
.pd-llegada span span { font-size: 13px; color: var(--dia-texto, #334a4f); }

.pd-portada { min-height: 100%; box-sizing: border-box; display: grid; align-content: start; gap: 22px;
  padding: calc(var(--arriba, env(safe-area-inset-top, 0px)) + 40px) 20px calc(var(--abajo, env(safe-area-inset-bottom, 0px)) + 28px);
  color: #f4f9fa; background: radial-gradient(120% 70% at 75% 0%, #2f6a75 0%, #173a41 50%, #0a1a1e 100%); }
.pd-portada header { display: grid; gap: 8px; }
.pd-portada header img { border-radius: 18px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.7); }
.pd-portada h1 { margin: 6px 0 0; font-size: 40px; line-height: 1; letter-spacing: -.02em; }
.pd-portada-una { margin: 0; font-size: 19px; line-height: 1.35; }
.pd-portada-nota { margin: 0; color: rgba(244,249,250,.7); font-size: 14px; }
.pd-portada section { display: grid; gap: 8px; }
.pd-portada h2 { margin: 0; color: rgba(244,249,250,.65); font: 12px/1.3 var(--mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; }
.pd-portada-rol, .pd-portada-recorrido { display: grid; gap: 2px; padding: 13px 16px; border-radius: 18px; text-align: left; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: inherit; font: inherit;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.pd-portada-rol b, .pd-portada-recorrido b { font-size: 17px; }
.pd-portada-rol span, .pd-portada-recorrido span { color: rgba(244,249,250,.7); font-size: 14px; }
.pd-portada-primera { border-style: dashed; background: transparent; }
.pd-portada footer { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-portada footer button { padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: transparent;
  color: inherit; font: 600 14px/1 var(--sans, inherit); cursor: pointer; }

.pd-panel { box-sizing: border-box; max-height: min(844px, calc(100dvh - 48px)); overflow: auto; padding: 8px 4px;
  color: rgba(244,249,250,.92); font-size: 15px; }
.pd-panel-marca { color: rgba(244,249,250,.55); font: 11px/1.3 var(--mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; }
.pd-panel-rol { margin: 18px 0 4px; color: rgba(244,249,250,.7); }
.pd-panel h2 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -.01em; }
.pd-panel-contiene { margin: 10px 0 0; color: rgba(244,249,250,.8); }
.pd-panel dl { display: grid; gap: 10px; margin: 22px 0 0; }
.pd-panel dl div { display: grid; gap: 2px; }
.pd-panel dt { color: rgba(244,249,250,.5); font: 11px/1.3 var(--mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; }
.pd-panel dd { margin: 0; }
.pd-camino { margin-top: 22px; }
.pd-camino small, .pd-panel-recorrido small { display: block; margin-bottom: 6px; color: rgba(244,249,250,.5);
  font: 11px/1.3 var(--mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; }
.pd-camino ol { margin: 0; padding: 0 0 0 18px; display: grid; gap: 4px; }
.pd-camino button, .pd-panel-enlaces button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(244,249,250,.35); text-underline-offset: 3px; }
.pd-panel-recorrido { margin: 22px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.07); }
.pd-panel-enlaces { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 26px 0 0; }
.pd-panel-nota { margin: 14px 0 0; color: rgba(244,249,250,.5); font-size: 13px; }
@keyframes pd-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- Tercera vuelta: espacio bajo el contenido mientras corre un recorrido, buscador del mapa, aviso para instalar. ---- */
.pd-con-recorrido .lienzo { padding-bottom: calc(var(--alto-pestanas, 68px) + var(--abajo, 0px) + 200px); }
.pd-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pd-busca { position: sticky; top: calc(var(--alto-barra, 58px) + var(--arriba, 0px)); z-index: 4; margin: 0 0 12px; }
.pd-busca input { width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 16px; border-radius: 999px; font: 16px/1.2 var(--sans, inherit);
  color: var(--tinta, var(--dia-tinta, #112227)); border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, var(--dia-luz, #f9fcfc) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.pd-instala { display: grid; gap: 6px; margin: 18px 20px calc(var(--abajo, 0px) + 24px); padding: 14px 16px; border-radius: 18px;
  border: 1px dashed color-mix(in srgb, currentColor 30%, transparent); font-size: 14px; }
.pd-instala b { font-size: 15px; }
.pd-instala ol { margin: 0; padding-left: 20px; display: grid; gap: 2px; }
.pd-instala svg { vertical-align: -3px; }
.pd-instala span { opacity: .75; }
.pd-instala button { justify-self: start; margin-top: 4px; padding: 10px 16px; border-radius: 999px; border: 0; font: 600 15px/1 var(--sans, inherit);
  background: var(--marca, #235761); color: #fff; cursor: pointer; }