/* Vista del cliente final: una columna pensada para el móvil */
body{padding-block:20px 40px}
h1{font-size:32px}
.stack{display:flex;flex-direction:column;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{max-height:46px;max-width:140px;object-fit:contain}
.brand .bn{font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:.02em}
.sel{user-select:all}
.codebox{display:flex;gap:8px}
.codebox input{font-family:var(--f-mono);letter-spacing:.06em;text-transform:lowercase}
.powered{text-align:center;font-size:12px;color:var(--muted)}
.powered a{color:var(--muted)}
.status-hero{display:flex;gap:16px;align-items:center;padding:16px;border-radius:12px;background:var(--accent-soft)}
.status-hero.done{background:var(--ok-soft)}
.sh-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.status-hero .now{font-family:var(--f-display);font-weight:700;font-size:30px;line-height:1;color:var(--accent)}
.status-hero.done .now{color:var(--ok)}
@media (max-width:420px){.status-hero{flex-direction:column;align-items:flex-start}}
.ring{position:relative;width:120px;height:120px;flex:none}
.ring svg{transform:rotate(-90deg);display:block}
.ring-bg{fill:none;stroke:var(--panel);stroke-width:10}
.ring-fg{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round}
.ring.done .ring-fg{stroke:var(--ok)}
.ring-n{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:700;font-size:34px;color:var(--ink)}
.ring-n small{font-size:16px;margin-left:1px}
@media (prefers-reduced-motion:no-preference){.ring-fg{transition:stroke-dashoffset 1s ease}}
.live{display:flex;align-items:center;gap:10px;font-size:14px;background:var(--field);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.pulse{width:10px;height:10px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 0 var(--ok)}
@media (prefers-reduced-motion:no-preference){.pulse{animation:pl 1.6s infinite}}
@keyframes pl{0%{box-shadow:0 0 0 0 rgba(47,122,69,.5)}100%{box-shadow:0 0 0 10px rgba(47,122,69,0)}}
.plist{display:flex;flex-direction:column;gap:10px}
.pi-top{display:flex;justify-content:space-between;gap:10px;font-size:15px}
.bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:4px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.okc{color:var(--ok)}
.feed{display:flex;flex-direction:column;gap:14px}
.fi{display:flex;flex-direction:column;gap:6px;padding-left:12px;border-left:3px solid var(--accent-soft)}
.fi p{margin:0;white-space:pre-wrap}
.fd{font-size:12px;color:var(--muted)}
.fi img{border-radius:10px;max-height:420px;object-fit:cover;width:100%;display:block;border:1px solid var(--line)}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.timeline li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:start;position:relative;padding-bottom:18px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:13px;top:24px;bottom:-2px;width:2px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline li.done::before{background:var(--accent)}
.dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:var(--panel);display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--muted);position:relative;z-index:1}
.timeline li.done .dot{background:var(--accent);border-color:var(--accent);color:var(--panel)}
.timeline li.current .dot{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.timeline .t{font-weight:600;padding-top:3px}
.timeline li:not(.done):not(.current) .t{color:var(--muted);font-weight:500}
.timeline .d{font-family:var(--f-mono);font-size:12px;color:var(--muted);padding-top:5px;white-space:nowrap}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:14px;margin:0}
.kv dt{color:var(--muted)} .kv dd{margin:0;overflow-wrap:anywhere}
.note{background:var(--field);border-left:3px solid var(--accent);padding:10px 12px;white-space:pre-wrap}
/* postventa */
.probsum{cursor:pointer;font-weight:600;color:var(--accent);list-style:none}
.probsum::-webkit-details-marker{display:none}
.probsum::before{content:"⚠ ";color:var(--warn)}
.fi.inc p{margin:4px 0 0}