/* ═══════════════════════════════════════════════════════════════════
   LOOPED · Mercado — piel "marketplace" · Fase Dos, agosto 2026

   Referencias: Airbnb / Portalinmobiliario / Metaloop.
   Blanco, radios generosos, sombras suaves, pins de píldora sobre un
   mapa claro. Los 4 colores-dato validados no se tocan; todo lo demás
   es neutro y cálido. Inter para la interfaz, Plex Mono para cifras.
   ═══════════════════════════════════════════════════════════════════ */

@font-face{font-family:Inter;src:url(fonts/inter-400.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-500.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-600.woff2)format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-700.woff2)format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-vf.woff2)format('woff2-variations');font-weight:100 900;font-display:swap}
@font-face{font-family:PlexMono;src:url(fonts/mono-400.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:PlexMono;src:url(fonts/mono-600.woff2)format('woff2');font-weight:600;font-display:swap}

:root{
  --fondo:#FFFFFF;
  --nube:#F7F7F8;          /* paneles suaves */
  --niebla:#F1F2F0;        /* hover, chips apagados */
  --borde:#E8E8E6;
  --borde-2:#DDDDDA;
  --texto:#1F2421;
  --texto-2:#6B7370;
  --texto-3:#9AA19D;

  /* DATO — fijos, validados daltonismo */
  --tengo:#2a78d6;
  --busco:#eb6834;
  --ok:#1baf7a;
  --alerta:#eda100;
  --tengo-bg:#EDF4FC;
  --busco-bg:#FDF1EA;
  --ok-bg:#E9F8F1;
  --alerta-bg:#FDF6E3;

  --r:14px;                 /* radio de card */
  --r-chico:10px;
  --sombra:0 1px 2px rgba(31,36,33,.05),0 6px 20px rgba(31,36,33,.07);
  --sombra-up:0 2px 4px rgba(31,36,33,.06),0 12px 32px rgba(31,36,33,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--fondo);color:var(--texto);
  font:400 14.5px/1.55 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;overflow:hidden;
  letter-spacing:-.008em;
}
:where(button,select,input,a):focus-visible{outline:2px solid var(--tengo);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}

/* ─────── header ─────── */
.senal{
  flex:0 0 64px;display:flex;align-items:center;gap:26px;padding:0 22px;
  background:var(--fondo);border-bottom:1px solid var(--borde);
}
.senal-marca{display:flex;align-items:center;color:var(--texto)}
.senal-marca svg{display:block;height:27px;width:auto}

.senal-marca b{font-family:Archivo,Inter,sans-serif;font-weight:640;font-size:16.5px;letter-spacing:.055em}
.senal-marca i{font:500 12px/1 Inter,sans-serif;font-style:normal;color:var(--texto-3);letter-spacing:.01em}
.senal-tabs{display:flex;gap:4px;background:var(--niebla);border-radius:100px;padding:4px}
.stab{
  appearance:none;background:none;border:0;cursor:pointer;border-radius:100px;
  color:var(--texto-2);font:600 13.5px/1 Inter,sans-serif;padding:9px 18px;
  transition:color .15s,background .15s,box-shadow .15s;letter-spacing:-.01em;
}
.stab:hover{color:var(--texto)}
.stab[aria-selected="true"]{background:var(--fondo);color:var(--texto);box-shadow:0 1px 3px rgba(31,36,33,.12)}
.senal-cta{
  margin-left:auto;appearance:none;cursor:pointer;
  background:var(--texto);color:#fff;border:0;border-radius:100px;
  font:600 13.5px/1 Inter,sans-serif;padding:11px 18px;letter-spacing:-.01em;
  transition:transform .15s,box-shadow .15s;box-shadow:var(--sombra);
}
.senal-cta:hover{transform:translateY(-1px);box-shadow:var(--sombra-up)}

/* ─────── resumen del patio (claro, píldoras) ─────── */
.pizarra{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  background:var(--fondo);padding:10px 22px 2px;overflow:hidden;
}
.pz-rotulo{
  flex:0 0 auto;font:600 11px/1 Inter,sans-serif;letter-spacing:.09em;color:var(--texto-3);
  text-transform:uppercase;
}
.pz-viewport{flex:1 1 auto;overflow-x:auto;scrollbar-width:none}
.pz-viewport::-webkit-scrollbar{display:none}
.pz-cinta{display:inline-flex;gap:6px;white-space:nowrap}
.pz-cinta > *:nth-child(n+15){display:none}   /* sin duplicado del marquee */
.pz-seg{
  appearance:none;cursor:pointer;background:var(--nube);border:1px solid var(--borde);
  border-radius:100px;color:var(--texto-2);
  font:500 12.5px/1 Inter,sans-serif;padding:8px 13px;white-space:nowrap;
  transition:border-color .15s,background .15s,color .15s;
}
.pz-seg b{font:600 12px/1 PlexMono,monospace;color:var(--texto)}
.pz-seg .up{color:#0E8A5F;font-weight:600}
.pz-seg .dn{color:#C2521B;font-weight:600}
.pz-seg:hover{border-color:var(--borde-2);background:var(--niebla)}
.pz-seg.on{background:var(--texto);border-color:var(--texto);color:#fff}
.pz-seg.on b,.pz-seg.on .up,.pz-seg.on .dn{color:#fff}
.pz-sep{display:none}

/* ─────── banda demo, discreta ─────── */
.demo-banda{
  flex:0 0 auto;margin:10px 22px 0;border-radius:var(--r-chico);
  background:var(--alerta-bg);border:1px solid #F0DFAE;color:#7A5C00;
  font:500 12px/1.4 Inter,sans-serif;padding:8px 14px;
}

/* ─────── riel de filtros ─────── */
.riel{
  flex:0 0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 22px;background:var(--fondo);
}
.riel-g{display:flex;align-items:center;gap:7px}
.riel-der{margin-left:auto}
.chip{
  appearance:none;cursor:pointer;background:var(--fondo);border:1px solid var(--borde-2);
  border-radius:100px;padding:9px 14px;font:600 13px/1 Inter,sans-serif;letter-spacing:-.01em;
  color:var(--texto);display:flex;align-items:center;gap:8px;
  transition:border-color .15s,background .15s,opacity .15s,box-shadow .15s;
}
.chip:hover{border-color:var(--texto-3);box-shadow:var(--sombra)}
.chip:not(.on){opacity:.45}
.chip b{font:600 12px/1 PlexMono,monospace;color:var(--texto-2)}
.cf{width:9px;height:9px;border-radius:50%}
.cf-tengo{background:var(--tengo)}
.cf-busco{background:var(--busco)}
.chip-resina{padding:8px 12px}
.chip-resina .rn{font:600 13px/1 PlexMono,monospace}
.chip-resina .rt{font:600 10.5px/1 Inter,sans-serif;color:var(--texto-3);letter-spacing:.02em}
.riel-hist{display:flex;align-items:center;gap:8px;font:500 13px/1 Inter,sans-serif;color:var(--texto-2);cursor:pointer}
.riel-hist input{accent-color:var(--texto);width:15px;height:15px}
#buscador{
  background:var(--nube);border:1px solid var(--borde);border-radius:100px;padding:10px 16px;
  font:400 13.5px/1 Inter,sans-serif;min-width:250px;transition:border-color .15s,background .15s;
}
#buscador:focus{background:var(--fondo);border-color:var(--texto-3);outline:none}

/* ─────── cuerpo ─────── */
.cuerpo{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.zona{flex:1 1 auto;min-height:0;display:flex;gap:0}
.lista{
  flex:0 0 396px;overflow-y:auto;padding:6px 16px 40px 22px;background:var(--fondo);
}
@media (max-width:1100px){.lista{flex-basis:340px}}
.patio{position:relative;flex:1 1 auto;min-width:0;padding:0 16px 16px 4px}
#mapa{position:absolute;inset:0 16px 16px 4px;background:#E9EDE6;border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra)}
.maplibregl-ctrl-attrib{display:none!important}
.maplibregl-ctrl-group{border-radius:12px!important;box-shadow:var(--sombra)!important;border:1px solid var(--borde)!important;overflow:hidden}

/* ─────── card de aviso ─────── */
.etiqueta{
  position:relative;background:var(--fondo);border:1px solid var(--borde);border-radius:var(--r);
  padding:16px 16px 14px;margin-bottom:12px;cursor:pointer;
  box-shadow:var(--sombra);transition:transform .16s,box-shadow .16s,border-color .16s;
}
.etiqueta:hover{transform:translateY(-2px);box-shadow:var(--sombra-up);border-color:var(--borde-2)}
.ojal{display:none}
.et-cab{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;padding-right:56px}
.et-tipo{
  display:inline-block;font:700 10.5px/1 Inter,sans-serif;letter-spacing:.07em;
  padding:5px 9px;border-radius:100px;margin-bottom:7px;
}
.t-tengo .et-tipo{background:var(--tengo-bg);color:#1D5AA6}
.t-busco .et-tipo{background:var(--busco-bg);color:#B44A12}
.et-nombre{font:600 15.5px/1.3 Inter,sans-serif;letter-spacing:-.015em}
.et-resina{
  position:absolute;right:16px;top:16px;width:46px;height:46px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--nube);border:1.5px solid var(--borde-2);
}
.t-tengo .et-resina{background:var(--tengo-bg);border-color:#C4DBF4}
.t-busco .et-resina{background:var(--busco-bg);border-color:#F4D2BE}
.et-resina b{font:600 17px/1 PlexMono,monospace}
.et-resina i{font:600 8.5px/1 Inter,sans-serif;font-style:normal;color:var(--texto-2);letter-spacing:.03em;margin-top:1px}
.et-datos{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 10px;padding-right:56px}
.et-dato{font:400 13px/1.45 Inter,sans-serif;color:var(--texto-2)}
.et-dato b{font:600 13px/1 PlexMono,monospace;color:var(--texto)}
.et-pie{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--niebla);padding-top:10px}
.et-meta{font:400 12px/1 Inter,sans-serif;color:var(--texto-3)}
.et-ver{font:600 12.5px/1 Inter,sans-serif;color:var(--texto);letter-spacing:-.01em}
.etiqueta:hover .et-ver{text-decoration:underline}

.lista-vacia{padding:30px 8px;color:var(--texto-2);font-size:13.5px;line-height:1.55}

/* ─────── tabla historial ─────── */
.tabla{width:100%;border-collapse:separate;border-spacing:0;background:var(--fondo);
  border:1px solid var(--borde);border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra)}
.tabla th{
  font:600 10.5px/1 Inter,sans-serif;letter-spacing:.07em;text-transform:uppercase;
  color:var(--texto-3);text-align:left;padding:12px 14px;border-bottom:1px solid var(--borde);
  position:sticky;top:0;background:var(--fondo);z-index:2;
}
.tabla th.num,.tabla td.num{text-align:right}
.tabla td{padding:0;border-bottom:1px solid var(--niebla);font-size:13.5px}
.tabla tr:last-child td{border-bottom:0}
.tabla tbody tr{cursor:pointer}
.tabla tbody tr:hover{background:var(--nube)}
.tabla .td-i{padding:10px 14px}
.tabla .t-nom{font:600 13.5px/1.3 Inter,sans-serif;letter-spacing:-.01em}
.tabla .t-rut{font:400 11px/1.5 PlexMono,monospace;color:var(--texto-3)}
.tabla .t-com{font:400 11.5px/1.3 Inter,sans-serif;color:var(--texto-3)}
.tabla td.num{font:600 13px/1 PlexMono,monospace;padding:10px 14px}

/* ─────── leyenda + atribución ─────── */
.leyenda{
  position:absolute;left:20px;bottom:92px;z-index:5;display:flex;gap:14px;align-items:center;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border:1px solid var(--borde);
  border-radius:100px;padding:9px 16px;box-shadow:var(--sombra);
  font:600 12px/1 Inter,sans-serif;color:var(--texto-2);letter-spacing:-.01em;
}
.leyenda span{display:flex;align-items:center;gap:7px}
.lg{width:14px;height:14px;display:grid;place-items:center;font:600 8px/1 PlexMono,monospace;color:#fff;border-radius:50%}
.lg-tengo{background:var(--tengo)}
.lg-busco{background:var(--busco);color:#fff;border:0;transform:none;width:14px;height:14px;font-size:8px}
.lg-hist{background:#fff;border:2px solid var(--texto-3);border-radius:50%;width:11px;height:11px}
.lg-flujo{display:inline-block;width:22px;height:0;border-top:3px dashed var(--alerta);border-radius:2px}
.atrib{
  position:absolute;right:26px;bottom:22px;z-index:5;
  font:400 10px/1 Inter,sans-serif;color:var(--texto-3);pointer-events:none;
  background:rgba(255,255,255,.8);padding:3px 8px;border-radius:100px;
}

/* ─────── pins de píldora (estilo Airbnb) ─────── */
.mk{cursor:pointer}
.mk-placa{
  display:flex;align-items:center;gap:6px;
  background:#fff;border:1.5px solid var(--borde-2);border-radius:100px;
  padding:6px 11px 6px 7px;box-shadow:0 1px 2px rgba(31,36,33,.14),0 4px 12px rgba(31,36,33,.14);
  font:600 12px/1 Inter,sans-serif;color:var(--texto);white-space:nowrap;
  transition:transform .14s,box-shadow .14s;transform-origin:center bottom;
}
.mk-placa::before{
  content:"";width:18px;height:18px;border-radius:50%;flex:0 0 auto;
  background:var(--tengo);display:grid;place-items:center;
}
.mk-placa{position:relative}
.mk-placa span{
  position:absolute;left:7px;top:50%;transform:translateY(-50%);
  width:18px;text-align:center;font:600 10px/18px PlexMono,monospace;color:#fff;
}
.mk-placa::after{content:attr(data-txt);font:600 12px/1 Inter,sans-serif}
.mk-busco .mk-placa{transform:none;border-color:var(--borde-2)}
.mk-busco .mk-placa::before{background:var(--busco)}
.mk-busco .mk-placa span{transform:translateY(-50%)}
.mk:hover .mk-placa,.mk.on .mk-placa{transform:scale(1.07);box-shadow:var(--sombra-up);border-color:var(--texto-3);z-index:10}
.mk-busco:hover .mk-placa,.mk-busco.on .mk-placa{transform:scale(1.07)}
.mk.tenue{opacity:.3;pointer-events:none}

/* popup */
.maplibregl-popup-content{padding:0!important;background:transparent!important;box-shadow:none!important}
.maplibregl-popup-tip{display:none!important}
.pop{
  background:#fff;border:1px solid var(--borde);border-radius:12px;
  box-shadow:var(--sombra-up);padding:12px 14px;min-width:200px;
}
.pop::before{display:none}
.pop b{display:block;font:600 13.5px/1.3 Inter,sans-serif;margin-bottom:5px;letter-spacing:-.01em}
.pop .p-fila{display:flex;justify-content:space-between;gap:12px;font:400 12px/1.6 Inter,sans-serif;color:var(--texto-2)}
.pop .p-fila b{display:inline;font:600 12px/1 PlexMono,monospace;color:var(--texto);margin:0}
.pop .p-ver{margin-top:8px;font:600 12px/1 Inter,sans-serif;color:var(--tengo);cursor:pointer}
.pop.t-busco .p-ver{color:#B44A12}
.pop .p-ver:hover{text-decoration:underline}

/* ─────── ficha-bisagra ─────── */
.velo{position:fixed;inset:0;z-index:30;background:rgba(31,36,33,.32);backdrop-filter:blur(2px)}
.ficha{
  position:fixed;top:12px;right:12px;bottom:12px;z-index:31;width:min(460px,94vw);
  background:var(--fondo);border-radius:18px;border:1px solid var(--borde);
  box-shadow:0 24px 70px rgba(31,36,33,.28);
  animation:ficha-entra .24s cubic-bezier(.2,.8,.3,1);
}
@keyframes ficha-entra{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ficha{animation:none}}
.ficha-scroll{height:100%;overflow-y:auto;padding:20px 20px 46px;border-radius:18px}

.f-cerrar{
  position:absolute;top:14px;right:16px;appearance:none;cursor:pointer;z-index:2;
  background:var(--nube);border:0;border-radius:50%;width:34px;height:34px;
  font:600 14px/1 Inter,sans-serif;color:var(--texto-2);transition:background .15s;
}
.f-cerrar:hover{background:var(--niebla);color:var(--texto)}
.f-etiqueta{position:relative;padding:4px 40px 18px 2px;border-bottom:1px solid var(--niebla);margin-bottom:16px}
.f-etiqueta .ojal{display:none}
.f-nombre{font:700 20px/1.2 Inter,sans-serif;letter-spacing:-.02em}
.f-rut{font:400 12px/1.7 PlexMono,monospace;color:var(--texto-3);margin-top:4px}
.f-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.f-chip{font:600 10.5px/1 Inter,sans-serif;letter-spacing:.03em;background:var(--nube);border-radius:100px;padding:6px 10px;color:var(--texto-2)}
.f-chip.ok{background:var(--ok-bg);color:#0A7350}
.f-chip.sim{background:var(--alerta-bg);border:1px solid #F0DFAE;color:#7A5C00}
.f-chip.inter{background:#fff;border:1.5px solid var(--texto-3);color:var(--texto-2)}
.rol-inter{
  display:inline-block;vertical-align:1px;margin-left:6px;padding:2px 6px;border-radius:100px;
  font:600 8px/1 PlexMono,monospace;letter-spacing:.05em;color:var(--texto-2);
  background:#fff;border:1.2px solid var(--texto-3);
}
.lg-intermedio{
  background:#F8F9F5;border:2px solid var(--texto-3);border-radius:50%;width:9px;height:9px;
  box-shadow:0 0 0 2px #F8F9F5,0 0 0 3.5px var(--texto-3);margin:0 3px;
}

.f-sec{margin:0 0 12px;background:var(--nube);border-radius:var(--r);padding:16px;position:relative}
.f-sec-num{
  font:600 10.5px/1 Inter,sans-serif;letter-spacing:.08em;color:var(--texto-3);
  display:block;margin-bottom:10px;text-transform:uppercase;
}
.f-sec-num span{color:#0A7350!important}
.f-aviso{background:var(--fondo);border-radius:var(--r-chico);padding:13px 14px;border:1px solid var(--borde)}
.f-aviso.t-busco{border-color:#F4D2BE}
.f-aviso.t-tengo{border-color:#C4DBF4}
.f-aviso .fa-tit{display:flex;align-items:center;gap:9px}
.f-aviso .fa-tipo{
  font:700 10px/1 Inter,sans-serif;letter-spacing:.07em;padding:4px 8px;border-radius:100px;
}
.f-aviso.t-tengo .fa-tipo{background:var(--tengo-bg);color:#1D5AA6}
.f-aviso.t-busco .fa-tipo{background:var(--busco-bg);color:#B44A12}
.f-aviso .fa-res{font:600 14px/1 PlexMono,monospace}
.f-aviso p{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--texto)}
.f-aviso .fa-meta{margin-top:7px;font:400 11.5px/1.5 Inter,sans-serif;color:var(--texto-3)}
.f-sinaviso{font-size:13.5px;line-height:1.6;color:var(--texto);margin:0}
.f-sinaviso b{font-weight:600}

.f-barras{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.f-b{display:grid;grid-template-columns:36px 1fr 74px;gap:10px;align-items:center}
.f-b i{font:400 11.5px/1 PlexMono,monospace;color:var(--texto-3);font-style:normal}
.f-b .fb-riel{height:10px;background:var(--niebla);border-radius:100px;overflow:hidden}
.f-b .fb-fill{height:100%;background:#AEB6B1;border-radius:100px}
.f-b.fb-max .fb-fill{background:var(--tengo)}
.f-b b{font:600 12px/1 PlexMono,monospace;text-align:right}
.f-nota{margin:10px 0 0;font-size:11.5px;line-height:1.55;color:var(--texto-3)}

.f-cta{
  width:100%;appearance:none;cursor:pointer;margin-top:2px;
  background:var(--texto);color:#fff;border:0;border-radius:100px;
  font:600 14px/1 Inter,sans-serif;letter-spacing:-.01em;padding:14px;
  transition:transform .15s,box-shadow .15s;box-shadow:var(--sombra);
}
.f-cta:hover{transform:translateY(-1px);box-shadow:var(--sombra-up)}
.f-cta[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:none}

/* timbre */
.timbre{
  position:absolute;right:14px;bottom:10px;width:96px;height:96px;pointer-events:none;
  transform:rotate(-8deg);opacity:0;
}
.timbre.puesto{animation:estampar .22s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes estampar{from{transform:rotate(-8deg) scale(1.6);opacity:0}60%{opacity:1}to{transform:rotate(-8deg) scale(1);opacity:.9}}
@media (prefers-reduced-motion:reduce){.timbre.puesto{animation:none;opacity:.9;transform:rotate(-8deg)}}

.demarca{display:none}

.toast{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:50;
  background:var(--texto);color:#fff;border-radius:14px;padding:13px 20px;
  font:500 13.5px/1.45 Inter,sans-serif;box-shadow:var(--sombra-up);max-width:min(560px,92vw);
  letter-spacing:-.01em;
}

@media (max-width:900px){
  body{overflow:auto}
  .zona{flex-direction:column-reverse}
  .lista{flex-basis:auto}
  .patio{min-height:46vh;padding:0 16px 16px}
  #mapa{inset:0 16px 16px}
}

/* ═══════ transiciones estilo Electricity Maps ═══════ */

/* cards de la lista entran en cascada */
.etiqueta{animation:card-in .42s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--i,0)*45ms)}
@keyframes card-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* filas de la tabla historial, cascada corta */
.tabla tbody tr{animation:fila-in .34s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--i,0)*22ms)}
@keyframes fila-in{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* drawer: entrada más física + salida animada */
.ficha{animation:ficha-entra .34s cubic-bezier(.16,1,.3,1)}
@keyframes ficha-entra{from{transform:translateX(56px);opacity:0}to{transform:none;opacity:1}}
.ficha.saliendo{animation:ficha-sale .2s cubic-bezier(.4,0,.8,.4) forwards}
@keyframes ficha-sale{to{transform:translateX(48px);opacity:0}}
.velo{animation:velo-in .28s ease}
@keyframes velo-in{from{opacity:0}to{opacity:1}}
.velo.saliendo{animation:velo-out .2s ease forwards}
@keyframes velo-out{to{opacity:0}}

/* contenido de la ficha en cascada */
.f-etiqueta{animation:sec-in .4s cubic-bezier(.16,1,.3,1) .05s backwards}
.f-sec{animation:sec-in .44s cubic-bezier(.16,1,.3,1) backwards}
.f-sec:nth-of-type(1){animation-delay:.1s}
.f-sec:nth-of-type(2){animation-delay:.18s}
.f-sec:nth-of-type(3){animation-delay:.26s}
@keyframes sec-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* barras del historial crecen (el ancho lo fija JS tras un frame) */
.f-b .fb-fill{width:0;transition:width .7s cubic-bezier(.22,.9,.3,1)}
.f-b:nth-child(1) .fb-fill{transition-delay:.28s}
.f-b:nth-child(2) .fb-fill{transition-delay:.36s}
.f-b:nth-child(3) .fb-fill{transition-delay:.44s}
.f-b:nth-child(4) .fb-fill{transition-delay:.52s}
.f-b:nth-child(5) .fb-fill{transition-delay:.6s}

/* popup del mapa aparece con rebote sutil — OJO: animar SOLO la tarjeta interior;
   MapLibre posiciona la raíz .maplibregl-popup con transform inline y una animación
   de transform ahí la manda a la esquina 0,0 mientras corre */
.pop{animation:pop-in .2s cubic-bezier(.16,1,.3,1)}
@keyframes pop-in{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}

/* chips y tabs con transición de fondo ya definida; suavizar el toast */
.toast{animation:toast-in .3s cubic-bezier(.16,1,.3,1)}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;animation-delay:0ms!important;transition-delay:0ms!important}
}

/* ═══════ línea de tiempo (repetición histórica + proyección simulada) ═══════ */
.linea-t{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;
  display:flex;flex-direction:column;gap:6px;width:min(620px,calc(100% - 260px));
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  border:1px solid var(--borde);border-radius:22px;padding:8px 16px 8px 8px;
  box-shadow:var(--sombra-up);
}
.lt-fila{display:flex;align-items:center;gap:12px}
.lt-anios{display:flex;align-items:center;gap:4px;padding:0 4px 2px 46px;flex-wrap:wrap}
.lt-anio{
  appearance:none;cursor:pointer;border:0;border-radius:100px;padding:5px 10px;
  font:600 11.5px/1 PlexMono,monospace;color:var(--texto-2);background:transparent;
  transition:background-color .14s ease-out,color .14s ease-out,transform .14s ease-out;
}
.lt-anio:hover{background:var(--niebla)}
.lt-anio:active{transform:scale(.96)}
.lt-anio.on{background:var(--texto);color:#fff}
.lt-anio.on:hover{background:var(--texto)}
.lt-anio-sim{color:#7A5C00;background:var(--alerta-bg,#FBF3DC)}
.lt-anio-sim:hover{background:#F6E9C8}
.lt-anio-sim.on,.lt-anio-sim.on:hover{background:#7A5C00;color:#fff}
.lt-div{width:1px;height:16px;background:var(--borde-2,#D8DCD6);margin:0 4px}
.lt-rot-sim{font:600 8.5px/1 Inter,sans-serif;letter-spacing:.08em;color:#7A5C00;margin-left:2px}
.lt-sim{
  flex:0 0 auto;font:600 9px/1 PlexMono,monospace;letter-spacing:.06em;color:#7A5C00;
  background:var(--alerta-bg,#FBF3DC);border:1px solid #F0DFAE;border-radius:100px;padding:4px 8px;
}
/* chips de resina bloqueados sobre dato real del Historial */
.chips-lock{opacity:.3;pointer-events:none}
/* watermark de la proyección sobre el mapa */
#wm-sim{
  position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='170'%3E%3Ctext x='230' y='90' text-anchor='middle' font-family='monospace' font-size='15' font-weight='700' fill='%237A5C00' fill-opacity='0.13' transform='rotate(-24 230 85)'%3EPROYECCIÓN SIMULADA — NO ES DATO OFICIAL%3C/text%3E%3C/svg%3E");
  background-repeat:repeat;
}
.wm-badge{
  position:absolute;left:20px;bottom:176px;
  font:600 10.5px/1 PlexMono,monospace;letter-spacing:.04em;color:#7A5C00;
  background:var(--alerta-bg,#FBF3DC);border:1px solid #F0DFAE;border-radius:100px;
  padding:7px 12px;box-shadow:var(--sombra);
}
/* leyenda: swatch de destinatario + espacio para la píldora de dos filas */
.lg-destino{background:#F8F9F5;border:2.5px solid #1baf7a;border-radius:50%;width:11px;height:11px}
body.v-historial .leyenda{bottom:124px;flex-wrap:wrap;max-width:calc(100% - 380px);border-radius:18px}
/* tabla sim + dot de tratamiento */
.cap-sim{
  caption-side:top;text-align:left;font:600 9px/1.4 PlexMono,monospace;letter-spacing:.05em;
  color:#7A5C00;background:var(--alerta-bg,#FBF3DC);border:1px solid #F0DFAE;border-radius:8px;
  padding:6px 10px;margin-bottom:8px;
}
.sim-card{border:1px solid #F0DFAE;background:linear-gradient(0deg,rgba(251,243,220,.4),rgba(251,243,220,.4)),#fff}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:baseline}
.lt-info{flex:1 1 auto;display:flex;flex-direction:column;line-height:1.2;min-width:118px}
.lt-info b{font:600 14px/1.2 PlexMono,monospace;letter-spacing:.02em}
.lt-info span{font:400 10.5px/1.3 Inter,sans-serif;color:var(--texto-3);white-space:nowrap}
.lt-tag{flex:0 0 auto;font:600 8.5px/1 Inter,sans-serif;letter-spacing:.08em;color:var(--texto-3)}
/* fila de meses: solo donde el dato tiene mes */
.lt-meses{display:flex;align-items:center;gap:2px;padding:0 2px 2px}
.lt-mes{
  appearance:none;cursor:pointer;border:0;background:transparent;flex:1 1 0;
  padding:4px 0;border-radius:7px;
  font:600 9.5px/1 PlexMono,monospace;letter-spacing:.03em;color:var(--texto-3);
  transition:background-color .14s ease-out,color .14s ease-out,transform .14s ease-out;
}
.lt-mes:hover{background:var(--niebla);color:var(--texto-2)}
.lt-mes:active{transform:scale(.94)}
.lt-mes.on{background:var(--texto);color:#fff}
.lt-mes-anual{flex:0 0 auto;padding:4px 8px;letter-spacing:.06em}
.lt-mes.on:hover{background:var(--texto)}
.lt-nota-anual{
  padding:2px 4px 4px;font:400 10px/1.3 Inter,sans-serif;color:var(--texto-3);
}
@media (max-width:1200px){.lt-tag,.lt-rot-sim{display:none}.linea-t{width:min(520px,calc(100% - 60px))}}

/* ═══════ tarjeta de hover con mini-métricas (estilo Electricity Maps) ═══════ */
.pop-grande{min-width:264px}
.pop-fecha{font:400 11px/1.4 Inter,sans-serif;color:var(--texto-3);margin-bottom:9px}
.pop-tiles{display:flex;gap:8px;align-items:stretch}
.tile{
  flex:1 1 0;border-radius:12px;padding:9px 8px 8px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:var(--nube);
}
.tile b{font:700 15px/1.1 Inter,sans-serif;letter-spacing:-.02em}
.tile small{font:600 8.5px/1.25 Inter,sans-serif;color:var(--texto-2);letter-spacing:.02em;text-transform:uppercase}
.tile-azul{background:var(--tengo-bg)}
.tile-ambar{background:var(--alerta-bg)}
.tile-verde{background:var(--ok-bg)}
.tile-naranjo{background:var(--busco-bg)}
.tile .arc{width:44px;height:44px}
.tile .arc text{font:700 11px Inter,sans-serif;letter-spacing:-.02em}
.pop-etq{display:flex;gap:9px;justify-content:space-between;margin-top:8px}
.pop-etq small{flex:1 1 0;text-align:center;font:500 9.5px/1.3 Inter,sans-serif;color:var(--texto-2)}

/* ═══════ drill-down país → región → comuna ═══════ */
.btn-pais{
  position:absolute;left:20px;top:16px;z-index:6;appearance:none;cursor:pointer;
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border:1px solid var(--borde);
  border-radius:100px;padding:10px 16px;font:600 13px/1 Inter,sans-serif;letter-spacing:-.01em;
  box-shadow:var(--sombra);transition:transform .15s,box-shadow .15s;
}
.btn-pais:hover{transform:translateY(-1px);box-shadow:var(--sombra-up)}
.chip-comuna{background:var(--texto)!important;color:#fff!important;border-color:var(--texto)!important}
.chip-comuna::after{content:"✕";margin-left:7px;font-size:11px;opacity:.7}
/* apagada = la capa histórica está oculta: no hay periodo que elegir */
.linea-t.apagada{opacity:.4;pointer-events:none}

/* ═══════ paneles por nivel (macro → micro) ═══════ */
.nivel-card{
  background:var(--fondo);border:1px solid var(--borde);border-radius:var(--r);
  padding:16px;margin-bottom:12px;box-shadow:var(--sombra);
  animation:card-in .42s cubic-bezier(.16,1,.3,1) backwards;
}
.nc-rotulo{font:600 10.5px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3);margin-bottom:10px}
.nc-kpi{display:flex;align-items:baseline;gap:8px}
.nc-kpi b{font:700 30px/1 Inter,sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.nc-kpi span{font:400 12.5px/1.3 Inter,sans-serif;color:var(--texto-2)}
.nc-sub{margin:7px 0 0;font:400 12px/1.5 Inter,sans-serif;color:var(--texto-3)}
.nc-sub b{color:var(--texto);font-weight:600}
.nc-mini{display:flex;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--niebla)}
.nc-mini div{flex:1}
.nc-mini b{display:block;font:600 15px/1 PlexMono,monospace}
.nc-mini small{font:500 10px/1.4 Inter,sans-serif;color:var(--texto-3);text-transform:uppercase;letter-spacing:.04em}
.nc-fila{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:10px;margin:0 -6px}
.nc-fila.click{cursor:pointer}
.nc-fila.click:hover{background:var(--nube)}
.nc-fila .nf-nom{flex:0 0 128px;font:500 12.5px/1.25 Inter,sans-serif;letter-spacing:-.01em}
.nc-fila.obj .nf-nom{font-weight:700;color:#0A7350}
.nc-fila .nf-riel{flex:1;height:8px;background:var(--niebla);border-radius:100px;overflow:hidden}
.nc-fila .nf-fill{height:100%;border-radius:100px;background:var(--tengo)}
.nc-fila.obj .nf-fill{background:var(--ok)}
.nc-fila b{flex:0 0 80px;text-align:right;font:600 11.5px/1 PlexMono,monospace;white-space:nowrap}
.nc-fila .nf-ir{flex:0 0 auto;font:700 11px/1 Inter,sans-serif;color:#0A7350}
.nc-poli{display:flex;align-items:center;gap:14px}
.nc-poli b{font:700 34px/1 Inter,sans-serif;letter-spacing:-.03em;color:#B8860B}
.nc-poli span{font:400 12px/1.5 Inter,sans-serif;color:var(--texto-2)}
.nc-emp{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 6px;margin:0 -6px;border-radius:10px;cursor:pointer}
.nc-emp:hover{background:var(--nube)}
.nc-emp .ne-n{font:600 13px/1.3 Inter,sans-serif;letter-spacing:-.01em}
.nc-emp .ne-c{font:400 10.5px/1.4 Inter,sans-serif;color:var(--texto-3)}
.nc-emp b{font:600 12px/1 PlexMono,monospace;flex:0 0 auto}

/* traslado seleccionado en la ficha */
.fl-row.fl-on{background:var(--ok-bg);border-radius:10px;margin:0 -7px;padding:7px}
.fl-row.fl-on .n{font-weight:600}

/* listas dentro de la ficha (traslados, tipos) */
.lista{list-style:none;margin:0;padding:0}
.lista li{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px solid var(--niebla);font-size:13px}
.lista li:last-child{border-bottom:0}
.lista .n{flex:1 1 auto;line-height:1.35;letter-spacing:-.01em}
.lista .n em{display:block;font-style:normal;font:400 10.5px/1.4 Inter,sans-serif;color:var(--texto-3);margin-top:2px}
.lista .t{font:600 12px/1 PlexMono,monospace;flex:0 0 auto;white-space:nowrap}
.lista li.click{cursor:pointer;margin:0 -7px;padding:8px 7px;border-radius:10px}
.lista li.click:hover{background:var(--fondo)}

/* ═══════════════ TRAZABILIDAD + CERTIFICADOS ═══════════════ */

.stab-n{font:600 10px/1 PlexMono,monospace;background:var(--ok);color:#fff;
  border-radius:100px;padding:3px 6px;margin-left:5px;vertical-align:1px;
  display:inline-block;transition:transform .2s}
.stab-n.tick{transform:scale(1.45)}

.seg-trz{display:flex;gap:4px;background:var(--niebla);border-radius:100px;padding:4px}
.seg{border:0;background:transparent;border-radius:100px;padding:8px 14px;cursor:pointer;
  font:600 11px/1 Inter,sans-serif;letter-spacing:.05em;color:var(--texto-2);transition:all .15s}
.seg[hidden]{display:none}
.seg.on{background:var(--fondo);color:var(--texto);box-shadow:0 1px 3px rgba(31,36,33,.12)}
.seg b{font:600 10.5px/1 PlexMono,monospace;color:var(--texto-3);margin-left:2px}
.seg.on b{color:var(--ok)}

/* filas tipo guía de despacho */
.trz-fila{background:var(--fondo);border:1px solid var(--borde);border-radius:var(--r);
  padding:14px 16px;margin-bottom:10px;cursor:pointer;position:relative;
  transition:transform .15s,box-shadow .15s,border-color .15s;
  animation:etq-entra .35s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i,0)*45ms)}
.trz-fila:hover{transform:translateY(-2px);box-shadow:var(--sombra-up);border-color:var(--borde-2)}
.trz-fila.destello{animation:trz-destello 1.5s ease-out}
@keyframes trz-destello{0%{box-shadow:0 0 0 3px var(--ok-bg),var(--sombra-up)}100%{box-shadow:var(--sombra)}}
.trz-cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.trz-folio{font:600 11.5px/1 PlexMono,monospace;color:var(--texto-2);letter-spacing:.03em}
.trz-hace{font:400 10.5px/1 PlexMono,monospace;color:var(--texto-3)}
.trz-partes{margin:9px 0 2px;font:600 13.5px/1.35 Inter,sans-serif;letter-spacing:-.01em}
.trz-partes .fl{color:var(--texto-3);font-weight:400;margin:0 4px}
.trz-gestor{display:inline-block;font:600 8.5px/1 PlexMono,monospace;color:#0A7350;
  border:1px solid var(--ok);border-radius:4px;padding:2px 4px;margin-left:6px;vertical-align:1px;letter-spacing:.04em}
.trz-mat{display:flex;align-items:center;gap:8px;margin:8px 0;font:400 12.5px/1.4 Inter,sans-serif;color:var(--texto-2)}
.trz-res{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;background:var(--niebla);flex:none}
.trz-res b{font:600 12px/1 PlexMono,monospace}
.trz-res i{font:600 6.5px/1.1 Inter,sans-serif;font-style:normal;color:var(--texto-3)}
.trz-t{font:600 13px/1 PlexMono,monospace;color:var(--texto);margin-left:auto;text-align:right}
.trz-t small{display:block;font:400 10px/1.5 PlexMono,monospace;color:var(--alerta)}
.trz-pie{display:flex;align-items:center;gap:10px;margin-top:9px}
.trz-pill{display:inline-flex;align-items:center;gap:6px;font:600 10px/1 Inter,sans-serif;
  letter-spacing:.06em;border-radius:100px;padding:5px 10px}
.trz-pill i{width:7px;height:7px;border-radius:50%;font-style:normal}
.p-acordada{background:var(--niebla);color:var(--texto-2)}.p-acordada i{background:#8A938E}
.p-proceso{background:var(--tengo-bg);color:#1D5AA6}.p-proceso i{background:var(--tengo)}
.p-observada{background:var(--alerta-bg);color:#8A6100}.p-observada i{background:var(--alerta)}
.p-certificada{background:var(--ok-bg);color:#0A7350}.p-certificada i{background:var(--ok)}
.trz-stepper{display:flex;align-items:center;gap:4px;margin-left:auto;font:600 9px/1 PlexMono,monospace;color:var(--texto-3)}
.trz-stepper .h{display:inline-flex;align-items:center;gap:3px}
.trz-stepper .h.ok{color:#0A7350}
.trz-stepper .sep{color:var(--borde-2)}

/* ficha de transacción */
.ftrz-partes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.ftrz-partes{grid-template-columns:1fr}}
.ftrz-p{background:var(--fondo);border:1px solid var(--borde);border-radius:var(--r-chico);padding:12px}
.ftrz-p.rol-e{border-top:3px solid var(--tengo)}
.ftrz-p.rol-r{border-top:3px solid var(--busco)}
.ftrz-p h4{margin:0 0 2px;font:600 10px/1 PlexMono,monospace;letter-spacing:.08em;color:var(--texto-3)}
.ftrz-p .nom{font:600 13px/1.3 Inter,sans-serif;margin:4px 0 8px}
.ftrz-ok{width:100%;border:0;border-radius:100px;padding:11px 12px;cursor:pointer;
  font:600 11.5px/1 Inter,sans-serif;letter-spacing:.04em;background:var(--texto);color:#fff;
  transition:transform .15s,box-shadow .15s}
.ftrz-ok:hover:not([disabled]){transform:translateY(-1px);box-shadow:var(--sombra-up)}
.ftrz-ok[disabled]{background:var(--niebla);color:var(--texto-3);cursor:default}
.ftrz-ok.dado{background:var(--ok-bg);color:#0A7350}
.ftrz-ok.espera{background:var(--niebla);color:var(--texto-3)}
/* estado, no acción: sin forma de botón para que se distinga de lo pulsable */
.ftrz-estado{
  display:flex;align-items:center;gap:7px;padding:9px 2px 2px;
  font:600 12.5px/1.3 Inter,sans-serif;letter-spacing:-.01em;
}
.ftrz-estado::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.ftrz-estado.ok{color:#0A7350}
.ftrz-estado.espera{color:var(--texto-3)}
.ftrz-estado.auto{color:var(--tengo)}
.ftrz-estado.auto::before{animation:latido 1.1s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
@media (prefers-reduced-motion:reduce){.ftrz-estado.auto::before{animation:none}}
.hilo-acordar-abierto{
  font:600 10.5px/1 Inter,sans-serif;letter-spacing:.04em;color:var(--texto-3);
  padding:9px 12px;
}
.ftrz-ok.acepta{background:var(--alerta);color:#fff}
.ftrz-sub{font:400 10.5px/1.5 Inter,sans-serif;color:var(--texto-3);margin:6px 0 0}
.ftrz-ts{font:400 10.5px/1.6 PlexMono,monospace;color:#0A7350;margin:8px 0 0}
.ftrz-form{margin-top:10px;padding-top:10px;border-top:1px dashed var(--borde-2)}
.ftrz-form label{display:block;font:600 9.5px/1 PlexMono,monospace;color:var(--texto-3);
  letter-spacing:.06em;margin:0 0 5px}
.ftrz-form input{width:100%;border:1px solid var(--borde-2);border-radius:8px;padding:9px 10px;
  font:600 14px/1 PlexMono,monospace;color:var(--texto);background:var(--fondo);margin-bottom:9px}
.ftrz-form input:focus{outline:2px solid var(--tengo);outline-offset:1px;border-color:transparent}
.ftrz-obj{display:inline-block;margin:8px 0 0;font:600 10.5px/1 Inter,sans-serif;
  color:var(--texto-3);background:none;border:0;cursor:pointer;text-decoration:underline}
.ftrz-nota{font:400 10.5px/1.55 Inter,sans-serif;color:var(--texto-3);margin:10px 0 0;
  padding:8px 10px;background:var(--niebla);border-radius:8px}
.ftrz-dif{font:600 11px/1.5 PlexMono,monospace;color:var(--alerta);margin:8px 0 0}

/* marcadores trazabilidad — OJO: nunca fijar position en la raíz del marker
   (MapLibre la necesita absolute) */
.mk-trz{}
.mk-trz .mk-placa{width:34px;height:34px;border-radius:10px;background:var(--fondo);
  display:flex;align-items:center;justify-content:center;font:600 13px/1 PlexMono,monospace;
  box-shadow:var(--sombra-up);cursor:pointer}
.mk-trz.rol-e .mk-placa{border:2.5px solid var(--tengo)}
.mk-trz.rol-r .mk-placa{border:2.5px solid var(--busco)}
.mk-trz .badge{position:absolute;top:-7px;right:-7px;width:17px;height:17px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;
  border:2px solid var(--fondo)}
.mk-trz .badge.pend{background:var(--alerta);animation:badge-pulsa 2s ease-in-out infinite}
.mk-trz .badge.ok{background:var(--ok)}
@keyframes badge-pulsa{0%,100%{opacity:1}50%{opacity:.55}}
.mk-trz .gestor{position:absolute;top:37px;left:50%;transform:translateX(-50%);
  font:600 7.5px/1 PlexMono,monospace;color:#0A7350;background:var(--fondo);
  border:1px solid var(--ok);border-radius:4px;padding:2px 4px;white-space:nowrap;letter-spacing:.03em}

/* rótulo del arco + cometa */
.mk-trz-rot{font:600 10px/1 PlexMono,monospace;color:var(--texto);background:rgba(255,255,255,.92);
  border:1px solid var(--borde);border-radius:6px;padding:4px 7px;box-shadow:var(--sombra);
  cursor:pointer;white-space:nowrap;letter-spacing:.02em}
.mk-trz-rot i{font-style:normal;font-weight:700}
.mk-cometa{width:11px;height:11px;border-radius:50%;pointer-events:none;background:currentColor}
.mk-cometa::before{content:"";position:absolute;right:70%;top:50%;transform:translateY(-50%);
  width:24px;height:5px;border-radius:100px;
  background:linear-gradient(270deg,currentColor,transparent);opacity:.5}
.mk-pulso{width:14px;height:14px;border-radius:50%;pointer-events:none}
.mk-pulso::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:3px solid currentColor;animation:pulso-anillo .7s ease-out 2}
@keyframes pulso-anillo{0%{transform:scale(1);opacity:.85}100%{transform:scale(3.4);opacity:0}}

/* certificado: tarjeta de archivo */
.cert-card{background:var(--fondo);border:1px solid var(--borde);border-radius:var(--r);
  padding:14px 16px;margin-bottom:10px;cursor:pointer;position:relative;
  transition:transform .15s,box-shadow .15s;
  animation:etq-entra .35s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i,0)*45ms)}
.cert-card:hover{transform:translateY(-2px);box-shadow:var(--sombra-up)}
.cert-card.nuevo{animation:trz-destello 1.6s ease-out}
.cert-cab{display:flex;justify-content:space-between;align-items:baseline}
.cert-folio{font:600 12px/1 PlexMono,monospace;color:#0A7350;letter-spacing:.03em}
.cert-fecha{font:400 10.5px/1 PlexMono,monospace;color:var(--texto-3)}
.cert-partes{margin:8px 0 4px;font:600 13px/1.35 Inter,sans-serif}
.cert-pie{display:flex;align-items:center;gap:8px;font:400 11.5px/1.4 Inter,sans-serif;color:var(--texto-2)}
.cert-pie b{font:600 12px/1 PlexMono,monospace;color:var(--texto)}
.cert-dest{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font:600 9.5px/1.3 Inter,sans-serif}
.cert-dest i{width:7px;height:7px;border-radius:50%;font-style:normal;flex:none}

/* documento certificado */
.cert-hoja{background:#fff;border:1px solid #e3e1dc;border-radius:8px;padding:26px 26px 20px;
  position:relative;overflow:hidden;font-size:12.5px}
.cert-hoja::before{content:"DEMO — SIN VALIDEZ";position:absolute;top:42%;left:50%;
  transform:translate(-50%,-50%) rotate(-24deg);font:700 44px/1 Archivo,Inter,sans-serif;
  letter-spacing:.1em;color:rgba(138,147,142,.09);white-space:nowrap;pointer-events:none}
.ch-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  border-bottom:1px solid var(--texto);padding-bottom:10px;margin-bottom:14px}
.ch-tit{font:600 11px/1.5 PlexMono,monospace;letter-spacing:.12em;color:#1B2430}
.ch-folio{text-align:right;font:600 11px/1.6 PlexMono,monospace;color:#1B2430}
.ch-folio small{display:block;font-weight:400;font-size:9.5px;color:var(--texto-3);letter-spacing:.04em}
.ch-sec{margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--borde)}
.ch-sec:last-of-type{border-bottom:0}
.ch-num{display:block;font:600 9px/1 PlexMono,monospace;letter-spacing:.14em;color:var(--texto-3);margin-bottom:7px}
.ch-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ch-parte{border-left:3px solid var(--tengo);padding-left:10px}
.ch-parte.rec{border-left-color:var(--busco)}
.ch-parte b{display:block;font:600 12.5px/1.35 Inter,sans-serif}
.ch-parte span{display:block;font:400 10.5px/1.6 Inter,sans-serif;color:var(--texto-2)}
.ch-fila{display:flex;justify-content:space-between;gap:10px;font:400 11.5px/1.9 Inter,sans-serif;color:var(--texto-2)}
.ch-fila b{font:600 11.5px/1.9 PlexMono,monospace;color:var(--texto)}
.ch-fila b.dif{color:var(--alerta)}
.ch-verif{font:400 10.5px/1.8 PlexMono,monospace;color:#0A7350}
.ch-hash{font:400 10px/1.8 PlexMono,monospace;color:var(--texto-3);letter-spacing:.03em}
.ch-hash .okv{color:#0A7350;font-weight:600}
.ch-legal{font:400 9.5px/1.6 Inter,sans-serif;color:var(--texto-3);margin:12px 0 0;
  padding-top:10px;border-top:1px solid var(--borde)}
.ch-demo{font:400 9px/1.6 PlexMono,monospace;color:var(--texto-3);margin-top:8px}
.cert-timbre{position:absolute;right:18px;bottom:104px;width:118px;height:118px;
  transform:rotate(-8deg);pointer-events:none}
.cert-acciones{display:flex;gap:8px;margin-top:12px}
.cert-btn{flex:1;border:1.5px solid var(--borde-2);background:var(--fondo);border-radius:100px;
  padding:11px;cursor:pointer;font:600 11px/1 Inter,sans-serif;letter-spacing:.04em;color:var(--texto);
  transition:border-color .15s,transform .15s}
.cert-btn:hover{border-color:var(--texto-3);transform:translateY(-1px)}
.cert-btn.pri{background:var(--texto);color:#fff;border-color:var(--texto)}

@media print{
  body>*{display:none!important}
  .ficha:not([hidden]){display:block!important;position:static!important;width:100%!important;
    height:auto!important;box-shadow:none!important}
  .ficha .f-cerrar,.ficha .cert-acciones{display:none!important}
  .cert-hoja{border:0}
}

/* vacíos */
.trz-vacio{text-align:center;padding:34px 18px;color:var(--texto-3);font-size:12.5px;line-height:1.7}
.trz-vacio svg{display:block;margin:0 auto 12px;opacity:.5}
.trz-vacio button{margin-top:12px;border:1.5px solid var(--borde-2);background:var(--fondo);
  border-radius:100px;padding:9px 16px;cursor:pointer;font:600 11px/1 Inter,sans-serif}

@media (prefers-reduced-motion:reduce){
  .trz-fila,.cert-card{animation:none}
  .mk-trz .badge.pend{animation:none}
  .mk-pulso::after{animation:none;opacity:0}
  .stab-n{transition:none}
}

/* ═══════════════ MENSAJES: bandeja + hilo ═══════════════ */
.stab-n-msj{background:var(--tengo)}

/* bandeja (vive en el aside .lista) */
.bnd-fila{background:var(--fondo);border:1px solid var(--borde);border-radius:var(--r);
  padding:13px 15px;margin-bottom:9px;cursor:pointer;
  transition:transform .15s,box-shadow .15s,border-color .15s;
  animation:etq-entra .35s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i,0)*45ms)}
.bnd-fila:hover{transform:translateY(-2px);box-shadow:var(--sombra-up)}
.bnd-fila.on{border-color:var(--texto);box-shadow:var(--sombra)}
.bnd-cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.bnd-nom{font:600 13px/1.3 Inter,sans-serif;letter-spacing:-.01em}
.bnd-hora{font:400 10px/1 PlexMono,monospace;color:var(--texto-3);flex:none}
.bnd-snip{margin-top:5px;font:400 12px/1.45 Inter,sans-serif;color:var(--texto-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bnd-pie{display:flex;align-items:center;gap:8px;margin-top:8px}
.bnd-res{display:inline-flex;align-items:center;gap:4px;font:600 9.5px/1 PlexMono,monospace;
  color:var(--texto-2);background:var(--niebla);border-radius:5px;padding:3px 6px}
.p-negociando{background:var(--niebla);color:var(--texto-2)}.p-negociando i{background:#8A938E}

/* panel del hilo (cubre el área del mapa en la vista Mensajes) */
.hilo{position:absolute;inset:0 16px 16px 4px;background:var(--fondo);border-radius:var(--r);
  box-shadow:var(--sombra);display:flex;flex-direction:column;overflow:hidden;z-index:6}
.hilo-cab{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--borde)}
.hilo-cab .nom{font:600 14.5px/1.3 Inter,sans-serif}
.hilo-cab .sub{font:400 11px/1.4 PlexMono,monospace;color:var(--texto-3)}
.hilo-cab .trz-pill{margin-left:auto}
.hilo-acordar{flex:none;appearance:none;cursor:pointer;background:var(--texto);color:#fff;
  border:0;border-radius:100px;font:600 11.5px/1 Inter,sans-serif;letter-spacing:.03em;
  padding:10px 16px;transition:transform .15s,box-shadow .15s}
.hilo-acordar:hover{transform:translateY(-1px);box-shadow:var(--sombra-up)}
.hilo-form{flex:0 0 auto;margin:0;padding:12px 18px;border-top:none;border-bottom:1px solid var(--borde);
  background:var(--nube)}
.hilo-banner{flex:0 0 auto;background:var(--nube);border-bottom:1px solid var(--borde);
  font:400 10.5px/1.5 Inter,sans-serif;color:var(--texto-2);padding:7px 18px}
.hilo-tl{flex:1 1 auto;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.msj{max-width:72%;border-radius:14px;padding:10px 13px;font:400 13px/1.5 Inter,sans-serif;
  animation:etq-entra .3s cubic-bezier(.2,.8,.3,1) both}
.msj .quien{font:600 9.5px/1 PlexMono,monospace;letter-spacing:.05em;color:var(--texto-3);
  display:block;margin-bottom:4px}
.msj .hora{font:400 9px/1 PlexMono,monospace;color:var(--texto-3);display:block;margin-top:5px;text-align:right}
.msj-a{align-self:flex-start;background:var(--nube);border:1px solid var(--borde);border-bottom-left-radius:4px}
.msj-b{align-self:flex-end;background:var(--tengo-bg);border:1px solid #D8E6F6;border-bottom-right-radius:4px}
/* mensaje 0: la ficha del aviso */
.msj-aviso{align-self:stretch;max-width:100%;background:var(--fondo);border:1px dashed var(--borde-2);
  border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px}
.msj-aviso .trz-res{flex:none}
.msj-aviso .det{font:400 12px/1.5 Inter,sans-serif;color:var(--texto-2)}
.msj-aviso .det b{display:block;font:600 13px/1.3 Inter,sans-serif;color:var(--texto)}
/* cards de sistema (eventos de transacción y certificado) */
.msj-sys{align-self:center;max-width:86%;width:86%;background:var(--fondo);border:1px solid var(--borde);
  border-left:4px solid #8A938E;border-radius:12px;padding:11px 14px;
  animation:etq-entra .3s cubic-bezier(.2,.8,.3,1) both}

.msj-sys.s-contacto{border-left:3px solid var(--texto);background:var(--nube)}
.msj-sys.s-contacto .ct-linea{font:600 11.5px/1.9 PlexMono,monospace;color:var(--texto)}
.msj-sys.s-proceso{border-left-color:var(--tengo)}
.msj-sys.s-observada{border-left-color:var(--alerta)}
.msj-sys.s-certificada{border-left-color:var(--ok)}
.msj-sys .tit{font:600 10.5px/1 PlexMono,monospace;letter-spacing:.06em;color:var(--texto-2)}
.msj-sys .cuerpo{margin-top:5px;font:400 12.5px/1.5 Inter,sans-serif}
.msj-sys .acc{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.msj-sys .acc button,.msj-sys .acc a{appearance:none;cursor:pointer;text-decoration:none;
  background:var(--fondo);border:1.5px solid var(--borde-2);border-radius:100px;
  font:600 10px/1 Inter,sans-serif;letter-spacing:.04em;color:var(--texto);padding:8px 12px;
  transition:border-color .15s}
.msj-sys .acc button:hover,.msj-sys .acc a:hover{border-color:var(--texto-3)}
.msj-sys .acc .pri{background:var(--texto);color:#fff;border-color:var(--texto)}
/* composer */
.hilo-comp{flex:0 0 auto;display:flex;gap:9px;padding:12px 16px;border-top:1px solid var(--borde);
  background:var(--fondo)}
.hilo-comp textarea{flex:1 1 auto;resize:none;height:44px;border:1px solid var(--borde-2);
  border-radius:12px;padding:11px 13px;font:400 13px/1.4 Inter,sans-serif;background:var(--nube)}
.hilo-comp textarea:focus{outline:2px solid var(--tengo);outline-offset:1px;background:var(--fondo)}
.hilo-comp button{flex:none;appearance:none;cursor:pointer;background:var(--texto);color:#fff;
  border:0;border-radius:12px;font:600 12px/1 Inter,sans-serif;padding:0 18px}
.hilo-vacio{margin:auto;text-align:center;color:var(--texto-3);font-size:12.5px;line-height:1.7;padding:30px}
/* composer de la ficha (enviar mensaje) */
.f-comp textarea{width:100%;resize:none;height:74px;border:1px solid var(--borde-2);border-radius:10px;
  padding:10px 12px;font:400 12.5px/1.45 Inter,sans-serif;background:var(--fondo);margin-bottom:9px}
.f-comp textarea:focus{outline:2px solid var(--tengo);outline-offset:1px}

/* ─────── sesión (demo): capa pública vs cuenta verificada ─────── */
.senal-sesion{
  margin-left:auto;appearance:none;cursor:pointer;background:var(--fondo);
  border:1.5px solid var(--borde-2);border-radius:100px;color:var(--texto);
  font:600 13px/1 Inter,sans-serif;padding:10px 16px;letter-spacing:-.01em;
  display:flex;align-items:center;gap:8px;transition:border-color .15s,box-shadow .15s;
}
.senal-sesion:hover{border-color:var(--texto-3);box-shadow:var(--sombra)}
.senal-sesion.con-sesion{border-color:var(--ok);color:var(--texto)}
.senal-sesion + .senal-cta{margin-left:0}
.ses-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:0 0 auto}

.sesion-velo{
  position:fixed;inset:0;z-index:60;background:rgba(31,36,33,.4);
  display:grid;place-items:center;padding:20px;
}
.sesion-modal{
  position:relative;width:min(430px,100%);background:var(--fondo);border-radius:var(--r);
  box-shadow:var(--sombra-up);padding:26px 26px 20px;
}
.sesion-modal h3{margin:0 0 8px;font:700 19px/1.2 Inter,sans-serif;letter-spacing:-.02em}
.ses-p{margin:0 0 14px;font:400 13px/1.55 Inter,sans-serif;color:var(--texto-2)}
.ses-motivo{
  margin:0 0 12px;font:500 12.5px/1.5 Inter,sans-serif;color:#7A5C00;
  background:var(--alerta-bg);border:1px solid #F0DFAE;border-radius:var(--r-chico);padding:8px 12px;
}
.ses-cuenta{
  appearance:none;cursor:pointer;width:100%;display:flex;align-items:center;gap:12px;
  background:var(--nube);border:1.5px solid var(--borde-2);border-radius:12px;padding:13px 15px;
  text-align:left;transition:border-color .15s,box-shadow .15s,transform .15s;
}
.ses-cuenta:hover{border-color:var(--ok);box-shadow:var(--sombra);transform:translateY(-1px)}
.ses-avatar{
  flex:0 0 38px;height:38px;border-radius:50%;background:var(--ok);color:#fff;
  display:grid;place-items:center;font:700 17px/1 Inter,sans-serif;
}
.ses-datos{flex:1 1 auto;display:flex;flex-direction:column;gap:2px}
.ses-datos b{font:600 14.5px/1.2 Inter,sans-serif}
.ses-datos i{font:400 11.5px/1.4 Inter,sans-serif;font-style:normal;color:var(--texto-2)}
.ses-ir{flex:0 0 auto;font:700 11px/1 PlexMono,monospace;color:var(--ok);letter-spacing:.06em}
.ses-nota{margin:14px 0 0;font:400 11px/1.55 Inter,sans-serif;color:var(--texto-3)}

.et-mio{
  display:inline-block;margin-left:6px;padding:2px 7px;border-radius:100px;
  background:var(--ok-bg);color:#0E8A5F;font:700 9px/1.3 PlexMono,monospace;letter-spacing:.06em;
  vertical-align:1px;
}
.trz-tuyo{
  display:inline-block;margin-left:5px;padding:2px 7px;border-radius:100px;
  background:var(--ok);color:#fff;font:700 8.5px/1.3 PlexMono,monospace;letter-spacing:.06em;
}
.trz-simtag{
  display:inline-block;margin-left:5px;padding:2px 7px;border-radius:100px;
  background:var(--niebla);color:var(--texto-2);font:600 8.5px/1.3 PlexMono,monospace;letter-spacing:.05em;
}
.ftrz-sim{border-style:dashed!important;opacity:.92;background:var(--nube)}