:root {
      --ink: #1f1b18;
      --muted: #716b64;
      --cream: #fff8ec;
      --paper: #ffffff;
      --red: #ed2c32;
      --red-dark: #b91522;
      --red-soft: #fff0f1;
      --green: #198754;
      --green-soft: #eaf8f0;
      --yellow: #f5c842;
      --line: #e9e2d7;
      --shadow: 0 10px 34px rgba(76, 52, 28, .10);
      --radius: 22px;
    }

    * { box-sizing: border-box; }
    html { min-height: 100%; background: var(--cream); }
    body {
      margin: 0;
      min-height: 100vh;
      color: var(--ink);
      background:
        radial-gradient(circle at 100% 0, rgba(245, 200, 66, .20), transparent 32rem),
        var(--cream);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 16px;
      line-height: 1.4;
    }

    button, select, input { font: inherit; }
    button { cursor: pointer; }

    .shell {
      width: min(100%, 620px);
      min-height: 100vh;
      margin: 0 auto;
      padding: 18px 16px calc(118px + env(safe-area-inset-bottom));
    }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 22px;
    }

    .brand { display: flex; align-items: center; gap: 11px; }
    .mark {
      width: 48px;
      height: 48px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      background: var(--red);
      color: white;
      box-shadow: 0 8px 18px rgba(237, 44, 50, .24);
      font-weight: 950;
      letter-spacing: -.08em;
    }
    .brand strong { display: block; font-size: 1rem; letter-spacing: -.02em; }
    .brand small { color: var(--muted); font-weight: 650; }

    .ghost {
      border: 1px solid var(--line);
      background: rgba(255,255,255,.78);
      border-radius: 999px;
      padding: 9px 13px;
      color: var(--muted);
      font-size: .82rem;
      font-weight: 800;
    }

    .progress {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 7px;
      margin: 0 0 26px;
    }
    .progress span {
      height: 6px;
      border-radius: 99px;
      background: #e4ddd3;
      transition: .25s ease;
    }
    .progress span.active { background: var(--red); }

    .eyebrow {
      margin: 0 0 7px;
      color: var(--red-dark);
      font-size: .76rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .09em;
    }
    h1 {
      margin: 0;
      max-width: 510px;
      font-size: clamp(1.85rem, 7vw, 2.6rem);
      line-height: 1.03;
      letter-spacing: -.055em;
    }
    .lead { margin: 10px 0 22px; color: var(--muted); }

    .section-title {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 12px;
      margin: 25px 2px 12px;
    }
    .section-title h2 { margin: 0; font-size: 1rem; letter-spacing: -.02em; }
    .section-title small { color: var(--muted); }

    .location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .location {
      min-height: 68px;
      padding: 13px 12px;
      border: 2px solid transparent;
      border-radius: 18px;
      background: var(--paper);
      color: var(--ink);
      box-shadow: 0 6px 20px rgba(76,52,28,.06);
      text-align: left;
      font-weight: 850;
    }
    .location span { display: block; margin-top: 3px; color: var(--muted); font-size: .76rem; font-weight: 650; }
    .location.selected { border-color: var(--red); background: var(--red-soft); }

    .carryover {
      display: none;
      margin: 18px 0 8px;
      padding: 16px;
      border: 1px solid #ebbd33;
      border-radius: var(--radius);
      background: #fff7d8;
      box-shadow: 0 7px 22px rgba(132, 91, 0, .08);
    }
    .carryover.visible { display: block; }
    .carryover-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .carryover-icon { font-size: 1.3rem; }
    .carryover strong { display: block; }
    .carryover small { color: #78621e; }
    .carry-row { padding: 9px 0; border-top: 1px solid rgba(133, 101, 18, .15); font-weight: 750; }
    .carry-row span { float: right; }

    .product-list { display: grid; gap: 10px; }
    .catalog-tools { display: flex; gap: 8px; margin: 13px 0; }
    .category-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 1px 0 12px; }
    .category-strip button { border: 1px solid var(--line); border-radius: 13px; background: white; padding: 10px; color: var(--ink); font-size: .85rem; font-weight: 800; text-align: left; }
    .category-strip button.selected { background: var(--ink); border-color: var(--ink); color: white; }
    .category-strip small { opacity: .65; margin-left: 4px; }
    .selection { padding: 14px; border: 1px solid #e9c4c5; border-radius: 18px; background: #fff6f5; margin: 17px 0 20px; }
    .selection summary { cursor: pointer; font-size: 1rem; font-weight: 850; }
    .selection[open] summary { margin-bottom: 9px; }
    .selection .product { box-shadow: none; }
    .catalog-hint { margin: 0 2px 10px; color: var(--muted); font-size: .87rem; }
    .catalog-tools input, .add-product input, .add-product select { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 13px; background: white; padding: 12px; color: var(--ink); }
    .catalog-tools input { flex: 1; }
    .tool-button { border: 1px solid var(--line); border-radius: 13px; background: white; padding: 10px 13px; font-weight: 800; }
    .catalog-panel { margin: 12px 0 20px; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: white; }
    .catalog-panel h2 { margin: 0 0 10px; font-size: 1rem; }
    .add-product { display: grid; grid-template-columns: 1fr 100px; gap: 7px; }
    .add-product select, .add-product button { grid-column: span 1; }
    .manage-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, 140px) auto; align-items: center; gap: 7px; border-top: 1px solid var(--line); padding: 10px 0; }
    .manage-row select { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 10px; background: white; padding: 9px 5px; font-size: .82rem; }
    @media (max-width: 430px) { .manage-row { grid-template-columns: minmax(0, 1fr) auto; } .manage-row select { grid-column: 1 / -1; grid-row: 2; } }
    .manage-row small { color: var(--muted); }
    .manage-row button { border: 0; background: var(--red-soft); color: var(--red-dark); border-radius: 10px; padding: 8px 10px; font-weight: 800; }
    .history-card { margin: 18px 0 4px; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: white; }
    .history-card h2 { margin: 0 0 8px; font-size: 1rem; }
    .history-card p { margin: 7px 0; color: var(--muted); }
    .history-card summary { cursor: pointer; font-weight: 800; }
    .history-card ul { padding-left: 20px; margin: 9px 0; }
    .history-card li { margin: 5px 0; }
    .history-delete { margin-top: 12px; color: var(--red-dark); background: white; border: 1px solid #e5acb0; border-radius: 11px; padding: 9px 12px; font-weight: 800; }
    .catalog-panel > input { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 11px; margin: 14px 0 7px; }
    .category-form { display: flex; gap: 7px; margin: 12px 0; }
    .category-form input { min-width: 0; flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 11px; }
    .empty { color: var(--muted); padding: 16px; text-align: center; }
    .product {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 19px;
      background: var(--paper);
      box-shadow: 0 5px 18px rgba(76,52,28,.045);
      transition: border-color .2s, background .2s, transform .2s;
    }
    .product.has-qty { border-color: rgba(237,44,50,.4); background: #fffafa; }
    .product.is-loaded { border-color: rgba(25,135,84,.45); background: var(--green-soft); }
    .product-icon { display: none; }
    .product-name { min-width: 0; }
    .product-name strong { display: block; font-size: .95rem; }
    .product-name small { color: var(--muted); }
    .old-amount { color: var(--red-dark) !important; font-weight: 800; }

    .stepper { display: grid; grid-template-columns: 36px 34px 36px; align-items: center; gap: 2px; }
    .stepper button {
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 11px;
      background: #f3eee7;
      color: var(--ink);
      font-size: 1.2rem;
      font-weight: 850;
    }
    .stepper button:disabled { opacity: .4; cursor: not-allowed; }
    .stepper output { text-align: center; font-weight: 900; }

    .loading-card {
      padding: 15px;
      border: 2px solid var(--red);
      border-radius: var(--radius);
      background: var(--red-soft);
      box-shadow: 0 7px 20px rgba(126,25,32,.07);
      transition: .22s ease;
    }
    .loading-card.loaded { border-color: var(--green); background: var(--green-soft); }
    .loading-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
    .loading-top strong { display: block; }
    .loading-top small { color: var(--muted); }
    .status {
      flex: none;
      padding: 5px 9px;
      border-radius: 999px;
      background: var(--red);
      color: white;
      font-size: .7rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .loaded .status { background: var(--green); }
    .load-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
    .loaded-count { font-size: .86rem; font-weight: 800; }
    .loaded-count b { font-size: 1.15rem; }
    .quick-load {
      border: 0;
      border-radius: 13px;
      background: var(--ink);
      color: white;
      padding: 11px 14px;
      font-size: .82rem;
      font-weight: 850;
    }
    .loaded .quick-load { background: var(--green); }
    .mini-stepper { display: flex; align-items: center; gap: 5px; }
    .mini-stepper button {
      width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 12px; background: white; font-weight: 900;
    }
    .mini-stepper output { width: 26px; text-align: center; font-weight: 950; }
    .remainder {
      display: none;
      margin: 11px 0 0;
      padding-top: 10px;
      border-top: 1px solid rgba(112,58,61,.13);
      color: var(--red-dark);
      font-size: .82rem;
      font-weight: 800;
    }
    .remainder.visible { display: block; }

    .summary {
      padding: 19px;
      border-radius: var(--radius);
      background: var(--paper);
      box-shadow: var(--shadow);
    }
    .summary-line { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; border-bottom: 1px solid var(--line); }
    .summary-line:last-child { border-bottom: 0; }
    .summary-line span { color: var(--muted); }
    .summary-line strong { text-align: right; }
    .success-badge {
      width: 72px; height: 72px; display: grid; place-items: center; margin: 5px 0 18px; border-radius: 24px;
      background: var(--green-soft); color: var(--green); font-size: 2rem; font-weight: 950;
    }

    .bottom-bar {
      position: fixed;
      z-index: 5;
      left: 50%;
      bottom: 0;
      width: min(100%, 620px);
      transform: translateX(-50%);
      padding: 13px 16px calc(13px + env(safe-area-inset-bottom));
      background: linear-gradient(to top, var(--cream) 72%, rgba(255,248,236,0));
    }
    .primary {
      width: 100%;
      min-height: 56px;
      border: 0;
      border-radius: 17px;
      background: var(--red);
      color: white;
      box-shadow: 0 10px 24px rgba(237,44,50,.25);
      font-weight: 900;
      letter-spacing: -.01em;
    }
    .primary:disabled { background: #c9c1b8; box-shadow: none; cursor: not-allowed; }
    .primary.green { background: var(--green); box-shadow: 0 10px 24px rgba(25,135,84,.22); }
    .secondary {
      width: 100%; min-height: 50px; margin-top: 9px; border: 1px solid var(--line); border-radius: 15px; background: white; color: var(--ink); font-weight: 850;
    }

    .screen { display: none; animation: in .24s ease both; }
    .screen.active { display: block; }
    @keyframes in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

    dialog {
      width: min(calc(100% - 28px), 520px);
      border: 0;
      border-radius: 26px;
      padding: 0;
      color: var(--ink);
      box-shadow: 0 22px 80px rgba(0,0,0,.25);
    }
    dialog::backdrop { background: rgba(35,26,20,.56); backdrop-filter: blur(4px); }
    .modal-body { padding: 22px; }
    .modal-body h2 { margin: 0 0 7px; font-size: 1.35rem; letter-spacing: -.03em; }
    .modal-body > p { margin: 0 0 17px; color: var(--muted); }
    .wa-preview { padding: 14px; border-radius: 16px; background: #e8f6df; color: #20361b; white-space: pre-line; font-size: .88rem; }
    .modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }
    .modal-actions button, .modal-actions a {
      min-height: 49px; display: grid; place-items: center; border: 0; border-radius: 14px; text-decoration: none; font-weight: 850;
    }
    .cancel { background: #eee9e2; color: var(--ink); }
    .whatsapp { background: #1fa855; color: white; }

    .toast {
      position: fixed; z-index: 10; left: 50%; top: 18px; transform: translate(-50%, -130%);
      width: min(calc(100% - 28px), 520px); padding: 13px 16px; border-radius: 14px; background: var(--ink); color: white;
      box-shadow: var(--shadow); font-size: .88rem; font-weight: 750; transition: transform .25s ease;
    }
    .toast.show { transform: translate(-50%, 0); }

    @media (min-width: 680px) {
      .shell { padding-top: 32px; }
      .product { padding: 14px; }
      .category-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
  
.card{background:white;border:1px solid var(--line);border-radius:18px;padding:16px;margin:16px 0}.card h2{font-size:1rem;margin:0 0 12px}.muted,small{color:var(--muted)}.row,.actions,.tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.row{justify-content:space-between}.tabs{margin:16px 0}.tabs button,.button,button:not([class]){padding:10px 13px;border:1px solid var(--line);border-radius:13px;background:white;color:var(--ink);font-weight:750}.tabs .selected{background:var(--ink);color:white}a.button{text-decoration:none;display:inline-block}.separator{border-top:1px solid var(--line);margin-top:18px;padding-top:15px}label{display:block;margin:12px 0 5px}input,select{max-width:100%;padding:12px;border:1px solid var(--line);border-radius:13px;font:inherit;background:white;color:var(--ink)}input:not([type=number]),select{width:100%}.grid{display:grid;grid-template-columns:1fr 100px;gap:8px}.stepper{grid-template-columns:36px 48px 36px}.stepper input{width:48px;text-align:center;padding:7px 2px;border-radius:8px;font-weight:850;appearance:textfield}.stepper input::-webkit-inner-spin-button{appearance:none}.product-list .product{margin:0}.history-item{padding:12px 0;border-bottom:1px solid var(--line)}.history-item summary{cursor:pointer}.history-item .product,.card>.product{margin-top:8px}.actions{margin-top:12px}.danger{color:var(--red-dark)!important}.heading{margin-bottom:16px}.auth .primary{margin-top:16px}.auth h1{font-size:2rem}.wrap{grid-template-columns:1fr}.toast.error{background:var(--red-dark)}.loading-card .primary{min-height:40px}.load-controls{flex-wrap:wrap}.link-field{font-size:.8rem}button:disabled{opacity:.55;cursor:wait}.notice{padding:14px;background:var(--red-soft);border-radius:12px}nav a{color:var(--red-dark)}.progress{margin-top:18px}.user-row{border-top:1px solid var(--line);padding:15px 0}.product-name{overflow-wrap:anywhere}a{overflow-wrap:anywhere}input:invalid{border-color:var(--red)}

/* Revisión de pedidos, septiembre de 2026. */
[hidden]{display:none!important}
.review-list{margin-top:18px}.review-card h2{font-size:1.05rem}.review-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.review-line small{display:block}.review-total{font-weight:850;color:var(--red-dark)}.review-line>strong{text-align:right}.load-filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.load-filters [aria-pressed="true"]{background:var(--ink);color:white}.review-card .stepper{flex:none}.review-list .card{margin:10px 0}.bottom-bar p{margin:7px 0 11px;font-size:.9rem}.product.has-qty{border-color:var(--red);background:var(--red-soft)}
@media(max-width:430px){.stepper{grid-template-columns:40px 48px 40px}.stepper button{width:40px;height:44px}.stepper input{min-height:44px}.tabs{gap:6px}.tabs button{padding:10px;font-size:.88rem}.review-line{gap:8px}.review-line>span{font-size:.9rem}.category-strip button{min-height:44px}.shell{padding-bottom:calc(140px + env(safe-area-inset-bottom))}}

/* Lista de pedidos guardados. */
.section-content{margin-top:24px}.order-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:8px}.order-tabs button{min-height:48px;padding:10px 7px;font-size:.85rem}.utility-tabs{margin-top:0;gap:6px}.utility-tabs button{font-size:.8rem;padding:8px 10px}.pending-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.pending-heading h2{margin:0}.order-status{border-radius:99px;padding:5px 9px;background:#fff2c6;color:#725008;font-size:.75rem;font-weight:800}.pending-order p{margin:12px 0}.order-actions{display:grid;gap:8px}.order-actions .secondary{margin:0}.pending-orders .card{margin:12px 0}.history-status{color:var(--green);font-size:.85rem;font-weight:750}.pending-order .primary{min-height:48px}.section-content>.actions{margin-bottom:16px}