/* ============================================================
   notas.css — components specific to "Notas de acarreo"
   Builds on tokens.css + base.css (same iOS design system as ddt12)
   ============================================================ */

/* ---------- Dashboard stat counters ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 16px; }
.stat-card {
  background: var(--bg-elevated); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  padding: 16px;
}
.stat-card .sc-top { display: flex; align-items: center; justify-content: space-between; }
.stat-card .sc-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; color: #fff; }
.stat-card .sc-val { font: var(--t-title); letter-spacing: -0.5px; margin-top: 10px; }
.stat-card .sc-lbl { font: var(--t-subhead); color: var(--label-secondary); margin-top: 2px; }

/* ---------- Stepper (wizard 4 pasos) ---------- */
.stepper { display: flex; align-items: center; padding: 8px 24px 4px; }
.stepper .st { display: flex; align-items: center; flex: 1; }
.stepper .st:last-child { flex: 0; }
.stepper .dot {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font: var(--t-footnote); font-weight: 700;
  background: var(--fill); color: var(--label-secondary);
}
.stepper .st.done .dot, .stepper .st.active .dot { background: var(--accent); color: #fff; }
.stepper .bar { flex: 1; height: 3px; background: var(--fill); margin: 0 6px; border-radius: 2px; }
.stepper .st.done .bar { background: var(--accent); }
.step-label { text-align: center; font: var(--t-subhead); color: var(--label-secondary); margin: 4px 24px 0; }

/* ---------- Note cards (lista de notas) ---------- */
.note-card {
  display: block; text-decoration: none; color: var(--label);
  background: var(--bg-elevated); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  margin: 0 16px 10px; padding: 14px 16px;
}
.note-card:active { background: var(--fill); }
.note-card .nc-top { display: flex; align-items: center; justify-content: space-between; }
.note-card .nc-id { font: var(--t-headline); }
.note-card .nc-route { display: flex; align-items: center; gap: 6px; margin-top: 8px; font: var(--t-callout); }
.note-card .nc-route .arrow { color: var(--label-tertiary); }
.note-card .nc-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; font: var(--t-footnote); color: var(--label-secondary); }
.note-card .nc-meta .d { display: flex; align-items: center; gap: 4px; }

/* ---------- Read-only summary (confirmar / detalle) ---------- */
.summary { margin: 0 16px; background: var(--bg-elevated); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.summary .sr { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; position: relative; gap: 12px; }
.summary .sr + .sr::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--separator); }
.summary .sr .k { color: var(--label-secondary); font: var(--t-callout); }
.summary .sr .v { font: var(--t-callout); font-weight: 600; text-align: right; }

/* ---------- Timeline (actividad de nota) ---------- */
.timeline { margin: 0 16px; padding: 4px 0; }
.tl-item { display: flex; gap: 12px; position: relative; padding: 6px 0; }
.tl-item .tl-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; color: #fff; font-size: 15px; z-index: 1; }
.tl-item:not(:last-child)::before { content: ""; position: absolute; left: 14.5px; top: 34px; bottom: -6px; width: 1.5px; background: var(--separator); }
.tl-item .tl-t { font: var(--t-callout); font-weight: 600; }
.tl-item .tl-d { font: var(--t-footnote); color: var(--label-secondary); }

/* ---------- Evidence gallery group header ---------- */
.gal-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 20px 8px; }
.gal-head .gh-date { font: var(--t-headline); }
.gal-head .gh-count { font: var(--t-footnote); color: var(--accent); font-weight: 600; }

/* ---------- Camera (capturar evidencia) ---------- */
.camera { position: absolute; inset: 0; background: #0b0b0c; display: flex; flex-direction: column; z-index: 40; }
.camera .cam-view {
  flex: 1; position: relative; display: grid; place-items: center;
  background: radial-gradient(120% 80% at 50% 30%, #3a3f47, #15171b 70%);
  color: rgba(255,255,255,.5); font-size: 64px;
}
.camera .cam-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 16px 20px; }
.camera .cam-top .cbtn { color: #fff; background: rgba(0,0,0,.35); border: 0; border-radius: 999px; padding: 8px 12px; font: var(--t-subhead); font-weight: 600; }
.camera .cam-modes { display: flex; justify-content: center; gap: 28px; padding: 8px 0; color: rgba(255,255,255,.6); font: var(--t-subhead); font-weight: 600; }
.camera .cam-modes .on { color: #FFD60A; }
.camera .cam-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 32px 30px; }
.camera .thumb { width: 46px; height: 46px; border-radius: 10px; background: #2a2d33; display: grid; place-items: center; font-size: 22px; }
.camera .shutter { width: 72px; height: 72px; border-radius: 50%; background: #fff; border: 4px solid rgba(255,255,255,.4); }
.camera .flip { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; border: 0; font-size: 20px; }

/* full-screen evidence detail */
.evi-full { flex: 1; display: grid; place-items: center; background: #0b0b0c; color: rgba(255,255,255,.5); font-size: 72px; }

/* ---------- Printer status ---------- */
.printer-card { margin: 0 16px; background: var(--bg-elevated); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 18px; }
.printer-card .pc-row { display: flex; align-items: center; gap: 14px; }
.printer-card .pc-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 24px; }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; }

/* ---------- FAB above the tab bar ---------- */
.fab-tab { bottom: 92px; }

/* ---------- FAB speed-dial (acciones del dashboard) ---------- */
.scrim { position:absolute; inset:0; background:rgba(0,0,0,.38); z-index:24; opacity:0; pointer-events:none; transition:opacity .2s; }
.device-screen.sd-open .scrim { opacity:1; pointer-events:auto; }
.sd-actions {
  position:absolute; right:18px; bottom:166px; z-index:27;
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
  opacity:0; transform:translateY(12px) scale(.96); transform-origin:bottom right;
  pointer-events:none; transition:opacity .2s, transform .2s;
}
.device-screen.sd-open .sd-actions { opacity:1; transform:none; pointer-events:auto; }
.sd-item { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--label); }
.sd-item .sd-label { background:var(--bg-elevated); box-shadow:var(--shadow-card); border-radius:10px;
  padding:7px 12px; font:var(--t-subhead); font-weight:600; white-space:nowrap; }
.sd-item .sd-ic { width:46px; height:46px; border-radius:50%; color:#fff; display:grid; place-items:center;
  font-size:20px; box-shadow:var(--shadow-fab); flex:none; }
.fab .fab-x { display:inline-block; transition:transform .25s; }
.device-screen.sd-open .fab .fab-x { transform:rotate(45deg); }