/* Demo interactivo — recreación de las pantallas de la app.
   Vive dentro de .demo-screen (266 × 571 aprox, el interior del iPhone). */

.dm {
  position: absolute;
  inset: 0;
  background: #FAFAFC;
  color: #0A0A14;
  display: flex;
  flex-direction: column;
  font-size: 11px;
  border-radius: 38px;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}
.dm button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ── Header ── */
.dm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 46px 14px 10px;
  background: #FAFAFC;
  flex-shrink: 0;
}
.dm-av {
  width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, #7C3AED, #6D28D9);
  color: #fff; font-weight: 800; font-size: 11px;
  display: grid; place-items: center;
}
.dm-av.pink { background: linear-gradient(135deg, #EC4899, #C026D3); }
.dm-back {
  width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
  background: #EDE9FE; color: #6D28D9; font-size: 18px; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}
.dm-sm { font-size: 9px; color: #6B7280; font-weight: 600; }
.dm-bg { font-size: 15px; font-weight: 800; letter-spacing: -0.3px; }

/* ── Scroll ── */
.dm-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 14px 62px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  -webkit-overflow-scrolling: touch;
}
.dm-scroll::-webkit-scrollbar { width: 0; }

.dm-t {
  font-size: 10px; font-weight: 800; margin-top: 6px;
}
.dm-t::after {
  content: ""; display: block; width: 16px; height: 2px;
  background: #7C3AED; border-radius: 2px; margin-top: 2px;
}

/* ── Tarjeta principal ── */
.dm-hero {
  background: linear-gradient(135deg, #7C3AED, #6D28D9);
  border-radius: 14px; padding: 12px; color: #fff;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.22);
}
.dm-hero.blue { background: linear-gradient(135deg, #3B82F6, #1E40AF); box-shadow: 0 6px 16px rgba(59,130,246,.22); }
.dm-hero-l { font-size: 9px; opacity: .85; font-weight: 600; }
.dm-hero-n { font-size: 24px; font-weight: 800; letter-spacing: -.8px; margin: 2px 0 6px; }
.dm-pill {
  display: inline-block; background: rgba(255,255,255,.2);
  padding: 3px 7px; border-radius: 6px; font-size: 8.5px; font-weight: 600;
}

/* ── Filas ── */
.dm-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: #fff; border: 1px solid #E5E7EB; border-radius: 11px; padding: 8px 10px;
  transition: border-color .15s, transform .1s;
}
.dm-row:active { transform: scale(.985); }
.dm-row-txt { flex: 1; min-width: 0; }
.dm-row-txt b { display: block; font-size: 11px; font-weight: 700; }
.dm-row-txt small { display: block; font-size: 8.5px; color: #6B7280; margin-top: 1px; }
.dm-check {
  width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid #D1D5DB; display: grid; place-items: center;
  font-size: 10px; font-weight: 800; color: #fff;
}
.dm-toma.on { border-color: #10B981; background: #ECFDF5; }
.dm-toma.on .dm-check { background: #10B981; border-color: #10B981; }
.dm-pic {
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, #A78BFA, #7C3AED);
  color: #fff; font-weight: 800; font-size: 11px; display: grid; place-items: center;
}
.dm-badges { font-size: 10px; letter-spacing: 1px; }
.dm-chev { color: #9CA3AF; font-size: 14px; }

/* ── Pendientes / vacío ── */
.dm-pend { display: flex; flex-direction: column; gap: 5px; }
.dm-pend-r {
  display: flex; gap: 7px; align-items: flex-start;
  background: #FEF3C7; border: 1px solid #FDE68A; border-radius: 10px;
  padding: 7px 9px; font-size: 9.5px; font-weight: 600; color: #78350F;
}
.dm-empty {
  background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46;
  border-radius: 10px; padding: 9px; text-align: center; font-size: 10px; font-weight: 700;
}

/* ── Inventario ── */
.dm-inv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dm-inv-c {
  background: #fff; border: 1px solid #E5E7EB; border-radius: 11px;
  padding: 9px 4px; text-align: center;
}
.dm-inv-i { font-size: 15px; line-height: 1; margin-bottom: 3px; }
.dm-inv-c b { display: block; font-size: 12px; font-weight: 800; }
.dm-inv-c small { font-size: 7.5px; color: #6B7280; }

/* ── Ficha de caballo ── */
.dm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dm-st { background: #fff; border: 1px solid #E5E7EB; border-radius: 11px; padding: 9px 4px; text-align: center; }
.dm-st b { display: block; font-size: 15px; font-weight: 800; color: #7C3AED; }
.dm-st small { font-size: 7.5px; color: #6B7280; }
.dm-chart {
  display: flex; align-items: flex-end; gap: 8px; height: 66px;
  background: #fff; border: 1px solid #E5E7EB; border-radius: 11px; padding: 9px;
}
.dm-bar { flex: 1; background: linear-gradient(180deg, #A78BFA, #7C3AED); border-radius: 4px 4px 2px 2px; }
.dm-tl { display: flex; flex-direction: column; gap: 6px; }
.dm-tl-r {
  display: flex; gap: 8px; align-items: flex-start;
  background: #fff; border: 1px solid #E5E7EB; border-radius: 11px; padding: 8px 10px;
}
.dm-tl-r b { display: block; font-size: 10px; font-weight: 700; }
.dm-tl-r small { font-size: 8.5px; color: #6B7280; }
.dm-dot { width: 7px; height: 7px; border-radius: 50%; background: #7C3AED; margin-top: 4px; flex-shrink: 0; }
.dm-dot.o { background: #F59E0B; } .dm-dot.g { background: #10B981; } .dm-dot.p { background: #EC4899; }

/* ── Gestación ── */
.dm-preg {
  background: linear-gradient(160deg, #fff, #FCE7F3);
  border: 1px solid #FBCFE8; border-radius: 14px; padding: 12px;
  display: flex; flex-direction: column; gap: 9px;
}
.dm-preg-top { display: flex; gap: 9px; align-items: center; }
.dm-preg-top b { display: block; font-size: 11px; font-weight: 800; color: #9D174D; }
.dm-preg-top small { font-size: 9.5px; color: #6B7280; }
.dm-heart { font-size: 20px; }
.dm-prog { height: 6px; border-radius: 999px; background: rgba(192,38,211,.15); overflow: hidden; }
.dm-prog-b { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #EC4899, #C026D3); transition: width .15s; }
.dm-preg-st { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; text-align: center; }
.dm-preg-st small { display: block; font-size: 7.5px; color: #6B7280; }
.dm-preg-st b { font-size: 10px; font-weight: 800; }
.dm-stal { display: flex; gap: 8px; align-items: center; background: rgba(255,255,255,.7); border-radius: 10px; padding: 7px; }
.dm-stal-p { font-size: 18px; }
.dm-stal small { display: block; font-size: 7.5px; color: #6B7280; }
.dm-stal b { font-size: 10px; }
.dm-range { width: 100%; accent-color: #C026D3; }
.dm-hint { font-size: 8.5px; color: #6B7280; text-align: center; }

/* ── Gastos ── */
.dm-seg { display: flex; background: #fff; border: 1px solid #E5E7EB; border-radius: 9px; padding: 2px; }
.dm-seg button { flex: 1; padding: 5px; border-radius: 7px; font-size: 9px; font-weight: 700; color: #6B7280; }
.dm-seg button.on { background: #7C3AED; color: #fff; }
.dm-pie {
  width: 112px; height: 112px; border-radius: 50%; margin: 6px auto 2px; position: relative;
}
.dm-pie span {
  position: absolute; inset: 24px; background: #fff; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
}
.dm-legend { display: flex; flex-direction: column; gap: 4px; }
.dm-lg {
  display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 600;
  background: #fff; border: 1px solid #E5E7EB; border-radius: 9px; padding: 6px 8px;
}
.dm-lg span { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
.dm-lg b { margin-left: auto; font-weight: 800; }

/* ── Nav inferior ── */
.dm-nav {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  display: flex; align-items: center; justify-content: space-around;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  border: 1px solid #E5E7EB; border-radius: 18px; padding: 7px 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.dm-nav button { font-size: 15px; opacity: .38; padding: 2px 6px; transition: opacity .15s, transform .15s; }
.dm-nav button.on { opacity: 1; transform: translateY(-1px); }
.dm-plus {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #7C3AED, #6D28D9);
  color: #fff !important; font-size: 17px !important; font-weight: 700;
  opacity: 1 !important; line-height: 1;
  box-shadow: 0 4px 12px rgba(124,58,237,.35);
}

/* ── Sheet de registro rápido ── */
.dm-sheet-bg { position: absolute; inset: 0; background: rgba(10,10,20,.35); }
.dm-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff; border-radius: 20px 20px 38px 38px; padding: 8px 14px 20px;
  animation: dmUp .22s ease;
}
@keyframes dmUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.dm-sheet-g { width: 32px; height: 3px; border-radius: 2px; background: #D1D5DB; margin: 0 auto 8px; }
.dm-sheet-t { font-size: 11px; font-weight: 800; margin-bottom: 8px; }
.dm-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dm-sheet-grid button {
  background: #F4F4F8; border: 1px solid #E5E7EB; border-radius: 12px;
  padding: 10px 2px; font-size: 8px; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.dm-sheet-grid button span { font-size: 17px; }
.dm-sheet-grid button:active { background: #EDE9FE; border-color: #7C3AED; }

/* ── Toast ── */
.dm-toast {
  position: absolute; left: 14px; right: 14px; bottom: 62px;
  background: #0A0A14; color: #fff; border-radius: 11px;
  padding: 9px 11px; font-size: 9.5px; font-weight: 700; text-align: center;
  animation: dmUp .18s ease;
}