/* Stand Capstone Copper: señalética de exposición con la identidad del mural.
   Azul marino de fondo, naranja solo en lo que se toca y Archivo ancho en mayúsculas para los títulos
   (como "DISTRITO MANTOVERDE - SANTO DOMINGO"). Sobre la cámara, todo flota sin tapar el mural. */

.tablet-body {
    --c-navy: #112c47;
    --c-navy-deep: #0a1b2c;
    --c-navy-ink: #06111d;
    --c-orange: #d05716;
    --c-ink: #f4f6f8;
    --c-ink-2: rgba(244, 246, 248, 0.72);
    --c-ink-3: rgba(244, 246, 248, 0.5);
    --c-line: rgba(244, 246, 248, 0.12);
    --c-tile-ink: #3a3a3a;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    background: var(--c-navy-ink);
    color: var(--c-ink);
}

.tablet-body a-scene {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

/* --- Marco de la interfaz ------------------------------------------------------------------------
   Todo lo que va sobre la cámara (no la cámara ni la escena 3D). Con el teléfono de lado y la rotación
   automática bloqueada, la página sigue en vertical: stand-tablet.js gira este marco entero hacia donde
   está el suelo, con el ancho y el alto cruzados, y adentro se arma el diseño horizontal. Por eso el
   diseño no usa media queries de tamaño ni vw/vh/env() directos, sino los del marco:
     clases ui-narrow (≤ 640 px de ancho, teléfono vertical), ui-short (≤ 500 px de alto, teléfono
     horizontal) y ui-roomy (tablet y computador), siempre dentro de :where() para no sumar especificidad;
     medidas --ui-w / --ui-h y márgenes seguros --safe-top/right/bottom/left. */
.tablet-ui {
    --ui-w: 100vw;
    --ui-h: 100vh;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30; /* sobre la escena, también con la maqueta abierta (27) */
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform-origin: 0 0;
    transition: opacity 0.18s ease;
}

@supports (height: 100dvh) {
    .tablet-ui {
        --ui-h: 100dvh;
    }
}

/* girado, cada borde del marco queda sobre otro borde de la pantalla, con su margen seguro */
.tablet-ui.is-turned-ccw {
    --safe-top: env(safe-area-inset-right, 0px);
    --safe-right: env(safe-area-inset-bottom, 0px);
    --safe-bottom: env(safe-area-inset-left, 0px);
    --safe-left: env(safe-area-inset-top, 0px);
}

.tablet-ui.is-turned-cw {
    --safe-top: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-right, 0px);
    --safe-left: env(safe-area-inset-bottom, 0px);
}

/* al girar, la interfaz se rearma entera: un fundido corto en vez del salto */
.tablet-ui.is-switching {
    opacity: 0;
    transition-duration: 0.12s;
}

/* el marco deja pasar los toques (la maqueta se maneja sobre la escena, debajo): solo los reciben
   las piezas que los necesitan; las demás los activan por su cuenta (selector, botones, tarjeta) */
.tablet-ui .mural-points,
.tablet-ui .tablet-map,
.tablet-ui .tablet-status,
.tablet-ui .ar-boot:not([hidden]) {
    pointer-events: auto;
}

/* girado, deslizar a lo largo de una fila o de la tarjeta va en el otro eje de la pantalla */
.tablet-ui.is-turned .tablet-views,
.tablet-ui.is-turned .stand-card-scroll {
    touch-action: pan-x pan-y;
}

@media (prefers-reduced-motion: reduce) {
    .tablet-ui {
        transition: none;
    }
}

.tablet-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* iOS anterior a 14.5 no conoce inset: la pantalla de arranque de ar-ui.css con las cuatro propiedades */
.tablet-body .ar-boot {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* vista previa (?preview) sin cámara: el aviso de «No pudimos abrir la cámara» no tapa la interfaz */
.tablet-preview .ar-boot {
    display: none !important;
}

/* el display de los botones le ganaba al atributo hidden («Ver datos» y «Reintentar» se veían siempre) */
.tablet-body button[hidden] {
    display: none !important;
}

.tablet-point,
.tablet-back,
.tablet-switch button,
.tablet-pill {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* --- Espera: visor al centro y guía abajo; la cámara queda a la vista para apuntar ------------- */

.tablet-hint {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0s linear 0s;
}

.tablet-hint[hidden] {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

/* visor con la proporción del mural (4,7 × 2,5 m = 1,88 : 1). Ancho según la pantalla, sin pasar
   la mitad del alto: en horizontal queda más grande, en vertical cabe a lo ancho */
.tablet-finder {
    --finder-w: min(calc(var(--ui-w) * 0.84), 600px, calc(var(--ui-h) * 0.94));
    position: absolute;
    left: 50%;
    top: 42%;
    width: var(--finder-w);
    height: calc(var(--finder-w) / 1.88);
    transform: translate(-50%, -50%);
    animation: tablet-finder-breathe 3.4s ease-in-out infinite;
}

/* esquinas de tamaño fijo: en un rectángulo, un porcentaje las dejaría disparejas */
.tablet-finder i {
    position: absolute;
    width: 34px;
    height: 34px;
    border: 0 solid rgba(255, 255, 255, 0.92);
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45));
}

.tablet-finder i:nth-child(1) { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 16px; }
.tablet-finder i:nth-child(2) { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 16px; }
.tablet-finder i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 16px; }
.tablet-finder i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 16px; }

@keyframes tablet-finder-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.035); opacity: 1; }
}

.tablet-guide {
    position: absolute;
    left: 50%;
    bottom: max(22px, var(--safe-bottom));
    width: min(580px, calc(var(--ui-w) - 32px));
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid var(--c-line);
    border-radius: 22px;
    background: rgba(6, 17, 29, 0.86);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    transform: translateX(-50%);
    animation: tablet-guide-in 0.7s var(--ease-out) 0.15s both;
}

@keyframes tablet-guide-in {
    from { opacity: 0; transform: translate(-50%, 16px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.tablet-guide-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    color: var(--c-ink-3);
    font-size: 0.84rem;
    line-height: 1.25;
}

.tablet-guide-text b {
    color: var(--c-ink);
    font-size: 1.08rem;
    font-weight: normal;
    font-variation-settings: "wdth" 112, "wght" 700;
}

/* --- Barra: una sola franja marina; Cámara a la izquierda, selector al centro, indicación a la derecha --- */

.tablet-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: max(12px, var(--safe-top)) max(16px, var(--safe-right)) 12px max(16px, var(--safe-left));
    background: var(--c-navy-deep);
    border-bottom: 1px solid var(--c-line);
}

.tablet-back {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px 0 10px;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--c-ink);
    font: inherit;
    font-size: 0.95rem;
    font-variation-settings: "wght" 600;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.tablet-back svg {
    width: 16px;
    height: 16px;
}

.tablet-back:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.1);
}

.tablet-switch {
    justify-self: center;
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
}

.tablet-switch button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 18px 0 7px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--c-ink-2);
    font: inherit;
    font-size: 0.95rem;
    font-variation-settings: "wght" 600;
    cursor: pointer;
    transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.tablet-switch button[aria-pressed="true"] {
    background: #fff;
    color: var(--c-navy);
}

.tablet-switch button:focus-visible,
.tablet-back:focus-visible,
.tablet-pill:focus-visible,
.tablet-point:focus-visible .tablet-point-dot {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.tablet-bar-note {
    justify-self: end;
    max-width: 34ch;
    margin: 0;
    color: var(--c-ink-3);
    font-size: 0.88rem;
    line-height: 1.3;
    text-align: right;
}

.tablet-bar-title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 1rem;
    font-weight: normal;
    font-variation-settings: "wdth" 120, "wght" 700;
    letter-spacing: 0.08em;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

/* en la maqueta la barra flota sobre el escenario: título al centro, Volver y Ver datos a los lados */
.tablet-bar.is-model {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    background: transparent;
    border-bottom: 0;
}

.tablet-bar.is-model .tablet-pill {
    justify-self: end;
}

.tablet-pill {
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--c-orange);
    color: #fff;
    font: inherit;
    font-size: 0.95rem;
    font-variation-settings: "wght" 650;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.tablet-pill:active {
    transform: scale(0.97);
    filter: brightness(1.08);
}

/* --- Secciones ---------------------------------------------------------------------------------- */

.tablet-map,
.tablet-model {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 26;
}

/* barra fija arriba y, debajo, la imagen: se desplaza si no cabe (el mural en un teléfono vertical) */
.tablet-map:not([hidden]) {
    display: flex;
    flex-direction: column;
}

.tablet-map {
    background: var(--c-navy-deep);
}

.tablet-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.tablet-model {
    z-index: 30;
    pointer-events: none;
    background: transparent;
}

.tablet-model .tablet-bar,
.tablet-model-status {
    pointer-events: auto;
}

/* --bar-h = alto real de la barra (lo mide stand-tablet.js); 40 px = márgenes de la imagen */
.tablet-map-frame {
    --map-aspect: 0.802;
    position: relative;
    width: min(920px, calc(var(--ui-w) - 32px), calc((var(--ui-h) - var(--bar-h, 72px) - 40px) * var(--map-aspect)));
    margin: 18px auto 18px;
}

.tablet-map-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.tablet-map-error {
    margin: 24px;
    color: #ffd0cc;
    font-size: 1.05rem;
}

/* --- Puntos: círculo en la posición exacta y etiqueta al lado (labelSide de stand-config.js) --- */

.tablet-point {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font: inherit; /* en Safari los botones no heredan la letra: las etiquetas salían en la del sistema */
    cursor: pointer;
}

.tablet-point-dot {
    position: absolute;
    left: -24px;
    top: -24px;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--c-orange);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38);
    font-size: 0.8rem;
    font-variation-settings: "wdth" 110, "wght" 800;
    letter-spacing: 0.02em;
    transition: transform 0.15s ease;
}

.tablet-point.is-model .tablet-point-dot {
    background: var(--c-navy);
}

.tablet-point.is-info .tablet-point-dot::after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
}

.tablet-point-label {
    position: absolute;
    padding: 7px 13px;
    border-radius: 999px;
    background: #fff;
    color: var(--c-navy);
    font-size: 0.95rem;
    font-variation-settings: "wght" 650;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.tablet-point.is-label-right .tablet-point-label { left: 30px; top: 0; transform: translateY(-50%); }
.tablet-point.is-label-left .tablet-point-label { right: 30px; top: 0; transform: translateY(-50%); }
.tablet-point.is-label-bottom .tablet-point-label { left: 0; top: 30px; transform: translateX(-50%); }
.tablet-point.is-label-top .tablet-point-label { left: 0; bottom: 30px; transform: translateX(-50%); }

.tablet-point:active .tablet-point-dot {
    transform: scale(0.92);
}

/* Stand: anillo marino que late sobre cada pin impreso (el pin y su nombre ya están en el mural).
   52 px de área de toque; el anillo visible es de 40 px para no tapar el nombre impreso al lado. */
.tablet-point.is-pin .tablet-point-dot {
    left: -26px;
    top: -26px;
    width: 52px;
    height: 52px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.tablet-point.is-pin .tablet-point-dot::before {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    bottom: 6px;
    left: 6px;
    border: 3px solid var(--c-navy);
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff, 0 4px 14px rgba(0, 0, 0, 0.3);
    animation: tablet-pin-pulse 2.4s ease-out infinite;
}

@keyframes tablet-pin-pulse {
    0% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(17, 44, 71, 0.5); }
    70% { box-shadow: 0 0 0 2px #fff, 0 0 0 16px rgba(17, 44, 71, 0); }
    100% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(17, 44, 71, 0); }
}

/* --- Maqueta: escenario marino detrás del modelo (el video de la cámara se oculta) ------------- */

/* el pellizco y el arrastre son de la maqueta: sin esto, iPhone (que ignora user-scalable=no)
   acerca toda la página al pellizcar */
body.tablet-model-open,
body.tablet-model-open a-scene,
body.tablet-model-open canvas {
    touch-action: none;
}

body.tablet-model-open {
    background: radial-gradient(120% 90% at 50% 64%, #1b3a5a 0%, #0c1f34 46%, #050d17 100%);
}

body.tablet-model-open a-scene {
    z-index: 27;
}

body.tablet-model-open video {
    opacity: 0;
}

.tablet-gesture {
    position: absolute;
    left: 50%;
    bottom: max(26px, var(--safe-bottom));
    margin: 0;
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--c-ink-2);
    font-size: 0.88rem;
    white-space: nowrap;
    pointer-events: none;
    transform: translateX(-50%);
    /* se ve al abrir la maqueta y se va sola */
    animation: tablet-fade-out 0.6s ease 4.5s forwards;
}

@keyframes tablet-fade-out {
    to { opacity: 0; }
}

/* se va en cuanto el visitante empieza a manejar la maqueta */
.tablet-gesture.is-used {
    opacity: 0;
    animation: none;
    transition: opacity 0.25s ease;
}

/* «Vista inicial»: aparece solo cuando la vista cambió; abajo a la derecha, a mano del pulgar */
.tablet-reset {
    position: absolute;
    right: max(18px, var(--safe-right));
    bottom: max(22px, var(--safe-bottom));
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(6, 17, 29, 0.86);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    color: var(--c-ink);
    font: inherit;
    font-size: 0.95rem;
    font-variation-settings: "wght" 600;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    transition: opacity 0.22s ease, transform 0.3s var(--ease-out);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.tablet-reset.is-visible {
    pointer-events: auto;
    opacity: 1;
    transform: none;
}

.tablet-reset:active {
    transform: scale(0.96);
}

.tablet-reset svg {
    width: 18px;
    height: 18px;
}

.tablet-reset:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .tablet-reset {
        transition: opacity 0.15s linear;
        transform: none;
    }
}

/* Vistas con nombre: una fila abajo, al alcance del pulgar; si no caben, se desliza de lado.
   La que está a la vista va en naranja (lo que se toca), como los puntos del mapa. */
.tablet-views {
    position: absolute;
    right: 0;
    bottom: max(16px, var(--safe-bottom));
    left: 0;
    display: flex;
    gap: 8px;
    padding: 4px max(16px, var(--safe-right)) 4px max(16px, var(--safe-left));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}

.tablet-views::-webkit-scrollbar {
    display: none;
}

/* centrada cuando cabe; si no, empieza en el borde izquierdo */
.tablet-view:first-child {
    margin-left: auto;
}

.tablet-view:last-child {
    margin-right: auto;
}

.tablet-view {
    flex: none;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(6, 17, 29, 0.86);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    color: var(--c-ink);
    font: inherit;
    font-size: 0.9rem;
    font-variation-settings: "wght" 600;
    white-space: nowrap;
    cursor: pointer;
    /* la sección de la maqueta no recibe toques (son de la maqueta): solo los botones */
    pointer-events: auto;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.tablet-view[aria-pressed="true"] {
    border-color: var(--c-orange);
    background: var(--c-orange);
    color: #fff;
}

.tablet-view:active {
    transform: scale(0.96);
}

.tablet-view:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* con la fila de vistas, la indicación de gestos sube por encima de ella */
.tablet-model.has-views .tablet-gesture {
    bottom: calc(max(16px, var(--safe-bottom)) + 64px);
}

:where(.ui-narrow) .tablet-view {
    padding: 0 14px;
    font-size: 0.86rem;
}

@media (prefers-reduced-motion: reduce) {
    .tablet-view {
        transition: none;
    }
}

.tablet-model-status {
    position: absolute;
    left: 50%;
    top: 52%;
    padding: 18px 26px;
    border: 1px solid var(--c-line);
    border-radius: 18px;
    background: rgba(6, 17, 29, 0.86);
    color: var(--c-ink);
    text-align: center;
    transform: translate(-50%, -50%);
}

.tablet-model-status p {
    margin: 10px 0 0;
    font-size: 0.95rem;
}

.tablet-model-status .ar-boot-dots {
    justify-content: center;
}

.tablet-model-status .tablet-pill {
    margin-top: 14px;
}

.tablet-model-status.is-error {
    border-color: rgba(255, 99, 71, 0.5);
}

/* avance de la descarga: blanco sobre la línea, el naranja queda para lo que se toca */
.tablet-model-progress {
    display: block;
    width: 220px;
    max-width: calc(var(--ui-w) * 0.56);
    height: 4px;
    margin: 12px auto 0;
    overflow: hidden;
    border-radius: 999px;
    background: var(--c-line);
}

.tablet-model-progress[hidden] {
    display: none;
}

.tablet-model-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--c-ink);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s linear;
}

@media (prefers-reduced-motion: reduce) {
    .tablet-model-progress i {
        transition: none;
    }
}

/* --- Avisos breves -------------------------------------------------------------------------------- */

.tablet-status {
    position: fixed;
    left: 50%;
    bottom: max(18px, var(--safe-bottom));
    z-index: 34;
    margin: 0;
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(6, 17, 29, 0.9);
    color: var(--c-ink);
    font-size: 0.95rem;
    text-align: center;
    transform: translateX(-50%);
}

/* --- Cámara sobre el mural (pestaña «Cámara») ------------------------------------------------------ */

/* el selector flota arriba con un degradé suave: la cámara sigue a la vista */
.tablet-bar.is-camera {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 24;
    grid-template-columns: 1fr;
    justify-items: center;
    padding-bottom: 28px;
    background: linear-gradient(to bottom, rgba(6, 17, 29, 0.72), rgba(6, 17, 29, 0));
    border-bottom: 0;
    pointer-events: none;
}

.tablet-bar.is-camera[hidden] {
    display: none;
}

.tablet-bar.is-camera .tablet-switch {
    justify-self: center;
    background: rgba(6, 17, 29, 0.62);
    pointer-events: auto;
}

/* en el mapa: el selector a la izquierda y la indicación a la derecha */
.tablet-bar.is-map {
    grid-template-columns: auto minmax(0, 1fr);
}

.tablet-bar.is-map .tablet-switch {
    justify-self: start;
}

.tablet-switch button svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-left: 8px;
}

/* capa de botones sobre la cámara: cada uno lo mueve stand-tablet.js a su marca (transform) */
.mural-points {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 22;
}

.tablet-point.is-live {
    left: 0;
    top: 0;
    will-change: transform;
    transition: opacity 0.22s ease;
}

/* fuera de cuadro o sin el mural reconocido: invisibles y sin recibir toques */
.mural-points:not(.is-tracking) .tablet-point,
.tablet-point.is-live.is-off {
    opacity: 0;
    pointer-events: none;
}

/* al reconocer el mural, los anillos aparecen de a uno */
.mural-points.is-tracking .tablet-point-dot {
    animation: tablet-point-in 0.42s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes tablet-point-in {
    from { transform: scale(0.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* sobre la cámara el anillo necesita más contraste: marino con halo blanco y sombra */
.tablet-point.is-live .tablet-point-dot::before {
    border-width: 3px;
    background: rgba(255, 255, 255, 0.14);
}

/* pin azul de localidad: anillo blanco con halo marino, para distinguirlo de los proyectos */
.tablet-point.is-live.is-city .tablet-point-dot::before {
    border-color: #fff;
    box-shadow: 0 0 0 2px var(--c-navy), 0 4px 14px rgba(0, 0, 0, 0.3);
    animation: none;
}

/* «3D»: la marca también abre su maqueta. Va arriba a la izquierda: los nombres impresos están a la derecha */
.tablet-point-badge {
    position: absolute;
    right: 10px;
    top: -34px;
    padding: 3px 7px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--c-navy);
    color: #fff;
    font-size: 0.66rem;
    font-variation-settings: "wdth" 110, "wght" 800;
    letter-spacing: 0.04em;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* con el mural chico en pantalla el botón se achica y «3D» ya no se lee: se esconde */
.tablet-point.is-live.is-small .tablet-point-badge {
    opacity: 0;
}

/* --- Botón con el ícono de la marca: el mismo pin del mural, encima del impreso ------------------ */

/* zona de toque invisible, 1,7 veces el ícono (el tamaño real lo da transform: scale() desde el JS) */
.tablet-point.is-live.has-icon .tablet-point-dot {
    left: -41px;
    top: -41px;
    width: 82px;
    height: 82px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.tablet-point.is-live.has-icon .tablet-point-dot::before {
    display: none;
}

/* (--ax, --ay) de la imagen cae sobre la marca: es el centro del pin impreso */
.tablet-point-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    transform: translate(calc(var(--ax) * -100%), calc(var(--ay) * -100%));
    pointer-events: none;
}

/* contorno blanco fino y sombra suave: se despega del mural impreso, como si saliera de él */
.tablet-point-icon img {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: calc(var(--ax) * 100%) calc(var(--ay) * 100%);
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
    -webkit-user-drag: none;
    user-select: none;
}

/* aparece de a uno al reconocer el mural y después «respira» apenas: se nota que se puede tocar */
.mural-points.is-tracking .tablet-point-icon img {
    animation: tablet-point-in 0.42s var(--ease-out) both, tablet-icon-breathe 2.8s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 45ms), calc(var(--i, 0) * 45ms + 0.42s);
}

@keyframes tablet-icon-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* guía de espera: qué apuntar y qué va a pasar */
.tablet-guide.is-mural {
    width: min(440px, calc(var(--ui-w) - 32px));
    text-align: center;
}

.tablet-guide.is-mural .tablet-guide-text {
    font-size: 0.9rem;
}

/* --- Teléfono -------------------------------------------------------------------------------------- */

/* barra en dos filas: Cámara y selector arriba, la indicación debajo */
:where(.ui-narrow) .tablet-bar {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    padding-bottom: 10px;
}

:where(.ui-narrow) .tablet-switch {
    justify-self: end;
}

:where(.ui-narrow) .tablet-switch button {
    gap: 7px;
    padding: 0 13px 0 6px;
    font-size: 0.9rem;
}

:where(.ui-narrow) .tablet-bar-note {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: none;
    font-size: 0.82rem;
    text-align: left;
}

:where(.ui-narrow) .tablet-bar.is-model {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

/* el nombre completo en hasta dos líneas, en vez de cortarlo («PLANTA DES…») */
:where(.ui-narrow) .tablet-bar.is-model .tablet-bar-title {
    font-size: 0.82rem;
    font-variation-settings: "wdth" 100, "wght" 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    white-space: normal;
}

:where(.ui-narrow) .tablet-guide {
    padding: 14px;
}

:where(.ui-narrow) .tablet-point-badge {
    right: 8px;
    top: -30px;
}

:where(.ui-narrow) .tablet-finder {
    top: 38%;
}

:where(.ui-narrow) .tablet-point-dot {
    left: -20px;
    top: -20px;
    width: 40px;
    height: 40px;
    font-size: 0.72rem;
}

:where(.ui-narrow) .tablet-point.is-info .tablet-point-dot::after {
    width: 10px;
    height: 10px;
}

:where(.ui-narrow) .tablet-point-label {
    padding: 6px 10px;
    font-size: 0.82rem;
}

:where(.ui-narrow) .tablet-point.is-label-right .tablet-point-label { left: 25px; }
:where(.ui-narrow) .tablet-point.is-label-left .tablet-point-label { right: 25px; }
:where(.ui-narrow) .tablet-point.is-label-bottom .tablet-point-label { top: 25px; }
:where(.ui-narrow) .tablet-point.is-label-top .tablet-point-label { bottom: 25px; }

:where(.ui-narrow) .tablet-point.is-pin .tablet-point-dot {
    left: -22px;
    top: -22px;
    width: 44px;
    height: 44px;
}

:where(.ui-narrow) .tablet-point.is-pin .tablet-point-dot::before {
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    border-width: 2.5px;
}

/* --- Teléfono en horizontal: poco alto. Barras más bajas, mensajes en una franja, el mapa y la
   maqueta más grandes. ------------------------------------------------------------------------- */
:where(.ui-short) .tablet-bar {
    gap: 10px;
    padding-top: max(8px, var(--safe-top));
    padding-bottom: 8px;
}

:where(.ui-short) .tablet-switch {
    padding: 3px;
}

:where(.ui-short) .tablet-switch button {
    min-height: 36px;
    padding: 0 14px 0 5px;
    font-size: 0.88rem;
}

:where(.ui-short) .tablet-switch button svg {
    width: 16px;
    height: 16px;
}

/* sobre la cámara: el selector sin la franja oscura, para tapar menos mural */
:where(.ui-short) .tablet-bar.is-camera {
    padding-bottom: 8px;
    background: none;
}

:where(.ui-short) .tablet-bar.is-camera .tablet-switch {
    background: rgba(6, 17, 29, 0.72);
}

:where(.ui-short) .tablet-back {
    min-height: 38px;
}

:where(.ui-short) .tablet-pill {
    min-height: 38px;
    padding: 0 16px;
    font-size: 0.88rem;
}

:where(.ui-short) .tablet-bar-note {
    max-width: 48ch;
    font-size: 0.8rem;
}

/* espera: el selector ocupa ~52 px arriba y la guía (una línea) ~50 px abajo: el visor va entre los dos */
:where(.ui-short) .tablet-finder {
    --finder-w: min(calc(var(--ui-w) * 0.7), 560px, calc((var(--ui-h) - 170px) * 1.88));
    top: 50%;
}

:where(.ui-short) .tablet-finder i {
    width: 26px;
    height: 26px;
}

:where(.ui-short) .tablet-guide {
    width: auto;
    max-width: calc(var(--ui-w) - 32px);
    padding: 9px 20px;
    border-radius: 999px;
    bottom: max(10px, var(--safe-bottom));
}

/* una sola línea: si no cabe, la segunda frase se corta con «…» (el título siempre se lee) */
:where(.ui-short) .tablet-guide-text {
    flex-flow: row nowrap;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    white-space: nowrap;
}

:where(.ui-short) .tablet-guide-text b {
    flex: none;
    font-size: 0.98rem;
}

:where(.ui-short) .tablet-guide-text span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* el mapa a un tamaño legible: si no cabe en el alto, se desplaza (como en un teléfono vertical) */
:where(.ui-short) .tablet-map-frame {
    width: min(calc(var(--ui-w) * 0.62), 560px);
    margin: 12px auto;
}

/* maqueta: la indicación de gestos arriba, la fila de vistas más baja */
:where(.ui-short) .tablet-model.has-views .tablet-gesture {
    top: calc(var(--bar-h, 56px) + 4px);
    bottom: auto;
    padding: 6px 14px;
    font-size: 0.8rem;
}

:where(.ui-short) .tablet-views {
    bottom: max(8px, var(--safe-bottom));
    padding-top: 2px;
    padding-bottom: 2px;
}

:where(.ui-short) .tablet-view {
    min-height: 38px;
    padding: 0 13px;
    font-size: 0.84rem;
}

@media (prefers-reduced-motion: reduce) {
    .tablet-finder,
    .tablet-guide,
    .tablet-point.is-pin .tablet-point-dot::before,
    .mural-points.is-tracking .tablet-point-icon img {
        animation: none;
    }
}