/* TattooTracer · interfaz 2.0
   Concepto: estudio a oscuras con tinta dorada. Grafito del logo de fondo, dorado solo para lo que se toca o lo importante,
   el calco siempre sobre «papel» blanco. Un recorrido de 3 pasos: Diseño → Calco → Imprimir. */
:root{
  --fondo:#181818; --superficie:#232323; --superficie-2:#2b2b2b; --linea:#363636; --linea-2:#444;
  --texto:#f4efe4; --suave:#a49d90; --tenue:#7c766c;
  --oro:#ffc758; --oro-hover:#ffd27a; --oro-tinta:#231a06; --oro-suave:rgba(255,199,88,.12); --oro-borde:rgba(255,199,88,.38);
  --papel:#ffffff; --rojo:#ff7f6e; --rojo-suave:rgba(255,127,110,.12); --verde:#8fd9a8; --verde-suave:rgba(143,217,168,.12);
  --radio:16px; --radio-s:11px;
  --sombra:0 1px 0 rgba(255,255,255,.04) inset, 0 12px 32px rgba(0,0,0,.35);
  --f-titulo:ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-texto:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --f-num:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--fondo)}
body{margin:0;background:var(--fondo);color:var(--texto);font:16px/1.5 var(--f-texto);-webkit-font-smoothing:antialiased;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:max(40px, env(safe-area-inset-bottom));min-height:100vh}
[hidden]{display:none!important}
.defs{position:absolute}
h1,h2,h3{font-family:var(--f-titulo);letter-spacing:-.01em;margin:0;text-wrap:balance}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:6px}
img{max-width:100%}

/* ---------- barra superior ---------- */
.barra{position:sticky;top:0;z-index:20;background:rgba(24,24,24,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--linea);padding-top:env(safe-area-inset-top)}
.barra-in{max-width:1180px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.marca{display:flex;align-items:center;gap:11px;color:var(--texto);text-decoration:none}
.marca-logo{width:38px;height:38px;color:var(--oro);flex:none}
.marca-txt{font:700 21px/1 var(--f-titulo);letter-spacing:-.01em}
.marca-txt b{color:var(--oro);font-weight:700}
.usuario{display:flex;align-items:center;gap:8px;min-width:0}
.usuario-nombre{font-size:14px;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usuario-cupo{font:600 12.5px/1 var(--f-texto);color:var(--oro);background:var(--oro-suave);border:1px solid var(--oro-borde);padding:7px 10px;border-radius:999px;white-space:nowrap}

.app{max-width:1180px;margin:0 auto;padding:22px 20px 0;display:flex;flex-direction:column;gap:20px}

/* ---------- tarjetas y botones ---------- */
.tarjeta{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra)}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 20px;border-radius:12px;border:1px solid transparent;
  font:650 15.5px/1 var(--f-texto);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,transform .1s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.boton svg{width:20px;height:20px;flex:none}
.boton:active{transform:scale(.985)}
.boton.oro{background:var(--oro);color:var(--oro-tinta)}
.boton.oro:hover{background:var(--oro-hover)}
.boton.claro{background:var(--superficie-2);color:var(--texto);border-color:var(--linea-2)}
.boton.claro:hover{border-color:var(--oro-borde)}
.boton.texto{background:none;color:var(--oro);min-height:36px;padding:0 6px;font-size:14.5px}
.boton.grande{min-height:54px;font-size:16.5px;border-radius:14px;width:100%}
.boton[disabled],.boton.ocupado{opacity:.5;cursor:not-allowed;pointer-events:none}

/* ---------- acceso ---------- */
.acceso{max-width:520px;margin:8vh auto 0;padding:40px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.acceso-logo{width:96px;height:96px;color:var(--oro)}
.acceso h1{font-size:24px}
.acceso p{color:var(--suave);max-width:40ch}

/* ---------- pasos ---------- */
.pasos{list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:center}
.pasos li{display:flex;align-items:center;gap:9px;color:var(--tenue);font-weight:600;font-size:14.5px}
.pasos li + li::before{content:"";width:clamp(22px,7vw,72px);height:2px;margin:0 12px;background:repeating-linear-gradient(90deg,var(--linea-2) 0 7px,transparent 7px 12px)}
.paso-n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 var(--f-titulo);border:1.5px solid var(--linea-2);color:var(--tenue)}
.pasos li[data-estado="actual"]{color:var(--texto)}
.pasos li[data-estado="actual"] .paso-n{border-color:var(--oro);color:var(--oro);box-shadow:0 0 0 4px var(--oro-suave)}
.pasos li[data-estado="hecho"]{color:var(--suave)}
.pasos li[data-estado="hecho"] .paso-n{background:var(--oro);border-color:var(--oro);color:var(--oro-tinta)}
.pasos li[data-estado="hecho"] + li::before{background:repeating-linear-gradient(90deg,var(--oro) 0 7px,transparent 7px 12px)}

/* ---------- subir ---------- */
.subir{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;min-height:min(62vh,520px);padding:40px 24px;
  border-radius:22px;background:radial-gradient(120% 90% at 50% 0%, rgba(255,199,88,.07), transparent 60%), var(--superficie);
  border:2px dashed var(--linea-2);cursor:pointer;transition:border-color .15s}
.subir:hover,.subir.encima{border-color:var(--oro)}
.subir-anillo{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;color:var(--oro);border:2px dashed var(--oro-borde);margin-bottom:6px}
.subir-anillo svg{width:38px;height:38px}
.subir-titulo{font:700 clamp(24px,4.5vw,34px)/1.1 var(--f-titulo)}
.subir-texto{color:var(--suave);max-width:42ch}
.subir .boton{margin-top:6px;min-width:200px}
.subir-nota{color:var(--tenue);font-size:13.5px}
.subir input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---------- trabajo ---------- */
.trabajo{display:flex;flex-direction:column;gap:20px}
.trabajo-rejilla{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.visor{overflow:hidden;display:flex;flex-direction:column;min-width:0}
.visor-barra{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid var(--linea)}
.segmento{display:inline-flex;background:var(--fondo);border:1px solid var(--linea);border-radius:12px;padding:3px;gap:2px}
.segmento label{position:relative;cursor:pointer}
.segmento input{position:absolute;opacity:0;inset:0;margin:0}
.segmento span{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:9px;font-size:14px;font-weight:600;color:var(--suave);white-space:nowrap;min-height:38px}
.segmento input:checked + span{background:var(--superficie-2);color:var(--texto);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 1px 3px rgba(0,0,0,.4)}
.segmento input:focus-visible + span{outline:2px solid var(--oro);outline-offset:1px}
.punto{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.punto.negro{background:#0d0d0d}.punto.rojo{background:#d61f1f}

.visor-cuerpo{position:relative;background:#111;padding:14px;min-height:340px;display:flex;flex-direction:column}
.lamina{position:relative;margin:0;background:var(--papel);border-radius:10px;display:grid;place-items:center;padding:12px;min-height:300px;flex:1}
.lamina img{display:block;max-width:100%;max-height:min(66vh,720px);max-height:min(66svh,720px);object-fit:contain}
.etiqueta{position:absolute;top:10px;left:10px;font:700 11px/1 var(--f-texto);letter-spacing:.09em;text-transform:uppercase;background:rgba(17,17,17,.82);color:#fff;padding:6px 8px;border-radius:6px;pointer-events:none}
.etiqueta.der{left:auto;right:10px}
.pareja{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1}
.pareja .lamina img{max-height:min(60vh,640px);max-height:min(60svh,640px)}

/* comparador */
.comparar{display:flex;flex-direction:column;gap:12px;flex:1}
.cmp-wrap{width:100%;height:min(66vh,720px);height:min(66svh,720px);display:grid;place-items:center;background:var(--papel);border-radius:10px;padding:12px}
.cmp-frame{position:relative;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.cmp-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
/* papel blanco bajo el calco: si el calco se alinea y queda más pequeño, no asoma el fondo del diseño */
.cmp-papel{position:absolute;inset:0;background:#fff;pointer-events:none}
.cmp-bar{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--oro);transform:translateX(-1px);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.cmp-tirador{position:absolute;top:50%;left:50%;width:40px;height:40px;border-radius:50%;background:var(--oro);transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(17,17,17,.85),0 6px 16px rgba(0,0,0,.4)}
.cmp-tirador::before,.cmp-tirador::after{content:"";position:absolute;top:50%;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;transform:translateY(-50%)}
.cmp-tirador::before{left:9px;border-right:7px solid var(--oro-tinta)}
.cmp-tirador::after{right:9px;border-left:7px solid var(--oro-tinta)}
.cmp-range{width:100%;margin:0;accent-color:var(--oro);height:28px}

/* generando */
.espera{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;background:rgba(17,17,17,.9);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.espera-anillo{width:88px;height:88px;color:var(--oro);animation:girar 2.4s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.espera-anillo{animation-duration:12s}}
.espera strong{font:700 19px/1.2 var(--f-titulo)}
.espera-reloj{font:600 15px/1 var(--f-num);color:var(--oro);font-variant-numeric:tabular-nums}
.espera-nota{color:var(--suave);font-size:13.5px;max-width:34ch}

/* panel */
.panel{padding:18px;display:flex;flex-direction:column;gap:18px;position:sticky;top:84px}
.mini{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--linea)}
.mini img{width:52px;height:52px;object-fit:cover;border-radius:10px;background:var(--papel);flex:none}
.mini-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.mini-txt strong{font-size:15px}
.mini-txt span{font:13px var(--f-num);color:var(--tenue)}
.grupo{display:flex;flex-direction:column;gap:10px}
.grupo-t{font:700 12px/1 var(--f-texto);letter-spacing:.1em;text-transform:uppercase;color:var(--suave)}
.opciones{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opcion{position:relative;cursor:pointer}
.opcion input{position:absolute;opacity:0;inset:0;margin:0}
.opcion span{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px 12px;border-radius:12px;border:1.5px solid var(--linea-2);background:var(--superficie-2);font-size:14px;font-weight:600;color:var(--suave);text-align:center;transition:border-color .15s,color .15s}
.opcion svg{width:48px;height:12px}
.opcion input:checked + span{border-color:var(--oro);color:var(--texto);background:var(--oro-suave)}
.opcion input:checked + span svg{color:var(--oro)}
.opcion input:focus-visible + span{outline:2px solid var(--oro);outline-offset:2px}
.panel-nota{font-size:13px;color:var(--tenue);line-height:1.45}
/* orden del panel: con el calco listo, «Guardar» va primero */
.panel .mini{order:0}.panel #btnGuardar{order:1}.panel .grupo{order:2}.panel #btnCalco{order:3}.panel .aviso{order:4}.panel .panel-nota{order:5}
.oculto{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
#btnOtro{position:relative}

.aviso{padding:12px 14px;border-radius:12px;font-size:14.5px;line-height:1.4}
.aviso.error{background:var(--rojo-suave);color:var(--rojo);border:1px solid rgba(255,127,110,.3)}

/* imprimir */
.imprimir{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:24px;padding:20px}
.imp-vista{background:#111;border-radius:12px;display:grid;place-items:center;min-height:360px;padding:14px}
.imp-vista canvas{display:block;border-radius:2px;box-shadow:0 4px 18px rgba(0,0,0,.5)}
.imp-ctl{display:flex;flex-direction:column;gap:16px;min-width:0;justify-content:center}
.imp-cab h2{font-size:22px}
.imp-cab p{color:var(--suave);margin-top:4px}
.medidas{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.campo{display:flex;flex-direction:column;gap:7px}
.campo > span:first-child{font-size:13.5px;font-weight:600;color:var(--suave)}
.campo-in{display:flex;align-items:center;background:var(--fondo);border:1.5px solid var(--linea-2);border-radius:12px;padding:0 14px;transition:border-color .15s}
.campo-in:focus-within{border-color:var(--oro)}
.campo-in input{flex:1;min-width:0;border:0;background:none;outline:none;padding:13px 0;font:600 18px var(--f-num);font-variant-numeric:tabular-nums;color:var(--texto)}
.campo-in em{font-style:normal;color:var(--tenue);font-size:14px}
.interruptor{display:flex;align-items:center;gap:12px;cursor:pointer;font-weight:600;position:relative;min-height:44px}
.interruptor input{position:absolute;opacity:0;width:1px;height:1px}
.interruptor small{display:block;font-weight:400;color:var(--tenue);font-size:13px}
.interruptor-pista{width:50px;height:30px;border-radius:999px;background:var(--linea-2);position:relative;flex:none;transition:background .2s}
.interruptor-pista::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 2px 4px rgba(0,0,0,.4)}
.interruptor input:checked + .interruptor-pista{background:var(--oro)}
.interruptor input:checked + .interruptor-pista::after{transform:translateX(20px)}
.interruptor input:focus-visible + .interruptor-pista{outline:2px solid var(--oro);outline-offset:3px}
.resumen{font-size:15px;color:var(--suave);background:var(--fondo);border:1px solid var(--linea);border-radius:12px;padding:12px 14px}
.resumen b{color:var(--texto);font-family:var(--f-num);font-variant-numeric:tabular-nums}
.imp-nota{font-size:13px;color:var(--tenue);line-height:1.45}

/* ---------- tablet ---------- */
@media (max-width:980px){
  .trabajo-rejilla{grid-template-columns:minmax(0,1fr)}
  .panel{position:static}
  .imprimir{grid-template-columns:minmax(0,280px) minmax(0,1fr)}
}
/* ---------- móvil ---------- */
@media (max-width:640px){
  input,select,textarea{font-size:16px}
  .barra-in{padding:10px 16px}
  .marca-logo{width:32px;height:32px}
  .marca-txt{font-size:18px}
  .usuario-nombre{display:none}
  .app{padding:16px 14px 0;gap:16px}
  .pasos li{font-size:13px;gap:7px}
  .pasos li + li::before{margin:0 8px}
  .paso-n{width:26px;height:26px;font-size:13px}
  .subir{min-height:58vh;min-height:58svh;padding:32px 18px}
  .visor-barra{padding:10px}
  .visor-barra .segmento{flex:1}
  .segmento label{flex:1}
  .segmento span{justify-content:center;padding:9px 10px}
  .visor-cuerpo{padding:10px;min-height:280px}
  .lamina img{max-height:58vh;max-height:58svh}
  .cmp-wrap{height:62vh;height:62svh;padding:8px}
  .pareja{grid-template-columns:1fr}
  .imprimir{grid-template-columns:minmax(0,1fr);padding:16px;gap:18px}
  .imp-vista{min-height:260px}
}

/* =========================================================
   Panel de accesos (admin) · mismas piezas con la marca
   ========================================================= */
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
header.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding-block:18px;border-bottom:1px solid var(--linea);margin-bottom:24px}
header.top .acciones{display:flex;align-items:center;gap:12px}
.hola{color:var(--suave);font-size:14px}
.wrap h2{font-size:12.5px;font-family:var(--f-texto);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--suave)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:11px;border:1px solid var(--oro);background:var(--oro);color:var(--oro-tinta);font:650 14.5px/1 var(--f-texto);cursor:pointer;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.btn:hover{background:var(--oro-hover)}
.btn.ghost{background:transparent;color:var(--oro);border-color:var(--oro-borde)}
.btn.ghost:hover{background:var(--oro-suave)}
.btn.small{min-height:36px;padding:0 12px;font-size:13.5px;border-radius:9px}
.btn.danger{background:transparent;color:var(--rojo);border-color:rgba(255,127,110,.4)}
.btn.danger:hover{background:var(--rojo-suave)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.card{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);padding:22px;box-shadow:var(--sombra)}
.msg{padding:12px 14px;border-radius:12px;font-size:14.5px}
.msg.bad{background:var(--rojo-suave);color:var(--rojo);border:1px solid rgba(255,127,110,.3)}
.msg.ok{background:var(--verde-suave);color:var(--verde);border:1px solid rgba(143,217,168,.3)}
.mt{margin-top:14px}
.muted{color:var(--suave)}
.small{font-size:13.5px}
.mono{font-family:var(--f-num);font-variant-numeric:tabular-nums}
label.f{display:flex;flex-direction:column;gap:7px;font-weight:600;font-size:14px;color:var(--suave)}
.wrap input,.wrap select,.wrap textarea{width:100%;padding:11px 13px;border:1.5px solid var(--linea-2);border-radius:11px;background:var(--fondo);color:var(--texto);font:15px/1.4 var(--f-texto)}
.wrap input:focus,.wrap select:focus,.wrap textarea:focus{outline:none;border-color:var(--oro)}
.wrap textarea{resize:vertical}
.login{max-width:420px;margin:7vh auto 0;display:flex;flex-direction:column;gap:16px}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.cifra{background:var(--superficie);border:1px solid var(--linea);border-radius:14px;padding:16px 18px}
.cifra b{display:block;font:700 28px/1.1 var(--f-titulo);font-variant-numeric:tabular-nums;color:var(--oro)}
.cifra span{color:var(--suave);font-size:13px}
.seccion{display:flex;flex-direction:column;gap:14px;margin-top:30px}
.fila{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.fila > label.f{flex:1 1 200px}
.fila > label.f.corto{flex:0 1 150px}
.nuevo{display:flex;flex-direction:column;gap:12px}
.fila-tit{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.t-gasto td:last-child{color:var(--oro);font-weight:600;white-space:nowrap}
.tabla table.t-gasto{min-width:560px}
.tabla{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--radio);background:var(--superficie)}
table{width:100%;min-width:820px;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--linea);vertical-align:middle}
th{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue);font-weight:700}
tr:last-child td{border-bottom:0}
tr.off td{color:var(--tenue)}
.pill{display:inline-block;padding:5px 10px;border-radius:999px;font-size:12.5px;font-weight:700}
.pill.on{background:var(--verde-suave);color:var(--verde)}
.pill.off{background:var(--rojo-suave);color:var(--rojo)}
.btns{display:flex;flex-wrap:wrap;gap:6px}
.enlace{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.enlace code{font:12.5px var(--f-num);background:var(--fondo);border:1px solid var(--linea);padding:6px 8px;border-radius:7px;word-break:break-all;color:var(--oro)}
.enlace.nowrap{flex-wrap:nowrap}
.enlace.nowrap code{white-space:nowrap}
.pie{margin-top:28px;color:var(--tenue);font-size:13px}
.errores{margin:0;padding-left:18px}
.errores li{font-size:13.5px;color:var(--suave);margin-bottom:6px}
@media (max-width:760px){
  .tabla{border:0;background:none;overflow:visible}
  .tabla table{min-width:0}
  .tabla thead{display:none}
  .tabla tr{display:block;background:var(--superficie);border:1px solid var(--linea);border-radius:14px;margin-bottom:12px;padding:6px 0}
  .tabla td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;padding:8px 14px;text-align:right}
  .tabla td::before{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue);font-weight:700;text-align:left;flex:none}
  .tabla table:not(.t-gasto) td:nth-child(1)::before{content:"Persona"}
  .tabla table:not(.t-gasto) td:nth-child(2)::before{content:"Enlace"}
  .tabla table:not(.t-gasto) td:nth-child(3)::before{content:"Este mes"}
  .tabla table:not(.t-gasto) td:nth-child(4)::before{content:"Último uso"}
  .tabla table:not(.t-gasto) td:nth-child(5)::before{content:"Estado"}
  .tabla table:not(.t-gasto) td:nth-child(6){display:block;text-align:left}
  .tabla table:not(.t-gasto) td:nth-child(6)::before{content:none}
  .tabla table:not(.t-gasto) td:nth-child(6) .btns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
  .tabla table:not(.t-gasto) td:nth-child(6) .btn{width:100%;padding-inline:6px;white-space:normal;text-align:center;line-height:1.15}
  .t-gasto td:nth-child(1)::before{content:"Fecha"}
  .t-gasto td:nth-child(2)::before{content:"Persona"}
  .t-gasto td:nth-child(3)::before{content:"Calco"}
  .t-gasto td:nth-child(4)::before{content:"Tiempo"}
  .t-gasto td:nth-child(5)::before{content:"Coste"}
  .t-gasto td:nth-child(3){flex-direction:column;align-items:flex-end}
  .tabla td[colspan]{display:block;text-align:left}
  .tabla td[colspan]::before{content:none}
  .fila > label.f,.fila > label.f.corto{flex:1 1 100%}
  .fila .btn{width:100%}
  .cifras{grid-template-columns:1fr 1fr}
  .cifra b{font-size:24px}
  .wrap input,.wrap select,.wrap textarea{font-size:16px}
}

/* ---------- historial ---------- */
.usuario-hist{display:inline-flex;align-items:center;gap:6px;color:var(--texto);text-decoration:none;font-size:13.5px;font-weight:600;padding:7px 10px;border-radius:999px;border:1px solid var(--linea-2);background:var(--superficie)}
.usuario-hist svg{width:15px;height:15px;color:var(--oro)}
.usuario-hist b{font:700 12px/1 var(--f-num);color:var(--oro)}
.usuario-hist:hover{border-color:var(--oro-borde)}
.historial{padding:20px;display:flex;flex-direction:column;gap:16px;scroll-margin-top:80px}
.hist-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.hist-cab h2{font:700 22px/1.2 var(--f-titulo);text-transform:none;letter-spacing:-.01em;color:var(--texto)}
.hist-sub{color:var(--suave);margin-top:4px}
.hist-contador{font:700 13px/1 var(--f-num);color:var(--oro);background:var(--oro-suave);border:1px solid var(--oro-borde);padding:8px 12px;border-radius:999px;white-space:nowrap}
.hist-aviso{display:flex;gap:10px;align-items:flex-start;background:var(--fondo);border:1px solid var(--linea);color:var(--suave)}
.hist-aviso svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--oro)}
.hist-aviso.lleno{border-color:var(--oro-borde);background:var(--oro-suave);color:var(--texto)}
.hist-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px}
.hist-item{background:var(--superficie-2);border:1px solid var(--linea);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.hist-item.actual{border-color:var(--oro);box-shadow:0 0 0 1px var(--oro)}
.hist-fotos{position:relative;aspect-ratio:3/4;background:var(--papel);display:grid;place-items:center;cursor:pointer;border:0;padding:0;width:100%}
.hist-fotos img.calco{width:100%;height:100%;object-fit:contain;padding:8px}
.hist-fotos img.diseno{position:absolute;right:8px;bottom:8px;width:34%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35);background:#fff}
.hist-fotos .cargando{color:#999;font-size:12px}
.hist-info{padding:10px 12px 4px;display:flex;flex-direction:column;gap:2px}
.hist-info strong{font-size:14px}
.hist-info span{font-size:12.5px;color:var(--tenue)}
.hist-acc{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 10px 10px}
.hist-acc .boton{min-height:36px;padding:0 8px;font-size:13px;border-radius:9px;width:100%}
.hist-acc .boton svg{width:16px;height:16px}
.hist-acc .abrir{grid-column:1/-1}
.hist-acc .borrar{grid-column:1/-1;background:none;border:0;color:var(--tenue);min-height:30px}
.hist-acc .borrar:hover{color:var(--rojo)}
.hist-acc .borrar.seguro{color:var(--rojo)}
@media (max-width:640px){
  .usuario-hist span{display:none}
  .usuario-cupo .largo{display:none}
  .usuario{gap:6px}
  .usuario-hist,.usuario-cupo{padding:7px 9px}
  .historial{padding:16px}
  .hist-rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hist-cab h2{font-size:19px}
}

/* =========================================================
   2.5 · portada, cuentas y compra
   ========================================================= */
.boton.peq{min-height:40px;padding:0 16px;font-size:14.5px;border-radius:11px}
.boton.peligro{background:transparent;color:var(--rojo);border-color:rgba(255,127,110,.45)}
.boton.peligro:hover{background:var(--rojo-suave)}
.boton.texto.en-linea{min-height:0;padding:0;font-size:inherit;text-decoration:underline;text-underline-offset:3px;vertical-align:baseline}
.anon{display:flex;align-items:center;gap:6px}
.anon-enlace{color:var(--suave);text-decoration:none;font-size:14.5px;font-weight:600;padding:8px 10px;border-radius:9px}
.anon-enlace:hover{color:var(--texto)}
.usuario-cupo.saldo{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font:inherit;font-weight:600;font-size:12.5px;line-height:1;color:var(--oro)}
.usuario-cupo.saldo i{font-style:normal;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--oro);color:var(--oro-tinta);font-weight:800;font-size:13px}
.usuario-cupo.saldo:hover{background:rgba(255,199,88,.2)}
.usuario-cupo.saldo.vacio{color:var(--rojo);border-color:rgba(255,127,110,.45);background:var(--rojo-suave)}
.usuario-menu{width:36px;height:36px;border-radius:50%;border:1px solid var(--linea-2);background:var(--superficie-2);color:var(--texto);font:700 15px/1 var(--f-titulo);cursor:pointer;flex:none;display:grid;place-items:center}
.usuario-menu:hover{border-color:var(--oro)}
.aviso.info{display:flex;gap:10px;align-items:flex-start;background:var(--oro-suave);border:1px solid var(--oro-borde);color:var(--texto)}
.aviso.info svg{width:20px;height:20px;flex:none;color:var(--oro);margin-top:1px}
.aviso.ok{background:var(--verde-suave);color:var(--verde);border:1px solid rgba(143,217,168,.3)}
.acceso .boton{margin-top:6px}

/* portada */
.inicio{display:flex;flex-direction:column;gap:64px;padding-bottom:20px}
.heroe{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center;padding-top:28px}
.heroe-txt{display:flex;flex-direction:column;gap:18px}
.antetitulo{font:700 12.5px/1 var(--f-texto);letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
.heroe h1{font-size:clamp(34px,5.4vw,58px);line-height:1.04;font-weight:800}
.heroe h1 span{color:var(--oro)}
.heroe-sub{font-size:18px;color:var(--suave);max-width:46ch}
.heroe-acc{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.heroe-acc .boton{min-height:52px;padding:0 24px;font-size:16px}
.heroe-nota{font-size:14px;color:var(--tenue)}
.ejemplo{margin:0;display:flex;flex-direction:column;gap:12px}
.ejemplo-par{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;background:var(--superficie);border:1px solid var(--linea);border-radius:20px;padding:14px;box-shadow:var(--sombra)}
.ejemplo-lamina{position:relative;background:var(--papel);border-radius:12px;overflow:hidden}
.ejemplo-lamina img{display:block;width:100%;height:auto}
.ejemplo-flecha{width:34px;height:34px;border-radius:50%;background:var(--oro);color:var(--oro-tinta);display:grid;place-items:center}
.ejemplo-flecha svg{width:20px;height:20px}
.ejemplo figcaption{font-size:13.5px;color:var(--tenue);text-align:center}
.bloque{display:flex;flex-direction:column;gap:22px;scroll-margin-top:90px}
.bloque > h2{font-size:clamp(26px,3.6vw,36px);font-weight:800}
.bloque-sub{color:var(--suave);font-size:17px;margin-top:-10px}
.tres{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tres li{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);padding:22px;display:flex;flex-direction:column;gap:8px}
.tres b{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--oro);color:var(--oro-tinta);font:800 17px/1 var(--f-titulo);margin-bottom:4px}
.tres h3,.ventajas h3{font-size:18px}
.tres p,.ventajas p{color:var(--suave);font-size:15px}
.ventajas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.ventajas li{background:var(--superficie);padding:22px;display:flex;flex-direction:column;gap:6px}
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.pack{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;background:var(--superficie);border:1.5px solid var(--linea-2);border-radius:var(--radio);padding:20px 20px 18px}
.pack-sello{font:700 11px/1 var(--f-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--oro-tinta);background:var(--oro);padding:5px 8px;border-radius:6px;margin-bottom:4px}
.pack-n{font:700 17px/1.2 var(--f-titulo)}
.pack-precio{font:800 32px/1.1 var(--f-titulo);color:var(--oro);font-variant-numeric:tabular-nums}
.pack-unidad{font-size:13.5px;color:var(--tenue)}
.packs.elegir{grid-template-columns:1fr;gap:10px}
.packs.elegir .pack{padding:0;border:0;background:none;cursor:pointer}
.packs.elegir .pack input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pack-in{display:grid;grid-template-columns:1fr auto;grid-template-areas:"sello sello" "n precio" "unidad precio";align-items:center;column-gap:12px;row-gap:2px;width:100%;padding:14px 16px;border:1.5px solid var(--linea-2);border-radius:14px;background:var(--superficie-2);transition:border-color .15s}
.pack-in .pack-sello{grid-area:sello;justify-self:start}
.pack-in .pack-n{grid-area:n}
.pack-in .pack-unidad{grid-area:unidad}
.pack-in .pack-precio{grid-area:precio;font-size:24px}
.packs.elegir input:checked + .pack-in{border-color:var(--oro);background:var(--oro-suave)}
.packs.elegir input:focus-visible + .pack-in{outline:2px solid var(--oro);outline-offset:2px}
.precio-notas{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--suave);font-size:14px}
.precio-notas li::before{content:"✓ ";color:var(--oro);font-weight:700}
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--superficie);border:1px solid var(--linea);border-radius:14px;padding:0 18px}
.faq summary{cursor:pointer;padding:16px 0;font-weight:650;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--oro);font-weight:700;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--suave);padding-bottom:16px}
.faq a,.check a,.legal a{color:var(--oro)}
.cierre{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:40px 24px;background:radial-gradient(120% 120% at 50% 0%, rgba(255,199,88,.09), transparent 60%), var(--superficie)}
.cierre-logo{width:64px;height:64px;color:var(--oro)}
.cierre h2{font-size:clamp(24px,3.4vw,32px);font-weight:800}
.cierre p{color:var(--suave)}
.cierre .boton{min-height:52px;padding:0 26px;margin-top:6px}

/* pie */
.pie-web{max-width:1180px;margin:56px auto 0;padding:0 20px}
.pie-in{border-top:1px solid var(--linea);padding:22px 0 8px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;color:var(--tenue);font-size:13.5px}
.pie-in nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.pie-in a{color:var(--suave);text-decoration:none}
.pie-in a:hover{color:var(--oro)}

/* ventanas */
.dialogo{width:min(440px,calc(100vw - 24px));max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;background:var(--superficie);color:var(--texto);border:1px solid var(--linea-2);border-radius:20px;padding:28px 24px 24px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.dialogo.ancho{width:min(560px,calc(100vw - 24px))}
.dialogo::backdrop{background:rgba(8,8,8,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.dialogo h2{font-size:24px;font-weight:800;margin-bottom:6px;padding-right:36px}
.dlg-x{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:1px solid var(--linea-2);background:var(--superficie-2);color:var(--suave);font-size:22px;line-height:1;cursor:pointer}
.dlg-x:hover{color:var(--texto);border-color:var(--oro-borde)}
.dlg-logo{width:48px;height:48px;color:var(--oro);margin-bottom:10px;display:block}
.dlg-sub{color:var(--suave);font-size:15px;margin-bottom:6px}
.pestanas{display:flex;width:100%;margin:12px 0 4px}
.pestanas label{flex:1}
.pestanas span{justify-content:center}
.dlg-form{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.campo-t{display:flex;flex-direction:column;gap:7px;font-size:13.5px;font-weight:600;color:var(--suave)}
.campo-t input{width:100%;padding:13px 14px;border:1.5px solid var(--linea-2);border-radius:12px;background:var(--fondo);color:var(--texto);font:16px/1.3 var(--f-texto)}
.campo-t input:focus{outline:none;border-color:var(--oro)}
.check{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--suave);cursor:pointer;line-height:1.45}
.check input{width:20px;height:20px;flex:none;margin:1px 0 0;accent-color:var(--oro)}
.hecho{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:6px 0}
.hecho-ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--oro-suave);color:var(--oro)}
.hecho-ico svg{width:30px;height:30px}
.hecho h3{font-size:22px}
.hecho p{color:var(--suave)}
.saldo-grande{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--fondo);border:1px solid var(--linea);border-radius:14px;padding:16px 18px;margin-top:14px}
.saldo-grande b{font:800 34px/1 var(--f-titulo);color:var(--oro);display:block;font-variant-numeric:tabular-nums}
.saldo-grande span{font-size:13.5px;color:var(--suave)}
.cuenta-email{font-size:14px;color:var(--suave);word-break:break-all}
.cuenta-email b{color:var(--texto);font-weight:600}
.plegable{border-top:1px solid var(--linea);margin-top:16px;padding-top:14px}
.plegable summary{cursor:pointer;font-weight:650;color:var(--texto)}
.plegable.peligro summary{color:var(--rojo)}
.plegable p{color:var(--suave);font-size:14px}
.lista{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;max-height:240px;overflow:auto}
.lista li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--linea);font-size:14px}
.lista li span:first-child{color:var(--tenue);font:12.5px var(--f-num);white-space:nowrap}
.lista li.vacia{display:block;color:var(--tenue)}
.lista b{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.lista b.mas{color:var(--verde)}
.lista b.menos{color:var(--suave)}
.cuenta-acc{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cuenta-acc .boton{flex:1}
#cMsg{margin-top:14px}
.nota{font-size:13px;color:var(--tenue);margin-top:10px;line-height:1.45}
.nota.prueba{color:var(--oro)}
#dComprar .check{margin:16px 0 12px}
#dComprar .aviso{margin-bottom:12px}
.toast{position:fixed;left:50%;bottom:max(20px, env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;max-width:min(520px,calc(100vw - 32px));background:var(--superficie-2);color:var(--texto);border:1px solid var(--oro-borde);border-left:4px solid var(--oro);border-radius:12px;padding:13px 16px;font-size:15px;box-shadow:0 14px 40px rgba(0,0,0,.5);cursor:pointer}
.toast.error{border-color:rgba(255,127,110,.45);border-left-color:var(--rojo)}

/* páginas legales */
.legal{max-width:780px;margin:0 auto;padding:28px 20px 0;display:flex;flex-direction:column;gap:16px}
.legal h1{font-size:clamp(28px,4vw,38px);font-weight:800}
.legal h2{font-size:20px;margin-top:14px}
.legal p,.legal li{color:var(--suave);line-height:1.6}
.legal ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.legal .fecha{color:var(--tenue);font-size:14px}
.legal [data-legal]{color:var(--texto);font-weight:600}
.legal .pendiente{color:var(--rojo)}
.legal-tabla{border:1px solid var(--linea);border-radius:12px;overflow:hidden}
.legal-tabla div{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:12px;padding:11px 14px;border-bottom:1px solid var(--linea);font-size:15px}
.legal-tabla div:last-child{border-bottom:0}
.legal-tabla dt{color:var(--tenue);margin:0}
.legal-tabla dd{margin:0;color:var(--texto)}

@media (max-width:980px){
  .heroe{grid-template-columns:minmax(0,1fr);gap:28px}
  .tres,.ventajas{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:640px){
  .anon-enlace{display:none}
  .anon .boton.texto{padding:0 4px}
  .anon .boton.peq{padding:0 12px}
  .usuario-cupo.saldo .largo{display:none}
  .inicio{gap:48px}
  .heroe{padding-top:6px}
  .heroe-sub{font-size:16.5px}
  .heroe-acc .boton{flex:1 1 100%}
  .ejemplo-par{padding:10px;gap:6px}
  .ejemplo-flecha{width:26px;height:26px}
  .tres,.ventajas{grid-template-columns:minmax(0,1fr)}
  .dialogo{padding:24px 18px 20px;border-radius:18px}
  .saldo-grande{flex-direction:column;align-items:stretch;text-align:center}
  .pie-in{flex-direction:column}
}

/* panel 2.5 */
.lanzar{display:flex;flex-direction:column;gap:14px;margin-bottom:18px;border-color:var(--oro-borde)}
.lista-ok{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.lista-ok li{font-size:15px;display:flex;gap:10px;align-items:center}
.lista-ok li::before{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;flex:none}
.lista-ok li.ok::before{content:"✓";background:var(--verde-suave);color:var(--verde)}
.lista-ok li.falta{color:var(--suave)}
.lista-ok li.falta::before{content:"!";background:var(--rojo-suave);color:var(--rojo)}
.acciones-fila{display:flex;flex-wrap:wrap;gap:10px}
.pill.pendiente{background:var(--oro-suave);color:var(--oro)}
.buscar{max-width:280px}
.wrap .corto-n{width:76px;padding:8px 10px}
.packs-admin{display:flex;flex-direction:column;gap:6px}
.packs-admin .fila{align-items:center}
.por-calco{min-width:120px;padding-top:22px}
.resumen-ventas{display:flex;flex-direction:column;gap:8px;max-width:520px;padding:18px 20px}
.resumen-ventas div{display:flex;justify-content:space-between;gap:12px;font-size:15px;color:var(--suave)}
.resumen-ventas b{font-family:var(--f-num);color:var(--texto);font-weight:600}
.resumen-ventas .total{border-top:1px solid var(--linea);padding-top:10px;margin-top:2px;color:var(--texto);font-weight:700}
.resumen-ventas .total b{color:var(--oro);font-size:17px}
.wrap code{font:12.5px var(--f-num);color:var(--oro)}
@media (max-width:760px){
  .tabla table.t-cuentas td:nth-child(1)::before{content:"Cuenta"}
  .tabla table.t-cuentas td:nth-child(2)::before{content:"Calcos"}
  .tabla table.t-cuentas td:nth-child(3)::before{content:"Comprado"}
  .tabla table.t-cuentas td:nth-child(4)::before{content:"Alta"}
  .tabla table.t-cuentas td:nth-child(5)::before{content:"Estado"}
  .tabla table.t-cuentas td:nth-child(6) .btns{display:flex;flex-wrap:wrap}
  .tabla table.t-ventas td:nth-child(1)::before{content:"Fecha"}
  .tabla table.t-ventas td:nth-child(2)::before{content:"Cuenta"}
  .tabla table.t-ventas td:nth-child(3)::before{content:"Pack"}
  .tabla table.t-ventas td:nth-child(4)::before{content:"Importe"}
  .tabla table.t-ventas td:nth-child(5)::before{content:"Estado"}
  .buscar{max-width:none}
  .por-calco{padding-top:0}
}

/* Instalar como app */
.aviso.instalar{align-items:center}
.aviso.instalar span{flex:1}
.aviso.instalar .boton{flex:none}
.instalar-x{flex:none;background:none;border:0;color:var(--suave);font-size:24px;line-height:1;padding:2px 4px;cursor:pointer}
.instalar-x:hover{color:var(--texto)}
.instalar-pasos{margin:16px 0 12px;padding-left:22px;display:grid;gap:10px;font-size:15px;line-height:1.45;color:var(--suave)}
.instalar-pasos b{color:var(--texto)}
.ico-compartir{width:18px;height:18px;vertical-align:-3px;color:var(--oro)}
#dInstalar .boton.claro{width:100%;margin-top:10px}
.instalar-auto{display:grid;gap:8px;margin-top:18px}
.instalar-auto .boton.grande[disabled]{opacity:.8;cursor:progress}
.instalar-estado{margin:0;font-size:13.5px;line-height:1.45;color:var(--suave);text-align:center}
.instalar-estado:empty{display:none}
.instalar-mano{margin:20px 0 0;font-size:14px;line-height:1.45;color:var(--tenue)}
.instalar-mano:empty{display:none}
.instalar-mano:not(:empty) ~ .instalar-pasos{margin-top:10px}
.girando{flex:none;width:17px;height:17px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:girar .8s linear infinite}
@media (prefers-reduced-motion:reduce){.girando{animation-duration:2.4s}}
.pie-instalar{background:none;border:0;padding:0;font:inherit;color:var(--oro);cursor:pointer}
.pie-instalar:hover{color:var(--oro-hover)}
.barra-instalar{display:inline-flex;align-items:center;gap:7px;flex:none;font:600 13.5px/1 var(--f-texto);color:var(--oro);background:var(--oro-suave);border:1px solid var(--oro-borde);padding:8px 12px;border-radius:999px;cursor:pointer}
.barra-instalar svg{width:16px;height:16px}
.barra-instalar:hover{background:rgba(255,199,88,.2)}
.heroe-instalar{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:none;border:0;padding:4px 0;font:600 14.5px/1.3 var(--f-texto);color:var(--oro);cursor:pointer;text-align:left}
.heroe-instalar svg{width:18px;height:18px;flex:none}
.heroe-instalar:hover span{text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){
  .barra-instalar{padding:7px 9px}
  .barra-instalar span{display:none}
}

/* Aviso de calcos regalados */
.dialogo.regalo{text-align:center;padding:34px 26px 26px;border-color:var(--oro-borde);background:radial-gradient(120% 70% at 50% 0%,rgba(255,199,88,.18),transparent 62%),var(--superficie)}
.regalo-ico{width:88px;height:88px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:var(--oro-suave);border:2px dashed var(--oro-borde);color:var(--oro)}
.regalo-ico svg{width:44px;height:44px}
.dialogo.regalo .antetitulo{margin:0}
.dialogo.regalo h2{font-size:32px;padding-right:0;margin:6px 0 10px}
.dialogo.regalo h2 #regaloN{color:var(--oro)}
#dRegalo .boton{margin-top:20px}
.aviso-fijo{position:sticky;top:12px;z-index:30;box-shadow:0 10px 30px rgba(0,0,0,.45)}

/* Abriendo un calco guardado */
.abriendo{position:fixed;inset:0;z-index:55;display:grid;place-items:center;padding:20px;background:rgba(10,10,10,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.abriendo-caja{width:min(340px,100%);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;background:var(--superficie);border:1px solid var(--linea-2);border-radius:20px;padding:26px 22px 22px;box-shadow:0 30px 80px rgba(0,0,0,.6);position:relative}
.abriendo-fotos{display:flex;gap:10px;justify-content:center}
.abriendo-fotos img{width:96px;height:128px;object-fit:cover;border-radius:12px;border:1px solid var(--linea-2);background:#fff;filter:blur(1.5px) saturate(.9);opacity:.85}
.abriendo-anillo{position:absolute;top:14px;right:14px;width:26px;height:26px;color:var(--oro);animation:girar 2.4s linear infinite}
.abriendo strong{font:700 18px/1.2 var(--f-titulo)}
.abriendo-barra{width:100%;height:8px;border-radius:999px;background:var(--superficie-2);border:1px solid var(--linea);overflow:hidden}
.abriendo-barra i{display:block;height:100%;width:0;background:var(--oro);border-radius:999px;transition:width .2s ease}
.abriendo-pct{font:600 13.5px/1 var(--f-num);color:var(--suave);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.abriendo-anillo{animation-duration:12s}.abriendo-barra i{transition:none}}