:root {
  --blue:#123866;
  --blue2:#18559a;
  --bg:#f2f4f7;
  --surface:#ffffff;
  --text:#101828;
  --muted:#667085;
  --border:#dfe3e8;
  --green:#067647;
  --green-bg:#ecfdf3;
  --red:#b42318;
  --yellow:#b54708;
  --yellow-bg:#fffaeb;
}

* {
  box-sizing:border-box;
}

html,
body {
  margin:0;
  padding:0;
  min-height:100%;
}

body {
  background:var(--bg);
  color:var(--text);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button,
input {
  font:inherit;
}

button {
  cursor:pointer;
}

.hidden {
  display:none !important;
}

.app {
  width:100%;
  min-height:100vh;
}

.header {
  background:
    linear-gradient(
      135deg,
      #0d2c50,
      #185aa2
    );

  color:white;

  min-height:112px;

  padding:
    20px
    max(18px, env(safe-area-inset-left));

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:16px;
}

.brand-small {
  display:block;

  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;

  opacity:.70;
}

.header h1 {
  margin:3px 0 0;

  font-size:30px;
  letter-spacing:-.04em;
}

.header p {
  margin:2px 0 0;

  font-size:12px;
  opacity:.72;
}

.online-box {
  display:flex;
  align-items:center;
  gap:7px;

  padding:7px 10px;

  background:
    rgba(255,255,255,.12);

  border-radius:999px;

  font-size:11px;
}

.online-dot {
  width:8px;
  height:8px;

  border-radius:50%;

  background:#32d583;
}

.online-dot.offline {
  background:#f79009;
}

.active-control {
  margin:12px;

  padding:15px;

  background:#fff;

  border:1px solid var(--border);
  border-radius:14px;
}

.active-title {
  color:var(--muted);

  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;

  margin-bottom:8px;
}

.active-row {
  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:12px;
}

.active-row strong,
.active-row span {
  display:block;
}

.active-row > div:first-child strong {
  font-size:15px;
}

.active-row > div:first-child span {
  margin-top:2px;

  color:var(--muted);
  font-size:11px;
}

.counter-pill {
  text-align:center;

  background:#eff4ff;

  color:#1849a9;

  border-radius:12px;

  padding:8px 12px;
}

.counter-pill strong {
  font-size:18px;
}

.counter-pill span {
  font-size:9px;
}

main {
  padding:
    0 12px 30px;
}

.operation-card,
.history-card {
  background:#fff;

  border:1px solid var(--border);
  border-radius:16px;

  padding:16px;

  margin-bottom:12px;
}

.field label {
  display:block;

  margin-bottom:7px;

  color:#344054;

  font-size:11px;
  font-weight:850;
}

.product-row {
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    104px;

  gap:8px;
}

input {
  width:100%;
  height:52px;

  padding:0 13px;

  border:
    1.5px solid #cfd4dc;

  border-radius:12px;

  outline:none;

  color:#101828;
  background:#fff;

  font-size:16px;
}

input:focus {
  border-color:#2e6faf;

  box-shadow:
    0 0 0 3px
    rgba(46,111,175,.11);
}

.scan-button {
  border:0;
  border-radius:12px;

  background:#eaf2fb;
  color:#164b84;

  font-size:11px;
  font-weight:850;
}

.scan-icon {
  display:block;
  font-size:17px;
  line-height:17px;
  margin-bottom:2px;
}

.product-status {
  margin-top:10px;

  padding:11px 12px;

  border-radius:11px;

  background:#f8fafc;

  display:flex;
  justify-content:space-between;
}

.product-status span,
.product-status strong {
  display:block;
}

.product-status span {
  color:var(--muted);
  font-size:9px;
}

.product-status strong {
  margin-top:2px;
  font-size:13px;
}

.quantity-field {
  margin-top:15px;
}

.quantity-control {
  display:grid;

  grid-template-columns:
    52px 1fr 52px;

  gap:7px;
}

.quantity-control input {
  text-align:center;

  font-size:20px;
  font-weight:800;
}

.quantity-btn {
  border:0;

  border-radius:12px;

  background:#f2f4f7;

  color:#344054;

  font-size:25px;
}

.register-button {
  width:100%;

  min-height:54px;

  margin-top:16px;

  border:0;
  border-radius:13px;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--blue2)
    );

  color:#fff;

  font-size:14px;
  font-weight:900;
  letter-spacing:.04em;
}

.last-read {
  display:grid;

  grid-template-columns:
    42px 1fr auto;

  align-items:center;

  gap:10px;

  margin-bottom:12px;

  padding:12px 14px;

  border:
    1px solid #abefc6;

  border-radius:14px;

  background:var(--green-bg);
}

.check {
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#12b76a;

  color:white;

  font-size:19px;
  font-weight:900;
}

.last-main span,
.last-main strong,
.last-qty span,
.last-qty strong {
  display:block;
}

.last-main span,
.last-qty span {
  color:#067647;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
}

.last-main strong {
  font-size:14px;
  margin-top:2px;
}

.last-qty {
  text-align:right;
}

.last-qty strong {
  margin-top:2px;
  font-size:18px;
}

.section-head {
  display:flex;

  align-items:center;
  justify-content:space-between;

  margin-bottom:10px;
}

.section-head h2 {
  margin:0;

  font-size:14px;
}

.link-button {
  border:0;
  background:none;

  color:#667085;

  font-size:10px;
  font-weight:750;
}

.records {
  display:flex;
  flex-direction:column;
}

.record {
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap:10px;

  align-items:center;

  padding:11px 0;

  border-bottom:
    1px solid #eaecf0;
}

.record:last-child {
  border-bottom:0;
}

.record-product strong,
.record-product span {
  display:block;
}

.record-product strong {
  font-size:13px;
}

.record-product span {
  color:var(--muted);

  font-size:9px;

  margin-top:2px;
}

.record-qty {
  min-width:42px;

  text-align:center;

  padding:6px 9px;

  background:#f2f4f7;

  border-radius:9px;

  font-weight:850;
}

.new-tag {
  display:inline-block !important;

  width:max-content;

  margin-top:4px !important;

  padding:2px 6px;

  border-radius:999px;

  color:#175cd3 !important;
  background:#eff8ff;

  font-size:8px !important;
  font-weight:850;
}

.empty {
  padding:18px 0;

  text-align:center;

  color:var(--muted);

  font-size:11px;
}

.finish-button {
  width:100%;

  min-height:50px;

  border:
    1px solid #344054;

  border-radius:13px;

  background:#101828;

  color:white;

  font-size:13px;
  font-weight:850;
}

.modal {
  position:fixed;

  inset:0;

  z-index:1000;

  background:
    rgba(15,23,42,.70);

  display:grid;
  place-items:center;

  padding:18px;
}

.modal-card {
  width:min(380px,100%);

  padding:24px;

  background:#fff;

  border-radius:20px;

  text-align:center;

  box-shadow:
    0 25px 60px
    rgba(15,23,42,.30);
}

.alert-icon,
.finish-icon {
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  margin:0 auto 10px;

  border-radius:50%;

  font-size:22px;
  font-weight:900;
}

.alert-icon {
  color:var(--yellow);
  background:var(--yellow-bg);
}

.finish-icon {
  color:var(--green);
  background:var(--green-bg);
}

.modal-label {
  color:var(--yellow);

  font-size:9px;
  font-weight:900;

  letter-spacing:.12em;
}

.modal-card h2 {
  margin:5px 0 7px;

  font-size:21px;
}

.modal-card p {
  margin:5px 0;

  color:var(--muted);

  font-size:12px;
  line-height:1.45;
}

.modal-detail {
  font-size:10px !important;
}

.modal-actions {
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:9px;

  margin-top:18px;
}

.secondary-button {
  min-height:46px;

  border:0;
  border-radius:11px;

  background:#f2f4f7;

  color:#344054;

  font-weight:800;
}

.compact {
  min-height:46px !important;
  margin:0 !important;
}

.final-summary {
  margin:17px 0;

  padding:12px;

  border-radius:12px;

  background:#f8fafc;
}

.final-summary span,
.final-summary strong {
  display:block;
}

.final-summary span {
  color:var(--muted);
  font-size:10px;
}

.final-summary strong {
  margin-top:2px;
  font-size:24px;
}

.scanner-modal {
  position:fixed;

  inset:0;

  z-index:2000;

  display:none;
  align-items:center;
  justify-content:center;

  padding:14px;

  background:
    rgba(15,23,42,.88);
}

.scanner-modal.active {
  display:flex;
}

.scanner-box {
  width:min(520px,100%);

  padding:18px;

  border-radius:18px;

  background:#fff;

  text-align:center;
}

.scanner-box h2 {
  margin:0 0 4px;
}

.scanner-box p {
  margin:0 0 12px;

  color:var(--muted);

  font-size:11px;
}

#scannerReader {
  width:100%;
}

.scanner-close {
  width:100%;

  min-height:46px;

  margin-top:12px;

  border:0;
  border-radius:11px;

  background:#101828;
  color:#fff;

  font-weight:850;
}

.toast {
  position:fixed;

  z-index:3000;

  left:50%;
  bottom:24px;

  transform:
    translate(-50%,20px);

  width:
    min(calc(100% - 28px),420px);

  padding:11px 14px;

  border-radius:11px;

  background:#101828;
  color:#fff;

  text-align:center;

  font-size:11px;

  opacity:0;
  pointer-events:none;

  transition:.18s ease;
}

.toast.show {
  opacity:1;

  transform:
    translate(-50%,0);
}

@media (min-width:700px) {

  .app {
    max-width:540px;

    margin:auto;

    background:var(--bg);

    min-height:100vh;

    box-shadow:
      0 0 40px
      rgba(15,23,42,.09);
  }

}

/* Compatibilidad scanner original Mangueras */
.scanner-modal.active,
.scanner-modal.show,
.scanner-modal.open {
  display: flex !important;
}