/* 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}
#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}
#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)}
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:20;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)}

/* ------------------------------------------------------------ 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(88px,1fr));gap:6px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px;flex:1 1 auto}
.gboc{padding:12px 4px 9px;border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:5px;
  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 .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:.65;text-align:center;line-height:1.15}

/* --------------------------------------------------------------- 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}
#ceremoniaParar{pointer-events:auto;cursor:pointer;margin-top:2px;padding:8px 16px;font-size:11.5px;
  font-weight:700;border-radius:11px;background:rgba(255,140,120,.16);border:1px solid rgba(255,140,120,.4);
  color:#ffb3a6}
#ceremoniaParar:active{transform:scale(.95)}
#ceremonia.fallo #ceremoniaParar{display:none}

/* ------------------------------------------- cuarentena, normas y premium */
#cuarentena,#normas,#paywall,#dialogoLugar{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{display:grid}
#cuaCaja,#normasCaja,#payCaja,#lugarCaja{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{margin:0 0 4px;font-size:21px}
#cuaCaja .sub,#normasCaja .sub,#payCaja .sub,#lugarCaja .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}

.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}

.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}

/* --------------------------------------------------------- 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}

/* -------------------------------------------------------------- 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{
  position:fixed;z-index:30;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 216px);
  padding:10px 18px;font-size:12.5px;opacity:0;transition:opacity .35s;pointer-events:none;
  max-width:min(460px,88vw);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 .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 */
@media (max-width:620px){
  #marca span{display:none}
  #derecha{max-width:52vw}
  .util{width:38px;height:38px;font-size:15px}
  #partes,#papeles{width:56px;left:6px}
  #partes .nom,#partes .titulo,#partes .n,
  #papeles .nom,#papeles .titulo,#papeles .n{display:none}
  .parte{justify-content:center;padding:9px 4px}
  .parte .sig{width:auto;font-size:18px}
  #grosorCaja{display:none}
  .elem{width:54px}
  #pDeshacer::after,#oDeshacer::after{display:none}
  #pDeshacer,#oDeshacer{height:36px}
  #botonVive{font-size:17px;padding:12px 30px}
  #vivir{bottom:calc(env(safe-area-inset-bottom) + 128px)}
  #aviso{bottom:calc(env(safe-area-inset-bottom) + 212px)}
}
@media (pointer:coarse){ .parte{padding-top:10px;padding-bottom:10px} }