/* ============================================================================================================
PANTALLA COMPLETA · Arma tu feria (#armador), Planea tu feria en tu terreno (#plano) y Realidad aumentada (#ar)
Lo controla js/pantalla.js. Se carga después de sistema.css y usa sus tokens. Lo propio del armador (v13) está en
css/v13-armador.css §9; #ar ya no es una sección (es un ancla de #explora) y no se abre como capa.
La sección abierta va en con .app-full.abierta.pc-abierta y data-pc="armador|plano|ar": fija, de 100dvh,
con la barra .pc-barra arriba (nombre, aviso y Cerrar). En su lugar de la página queda un .pc-hueco del mismo alto.
El 3D del armador se sigue dibujando en #gl (z 5), debajo de la capa (z 70): ahí la capa es transparente y el fondo
del escenario lo pone body::after (z 4), debajo del lienzo.
============================================================================================================ */
:root{--pc-ico-abrir:url("data:image/svg+xml;utf8,")}
/* ---------- 1. botón "Abrir en pantalla completa" (index.html: [data-pantalla-completa]) ---------- */
[data-pantalla-completa]:not(.pc-portada)::before{content:"";display:inline-block;flex:none;width:14px;height:14px;margin-right:2px;vertical-align:-2px;background:currentColor;
-webkit-mask:var(--pc-ico-abrir) center/contain no-repeat;mask:var(--pc-ico-abrir) center/contain no-repeat}
[data-pantalla-completa]:not(.pc-portada):has(svg)::before{content:none}
/* ---------- 2. portada en celular sobre las herramientas encajadas en la página (si el marcado no trae .app-portada) ---------- */
.pc-portada{display:none}
@media(max-width:900px){
/* encajada, la herramienta es una vista previa de alto fijo; la portada la cubre y la abre */
.pc-con-portada{position:relative;max-height:min(70svh,580px);overflow:hidden;border-radius:var(--r-tarjeta)}
.pc-portada{position:absolute;inset:0;z-index:8;display:grid;place-items:center;align-content:end;gap:12px;width:100%;height:100%;margin:0;padding:24px 20px 30px;
border:0;border-radius:inherit;cursor:pointer;font:inherit;color:var(--tinta);text-align:center;-webkit-tap-highlight-color:transparent;
background:linear-gradient(180deg,rgba(14,9,34,.04) 0%,rgba(14,9,34,.12) 40%,rgba(14,9,34,.9) 66%,rgba(14,9,34,.98) 82%)}
.pc-portada-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--r-pill);
background:var(--accion,#C9A24E);color:var(--accion-tinta,#1B1440);
font-family:var(--f-texto);font-weight:500;font-size:15px;letter-spacing:.01em;
box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 24px -16px rgba(0,0,0,.85);transition:background-color .2s cubic-bezier(.16,1,.3,1),transform .2s}
@media(hover:hover){.pc-portada:hover .pc-portada-btn{background-color:#D7B35E}}
.pc-portada-btn::before{content:"";width:14px;height:14px;flex:none;background:currentColor;-webkit-mask:var(--pc-ico-abrir) center/contain no-repeat;mask:var(--pc-ico-abrir) center/contain no-repeat}
.pc-portada .mini{display:inline-flex;align-items:center;gap:8px;color:var(--tinta-2)}
.pc-portada .mini::before{content:"";width:5px;height:5px;background:var(--tono,var(--cobre));transform:rotate(45deg)}
.pc-portada:active .pc-portada-btn{transform:scale(.98)}
/* con el marcado de .app-portada (sistema.css §11): lo que queda debajo (HUD y paleta del armador, paneles de Planea tu feria)
se ve NÍTIDO, sin opacidad ni blur (el cliente veía borrosos los nombres de los juegos del armador y difuminados el mapa y la
maqueta). Lo que separa el botón de los controles es el velo de la portada: transparente arriba (ahí va la paleta con los
nombres) y oscuro abajo, con el botón abajo, como en Planea tu feria. Ojo: .abierta/.pc-abierta las recibe la
(pantalla.js), no el .app-full anidado: por eso se acota con :not(.pc-abierta *), para no alcanzar la capa abierta. */
html:not(.pc-fallo) .app-full:not(.abierta):not(.pc-abierta):not(.pc-abierta *) :is(.terreno .hud,.paleta,.pf-panel){opacity:1;filter:none}
.app-full:not(.abierta):not(.pc-abierta):not(.pc-abierta *) .app-portada{align-content:end;padding-bottom:26px;
background:linear-gradient(180deg,rgba(12,8,30,0) 0%,rgba(12,8,30,.08) 40%,rgba(12,8,30,.76) 68%,rgba(12,8,30,.94) 100%)}
/* bajo la portada no se puede arrastrar nada: la pista «Arrastra un juego…» del armador se guarda (en tableta de pie, 768 px,
cruzaba el texto «Abrir a pantalla completa» del botón, que también va abajo); vuelve al abrir la herramienta */
.app-full:not(.abierta):not(.pc-abierta):not(.pc-abierta *) .terreno .pista{visibility:hidden}
}
/* sin js/pantalla.js (html.pc-fallo, ver index.html) los botones y portadas no abrirían nada: se quitan y cada herramienta
queda usable encajada en la página */
html.pc-fallo [data-pantalla-completa],html.pc-fallo .app-portada,html.pc-fallo .pc-portada{display:none!important}
/* ---------- 3. la capa abierta ---------- */
.app-full.pc-abierta{position:fixed!important;inset:0!important;z-index:var(--z-app)!important;display:flex!important;flex-direction:column!important;
width:auto!important;height:100vh!important;height:100dvh!important;max-width:none!important;min-height:0!important;margin:0!important;
padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)!important;
border:0!important;border-radius:0!important;overflow:hidden!important;overscroll-behavior:contain;transform:none!important;filter:none!important;
-webkit-clip-path:none!important;clip-path:none!important;color:var(--tinta);background:var(--s-1)}
.app-full.pc-abierta::before,.app-full.pc-abierta::after{content:none!important}
/* tono de respaldo si la sección no trae data-tono (armador magenta, plano cian, AR violeta) */
.pc-abierta[data-pc="armador"]:not([data-tono]){--tono:#E6258F;--tono-claro:#F59CC8;--tono-suave:rgba(230,37,143,.11);--tono-filete:rgba(230,37,143,.5)}
.pc-abierta[data-pc="plano"]:not([data-tono]){--tono:#46D6F0;--tono-claro:#A6EAF7;--tono-suave:rgba(70,214,240,.08);--tono-filete:rgba(70,214,240,.45)}
.pc-abierta[data-pc="ar"]:not([data-tono]){--tono:#8B3FE0;--tono-claro:#C4A2F2;--tono-suave:rgba(139,63,224,.14);--tono-filete:rgba(139,63,224,.55)}
@media(prefers-reduced-motion:no-preference){
.app-full.pc-abierta{animation:pcEntra .42s var(--ease-salida) both}
.app-full.pc-abierta > .pc-barra{animation:pcBarra .6s var(--ease-salida) both}
}
@keyframes pcEntra{from{opacity:0}}
@keyframes pcBarra{from{opacity:0;transform:translateY(-10px)}}
/* lo que en la capa sobra: el botón de abrir, portadas, la barra propia de un .app-full interior y los huecos */
.pc-abierta [data-pantalla-completa],.pc-abierta .pc-portada,.pc-abierta .app-portada,.pc-abierta .app-hueco,
.pc-abierta .app-full:not(.pc-abierta) > .app-barra:not(.pc-barra){display:none!important}
/* si el marcado envuelve la herramienta en un .app-full, ese marco interior solo rellena */
.pc-abierta .app-full:not(.pc-abierta),.pc-abierta .app-cuerpo{display:flex;flex-direction:column;flex:1 1 auto;min-height:0!important;height:auto!important;width:100%;max-width:none;
margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;pointer-events:auto!important}
.pc-abierta .app-full:not(.pc-abierta)::before,.pc-abierta .app-full:not(.pc-abierta)::after{content:none}
/* lo revelado por scroll se ve completo dentro de la capa */
.pc-abierta .rev{opacity:1;transform:none;visibility:visible}
/* en la capa, la herramienta ya no es vista previa */
.pc-abierta .pc-con-portada{max-height:none;overflow:visible;border-radius:0}
/* el hueco que guarda el lugar en la página */
.pc-hueco{display:block;visibility:hidden;pointer-events:none}
/* fondo del escenario debajo del lienzo 3D (el armador es transparente; en las demás lo tapa la capa) */
body.app-abierta::after{content:"";position:fixed;inset:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,#18113A 0%,#120C2B 45%,#0C0820 100%)}
body.en-ar::after{content:none!important}
/* el aviso flotante de app.js queda encima de la capa y, en celular, arriba (bajo la barra): abajo tapaba los botones del
terreno y la paleta */
body.app-abierta > #ar-aviso{z-index:calc(var(--z-app) + 2)}
@media(max-width:900px){
body.app-abierta > #ar-aviso{top:calc(env(safe-area-inset-top,0px) + 56px);bottom:auto;transform:translate(-50%,-8px)}
body.app-abierta > #ar-aviso.on{transform:translate(-50%,0)}
/* Arma tu feria (v13): bajo la barra del juego elegido (Girar, Quitar, Vaciar), no encima; queda sobre el cielo del terreno */
body.app-abierta:has(> #armador.pc-abierta) > #ar-aviso{top:calc(env(safe-area-inset-top,0px) + 118px)}
}
/* el paseo en la rueda sale desde el armador abierto: sistema.css esconde todo lo que no sea la capa, menos él */
html body.app-abierta.paseo > #paseo:not(#pc-1):not(#pc-2):not(#pc-3):not(#pc-4),
html body.app-abierta.paseo > #paseo:not(#pc-1):not(#pc-2):not(#pc-3):not(#pc-4) *{visibility:visible!important}
/* ---------- 4. barra superior ---------- */
.pc-barra{flex:none;position:relative;z-index:9;display:flex;align-items:center;gap:12px;min-height:60px;margin:0;padding:8px 10px 8px clamp(14px,2vw,22px);
border:0!important;background:rgba(12,8,30,.86);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15)}
.pc-barra::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--grad-fino);opacity:.75;pointer-events:none}
.pc-barra .app-titulo{min-width:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-barra .app-titulo::before{width:7px;height:7px;background:var(--oro-brillo,#EEB73A);opacity:.9}
.pc-pista{flex:none;margin:0;color:var(--tinta-3)}
/* en la AR la nota de la cámara y "Esc para salir" van separadas por un punto: no se leen como una sola frase */
.pc-nota:not(:empty) + .pc-pista::before{content:"·";margin-right:10px;color:var(--tinta-3)}
.pc-nota{flex:0 1 auto;min-width:0;margin:0;color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-nota:empty{display:none}
.pc-panel{display:none}
.app-full.pc-abierta .pc-cerrar{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;width:auto;min-width:44px;height:44px;padding:0 16px 0 13px;
border-radius:var(--r-pill);border:1px solid var(--filete-3);background:rgba(243,238,227,.04);color:var(--tinta);
font-family:var(--f-texto);font-weight:500;font-size:14px;letter-spacing:.01em;line-height:1;cursor:pointer;
transition:border-color var(--t-rapido),background-color var(--t-rapido)}
.app-full.pc-abierta .pc-cerrar svg{width:16px;height:16px}
@media(hover:hover){.app-full.pc-abierta .pc-cerrar:hover{border-color:rgba(243,238,227,.6);background:rgba(243,238,227,.08)}}
/* celular: barra de 48 px (título en una línea con puntos suspensivos, Cerrar de 44 px solo con su ícono) */
@media(max-width:900px){
.pc-barra{min-height:48px;height:48px;gap:8px;padding:2px 2px 2px 14px}
.pc-nota,.pc-pista{display:none}
.app-full.pc-abierta .pc-cerrar{width:44px;padding:0;gap:0}
.app-full.pc-abierta .pc-cerrar span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* ---------- 5. Arma tu feria ----------
Desde v13 la capa abierta del armador (paleta, terreno, resumen, Cotizar en la barra del celular, rombos de las esquinas)
vive en css/v13-armador.css §9, con el resto de la herramienta. Aquí solo queda lo genérico de la capa (§3 y §4). */
/* ---------- 6. Planea tu feria en tu terreno (js/plano.js y los módulos planea-mapa y planea-maqueta) ----------
Arriba la barra con el nombre, los pasos Mapa y Maqueta 3D (pantalla.js los sube con [data-pc-en-barra]) y Cerrar; abajo,
el panel del paso elegido ocupa todo lo demás. En celular la barra es solo pasos + Cerrar (el nombre queda para el lector
de pantalla). */
.pc-abierta[data-pc="plano"] > .wrap{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;width:100%;max-width:none;margin:0;padding:0}
.pc-abierta[data-pc="plano"] :is(.cab,.pf-nota,.pf-respaldo){display:none!important}
.pc-abierta[data-pc="plano"] .pf-cuerpo{background:var(--s-0)}
.pc-abierta[data-pc="plano"] .pc-barra{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;column-gap:14px}
.pc-abierta[data-pc="plano"] .pc-barra > .app-titulo{grid-column:1}
.pc-abierta[data-pc="plano"] .pc-barra > .pf-pasos{grid-column:2}
.pc-abierta[data-pc="plano"] .pc-barra > .pc-pista{grid-column:3;justify-self:end}
.pc-abierta[data-pc="plano"] .pc-barra > .pc-cerrar{grid-column:4}
@media(max-width:1100px){.pc-abierta[data-pc="plano"] .pc-pista{display:none}}
@media(max-width:900px){
/* los pasos van en la misma barra de 48 px (no ocupan otra fila): píldora de 44 px de alto */
.pc-abierta[data-pc="plano"] .pc-barra{display:flex;gap:6px;padding:2px}
.pc-abierta[data-pc="plano"] .pc-barra > .app-titulo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pc-abierta[data-pc="plano"] .pc-barra > .pf-pasos{flex:1 1 auto;min-width:0;height:44px;padding:2px;align-items:stretch}
.pc-abierta[data-pc="plano"] .pc-barra .pf-paso{min-height:0;padding-top:0;padding-bottom:0}
}
/* teléfono acostado: pasos en una sola línea para que el panel no quede de una franja */
@media(max-width:900px) and (orientation:landscape) and (max-height:520px){
/* píldora al ras de la barra (sin relleno ni borde: el filete es una sombra interior), como plano.css en vertical: cada paso
mide 44 px de alto (antes 38) */
.pc-abierta[data-pc="plano"] .pc-barra{min-height:48px;padding-top:2px;padding-bottom:2px}
.pc-abierta[data-pc="plano"] .pc-barra > .pf-pasos{display:flex;height:44px;padding:0;border:0;box-shadow:inset 0 0 0 1px var(--filete-2);border-radius:var(--r-pill)}
.pc-abierta[data-pc="plano"] .pc-barra .pf-paso{flex:1 1 auto;flex-direction:row;justify-content:center;min-height:44px;padding:0 12px 0 5px;border-radius:var(--r-pill);white-space:nowrap}
}
/* ---------- 7. Realidad aumentada ---------- */
.pc-abierta[data-pc="ar"] > :not(.pc-barra):not(:has(.ar-card)){display:none!important}
.pc-abierta[data-pc="ar"] .wrap:has(.ar-card){flex:1 1 auto;min-height:0;width:100%;max-width:none;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;
align-items:stretch;padding:16px clamp(12px,2vw,28px) 18px}
.pc-abierta[data-pc="ar"] .ar-card{width:100%;max-width:920px;min-height:0;height:100%;margin:0 auto;overflow-y:auto;overscroll-behavior:contain;opacity:1;transform:none;
scrollbar-width:thin;scrollbar-color:rgba(243,238,227,.2) transparent;background:var(--s-2);border-color:var(--filete-1);border-radius:var(--r-tarjeta)}
.pc-abierta[data-pc="ar"] .ar-lista{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.pc-abierta[data-pc="ar"] .ar-lista :is(button,a):last-child:nth-child(odd){grid-column:auto}
.pc-abierta[data-pc="ar"] .ar-foto{position:relative;top:auto;height:100%;min-height:0;opacity:1;transform:none}
@media(min-width:1100px){
.pc-abierta[data-pc="ar"] .wrap:has(.ar-card){grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.pc-abierta[data-pc="ar"] .ar-card{max-width:none}
}
@media(max-width:1099px){.pc-abierta[data-pc="ar"] .ar-foto{display:none}}
@media(max-width:900px){
.pc-abierta[data-pc="ar"] .wrap:has(.ar-card){padding:0;gap:0}
.pc-abierta[data-pc="ar"] .ar-card{border:0;border-radius:0;padding:20px 16px 28px;gap:22px;background:transparent}
.pc-abierta[data-pc="ar"] .ar-lista{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
.app-full.pc-abierta,.app-full.pc-abierta > .pc-barra{animation:none!important}
.app-full.pc-abierta .pc-cerrar{transition:none}
}