/* ════════════════════════════════════════════════════
   studio.css — pantalla inicial, visor, barras, menús,
   modales, preload, avisos
════════════════════════════════════════════════════ */
/* height (no min-height): con min-height, flexbox no tiene una talla
   principal definida de dónde quitarle espacio a los hijos flex:1 y la
   página crecía más que el viewport (se notaba al salir de pantalla
   completa). Con height fija, .tp-viewer y su canvas-envoltorio (los dos
   min-height:0) se encogen para ceder el espacio exacto de las barras. */
.tp-app {
  position: relative; /* para que .tp-preload (absolute) cubra exactamente esta área */
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* [hidden] tiene la misma especificidad que una clase y el navegador la
   aplica ANTES que las hojas de autor: todo elemento que use `hidden` Y
   tenga acá un display explícito necesita su entrada en esta lista. */
.tp-drop[hidden],
.tp-viewer[hidden],
.tp-preload[hidden],
.tp-modal[hidden],
.tp-menu[hidden],
.tp-galeria[hidden],
.tp-tarjetas[hidden],
.tp-compartido[hidden],
.tp-enlace[hidden],
.tp-paleta[hidden],
.tp-marcando[hidden],
.tp-nadir-img[hidden],
.tp-ajuste[hidden],
.tp-ajuste-fila[hidden],
.tp-soltar[hidden],
.tp-progreso[hidden],
.tp-marca__plan[hidden],
.tp-opcion[hidden] { display: none; }

/* ── Idioma (el botón "EN/ES" de Galaxial) ── */
.tp-idioma {
  flex: none; min-width: 30px; height: 30px; padding: 0 6px;
  border: 1px solid var(--borde-2); border-radius: var(--r-boton);
  background: transparent; color: var(--texto-tenue);
  font-family: inherit; font-size: .64rem; font-weight: 700; letter-spacing: .12em;
  cursor: pointer; transition: color .15s, border-color .15s;
}
.tp-idioma:hover { color: var(--texto-brillante); border-color: var(--acento); }
.tp-idioma--flotante { position: absolute; top: 14px; right: 14px; z-index: 2; }

/* ── Pantalla inicial ─────────────────────── */
/* De fondo, a pantalla completa, uno de los planetas de muestra elegido al
   azar (js/fondo.js): ya difuminado en un canvas, y acá oscurecido con un
   velo y una viñeta fotográfica que apaga los bordes. Son CAPAS DEL
   BACKGROUND de la propia sección, no un ::before/::after fijo encima: esa
   forma la esconden algunos bloqueadores de anuncios (trampa 15 del
   CLAUDE.md de la raíz). `background-attachment: fixed` no: la sección ya
   ocupa todo el alto y, al desplazarse, con fixed el fondo se re-pinta en
   cada cuadro en móviles. */
.tp-drop {
  position: relative;
  flex: 1;
  display: flex;
  padding: clamp(12px, 4svh, var(--gap-l)) var(--gap-m);   /* menos aire arriba y abajo en pantallas bajas */
  /* La página inicial no se desplaza: app.js (ajustarInicio) angosta el
     bloque hasta que todo quepa en alto. Esto queda solo de respaldo, para
     pantallas tan bajas que ni el ancho mínimo alcanza. */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
}
.tp-drop.con-fondo {
  background:
    radial-gradient(ellipse 75% 70% at 50% 45%, transparent 35%, rgba(0, 0, 0, .78) 100%),
    linear-gradient(color-mix(in srgb, var(--bg) 55%, transparent), color-mix(in srgb, var(--bg) 55%, transparent)),
    var(--fondo-muestra) center / cover no-repeat,
    var(--bg);
}
.tp-drop__inner {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  margin: auto;                  /* centra, y si no cabe se desplaza sin cortar arriba */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-s);
}
.tp-drop__logo { width: clamp(120px, min(46vw, 25svh), 360px); height: auto; margin: 0; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); }
.tp-drop__titulo {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  color: var(--texto-brillante);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
  /* "Tu foto 360° → miniplaneta": la flecha entre los dos textos */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .1em .35em;
}
/* Trazo grueso con puntas y codo redondos: que parezca de la misma Sour Gummy */
.tp-drop__flecha { width: 1.3em; height: 1.3em; flex: none; color: var(--acento); }
/* Solo lo usa el aviso de "sin WebGL" (mostrarSinWebGL en app.js) */
.tp-drop__texto { color: var(--texto-tenue); margin: 0; font-size: .92rem; line-height: 1.5; }

/* --ancho-galeria lo pone app.js (ajustarInicio) para que el inicio quepa en alto */
.tp-galeria { width: min(100%, var(--ancho-galeria, 100%)); }
.tp-rotulo {
  display: flex; align-items: center; gap: 10px;
  font-family: inherit; font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
/* Centrada: la sangría va a los dos lados (si fuera solo a la izquierda,
   correría el centro). El rótulo es flex, así que se centra con
   justify-content —text-align no lo mueve—. */
.tp-muestras-cab { grid-column: 1 / -1; min-width: 0; text-align: center; padding-inline: var(--r-ficha); }
.tp-muestras-cab .tp-rotulo { justify-content: center; }
/* El rótulo de las muestras se ve igual que "Elige una imagen", y su nota
   del mismo tamaño que la indicación del botón (.tp-tarjeta__nota). */
.tp-muestras-cab .tp-rotulo { margin-bottom: 3px; color: var(--acento); font-size: .8rem; letter-spacing: .12em; }
.tp-rotulo__nota {
  margin: 0;
  font-size: .82rem; line-height: 1.4;
  color: var(--acento);   /* el mismo acento de "Imágenes de muestra" */
}
/* Si la nota no cabe en una línea, se parte entre las dos frases */
.tp-rotulo__nota .tp-frase { display: inline-block; }
.tp-rotulo__nota a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }   /* del mismo acento; lo distingue el subrayado */
.tp-rotulo__nota a:hover, .tp-rotulo__nota a:focus-visible { color: var(--texto-brillante); }

.tp-tarjetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
/* Las muestras van en 3 columnas (las recientes siguen en 4) */
.tp-tarjetas--muestras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tp-tarjeta {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 0; overflow: hidden;
  border: 1px solid var(--borde); border-radius: var(--r-ficha);
  background: var(--bg2); color: var(--texto);
  cursor: pointer; text-align: left;
  transition: border-color .15s, transform .2s ease;
}
.tp-tarjeta:hover { border-color: var(--acento); }
.tp-tarjeta:hover .tp-tarjeta__planeta { transform: scale(1.5) rotate(-8deg); }
.tp-tarjeta__vista { aspect-ratio: 1; overflow: hidden; background: #000; display: grid; place-items: center; }
.tp-tarjeta__planeta { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.tp-tarjeta__plana { width: 100%; aspect-ratio: 2; object-fit: cover; display: block; opacity: .75; border-bottom: 1px solid var(--borde); }

.tp-tarjeta__flecha {
  display: grid; place-items: center;
  padding: 5px 0;
  color: var(--texto-tenue);
  transition: color .15s, transform .2s ease;
}
.tp-tarjeta__flecha svg { width: 14px; height: 14px; display: block; }
.tp-tarjeta:hover .tp-tarjeta__flecha { color: var(--acento); transform: translateY(1px); }
.tp-tarjeta__flecha + .tp-tarjeta__vista { border-top: 1px solid var(--borde); }
.tp-tarjeta__nombre {
  padding: 6px 8px;
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* "Elige una imagen": una fila completa debajo de las muestras, con la
   proporción 2:1 de la imagen que se sube; ícono, nombre y la indicación
   centrados adentro. */
.tp-tarjeta--elegir {
  grid-column: 1 / -1; aspect-ratio: 2;
  overflow: visible;   /* sin fotos que recortar: si el texto no cabe en el 2:1, el botón crece en vez de cortarlo */
  justify-content: center; align-items: center; gap: 6px;
  padding: 12px; text-align: center;
  color: var(--acento);
  border-color: color-mix(in srgb, var(--acento) 55%, var(--borde));
  background: color-mix(in srgb, var(--acento) 7%, var(--bg2));
}
.tp-tarjeta--elegir .tp-tarjeta__vista { aspect-ratio: auto; background: transparent; overflow: visible; }
.tp-tarjeta--elegir .tp-tarjeta__vista svg {
  width: clamp(36px, 11vw, 56px); height: auto; aspect-ratio: 1;
  transition: transform .3s ease;
}
.tp-tarjeta--elegir:hover .tp-tarjeta__vista svg { transform: translateY(-3px); }
.tp-tarjeta--elegir .tp-tarjeta__nombre {
  display: block; padding: 0; color: var(--acento);
  font-size: .8rem; letter-spacing: .12em; white-space: normal;
}
.tp-tarjeta__pista { font-size: .78rem; line-height: 1.45; color: var(--acento); }   /* el mismo acento del nombre */
/* Soltar y pegar son cosas de escritorio: se oculta solo si NINGÚN puntero
   del equipo es fino (celular, tableta sin mouse). any-* y no hover/pointer
   a secas: esos miran solo el puntero PRINCIPAL, y en un portátil con
   pantalla táctil Windows puede reportar el dedo aunque haya mouse. */
@media not all and (any-hover: hover) and (any-pointer: fine) { .tp-tarjeta__pista { display: none; } }
/* Ctrl o Command según el sistema: app.js pone .es-mac en <html>. Las dos
   variantes van en el marcado y se elige por CSS, sin tocar el texto que
   traduce i18n.js (que compara el HTML para volver al español). */
.tp-tecla-cmd { display: none; }
.es-mac .tp-tecla-cmd { display: inline; }
.es-mac .tp-tecla-ctrl { display: none; }
.tp-tarjeta__pista kbd { color: inherit; border-color: color-mix(in srgb, currentColor 45%, transparent); }
.tp-tarjeta__nota { font-size: .82rem; line-height: 1.4; color: var(--texto-tenue); }
.tp-tarjeta__vista.cargando { background: linear-gradient(100deg, var(--bg2) 30%, var(--bg3) 50%, var(--bg2) 70%) 0 0 / 300% 100%; animation: tp-brillo 1.3s linear infinite; }
@keyframes tp-brillo { to { background-position: -150% 0; } }
.tp-tarjeta-envoltorio { position: relative; display: flex; }
.tp-tarjeta-envoltorio > .tp-tarjeta { flex: 1; }
.tp-tarjeta__quitar {
  position: absolute; top: 4px; right: 4px; z-index: 1;
  width: 24px; height: 24px; display: grid; place-items: center;
  border: 1px solid var(--borde-2); border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--texto-tenue);
  opacity: 0; transition: opacity .15s, color .15s;
  cursor: pointer;
}
.tp-tarjeta__quitar svg { width: 12px; height: 12px; }
.tp-tarjeta-envoltorio:hover .tp-tarjeta__quitar, .tp-tarjeta__quitar:focus-visible { opacity: 1; }
.tp-tarjeta__quitar:hover { color: var(--texto-brillante); border-color: var(--acento); }
@media (hover: none) { .tp-tarjeta__quitar { opacity: 1; } }
@media (max-width: 520px) {
  .tp-tarjetas { gap: 6px; }
  .tp-tarjeta__flecha { padding: 3px 0; }
  .tp-tarjeta__flecha svg { width: 11px; height: 11px; }
  .tp-tarjeta__nombre {
    padding: 5px 5px 6px; font-size: .54rem; letter-spacing: .04em; line-height: 1.25;
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .tp-tarjeta__quitar { width: 20px; height: 20px; top: 3px; right: 3px; }
}

/* ── Visor ────────────────────────────────── */
.tp-viewer {
  position: relative; /* ancla de las barras cuando pasan a superponerse (pantalla completa) */
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── Barra superior (disposición de Galaxial) ── */
/* La marca es un botón: vuelve a la pantalla inicial (con confirmación). */
.tp-marca {
  padding: 3px 12px 3px 3px;
  border: 1px solid transparent; border-radius: var(--r-boton);
  background: transparent; color: inherit; font-family: inherit;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.tp-marca:hover { border-color: var(--borde-2); background: var(--bg3); }
.tp-barra {
  flex: none;
  height: calc(var(--barra-h) + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  background: var(--bg2);
  border-bottom: 1px solid var(--borde);
  z-index: 10;
}
.tp-marca { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Ancho: el logo horizontal (el de Tiny Planet Studio+ con licencia, que ya
   trae su "+": la chapita sobra). Angosto (≤ 640 px, más abajo): solo el
   ícono, y la chapita al lado. */
.tp-marca { padding: 2px 4px; }   /* el mismo marco que .tp-exportar: el logo del alto de sus botones */
.tp-marca__horiz { height: 30px; width: auto; flex: none; }
.tp-marca__icono { display: none; width: 28px; height: 28px; flex: none; }
.tp-marca .tp-marca__plan { display: none; }
/* Licencia activa: una chapita, como la versión de Galaxial junto al logo */
.tp-marca__plan {
  flex: none; width: 18px; height: 18px; display: grid; place-items: center;
  border: 1px solid var(--acento); border-radius: 50%;
  color: var(--acento); font-size: .8rem; font-weight: 700; line-height: 1;
}
.tp-acciones { margin-left: auto; display: flex; align-items: center; gap: 5px; flex: none; }
/* Exportar (Perihedra, enlace, copiar, compartir, descargar): un solo bloque
   en píldora, con el acento apagado de fondo; adentro los íconos van sin
   caja propia, y "Descargar" sigue siendo el botón fuerte, al final. */
.tp-exportar {
  display: flex; align-items: center; gap: 2px;
  margin-left: 4px; padding: 2px 2px 2px 4px;
  border: 1px solid color-mix(in srgb, var(--acento) 35%, var(--borde));
  border-radius: var(--r-boton);
  background: color-mix(in srgb, var(--acento) 6%, var(--bg));
}
.tp-exportar .tp-icono { background: transparent; border-color: transparent; }
.tp-exportar .tp-icono:hover { color: var(--acento); border-color: transparent; background: color-mix(in srgb, var(--acento) 12%, transparent); }
.tp-sep { width: 1px; height: 18px; background: var(--borde-2); margin: 0 3px; }
@media (max-width: 640px) {
  .tp-marca__horiz { display: none; }
  .tp-marca__icono { display: block; }
  .tp-marca .tp-marca__plan:not([hidden]) { display: grid; }
  .tp-marca { padding: 3px; }   /* sin el nombre, el botón queda como un círculo con el ícono */
  .tp-boton__texto { display: none; }   /* "Descargar" queda como ícono solo */
  #tpDescargar { padding: 6px 9px; }
  .tp-sep { display: none; }
}
/* Pantallas angostas: TODOS los botones de la barra a la vista, ninguno
   escondido. En vez de quitar botones, se achican: cada uno mide lo que le
   toca del ancho —la barra lleva hasta 11 cosas: el logo, deshacer, rehacer,
   restablecer, pantalla completa, ayuda, idioma, Perihedra, enlace,
   compartir y descargar—, entre 24 px (el mínimo de WCAG 2.5.8 para un
   blanco táctil) y 42 px. El "- 56px" es lo que no son botones: el relleno
   de la barra, los huecos entre botones y el borde del grupo de exportar.
   Va con ".tp-barra" delante para ganarle al tamaño táctil de 42 px de
   (pointer: coarse), que está más abajo en este archivo. */
@media (max-width: 560px) {
  .tp-barra {
    --boton-barra: clamp(24px, calc((100vw - 56px) / 11), 42px);
    gap: 4px;
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
  }
  .tp-acciones { gap: 1px; }
  .tp-barra .tp-icono,
  .tp-barra .tp-idioma,
  .tp-barra #tpDescargar {
    width: var(--boton-barra); height: var(--boton-barra);
    min-width: 0; min-height: 0; padding: 0;
  }
  .tp-barra .tp-icono svg,
  .tp-barra #tpDescargar svg { width: calc(var(--boton-barra) * .55); height: calc(var(--boton-barra) * .55); }
  .tp-barra .tp-idioma { font-size: calc(var(--boton-barra) * .3); letter-spacing: .04em; }
  .tp-marca { padding: 2px; gap: 2px; }
  .tp-marca .tp-marca__icono { width: calc(var(--boton-barra) - 4px); height: calc(var(--boton-barra) - 4px); }
  /* La chapita "+" de Tiny Planet Studio+, al lado del logo, también se achica */
  .tp-marca__plan { width: calc(var(--boton-barra) * .55); height: calc(var(--boton-barra) * .55); font-size: calc(var(--boton-barra) * .38); }
  .tp-exportar { gap: 1px; margin-left: 2px; padding: 1px; }
}

/* Pantalla completa: un solo botón, dos dibujos — entrar / salir */
#tpPantallaCompleta .tp-ico-salir { display: none; }
#tpPantallaCompleta[aria-pressed="true"] .tp-ico-entrar { display: none; }
#tpPantallaCompleta[aria-pressed="true"] .tp-ico-salir { display: block; }

/* Lo que se ve EN el canvas es exactamente el encuadre que se exporta (ver
   ajustarTamanoCanvas en app.js). */
.tp-viewer__canvas-envoltorio {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#tpCanvas { display: block; touch-action: none; cursor: grab; outline: none; }
#tpCanvas:active { cursor: grabbing; }
/* El canvas se puede manejar con el teclado: con foco, un marco en acento. */
#tpCanvas:focus-visible { box-shadow: 0 0 0 2px var(--acento); }

/* Marco: el rectángulo exacto del canvas (app.js le pone left/top/width/
   height y --lado, el lado menor en px). Las medidas de la marca de agua
   son las MISMAS fracciones que usa componerExport() — 12 % de ancho y
   3 % de margen sobre el lado menor —, así la vista previa es fiel. */
.tp-marco { position: absolute; pointer-events: none; z-index: 2; --lado: 300px; }
.tp-marco__marca-agua {
  position: absolute;
  left: calc(var(--lado) * .03);
  bottom: calc(var(--lado) * .03);
  width: calc(var(--lado) * .12);
  height: auto;
  opacity: .85;
}
.tp-marco__marca-agua[hidden] { display: none; }

/* Guías de encuadre: 2 verticales + 2 horizontales, que el modo coloca */
.tp-guias { position: absolute; inset: 0; opacity: 0; transition: opacity .2s; }
.tp-guias.tp-guias--tercios, .tp-guias.tp-guias--aurea, .tp-guias.tp-guias--centro { opacity: 1; }
.tp-guia { position: absolute; background: color-mix(in srgb, var(--texto-brillante) 55%, transparent); box-shadow: 0 0 2px rgba(0, 0, 0, .6); }
.tp-guia--v { top: 0; bottom: 0; width: 1px; }
.tp-guia--h { left: 0; right: 0; height: 1px; }
.tp-guias--tercios .tp-guia--v.tp-guia--a { left: 33.333%; }
.tp-guias--tercios .tp-guia--v.tp-guia--b { left: 66.667%; }
.tp-guias--tercios .tp-guia--h.tp-guia--a { top: 33.333%; }
.tp-guias--tercios .tp-guia--h.tp-guia--b { top: 66.667%; }
/* Sección áurea: 1/φ² y 1/φ del lado (38,197 % y 61,803 %) */
.tp-guias--aurea .tp-guia--v.tp-guia--a { left: 38.197%; }
.tp-guias--aurea .tp-guia--v.tp-guia--b { left: 61.803%; }
.tp-guias--aurea .tp-guia--h.tp-guia--a { top: 38.197%; }
.tp-guias--aurea .tp-guia--h.tp-guia--b { top: 61.803%; }
.tp-guias--centro .tp-guia--v.tp-guia--a { left: 50%; }
.tp-guias--centro .tp-guia--h.tp-guia--a { top: 50%; }
.tp-guias--centro .tp-guia--b { display: none; }

/* Pista de gestos (la .pista de Galaxial): se va con el primer gesto. */
.tp-pista {
  position: absolute;
  right: var(--gap-s);
  bottom: var(--gap-s);
  z-index: 3;
  margin: 0;
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-tenue);
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
  transition: opacity .45s ease;
}
.tp-pista.ida { opacity: 0; }
.tp-pista kbd { color: var(--texto); background: color-mix(in srgb, var(--bg) 55%, transparent); }
@media (hover: none), (max-width: 640px) { .tp-pista { display: none; } }

/* ── Barra inferior: herramientas de encuadre ──
   Tres bloques —la forma, el zoom y las herramientas (proporción, guías,
   nadir, nivel, ajustes)— que se acomodan según el ancho:
     escritorio (≥ 1000 px)  una sola fila:  forma │ zoom │ herramientas
     tableta    (641–999)    forma arriba, a lo ancho; zoom │ herramientas
     celular    (≤ 640)      forma · zoom a todo el ancho · herramientas
                             repartidas de borde a borde */
.tp-controles {
  flex: none;
  display: grid;
  grid-template-columns: minmax(300px, 480px) auto auto;
  grid-template-areas: "forma zoom herr";
  justify-content: center;
  align-items: center;
  gap: 8px 0;
  padding: 8px max(14px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--borde);
  background: var(--bg2);
  z-index: 10;
}
.tp-grupo { display: flex; align-items: center; gap: 4px; }
.tp-forma { grid-area: forma; min-width: 0; }
.tp-zoom { grid-area: zoom; }
.tp-herramientas { grid-area: herr; display: flex; align-items: center; gap: 6px; }
/* Separadores verticales entre bloques de la misma fila */
.tp-zoom, .tp-herramientas { padding-left: 20px; margin-left: 20px; border-left: 1px solid var(--borde); min-height: 32px; }

@media (max-width: 999px) {
  .tp-controles {
    grid-template-columns: auto auto;
    grid-template-areas: "forma forma" "zoom herr";
    gap: 6px 0;
  }
  .tp-forma { justify-self: center; width: min(560px, 100%); }
  .tp-zoom { padding-left: 0; margin-left: 0; border-left: none; }
}
@media (max-width: 640px) {
  .tp-controles {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "forma" "zoom" "herr";
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  .tp-forma { width: 100%; }
  .tp-zoom input[type="range"] { flex: 1; width: auto; min-width: 0; }
  .tp-herramientas { padding-left: 0; margin-left: 0; border-left: none; justify-content: space-between; }
  .tp-boton--chip { min-width: 0; }
}

/* La forma: el deslizador y debajo los tres topes en su posición —
   izquierda, centro, derecha. Cada tope lleva ícono Y nombre: el ícono
   solo no dice qué es un "túnel". */
.tp-forma input[type="range"] {
  display: block; width: 100%; margin: 0;
  accent-color: var(--acento); cursor: pointer;
}
.tp-forma__topes { position: relative; height: 26px; margin-top: 2px; }
.tp-tope {
  position: absolute; top: 0;
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 9px 0 6px;
  border: 1px solid transparent; border-radius: var(--r-boton);
  background: transparent; color: var(--texto-tenue);
  font-family: inherit; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: color .15s, background .15s, border-color .15s;
}
.tp-tope[data-forma="planet"] { left: 0; }
.tp-tope[data-forma="pano"] { left: 50%; transform: translateX(-50%); }
.tp-tope[data-forma="tunnel"] { right: 0; }
.tp-tope svg { width: 15px; height: 15px; flex: none; }
.tp-tope:hover { color: var(--texto-brillante); border-color: var(--borde-2); }
.tp-tope[aria-pressed="true"] { background: var(--acento); color: var(--acento-texto); }
@media (max-width: 480px) {
  .tp-tope { padding: 0 7px 0 5px; font-size: .58rem; letter-spacing: .04em; gap: 4px; }
}

/* Zoom: lupa − · deslizador · lupa + */
.tp-zoom input[type="range"] {
  width: clamp(90px, 16vw, 170px);
  accent-color: var(--acento);
  cursor: pointer;
}

/* ── Menús emergentes (proporción, guías, ajustes) ──
   Se abren hacia ARRIBA desde la barra de abajo. Uno a la vez. */
.tp-menu-ancla { position: relative; }
.tp-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  padding: 6px;
  background: var(--bg2);
  border: 1px solid var(--borde-2);
  border-radius: var(--r-panel);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.tp-menu--lista { display: flex; flex-direction: column; gap: 6px; min-width: 250px; }

.tp-boton--chip { gap: 8px; min-width: 7.5rem; justify-content: space-between; letter-spacing: .06em; }
.tp-boton--chip[aria-expanded="true"] { border-color: var(--acento); color: var(--acento); }
.tp-boton--chip[aria-expanded="true"] .tp-ico--chico { transform: rotate(180deg); }
.tp-boton--chip .tp-ico--chico { transition: transform .2s ease; }
.tp-icono[aria-expanded="true"] { border-color: var(--acento); color: var(--texto-brillante); }

/* Fichas: cada una con un dibujo de su forma (patrón de Galaxial) */
.tp-proporciones { display: grid; grid-template-columns: repeat(5, 58px); gap: 4px; }
.tp-guias-op { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.tp-prop__caja { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; }
.tp-prop__caja svg { width: 22px; height: 22px; }
.tp-prop__caja i {
  display: block;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 16%, transparent);
}
/* "Viewport": sigue al área del visor, no es fija — contorno punteado */
.tp-prop__caja i.es-viewport { border-style: dashed; }
.tp-prop {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 7px 2px 6px;
  border: 1px solid var(--borde);
  border-radius: var(--r-ficha);
  background: var(--bg3);
  color: var(--texto-tenue);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.tp-prop:hover { border-color: var(--borde-2); color: var(--texto-brillante); }
.tp-prop[aria-checked="true"] { border-color: var(--acento); color: var(--acento); }
.tp-prop__rotulo {
  font-size: .62rem; font-weight: 700; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 420px) {
  .tp-proporciones { grid-template-columns: repeat(4, 58px); }
}

/* Fila con interruptor (el .ctl-sw de Galaxial) */
.tp-fila-sw {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 8px;
  border: 1px solid var(--borde); border-radius: var(--r-boton);
  background: var(--bg3); color: var(--texto);
  font-family: inherit; font-size: .72rem; font-weight: 700;
  cursor: pointer;
}
.tp-fila-sw:hover { border-color: var(--borde-2); }
.tp-fila-sw i {
  position: relative; flex: none; width: 28px; height: 14px;
  border: 1px solid var(--borde-2); border-radius: 999px;
}
.tp-fila-sw i::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--texto-tenue);
  transition: transform .2s ease, background .2s ease;
}
.tp-fila-sw[aria-pressed="true"] i { border-color: var(--acento); }
.tp-fila-sw[aria-pressed="true"] i::after { transform: translateX(14px); background: var(--acento); }

/* Ajustes de imagen */
.tp-ajustes { min-width: 240px; }
.tp-ajuste {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px;
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-tenue);
}
.tp-ajuste output { font-variant-numeric: tabular-nums; color: var(--texto); letter-spacing: 0; }
.tp-ajuste input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--acento); cursor: pointer; }
.tp-ajustes .tp-link { margin-top: 2px; }

/* Nota corta al comienzo de un menú (nadir, nivelación) */
.tp-menu__nota { margin: 0 2px 2px; max-width: 260px; font-size: .72rem; line-height: 1.45; color: var(--texto-tenue); }

/* Nadir: color, e imagen propia con su miniatura (en damero: puede ser
   transparente) */
.tp-ajuste-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tp-ajuste-fila .tp-link { margin: 0; width: auto; }
.tp-ajuste--color { display: flex; align-items: center; gap: 10px; }
.tp-muestra-color {
  width: 34px; height: 22px; padding: 0;
  border: 1px solid var(--borde-2); border-radius: 6px;
  background: var(--muestra, #666); cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--bg2);
}
.tp-muestra-color:hover, .tp-muestra-color[aria-expanded="true"] { border-color: var(--acento); }

/* Paleta de Pintando el Mundo que Soñamos: app.js le pone left/top (sobre
   el clic) y le inserta el SVG con los colores ya horneados como fill. */
.tp-paleta {
  position: fixed; z-index: 60;
  width: 232px; padding: 8px;
  background: var(--bg2);
  border: 1px solid var(--borde-2); border-radius: var(--r-panel);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
}
.tp-paleta svg { display: block; width: 100%; height: auto; }
.tp-paleta [data-color] { cursor: pointer; transition: opacity .12s; }
.tp-paleta svg:hover [data-color] { opacity: .55; }
.tp-paleta svg:hover [data-color]:hover { opacity: 1; stroke: #fff; stroke-width: .35; }
.tp-nadir-img { display: flex; align-items: center; gap: 6px; }
.tp-nadir-img__texto { flex: 1; font-size: .72rem; color: var(--texto-tenue); }
.tp-nadir-img img { margin-right: auto; }
.tp-nadir-img img {
  width: 34px; height: 34px; flex: none; object-fit: cover;
  border: 1px solid var(--borde-2); border-radius: 50%;
  background: repeating-conic-gradient(#3a3a3a 0 25%, #555 0 50%) 0 0 / 8px 8px;
}

/* Recorte circular: afuera del círculo el canvas es transparente; un damero
   lo dice sin palabras. La marca de agua pasa abajo al CENTRO, dentro del
   círculo (--margen-circulo lo pone app.js: el sobrante vertical en
   proporciones verticales, 0 en las apaisadas). */
#tpCanvas.tp-circular { background: repeating-conic-gradient(#1c1c1c 0 25%, #262626 0 50%) 0 0 / 16px 16px; }
.tp-marco--circular .tp-marco__marca-agua {
  left: calc(50% - var(--lado) * .06);
  bottom: calc(var(--margen-circulo, 0px) + var(--lado) * .03);
}

/* Marcar dos puntos del horizonte */
#tpCanvas.tp-marcando { cursor: crosshair; }
.tp-marcando {
  position: absolute; top: var(--gap-s); left: 50%; transform: translateX(-50%);
  z-index: 4;
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 24px);
  padding: 7px 10px 7px 14px;
  background: color-mix(in srgb, var(--bg2) 90%, transparent);
  border: 1px solid var(--acento); border-radius: var(--r-boton);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  font-size: .74rem; font-weight: 700; color: var(--texto-brillante);
}
.tp-marcando .tp-link { margin: 0; width: auto; flex: none; }
.tp-punto {
  position: absolute; z-index: 3;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border: 2px solid var(--acento); border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .55);
  pointer-events: none;
}

/* ── Pantalla completa ─────────────────────────
   Las dos barras salen del flujo y se superponen al canvas (que así ocupa
   la pantalla entera) para poder autoocultarse. */
.tp-app--pantalla-completa .tp-barra,
.tp-app--pantalla-completa .tp-controles {
  position: absolute;
  left: 0; right: 0;
  border: none;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1), opacity .32s cubic-bezier(.4, 0, .2, 1);
}
.tp-app--pantalla-completa .tp-barra {
  top: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 90%, transparent), color-mix(in srgb, var(--bg) 60%, transparent) 65%, transparent);
}
.tp-app--pantalla-completa .tp-controles {
  bottom: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 90%, transparent), color-mix(in srgb, var(--bg) 60%, transparent) 65%, transparent);
}
.tp-app--pantalla-completa .tp-barra.tp-oculto { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.tp-app--pantalla-completa .tp-controles.tp-oculto { transform: translateY(100%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .tp-app--pantalla-completa .tp-barra,
  .tp-app--pantalla-completa .tp-controles { transition: none; }
}

/* ── Preload: el ícono de Tiny Planet Studio girando ──
   Gira con transform, que el navegador anima fuera del hilo principal: sigue
   girando aunque JS esté ocupado subiendo la imagen a la GPU (ver
   prepararGPU en viewer.js), que es justo lo que tarda. */
.tp-preload {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-m);
  background: var(--bg);
}
.tp-preload__icono {
  width: 88px; height: 88px;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--acento) 45%, transparent));
  animation: tp-preload-giro 1.6s linear infinite;
}
@keyframes tp-preload-giro { to { transform: rotate(360deg); } }
.tp-preload__texto {
  font-size: .8rem;
  font-weight: 700;
  color: var(--texto-tenue);
  letter-spacing: .04em;
}

@media (prefers-reduced-motion: reduce) {
  .tp-preload__icono { animation-duration: 6s; }   /* lento, pero que se note que trabaja */
  .tp-tarjeta__vista.cargando { animation: none !important; }
}

/* ── Velo para soltar ─────────────────────────
   Toda la ventana es zona de soltar: el velo cubre todo y lo dice. */
.tp-soltar {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  pointer-events: none;   /* el drop lo escucha window, no el velo */
}
.tp-soltar__caja {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border: 2px dashed var(--acento); border-radius: var(--r-panel);
  color: var(--acento);
  animation: tp-soltar-latido 1.4s ease-in-out infinite;
}
.tp-soltar__caja svg { width: 44px; height: 44px; }
.tp-soltar__caja p { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
@keyframes tp-soltar-latido { 50% { background: color-mix(in srgb, var(--acento) 7%, transparent); } }
@media (prefers-reduced-motion: reduce) { .tp-soltar__caja { animation: none; } }

/* ── Progreso de la exportación ── */
.tp-progreso {
  position: fixed;
  left: 50%;
  top: calc(var(--barra-h) + env(safe-area-inset-top, 0px) + 12px);
  transform: translateX(-50%);
  z-index: 55;
  display: flex; flex-direction: column; gap: 8px;
  width: min(320px, 90vw);
  padding: 10px 14px;
  background: var(--bg3);
  border: 1px solid var(--borde-2);
  border-radius: var(--r-panel);
  font-size: .72rem; font-weight: 700; color: var(--texto-brillante);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.tp-progreso__barra { height: 3px; background: var(--borde); overflow: hidden; }
.tp-progreso__barra i { display: block; height: 100%; width: 0; background: var(--acento); transition: width .25s ease; }

/* ── Modales ──────────────────────────────── */
.tp-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-m);
}
.tp-modal__fondo {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 74%, transparent);
}
.tp-modal__panel {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: min(88vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg2);
  border: 1px solid var(--borde);
  border-radius: var(--r-panel);
  padding: var(--gap-l) var(--gap-m) var(--gap-m);
}
.tp-modal__panel--ancho { width: min(600px, 100%); }
.tp-modal__panel--chico { width: min(420px, 100%); padding-top: var(--gap-m); }
.tp-modal__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: var(--gap-s); }
.tp-modal__cerrar {   /* el aspecto lo pone .tp-icono; acá solo va la posición */
  position: absolute;
  top: var(--gap-s);
  right: var(--gap-s);
}
.tp-modal__titulo {
  font-family: var(--fuente-display);
  font-weight: 700;
  color: var(--texto-brillante);
  margin: 0 0 var(--gap-m);
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  text-align: center;
}
/* ── Elegir versión (modal de descarga y compra) ──────────────
   La organización de todas las herramientas premium (Caleidociclero y
   compañía): título, tres niveles de menos a más (gratis, esta
   herramienta, Perigami+ recomendado) y un pie con "¿Ya compraste?" y el
   botón. Tarjetas seleccionables con radios reales, escondidos: el <label>
   entero es el área de clic, y :has() pinta la elegida (sin :has() no
   resalta ninguna y todo sigue funcionando). */
.tp-modal__titulo.tp-compra-cabeza { margin: 0 0 4px; padding-right: 36px; text-align: left; }
.tp-compra-intro { margin: 0 0 var(--gap-s); font-size: .8rem; color: var(--texto-tenue); }
.tp-compra-opciones { display: grid; gap: 8px; margin-bottom: var(--gap-s); }
.tp-compra-opcion {
  position: relative; display: block; cursor: pointer;
  background: var(--bg3);
  border: 1px solid var(--borde); border-radius: var(--r-ficha);
  padding: 10px 14px 11px;
  transition: border-color .15s, background .15s;
}
.tp-compra-opcion > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tp-compra-opcion:hover { border-color: color-mix(in srgb, var(--acento) 55%, var(--borde)); }
.tp-compra-opcion:has(input:checked) {
  border-color: var(--acento); background: var(--acento-tenue);
  box-shadow: 0 0 0 1px var(--acento) inset;
}
.tp-compra-opcion:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.tp-compra-opcion__cabeza {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px;
  margin-bottom: 4px;
}
.tp-compra-opcion__nombre {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--texto-brillante);
}
.tp-compra-opcion__icono { display: block; width: 18px; height: 18px; flex: none; }
.tp-compra-opcion__precio { font-size: 1rem; font-weight: 700; white-space: nowrap; text-align: right; color: var(--acento); }
/* Gratis: apagada mientras no es la elegida — está, pero no compite. */
.tp-compra-opcion--gratis:not(:has(input:checked)) .tp-compra-opcion__nombre,
.tp-compra-opcion--gratis:not(:has(input:checked)) .tp-compra-opcion__precio { color: var(--texto-tenue); }
.tp-compra-opcion--gratis:not(:has(input:checked)) .tp-compra-opcion__icono { opacity: .6; }
.tp-compra-opcion--gratis:has(input:checked) {
  border-color: var(--texto-tenue); background: var(--bg3); box-shadow: 0 0 0 1px var(--texto-tenue) inset;
}
/* Recomendada: con el segundo acento, para que se lea como "la mejor". */
.tp-compra-opcion--rec { border-color: color-mix(in srgb, var(--acento-2) 45%, var(--borde)); }
.tp-compra-opcion--rec:has(input:checked) {
  border-color: var(--acento-2); background: color-mix(in srgb, var(--acento-2) 10%, transparent);
  box-shadow: 0 0 0 1px var(--acento-2) inset;
}
.tp-compra-opcion--rec .tp-compra-opcion__precio { color: var(--acento-2); }
.tp-compra-etiqueta {
  font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 7px; border: 1px solid var(--borde-2); border-radius: var(--r-boton);
  color: var(--texto-tenue);
}
.tp-compra-etiqueta--rec { border-color: transparent; background: var(--acento-2); color: var(--acento-texto); }
.tp-compra-opcion__specs {
  display: block; margin: 0; padding: 0; list-style: none;
  font-size: .76rem; line-height: 1.55; color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
}
.tp-compra-opcion__specs > li::before { content: "✓"; display: inline-block; width: 16px; color: var(--acento); font-weight: 700; }
.tp-compra-opcion__specs > li.no::before { content: "–"; color: #e2574c; }
.tp-compra-opcion__specs > li:empty { display: none; }
/* Cupo gratis del día agotado (api/cupo.php) */
.tp-compra-opcion__specs > li.agotado { color: var(--acento); }
.tp-compra-herr-lead { display: block; margin-bottom: 5px; color: var(--texto); }
.tp-compra-herrs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; padding: 0; list-style: none; }
.tp-compra-herr {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 5px;
  border: 1px solid var(--borde); border-radius: var(--r-boton);
  font-size: .7rem; color: var(--texto); text-decoration: none;
  transition: border-color .15s, background .15s;
}
.tp-compra-herr img { display: block; width: 14px; height: 14px; object-fit: contain; }
.tp-compra-herr:hover { border-color: var(--acento-2); background: var(--bg2); color: var(--texto-brillante); }
.tp-compra-herr:focus-visible { outline: 1px solid var(--acento-2); outline-offset: 1px; }
.tp-compra-herr--aqui { border-color: color-mix(in srgb, var(--acento) 55%, var(--borde)); background: var(--acento-tenue); }
.tp-compra-futuras { display: block; }
.tp-compra-futuras::before { content: "✓"; display: inline-block; width: 16px; color: var(--acento); font-weight: 700; }
.tp-compra-mas { display: inline-block; vertical-align: -3px; margin-left: 2px; opacity: .85; transition: opacity .15s; }
.tp-compra-mas img { display: block; height: 13px; width: auto; }
.tp-compra-mas:hover { opacity: 1; }
/* Entrada escalonada de las tres tarjetas al abrir */
#tpModalDescarga:not([hidden]) #tpCards:not([hidden]) .tp-compra-opcion { animation: tp-compra-entra .4s cubic-bezier(.2, .7, .3, 1) both; }
#tpModalDescarga:not([hidden]) .tp-compra-opcion:nth-child(2) { animation-delay: .07s; }
#tpModalDescarga:not([hidden]) .tp-compra-opcion:nth-child(3) { animation-delay: .14s; }
@keyframes tp-compra-entra { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  #tpModalDescarga .tp-compra-opcion { animation: none !important; }
}
.tp-compra-correo[hidden] { display: none; }
.tp-compra-correo { margin-bottom: var(--gap-s); }
/* Pie: "¿Ya compraste?" a la izquierda, el botón a la derecha */
.tp-compra-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; margin-top: var(--gap-s); }
.tp-compra-pie .tp-link { width: auto; margin: 0 auto 0 0; white-space: nowrap; }

/* Ayuda: tabla de atajos (la .atajos de Galaxial) */
.tp-modal .tp-rotulo { margin-top: var(--gap-m); }
.tp-atajos { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; align-items: baseline; }
.tp-atajos kbd { font-size: .72rem; color: var(--acento); padding: 2px 6px; white-space: nowrap; justify-self: start; }
.tp-atajos span { font-size: .84rem; color: var(--texto); }

/* Imagen que no es 2:1: opciones como tarjetas horizontales */
.tp-opciones-lista { display: flex; flex-direction: column; gap: 6px; }
.tp-opcion {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--borde); border-radius: var(--r-ficha);
  background: var(--bg3); color: var(--texto);
  font-family: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s;
}
.tp-opcion:hover { border-color: var(--acento); }
.tp-opcion b { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-brillante); }
.tp-opcion span { font-size: .8rem; color: var(--texto-tenue); }
.tp-opcion--sugerida { border-color: var(--acento); }
.tp-opcion--sugerida b { color: var(--acento); }

/* ── Elegir qué comprar, correo, y "¿ya compraste?" ────────── */
.tp-elegir {
  display: flex; flex-direction: column; gap: 4px; width: 100%;
  font-size: 0.78rem; color: var(--texto); text-align: left;
}
.tp-elegir label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.tp-elegir input { accent-color: var(--acento); }

.tp-field { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; }
.tp-field span { font-size: 0.7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-tenue); }
.tp-field input[type="email"] {
  background: var(--bg3); border: 1px solid var(--borde); border-radius: var(--r-boton); color: var(--texto);
  font-family: inherit; font-size: 0.85rem; padding: 8px 10px;
}
.tp-field input[type="email"]:focus-visible { outline: 1px solid var(--acento); outline-offset: 1px; }
.tp-field textarea {
  background: var(--bg3); border: 1px solid var(--borde); border-radius: var(--r-ficha); color: var(--texto);
  font-family: inherit; font-size: 0.85rem; padding: 8px 10px; resize: vertical;
}
.tp-field textarea:focus-visible { outline: 1px solid var(--acento); outline-offset: 1px; }

/* ── Compartir un enlace ───────────────────── */
.tp-enlace { display: flex; flex-direction: column; align-items: center; gap: var(--gap-s); }
.tp-enlace__condiciones { margin: 0; font-size: .72rem; line-height: 1.45; color: var(--texto-tenue); }
.tp-enlace__url { display: flex; gap: 6px; width: 100%; }
.tp-enlace__url input {
  flex: 1; min-width: 0;
  background: var(--bg3); border: 1px solid var(--borde-2); border-radius: var(--r-boton); color: var(--texto-brillante);
  font-family: inherit; font-size: .85rem; padding: 8px 12px;
}
.tp-enlace .tp-link { width: auto; }

/* Para quien llega por un enlace: arriba a la izquierda, sobre la foto */
.tp-compartido {
  position: absolute; top: var(--gap-s); left: var(--gap-s); z-index: 4;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  max-width: calc(100% - 2 * var(--gap-s));
  padding: 4px 14px 4px 16px;   /* termina en el enlace "Reportar", no en un botón: aire a la derecha */
  background: color-mix(in srgb, var(--bg2) 88%, transparent);
  border: 1px solid var(--borde-2); border-radius: var(--r-boton);   /* píldora, como los botones */
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  font-size: .78rem; color: var(--texto-brillante);
}
.tp-compartido .tp-link { width: auto; margin: 0; }
/* Pantalla angosta: texto, botón y enlace ya no caben en una línea (unos
   470 px). En dos líneas una píldora queda como un óvalo, así que pasa a
   panel de esquinas redondeadas, a todo el ancho: el texto arriba y debajo
   "Haz el tuyo" y "Reportar". */
@media (max-width: 520px) {
  .tp-compartido {
    right: var(--gap-s);
    border-radius: var(--r-panel);
    padding: 10px 12px;
    gap: 8px 12px;
  }
  .tp-compartido > span { flex: 1 1 100%; }
}

.tp-aviso {
  margin: 0; font-size: 0.78rem; color: #e2574c;
  border-left: 2px solid currentColor; padding-left: 8px; text-align: left;
}
.tp-aviso[hidden] { display: none; }

.tp-link {
  display: block; width: 100%;
  background: none; border: none; padding: 0; margin: 2px 0 0;
  font-family: inherit; font-size: 0.72rem;
  color: var(--acento-2); text-decoration: underline; cursor: pointer;
}
.tp-link:hover, .tp-link:focus-visible { color: var(--acento); }

.tp-modal__nota { margin: 0 0 var(--gap-s); font-size: 0.82rem; color: var(--texto-tenue); text-align: center; line-height: 1.5; }

/* ── Pantalla de resultado ────────────────────────────────── */
.tp-resultado { text-align: center; padding: 4px 4px 0; }
.tp-resultado__icono { width: 44px; height: 44px; margin: 0 auto 12px; }
.tp-resultado__icono--ok { color: var(--acento); }
.tp-resultado__icono--error { color: #e2574c; }
.tp-resultado__icono--espera { color: var(--texto-tenue); animation: tp-girar 1.4s linear infinite; }
@keyframes tp-girar { to { transform: rotate(360deg); } }
.tp-resultado h3 {
  margin: 0 0 8px; font-family: var(--fuente-display); font-weight: 700;
  color: var(--texto-brillante); font-size: 1rem;
}
.tp-resultado p { margin: 0 0 14px; font-size: 0.85rem; color: var(--texto-tenue); }
.tp-resultado .tp-boton { width: auto; padding-left: 20px; padding-right: 20px; }

/* ── Toast ────────────────────────────────── */
/* Arriba, bajo la barra: abajo tapaba la barra de herramientas. */
.tp-toast {
  position: fixed;
  left: 50%;
  top: calc(var(--barra-h) + env(safe-area-inset-top, 0px) + 12px);
  transform: translateX(-50%);
  background: var(--bg3);
  border: 1px solid var(--borde);
  color: var(--texto-brillante);
  padding: 10px 18px;
  border-radius: var(--r-boton);
  font-size: 0.8rem;
  font-weight: 700;
  z-index: 80;
  max-width: min(90vw, 420px);
  text-align: center;
}

/* ── Pantallas táctiles ───────────────────────
   30px sirve para un cursor pero no para un dedo (~44px es lo recomendado):
   solo con puntero grueso, así en escritorio la interfaz sigue compacta. */
@media (pointer: coarse) {
  :root { --barra-h: 52px; }
  .tp-icono { width: 42px; height: 42px; }
  .tp-marca__horiz { height: 42px; }
  .tp-forma__topes, .tp-tope { height: 36px; }
  .tp-icono svg { width: 19px; height: 19px; }
  .tp-idioma { height: 42px; min-width: 42px; }
  .tp-boton { min-height: 42px; }
  .tp-prop { padding: 10px 2px 8px; }
  .tp-proporciones { grid-template-columns: repeat(5, 62px); }
  .tp-fila-sw { padding: 12px 10px; }
  .tp-zoom input[type="range"], .tp-ajuste input[type="range"] { height: 32px; }
}
@media (pointer: coarse) and (max-width: 420px) {
  .tp-proporciones { grid-template-columns: repeat(4, 62px); }
}