/* estilo.css — piel del juego. Pensado para el iPad, cómodo también en el iPhone. */

:root{
  --tinta:#eef3f8;
  --cristal:rgba(12,16,26,.60);
  --cristal2:rgba(28,34,48,.80);
  --linea:rgba(255,255,255,.12);
  --acento:#7fd1ff;
  --vive:#ffd166;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
html,body{
  margin:0;padding:0;height:100%;width:100%;overflow:hidden;background:#000;position:fixed;
  overscroll-behavior:none;user-select:none;-webkit-user-select:none;
  font-family:ui-rounded,-apple-system,BlinkMacSystemFont,"SF Pro Rounded","Segoe UI",Inter,system-ui,sans-serif;
  color:var(--tinta);
}
#lienzo{position:fixed;inset:0;display:block;touch-action:none;cursor:crosshair}
#lienzo3d{position:fixed;inset:0;display:none;touch-action:none;cursor:grab;background:#000}
body.tresd #lienzo{display:none}
body.tresd #lienzo3d{display:block}
body.tresd #partes,body.tresd #papeles,body.tresd #vivir,body.tresd #bajo{display:none!important}
#controles3d{position:fixed;z-index:24;left:calc(env(safe-area-inset-left) + 24px);
  bottom:calc(env(safe-area-inset-bottom) + 24px);display:none;flex-direction:column;align-items:center;gap:8px}
body.tresd #controles3d{display:flex}
#controles3d[hidden]{display:none!important}
#joystick3d{--mando-x:0px;--mando-y:0px;position:relative;width:132px;height:132px;
  padding:0;border-radius:50%;border:1.5px solid rgba(230,246,255,.4);color:#e8f5ff;
  background:rgba(15,30,45,.38);box-shadow:inset 0 0 0 9px rgba(230,246,255,.04),0 4px 18px rgba(0,0,0,.16);
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;outline-offset:5px}
#joystick3d:focus-visible{outline:3px solid var(--acento)}
#joystick3d.usando{cursor:grabbing;background:rgba(15,30,45,.52);border-color:rgba(230,246,255,.7)}
#joystick3d>span{position:absolute;pointer-events:none;line-height:1;font-size:22px;opacity:.65}
#joystick3d .mandoArriba{left:50%;top:7px;transform:translateX(-50%)}
#joystick3d .mandoAbajo{left:50%;bottom:7px;transform:translateX(-50%)}
#joystick3d .mandoIzquierda{left:9px;top:50%;transform:translateY(-50%)}
#joystick3d .mandoDerecha{right:9px;top:50%;transform:translateY(-50%)}
#joystick3d .mandoPulgar{left:50%;top:50%;width:48px;height:48px;border-radius:50%;opacity:1;
  border:1.5px solid rgba(245,252,255,.8);background:rgba(208,231,247,.75);
  box-shadow:0 3px 9px rgba(0,0,0,.25);transform:translate(calc(-50% + var(--mando-x)),calc(-50% + var(--mando-y)))}
.mandoEtiqueta{font-size:12px;text-shadow:0 1px 5px #000;pointer-events:none}
.mandoAyuda{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-height:500px),(max-width:480px){
  #controles3d{left:calc(env(safe-area-inset-left) + 16px);bottom:calc(env(safe-area-inset-bottom) + 16px);gap:5px}
  #joystick3d{width:108px;height:108px}#joystick3d .mandoPulgar{width:40px;height:40px}
}
#dentro{position:fixed;z-index:23;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 22px);padding:9px 18px;font-size:12.5px;display:none;
  align-items:center;gap:10px;cursor:pointer}
#dentro.ver{display:flex}
#cartelBorrar{position:fixed;z-index:23;left:50%;transform:translateX(-50%);
  top:calc(env(safe-area-inset-top) + 76px);padding:9px 18px;font-size:12.5px;display:none;
  align-items:center;gap:7px;border-color:rgba(255,209,102,.45)}
#cartelBorrar span{opacity:.55}
body.borrar #cartelBorrar{display:flex}
body.tresd #cartelBorrar{display:none!important}
body.mano #lienzo{cursor:grab}
body.borrar #lienzo{cursor:cell}
body.relleno #lienzo{cursor:copy}

/* --------------------------------------------------- editar un bicho vivo */
#editaBicho{position:fixed;z-index:24;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 132px);padding:10px 14px;display:none;
  flex-direction:column;align-items:center;gap:8px}
#editaBicho.ver{display:flex}
#editaInfo{font-size:12px;font-weight:700;opacity:.85}
#editaFila{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;max-width:min(92vw,420px)}
#editaFila button{font-family:inherit;border:none;cursor:pointer;color:inherit;
  background:rgba(255,255,255,.08);border-radius:11px;padding:9px 14px;font-size:15px;font-weight:800}
#editaFila button:active{transform:scale(.92)}
#editaListo{background:linear-gradient(180deg,#ffe9a8,var(--vive))!important;color:#2a1d00!important}
#editaQuitar{background:rgba(255,140,120,.22)!important;color:#ffb3a6!important}
#editaPiezas{background:rgba(199,146,234,.2)!important;color:#f0d8ff!important;
  border:1px solid rgba(199,146,234,.45)!important}
#editaDespierta{font-size:13px!important;color:#1a0f26!important;
  background:linear-gradient(180deg,#f6d8ff,#c792ea)!important;
  box-shadow:0 6px 18px -8px rgba(199,146,234,.85)}
#editaVideo{font-size:13px!important;display:none;color:#1a0f26!important;
  background:linear-gradient(180deg,#ffe9a8,var(--vive))!important}
body.tresd #editaBicho{display:none!important}

.panel{
  background:var(--cristal);
  backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid var(--linea);border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.5);
}

/* ------------------------------------------------------------- barra alta */
#alto{
  position:fixed;z-index:25;display:flex;gap:8px;justify-content:space-between;align-items:flex-start;
  top:calc(env(safe-area-inset-top) + 10px);
  left:calc(env(safe-area-inset-left) + 10px);
  right:calc(env(safe-area-inset-right) + 10px);
  pointer-events:none;
}
#izquierda{display:flex;flex-direction:column;gap:7px;align-items:flex-start;pointer-events:auto}
#derecha{display:flex;gap:7px;align-items:flex-start;flex-wrap:wrap;justify-content:flex-end;pointer-events:auto;max-width:58vw}
#marca{padding:8px 13px;display:flex;align-items:baseline;gap:8px}
#marca b{font-size:15px;letter-spacing:.6px}
#marca span{font-size:10.5px;opacity:.55}
#lugar,#brujula,#tiempo{padding:7px 12px;font-size:11.5px;display:flex;align-items:center;gap:8px;white-space:nowrap}
#lugar .zona{font-weight:600}
#lugar .cota,#tiempo .sitio{opacity:.5;font-variant-numeric:tabular-nums}
#brujula{cursor:default}
#brujula .txt{font-variant-numeric:tabular-nums}
#brujula.cerca{border-color:rgba(255,209,102,.6);box-shadow:0 0 22px -6px var(--vive)}
#tiempo{cursor:pointer;overflow:hidden;max-width:100%}
#tiempo .ico{font-size:15px}
.util{width:44px;height:44px;display:grid;place-items:center;font-size:18px;cursor:pointer;border-radius:14px;transition:transform .12s,background .15s}
.util:active{transform:scale(.9)}
.util.on{background:rgba(127,209,255,.24);border-color:rgba(127,209,255,.55)}

.soloMovil{display:none}
body.movil .soloMovil{display:grid}
body.movil #derecha .util:not(.soloMovil){display:none}

/* la linterna vive dentro del chip de lugar, pegada a la cota: solo existe
   bajo tierra, y ahí no estorba a ningún panel lateral */
#uLinterna{display:none;cursor:pointer;font-size:14px;padding:3px 6px;margin:-3px -4px -3px 0;
  border-radius:8px;transition:background .15s,transform .12s}
#uLinterna:active{transform:scale(.88)}
body.subsuelo #uLinterna{display:inline-flex}
#uLinterna.on{background:rgba(255,214,120,.32)}

/* ------------------------------------------------------------ tira partes */
#partes, #papeles{
  position:fixed;z-index:21;left:calc(env(safe-area-inset-left) + 10px);top:50%;transform:translateY(-50%);
  padding:9px 8px;display:none;flex-direction:column;gap:5px;width:86px;
}
#partes.ver, #papeles.ver{display:flex}
#papeles{width:98px}
#papeles .titulo,#partes .titulo{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;opacity:.45;text-align:center;margin-bottom:3px}
.parte{
  display:flex;align-items:center;gap:8px;padding:8px 8px;border-radius:12px;cursor:pointer;
  border:1px solid transparent;transition:.14s;
}
.parte .sig{font-size:16px;width:20px;text-align:center;line-height:1}
.parte .nom{font-size:11px;opacity:.7}
.parte .n{margin-left:auto;font-size:9.5px;opacity:.45;font-variant-numeric:tabular-nums}
.parte:active{transform:scale(.95)}
.parte.on{background:rgba(255,255,255,.14);border-color:var(--pc,var(--acento));box-shadow:0 0 0 1px var(--pc,var(--acento)) inset}
.parte.on .nom{opacity:1}
#partes .pie,#papeles .pie{display:flex;gap:4px;margin-top:5px;border-top:1px solid var(--linea);padding-top:7px;flex-wrap:wrap}
.mini{flex:1 1 40%;min-width:32px;height:32px;display:grid;place-items:center;border-radius:10px;font-size:14px;cursor:pointer;background:rgba(255,255,255,.06)}
.mini:active{transform:scale(.92)}
.mini.apagado{opacity:.3;pointer-events:none}
.mini.on{background:rgba(255,209,102,.28);box-shadow:0 0 0 1px var(--vive) inset}

/* deshacer: el que más se usa y el que más cuesta encontrar, así que va
   primero, más grande, con su propio color y su nombre al lado */
#pDeshacer,#oDeshacer{
  order:-1;flex:1 1 100%;height:40px;margin-bottom:5px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:18px;font-weight:800;
  background:rgba(127,209,255,.20);border:1px solid rgba(127,209,255,.6);
  box-shadow:0 0 0 1px rgba(127,209,255,.18) inset;
}
#pDeshacer::after,#oDeshacer::after{content:'Deshacer';font-size:11.5px;font-weight:700;letter-spacing:.2px;opacity:.92}
#pDeshacer.apagado,#oDeshacer.apagado{opacity:.28}

/* --------------------------------------------------------- galería bocetos */
#galeria{position:fixed;inset:0;z-index:41;display:none;place-content:center;padding:18px;
  background:rgba(0,0,0,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#galeria.ver{display:grid}
#galCaja{position:relative;width:min(760px,94vw);max-height:84vh;padding:22px 24px 18px;overflow:hidden;
  display:flex;flex-direction:column}
#galCaja h2{margin:0 0 3px;font-size:20px}
#galCaja .sub{opacity:.55;font-size:12px;margin-bottom:12px}
#galCaja .cerrar{position:absolute;top:12px;right:14px;cursor:pointer;opacity:.5;font-size:22px;padding:4px 8px}
#galFamilias{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding-bottom:10px;flex:0 0 auto}
#galFamilias::-webkit-scrollbar{display:none}
.gfam{flex:0 0 auto;padding:6px 13px;border-radius:11px;font-size:11.5px;cursor:pointer;opacity:.5;
  border:1px solid transparent;white-space:nowrap;transition:.15s}
.gfam.on{opacity:1;background:rgba(255,255,255,.13);border-color:var(--linea)}
#galLista{display:grid;grid-template-columns:repeat(auto-fill,minmax(106px,1fr));gap:6px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px;flex:1 1 auto}
.gboc{padding:7px 4px 8px;border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;border:1px solid transparent;background:rgba(255,255,255,.05);transition:.14s}
.gboc:hover{background:rgba(255,255,255,.12)}
.gboc:active{transform:scale(.94)}
.gboc .lam{position:relative;width:100%;height:60px;display:grid;place-items:center}
.gboc .lam img{max-width:100%;max-height:60px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.45))}
.gboc.fino .lam::after{content:'✨';position:absolute;top:-3px;right:1px;font-size:10px;opacity:.85}
.gboc .ic{font-size:28px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.gboc .nm{font-size:9.5px;opacity:.72;text-align:center;line-height:1.15}
.gfam b{font-weight:600;opacity:.55;margin-left:2px;font-variant-numeric:tabular-nums}
/* --- lo que aún no has encontrado: una silueta y una pista, sin candados */
.gboc.cerrado{background:rgba(255,255,255,.03);border-style:dashed;border-color:rgba(255,255,255,.14);cursor:default}
.gboc.cerrado .lam .ic{font-size:26px;opacity:.28;font-weight:700}
.gboc.cerrado .nm{opacity:.3}
.gboc.cerrado .hace{opacity:.42;white-space:normal;text-align:center;line-height:1.2}
.gboc.cerrado:active{transform:none}
/* --- los especiales: no están escondidos, salen de un cofre. Se ve el nombre */
.gboc.deCofre{background:rgba(255,205,110,.07);border-color:rgba(255,205,110,.3);cursor:pointer}
.gboc.deCofre .lam .ic{font-size:26px;opacity:.55}
.gboc.deCofre .nm{opacity:.6}
.gboc.deCofre .hace{opacity:.72;color:#ffe9a8}
.gboc.deCofre:active{transform:scale(.94)}
/* --- los cofres que llevas encima, arriba del todo del cuaderno */
.gcofres{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:2px}
.gcofre{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:13px;font-size:11px;
  background:rgba(255,205,110,.10);border:1px solid rgba(255,205,110,.28);color:#ffe9a8}
.gcofre .ic{font-size:17px}
.gcofre.listo{background:rgba(255,205,110,.22);border-color:rgba(255,205,110,.6);cursor:pointer;
  animation:cofrelate 1.8s ease-in-out infinite}
.gcofre.listo:active{transform:scale(.95)}
@keyframes cofrelate{0%,100%{box-shadow:0 0 0 0 rgba(255,205,110,.35)}50%{box-shadow:0 0 0 7px rgba(255,205,110,0)}}
/* --- el botón del cuaderno cuando acabas de encontrar algo */
#bBocetos.nuevo{animation:cuadernolate 1.1s ease-in-out infinite}
@keyframes cuadernolate{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* --------------------------------------------------------------- botón VIVE */
#vivir{
  position:fixed;z-index:22;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 132px);
  display:none;flex-direction:column;align-items:center;gap:7px;pointer-events:none;
}
#vivir.ver{display:flex}
#viveInfo{font-size:11.5px;opacity:.7;background:var(--cristal);border:1px solid var(--linea);
  padding:5px 12px;border-radius:11px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#botonVive{
  pointer-events:auto;border:none;cursor:pointer;font-family:inherit;
  font-size:19px;font-weight:800;letter-spacing:3px;color:#2a1d00;
  padding:14px 40px;border-radius:20px;
  background:linear-gradient(180deg,#ffe9a8,var(--vive));
  box-shadow:0 8px 30px -6px rgba(255,209,102,.75), 0 2px 0 rgba(255,255,255,.5) inset;
  animation:latido 2.4s ease-in-out infinite;
}
#botonVive:active{transform:scale(.94);animation:none}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

#viveBotones{display:flex;align-items:center;gap:9px}
#botonDespierta{
  pointer-events:auto;border:none;cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:800;letter-spacing:1.2px;color:#1a0f26;
  padding:13px 20px;border-radius:18px;white-space:nowrap;
  background:linear-gradient(180deg,#f6d8ff,#c792ea);
  box-shadow:0 8px 26px -8px rgba(199,146,234,.85), 0 2px 0 rgba(255,255,255,.45) inset;
}
#botonDespierta:active{transform:scale(.94)}
#botonDespierta.apagado{opacity:.34;filter:grayscale(.6)}
#botonDespierta.esperando{animation:latido 1.1s ease-in-out infinite}

/* ------------------------------------------------------- los cinco segundos */
#ceremonia{position:fixed;inset:0;z-index:44;display:none;place-content:center;pointer-events:none}
#ceremonia.ver{display:grid}
#ceremonia .caja{width:min(340px,86vw);padding:18px 20px 16px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:9px}
#ceremonia .ico{font-size:34px;line-height:1;animation:gira 3.4s linear infinite}
@keyframes gira{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.18)}100%{transform:rotate(360deg) scale(1)}}
#ceremonia .txt{font-size:14px;font-weight:700}
#ceremonia .barra{width:100%;height:6px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden}
#ceremonia .barra i{display:block;height:100%;width:0%;border-radius:6px;transition:width .22s linear;
  background:linear-gradient(90deg,var(--vive),#c792ea)}
#ceremonia .pie{font-size:10.5px;opacity:.5;line-height:1.3}
#ceremonia.fallo .ico{animation:none}

/* --------------------------------------------------------------- anuncio */
/* Guardar/abrir/reiniciar tu mundo es gratis, se desbloquea viendo esto.
   Mismo aspecto que #ceremonia (arriba), con su propio boton "Continuar". */
#anuncio{position:fixed;inset:0;z-index:44;display:none;place-content:center;
  background:rgba(0,0,0,.75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#anuncio.ver{display:grid}
#anuncio .caja{width:min(340px,85vw);padding:32px 28px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:12px;background:#1a1a1a;border:0;border-radius:24px}
#anuncio .ico{font-size:34px;line-height:1}
#anuncio .txt{font-size:22px;font-weight:800;color:#fff}
#anuncio .barra{width:100%;height:6px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden}
#anuncio .barra i{display:block;height:100%;width:0%;border-radius:6px;
  background:linear-gradient(90deg,var(--vive),#c792ea)}
#anuncio .pie{font-size:14px;opacity:.6;line-height:1.4}
#anuncioSaltar{margin-top:6px;border:none;cursor:pointer;font-family:inherit;
  width:100%;font-size:16px;font-weight:800;letter-spacing:0;color:#1a1a1a;
  padding:15px 22px;border-radius:16px;background:#fff}
#anuncioSaltar.apagado{opacity:.4;filter:grayscale(.5);pointer-events:none}

/* ---------------------------------------------- tarjetas de confirmación */
#confirmarAviso{position:fixed;inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;
  padding:18px;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  border:0;background:transparent;color:var(--tinta);overflow:hidden;color-scheme:dark}
#confirmarAviso[open]{display:grid;place-items:center}
#confirmarAviso::backdrop{background:rgba(0,0,0,.64);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.confirmarCaja{width:min(420px,100%);max-height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:28px 24px 20px;text-align:left;border-radius:36px;
  background:linear-gradient(145deg,#1c1c1e,#151517);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 80px rgba(0,0,0,.45);animation:confirmarEntrar .18s ease-out}
.confirmarCabecera{display:flex;align-items:center;gap:10px;margin:0 8px 25px}
.confirmarIcono{flex-shrink:0;font-size:26px;line-height:1.2}
.confirmarCaja h2{margin:0;font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.3px;color:#f5f5f7;overflow-wrap:anywhere}
.confirmarCaja p{margin:0 8px;color:#ededf0;font-size:17px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.confirmarCaja .confirmarNota{margin-top:24px;color:#c4c4ca}
.confirmarBotones{display:flex;gap:10px;margin-top:27px}
.confirmarBotones button{flex:1;min-width:0;min-height:52px;padding:13px 12px;border:0;border-radius:999px;
  font-family:inherit;font-size:16px;line-height:1.3;font-weight:600;color:#f5f5f7;background:#303033;cursor:pointer;
  transition:background .15s,transform .15s;touch-action:manipulation}
.confirmarBotones button:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.confirmarBotones button:active{transform:scale(.97);background:#454549}
#confirmarAvisoAceptar{background:#3a3a3e}
#confirmarAvisoAceptar.peligro{color:#ffb4ac;background:#482c2d}
@media (hover:hover){
  .confirmarBotones button:hover{background:#414145}
  #confirmarAvisoAceptar:hover{background:#4a4a50}
  #confirmarAvisoAceptar.peligro:hover{background:#5d3537}
}
@media (max-width:380px){
  .confirmarCaja{padding:24px 18px 18px;border-radius:30px}
  .confirmarCaja p{font-size:16px}
  .confirmarBotones button{font-size:14px;padding-inline:8px}
}
@keyframes confirmarEntrar{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.confirmarCaja{animation:none}.confirmarBotones button{transition:none}}

/* -------------------------------------- hueco del anuncio (ExoClick / autoanuncio) */
/* Mismo patrón que .ad-fallback-wrap de Slightlys (anuncios-web.js /
   style.css): el autoanuncio de Slightlys ocupa el hueco desde el
   principio; en cuanto ExoClick rellena #exoclickBlueBlue de verdad, se
   añade .conAnuncio y el autoanuncio se aparta (opacidad y clics). */
#anuncioHueco{position:relative;width:100%;min-height:220px;border-radius:10px;
  overflow:hidden;margin-bottom:4px;background:#000}
#exoclickBlueBlue{position:relative;z-index:2;width:100%;min-height:220px;
  display:flex;align-items:center;justify-content:center;pointer-events:none}
#anuncioHueco.conAnuncio #exoclickBlueBlue{pointer-events:auto}
.anuncioAuto{position:absolute;inset:0;z-index:1;display:block;overflow:hidden;text-decoration:none;
  background:radial-gradient(ellipse at 50% 40%,#0c0c0e 0%,#000 70%);transition:opacity .4s ease}
#anuncioHueco.conAnuncio .anuncioAuto{opacity:0;pointer-events:none}
.anuncioAutoEstrellas,.anuncioAutoSlides{position:absolute;inset:0}.anuncioAutoEstrellas{z-index:1;pointer-events:none}.anuncioAutoSlides{z-index:2}
.anuncioAutoEstrella{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,.65);animation:anuncioDestello ease-in-out infinite}
.anuncioAutoSlide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:18px 16px;text-align:center;opacity:0;transition:opacity .7s ease,transform .7s ease,filter .7s ease}
.anuncioAutoSlide.arriba{transform:translateY(-22px) scale(.97)}.anuncioAutoSlide.abajo{transform:translateY(22px) scale(.97)}.anuncioAutoSlide.izquierda{transform:translateX(-28px) scale(.97)}.anuncioAutoSlide.derecha{transform:translateX(28px) scale(.97)}.anuncioAutoSlide.blur{transform:scale(1.06);filter:blur(8px)}
/* Va después de las variantes: la frase activa siempre recupera el centro y foco. */
.anuncioAutoSlide.activa{opacity:1;transform:none;filter:none}
.anuncioAutoFondo{position:absolute;max-width:62%;color:rgba(255,255,255,.2);font-size:11px;font-weight:500;line-height:1.2;text-align:left;animation:anuncioFlotar ease-in-out infinite;pointer-events:none}
.anuncioAutoSignal{display:block;margin:0 0 8px;color:#ff3b30;font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.anuncioAutoLogo{display:block;margin:0 0 14px;color:#fff;font-size:21px;font-weight:800;letter-spacing:-.06em}.anuncioAutoPunto{color:#ff3b30}
.anuncioAutoTarjeta{display:block;width:100%;max-width:230px;padding:16px 14px;border-radius:16px;background:#1c1c1e}.anuncioAutoTarjeta.promo{background:rgba(28,28,30,.92);border:1px solid rgba(255,255,255,.08)}
.anuncioAutoTexto{display:block;margin:0;color:#fff;font-size:15px;font-weight:700;line-height:1.28}.anuncioAutoSusurro{display:block;margin:8px 0 0;color:#8e8e93;font-size:12.5px;line-height:1.4}
.anuncioAutoPie{position:absolute;left:0;right:0;bottom:8px;color:rgba(255,255,255,.32);
  font-size:10px;font-weight:700;letter-spacing:.02em}
@keyframes anuncioDestello{0%,100%{opacity:.15;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
@keyframes anuncioFlotar{0%{opacity:0;transform:translateY(6px) scale(.96)}12%{opacity:.42}50%{opacity:.68;transform:translateY(-10px) scale(1)}88%{opacity:.3}100%{opacity:0;transform:translateY(-18px) scale(.96)}}

/* ------------- Despertar/Premium: quitados de la web, no del codigo -----
   El motor de IA (Despertar) y la suscripcion Premium siguen en el codigo
   (los usa la app de iPad/iPhone), pero en la web no se venden ni se
   ofrecen: guardar/abrir/reiniciar mundo ahora es gratis con un anuncio
   (#anuncio, arriba), asi que estos elementos ya no tienen forma de
   abrirse desde la web - se ocultan aqui en vez de tocar el JS
   compartido con la app, para no arriesgar esa parte. */

/* ------------------------------------------------------ ver la cinemática */
#cineVideo{position:fixed;inset:0;z-index:45;display:none;place-content:center;padding:18px;
  background:rgba(0,0,0,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#cineVideo.ver{display:grid}
#cineCaja{position:relative;width:min(520px,94vw)}
#cineCaja .cerrar{position:absolute;top:-46px;right:0;cursor:pointer;opacity:.75;font-size:24px;
  padding:6px 10px;color:#fff}
#cineVideoEl{width:100%;max-height:74vh;border-radius:20px;display:block;background:#000;
  box-shadow:0 24px 70px -12px rgba(0,0,0,.85)}
#cineTitulo{text-align:center;margin-top:12px;font-size:12.5px;opacity:.6}

/* ------------------------------------------- cuarentena, normas y premium */
#cuarentena,#normas,#paywall,#dialogoLugar,#menuMundo,#menuSonido,#menuHerramientas{position:fixed;inset:0;z-index:46;display:none;place-content:center;padding:18px;
  background:rgba(0,0,0,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#cuarentena.ver,#normas.ver,#paywall.ver,#dialogoLugar.ver,#menuMundo.ver,#menuSonido.ver,#menuHerramientas.ver{display:grid}
#cuaCaja,#normasCaja,#payCaja,#lugarCaja,#mundoCaja,#sonidoCaja,#herramientasCaja{position:relative;width:min(520px,94vw);max-height:88vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;padding:24px 26px 22px}
#cuaCaja h2,#normasCaja h2,#payCaja h2,#lugarCaja h2,#mundoCaja h2,#sonidoCaja h2,#herramientasCaja h2{margin:0 0 4px;font-size:21px}
#cuaCaja .sub,#normasCaja .sub,#payCaja .sub,#lugarCaja .sub,#mundoCaja .sub,#sonidoCaja .sub{opacity:.6;font-size:12.5px;line-height:1.5}
#cuaCaja ul,#normasCaja ul,#payCaja ul{margin:12px 0 0;padding-left:18px;font-size:12.5px;opacity:.72;line-height:1.65}

.mundoBotones{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.mundoOpcion{width:100%;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;text-align:left;
  padding:14px 16px;border-radius:14px;border:1px solid var(--linea);background:rgba(255,255,255,.07);color:inherit}
.mundoOpcion:active{transform:scale(.97)}
.mundoPeligro{border-color:rgba(255,140,120,.4)!important;color:#ffb3a6!important;background:rgba(255,90,70,.08)!important}

.lugarFila{margin-top:16px}
#lugarEntrada{width:100%;font-family:inherit;font-size:17px;text-align:left;color:inherit;
  padding:12px 14px;border-radius:12px;border:1px solid var(--linea);background:rgba(0,0,0,.3)}
#lugarEntrada:focus{outline:2px solid var(--acento);outline-offset:1px}
.lugarBotones{display:flex;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--linea)}
.lugarBotones button{flex:1 1 auto;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;
  padding:12px 14px;border-radius:12px;border:1px solid var(--linea);background:rgba(255,255,255,.07);color:inherit}
.lugarBotones button:active{transform:scale(.96)}
#lugarAceptar{border:none!important;color:#2a1d00!important;background:linear-gradient(180deg,#ffe9a8,var(--vive))!important}
.lugarAqui{width:100%;margin-top:11px;font-family:inherit;font-size:14.5px;font-weight:800;cursor:pointer;text-align:center;
  padding:12px 14px;border-radius:12px;border:1px solid var(--linea);background:rgba(255,255,255,.07);color:inherit}
.lugarAqui:active{transform:scale(.96)}
.lugarNota{margin-top:9px;font-size:11.5px;line-height:1.5;opacity:.55}

.cuaAviso{margin:16px 0;padding:13px 15px;border-radius:13px;font-size:12px;line-height:1.55;
  background:rgba(255,180,90,.13);border:1px solid rgba(255,180,90,.42)}
#cuaPuerta{margin-top:6px}
.cuaPregunta{font-size:13px;opacity:.8;margin-bottom:9px}
.cuaPregunta b{font-size:19px;letter-spacing:1px}
.cuaFila{display:flex;gap:8px}
#cuaRespuesta{flex:0 0 96px;font-family:inherit;font-size:17px;text-align:center;color:inherit;
  padding:10px;border-radius:12px;border:1px solid var(--linea);background:rgba(0,0,0,.3)}
#cuaAbrir{flex:1 1 auto;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;color:#132a13;
  border:none;border-radius:12px;background:linear-gradient(180deg,#c8f5c0,#7fd18a)}
#cuaAbrir:active{transform:scale(.96)}
.cuaError{min-height:16px;margin-top:7px;font-size:11.5px;color:#ff9d8f}
#cuaBotones{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px;padding-top:14px;border-top:1px solid var(--linea)}
#cuaBotones button{flex:1 1 auto;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;
  padding:11px 12px;border-radius:12px;border:1px solid var(--linea);background:rgba(255,255,255,.07);color:inherit}
#cuaBotones button:active{transform:scale(.96)}
.cuaMal{border-color:rgba(255,140,120,.4)!important;color:#ffb3a6!important}

.normasPie{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;
  padding-top:15px;border-top:1px solid var(--linea);flex-wrap:wrap}
.normasPie a{font-size:11.5px;opacity:.65}
#normasAcepto{font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;color:#2a1d00;
  border:none;padding:12px 24px;border-radius:14px;background:linear-gradient(180deg,#ffe9a8,var(--vive))}
#normasAcepto:active{transform:scale(.96)}

.payIcono{font-size:40px;line-height:1;margin-bottom:6px}
.payAviso{margin-top:14px;padding:11px 13px;border-radius:12px;font-size:11.5px;line-height:1.5;
  color:#c9d7e8;background:rgba(255,255,255,.06);border:1px solid var(--linea)}
.payAviso a{color:var(--acento);font-weight:700}
#payCaja .cerrar{position:absolute;top:12px;right:14px;cursor:pointer;opacity:.5;font-size:22px;padding:4px 8px}
#payComprar{width:100%;margin-top:18px;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;
  color:#1a0f26;border:none;padding:14px;border-radius:16px;
  background:linear-gradient(180deg,#f6d8ff,#c792ea);box-shadow:0 8px 26px -8px rgba(199,146,234,.8)}
#payComprar:active{transform:scale(.97)}
#payComprar.apagado{opacity:.45;pointer-events:none}
.payLetra{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px;
  font-size:11px;opacity:.55}
.payLetra a{color:inherit;text-decoration:underline}
.payLetra--centro{justify-content:center}
.payRestaurarCaja{margin-top:12px;padding:13px;border:1px solid var(--linea);border-radius:12px;
  background:rgba(255,255,255,.05)}
.payRestaurarCaja[hidden]{display:none}
.payRestaurarAyuda{margin:0 0 12px;font-size:12px;line-height:1.5}
.payRestaurarCaja label{display:block;margin-bottom:7px;font-size:12px;font-weight:800}
.payRestaurarCaja input{box-sizing:border-box;width:100%;padding:11px 12px;border:1px solid var(--linea);
  border-radius:10px;background:rgba(0,0,0,.28);color:inherit;font:600 14px/1.2 inherit;text-transform:uppercase}
.payRestaurarCaja input:focus{outline:2px solid var(--acento);outline-offset:1px}
.payRestaurarBotones{display:flex;gap:8px;margin-top:10px}
.payRestaurarBotones button{flex:1;min-width:0;padding:10px;border:1px solid var(--linea);border-radius:10px;
  background:rgba(255,255,255,.08);color:inherit;font:800 12px/1.2 inherit;cursor:pointer}
.payRestaurarBotones button:last-child{border:0;color:#2a1d00;background:linear-gradient(180deg,#ffe9a8,var(--vive))}

/* el balance de uso: cuánto has pedido, cuánto te queda, cuántos créditos
   guardas — para que nadie se lleve una sorpresa con lo que ha gastado */
.payBalance{display:flex;gap:6px;margin:14px 0 2px;padding:12px 6px;
  border-radius:14px;background:rgba(255,255,255,.045);border:1px solid var(--linea)}
.pbFila{flex:1 1 0;text-align:center;display:flex;flex-direction:column;gap:2px}
.pbFila+.pbFila{border-left:1px solid var(--linea)}
.pbFila b{font-size:18px;font-weight:800;color:#ffe9a8}
.pbFila span{font-size:9.5px;opacity:.55;line-height:1.2}

/* -------------------------------------------------- los créditos sueltos */
.payDivisor{display:flex;align-items:center;gap:10px;margin:20px 0 12px;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;opacity:.45}
.payDivisor::before,.payDivisor::after{content:'';flex:1 1 auto;height:1px;background:var(--linea)}
#payCreditos,#iaCreditosCaja{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:2px}
.payCredito{
  position:relative;font-family:inherit;cursor:pointer;color:inherit;text-align:center;
  border:1px solid var(--linea);border-radius:16px;padding:16px 6px 12px;
  background:rgba(255,255,255,.05);display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:.14s;
}
.payCredito:active{transform:scale(.95)}
.pcIcono{font-size:24px;line-height:1;margin-bottom:2px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.payCredito b{font-size:13px;font-weight:800;color:#ffe9a8}
.pcCantidad{font-size:10px;opacity:.62;line-height:1.25}
.payCredito em{font-style:normal;font-size:15px;font-weight:800;margin-top:5px}
.pcUnidad{font-size:9px;opacity:.45;margin-top:1px}
.payCredito.apagado{opacity:.4;pointer-events:none}
#payCreditosNota{margin-top:10px}

/* --------------------------------------------------------- ajustes de la IA */
#panelIA{position:fixed;inset:0;z-index:42;display:none;place-content:center;padding:18px;
  background:rgba(0,0,0,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#panelIA.ver{display:grid}
#iaCaja{position:relative;width:min(560px,94vw);max-height:86vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;padding:22px 24px 20px}
#iaCaja h2{margin:0 0 3px;font-size:20px}
#iaCaja h3{margin:16px 0 7px;font-size:12px;opacity:.55;text-transform:uppercase;letter-spacing:1.1px}
#iaCaja .sub{opacity:.55;font-size:12px;line-height:1.45}
#iaCaja .cerrar{position:absolute;top:12px;right:14px;cursor:pointer;opacity:.5;font-size:22px;padding:4px 8px}
#iaCaja ul{margin:6px 0 0;padding-left:17px;font-size:11.5px;opacity:.62;line-height:1.6}
.iaEstado{margin-top:12px;padding:9px 12px;border-radius:12px;font-size:11.5px;
  background:rgba(255,255,255,.06);border:1px solid var(--linea)}
.iaEstado.bien{background:rgba(120,220,150,.14);border-color:rgba(120,220,150,.4)}
.iaEstado.mal{background:rgba(255,140,120,.13);border-color:rgba(255,140,120,.38)}
#iaModos,#iaEstilos{display:flex;flex-wrap:wrap;gap:6px}
.iaOp{padding:8px 13px;border-radius:12px;font-size:11.5px;cursor:pointer;opacity:.55;
  border:1px solid transparent;background:rgba(255,255,255,.05);transition:.14s}
.iaOp.on{opacity:1;background:rgba(199,146,234,.22);border-color:rgba(199,146,234,.6)}
.iaFila{display:flex;gap:7px;align-items:center}
#iaServidor{flex:1 1 auto;min-width:0;font-family:inherit;font-size:12px;color:inherit;
  padding:9px 12px;border-radius:12px;border:1px solid var(--linea);background:rgba(0,0,0,.28)}
#iaProbar{flex:0 0 auto;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;color:inherit;
  padding:9px 15px;border-radius:12px;border:1px solid var(--linea);background:rgba(255,255,255,.09)}
#iaProbar:active{transform:scale(.95)}
.iaNota{margin-top:8px;font-size:10.5px;opacity:.45;line-height:1.5}

/* el balance y los créditos, también aquí dentro: para que se vean siempre
   que abres el panel de la IA, no solo cuando salta el paywall */
.iaMasCaja{margin-top:18px;padding:16px 14px 14px;border-radius:18px;
  background:linear-gradient(180deg,rgba(199,146,234,.16),rgba(255,255,255,.03));
  border:1px solid rgba(199,146,234,.4)}
.iaMasTitulo{margin:0;font-size:14.5px;font-weight:800;text-align:center;text-transform:none;
  letter-spacing:0;opacity:1;background:linear-gradient(180deg,#f6d8ff,#ffe9a8);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.iaMasCaja .payBalance{margin:12px 0 2px}
.iaMasCaja .payAviso{margin-top:12px}

/* -------------------------------------------------------------- barra baja */
#bajo{
  position:fixed;z-index:20;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 10px);
  width:min(880px,calc(100vw - 20px));padding:8px 10px 10px;
}
#modos{display:flex;gap:5px;margin-bottom:7px;align-items:center}
#bBocetos{margin-left:auto;padding:6px 14px;border-radius:11px;font-size:11.5px;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,233,168,.22),rgba(255,209,102,.18));
  border:1px solid rgba(255,209,102,.45);color:#ffe9a8;transition:.15s;white-space:nowrap}
#bBocetos span{opacity:.5;font-variant-numeric:tabular-nums}
#bBocetos:active{transform:scale(.94)}
.gboc .hace{font-size:8.5px;opacity:.55;white-space:nowrap}
.modo{padding:6px 14px;border-radius:11px;font-size:11.5px;cursor:pointer;opacity:.5;border:1px solid transparent;transition:.15s}
.modo.on{opacity:1;background:rgba(255,255,255,.13);border-color:var(--linea)}
#elementos{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
#elementos::-webkit-scrollbar{display:none}
.elem{
  flex:0 0 auto;width:62px;padding:7px 3px 6px;border-radius:13px;display:flex;flex-direction:column;
  align-items:center;gap:3px;cursor:pointer;border:1px solid transparent;transition:.14s;
}
.elem .ic{font-size:22px;line-height:1;filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))}
.elem .nm{font-size:9px;opacity:.6;white-space:nowrap}
.elem:active{transform:scale(.93)}
.elem.on{background:rgba(255,255,255,.14);border-color:var(--ec,var(--acento));box-shadow:0 0 0 1px var(--ec,var(--acento)) inset}
.elem.on .nm{opacity:1}
#ajustes{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px}
#tintas{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tinta{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,.2);transition:.14s}
.tinta.on{border-color:#fff;transform:scale(1.2)}
.tinta.auto{background:conic-gradient(#ffd166,#7fd1ff,#c792ea,#5fbf6b,#ffd166)}
#grosorCaja{display:flex;align-items:center;gap:8px;font-size:10px;opacity:.6}
#grosor{width:96px;accent-color:var(--acento)}

/* --------------------------------------------------------------- portada */
#portada{position:fixed;inset:0;z-index:15;display:grid;place-content:center;text-align:center;
  pointer-events:none;padding:24px;transition:opacity 1.6s ease}
#portada h1{margin:0 0 12px;font-size:clamp(24px,6vw,42px);font-weight:600;letter-spacing:.5px;
  background:linear-gradient(90deg,#fff,#9ec8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
#portada p{margin:0;font-size:13px;opacity:.5;letter-spacing:.5px;animation:respira 3.4s ease-in-out infinite}
@keyframes respira{0%,100%{opacity:.26}50%{opacity:.74}}
#portada.fuera{opacity:0}

/* ----------------------------------------------------------------- aviso */
#aviso{
  /* Por encima de los paneles, incluida la recuperación de compras.
     La confirmación ocupa la capa modal del navegador y tiene prioridad. */
  position:fixed;z-index:70;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 216px);
  padding:14px 22px;font-size:16px;line-height:1.35;font-weight:700;opacity:0;transition:opacity .35s;pointer-events:none;
  max-width:min(640px,90vw);text-align:center;
}
#aviso.ver{opacity:1}

/* ----------------------------------------------------------------- ayuda */
#ayuda{position:fixed;inset:0;z-index:40;display:none;place-content:center;padding:18px;
  background:rgba(0,0,0,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#ayuda.ver{display:grid}
#ayudaCaja{position:relative;max-width:560px;padding:24px 26px;font-size:13px;line-height:1.62;
  max-height:82vh;overflow:auto;-webkit-overflow-scrolling:touch}
#ayudaCaja h2{margin:0 0 3px;font-size:20px}
#ayudaCaja .sub{opacity:.5;font-size:12px;margin-bottom:14px}
#ayudaCaja h3{margin:17px 0 5px;font-size:11px;text-transform:uppercase;letter-spacing:1.3px;opacity:.55;font-weight:700}
#ayudaCaja ul{margin:0;padding-left:17px}
#ayudaCaja li{margin:3px 0}
#ayudaCaja .ayudaEsencial{display:flex;flex-direction:column;gap:7px;margin:2px 0 12px}
#ayudaCaja .ayudaPaso{display:flex;gap:9px;align-items:flex-start;background:rgba(255,255,255,.06);
  border:1px solid var(--linea);border-radius:12px;padding:9px 11px;font-size:12.5px;line-height:1.4}
#ayudaCaja .ayudaPaso span{font-size:18px;line-height:1.3}
#ayudaCaja .ayudaMas{opacity:.5;font-size:11px;text-align:center;margin-bottom:4px}
#ayudaCaja details{border-top:1px solid var(--linea)}
#ayudaCaja details:first-of-type{border-top:none}
#ayudaCaja summary{cursor:pointer;list-style:none;margin:11px 0 5px;padding:2px 0;
  font-size:11px;text-transform:uppercase;letter-spacing:1.3px;opacity:.6;font-weight:700}
#ayudaCaja summary::-webkit-details-marker{display:none}
#ayudaCaja summary::before{content:'▸ ';opacity:.7}
#ayudaCaja details[open] summary::before{content:'▾ '}
#ayudaCaja .cerrar{position:absolute;top:12px;right:14px;cursor:pointer;opacity:.5;font-size:22px;padding:4px 8px}
#ayudaPie{display:flex;gap:16px;margin-top:20px;padding-top:15px;border-top:1px solid var(--linea)}
#ayudaPie a{font-size:11.5px;opacity:.65}

/* ---------------------------------------------------------------- iPhone */
/* body.movil (interfaz.js, actualizarMovil — mira el lado CORTO de la
   ventana, no el ancho a secas) en vez de una media query por ancho: un
   iPhone en horizontal (landscape) sigue siendo un iPhone, con tan poco
   alto de pantalla como el que más, y con @media (max-width:620px) esas
   reglas no llegaban a aplicarse ahí — que era justo donde más se notaba
   el solape que reportó Luis con capturas. */
/* en pantallas estrechas, izquierda y derecha pueden no caber en una sola
   fila: que la de la derecha baje a una segunda línea en vez de recortarse
   o salirse de la pantalla */
body.movil #alto{flex-wrap:wrap;row-gap:7px}
body.movil #marca span{display:none}
body.movil #marca{padding:7px 11px}
body.movil #izquierda{max-width:64vw}
body.movil #derecha{max-width:58vw}
/* el texto de los globos (tiempo, brújula, lugar) nunca se recorta a lo
   bruto contra el borde: si no cabe, termina en puntos suspensivos */
body.movil #lugar,body.movil #brujula,body.movil #tiempo{max-width:100%}
body.movil #lugar .zona,body.movil #lugar .cota,body.movil #brujula .txt,body.movil #tiempo .txt,body.movil #tiempo .sitio{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
body.movil .util{width:38px;height:38px;font-size:15px}

/* la tira de partes/papeles: centrarla en vertical (como en el iPad) hace
   que en un iPhone, con pantalla más baja, se salga por arriba —tapando
   los globos de arriba— o por abajo. Aquí se ancla entre la barra alta y
   la baja, y si las piezas no caben, hace scroll ella sola en vez de
   invadir el resto de la interfaz.
   --altoArriba/--altoAbajo los mide JS de verdad (interfaz.js,
   observarAlturas) con un ResizeObserver sobre #alto y #bajo — nunca un
   número fijo adivinado, porque la barra de arriba puede tener 2, 3 o 4
   líneas según cuánto ocupe el nombre del sitio o el parte del tiempo, y
   en horizontal (landscape) hay bastante menos alto de pantalla. El
   número de después de "128px"/"150px" es solo el valor de reserva por si
   el JS aún no ha corrido. */
body.movil #partes,body.movil #papeles{
  width:56px;left:6px;
  top:calc(env(safe-area-inset-top) + var(--altoArriba, 128px) + 8px);
  bottom:calc(env(safe-area-inset-bottom) + var(--altoAbajo, 150px) + 8px);
  transform:none;max-height:none;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
body.movil #partes .nom,body.movil #partes .titulo,body.movil #partes .n,
body.movil #papeles .nom,body.movil #papeles .titulo,body.movil #papeles .n{display:none}
body.movil .parte{justify-content:center;padding:9px 4px}
body.movil .parte .sig{width:auto;font-size:18px}

/* recoger/expandir: en iPhone, además de ya no solaparse, se puede apartar
   del todo si hace falta más lienzo — igual que el ☰ de herramientas,
   "desplegable" en vez de siempre fijo en pantalla. */
.recogedor{display:none;place-items:center;height:26px;margin-bottom:5px;
  border-radius:8px;cursor:pointer;background:rgba(255,255,255,.07);font-size:13px;opacity:.75}
body.movil .recogedor{display:grid}
.recogedor:active{transform:scale(.92)}
#partes.recogido #listaPartes,#partes.recogido .pie,
#papeles.recogido #listaPartes,#papeles.recogido .pie{display:none}
body.movil #grosorCaja{display:none}
body.movil .elem{width:54px}
body.movil #pDeshacer::after,body.movil #oDeshacer::after{display:none}
body.movil #pDeshacer,body.movil #oDeshacer{height:36px}
body.movil #botonVive{font-size:17px;padding:12px 30px}
body.movil #vivir{bottom:calc(env(safe-area-inset-bottom) + 128px)}
body.movil #aviso{bottom:calc(env(safe-area-inset-bottom) + 230px)}
/* iPhone más pequeños (SE, mini): un pelín más compacto todavía */
@media (max-width:390px){
  #marca b{font-size:13.5px}
  #lugar,#brujula,#tiempo{font-size:10.5px;padding:6px 9px}
  #izquierda{max-width:58vw}
  #derecha{max-width:62vw}
  .util{width:35px;height:35px;font-size:14px}
  .payCredito{padding:14px 3px 9px}
  .payCredito b{font-size:12px}
  .payCredito em{font-size:13px}
  .pcIcono{font-size:20px}
  .pcUnidad{font-size:8px}
}
@media (pointer:coarse){ .parte{padding-top:10px;padding-bottom:10px} }

/* Dibujo protegido: los botones de nacimiento solo aparecen al terminar. */
#dibujoAcciones{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
#dibujoAcciones button,#referenciaControles button,#seguirDibujo{font:inherit;font-size:12px;color:var(--texto,#edf3ff);background:rgba(255,255,255,.08);border:1px solid var(--linea);padding:9px 13px;border-radius:14px;cursor:pointer;min-height:38px}
#terminarDibujo{background:#ffda82!important;color:#34260c!important;font-weight:750!important;margin-left:auto}
#terminarDibujo:disabled{opacity:.4;cursor:default}
#referenciaControles:not([hidden]){display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:11px}
#referenciaControles label{display:flex;align-items:center;gap:6px}
#referenciaControles input{width:85px}
#fotoDeshacer{background:rgba(127,209,255,.20)!important;border-color:rgba(127,209,255,.6)!important;font-weight:750!important}
#fotoDeshacer:disabled{opacity:.35;cursor:default}
#vivir{inset:0;transform:none;padding:24px;background:rgba(5,10,18,.82);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);justify-content:center;pointer-events:auto;z-index:80}
#vivir h2{font-size:20px;text-align:center;margin:0 0 12px}
#vivir #viveInfo{max-width:420px;text-align:center}
#viveBotones{margin-top:12px;flex-wrap:wrap;justify-content:center}
#vivir #botonVive{animation:none}
body.dibujoProtegido:not(.tresd) #u3d,body.dibujoProtegido #uMundo{opacity:.35;pointer-events:none}
body.movil #dibujoAcciones button{font-size:11px;padding:7px 10px}

.gboc.deSupercofre{border:1px solid rgba(120,225,255,.5);background:rgba(105,194,220,.08)}
.gboc.deSupercofre .lam{background:#fffdf7;border-radius:9px}
.gboc.deSupercofre .hace{color:#9adcf0}

body.movil #vivir{bottom:0}

#retocarOtro[aria-pressed=true]{border-color:#7fd1ff;background:rgba(127,209,255,.18)}

body.calcoActivo #partes,body.calcoActivo #papeles{display:none!important}

/* Taller de luz: el dibujo es el protagonista, los mandos acompañan. */
#bajo,#partes,#papeles{background:linear-gradient(145deg,rgba(29,49,61,.86),rgba(15,29,40,.88));
  border-color:rgba(191,220,225,.22);box-shadow:0 12px 38px rgba(6,19,28,.23),inset 0 1px rgba(241,252,255,.08)}
body.dibujoProtegido #bajo{border-color:rgba(179,224,216,.45);box-shadow:0 10px 34px rgba(7,29,34,.22),0 0 24px rgba(128,204,185,.07)}
.util,.parte,#dibujoAcciones button{transition:background .18s,border-color .18s,box-shadow .18s,transform .15s}
.util.on{box-shadow:inset 0 1px rgba(255,255,255,.22),0 3px 13px rgba(12,53,65,.18)}
.tinta{box-shadow:inset 0 1px 2px rgba(255,255,255,.38),0 2px 4px rgba(0,0,0,.18)}
.tinta.on{box-shadow:0 0 0 3px rgba(216,242,241,.2),0 3px 9px rgba(0,0,0,.24)}
#terminarDibujo:not(:disabled){background:linear-gradient(125deg,#fff0bb,#ffcf78)!important;
  border:1px solid rgba(255,242,194,.85)!important;box-shadow:0 3px 18px rgba(255,207,120,.23),inset 0 1px rgba(255,255,255,.7)}
#botonVive{background:linear-gradient(120deg,#fff0bb,#ffd080)!important;box-shadow:0 5px 26px rgba(255,208,128,.22)}
@media(hover:hover){.util:hover,.parte:hover{background-color:rgba(169,222,218,.14)}.tinta:hover{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){
  .util,.parte,.tinta,#dibujoAcciones button{transition:none}
  #botonVive,#terminarDibujo,#portada p{animation:none!important}
}
#referenciaControles select{font:inherit;color:var(--texto,#edf3ff);background:#242833;border:1px solid var(--linea);border-radius:10px;padding:7px 9px;max-width:180px}
#fotoAyuda{opacity:.68;max-width:390px;line-height:1.3}

/* Una paleta clara, precisa y táctil, con su propio borrador de color. */
#tintas button.tinta{padding:0;box-sizing:content-box;flex-shrink:0}
#masColores{display:flex;align-items:center;gap:7px;min-height:36px;padding:3px 11px;border-radius:18px;
  border:1px solid rgba(220,236,245,.38);color:#f2f6fa;background:rgba(228,241,250,.10);font:600 12px -apple-system,BlinkMacSystemFont,sans-serif;cursor:pointer}
#masColores span{width:20px;height:20px;border-radius:50%;background:conic-gradient(#ff375f,#ffd60a,#30d158,#64d2ff,#0a84ff,#bf5af2,#ff375f);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
#masColores.personalizado span{background:var(--elegido)}
#paletaColor{padding:0;border:1px solid rgba(255,255,255,.75);border-radius:26px;width:min(410px,calc(100vw - 24px));
  max-height:calc(100dvh - 36px);overflow:auto;background:rgba(247,249,252,.97);color:#172433;
  box-shadow:0 28px 90px rgba(4,18,32,.38),inset 0 1px #fff;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:light;overscroll-behavior:contain}
#paletaColor::backdrop{background:rgba(10,24,35,.32);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.colorCaja{padding:20px}.colorCabecera{display:flex;align-items:center;justify-content:space-between;gap:14px;position:sticky;top:0;z-index:2;background:#f8fafc;padding-bottom:6px}
.colorCabecera h2{margin:0;font-size:22px;letter-spacing:-.5px}
#colorCerrar{width:34px;height:34px;border:0;border-radius:50%;color:#586472;background:#e5e9ef;font-size:15px;cursor:pointer}
#colorDestino{margin:6px 0 17px;font-size:12px;color:#5c6674}
.colorPestanas{display:flex;padding:3px;background:#e7ebf0;border-radius:11px;gap:2px;margin-bottom:17px}
.colorPestanas button{flex:1;border:0;border-radius:8px;min-height:33px;font:600 12px -apple-system,BlinkMacSystemFont,sans-serif;background:none;color:#566271;cursor:pointer}
.colorPestanas button[aria-selected=true]{background:#fff;color:#182938;box-shadow:0 1px 5px #0a25401a}
.colorPanel[hidden]{display:none!important}#colorMuestras{display:grid;grid-template-columns:repeat(12,1fr);gap:0;overflow:hidden;border-radius:12px}
.colorMuestra{border:0;padding:0;aspect-ratio:1;min-width:0;cursor:pointer;position:relative}
.colorMuestra[aria-pressed=true]::after{content:'';position:absolute;inset:2px;border:2px solid white;border-radius:4px;box-shadow:0 0 0 1px #17243380,inset 0 0 0 1px #17243350}
#colorPlano{height:155px;position:relative;border-radius:13px;background:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,transparent),var(--tono,#00aaff);touch-action:none;cursor:crosshair}
#colorPunto{position:absolute;width:18px;height:18px;border:2px solid #fff;border-radius:50%;box-shadow:0 1px 4px #0009;transform:translate(-50%,-50%);pointer-events:none}
.colorRango{display:flex;align-items:center;gap:14px;margin-top:13px;font-size:12px;color:#4d5c6d}
.colorRango input{flex:1;min-width:0}.colorCanal{display:grid;grid-template-columns:45px minmax(0,1fr) 54px;align-items:center;gap:10px;margin:20px 0}
#paletaColor input[type=range]{appearance:none;-webkit-appearance:none;height:12px;border-radius:8px;background:#dbe5ef;accent-color:#007aff}
#paletaColor input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:23px;height:23px;border-radius:50%;background:#fff;border:1px solid #c0cad5;box-shadow:0 1px 4px #173e5d40}
#paletaColor input[type=range]::-moz-range-thumb{width:23px;height:23px;border-radius:50%;background:#fff;border:1px solid #c0cad5}
#colorTono{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,blue,#f0f,red)!important}
#paletaColor input[type=number],#colorHex{box-sizing:border-box;min-width:0;width:100%;padding:8px 5px;border:1px solid #d1d8e1;border-radius:8px;text-align:center;background:#fff;color:#172433;font:500 16px -apple-system,BlinkMacSystemFont,sans-serif}
.colorHexFila{display:flex;justify-content:space-between;align-items:center}.colorHexFila span{display:flex;align-items:center;gap:5px;width:122px}
#colorHex[aria-invalid=true]{border-color:#ba3546}#colorError{min-height:16px;margin:8px 0;font-size:12px;color:#a62d3d}
.colorResumen{display:flex;align-items:center;gap:12px;margin:18px 0;padding-top:16px;border-top:1px solid #dce2e9}
#colorVista{width:48px;height:48px;flex-shrink:0;border-radius:14px;box-shadow:inset 0 0 0 1px #17243326,0 3px 10px #20344919}
.colorResumen b{font-size:15px}.colorResumen small{display:block;font-size:10px;color:#66798d;margin-top:4px;letter-spacing:.9px}
#colorFavorito{margin-left:auto;min-width:44px;min-height:44px;border:0;border-radius:12px;background:#e9eef5;color:#007aff;font-size:28px;cursor:pointer}
.colorColeccion h3{font-size:12px;font-weight:600;color:#586878;margin:13px 0 8px}.colorColeccion p{font-size:12px;color:#627181;margin:0}
#coloresFavoritos,#coloresRecientes{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}.colorColeccion .colorMuestra{border-radius:50%;box-shadow:inset 0 0 0 1px #17243320}
#colorAplicar{width:100%;border:0;border-radius:13px;min-height:44px;margin-top:18px;background:#007aff;color:#fff;font:600 15px -apple-system,BlinkMacSystemFont,sans-serif;cursor:pointer;position:sticky;bottom:0;z-index:2}
#colorAplicar:disabled{opacity:.4;cursor:default}
#paletaColor button:focus-visible,#paletaColor input:focus-visible,#masColores:focus-visible,#tintas button:focus-visible{outline:3px solid #007aff;outline-offset:3px}
@media(max-width:520px){#paletaColor{border-radius:24px 24px 16px 16px;margin:auto auto max(12px,env(safe-area-inset-bottom));max-height:calc(100dvh - 22px)}.colorCaja{padding:16px}#masColores{padding:3px 8px}#ajustes{flex-wrap:wrap}#tintas{gap:5px}}
/* Compañía discreta, sin bloquear el mundo ni reclamar una respuesta. */
#compania{position:fixed;z-index:18;top:calc(var(--altoArriba,106px) + env(safe-area-inset-top) + 16px);right:18px;
  width:min(345px,calc(100vw - 36px));box-sizing:border-box;display:flex;gap:12px;align-items:flex-start;padding:17px 14px;
  border-radius:21px;background:linear-gradient(135deg,rgba(255,249,230,.97),rgba(242,250,246,.97));color:#293d46;
  border:1px solid #ffffffc9;box-shadow:0 12px 35px #09262d30,inset 0 1px #fff;animation:llegarCompania .4s ease-out}
#compania[hidden],body.dibujoProtegido #compania,body.paletaAbierta #compania{display:none!important}
#companiaIcono{width:40px;height:40px;display:grid;place-items:center;flex-shrink:0;font-size:26px;border-radius:14px;background:#e9efda}
.companiaTexto{flex:1}.companiaTexto b{font-size:14px}.companiaTexto p{font-size:12px;line-height:1.5;margin:5px 0 0;color:#56646a}
#companiaCerrar{flex-shrink:0;border:0;background:none;color:#607079;cursor:pointer;min-height:28px;min-width:28px}
.companiaAjuste{display:flex;gap:12px;align-items:center;margin:17px 0;padding:12px;border:1px solid #ffffff24;border-radius:13px}
.companiaAjuste input{width:20px;height:20px;accent-color:#70c9b0}.companiaAjuste small{display:block;opacity:.65;font-size:11px;line-height:1.4;margin-top:3px}
@keyframes llegarCompania{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#compania{animation:none}}

/* iPhone 1.1: una fila táctil; el taller completo se despliega hacia arriba. */
#bajoCompacto{display:none}
body.movil #bajo{
  left:calc(env(safe-area-inset-left) + 8px);right:calc(env(safe-area-inset-right) + 8px);
  bottom:calc(env(safe-area-inset-bottom) + 8px);width:auto;max-width:620px;margin-inline:auto;
  transform:none;padding:6px;border-radius:21px;
}
body.movil #bajoCompacto{display:flex;align-items:center;gap:4px;min-width:0}
body.movil #bajoCompacto button{min-height:44px;min-width:44px;border:1px solid rgba(221,240,243,.2);
  border-radius:14px;background:rgba(238,247,250,.07);color:var(--tinta);font:inherit;font-size:12px;font-weight:600;
  cursor:pointer;touch-action:manipulation;white-space:nowrap;padding:7px 9px}
body.movil #bajoCompacto button:focus-visible,body.movil #bajoOpciones [role=button]:focus-visible{
  outline:3px solid var(--acento);outline-offset:2px}
body.movil #bajoToggle{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;font-weight:700}
#bajoFlecha{display:inline-block;font-size:12px}
#bajoToggle[aria-expanded=true] #bajoFlecha{transform:rotate(180deg)}
body.movil #bajoColor{display:grid;place-items:center;padding:6px}
#bajoColorMuestra{display:block;width:24px;height:24px;border-radius:50%;
  background:conic-gradient(#ffd166,#7fd1ff,#c792ea,#5fbf6b,#ffd166);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
body.movil #bajoDeshacer{font-size:23px;line-height:1;padding:5px}
body.movil #bajoCompacto #terminarDibujo{margin:0;font-size:11px;padding-inline:9px}
body.movil #bajoCompacto button[hidden]{display:none}
body.movil #bajoOpciones{display:none}
body.movil #bajo.desplegado #bajoOpciones{display:block;
  max-height:max(88px,calc(100dvh - var(--altoArriba,128px) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 96px));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:5px 4px 12px;margin-bottom:6px;border-bottom:1px solid var(--linea);scroll-padding:8px}
body.movil #bajoOpciones #modos{gap:3px;flex-wrap:wrap}
body.movil #bajoOpciones .modo,body.movil #bajoOpciones #bBocetos{min-height:44px;display:flex;align-items:center;justify-content:center;padding:8px 10px}
body.movil #bajoOpciones #bBocetos{gap:4px}
body.movil #bajoOpciones #dibujoAcciones{gap:5px;margin-top:6px}
body.movil #bajoOpciones #dibujoAcciones button,body.movil #referenciaControles button{min-height:44px}
body.movil #bajoOpciones #ajustes{flex-wrap:wrap;gap:6px}
body.movil #bajoOpciones #tintas{gap:0}
body.movil #bajoOpciones #tintas .tinta{width:24px;height:24px;border-width:10px;box-sizing:content-box;
  background-clip:padding-box;border-color:transparent;box-shadow:none;transform:none}
body.movil #bajoOpciones #tintas .tinta.on{outline:2px solid white;outline-offset:-9px}
body.movil #bajoOpciones #masColores{min-height:44px}
body.movil #bajoOpciones #grosorCaja{display:flex;min-height:44px;opacity:.85;font-size:12px}
body.movil #bajoOpciones #grosor{width:120px;min-height:44px}
body.movil #referenciaControles{padding-top:8px}
body.movil #referenciaControles label{min-height:44px;flex-wrap:wrap}
body.movil #referenciaControles select{min-height:44px;max-width:100%}
body.movil #partes,body.movil #papeles{left:calc(env(safe-area-inset-left) + 6px)}
body.movil #aviso{bottom:calc(env(safe-area-inset-bottom) + var(--altoAbajo,58px) + 20px)}