/* ============================================================
   Pulsomed — Landing · SHOWCASE
   Componentes de producto reutilizados tal cual:
   tarjeta de equipo + QR animado + historial, e inventario con
   barras animadas. Mismo maquetado/efectos, con los tokens de
   Pulsomed.
   ============================================================ */

/* auto-escalador: encaja el contenido de diseño real a su columna */
.fit{ position:relative; width:100%; }
.fit-inner{ position:absolute; top:0; left:0; transform-origin:top left; }

/* chrome de tarjeta blanca */
.show-card{ background:#fff; border-radius:20px; overflow:hidden; color:var(--ink);
  box-shadow:0 30px 70px rgba(15,23,42,.18), 0 0 0 1px rgba(15,23,42,.04); position:relative; }
.show-card .uc-head{ height:54px; display:flex; align-items:center; gap:11px; padding:0 22px; border-bottom:1px solid var(--line); background:#fff; }
.show-card .uc-head .ic{ width:30px; height:30px; border-radius:9px; background:#EEF1F5; display:grid; place-items:center; color:#0F2440; flex:none; }
.show-card .uc-head .t{ font-size:15.5px; font-weight:800; }
.show-card .uc-head .badge{ margin-left:auto; font-size:11.5px; font-weight:800; padding:5px 12px; border-radius:999px; }

/* sheen: barrido de brillo cuando la tarjeta entra en pantalla */
.uc-sheen{ position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:inherit; }
.uc-sheen::after{ content:""; position:absolute; top:-20%; left:0; width:34%; height:140%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); transform:translateX(-160%) skewX(-18deg); }
.pm-visual.in .uc-sheen::after{ animation:uc-sheen 4.8s ease-in-out 1.2s infinite; }
@keyframes uc-sheen{ 0%{ transform:translateX(-160%) skewX(-18deg); } 55%,100%{ transform:translateX(380%) skewX(-18deg); } }

/* ---- equipo + QR ---- */
.eqcard{ width:860px; }
.eq-hero{ background:linear-gradient(120deg,#16324F,#1F3F5F); color:#fff; padding:26px 30px; display:flex; align-items:center; gap:18px; }
.eq-hero .ec-ic{ width:60px; height:60px; border-radius:16px; background:#ffffff14; display:grid; place-items:center; color:#7FB0FF; flex:none; }
.eq-hero .ec-t{ font-size:15px; font-weight:700; letter-spacing:.08em; color:#9fb0c9; }
.eq-hero .ec-n{ font-size:31px; font-weight:800; letter-spacing:-.01em; margin-top:2px; white-space:nowrap; }
.eq-hero .ec-m{ font-size:16.5px; color:#c3d0e4; margin-top:3px; }
.eq-hero .ec-st{ margin-left:auto; font-size:15.5px; font-weight:800; color:#5EE2A0; background:#16352a; padding:9px 18px; border-radius:999px; white-space:nowrap; }
.eq-body{ display:grid; grid-template-columns:320px 1fr; }
.qr-panel{ padding:30px; border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:18px; }
.qr-frame{ position:relative; width:198px; height:198px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 10px 30px rgba(15,23,42,.08); overflow:hidden; }
#qr{ display:grid; grid-template-columns:repeat(21,1fr); width:170px; height:170px; }
#qr i{ background:#16324F; } #qr i.o{ background:transparent; }
.qr-scan{ position:absolute; left:14px; right:14px; height:24px; top:14px; opacity:.85;
  background:linear-gradient(180deg, rgba(15,36,64,0), rgba(15,36,64,.55)); border-bottom:2px solid #0F2440; border-radius:4px;
  animation:scanY 1.9s ease-in-out infinite alternate; }
.qr-cap{ font-size:15.5px; font-weight:700; color:var(--slate-500); text-align:center; }
.qr-cap b{ color:var(--ink); display:block; font-size:18px; margin-bottom:2px; }
.tl{ padding:26px 30px; }
.tl-h{ font-size:15px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); margin-bottom:20px; }
.tl-row{ display:flex; gap:16px; padding-bottom:22px; position:relative; }
.tl-row:not(:last-child)::before{ content:""; position:absolute; left:15px; top:32px; bottom:0; width:2px; background:var(--line); }
.tl-dot{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:none; color:#fff; z-index:1; }
.tl-c .d{ font-size:14px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--slate-500); }
.tl-c .v{ font-size:20px; font-weight:800; margin-top:3px; }
.tl-c .x{ font-size:15px; color:var(--slate-500); margin-top:2px; }
.tl-badge{ margin-left:auto; align-self:center; font-size:13.5px; font-weight:800; padding:5px 13px; border-radius:999px; white-space:nowrap; }

@keyframes scanY{ 0%{ transform:translateY(0); } 100%{ transform:translateY(130px); } }

/* ---- inventario ---- */
.inv{ width:560px; }
.inv-row{ display:flex; align-items:center; gap:16px; padding:16px 22px; border-bottom:1px solid var(--line-2); }
.inv-row .ic{ width:42px; height:42px; border-radius:12px; background:#EEF1F5; display:grid; place-items:center; color:#0F2440; flex:none; }
.inv-row .col{ flex:1; min-width:0; }
.inv-row .cd{ font-size:12px; font-weight:700; color:var(--slate-400); }
.inv-row .nm{ font-size:15.5px; font-weight:700; margin-top:1px; }
.inv-bar{ height:7px; border-radius:4px; background:#EDF1F7; margin-top:8px; overflow:hidden; }
.inv-bar i{ display:block; height:100%; border-radius:4px; width:0; }
.pm-visual.in .inv-bar i{ animation:growW 1.1s cubic-bezier(.2,.7,.2,1) both; }
.inv-row .qty{ text-align:right; flex:none; }
.inv-row .qty .q{ font-size:21px; font-weight:800; letter-spacing:-.01em; }
.inv-row .qty .u{ font-size:11px; color:var(--slate-400); font-weight:600; }
.inv-row .st{ font-size:11.5px; font-weight:800; padding:5px 11px; border-radius:999px; flex:none; }
.inv-row .st.ok{ background:#DCFCE7; color:#15803D; } .inv-row .st.low{ background:#FEE2E2; color:#DC2626; }

@keyframes growW{ from{ width:0; } }

/* ===== responsive: mockups del showcase ===== */
@media (max-width:680px){
  /* El ANCHO de .eqcard/.inv NO se fuerza acá: `fitCards()` (showcase.js) ya
     escala la tarjeta completa (tipografía y padding incluidos) al ancho real
     de `.fit` vía `transform:scale`. Fijar un width acá compite con esa cuenta
     — `dw` pasa a leer el width forzado en vez del natural (860/560), la
     escala calculada da ~1 y el contenido interno (pensado para 860px) queda
     sin achicar, se corta contra `overflow:hidden` de `.show-card`. */
  .eq-body{ grid-template-columns:1fr; }
  .qr-panel{ border-right:0; border-bottom:1px solid var(--line); }
}