/* Trastery — interfaz de captura y revisión.
   Pensada para usarse de pie, con una mano, con guantes de polvo y con poca
   luz: objetivos grandes, contraste alto y nada que obligue a apuntar fino.
   En pantalla grande (el Mac) las hojas se vuelven ventanas centradas.

   Soft Grid polish 2026-09-04 (v21): gutters/shell alineados, contraste en overlays del visor,
   sin marca púrpura, tipografía Title, focus-visible, tablet,
   reduced-motion. Cámara/visor permanece oscuro. */

:root{
  --fondo:#F2E9E4;
  --superficie:#EDE2DC;
  --superficie-alta:#FFF8F5;
  --borde:#E0D3CC;
  --borde-fuerte:#C4B2AA;
  --texto:#33241F;
  --tenue:#55403A;
  --acento:#FF5A3D;
  --acento-tinta:#ffffff;
  --ok:#4ade80;
  --aviso:#fbbf24;
  --error:#f87171;
  --radio:20px;
  --arriba:env(safe-area-inset-top,0px);
  --abajo:env(safe-area-inset-bottom,0px);
  --alto-nav:64px;
  --shell:1100px;
  --gutter:14px;
  --pad-x:var(--gutter);
  color-scheme:light;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* El atributo hidden no oculta un <svg> en Chrome sin esta regla: el sprite de
   iconos ocupaba 150 px arriba de cada vista y empujaba la captura bajo la barra. */
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:var(--fondo);color:var(--texto);
  /* Satoshi via Fontshare falla offline; system stack cubre. font-display: optional en @font-face si se añade. */
  font:16px/1.6 "Satoshi",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  overscroll-behavior:none;-webkit-user-select:none;user-select:none;
}
input,textarea,select,button{font-family:inherit}
input,textarea{-webkit-user-select:text;user-select:text}

svg.ico,svg.ico-grande{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
svg.ico{width:20px;height:20px}
svg.ico-grande{width:44px;height:44px;opacity:.4}

.oculto{display:none!important}
.invisible{visibility:hidden;pointer-events:none}

/* ── barra superior ─────────────────────────────────────────────── */
.barra{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;max-width:none;transform:none;
  padding:calc(var(--arriba) + 10px) var(--pad-x) 10px;
  background:linear-gradient(to bottom,rgba(245,242,236,.94),rgba(245,242,236,0));
}
.chip{
  display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:100px;
  background:rgba(255,255,255,.82);border:1px solid var(--borde);backdrop-filter:blur(10px);
  color:var(--texto);font-size:14px;font-weight:500;
  max-width:56vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.chip:active{background:var(--superficie-alta)}
.estado{display:flex;align-items:center;gap:6px}
.pill{padding:5px 10px;border-radius:100px;font-size:11.5px;font-weight:600;letter-spacing:.02em;border:1px solid transparent;backdrop-filter:blur(10px)}
.pill b{font-weight:700}
.red-ok{background:rgba(74,222,128,.13);color:var(--ok);border-color:rgba(74,222,128,.25)}
.red-no{background:rgba(251,191,36,.13);color:var(--aviso);border-color:rgba(251,191,36,.25)}
.pill-cola{background:rgba(255,90,61,.14);color:var(--acento);border-color:rgba(255,90,61,.28)}

/* ── vistas ─────────────────────────────────────────────────────── */
.vista{display:none;min-height:100vh}
.vista.activa{display:block}
#vistaCapturar{display:none;flex-direction:column;height:100vh;height:100dvh}
#vistaCapturar.activa{display:flex}

/* ── reposo ─────────────────────────────────────────────────────── */
.reposo{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:calc(var(--arriba) + 70px) 24px calc(var(--abajo) + var(--alto-nav) + 24px);text-align:center;
}
.reposo-icono{
  width:82px;height:82px;border-radius:24px;display:grid;place-items:center;margin-bottom:20px;
  color:var(--acento);background:rgba(255,90,61,.1);border:1px solid rgba(255,90,61,.22);
}
.reposo-icono svg{width:38px;height:38px;stroke-width:1.5}
.reposo-logo{width:82px;height:82px;border-radius:22px;margin-bottom:20px;box-shadow:0 8px 24px rgba(17,17,17,.12)}
.reposo h1{margin:0;font-size:28px;font-weight:600;letter-spacing:-.02em}
.reposo-caja{margin:0 0 26px;color:var(--tenue);font-size:14px}
.reposo-cifras{display:flex;gap:10px;width:100%;max-width:340px;margin-bottom:28px}
.reposo-cifras div{flex:1;padding:13px 8px;border-radius:13px;background:var(--superficie);border:1px solid var(--borde)}
.reposo-cifras b{display:block;font-size:21px;font-weight:600;letter-spacing:-.02em}
.reposo-cifras span{font-size:11px;color:var(--tenue)}
.reposo-pista{margin:16px 0 0;font-size:12.5px;color:var(--tenue);max-width:34ch;line-height:1.5}
.reposo-pista.trabajando{color:var(--acento)}
.reposo-pista.trabajando::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:7px;vertical-align:middle;animation:latido 1.4s ease-in-out infinite}

/* ── captura ────────────────────────────────────────────────────── */
.captura{flex:1;display:flex;flex-direction:column;min-height:0}
.visor{position:relative;flex:1;min-height:0;background:#000;overflow:hidden}
#video{width:100%;height:100%;object-fit:cover;display:block}

.btn-flotante{
  position:absolute;z-index:12;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(8,8,11,.62);border:1px solid rgba(245,242,236,.28);color:#F5F2EC;backdrop-filter:blur(10px);
}
.btn-salir{top:calc(var(--arriba) + 58px);right:14px}

.pasos{
  position:absolute;top:calc(var(--arriba) + 62px);left:14px;right:64px;z-index:11;
  display:flex;gap:5px;
}
.paso{
  flex:1;height:4px;border-radius:100px;background:rgba(255,255,255,.25);
  transition:background .2s;
}
.paso.hecho{background:var(--ok)}
.paso.actual{background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.paso.opcional{background:rgba(255,255,255,.14);border:1px dashed rgba(255,255,255,.4);height:6px;margin-top:-1px}
.paso.opcional.hecho{background:var(--ok);border-color:var(--ok)}
.paso.opcional.actual{background:#fff;border-color:#fff}

.guia{
  position:absolute;top:calc(var(--arriba) + 82px);left:50%;transform:translateX(-50%);
  z-index:11;text-align:center;padding:12px 20px;border-radius:14px;max-width:88%;
  background:rgba(8,8,11,.72);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.28);
  color:#F5F2EC;animation:entra .25s ease;
}
.guia-paso{font-size:17px;font-weight:600;letter-spacing:-.01em;color:#F5F2EC}
.guia-sub{font-size:13px;color:rgba(245,242,236,.78);margin-top:2px}
@keyframes entra{from{opacity:0;transform:translateX(-50%) translateY(-8px)}}

.lector{position:absolute;inset:0;z-index:10;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.lector-marco{
  width:72%;max-width:340px;aspect-ratio:1.6;border-radius:16px;
  box-shadow:0 0 0 2000px rgba(0,0,0,.35);
  border:2px solid rgba(255,255,255,.85);
  animation:respira 1.6s ease-in-out infinite;
}
@keyframes respira{0%,100%{border-color:rgba(255,255,255,.85)}50%{border-color:var(--acento)}}
.lector-texto{font-size:13.5px;padding:8px 14px;border-radius:100px;background:rgba(8,8,11,.7);backdrop-filter:blur(10px)}
.lector-texto.leido{background:rgba(74,222,128,.2);color:var(--ok)}

.cuenta{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;font-size:90px;font-weight:300;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.6);pointer-events:none}

.sin-camara{
  position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:32px;text-align:center;background:#0d0d11;
}
.sin-camara p{margin:0;color:rgba(245,242,236,.78);font-size:14px;max-width:30ch;line-height:1.5}

.tiras{position:absolute;left:0;right:0;bottom:12px;z-index:11;display:flex;gap:8px;padding:0 14px;overflow-x:auto;scrollbar-width:none}
.tiras::-webkit-scrollbar{display:none}
.tira{position:relative;flex:0 0 auto;width:54px;height:54px;border-radius:11px;overflow:hidden;border:2px solid rgba(255,255,255,.55);box-shadow:0 4px 14px rgba(0,0,0,.5);animation:aparece .3s ease}
.tira img{width:100%;height:100%;object-fit:cover}
.tira b{position:absolute;left:0;right:0;bottom:0;font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-align:center;padding:2px 0;background:rgba(0,0,0,.72)}
.tira.ean{display:grid;place-items:center;background:rgba(74,222,128,.18);border-color:var(--ok);color:var(--ok);font-size:9px;font-weight:700;text-align:center;line-height:1.2;padding:4px}
@keyframes aparece{from{opacity:0;transform:scale(.6)}}

.destello{position:absolute;inset:0;z-index:20;background:#fff;opacity:0;pointer-events:none}
.destello.on{animation:flash .22s ease}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}

.controles{flex:0 0 auto;padding:14px 16px calc(var(--abajo) + var(--alto-nav) + 10px);background:var(--fondo)}
.modos{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:14px;background:var(--superficie);border:1px solid var(--borde);margin-bottom:14px}
.modo{display:flex;flex-direction:column;gap:1px;align-items:center;padding:9px 6px;border:0;border-radius:11px;background:transparent;color:var(--tenue);transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.modo b{font-size:14.5px;font-weight:600}
.modo span{font-size:11px;opacity:.85}
.modo.activo{background:var(--superficie-alta);color:var(--texto)}
.modo:disabled{opacity:.45}

.fila-disparo{display:flex;align-items:center;justify-content:space-between;gap:14px}
.disparo{width:78px;height:78px;border-radius:50%;flex:0 0 auto;background:transparent;border:3.5px solid var(--texto);padding:0;display:grid;place-items:center}
.disparo span{width:60px;height:60px;border-radius:50%;background:var(--acento);transition:transform .12s,background .15s,filter .15s;display:block}
.disparo:active span{transform:scale(.88);filter:brightness(.92)}
.disparo:disabled{opacity:.4}
.btn-redondo{width:52px;height:52px;flex:0 0 auto;border-radius:50%;background:var(--superficie);border:1px solid var(--borde);color:var(--texto);display:grid;place-items:center}
.btn-redondo:active{background:var(--superficie-alta)}
.btn-hecho{background:rgba(74,222,128,.16);border-color:rgba(74,222,128,.4);color:var(--ok)}
#btnNota.grabando{background:rgba(248,113,113,.18);border-color:rgba(248,113,113,.45);color:var(--error);animation:latido 1.2s ease-in-out infinite}

.fila-secundaria{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;min-height:32px}
.btn-texto{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:100px;border:0;background:transparent;color:var(--tenue);font-size:12.5px;font-weight:500}
.btn-texto:active{background:var(--superficie)}
.btn-texto svg{width:15px;height:15px}
.pista{flex:1;text-align:center;font-size:12.5px;color:var(--tenue)}

/* ── inventario y cajas ─────────────────────────────────────────── */
#vistaInventario,#vistaCajas,#vistaVentas,#vistaAmigos,#vistaPerfil{padding:calc(var(--arriba) + 62px) var(--pad-x) calc(var(--abajo) + var(--alto-nav) + 24px);max-width:var(--shell);margin-inline:auto;width:100%;box-sizing:border-box}
.cabecera-vista{margin-bottom:14px}
.cabecera-vista.fila-entre{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cabecera-vista h2{margin:0 0 12px;font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.cabecera-vista.fila-entre h2{margin:0}
.cabecera-vista h2 small{font-size:14px;font-weight:500;color:var(--tenue);margin-left:6px}
.buscador,.campo-texto,.selector,textarea.campo-texto{
  width:100%;padding:11px 14px;border-radius:12px;background:var(--superficie);
  border:1px solid var(--borde);color:var(--texto);font-size:15px;
}
.buscador:focus,.campo-texto:focus,.selector:focus,textarea:focus{outline:none;border-color:var(--borde-fuerte)}
.buscador:focus-visible,.campo-texto:focus-visible,.selector:focus-visible,textarea:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.buscador:focus-visible,.campo-texto:focus-visible,.selector:focus-visible,textarea:focus-visible{
  outline:none;border-color:rgba(255,90,61,.55);box-shadow:0 0 0 3px rgba(255,90,61,.22)
}
.selector{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tenue) 50%),linear-gradient(135deg,var(--tenue) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;margin-top:10px}
.filtros{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-top:10px;padding-bottom:2px}
.filtros::-webkit-scrollbar{display:none}
.filtro{flex:0 0 auto;padding:7px 13px;border-radius:100px;border:1px solid var(--borde);background:var(--superficie);color:var(--tenue);font-size:13px;font-weight:500;transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease}
.filtro.activo{background:rgba(255,90,61,.16);border-color:rgba(255,90,61,.4);color:var(--acento)}

.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tarjeta{border-radius:var(--radio);overflow:hidden;background:var(--superficie);border:1px solid var(--borde);display:flex;flex-direction:column;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .15s ease}
.tarjeta:active{background:var(--superficie-alta)}
.tarjeta .foto{aspect-ratio:1;background:#111;position:relative}
.tarjeta .foto img{width:100%;height:100%;object-fit:cover;display:block}
.tarjeta .cuerpo{padding:10px 11px 12px}
.tarjeta h4{margin:0 0 5px;font-size:13.5px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tarjeta .meta{font-size:11.5px;color:var(--tenue)}
.tarjeta .fase{font-size:11px;color:var(--acento);margin-top:3px;display:flex;align-items:center;gap:5px}
.marca-estado{position:absolute;top:8px;left:8px;padding:3.5px 8px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;backdrop-filter:blur(8px)}
.e-cola{background:rgba(255,90,61,.9);color:#fff}
.e-pendiente{background:rgba(251,191,36,.9);color:#251a00}
.e-listo{background:rgba(74,222,128,.9);color:#04220f}
.e-revisado{background:rgba(17,17,17,.92);color:#F5F2EC}
.e-error{background:rgba(248,113,113,.92);color:#2a0808}
.marca-alerta{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:rgba(8,8,11,.75);backdrop-filter:blur(8px)}
.marca-caja{position:absolute;bottom:8px;right:8px;padding:3px 7px;border-radius:8px;font-size:10px;font-weight:600;background:rgba(8,8,11,.75);backdrop-filter:blur(8px);color:#F5F2EC}
.marca-autor{position:absolute;bottom:8px;left:8px;width:26px;height:26px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:11px;font-weight:700;color:#F5F2EC;background:rgba(8,8,11,.75);backdrop-filter:blur(8px);box-shadow:0 0 0 1.5px rgba(245,242,236,.55)}
.marca-autor img{width:100%;height:100%;object-fit:cover;display:block}
.campo-foto{display:block;font-size:13px;color:var(--tenue);margin:2px 0 10px}
.marcador{display:flex;flex-direction:column;gap:8px}
.marcador .fila-autor{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--superficie);border:1px solid var(--borde)}
.marcador .cara{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:0 0 auto;display:grid;place-items:center;background:var(--superficie-alta);font-weight:700;font-size:13px}
.marcador .cara img{width:100%;height:100%;object-fit:cover;display:block}
.barra-progreso{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.45)}
.barra-progreso i{display:block;height:100%;background:var(--acento);transition:width .5s ease}
.punto{width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto;animation:latido 1.4s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:.25}50%{opacity:1}}

.lista{display:flex;flex-direction:column;gap:8px}
.fila{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-radius:13px;background:var(--superficie);border:1px solid var(--borde);font-size:15px;text-align:left;color:var(--texto);width:100%}
.fila:active{background:var(--superficie-alta)}
.fila.marcada{border-color:var(--acento);background:rgba(255,90,61,.1)}
.fila small{display:block;color:var(--tenue);font-size:12px;margin-top:2px}
.fila .num{font-size:15px;font-weight:600;color:var(--tenue);display:flex;align-items:center;gap:6px}
.fila .num svg{width:16px;height:16px;opacity:.5}
.fila.vaciada{opacity:.55}
.vacio{text-align:center;color:var(--tenue);font-size:14px;padding:48px 24px;line-height:1.6}

/* ── navegación ─────────────────────────────────────────────────── */
.nav{position:fixed;bottom:0;left:0;right:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);width:100%;max-width:none;transform:none;padding:8px var(--pad-x) calc(var(--abajo) + 8px);background:rgba(245,242,236,.92);backdrop-filter:blur(18px);border-top:1px solid var(--borde)}
.nav-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:44px;padding:7px 0;border:0;background:transparent;color:var(--tenue);font-size:12px;font-weight:500;transition:color .18s ease,background .18s ease,box-shadow .18s ease}
.nav-btn.activa{color:var(--acento)}

/* ── botones ────────────────────────────────────────────────────── */
.btn-secundario{padding:11px 18px;border-radius:12px;background:var(--superficie-alta);border:1px solid var(--texto);color:var(--texto);font-size:14.5px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease}
.btn-secundario:active{background:var(--superficie);transform:scale(.98)}
.btn-secundario.ancho{width:100%;margin-top:8px}
.btn-secundario.ancho-medio{width:100%;max-width:340px;margin-top:10px}
.btn-secundario.compacto{padding:8px 14px;font-size:13.5px}
.btn-primario{padding:13px 18px;border-radius:12px;width:100%;background:var(--acento);border:0;color:var(--acento-tinta);font-size:15px;font-weight:600;transition:background .18s ease,box-shadow .18s ease,filter .12s ease,transform .12s ease}
.btn-primario.grande{max-width:340px;padding:16px;font-size:16.5px;border-radius:15px}
.btn-primario.compacto{width:auto;padding:11px 16px;font-size:14px}
.btn-primario.ancho{margin-top:6px}
.btn-primario:active{filter:brightness(.92);transform:scale(.98)}
.btn-primario:disabled{opacity:.5;transform:none;filter:none}
.btn-peligro{padding:13px 18px;border-radius:12px;width:100%;background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.32);color:var(--error);font-size:15px;font-weight:600}
.btn-peligro:active{background:rgba(248,113,113,.2)}
.btn-peligro.ancho{margin-top:8px}
.fila-botones{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}

/* ── hojas ──────────────────────────────────────────────────────── */
.velo{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.hoja{
  position:fixed;left:0;right:0;bottom:0;z-index:50;max-height:84vh;overflow-y:auto;
  padding:10px 18px calc(var(--abajo) + 22px);background:var(--superficie-alta);border:1px solid var(--borde);
  border-radius:22px 22px 0 0;animation:sube .28s cubic-bezier(.32,.72,0,1);
}
.hoja.alta{max-height:93vh}
@keyframes sube{from{transform:translateY(100%)}}
.asa{width:38px;height:4px;border-radius:100px;background:var(--borde-fuerte);margin:0 auto 16px}
.hoja h3{margin:0 0 4px;font-size:19px;font-weight:600;letter-spacing:-.01em}
.hoja-sub{margin:0 0 16px;color:var(--tenue);font-size:13.5px}

.hoja-escaner .escaner-visor{position:relative;aspect-ratio:1.25;border-radius:14px;overflow:hidden;background:#000;margin-bottom:12px;display:flex;align-items:center;justify-content:center}
.hoja-escaner video{width:100%;height:100%;object-fit:cover}
.hoja-escaner .lector-marco{position:absolute;width:64%;box-shadow:0 0 0 1000px rgba(0,0,0,.4)}
.fila-form{display:flex;gap:8px}
.fila-form .campo-texto{flex:1}

.formulario{display:flex;flex-direction:column;gap:12px}
.formulario label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--tenue)}
.formulario label.check{flex-direction:row;align-items:center;gap:10px;font-size:14.5px;color:var(--texto)}
.formulario input[type=checkbox]{width:20px;height:20px;accent-color:var(--acento)}

/* ── detalle ────────────────────────────────────────────────────── */
.detalle-fotos{display:flex;gap:8px;overflow-x:auto;margin-bottom:16px;scrollbar-width:none}
.detalle-fotos::-webkit-scrollbar{display:none}
.detalle-fotos img{height:130px;border-radius:12px;flex:0 0 auto;object-fit:cover;border:1px solid var(--borde)}
.detalle-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.detalle-cab h3{flex:1}
.btn-editar{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:100px;background:rgba(255,90,61,.14);border:1px solid rgba(255,90,61,.3);color:var(--acento);font-size:13px;font-weight:600}
.campo{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--borde);font-size:14.5px}
.campo:last-of-type{border-bottom:0}
.campo .k{color:var(--tenue);font-size:13.5px;flex:0 0 auto}
.campo .v{text-align:right;font-weight:500;min-width:0;overflow-wrap:anywhere}
.campo .v.nulo{color:var(--tenue);font-weight:400;font-style:italic}
.conf{display:inline-block;margin-left:6px;padding:1.5px 6px;border-radius:100px;font-size:10px;font-weight:700;vertical-align:middle;white-space:nowrap}
.c-alta{background:rgba(74,222,128,.16);color:var(--ok)}
.c-media{background:rgba(251,191,36,.16);color:var(--aviso)}
.c-baja{background:rgba(248,113,113,.16);color:var(--error)}
.c-tuyo{background:rgba(51,51,51,.12);color:var(--tenue)}
.nota{margin:14px 0 0;padding:13px 14px;border-radius:12px;font-size:13.5px;line-height:1.55;background:rgba(255,90,61,.09);border:1px solid rgba(255,90,61,.22)}
.nota.alerta{background:rgba(251,191,36,.09);border-color:rgba(251,191,36,.24)}
.nota.joya{background:rgba(17,17,17,.06);border-color:rgba(217,213,207,.9)}
.nota.suave{background:var(--superficie);border-color:var(--borde)}
.nota b{display:block;margin-bottom:3px;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
.nota audio{width:100%;margin-top:8px;height:36px}
details.plegable{margin-top:14px;border:1px solid var(--borde);border-radius:12px;padding:0 14px}
details.plegable summary{padding:12px 0;cursor:pointer;color:var(--tenue);font-size:13.5px;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.plegable summary::-webkit-details-marker{display:none}
details.plegable pre{white-space:pre-wrap;font-size:13px;color:var(--texto);margin:0 0 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.5}
.acciones{display:flex;flex-direction:column;gap:8px;margin-top:22px;padding-top:18px;border-top:1px solid var(--borde)}
.acciones .fila-botones{margin:0}

/* edición en la ficha */
.editor{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.editor label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--tenue)}
.editor .dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.editor textarea{min-height:70px;resize:vertical}
.segmento{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:4px;border-radius:12px;background:var(--superficie);border:1px solid var(--borde)}
.segmento button{padding:10px 0;border:0;border-radius:9px;background:transparent;color:var(--tenue);font-size:15px;font-weight:600}
.segmento button.activo{background:var(--superficie-alta);color:var(--texto)}
.segmento-nombre{font-size:12px;color:var(--tenue);text-align:center;min-height:1.2em}
.conmutadores{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.conmutador{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 13px;border-radius:12px;background:var(--superficie);border:1px solid var(--borde);font-size:14px;color:var(--texto)}
.conmutador.activo{border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.1)}
.conmutador.malo.activo{border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.1)}
.editor-pie{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.aviso-ean{font-size:12px;color:var(--error);min-height:1.2em}

/* ── aviso flotante ─────────────────────────────────────────────── */
.aviso{position:fixed;left:50%;bottom:calc(var(--abajo) + var(--alto-nav) + 28px);z-index:60;transform:translateX(-50%);padding:11px 18px;border-radius:100px;white-space:nowrap;max-width:88vw;overflow:hidden;text-overflow:ellipsis;background:var(--superficie-alta);border:1px solid var(--borde);color:var(--texto);font-size:13.5px;box-shadow:0 8px 28px rgba(17,17,17,.12);animation:entra-abajo .25s ease}
@keyframes entra-abajo{from{opacity:0;transform:translateX(-50%) translateY(10px)}}


/* ── interacción Soft Grid: hover (pointer fino) + focus-visible ── */
@media (hover:hover) and (pointer:fine){
  .btn-primario:hover{filter:brightness(1.05)}
  .btn-secundario:hover{background:var(--superficie)}
  .nav-btn:hover{color:var(--texto)}
  .filtro:hover{border-color:var(--borde-fuerte);color:var(--texto)}
  .modo:hover:not(:disabled){color:var(--texto)}
  .tarjeta:hover{border-color:var(--borde-fuerte);box-shadow:0 4px 16px rgba(17,17,17,.08)}
  .btn-flotante:hover{background:rgba(8,8,11,.78);border-color:rgba(255,255,255,.4)}
  .btn-redondo:hover{background:var(--superficie-alta)}
  .pestana:hover{color:var(--texto);border-color:var(--borde-fuerte)}
  .chip:hover{background:var(--superficie-alta)}
}
.btn-primario:focus-visible,.btn-secundario:focus-visible,.btn-peligro:focus-visible,
.nav-btn:focus-visible,.filtro:focus-visible,.modo:focus-visible,.chip:focus-visible,
.btn-redondo:focus-visible,.btn-flotante:focus-visible,.btn-texto:focus-visible,
.pestana:focus-visible,.btn-editar:focus-visible,.segmento button:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(255,90,61,.35)
}
.filtro:focus-visible,.chip:focus-visible,.pestana:focus-visible{
  box-shadow:0 0 0 3px rgba(217,213,207,.85)
}

/* ── tablet 600–899: mismo gutter que header/nav ───────────────── */
@media (min-width:600px) and (max-width:899px){
  :root{--gutter:22px}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:13px}
  .kanban{margin-inline:calc(var(--pad-x) * -1);padding-inline:var(--pad-x)}
  .columna{flex:0 0 45vw;min-width:280px;max-width:340px}
  .cabecera-vista h2{font-size:28px}
}

/* ── reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ── pantallas grandes: shell + gutters alineados (sin float centrado) ── */
@media (min-width:900px){
  :root{--gutter:28px}
  /* pad-x alinea chrome y contenido con la columna --shell */
  :root{--pad-x:max(var(--gutter), calc((100vw - var(--shell)) / 2))}
  body{background:var(--fondo)}
  .barra,.nav{
    left:0;right:0;width:100%;max-width:none;transform:none;
  }
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
  /* Capturar: cámara a ancho completo; reposo alineado al shell */
  #vistaCapturar{
    max-width:none;width:100%;margin:0;padding-inline:0;border-inline:0;
  }
  #vistaCapturar .reposo{
    max-width:var(--shell);width:100%;margin-inline:auto;
    padding-inline:var(--pad-x);box-sizing:border-box;
  }
  #vistaCapturar .reposo .btn-primario.grande,
  #vistaCapturar .reposo .btn-secundario.ancho-medio,
  #vistaCapturar .reposo .reposo-cifras,
  #vistaCapturar .reposo .balance,
  #vistaCapturar .reposo .actividad,
  #vistaCapturar .reposo .vigilancia{
    max-width:520px;margin-left:auto;margin-right:auto;
  }
  #vistaCapturar .captura{max-width:none;width:100%;margin:0}
  #vistaCapturar .controles{
    max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad-x);box-sizing:border-box;
  }
  .hoja{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:min(680px,92vw);max-height:88vh;border-radius:22px;animation:aparece-centro .22s ease}
  .hoja.alta{max-height:90vh}
  .asa{display:none}
  @keyframes aparece-centro{from{opacity:0;transform:translate(-50%,-48%)}}
  .aviso{bottom:36px}
  .kanban{margin-inline:calc(var(--pad-x) * -1);padding-inline:var(--pad-x)}
}

/* ── tasación ────────────────────────────────────────────────────── */
.balance{
  width:100%;max-width:340px;margin:0 0 6px;padding:12px 16px;border-radius:13px;text-align:left;
  background:var(--superficie);border:1px solid var(--borde);color:var(--texto);
  display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13.5px;
}
.balance b{font-size:17px;font-weight:600;letter-spacing:-.02em;display:block}
.balance span{color:var(--tenue);font-size:12px}
.balance:active{background:var(--superficie-alta)}
.bloque{margin-top:18px;padding-top:16px;border-top:1px solid var(--borde)}
.bloque h4{margin:0 0 10px;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--tenue);font-weight:600}
.precios{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;margin-bottom:12px}
.precio{padding:12px 14px;border-radius:13px;background:var(--superficie);border:1px solid var(--borde)}
.precio b{display:block;font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.precio small{display:block;color:var(--tenue);font-size:12px;margin-top:4px}
.precio.principal{background:rgba(255,90,61,.1);border-color:rgba(255,90,61,.25)}
.fuente{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:100px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.f-ia{background:rgba(251,191,36,.16);color:var(--aviso)}
.f-wallapop{background:rgba(74,222,128,.16);color:var(--ok)}
.f-manual{background:rgba(255,90,61,.12);color:var(--acento)}
.canal{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--borde)}
.canal:last-child{border-bottom:0}
.canal .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--superficie-alta);color:var(--tenue);flex:0 0 auto}
.canal.top .n{background:var(--acento);color:var(--acento-tinta)}
.canal .cuerpo{flex:1;min-width:0}
.canal .cuerpo b{display:block;font-size:14px}
.canal .cuerpo small{color:var(--tenue);font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.canal .neto{text-align:right;flex:0 0 auto}
.canal .neto b{display:block;font-size:15px}
.canal .neto small{color:var(--tenue);font-size:11.5px}
.canal.liq{opacity:.75}
.veredicto{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-radius:13px;background:var(--superficie);border:1px solid var(--borde);margin-top:12px}
.veredicto .icono{font-size:22px;line-height:1}
.veredicto b{display:block;font-size:14.5px}
.veredicto small{color:var(--tenue);font-size:12.5px;line-height:1.45;display:block;margin-top:2px}
.veredicto.v-vender{border-color:rgba(74,222,128,.35)}
.veredicto.v-lotear{border-color:rgba(255,90,61,.35)}
.veredicto.v-donar,.veredicto.v-liquidar{border-color:rgba(251,191,36,.35)}
.veredicto.v-tirar{border-color:rgba(248,113,113,.35)}
.anuncio{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--borde);font-size:13.5px;text-decoration:none;color:var(--texto)}
.anuncio small{display:block;color:var(--tenue);font-size:11.5px}
.anuncio b{flex:0 0 auto}
.tarjeta .dinero{font-size:12px;font-weight:600;color:var(--texto);margin-top:3px;display:flex;justify-content:space-between;gap:6px}
.tarjeta .dinero span{color:var(--tenue);font-weight:500}
.vigilancia{margin:0 0 10px;font-size:12px;color:var(--tenue);max-width:340px}

/* ── selección múltiple y lotes ────────────────────────────────── */
.tarjeta.seleccionable{cursor:pointer}
.tarjeta.seleccionada{outline:2px solid var(--acento);outline-offset:-2px;background:rgba(255,90,61,.1)}
.tarjeta .marca-check{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--acento);color:var(--acento-tinta);display:grid;place-items:center;font-size:13px;font-weight:700}
.barra-seleccion{position:fixed;left:var(--pad-x);right:var(--pad-x);bottom:calc(var(--abajo) + var(--alto-nav) + 12px);z-index:35;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 16px;border-radius:14px;background:var(--superficie-alta);border:1px solid var(--borde);color:var(--texto);box-shadow:0 8px 28px rgba(17,17,17,.12);font-size:14px}
.btn-secundario.activo{background:rgba(255,90,61,.16);border-color:rgba(255,90,61,.4);color:var(--acento)}

/* ── ventas ─────────────────────────────────────────────────────── */
.proyeccion{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:2px}
.proyeccion div{padding:12px 14px;border-radius:13px;background:var(--superficie);border:1px solid var(--borde)}
.proyeccion b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.proyeccion span{display:block;color:var(--tenue);font-size:11.5px;margin-top:4px;line-height:1.35}
.proyeccion .destacado{background:rgba(255,90,61,.1);border-color:rgba(255,90,61,.25)}
.kanban{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:18px -16px 0;padding:0 16px 10px;scrollbar-width:none}
.kanban::-webkit-scrollbar{display:none}
.columna{flex:0 0 84vw;max-width:340px;scroll-snap-align:start;display:flex;flex-direction:column;gap:8px}
.columna h4{margin:0 0 4px;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--tenue);font-weight:600;display:flex;justify-content:space-between}
.columna h4 span{color:var(--texto)}
.columna .vacio-col{padding:22px 12px;border:1px dashed var(--borde);border-radius:12px;color:var(--tenue);font-size:12.5px;text-align:center}
.ficha-venta{padding:12px 13px;border-radius:13px;background:var(--superficie);border:1px solid var(--borde);text-align:left;color:var(--texto);width:100%}
.ficha-venta:active{background:var(--superficie-alta)}
.ficha-venta b{display:block;font-size:14px;line-height:1.3}
.ficha-venta .linea{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:12.5px;color:var(--tenue)}
.ficha-venta .linea strong{color:var(--texto);font-weight:600}
.aviso-precio{display:inline-block;margin-top:8px;padding:4px 9px;border-radius:100px;font-size:11px;font-weight:700;background:rgba(251,191,36,.16);color:var(--aviso)}
.ficha-venta.error{border-color:rgba(248,113,113,.35)}
.lotes{margin-top:22px}
.lotes h3{font-size:16px;margin:0 0 10px}
.anuncio-texto{padding:12px 14px;border-radius:12px;background:var(--superficie);border:1px solid var(--borde);font-size:14px;line-height:1.5;white-space:pre-wrap;-webkit-user-select:text;user-select:text}
.anuncio-texto.titulo{font-weight:600;font-size:15px}
.copiar{display:flex;justify-content:space-between;align-items:center;margin:14px 0 6px}
.copiar h4{margin:0;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--tenue);font-weight:600}
.etiquetas{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.etiquetas span{padding:3px 9px;border-radius:100px;background:var(--superficie);border:1px solid var(--borde);font-size:12px;color:var(--tenue)}
.duplicado{padding:12px 14px;border-radius:13px;background:var(--superficie);border:1px solid var(--borde)}
.duplicado .par{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.duplicado .par div{padding:9px 10px;border-radius:10px;background:var(--superficie-alta);font-size:13px}
.duplicado .par small{display:block;color:var(--tenue);font-size:11.5px}
.duplicado .motivo{font-size:12.5px;color:var(--aviso)}
@media (min-width:900px){
  .kanban{display:grid;grid-template-columns:repeat(5,1fr);overflow:visible;margin:18px 0 0;padding:0}
  .columna{flex:none;max-width:none}
}

/* ── red, tendencias, actividad ───────────────────────────────── */
.badges{display:inline-flex;gap:4px;vertical-align:middle}
.badge{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:7px;background:var(--c);color:#fff;font-size:11px;font-weight:700;letter-spacing:-.02em;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.termo{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:100px;font-size:12px;font-weight:700;background:var(--superficie);border:1px solid var(--borde)}
.termo.sube{color:var(--ok);border-color:rgba(74,222,128,.35)}.termo.baja{color:var(--error);border-color:rgba(248,113,113,.35)}
.termo.sin{color:var(--tenue);font-weight:500}
.termo .mini{display:inline-flex;align-items:flex-end;gap:1px;height:14px}.termo .mini i{display:block;width:3px;background:currentColor;opacity:.6;border-radius:1px}
.actividad{width:100%;max-width:340px;margin:0 0 8px;padding:10px 14px;border-radius:12px;background:rgba(255,90,61,.08);border:1px solid rgba(255,90,61,.25);font-size:12.5px;text-align:left}
.actividad b{display:block;color:var(--acento);font-size:11px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.actividad span{display:block;color:var(--texto)}

/* ── defectos marcados sobre la foto ──────────────────────────── */
.foto-marcada{position:relative;flex:0 0 auto;height:170px;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--borde)}
.foto-marcada img{width:100%;height:100%;object-fit:cover;display:block}
.zona{position:absolute;border:2px solid var(--aviso);border-radius:6px;box-shadow:0 0 0 1px rgba(0,0,0,.5);pointer-events:auto}
.zona.g3{border-color:var(--error)}.zona.g1{border-color:var(--ok)}

/* ── amigos ─────────────────────────────────────────────────── */
.pestanas{display:flex;gap:6px;padding:0 0 10px;overflow-x:auto}
.pestana{flex:0 0 auto;padding:8px 14px;border-radius:999px;border:1px solid var(--borde);background:transparent;color:var(--tenue);font-size:13px;font-weight:600}
.pestana.activa{background:var(--acento);color:#fff;border-color:var(--acento)}
.perfil-cab{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.avatar{width:46px;height:46px;border-radius:50%;background:var(--acento);color:#fff;display:grid;place-items:center;font-weight:700;font-size:18px;flex:0 0 auto}
.nota.donar{border-color:rgba(255,90,61,.45);background:rgba(255,90,61,.08)}
.nota.donar ul{margin:6px 0 0 18px;padding:0;color:var(--tenue);font-size:12.5px}
.enlaces-marca{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.enlaces-marca a{padding:5px 10px;border-radius:999px;border:1px solid var(--borde);color:var(--texto);text-decoration:none;font-size:12px}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--borde)}
.toggle input{width:20px;height:20px;accent-color:var(--acento)}


/* ── tipo de producto al capturar ────────────────────────────── */
.tipos-velo{position:fixed;inset:0;z-index:70;background:rgba(17,17,17,.55);display:flex;align-items:flex-end;justify-content:center;backdrop-filter:blur(6px)}
.tipos{width:100%;max-width:560px;background:var(--fondo);border-radius:22px 22px 0 0;padding:18px 16px calc(var(--abajo) + 18px);animation:entra-abajo .22s ease}
.tipos b{display:block;font-size:19px;letter-spacing:-.01em}.tipos>small{display:block;color:var(--tenue);margin:2px 0 12px}
.tipos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tipo{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:14px;border:1px solid var(--borde);background:var(--superficie-alta);color:var(--texto);font-size:12.5px;font-weight:500;line-height:1.2;text-align:center}
.tipo span{font-size:24px}.tipo:active{background:var(--superficie)}
@media (min-width:600px){.tipos-velo{align-items:center}.tipos{border-radius:22px;padding-bottom:18px}}
/* ── amigos: tarjetas ─────────────────────────────────────────── */
.amigo{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:14px;border:1px solid var(--borde);background:var(--superficie-alta);color:var(--texto);text-align:left;margin-bottom:8px}
.avatar-foto{width:52px;height:52px;border-radius:50%;flex:0 0 auto;overflow:hidden;background:var(--acento);color:#fff;display:grid;place-items:center;font-weight:700;font-size:20px}
.avatar-foto img{width:100%;height:100%;object-fit:cover;display:block}
.amigo-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.amigo-cuerpo b{font-size:15px}.amigo-cuerpo small{color:var(--tenue);font-size:12.5px}.amigo-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.grupo-grado{margin:14px 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tenue)}
/* ── panel analítico ──────────────────────────────────────────── */
.panel-analitica{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.panel-analitica .cab{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}@media (min-width:600px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{padding:12px 14px;border-radius:14px;background:var(--superficie-alta);border:1px solid var(--borde)}.tile b{display:block;font-size:24px;letter-spacing:-.02em;line-height:1.1}.tile small{color:var(--tenue);font-size:12px}
.graf{padding:12px 14px;border-radius:14px;background:var(--superficie-alta);border:1px solid var(--borde)}.graf h4{margin:0 0 8px;font-size:13px;color:var(--tenue);font-weight:500}
.graf svg{width:100%;height:auto;display:block;overflow:visible}
.graf .eje{stroke:var(--borde);stroke-width:1}.graf .linea{fill:none;stroke:var(--acento);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.graf .area{fill:rgba(255,90,61,.10)}
.graf .barra{fill:#333333}.graf .barra.top{fill:var(--acento)}.graf .etq{font-size:11px;fill:var(--tenue)}.graf .val{font-size:11px;fill:var(--texto);font-weight:600}
.graf .punto{fill:var(--acento);stroke:var(--superficie-alta);stroke-width:2}
.graf .tip{position:absolute;pointer-events:none;background:var(--texto);color:var(--fondo);padding:5px 8px;border-radius:8px;font-size:12px;white-space:nowrap;transform:translate(-50%,-120%)}
.graf-cuerpo{position:relative}
.rank{display:flex;flex-direction:column;gap:6px}.rank .r{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;font-size:13.5px}.rank .r small{color:var(--tenue)}
.rank .b{height:8px;border-radius:4px;background:#333333}.rank .r.top .b{background:var(--acento)}
.dos-graf{display:grid;grid-template-columns:1fr;gap:12px}@media (min-width:700px){.dos-graf{grid-template-columns:1fr 1fr}}
.segmento-dias{display:flex;gap:4px;background:var(--superficie);padding:3px;border-radius:999px}.segmento-dias button{padding:6px 12px;border-radius:999px;border:0;background:transparent;color:var(--tenue);font-size:12.5px;font-weight:600}.segmento-dias button.activo{background:var(--superficie-alta);color:var(--texto);box-shadow:0 1px 3px rgba(17,17,17,.12)}

/* ── perfil ──────────────────────────────────────────────────── */
.avatar-mini{width:32px;height:32px;border-radius:50%;border:1px solid var(--borde);background:var(--acento);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center;overflow:hidden;padding:0}
.avatar-mini img{width:100%;height:100%;object-fit:cover}
.perfil-grande{display:flex;gap:14px;align-items:center}.perfil-grande .avatar-foto{width:76px;height:76px;font-size:30px}
.medallas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}@media (min-width:600px){.medallas{grid-template-columns:repeat(5,1fr)}}
.medalla{padding:10px 8px;border-radius:14px;border:1px solid var(--borde);background:var(--superficie-alta);text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px}
.medalla .e{font-size:26px;filter:grayscale(1);opacity:.45}.medalla.si .e{filter:none;opacity:1}.medalla b{font-size:12px;line-height:1.2}.medalla small{font-size:10.5px;color:var(--tenue)}
.medalla .p{width:100%;height:4px;border-radius:2px;background:var(--superficie);overflow:hidden}.medalla .p i{display:block;height:100%;background:var(--acento)}
.medalla.si{border-color:rgba(255,90,61,.45)}
/* ── mistery flotante ────────────────────────────────────────── */
.mistery{position:fixed;bottom:calc(var(--abajo) + var(--alto-nav) + 14px);right:12px;z-index:40;max-width:min(92vw,420px);display:flex;flex-direction:column-reverse;align-items:flex-end;pointer-events:none}
.mistery-tirador{pointer-events:auto;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#111;color:#F5F2EC;box-shadow:0 8px 24px rgba(17,17,17,.25);font-size:13px}
.mistery-tirador span{font-size:16px}.mistery-tirador b{font-weight:600}.mistery-tirador small{color:#bbb;font-size:11.5px}
.mistery.plegada .mistery-tirador b,.mistery.plegada .mistery-tirador small{display:none}.mistery.plegada .mistery-tirador{padding:8px 10px}
.mistery-cuerpo{pointer-events:auto;display:none;margin-bottom:8px;width:min(92vw,420px);max-height:70vh;overflow:auto;background:#111;color:#F5F2EC;border-radius:18px;padding:14px;box-shadow:0 14px 40px rgba(17,17,17,.35);border:1px solid rgba(255,255,255,.1)}
.mistery:not(.plegada) .mistery-cuerpo{display:block;animation:aparece .18s ease}
.mistery-cuerpo h3{margin:0 0 4px;font-size:17px}.mistery-cuerpo h3 span{color:var(--acento)}.mistery-cuerpo p{margin:0 0 8px;color:#bbb;font-size:13px}
.mistery-cuerpo .btn-primario{margin-top:8px}.mistery-cuerpo .btn-secundario{background:transparent;color:#F5F2EC;border-color:rgba(255,255,255,.3)}
.mistery-cuerpo .campo-texto,.mistery-cuerpo .selector{background:#1c1c1c;color:#F5F2EC;border-color:#333}
.mcaja{border:1px solid #2e2e2e;border-radius:14px;padding:10px 12px;margin-top:8px;background:#1a1a1a}.mcaja b{display:block}.mcaja small{color:#aaa}
.mcaja .fila-botones{margin-top:8px}
/* ── compras ─────────────────────────────────────────────────── */
.compra{border:1px solid var(--borde);border-radius:14px;background:var(--superficie-alta);padding:12px 14px;margin-bottom:8px}
.compra .cab{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.compra .cab b{font-size:15px}
.compra .estado-c{font-size:11.5px;padding:3px 8px;border-radius:999px;background:var(--superficie);color:var(--tenue);white-space:nowrap}
.compra .estado-c.acento{background:rgba(255,90,61,.14);color:var(--acento)}
.chat{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto;padding:4px 0}.m{padding:8px 11px;border-radius:12px;max-width:85%;font-size:14px}
.m.vendedor{align-self:flex-end;background:var(--acento);color:#fff}.m.comprador{align-self:flex-start;background:var(--superficie)}.m.sistema{align-self:center;background:transparent;color:var(--tenue);font-size:12.5px;text-align:center}
#mapaRecogida{height:240px;border-radius:14px;margin:8px 0;background:var(--superficie)}

.estado{flex-wrap:nowrap;align-items:center;gap:6px}

.btn-cerrar-mistery{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;color:#F5F2EC;font-size:15px;display:grid;place-items:center;flex:0 0 auto}
.btn-cerrar-mistery:active{background:rgba(255,255,255,.12)}
.mistery-cuerpo .fila-entre h3{margin:0}

/* ── captura guiada ─────────────────────────────────────────── */
.semaforo{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.chip-cond{padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600;border:1px solid transparent}
.chip-cond.ok{background:rgba(74,222,128,.22);color:#9ee8b4;border-color:rgba(74,222,128,.5)}.chip-cond.no{background:rgba(248,113,113,.2);color:#fca5a5;border-color:rgba(248,113,113,.5)}
.instruccion{margin-top:6px;font-size:15px;font-weight:600;color:#fca5a5;min-height:20px}.instruccion.verde{color:#9ee8b4}
.anillo{position:absolute;right:12px;bottom:calc(var(--abajo) + 96px);width:80px;height:80px;z-index:12;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.anillo svg{width:100%;height:100%}.anillo path{fill:none;stroke:rgba(255,255,255,.35);stroke-width:8;stroke-linecap:round}
.anillo path.hecho{stroke:#4ade80}.anillo path.actual{stroke:#FF5A3D}.anillo.listo path.actual{stroke:#9ee8b4}
.anillo circle{fill:rgba(255,255,255,.25)}.anillo circle.hecho{fill:#4ade80}.anillo circle.actual{fill:#FF5A3D}.anillo circle.centro{fill:rgba(255,255,255,.5)}
.anim-forma{position:absolute;left:12px;bottom:calc(var(--abajo) + 96px);width:120px;height:100px;z-index:12;background:rgba(8,8,11,.55);border-radius:14px;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15)}
.anim-forma svg{width:100%;height:100%}.anim-forma .cara{fill:rgba(245,242,236,.85);stroke:#111;stroke-width:1}.anim-forma .cara.top{fill:#fff}.anim-forma .cara.izq{fill:#d9d5cf}.anim-forma .cara.der{fill:#ecebe6}
.anim-forma .borde{fill:none;stroke:#111}.anim-forma .orbita{fill:none;stroke:rgba(255,255,255,.35);stroke-dasharray:3 4}
.anim-forma rect:not(.cara):not(.borde){fill:#FF5A3D}.anim-forma .lente{fill:#111}.anim-forma .giro{fill:none;stroke:#FF5A3D;stroke-width:3}.anim-forma .giro-punta{fill:#FF5A3D}
.anim-forma .lupa{fill:none;stroke:#FF5A3D;stroke-width:3}
.anim-forma g{transition:transform .5s ease}
.btn-voz{right:14px;top:calc(var(--arriba) + 108px);font-size:16px;opacity:.55}.btn-voz.activo{opacity:1}

.descartadas{width:100%;margin-top:6px}.descartadas summary{font-size:12.5px;color:var(--tenue);cursor:pointer}.descartadas figure{margin:0;display:inline-block;width:96px}.descartadas img{opacity:.55;width:96px;height:96px;object-fit:cover;border-radius:10px}.descartadas figcaption{font-size:11px;color:var(--tenue);text-align:center}


/* ══ Arcilla ════════════════════════════════════════════════════════════════
   Diseño de Alejandro en Claude Design (prototipo «Arcilla», 15-9-2026).
   Capa final: se apoya en los componentes de arriba y los reviste. Colores de
   arcilla, Satoshi para el texto y Poppins en mayúsculas para las etiquetas,
   fondo que deriva despacio, tarjetas de 176 px en rejilla de dos, cabeceras
   con un visual de 92 px (globo de puntos en three.js o anillo), captura
   oscura con semáforo en píldoras y transiciones de 200 ms. */
:root{
  --papel:#FFF8F5;--piedra:#E0D3CC;--piedra-2:#C4B2AA;--piedra-3:#9E8981;
  --etiqueta:#7A625A;--tinta-2:#55403A;--tinta:#33241F;--negro:#14100E;
  --oscuro:rgba(51,37,31,.9);--verde-venta:#6FFF6B;
  --curva:cubic-bezier(.2,.8,.2,1);
  --fuente-etiqueta:"Poppins",ui-sans-serif,system-ui,sans-serif;
}
body{background:var(--fondo);color:var(--tinta);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;filter:blur(40px);animation:deriva 34s ease-in-out infinite;
  background:radial-gradient(38% 42% at 18% 22%,#FFD9CC 0%,rgba(255,217,204,0) 62%),radial-gradient(40% 38% at 82% 12%,#E0D3CC 0%,rgba(224,211,204,0) 64%),
  radial-gradient(46% 44% at 70% 78%,#C4B2AA 0%,rgba(196,178,170,0) 66%),radial-gradient(32% 34% at 34% 86%,#FFB7A3 0%,rgba(255,183,163,0) 60%),linear-gradient(160deg,#FFF8F5,#EFE4DE)}
@keyframes deriva{0%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-3%,2%,0) scale(1.13)}100%{transform:translate3d(0,0,0) scale(1.06)}}
@keyframes pulso{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:1;transform:scale(1)}}
@keyframes subir{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
::selection{background:var(--acento);color:#fff}

/* cabeceras de vista: título, etiqueta en mayúsculas y visual de 92 px */
.cabecera-vista.cab-visual{display:flex;align-items:center;gap:14px;min-height:92px;margin-bottom:16px}
.cab-texto{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.cabecera-vista h2{margin:0;font-size:26px;font-weight:700;letter-spacing:.02em;line-height:1.15;color:var(--tinta)}
.sub-vista{font-family:var(--fuente-etiqueta);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--etiqueta);line-height:1.5}
.visual-92{position:relative;width:92px;height:92px;flex:none;border-radius:999px;overflow:hidden;background:radial-gradient(70% 70% at 36% 28%,#FFF8F5,#E7DCD6);box-shadow:0 12px 28px -20px rgba(42,32,28,.75),0 0 0 1px rgba(196,178,170,.55) inset}
.visual-92.sin-fondo{background:none;box-shadow:none;overflow:visible}
.visual-92 dot-globe{display:block}
.visual-pie{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);padding:3px 8px;border-radius:999px;background:rgba(20,16,14,.82);font-family:var(--fuente-etiqueta);font-size:8px;font-weight:700;letter-spacing:.14em;color:#FFF8F5}
.visual-pie:empty{display:none}

/* rejilla de tarjetas de 176 px */
.rejilla-tarjetas{display:grid;grid-template-columns:1fr 1fr;gap:9px;animation:subir .32s var(--curva)}
@media (min-width:700px){.rejilla-tarjetas{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.rejilla-tarjetas{grid-template-columns:repeat(4,1fr)}}
.t176{position:relative;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:20px;height:176px;box-sizing:border-box;overflow:hidden;border:1px solid var(--piedra);text-align:left;font:inherit;color:inherit;cursor:pointer;transition:transform .2s var(--curva),box-shadow .2s var(--curva)}
.t176:active{transform:scale(.98)}
.t176>*{position:relative}
.t176.ancha{grid-column:1/-1;height:auto;min-height:120px}
@media (hover:hover) and (pointer:fine){.t176:hover{transform:translateY(-3px);box-shadow:0 16px 34px -22px rgba(51,36,31,.6)}}

/* cajas: degradado de papel a ámbar, icono con degradado propio */
.caja-tarjeta{background:linear-gradient(180deg,rgba(255,248,245,.9),#C57524)}
.caja-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.icono-grad{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 8px 18px -12px rgba(20,16,14,.9);flex:none}
.icono-grad svg{width:23px;height:23px;stroke:#FFF8F5;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-lapiz{width:28px;height:28px;border-radius:9px;border:1px solid var(--piedra);background:rgba(255,248,245,.9);display:grid;place-items:center;padding:0;cursor:pointer;transition:transform .2s var(--curva)}
.btn-lapiz svg{width:14px;height:14px;stroke:var(--tinta);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.caja-titulo{display:flex;flex-direction:column;gap:3px}
.caja-titulo b{font-size:15px;letter-spacing:.03em;line-height:1.2;color:var(--tinta)}
.caja-ubi,.caja-ubi-fija{width:100%;font-family:var(--fuente-etiqueta);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--etiqueta);background:transparent;border:0;border-bottom:1px dashed var(--piedra-2);padding:3px 0;outline:none;border-radius:0;-webkit-user-select:text;user-select:text}
.caja-ubi:focus{border-bottom-color:var(--negro);color:var(--negro)}
.caja-ubi::placeholder{color:var(--etiqueta);opacity:.8}
.caja-pie{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto;font-family:var(--fuente-etiqueta);color:#fff;font-size:11px}
.caja-pie b{font-weight:700;letter-spacing:.04em}.caja-pie span{font-size:10px;letter-spacing:.04em}
.caja-pie .caja-pend{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:#33251F;color:#fff}

/* tarjetas oscuras: ventas por categoría */
.t-oscura{background:var(--oscuro);color:#FFF8F5;box-shadow:0 18px 40px -30px rgba(0,0,0,.15)}
.icono-claro{width:38px;height:38px;border-radius:12px;background:linear-gradient(150deg,#E0D3CC,#C4B2AA);display:grid;place-items:center;flex:none}
.icono-claro svg{width:20px;height:20px;stroke:rgba(20,16,14,.65);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.venta-cat .nombre{font-size:13px;letter-spacing:.02em;line-height:1.25;color:#fff}
.venta-n{font-family:var(--fuente-etiqueta);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--verde-venta)}
.venta-total{font-size:19px;font-weight:700;letter-spacing:.01em;margin-top:auto;color:#fff}
.venta-cuota{font-family:var(--fuente-etiqueta);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.anillo-ventas{position:relative;width:92px;height:92px}
.anillo-ventas svg{width:92px;height:92px;transform:rotate(-90deg)}
.anillo-ventas circle{transition:stroke .2s var(--curva)}
.anillo-ventas .centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.anillo-ventas .centro b{font-size:11px;letter-spacing:.01em;line-height:1}
.anillo-ventas .centro span{font-family:var(--fuente-etiqueta);font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--etiqueta)}

/* amigos: tarjeta oscura con el degradado de cada persona */
.amigo-t{gap:7px;color:#FBFBFB;box-shadow:0 18px 40px -30px rgba(20,16,14,.15)}
.amigo-av{align-self:flex-end;width:64px;height:64px;flex:none;border-radius:999px;display:grid;place-items:center;font-family:var(--fuente-etiqueta);font-weight:700;font-size:24px;color:#F2E9E4;overflow:hidden;box-shadow:0 10px 22px -12px rgba(20,16,14,.85)}
.amigo-av img{width:100%;height:100%;object-fit:cover;display:block}
.amigo-n{display:flex;flex-direction:column;gap:2px;min-width:0}
.amigo-n b{font-size:14px;letter-spacing:.02em;line-height:1.2;color:#FBFBFB;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amigo-n small{font-family:var(--fuente-etiqueta);font-size:11px;color:#D7B8A6;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amigo-ciudad{display:flex;align-items:center;gap:6px;margin-top:auto;font-family:var(--fuente-etiqueta);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#FDEAE4;white-space:nowrap;overflow:hidden}
.amigo-ciudad svg{width:13px;height:13px;flex:none;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.amigo-venta{font-family:var(--fuente-etiqueta);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(222,168,150,.85)}

/* medallas: logradas en cristal oscuro, pendientes en cristal claro punteado */
.medalla-t{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:20px;height:176px;box-sizing:border-box;overflow:hidden;transition:transform .2s var(--curva)}
@media (hover:hover) and (pointer:fine){.medalla-t:hover{transform:translateY(-3px)}}
.medalla-t.lograda{background:rgba(51,37,31,.93);backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,248,245,.14);box-shadow:0 18px 40px -30px rgba(20,16,14,.9);color:#FFF8F5}
.medalla-t.pendiente{background:rgba(255,255,255,.42);backdrop-filter:blur(20px) saturate(1.15);border:1px dashed rgba(122,98,90,.45);box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 16px 36px -30px rgba(42,32,28,.7)}
.medalla-ico{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:none}
.medalla-ico svg{width:21px;height:21px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lograda .medalla-ico{background:rgba(255,248,245,.92)}.lograda .medalla-ico svg{stroke:var(--negro)}
.pendiente .medalla-ico{background:rgba(231,220,214,.75)}.pendiente .medalla-ico svg{stroke:var(--etiqueta)}
.medalla-t .txt{display:flex;flex-direction:column;gap:3px}
.medalla-t b{font-size:14px;letter-spacing:.02em;line-height:1.2}
.medalla-t small{font-family:var(--fuente-etiqueta);font-size:11px;line-height:1.35}
.lograda small{color:#D5C7C0}.pendiente b{color:var(--tinta)}.pendiente small{color:var(--tinta-2)}
.medalla-fecha{font-family:var(--fuente-etiqueta);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:auto}
.lograda .medalla-fecha{color:#FFF8F5}.pendiente .medalla-fecha{color:var(--etiqueta)}
.medalla-t .p{height:4px;border-radius:2px;background:rgba(122,98,90,.2);overflow:hidden;margin-top:-4px}.medalla-t .p i{display:block;height:100%;background:var(--acento)}

/* filas de lista y volver */
.fila-arcilla{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:18px;background:rgba(255,248,245,.9);border:1px solid var(--piedra);width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:transform .2s var(--curva);margin-bottom:9px;animation:subir .32s var(--curva) both}
.fila-arcilla .txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.fila-arcilla b{font-size:14px;letter-spacing:.02em;line-height:1.25}
.fila-arcilla small{font-family:var(--fuente-etiqueta);font-size:11px;letter-spacing:.06em;color:var(--etiqueta)}
.fila-arcilla .valor{font-family:var(--fuente-etiqueta);font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--tinta);white-space:nowrap}
.fila-arcilla .chev{width:18px;height:18px;flex:none;stroke:var(--piedra-3);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.fila-arcilla:hover{transform:translateY(-2px)}}
.pill-volver{border:1px solid var(--piedra-2);background:rgba(255,248,245,.9);color:var(--tinta);font-family:var(--fuente-etiqueta);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:9px 15px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;margin:0 0 12px;cursor:pointer;transition:transform .2s var(--curva)}
.pill-volver svg{width:14px;height:14px;fill:none;stroke:var(--tinta);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.pill-volver:hover{transform:translateX(-2px)}}

/* segmentos, pestañas y filtros: píldoras; la activa, negra */
.segmento-inv{display:inline-flex;gap:6px;padding:5px;border-radius:999px;background:rgba(255,255,255,.55);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.85)}
.segmento-inv button{border:0;cursor:pointer;font-family:var(--fuente-etiqueta);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:8px 16px;border-radius:999px;background:transparent;color:var(--etiqueta);transition:color .2s var(--curva),background .2s var(--curva)}
.segmento-inv button.activo{background:var(--negro);color:var(--papel)}
.pestana,.filtro{font-family:var(--fuente-etiqueta);font-weight:600;letter-spacing:.04em;border-color:var(--piedra);background:rgba(255,248,245,.7);color:var(--tinta-2);border-radius:999px}
.pestana.activa,.filtro.activo{background:var(--negro);border-color:var(--negro);color:var(--papel)}

/* botones */
.btn-primario{border-radius:999px;font-weight:700;letter-spacing:.06em;box-shadow:0 12px 26px -14px rgba(255,90,61,.95);transition:transform .2s var(--curva),filter .12s ease}
.btn-secundario{border-radius:999px;border:1px solid var(--piedra-2);background:rgba(255,255,255,.7);color:var(--tinta);font-weight:700;letter-spacing:.04em;transition:transform .2s var(--curva)}
@media (hover:hover) and (pointer:fine){.btn-primario:hover,.btn-secundario:hover{transform:translateY(-2px)}}

/* superficies */
.tarjeta,.bloque,.compra,.graf,.tile,.fila,.columna,.ficha-venta{border-color:var(--piedra)}
.tarjeta{background:rgba(255,248,245,.86);border-radius:20px}
.bloque{border-radius:22px}
.hoja{background:var(--papel);border-color:var(--piedra)}
.nota{border-radius:18px}

/* barra superior y navegación */
.barra{background:linear-gradient(to bottom,rgba(242,233,228,.94),rgba(242,233,228,0))}
.chip,.pill{font-family:var(--fuente-etiqueta);font-weight:700;letter-spacing:.06em}
.nav{background:var(--papel);border-top:1px solid var(--piedra);backdrop-filter:none}
.nav-btn{color:var(--piedra-3);font-family:var(--fuente-etiqueta);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;gap:4px;transition:color .2s var(--curva),transform .2s var(--curva)}
.nav-btn .ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-btn.activa{color:var(--negro);transform:translateY(-2px)}
.nav-btn.activa .ico{stroke-width:2.4}
@media (hover:hover) and (pointer:fine){.nav-btn:not(.activa):hover{color:var(--tinta-2)}}

/* ── captura, oscura ─────────────────────────────────────────────── */
body:has(#vistaCapturar.activa) .barra{background:linear-gradient(to bottom,rgba(20,16,14,.9),rgba(20,16,14,0))}
#vistaCapturar{background:radial-gradient(70% 60% at 50% 45%,#2A2320,#14100E);color:#FFF8F5}
#vistaCapturar .reposo h1{color:#FFF8F5;font-size:26px;letter-spacing:.02em}
#vistaCapturar .reposo-caja,#vistaCapturar .reposo-pista{color:rgba(255,248,245,.6)}
#vistaCapturar .reposo-cifras>div{background:rgba(255,248,245,.07);border-color:rgba(255,248,245,.14);color:#FFF8F5}
#vistaCapturar .reposo-cifras span{color:rgba(255,248,245,.6);font-family:var(--fuente-etiqueta);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
#vistaCapturar .btn-secundario{background:transparent;color:#FFF8F5;border-color:rgba(255,248,245,.3)}
#vistaCapturar .balance,#vistaCapturar .actividad,#vistaCapturar .vigilancia{background:rgba(255,248,245,.07);border-color:rgba(255,248,245,.14);color:rgba(255,248,245,.85)}
#vistaCapturar .actividad b{color:var(--acento)}
.visor{background:radial-gradient(70% 60% at 50% 45%,#2A2320,#14100E)}
.controles{background:var(--negro);border-top:0;padding:16px 20px calc(var(--abajo) + var(--alto-nav) + 14px)}
.modos{background:rgba(255,248,245,.06);border:1px solid rgba(255,248,245,.12)}
.modo{color:rgba(255,248,245,.6)}
.modo.activo{background:rgba(255,248,245,.92);color:var(--negro)}
.modo b{font-family:var(--fuente-etiqueta);letter-spacing:.06em}
.fila-disparo{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.btn-saltar-paso,.btn-fotos{border:0;background:transparent;cursor:pointer;color:rgba(255,248,245,.7);font-family:var(--fuente-etiqueta);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:10px 0;transition:color .2s var(--curva)}
.btn-saltar-paso{justify-self:start;text-align:left}
.btn-fotos{justify-self:end;text-align:right}
.btn-fotos:disabled{color:rgba(255,248,245,.35);cursor:default}
.btn-fotos.listo{color:#FFF8F5}
.btn-fotos.listo::after{content:" ✓";color:var(--acento)}
.disparo{width:74px;height:74px;border-radius:999px;background:var(--acento);border:0;padding:0;box-shadow:0 0 0 6px rgba(255,90,61,.18),0 14px 30px -12px rgba(255,90,61,.9);display:grid;place-items:center;transition:transform .12s ease-out}
.disparo svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.disparo:active{transform:scale(.9)}
.disparo:disabled{opacity:.6}
.fila-secundaria{color:rgba(255,248,245,.6)}
.fila-secundaria .pista{font-family:var(--fuente-etiqueta);font-size:11px;letter-spacing:.04em}
.fila-secundaria .btn-texto{color:rgba(255,248,245,.75)}
.fila-secundaria .btn-redondo{background:rgba(255,248,245,.08);border-color:rgba(255,248,245,.18);color:#FFF8F5}

/* semáforo en píldoras arriba; marco punteado con el paso; pista abajo */
.semaforo-top{position:absolute;left:14px;right:14px;top:calc(var(--arriba) + 80px);z-index:13;display:flex;gap:4px;flex-wrap:nowrap;justify-content:flex-start;overflow:hidden;margin:0;pointer-events:none}
.chip-cond{display:inline-flex;flex:none;align-items:center;gap:5px;padding:7px 9px;border-radius:999px;font-family:var(--fuente-etiqueta);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:0;white-space:nowrap;transition:background .2s var(--curva),color .2s var(--curva)}
.chip-cond svg{width:14px;height:14px;flex:none;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.chip-cond.ok{background:rgba(255,248,245,.92);color:var(--negro);border:0}.chip-cond.ok svg{stroke:var(--negro)}
.chip-cond.no{background:rgba(90,80,74,.7);color:rgba(255,248,245,.78);border:0}.chip-cond.no svg{stroke:rgba(255,248,245,.8)}
.guia{position:absolute;left:50%;right:auto;top:50%;bottom:auto;width:min(82%,44vh);height:auto;transform:translate(-50%,-50%);aspect-ratio:1.1;max-height:none;margin:0;z-index:11;border-radius:18px;border:2px dashed rgba(255,248,245,.35);background:none;backdrop-filter:none;box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:14px;pointer-events:none;transition:border-color .2s var(--curva)}
.guia.verde{border-color:rgba(158,232,180,.75)}
.guia-paso{font-family:var(--fuente-etiqueta);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,248,245,.6);font-weight:700}
.guia-sub{font-size:12px;color:rgba(255,248,245,.45);max-width:28ch;margin:0}
.instruccion{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);z-index:13;margin:0;padding:9px 16px;border-radius:999px;background:rgba(20,16,14,.72);backdrop-filter:blur(10px);color:#FFF8F5;font-family:var(--fuente-etiqueta);font-size:13px;font-weight:700;letter-spacing:.03em;white-space:nowrap;min-height:0;max-width:calc(100% - 180px);overflow:hidden;text-overflow:ellipsis}
.instruccion:empty{display:none}
.instruccion.verde{color:#9ee8b4}
.anim-forma{left:14px;bottom:14px;width:54px;height:54px;border-radius:16px;background:rgba(255,248,245,.1);border:1px solid rgba(255,248,245,.22);backdrop-filter:blur(8px);cursor:pointer;transition:width .25s var(--curva),height .25s var(--curva),background .2s var(--curva)}
.anim-forma.grande{width:150px;height:125px;background:rgba(20,16,14,.78)}
.anillo{right:14px;bottom:14px;width:76px;height:76px;filter:none}
.anillo svg{position:absolute;inset:0;width:100%;height:100%}
.anillo circle.pista{fill:none;stroke:rgba(255,248,245,.18);stroke-width:2}
.anillo circle.prog{fill:none;stroke:var(--acento);stroke-width:2.5;stroke-linecap:round;animation:pulso 2s ease-in-out infinite;transform-origin:center}
.anillo.listo circle.prog{stroke:#9ee8b4;animation:none}
.anillo-int{position:absolute;left:12px;top:12px;width:52px;height:52px;box-sizing:border-box;border-radius:999px;border:2px solid rgba(255,248,245,.3);display:grid;place-items:center;font-family:var(--fuente-etiqueta);font-size:10px;font-weight:700;letter-spacing:.08em;color:#FFF8F5}
.btn-salir,.btn-voz{background:rgba(20,16,14,.55);border-color:rgba(255,248,245,.22)}
.btn-salir{top:calc(var(--arriba) + 124px);right:14px}.btn-voz{top:calc(var(--arriba) + 172px);right:14px}

@media (prefers-reduced-motion:reduce){body::before,.anillo circle.prog{animation:none}.rejilla-tarjetas,.fila-arcilla{animation:none}}

/* captura compacta como en el diseño: abajo sólo saltar · disparar · fotos */
.btn-nota{top:calc(var(--arriba) + 220px);right:14px}.btn-repetir{top:calc(var(--arriba) + 268px);right:14px}
.btn-nota,.btn-repetir{background:rgba(20,16,14,.55);border-color:rgba(255,248,245,.22);color:#FFF8F5}
.btn-flotante.grabando{background:var(--acento);border-color:var(--acento)}
#reposo .modos{width:100%;max-width:360px;margin:0 auto 14px;background:rgba(255,248,245,.06);border:1px solid rgba(255,248,245,.12)}
/* Mientras la cámara está abierta el tirador del Mistery taparía el contador de fotos. */
body:has(#captura:not(.oculto)) .mistery{display:none}

/* ── captura a pantalla completa, calcada del diseño Arcilla ─────────
   La captura es una capa fija entre el borde de arriba y la barra de
   pestañas: el visor ocupa todo, abajo la fila saltar · disparar · fotos.
   Sin la barra de caja encima; los chips del semáforo van arriba del todo. */
.nav{box-sizing:border-box;height:calc(var(--alto-nav) + var(--abajo))}
:root{--alto-nav:73px}
.captura{position:fixed;left:0;right:0;top:0;bottom:calc(var(--alto-nav) + var(--abajo));z-index:25;display:flex;flex-direction:column}
body:has(#captura:not(.oculto)) .barra{display:none}
.captura .pasos,.captura .tiras{display:none}
.semaforo-top{top:calc(var(--arriba) + 14px)}
.herramientas{position:absolute;top:calc(var(--arriba) + 58px);left:14px;right:14px;z-index:13;display:flex;justify-content:flex-end;gap:8px;pointer-events:none}
.herramientas .btn-flotante{position:static;width:38px;height:38px;pointer-events:auto;background:rgba(20,16,14,.55);border:1px solid rgba(255,248,245,.18);color:#FFF8F5;font-size:15px}
.herramientas .btn-salir{margin-right:auto}
.herramientas .ico{width:18px;height:18px}
.controles{padding:18px 20px 22px}
body:has(#captura:not(.oculto)) .aviso{bottom:calc(var(--abajo) + var(--alto-nav) + 126px)}
/* Tu cara en Perfil: el mismo círculo que en el marcador del equipo, algo mayor. */
#yoCara{width:44px;height:44px;flex:none;border-radius:999px;overflow:hidden;display:grid;place-items:center;background:var(--piedra);color:var(--tinta);font-weight:700}
#yoCara img{width:100%;height:100%;object-fit:cover;display:block}
.bloque .fila-autor:has(#yoCara){display:flex;align-items:center;gap:12px}