/* ═══════════════════════════════════════════════════════════════════════════
   CARBORA · Configurador v2.2 — hoja de estilo
   Sistema de diseño de producción («La Sala Oscura»): fondo #0a0a0b, blanco
   #f4f4f2, gris #8a8a90, líneas #26262a. El cian #00FDFF solo vive en líneas
   de 1–2 px, foco y datos (texto #7FFEFF). El degradado magenta→rojo aparece
   una sola vez: en el total de la estimación. Nunca dorado.
   v2.2 (15-sep): el auto siempre completo (contain) y a la misma escala; sin
   etiquetas de visualización; láser, escudo, divisor, pistola de calor, piedra,
   visor del kit con acercamiento sobre la misma imagen y representación genérica para «otro».
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --negro-0:#000;--negro-1:#0a0a0b;--negro-2:#141416;--linea:#26262a;--linea-2:#3a3a40;
  --blanco:#f4f4f2;--gris:#8a8a90;--gris-claro:#c8c8cc;--gris-texto:#b8b8be;
  --cian:#00FDFF;--cian-rgb:0,253,255;--cian-txt:#7FFEFF;
  --grad-firma:linear-gradient(100deg,#FF3BB6,#FF2B4E);
  --display:'Archivo','ArchivoFallback',sans-serif;
  --sans:'Space Grotesk','GroteskFallback',sans-serif;
  --mono:'JetBrains Mono','Menlo','Consolas',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --top:64px;--panelW:500px;--radio:4px;
}

*{margin:0;padding:0;box-sizing:border-box}
/* La barra superior es fija y en celular el escenario queda pegado debajo: el salto
   de foco y de ancla no debe dejar el control tocado detrás de ellos. */
html{color-scheme:dark;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top) + 16px)}
html,body{background:var(--negro-1);color:var(--blanco);font-family:var(--sans);font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased}
body{min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;border-radius:0}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);font-stretch:125%;font-weight:900;text-transform:uppercase;line-height:.94;letter-spacing:-.01em;text-wrap:balance}
[hidden]{display:none!important}

.mono{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.lbl{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cian-txt);margin:22px 0 10px}
/* Oculto para la vista, presente para lectores de pantalla y teclado. `.sr-only` es el
   nombre que los gates móviles (web/gate-movil.mjs, web/gate-preview.mjs) saben saltarse. */
.vh,.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

:focus-visible{outline:2px solid var(--cian);outline-offset:3px}
.saltar{position:absolute;left:16px;top:-60px;z-index:200;padding:12px 16px;background:var(--blanco);color:#000;font-weight:600;border-radius:2px}
.saltar:focus{top:12px}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:14px 24px;border-radius:2px;background:var(--blanco);color:#000;font-weight:600;font-size:.92rem;letter-spacing:.02em;transition:transform .2s var(--ease),background .2s;text-align:center}
.btn:hover{background:#fff}
.btn:active{transform:scale(.985)}
.btn.sec{background:transparent;color:var(--blanco);border:1px solid var(--linea-2)}
.btn.sec:hover{border-color:var(--gris);background:transparent}
.btn.cian{background:transparent;color:var(--cian-txt);border:1px solid rgba(var(--cian-rgb),.55)}
.btn.cian:hover{background:rgba(var(--cian-rgb),.06)}
.btn.mini{min-height:44px;padding:10px 16px;font-size:.82rem}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.btn.halo{box-shadow:0 0 0 1px var(--cian),0 0 28px rgba(var(--cian-rgb),.35)}
.btn .ico{width:18px;height:18px;flex:0 0 18px}

/* ---------- barra superior ---------- */
.top{position:fixed;top:0;left:0;right:0;height:var(--top);z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 32px;background:var(--negro-1);border-bottom:1px solid var(--linea)}
.top .logo{flex-shrink:0;display:inline-flex;align-items:center;min-height:44px}
.top .logo img{height:22px;width:auto}
.prog{display:flex;align-items:center;gap:18px}
.prog .paso-lbl{color:var(--blanco)}
.prog .sep{width:1px;height:14px;background:var(--linea)}
.bar{display:flex;gap:4px;list-style:none}
.bar li{display:block}
.bar button,.bar span{display:block;width:44px;height:44px;padding:21px 6px;position:relative}
.bar button::after,.bar span::after{content:"";display:block;height:2px;background:var(--linea);transition:background .3s}
.bar .on::after{background:var(--cian)}
.bar .cur::after{background:var(--cian);box-shadow:0 0 10px rgba(var(--cian-rgb),.7)}
.bar button[disabled]{cursor:default}
.top .salir{color:var(--gris);min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.top .salir:hover{color:var(--blanco)}

/* ---------- layout ---------- */
.cfg{display:grid;grid-template-columns:minmax(0,1fr) var(--panelW);height:100vh;height:100dvh;padding-top:var(--top)}
.stage{position:relative;background:var(--negro-0);overflow:hidden;min-height:0;user-select:none;-webkit-user-select:none}
/* El auto siempre completo: las dos capas de imagen llenan el escenario con «contain».
   Solo los acercamientos de rueda y caliper (formato 3:4) usan «cover». */
.stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center center;transition:opacity .35s var(--ease)}
.stage>img[data-fit="cover"]{object-fit:cover}
.stage>img.capa2{z-index:1}
/* El negro del estudio y el negro del render se funden: un velo arriba y abajo evita
   que las luces del estudio terminen en un corte. */
.stage::before,.stage::after{content:"";position:absolute;left:0;right:0;height:calc(var(--banda,0px) + 110px);pointer-events:none;z-index:2}
.stage::before{top:0;background:linear-gradient(var(--negro-0),transparent)}
.stage::after{bottom:0;background:linear-gradient(transparent,var(--negro-0))}
.stage[data-fit="cover"]::before,.stage[data-fit="cover"]::after{display:none}
/* Acercamiento de pieza: la MISMA imagen escala 2.2 desde el punto tocado. */
.stage>#stageImg{transition:opacity .35s var(--ease),transform .5s var(--ease)}
.stage.zoom>#stageImg{transform:scale(2.2)}
.stage.zoom::before,.stage.zoom::after{opacity:0}
.stage.acercando>#stageImg{transition:transform .45s var(--ease)}
.stage.acercando>.capa2{transition:opacity .45s var(--ease)}
.stage .cap{position:absolute;left:28px;bottom:26px;display:flex;flex-direction:column;gap:8px;pointer-events:none;z-index:5;max-width:min(60%,440px)}
.stage .cap .num{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:2.6rem;line-height:1;color:var(--blanco)}
.stage .cap .mono{color:var(--gris-claro)}
.stage .cap .mono b{color:var(--cian-txt);font-weight:500}
.stage .esq{position:absolute;width:18px;height:18px;border-color:rgba(var(--cian-rgb),.55);border-style:solid;border-width:0;pointer-events:none;z-index:3}
.stage .esq.a{top:18px;left:18px;border-top-width:1px;border-left-width:1px}
.stage .esq.b{top:18px;right:18px;border-top-width:1px;border-right-width:1px}
.stage .esq.c{bottom:18px;left:18px;border-bottom-width:1px;border-left-width:1px}
.stage .esq.d{bottom:18px;right:18px;border-bottom-width:1px;border-right-width:1px}
.cinta{position:absolute;left:28px;top:22px;z-index:5;max-width:min(60%,420px);padding:8px 12px;background:rgba(10,10,11,.82);border-left:2px solid var(--cian);font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-claro);line-height:1.5}
.cinta b{color:var(--cian-txt);font-weight:500}
.dots{position:absolute;inset:0;pointer-events:none;z-index:4;transition:opacity .25s}
.stage.girando .dots,.stage.zoom .dots{opacity:0;pointer-events:none}
.stage.girando .dots .dot,.stage.zoom .dots .dot{pointer-events:none}

/* Capa de efectos (no interactiva) y capa de controles sobre el escenario */
.fx{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.ctl{position:absolute;inset:0;z-index:6;pointer-events:none}
.ctl>*{pointer-events:auto}

/* --- Respaldo del escenario cuando un medio no llega a cargar --- */
.estudio{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;
  background:
    linear-gradient(transparent 55%,rgba(255,255,255,.035) 62%,transparent 100%),
    linear-gradient(90deg,transparent 7.5%,rgba(255,255,255,.55) 7.5%,rgba(255,255,255,.55) 7.7%,transparent 7.7%,
      transparent 22%,rgba(var(--cian-rgb),.55) 22%,rgba(var(--cian-rgb),.55) 22.2%,transparent 22.2%,
      transparent 36%,rgba(255,255,255,.45) 36%,rgba(255,255,255,.45) 36.15%,transparent 36.15%,
      transparent 62%,rgba(var(--cian-rgb),.5) 62%,rgba(var(--cian-rgb),.5) 62.2%,transparent 62.2%,
      transparent 78%,rgba(255,255,255,.5) 78%,rgba(255,255,255,.5) 78.15%,transparent 78.15%,
      transparent 92%,rgba(var(--cian-rgb),.45) 92%,rgba(var(--cian-rgb),.45) 92.2%,transparent 92.2%),
    var(--negro-0)}
.estudio::before{content:"";position:absolute;left:0;right:0;top:0;height:58%;background:linear-gradient(var(--negro-0) 0,transparent 30%,transparent 70%,var(--negro-0) 100%);opacity:.9}
.estudio b{position:relative;font-family:var(--display);font-stretch:125%;font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.01em;font-size:clamp(2.2rem,7.5vw,6.5rem);color:var(--blanco);text-shadow:0 20px 60px rgba(0,0,0,.8);max-width:100%;overflow-wrap:normal;word-break:normal;hyphens:none}
.estudio .mono{position:relative;color:var(--gris-claro)}

/* --- Láser: línea de 2 px que recorre el auto; la nueva imagen aparece por donde pasa --- */
.laser{position:absolute;left:0;top:0;width:2px;height:100%;background:var(--cian);box-shadow:0 0 8px var(--cian),0 0 26px rgba(var(--cian-rgb),.65),0 0 60px rgba(var(--cian-rgb),.25);will-change:transform;transition:opacity .3s}
.laser::before{content:"";position:absolute;right:2px;top:0;bottom:0;width:90px;background:linear-gradient(90deg,transparent,rgba(var(--cian-rgb),.16))}
.laser::after{content:"";position:absolute;left:2px;top:0;bottom:0;width:36px;background:linear-gradient(90deg,rgba(255,255,255,.12),transparent)}
.laser.fin{opacity:0}

/* --- Escudo: contorno cian suave alrededor del auto (nunca desenfoque) --- */
.escudo{position:absolute;border:1px solid rgba(var(--cian-rgb),.8);border-radius:26px;box-shadow:0 0 22px rgba(var(--cian-rgb),.35),inset 0 0 44px rgba(var(--cian-rgb),.14);opacity:0;animation:escudo-in .9s var(--ease) forwards,escudo-pulso 2.6s ease-in-out .9s infinite}
.escudo::before{content:"";position:absolute;inset:8px;border:1px solid rgba(var(--cian-rgb),.28);border-radius:20px}
.escudo .tag{position:absolute;right:14px;top:-11px;padding:3px 9px;background:var(--negro-0);border:1px solid rgba(var(--cian-rgb),.6);border-radius:2px;font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cian-txt)}
@keyframes escudo-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes escudo-pulso{0%,100%{box-shadow:0 0 22px rgba(var(--cian-rgb),.35),inset 0 0 44px rgba(var(--cian-rgb),.14)}50%{box-shadow:0 0 34px rgba(var(--cian-rgb),.5),inset 0 0 60px rgba(var(--cian-rgb),.2)}}

/* --- Divisor mitad con PPF / mitad sin --- */
.stage.divisor{cursor:ew-resize;touch-action:none}
.div-linea{position:absolute;left:0;top:0;width:2px;height:100%;margin-left:-1px;background:var(--cian);box-shadow:0 0 10px rgba(var(--cian-rgb),.7)}
.div-asa{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(0,0,0,.78);border:1px solid var(--cian);display:flex;align-items:center;justify-content:center;cursor:ew-resize;color:var(--cian-txt);box-shadow:0 0 0 4px rgba(var(--cian-rgb),.16)}
.div-asa svg{width:22px;height:22px}
.div-lbl{position:absolute;top:0;padding:5px 10px;background:rgba(10,10,11,.8);border:1px solid var(--linea-2);border-radius:2px;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-claro);white-space:nowrap}
.div-lbl.b{border-color:rgba(var(--cian-rgb),.6);color:var(--cian-txt)}


/* --- Ráyalo y cúralo: canvas de rayones y pistola de calor --- */
.rayones{position:absolute;left:0;top:0;pointer-events:none;transition:opacity .6s}
.stage.calor{cursor:none;touch-action:none}
.pistola{position:absolute;left:0;top:0;width:72px;height:44px;margin:-18px 0 0 -6px;will-change:transform;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.pistola svg{width:72px;height:44px;display:block}
.pistola::before{content:"";position:absolute;left:-30px;top:-22px;width:72px;height:72px;border-radius:50%;background:radial-gradient(rgba(255,120,60,.42),rgba(255,60,90,.18) 45%,transparent 70%);animation:calor 1s ease-in-out infinite}
@keyframes calor{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.18);opacity:.65}}

/* --- Piedra --- */
.piedra{position:absolute;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;will-change:transform;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.piedra svg{width:30px;height:30px;display:block}
.piedra-sombra{position:absolute;left:0;top:0;width:44px;height:14px;margin:-7px 0 0 -22px;border-radius:50%;background:radial-gradient(rgba(0,0,0,.6),transparent 70%);will-change:transform,opacity}
.destello{position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:radial-gradient(#fff,rgba(var(--cian-rgb),.75) 35%,transparent 70%);animation:destello .55s ease-out forwards}
.destello::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(var(--cian-rgb),.8);animation:onda .55s ease-out forwards}
@keyframes destello{from{transform:scale(.3);opacity:1}to{transform:scale(3.4);opacity:0}}
@keyframes onda{from{transform:scale(.6);opacity:1}to{transform:scale(2.6);opacity:0}}

/* --- Visor 360 --- */
.stage.orbita{cursor:grab;touch-action:pan-y}
.stage.orbita.arrastrando{cursor:grabbing}
.orb-btn{position:absolute;z-index:2;top:50%;width:44px;height:44px;margin-top:-22px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(0,0,0,.66);border:1px solid var(--linea-2);color:var(--blanco);transition:border-color .2s,background .2s}
.orb-btn:hover{border-color:var(--cian);background:rgba(0,0,0,.85)}
.orb-btn.izq{left:14px}.orb-btn.der{right:14px}
.orb-btn svg{width:18px;height:18px}
/* A la derecha: abajo a la izquierda va el pie del escenario. */
.orb-pie{position:absolute;z-index:2;right:14px;bottom:22px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.orb-pie .mono{padding:6px 10px;background:rgba(10,10,11,.8);border-radius:2px;color:var(--gris-claro)}
.orb-pie .btn.mini{background:rgba(10,10,11,.85);color:var(--cian-txt);border:1px solid rgba(var(--cian-rgb),.55);min-height:44px}
.orb-pie .btn.mini:hover{background:rgba(var(--cian-rgb),.08)}
.ver-completo{position:absolute;z-index:3;left:50%;top:18px;transform:translateX(-50%);min-height:44px;padding:10px 18px;background:rgba(10,10,11,.88);border:1px solid rgba(var(--cian-rgb),.6);border-radius:2px;color:var(--cian-txt);font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.ver-completo:hover{background:rgba(var(--cian-rgb),.08)}
.ver-completo svg{width:16px;height:16px}

.stage.zoom .orb-btn,.stage.zoom .orb-pie{display:none}

/* --- Alerón real: video y fotos sobre el escenario --- */
.media{position:absolute;inset:0;background:var(--negro-0);z-index:1}
.media video,.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--negro-0)}
/* Debajo de «Ver el auto completo»: abajo chocaría con la ficha de la pieza. */
.angulos{position:absolute;z-index:3;left:50%;top:74px;transform:translateX(-50%);display:flex;gap:8px;padding:6px;background:rgba(10,10,11,.85);border:1px solid var(--linea-2);border-radius:2px}
.angulos button{min-width:44px;min-height:44px;padding:8px 12px;border:1px solid transparent;border-radius:2px;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-claro);display:inline-flex;align-items:center;gap:6px}
.angulos button svg{width:14px;height:14px}
.angulos button.on{border-color:var(--cian);color:var(--cian-txt)}
.angulos button:hover{color:var(--blanco)}

/* puntos numerados: área táctil de 44 px, círculo visible de 28 px */
.dot{position:absolute;pointer-events:auto;width:44px;height:44px;margin:-22px 0 0 -22px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.dot i{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.7);border:1.5px solid var(--cian);color:var(--cian-txt);font-family:var(--mono);font-size:.7rem;font-weight:700;font-style:normal;box-shadow:0 0 0 4px rgba(var(--cian-rgb),.18);transition:transform .2s var(--ease),background .2s}
.dot:hover i{transform:scale(1.1)}
.dot[aria-pressed="true"] i{background:var(--blanco);color:#000;border-color:var(--blanco);box-shadow:0 0 0 4px rgba(255,255,255,.22)}
.dot.abierto i{transform:scale(1.15)}

/* tarjeta de pieza sobre el escenario (sin imagen: el acercamiento es la imagen) */
.detalle{position:absolute;right:28px;bottom:26px;width:min(400px,calc(100% - 56px));background:var(--negro-2);border:1px solid var(--linea-2);border-radius:var(--radio);overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.65);z-index:8}
.detalle .mb{padding:16px 18px 16px;display:flex;flex-direction:column;gap:4px}
.detalle .mb .mono{color:var(--cian-txt);font-size:.6rem}
.detalle h3{font-family:var(--sans);font-weight:500;font-size:1.1rem;text-transform:none;letter-spacing:0;line-height:1.2;margin:2px 44px 0 0}
.detalle p{color:var(--gris-texto);font-size:.8rem;font-weight:300;line-height:1.45}
.detalle .precio{margin-top:8px;padding:8px 0;border-top:1px solid var(--linea)}
.detalle .btns{display:flex;gap:8px;margin-top:4px}
.detalle .btns .btn{flex:1;min-height:44px;padding:10px 14px;font-size:.85rem}
.detalle .btns .btn.sec{flex:0 0 auto}
.detalle .x{position:absolute;top:6px;right:6px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;z-index:2}
.detalle .x span{width:30px;height:30px;border-radius:2px;background:rgba(0,0,0,.65);border:1px solid var(--linea-2);color:#fff;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center}

/* ---------- panel ---------- */
.panel{border-left:1px solid var(--linea);display:flex;flex-direction:column;overflow-y:auto;background:var(--negro-1);scrollbar-width:thin;scrollbar-color:#2a2a2e transparent;min-height:0}
.pc{padding:30px 38px 18px;flex:1}
.pc:focus{outline:0}
.pf{position:sticky;bottom:0;background:var(--negro-1);border-top:1px solid var(--linea);padding:12px 38px 16px;margin-top:auto;z-index:5}
.precio{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);padding:0 0 10px}
.precio b{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.5rem;color:var(--blanco);letter-spacing:0;text-align:right;line-height:1}
.precio b.rango{font-size:1.15rem}
.pf .btns{display:flex;gap:10px}
.pf .btns .btn{flex:1}
.pf .btns .btn.sec{flex:0 0 112px}
.ayuda{font-size:.8rem;color:var(--gris);margin:6px 0 0;font-weight:300}
.ayuda.err{color:#ffb3b3}
.ayuda.viva{color:var(--cian-txt);font-weight:400}

.pc .num{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--cian-txt);text-transform:uppercase;display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pc .num::after{content:"";flex:1;height:1px;background:var(--linea)}
.pc h1,.pc h2{font-size:1.75rem;margin-bottom:12px;outline:0}
.pc h1.larga,.pc h2.larga{font-size:1.4rem}
.pc .lead{color:var(--gris-texto);font-weight:300;font-size:.93rem;line-height:1.5;margin-bottom:18px;max-width:46ch}
.pc .lead b{font-weight:500;color:var(--blanco)}
.nota-ref{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--linea);border-left:2px solid var(--cian);border-radius:2px;margin:0 0 16px;font-size:.8rem;color:var(--gris-texto);font-weight:300;line-height:1.45}
.legal{margin-top:20px;padding-top:12px;border-top:1px solid var(--linea);font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;color:var(--gris);line-height:1.55}
.legal + .legal{border-top:0;padding-top:4px;margin-top:4px;color:var(--gris-claro)}

fieldset{border:0;min-width:0}
legend{padding:0}
fieldset + fieldset{margin-top:20px}

/* ---------- tarjetas con imagen (autos, protección) ---------- */
.opts{display:grid;gap:10px}
.opt{position:relative;display:grid;grid-template-columns:132px 1fr auto;gap:16px;align-items:center;border:1px solid var(--linea);border-radius:var(--radio);background:var(--negro-2);cursor:pointer;overflow:hidden;text-align:left;padding:0 16px 0 0;min-height:88px;transition:border-color .2s}
.opt img{width:132px;height:88px;object-fit:cover;background:#000}
.opt .t{font-weight:500;font-size:.95rem;line-height:1.2}
.opt .s{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin-top:5px}
.opt .d{display:block;color:var(--gris);font-size:.78rem;font-weight:300;line-height:1.35;margin-top:4px}
.opt .pr{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--blanco);white-space:nowrap;text-align:right}
.opt .pr small{display:block;color:var(--gris);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase}
.opt .rad{width:16px;height:16px;border-radius:50%;border:1px solid #444;flex:0 0 16px;transition:border-color .2s}
.opt:hover{border-color:var(--linea-2)}
.opt:has(input:checked){border-color:var(--cian)}
.opt:has(input:checked) .rad{border-color:var(--cian);background:radial-gradient(circle,var(--cian) 45%,transparent 50%)}
.opt:has(input:checked) .pr{color:var(--cian-txt)}
.opt:has(input:focus-visible){outline:2px solid var(--cian);outline-offset:3px}
.opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.opt.chico{grid-template-columns:104px 1fr auto;min-height:74px}
.opt.chico img{width:104px;height:74px}

.otro{border:1px dashed var(--linea-2);border-radius:var(--radio);margin-top:10px;transition:border-color .2s}
.otro.on{border-style:solid;border-color:var(--cian)}
.otro .t{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:14px 16px;min-height:48px;text-align:left;font-weight:500;font-size:.92rem;cursor:pointer}
.otro .t .mono{font-size:.6rem}
.otro .f{display:grid;grid-template-columns:1fr;gap:10px;padding:0 16px 16px}
.otro .f .fila{display:grid;grid-template-columns:1fr .6fr;gap:8px;align-items:start}
.fld{display:grid;gap:5px;position:relative}
.fld label{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.in{width:100%;min-height:46px;background:transparent;border:1px solid #333338;border-radius:2px;padding:11px 12px;color:var(--blanco);font-size:.9rem;font-weight:400}
.in::placeholder{color:#5f5f66}
.in:focus{border-color:var(--cian);outline:0}
.in[aria-invalid="true"]{border-color:#ff6b6b}
.fld .err{font-size:.74rem;color:#ffb3b3;min-height:0}
/* sugerencias de la biblioteca de modelos */
.sug{list-style:none;display:grid;border:1px solid var(--linea-2);border-radius:2px;background:var(--negro-2);overflow:hidden}
.sug li{display:block}
.sug button{width:100%;min-height:44px;padding:10px 12px;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.88rem;border-bottom:1px solid var(--linea)}
.sug li:last-child button{border-bottom:0}
.sug button:hover,.sug button:focus-visible{background:rgba(var(--cian-rgb),.06);outline-offset:-2px}
.sug button .mono{font-size:.55rem;white-space:nowrap}
.sug button b{font-weight:500}
.seg-chips{display:flex;flex-wrap:wrap;gap:8px}
.encontrado{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(var(--cian-rgb),.4);border-radius:2px;font-size:.86rem}
.encontrado .mono{font-size:.56rem;color:var(--cian-txt)}
.encontrado button{min-height:44px;padding:8px 10px;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);text-decoration:underline;text-underline-offset:3px}

/* ---------- La prueba ---------- */
.tabs{display:grid;gap:8px}
.tab{border:1px solid var(--linea);border-radius:var(--radio);background:var(--negro-2);overflow:hidden;transition:border-color .2s}
.tab .h{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:14px 16px;width:100%;text-align:left;min-height:52px}
.tab .h .n{font-family:var(--mono);font-size:.68rem;color:var(--gris);letter-spacing:.1em}
.tab .h .t{font-weight:500;font-size:.95rem}
.tab .h .s{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.tab .b{padding:0 16px 16px 60px;color:var(--gris-texto);font-size:.83rem;font-weight:300;line-height:1.45}
.tab.on{border-color:var(--cian)}
.tab.on .h .n{color:var(--cian-txt)}
.acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.acciones .btn{min-height:44px;padding:10px 16px;font-size:.84rem}
.estado-prueba{margin-top:10px;font-size:.82rem;color:var(--cian-txt);min-height:1.2em}

/* ---------- muestras de color ---------- */
.sws{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px;margin-top:6px}
.swb{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;cursor:pointer;padding:6px 2px;border-radius:var(--radio);min-height:44px}
.swb input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.swb .sw{width:42px;height:42px;border-radius:50%;border:1px solid #444;display:block;transition:outline-color .2s}
.swb .sw.gloss{box-shadow:inset 0 -8px 14px rgba(0,0,0,.45),inset 0 6px 10px rgba(255,255,255,.22)}
.swb .sw.mate{background-image:radial-gradient(circle at 35% 30%,rgba(255,255,255,.08),transparent 55%)}
.swb .sw.orig{background:conic-gradient(from 200deg,#3a3a40,#8a8a90,#3a3a40)}
.swb .nm{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);text-align:center;line-height:1.3}
.swb:has(input:checked) .sw{outline:2px solid var(--cian);outline-offset:3px}
.swb:has(input:checked) .nm{color:var(--cian-txt)}
.swb:has(input:focus-visible){outline:2px solid var(--cian);outline-offset:2px}
.sel{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;padding:12px 16px;border:1px solid var(--linea);border-radius:var(--radio);background:var(--negro-2);font-size:.85rem}
.sel .mono{font-size:.72rem;color:var(--blanco);letter-spacing:.06em}
.sel small{display:block;color:var(--gris);font-size:.74rem;font-weight:300;margin-top:2px}
/* Exterior | Marcos: qué muestra el escenario con PPF Color */
.vista{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px;padding:4px;border:1px solid var(--linea);border-radius:var(--radio)}
.vista button{min-height:44px;padding:8px 10px;border-radius:2px;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.vista button.on{background:var(--negro-2);color:var(--cian-txt);box-shadow:inset 0 0 0 1px rgba(var(--cian-rgb),.5)}
.marcos-txt{margin-top:8px;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cian-txt)}

/* Respaldo sin :has(): el script marca .on en la etiqueta seleccionada */
.opt.on{border-color:var(--cian)}
.opt.on .rad{border-color:var(--cian);background:radial-gradient(circle,var(--cian) 45%,transparent 50%)}
.opt.on .pr{color:var(--cian-txt)}
.swb.on .sw{outline:2px solid var(--cian);outline-offset:3px}
.swb.on .nm{color:var(--cian-txt)}
.tog.on{border-color:var(--cian)}
.tog.on .pr{color:var(--cian-txt)}
.tog.on .swt{border-color:var(--cian)}
.tog.on .swt::after{left:21px;background:var(--cian)}
.chip.on{border-color:var(--cian);color:var(--cian-txt)}
.chip.on .pt{border-color:var(--cian)}
.todo.on{border-color:var(--cian)}
.todo.on .pr{color:var(--cian-txt)}
.pz.on .box{background:var(--cian);border-color:var(--cian)}
.pz.on .box::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pz.on .pr{color:var(--cian-txt)}

/* ---------- interruptores (marcos, calcas, parabrisas) ---------- */
.tog{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;margin-top:12px;padding:14px 16px;border:1px solid var(--linea);border-radius:var(--radio);background:var(--negro-2);cursor:pointer;min-height:56px;transition:border-color .2s}
.tog input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tog .tt{font-weight:500;font-size:.92rem;flex:1}
.tog .tt small{display:block;color:var(--gris);font-size:.76rem;font-weight:300;line-height:1.35;margin-top:3px}
.tog .pr{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;white-space:nowrap;color:var(--gris)}
.tog .swt{position:relative;flex:0 0 40px;width:40px;height:22px;border-radius:11px;border:1px solid var(--linea-2);transition:border-color .2s}
.tog .swt::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#5f5f66;transition:left .2s,background .2s}
.tog:has(input:checked){border-color:var(--cian)}
.tog:has(input:checked) .pr{color:var(--cian-txt)}
.tog:has(input:checked) .swt{border-color:var(--cian)}
.tog:has(input:checked) .swt::after{left:21px;background:var(--cian)}
.tog:has(input:focus-visible){outline:2px solid var(--cian);outline-offset:3px}
.tog.con-img{padding-left:0;overflow:hidden}
.tog.con-img img{width:88px;height:64px;object-fit:cover;flex:0 0 88px;border-radius:var(--radio) 0 0 var(--radio);background:#000}

/* ---------- grupos de detalles ---------- */
.grp{margin-top:6px}
.grp .gh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:18px 0 8px}
.grp .gh .lbl{margin:0}
.grp .gh .pr{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--blanco);white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border:1px solid #333338;border-radius:2px;font-weight:500;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--gris-claro);cursor:pointer;transition:border-color .2s,color .2s}
.chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.chip .pt{width:12px;height:12px;border-radius:50%;border:1px solid #444;margin-right:8px;flex:0 0 12px}
.chip:has(input:checked){border-color:var(--cian);color:var(--cian-txt)}
.chip:has(input:checked) .pt{border-color:var(--cian)}
.chip:has(input:focus-visible){outline:2px solid var(--cian);outline-offset:3px}
.chip .fav{margin-left:8px;font-family:var(--mono);font-size:.52rem;letter-spacing:.1em;color:var(--cian-txt);text-transform:uppercase}
.sub{padding:0 0 4px}
.sub .chips{margin-top:0}

/* ---------- piezas de fibra ---------- */
.todo{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:10px 16px;border:1px solid var(--linea-2);border-radius:var(--radio);text-align:left;cursor:pointer;margin-bottom:8px;min-height:56px;transition:border-color .2s}
.todo input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.todo .t{font-weight:500;font-size:.92rem}
.todo .t small{display:block;color:var(--gris);font-size:.72rem;font-weight:300;margin-top:2px}
.todo .pr{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.05rem;white-space:nowrap}
.todo:hover,.todo:has(input:checked){border-color:var(--cian)}
.todo:has(input:checked) .pr{color:var(--cian-txt)}
.todo:has(input:focus-visible){outline:2px solid var(--cian);outline-offset:3px}
.piezas{display:grid}
.pz-row{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--linea)}
.pz-row:last-child{border-bottom:0}
.pz{position:relative;display:grid;grid-template-columns:18px 30px 1fr auto;align-items:center;gap:10px;min-height:44px;font-size:.84rem;text-align:left;cursor:pointer;padding:0 4px;transition:background .2s}
.pz:hover{background:rgba(255,255,255,.02)}
.pz input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pz .box{width:16px;height:16px;border:1px solid #444;border-radius:2px;position:relative;transition:background .2s,border-color .2s}
.pz .n{font-family:var(--mono);font-size:.66rem;color:var(--gris);letter-spacing:.08em}
.pz .pr{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--gris-claro);white-space:nowrap}
.pz .pr.cot{color:var(--gris);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase}
.pz .tag{margin-left:8px;font-family:var(--mono);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cian-txt)}
.pz:has(input:checked) .box{background:var(--cian);border-color:var(--cian)}
.pz:has(input:checked) .box::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pz:has(input:checked) .pr{color:var(--cian-txt)}
.pz:hover .box{border-color:var(--cian)}
.pz:has(input:focus-visible){outline:2px solid var(--cian);outline-offset:-2px}
.pz-ver{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);border-left:1px solid var(--linea)}
.pz-ver:hover{color:var(--cian-txt)}
.pz-ver.on{color:var(--cian-txt)}

/* ---------- estimación ---------- */
.des{display:grid}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid var(--linea);font-size:.84rem}
.row .k small{display:block;color:var(--gris);font-size:.68rem;font-weight:300;margin-top:1px}
.row .v{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--gris-claro);white-space:nowrap;text-align:right}
.row .v.cot{color:var(--gris);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase}
.row.vacia{color:var(--gris);font-weight:300}
.total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0 2px}
.total .mono{color:var(--blanco)}
.total b{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:2rem;line-height:1;background:var(--grad-firma);-webkit-background-clip:text;background-clip:text;color:transparent;text-align:right}
.total.rango{flex-direction:column;align-items:flex-start;gap:6px}
.total b.rango{font-size:1.5rem;align-self:flex-end}
.nota{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cian-txt);padding:9px 12px;border:1px solid rgba(var(--cian-rgb),.3);border-radius:2px;margin:6px 0 14px;line-height:1.6}
.atencion{font-size:.86rem;color:var(--gris-texto);font-weight:300;margin:0 0 16px}
.ref{display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin:0 0 12px}
.ref b{color:var(--cian-txt);font-weight:500;letter-spacing:.14em}
.acc{display:grid;grid-template-columns:1fr;gap:10px;margin-top:6px}
.acc .btn{width:100%;padding:14px 16px}
.form{display:grid;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--linea)}
.form .r2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.form .r3{display:grid;grid-template-columns:1.1fr 1.2fr .7fr;gap:8px}
.form .estado{font-size:.86rem;line-height:1.45;color:var(--gris-texto);min-height:0}
.form .estado.ok{color:var(--cian-txt)}
.form .estado.falla{color:#ffb3b3}
.form .estado a{text-decoration:underline;text-underline-offset:3px}
.form .btn{margin-top:4px}
.form .intro{font-size:.84rem;color:var(--gris-texto);font-weight:300;line-height:1.45}

/* ---------- barra móvil y velo ---------- */
.mbar{display:none}
.velo{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:70}
.sin-js{position:fixed;inset:var(--top) 0 0 0;z-index:90;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--negro-1);text-align:center;font-size:1rem;line-height:1.5}
.sin-js a{color:var(--cian-txt);text-decoration:underline}

/* ---------- móvil ---------- */
@media (max-width:900px){
  :root{--top:56px}
  body{overflow-x:hidden}
  .top{padding:0 16px;gap:12px}
  .top .logo img{height:18px}
  .prog{gap:10px}
  .prog .etiqueta-cfg,.prog .sep{display:none}
  .bar button,.bar span{width:18px;height:24px;padding:11px 0}
  .top .salir{display:none}
  .cfg{display:block;height:auto;min-height:100vh}
  /* El escenario se queda fijo bajo la barra: las pruebas y el visor se ven mientras
     se tocan las opciones de abajo. 16:9 = el auto completo; 1:1 para rueda y caliper. */
  html{scroll-padding-top:calc(var(--top) + 56.25vw + 12px)}
  .stage{position:sticky;top:var(--top);z-index:30;aspect-ratio:16/9;height:auto;box-shadow:0 12px 30px rgba(0,0,0,.6)}
  .stage[data-orient="portrait"]{aspect-ratio:1/1}
  .stage::before,.stage::after{height:36px}
  .stage .cap{left:12px;bottom:10px;gap:4px;max-width:calc(100% - 24px)}
  .stage .cap .num{display:none}
  .stage .cap .mono{font-size:.56rem;background:rgba(10,10,11,.72);padding:4px 8px;border-radius:2px}
  .stage .esq{display:none}
  .cinta{left:10px;top:10px;max-width:calc(100% - 20px);font-size:.55rem;padding:6px 10px}
  /* Una marca larga («Lamborghini») debe caber en una línea: se achica, no se parte. */
  .estudio b{font-size:clamp(1.5rem,8.2vw,2.6rem)}
  .dot i{width:24px;height:24px;font-size:.62rem}
  .orb-pie{bottom:10px;right:10px}
  .orb-pie .mono{display:none}
  .ver-completo{top:10px;padding:8px 12px}
  .angulos{top:64px;padding:4px}
  .div-lbl{font-size:.52rem;padding:4px 7px}
  /* La ficha de la pieza se apoya SOBRE la barra de total, no debajo: el escenario es
     sticky y crea su propia capa, así que aquí no puede pasar por encima de la barra. */
  .detalle{position:fixed;left:0;right:0;bottom:calc(78px + env(safe-area-inset-bottom));width:auto;display:block;border-radius:10px 10px 0 0;z-index:80;box-shadow:0 -20px 60px rgba(0,0,0,.7);max-height:46vh;overflow-y:auto}
  .detalle .mb{padding:14px 16px 16px}
  .panel{border-left:0;overflow:visible;display:block}
  .pc{padding:22px 18px 8px}
  .pc h1,.pc h2{font-size:1.5rem}
  .pc .lead{font-size:.9rem}
  .pf{display:none}
  .panel::after{content:"";display:block;height:calc(96px + env(safe-area-inset-bottom))}
  .opt{grid-template-columns:104px 1fr auto;gap:12px;padding-right:14px;min-height:78px}
  .opt img{width:104px;height:78px}
  .opt .d{display:none}
  .opt.chico{grid-template-columns:88px 1fr auto;min-height:68px}
  .opt.chico img{width:88px;height:68px}
  .otro .f .fila{grid-template-columns:1fr}
  .tab .b{padding-left:16px}
  .form .r3{grid-template-columns:1fr 1fr}
  .form .r3 .fld:nth-child(3){grid-column:1/-1}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(10,10,11,.96);border-top:1px solid var(--linea);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .mbar .tot{min-width:0}
  .mbar .tot .mono{font-size:.54rem;display:block;margin-bottom:3px;white-space:nowrap}
  .mbar .tot b{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.3rem;line-height:1;white-space:nowrap}
  .mbar .tot b.rango{font-size:.95rem}
  .mbar .btns{display:flex;gap:8px;flex:0 0 auto}
  .mbar .btn{min-height:48px;padding:12px 18px;font-size:.86rem}
  .mbar .btn.sec{padding:12px 14px}
}
@media (max-width:400px){
  .sws{gap:12px 6px}
  .swb .sw{width:38px;height:38px}
  .mbar .btn{padding:12px 14px}
}
@media (min-width:901px) and (max-width:1180px){
  :root{--panelW:420px}
  .pc{padding:26px 26px 16px}
  .pf{padding:12px 26px 16px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .escudo{opacity:1}
}

/* El giro muestra una exhibición identificada del kit; la edición conserva el auto. */
.explorar-kit{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 22px;padding:14px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.explorar-kit .ayuda{margin:0;flex:1 1 180px}
.stage.orbita .cap{bottom:80px;max-width:calc(100% - 56px)}
@media(max-width:900px){.stage.orbita .cap{bottom:62px;max-width:calc(100% - 24px)}}

/* Campos libres: marca y modelo separados; año sin estrechar los textos. */
.datos-auto{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}
.datos-auto .fld{min-width:0}
.datos-auto .fld:last-child{max-width:130px}
@media(max-width:480px){.datos-auto{grid-template-columns:1fr}.otro .t{flex-wrap:wrap}.otro .t .mono{letter-spacing:.06em}}
/* En horizontal o con teclado abierto, el visor deja espacio real para los controles. */
@media(max-width:900px) and (max-height:540px){
  html{scroll-padding-top:calc(var(--top) + 38vh + 12px);scroll-padding-top:calc(var(--top) + 38dvh + 12px)}
  .stage,.stage[data-orient="portrait"]{height:38vh;height:38dvh;max-height:220px;aspect-ratio:auto}
  .stage .cinta{max-width:40%;font-size:.5rem;line-height:1.4}
  .stage .cap{max-width:45%;bottom:6px}
}

/* Resumen compartible y controles legibles con cifras grandes en móvil. */
.estado-enlace{font-size:.8rem;line-height:1.5;color:var(--cian-txt);margin:8px 0}
.estado-enlace:empty{display:none}
.enlace-manual{margin:10px 0;min-width:0}
.enlace-manual label{display:block;color:var(--gris-texto);font-size:.8rem;margin-bottom:6px}
.enlace-manual .in{width:100%;min-width:0}
@media(max-width:520px){
  .tog{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:10px 12px}
  .tog .tt{grid-column:1/-1;min-width:0}
  .tog .pr{grid-column:1;grid-row:2}
  .tog .swt{grid-column:2;grid-row:2}
  .tog.con-img{grid-template-columns:72px minmax(0,1fr) 40px;padding:12px}
  .tog.con-img img{grid-column:1;grid-row:1/3;width:72px;height:64px;border-radius:2px}
  .tog.con-img .tt{grid-column:2/-1;grid-row:1}
  .tog.con-img .pr{grid-column:2;grid-row:2}
  .tog.con-img .swt{grid-column:3;grid-row:2}
  .total{flex-direction:column;align-items:stretch;gap:6px}
  .total b{align-self:flex-end;max-width:100%;font-size:clamp(1.4rem,8vw,2rem)}
}
@media(max-width:430px){
  .mbar{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  .mbar .tot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px}
  .mbar .tot .mono{white-space:normal;margin:0}
  .mbar .tot b{font-size:1.18rem}
  .mbar .tot b.rango{font-size:.95rem}
  .mbar .btns{justify-content:flex-end}
  .panel::after{height:calc(144px + env(safe-area-inset-bottom))}
  .detalle{bottom:calc(118px + env(safe-area-inset-bottom))}
}