/* ═════════ Socio: barra superior + contenido + navegación abajo ═════════ */
.m-shell { min-height: 100dvh; }

.m-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: calc(var(--top-h) + var(--safe-top));
  padding: var(--safe-top) 8px 0 var(--gutter);
  background: color-mix(in oklab, var(--page) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.m-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.02em; min-width: 0; }
.m-brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; }
.m-brand-mark svg { width: 18px; height: 18px; }
.m-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* "Mi pase": a un toque desde cualquier pantalla */
.pass-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px 0 10px;
  border: 0; border-radius: var(--radius-full);
  background: var(--soft); color: var(--ink);
  font-weight: 650; font-size: var(--text-sm); cursor: pointer;
}
.pass-btn svg { width: 20px; height: 20px; color: var(--flame-ink); }
.pass-btn:active { transform: scale(0.96); }

.m-main {
  padding: 16px var(--gutter) calc(var(--nav-h) + var(--safe-bottom) + 24px);
  max-width: 640px; margin: 0 auto;
  outline: none;
}

.m-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: color-mix(in oklab, var(--card) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-top: 1px solid var(--line);
}
.m-nav a {
  display: grid; justify-items: center; align-content: center; gap: 3px;
  color: var(--muted); font-size: 0.6875rem; font-weight: 600;
  transition: color 150ms;
}
.m-nav a svg { width: 24px; height: 24px; transition: transform 300ms var(--ease-spring); }
.m-nav a[aria-current="page"] { color: var(--ink); }
.m-nav a[aria-current="page"] svg { color: var(--flame); transform: translateY(-1px); }
.m-nav a:active svg { transform: scale(0.9); }

/* Entrenar: botón central más grande */
.m-nav a.nav-main { position: relative; color: var(--ink); }
.m-nav a.nav-main .nav-orb {
  position: relative;
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-top: -22px;
  border-radius: 50%;
  background: var(--gloss), var(--flame-grad); color: var(--on-flame);
  box-shadow: 0 0 0 5px var(--page), 0 10px 22px -8px var(--flame), var(--gloss-edge);
}
.m-nav a.nav-main svg { color: var(--on-flame); width: 26px; height: 26px; }


.page-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 16px; }

/* ═════════ Entrar / invitación ═════════ */
.auth {
  min-height: 100dvh;
  display: grid; align-content: center; gap: 24px;
  padding: calc(24px + var(--safe-top)) var(--gutter) calc(24px + var(--safe-bottom));
  max-width: 440px; margin: 0 auto;
}
.auth-head { display: grid; justify-items: center; gap: 14px; text-align: center; }
.auth-mark {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px;
  box-shadow: 0 18px 40px -16px var(--flame), var(--gloss-edge);
}
.auth-mark svg { width: 38px; height: 38px; }
.auth-foot { text-align: center; color: var(--muted); font-size: var(--text-sm); }

/* ═════════ Staff (recepción / admin): menú lateral en tablet+ ═════════ */
.s-shell { min-height: 100dvh; display: grid; grid-template-columns: 1fr; }
.s-side {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: 272px;
  display: flex; flex-direction: column; gap: 4px;
  padding: calc(16px + var(--safe-top)) 12px 16px;
  background: var(--card); border-right: 1px solid var(--line);
  transform: translateX(-100%); transition: transform 300ms var(--ease-out-expo);
}
.s-shell.menu-open .s-side { transform: none; box-shadow: var(--shadow-pop); }
.s-side .m-brand { padding: 4px 8px 16px; }
.s-side a {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--tap); padding: 0 12px; border-radius: 14px;
  color: var(--muted); font-weight: 600;
}
.s-side a svg { width: 20px; height: 20px; }
.s-side a:hover { background: var(--soft); color: var(--ink); }
.s-side a[aria-current="page"] { background: color-mix(in oklab, var(--flame) 14%, transparent); color: var(--flame-ink); }
.s-side .s-side-foot { margin-top: auto; display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 12px; }
.s-scrim { position: fixed; inset: 0; z-index: 35; background: oklch(0 0 0 / 0.5); display: none; }
.s-shell.menu-open .s-scrim { display: block; }

.s-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  height: calc(var(--top-h) + var(--safe-top)); padding: var(--safe-top) var(--gutter) 0 4px;
  background: color-mix(in oklab, var(--page) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.s-top h1 { font-size: var(--text-lg); }
.s-main { padding: 20px var(--gutter) 40px; outline: none; }

@media (min-width: 960px) {
  .s-shell { grid-template-columns: 272px 1fr; }
  .s-side { position: sticky; top: 0; height: 100dvh; transform: none; }
  .s-scrim, .s-top .menu-btn { display: none !important; }
  .s-top { padding-left: 28px; }
  .s-main { padding: 28px; max-width: 1100px; }
}

/* ═════════ Socio · Mi pase ═════════ */
.pass { display: grid; gap: 14px; justify-items: center; text-align: center; }
/* Siempre blanco: los lectores leen mal un QR sobre fondo oscuro. */
.pass-card {
  width: min(100%, 340px); padding: 18px 18px 16px; border-radius: 24px;
  background: #fff; color: #111113; box-shadow: var(--shadow-pop);
}
.pass-qr { width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.pass-qr svg { width: 100%; height: 100%; display: block; }
.pass-timer { height: 6px; margin: 10px 8px 12px; border-radius: 3px; background: #ececef; overflow: hidden; }
.pass-timer span { display: block; height: 100%; width: 100%; background-image: var(--flame-grad); border-radius: inherit; }
.pass-name { font-size: var(--text-lg); font-weight: 750; letter-spacing: -0.01em; }
.pass-sub { font-size: var(--text-sm); color: #5d5d66; margin-top: 2px; }
.pass-fail { display: grid; gap: 10px; justify-items: center; padding: 24px; color: #b91c1c; font-weight: 600; }
.pass-fail svg { width: 36px; height: 36px; }
.pass [data-status] { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pass .note { text-align: left; width: 100%; }

.member-status { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; transition: transform 300ms var(--ease-spring); }
.member-status:active { transform: scale(0.98); }
.member-status .li-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0; }
.member-status .li-icon svg { width: 26px; height: 26px; }
.member-status .li-body { flex: 1; display: grid; justify-items: start; gap: 6px; min-width: 0; }
.member-status .li-body > .badge { margin-top: 0 !important; min-height: 32px; padding: 0 0.85rem; font-weight: 700; background-image: var(--gloss-soft); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.14), inset 0 0 0 1px color-mix(in oklab, currentColor 30%, transparent); }
.member-status .days-bar { width: 100%; }
.member-status .li-sub { font-size: var(--text-sm); color: var(--muted); }
.member-status .li-chev { width: 20px; height: 20px; color: var(--flame-ink); flex-shrink: 0; }

/* ═════════ Recepción · Acceso ═════════ */
.gate-screen { display: grid; gap: 20px; }
@media (min-width: 960px) { .gate-screen { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }
.gate-panel { min-height: 420px; display: grid; place-items: center; }
.gate-idle { display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 460px; padding: 20px 8px; }
.gate-idle p { max-width: 42ch; }
.gate-idle-icon {
  display: grid; place-items: center; width: 112px; height: 112px; border-radius: 32px;
  background: color-mix(in oklab, var(--brand-ui) 14%, var(--card-2)); color: var(--brand-ui);
}
.gate-idle-icon svg { width: 54px; height: 54px; }
.gate-idle-icon.is-live { color: var(--ok); background: var(--ok-bg); animation: gate-pulse 2.2s ease-in-out infinite; }
@keyframes gate-pulse { 50% { box-shadow: 0 0 0 14px color-mix(in oklab, var(--ok) 0%, transparent), 0 0 0 0 transparent; transform: scale(1.03); } 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 35%, transparent); } }
.gate-manual { display: flex; gap: 8px; width: 100%; }
.gate-camera { width: 100%; border-radius: var(--radius-card); overflow: hidden; background: #000; }
.gate-camera video { display: block; width: 100%; max-height: 320px; object-fit: cover; }
.gate-feed { max-height: calc(100dvh - 140px); overflow: auto; }
@media (min-width: 960px) { .gate-feed { position: sticky; top: 84px; } }

/* El resultado: toda la pantalla de un color, legible de lejos */
.gate {
  position: fixed; inset: 0; z-index: 45;
  display: grid; place-items: center; padding: calc(24px + var(--safe-top)) 20px calc(24px + var(--safe-bottom));
  color: #fff; text-align: center;
  opacity: 0; transform: scale(1.02); transition: opacity 180ms ease, transform 250ms var(--ease-out-expo);
}
.gate-in { opacity: 1; transform: none; }
.gate-green { background: radial-gradient(120% 90% at 50% 20%, #10b981, #047857 70%); }
.gate-amber { background: radial-gradient(120% 90% at 50% 20%, #f59e0b, #b45309 70%); }
.gate-red   { background: radial-gradient(120% 90% at 50% 20%, #ef4444, #991b1b 70%); }
.gate-inner { display: grid; gap: 12px; justify-items: center; max-width: 720px; }
.gate-mark { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: rgb(255 255 255 / 0.18); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.35); }
.gate-mark svg { width: 56px; height: 56px; stroke-width: 2.6; }
.gate-word { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.85; }
.gate-person { display: grid; gap: 8px; justify-items: center; }
.gate-person .avatar { background: rgb(255 255 255 / 0.2); box-shadow: inset 0 0 0 3px rgb(255 255 255 / 0.5); }
.gate-name { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.gate-title { font-size: clamp(1.4rem, 3.4vw, 2rem); font-weight: 750; letter-spacing: -0.01em; }
.gate-detail { font-size: clamp(1rem, 2.2vw, 1.25rem); max-width: 40ch; opacity: 0.95; }
.gate-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }
.gate-btn { background: #fff; color: #111113; box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.5); }
.gate-btn-ghost { background: rgb(255 255 255 / 0.16); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.45); text-decoration: none; }
.gate-dismiss { position: absolute; top: calc(12px + var(--safe-top)); right: 12px; width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.16); color: #fff; cursor: pointer; display: grid; place-items: center; }
.gate-dismiss svg { width: 22px; height: 22px; }
.gate-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgb(0 0 0 / 0.2); }
.gate-progress span { display: block; height: 100%; width: 100%; background: rgb(255 255 255 / 0.85); transform-origin: left; animation: gate-countdown linear forwards; }
.gate-held .gate-progress { visibility: hidden; }
@keyframes gate-countdown { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .gate, .gate-idle-icon.is-live { transition: none; animation: none; }
}

/* ═════════ Clase muestra (público, sin cuenta) ═════════ */
.t-shell {
  display: grid; gap: 16px; align-content: start;
  max-width: 520px; margin: 0 auto; min-height: 100dvh;
  padding: calc(20px + var(--safe-top)) var(--gutter) calc(32px + var(--safe-bottom));
}
.t-head { display: grid; gap: 8px; }
.t-head h1 { font-size: var(--text-xl); letter-spacing: -0.022em; line-height: 1.15; }
.t-progress { display: grid; gap: 6px; margin: 2px 0 6px; }
.t-progress small { font-size: var(--text-sm); font-weight: 600; color: var(--muted); }
/* Una sola pieza que se llena por pasos */
.t-progress-bar { height: 10px; border-radius: var(--radius-full); background: var(--soft); overflow: hidden; }
.t-progress-bar span {
  display: block; height: 100%; border-radius: inherit; background-image: var(--flame-grad);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4);
  transition: width 500ms var(--ease-out-expo);
}
.t-back { justify-self: start; margin-left: -8px; }
.t-foot { display: flex; gap: 8px; align-items: flex-start; }
.t-foot svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--gold-ink); }
.t-floor-icon {
  display: grid; place-items: center; width: 48px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: color-mix(in oklab, var(--flame) 14%, transparent); color: var(--flame-ink);
}
.t-floor-icon svg { width: 22px; height: 22px; }

/* Lo que eligió, arriba de los pasos 2 y 3 */
.t-pick { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-radius: var(--radius-card); background: var(--card); border: 1px solid var(--line); }
.t-pick .li-body { flex: 1; min-width: 0; display: grid; }
.t-pick .li-title { font-weight: 650; }
.t-pick .li-sub { font-size: var(--text-sm); color: var(--muted); }

.t-curp { text-transform: uppercase; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.t-curp::placeholder { text-transform: none; letter-spacing: 0; }
.t-confirm, .t-lock { display: grid; gap: 10px; margin-top: 4px; font-size: var(--text-base); }
.t-confirm .row, .t-lock .row { flex-wrap: wrap; gap: 8px; }
textarea.input { min-height: 0; padding: 12px 14px; line-height: 1.45; resize: vertical; }

/* Responsiva: se lee completa dentro de su caja */
.t-waiver { max-height: 46dvh; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 10px; font-size: 0.9375rem; line-height: 1.55; }
.t-waiver h2 { font-size: 1.0625rem; }
.t-waiver:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }

/* Recuadro de firma: siempre blanco, como papel */
.t-sign { position: relative; height: 180px; border-radius: var(--radius-field); background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); overflow: hidden; touch-action: none; }
.t-sign canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.t-sign-line { position: absolute; left: 20px; right: 20px; bottom: 44px; border-top: 1.5px dashed #c9c9d0; pointer-events: none; }
.t-sign-hint { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font-size: var(--text-sm); color: #8b8b94; pointer-events: none; transition: opacity 200ms; }
.t-sign.is-signed .t-sign-hint { opacity: 0; }
.t-sign-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Trampa para bots: fuera de la vista (no display:none, que algunos bots saltan) */
.t-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Pase */
.pass-card.is-off .pass-qr { background: #f4f4f5; border-radius: 16px; }
.t-pass-off { color: #52525b; }
.t-when { display: flex; gap: 14px; }
.t-when .class-bar { min-height: 56px; }
.t-when .li-body { display: grid; gap: 4px; }
.t-when h2 { font-size: var(--text-lg); }
.t-spot { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); }
.t-spot svg { width: 16px; height: 16px; color: var(--flame-ink); }
.t-actions { display: grid; gap: 10px; }
.t-note-cta { display: grid; gap: 10px; justify-items: start; font-size: var(--text-base); }
.t-pass-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
.t-danger { color: var(--bad); }
.t-danger:hover { background: var(--bad-bg); }
@media (prefers-reduced-motion: reduce) { .t-progress-bar span { transition: none; } }

/* ═════════ Aviso de privacidad ═════════ */
.legal { max-width: 720px; margin: 0 auto; padding: calc(24px + var(--safe-top)) var(--gutter) 48px; display: grid; gap: 14px; line-height: 1.6; }
.legal .page-title { margin: 0; font-size: var(--text-xl); }
.legal .card { display: grid; gap: 8px; }
.legal h2 { font-size: 1.0625rem; }
.legal ul { padding-left: 1.2em; display: grid; gap: 4px; }
.legal-lead { font-size: 1.0625rem; color: var(--muted); }
.legal-foot { font-size: var(--text-sm); color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }

/* Cortesía en la puerta: lo que recepción revisa antes de dejarla pasar */
.gate-check {
  display: flex; align-items: center; gap: 8px; max-width: 40ch;
  padding: 10px 16px; border-radius: 1rem; text-align: left;
  background: rgb(255 255 255 / 0.16); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
  font-size: clamp(1rem, 2.2vw, 1.2rem); font-weight: 650;
}
.gate-check svg { width: 22px; height: 22px; flex-shrink: 0; }

/* ───────── Candado de membresía ───────── */
.lock-screen { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); }
.lock-card { width: min(100%, 420px); padding: 28px 20px; gap: 18px; }
.lock-mark { position: relative; display: grid; place-items: center; justify-self: center; width: 112px; height: 112px; }
.lock-icon { --ic: #dc2626; --ic-ink: #fff; width: 76px; height: 76px; border-radius: 24px; animation: m-pop 700ms var(--ease-spring) both, lock-shake 600ms 900ms var(--ease-spring) both; }
.lock-icon svg { width: 38px; height: 38px; }
.lock-ring { position: absolute; inset: 0; border-radius: 34px; border: 2px solid color-mix(in oklab, #dc2626 55%, transparent); animation: lock-ring 2.4s ease-out infinite; }
@keyframes lock-ring { from { transform: scale(0.7); opacity: 0.9; } to { transform: scale(1.25); opacity: 0; } }
@keyframes lock-shake { 0%, 100% { transform: none; } 20% { transform: rotate(-9deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(2deg); } }
.lock-last { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-field); background: var(--card-2); }
.lock-last .li-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; --ic: #dc2626; --ic-ink: #fff; }
.lock-last .li-icon svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .lock-icon, .lock-ring { animation: none; } }

/* ───────── Panel de desarrollo (/desarrollo) ─────────
 * Fuera de los gyms: la marca es una llave en dorado oscuro («oxford») para
 * que nunca se confunda con la app de un gym. */
.dev-mark { --ic: var(--oxford); --ic-ink: var(--gold); }
.dev-avatar { background: var(--oxford); color: var(--gold); }
.dev-mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.92em; overflow-wrap: anywhere; }
.dev-wrap { overflow-wrap: anywhere; }
.dev-h3 { display: flex; align-items: center; gap: 8px; font-size: var(--text-base); }
.dev-h3 svg { width: 18px; height: 18px; color: var(--bad); }
.dev-plain { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; font-size: var(--text-sm); }
.dev-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dev-head > div:first-child { min-width: 0; }
.dev-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.dev-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dev-tiles-5 { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.dev-tile { display: grid; gap: 2px; align-content: start; }
.dev-tile .stat-num { line-height: 1.15; }
.dev-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; min-height: 36px; }
.dev-tile-top .li-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; }
.dev-tile-top .li-icon svg { width: 18px; height: 18px; }
.ic-dev-db   { --ic: #3987e5; --ic-ink: #fff; }
.ic-dev-disk { --ic: #10b981; --ic-ink: #fff; }
.ic-dev-mem  { --ic: #a855f7; --ic-ink: #fff; }
.ic-dev-ban, .ic-dev-clean { --ic: #dc2626; --ic-ink: #fff; }
.dev-head > .li-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; }
.dev-head > .li-icon svg { width: 20px; height: 20px; }

/* Revisión de seguridad: ícono + palabra en cada renglón (no solo color) */
.dev-checks { display: grid; gap: 2px; padding: 0; margin: 0; list-style: none; }
.dev-check { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.dev-check:first-child { border-top: 0; }
.dev-check .li-title { font-weight: 600; }
.dev-check-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; flex-shrink: 0; margin-top: 1px; }
.dev-check-ico svg { width: 15px; height: 15px; }
.dev-check.is-ok .dev-check-ico { background: var(--ok-bg); color: var(--ok); }
.dev-check.is-warn .dev-check-ico { background: var(--warn-bg); color: var(--warn); }
.dev-check.is-bad .dev-check-ico { background: var(--bad-bg); color: var(--bad); }

.dev-kv { display: grid; gap: 0; margin: 0; }
.dev-kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.dev-kv > div:first-child { border-top: 0; }
.dev-kv dt { color: var(--muted); }
.dev-kv dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; min-width: 0; }

/* Bitácora */
.dev-filters { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .dev-filters { grid-template-columns: 200px 1fr auto; } }
.dev-events { display: grid; padding: 0; margin: 0; list-style: none; }
.dev-event { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.dev-event:first-child { border-top: 0; }
.dev-event .li-body { flex: 1; min-width: 0; }
.dev-event .li-title { font-weight: 600; overflow-wrap: anywhere; }
.dev-dot { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; margin-top: 7px; background: var(--muted); }
.dev-dot.is-ok { background: var(--ok); }
.dev-dot.is-bad { background: var(--bad); }
.dev-block-form { padding: 14px; border-radius: var(--radius-field); background: var(--card-2); box-shadow: inset 3px 0 0 var(--bad), inset 0 0 0 1px var(--line); }
.dev-block-form fieldset { border: 0; padding: 0; margin: 0; }
.dev-block-form legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: var(--text-sm); }

/* Tamaños: barra de una sola pieza con brillo */
.dev-sizes { display: grid; gap: 14px; padding: 0; margin: 0; list-style: none; }
.dev-size-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.dev-size-top .li-title { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.dev-size-top strong { white-space: nowrap; }
.dev-bar { display: block; height: 8px; margin: 6px 0 4px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.dev-bar-lg { height: 12px; }
.dev-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--gloss), var(--flame-grad); }

/* Limpieza */
.dev-clean-list { display: grid; padding: 0; margin: 0; list-style: none; }
.dev-clean-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.dev-clean-list li:first-child { border-top: 0; }
.dev-clean-list strong { white-space: nowrap; }
.dev-clean-list .is-zero { color: var(--muted); }
.dev-clean-list .is-zero strong { font-weight: 500; }

.dev-pending .li-icon { --ic: #f59e0b; --ic-ink: #fff; }
.dev-main ul.list { padding: 0; list-style: none; }
@media (max-width: 480px) { .dev-actions { width: 100%; } .dev-actions .btn { flex: 1 1 auto; } }