/* Demos de Simancón: un móvil en escritorio, pantalla completa en el móvil */
.demo-wrap{max-width:var(--maxw);margin:0 auto;padding:16px 24px 96px;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:56px;align-items:start}
.demo-side h1{font-size:clamp(2.2rem,4.6vw,3.6rem);max-width:14ch}
.demo-side .lead{margin-top:20px;font-size:1.15rem}
.demo-side ol{margin:28px 0 0;padding-left:22px;color:var(--graphite)}
.demo-side li{margin:8px 0}
.demo-note{margin-top:24px;font-size:.95rem;color:var(--muted)}
.demo-side .hero-actions{margin-top:30px}
.phone{position:sticky;top:20px;background:var(--ink);border-radius:38px;padding:12px;box-shadow:0 30px 60px -24px rgba(22,21,15,.55)}
.screen{background:var(--steel);border-radius:28px;overflow:hidden;height:760px;display:flex;flex-direction:column}
@media (max-width:900px){
  .demo-wrap{grid-template-columns:1fr;gap:28px}
  .phone{position:static;background:none;border-radius:0;padding:0;box-shadow:none;margin:0 -24px}
  .screen{border-radius:0;height:auto;min-height:80vh}
}
.app-bar{background:var(--tape);border-bottom:2px solid var(--ink);padding:14px 16px 12px;display:flex;align-items:center;justify-content:space-between}
.app-bar b{font:800 1.35rem/1 var(--display)}
.app-bar small{font:600 .8rem var(--display);letter-spacing:.06em;text-transform:uppercase}
.tabs{display:flex;background:#fff;border-bottom:1px solid var(--steel-2)}
.tabs button{flex:1;border:0;background:none;padding:13px 6px;font:700 1rem var(--display);letter-spacing:.02em;color:var(--muted);border-bottom:3px solid transparent;cursor:pointer}
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink)}
.view{flex:1;overflow-y:auto;padding:16px}
.view h2{font-size:1.6rem;margin:4px 0 12px}
.f{margin-bottom:14px}
.f>label,.f>.lbl{display:block;font-weight:600;margin-bottom:6px;font-size:.95rem}
.f select,.f input[type=text],.f input[type=date],.f input[type=number],.f textarea{width:100%;font:500 1rem var(--body);padding:11px 12px;border:2px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink)}
.f textarea{min-height:76px;resize:vertical}
.workers{border:2px solid var(--ink);border-radius:8px;background:#fff}
.workers label{display:grid;grid-template-columns:24px 1fr 76px;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--steel-2);font-weight:500}
.workers label:last-child{border-bottom:0}
.workers input[type=checkbox]{width:20px;height:20px;accent-color:var(--ink)}
.workers input[type=number]{padding:7px 8px;border:1.5px solid var(--ink);border-radius:6px;width:100%;font:600 1rem var(--body)}
.sig{width:100%;height:150px;background:#fff;border:2px dashed var(--ink);border-radius:8px;touch-action:none;display:block}
.sig-row{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:.9rem;color:var(--muted)}
.linkbtn{background:none;border:0;color:var(--ink);text-decoration:underline;text-underline-offset:.2em;font:600 .92rem var(--body);cursor:pointer;padding:4px 0}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.thumbs img{width:64px;height:64px;object-fit:cover;border-radius:6px;border:1.5px solid var(--ink)}
.filebtn{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--ink);border-radius:8px;padding:10px 14px;background:#fff;font-weight:600;cursor:pointer}
.filebtn input{position:absolute;opacity:0;width:1px;height:1px}
.app-btn{width:100%;justify-content:center;margin-top:8px}
.msg{font-weight:600;margin:8px 0;min-height:1.3em;color:var(--red)}
.rows{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.rows li{padding:12px 2px;border-bottom:1px solid var(--steel-2);display:grid;grid-template-columns:1fr auto;gap:4px 12px;cursor:pointer}
.rows li:hover{background:#FFF9DB}
.rows .t{font-weight:600}
.rows .s{color:var(--muted);font-size:.9rem;grid-column:1}
.rows .n{font:800 1.4rem var(--display);grid-row:1/span 2;grid-column:2;align-self:center;text-align:right}
.empty{color:var(--muted);padding:20px 0}
.bar{height:16px;background:var(--steel-2);border-radius:3px;overflow:hidden;margin:6px 0 2px}
.bar i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--tape) 0 9px,var(--tape-deep) 9px 10px)}
.sum-row{padding:10px 0;border-bottom:1px solid var(--steel-2)}
.sum-row .hd{display:flex;justify-content:space-between;font-weight:600}
.doc{background:#fff;border:1.5px solid var(--ink);border-radius:6px;padding:16px;font-size:.95rem}
.doc h3{font-size:1.4rem;margin-bottom:6px}
.doc dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0}
.doc dt{color:var(--muted)}
.doc dd{margin:0;font-weight:500}
.doc table{width:100%;border-collapse:collapse;margin:8px 0}
.doc td,.doc th{text-align:left;padding:5px 0;border-bottom:1px solid var(--steel-2)}
.doc img.firma{max-width:220px;border-bottom:1.5px solid var(--ink);display:block;margin-top:6px}
.pill{display:inline-block;font:700 .78rem var(--display);letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1.5px solid var(--ink)}
.pill.ok{background:#DDF3E4}
.pill.warn{background:#FFE9A8}
.pill.bad{background:var(--red);color:#fff;border-color:var(--red)}
.chipbar{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px}
.chipbar button{flex:none;border:2px solid var(--ink);background:#fff;border-radius:999px;padding:7px 12px;font-weight:600;cursor:pointer}
.chipbar button[aria-pressed=true]{background:var(--tape)}
.search{width:100%;font:500 1rem var(--body);padding:11px 12px;border:2px solid var(--ink);border-radius:8px;margin-bottom:10px}
.back{margin-bottom:10px}
.hist{list-style:none;padding:0;margin:8px 0 0}
.hist li{padding:8px 0;border-bottom:1px solid var(--steel-2);font-size:.92rem}
.hist time{color:var(--muted);display:block;font-size:.82rem}
@media print{.top,.foot,.demo-side,.app-bar,.tabs,.no-print{display:none!important}.phone,.screen{box-shadow:none;background:#fff;height:auto;padding:0}}
/* En el móvil, la demo primero: los pasos sobran porque la app se explica sola */
@media (max-width:900px){.demo-side ol,.demo-note{display:none}.demo-side .hero-actions{margin-top:20px}}